เทคนิคการสร้างเว็บใหม่และวิธีแก้ปัญหาทั่วไป

เทคนิคการสร้างเว็บใหม่และวิธีแก้ปัญหาทั่วไป

1. ทักษะ xhtml+CSS

●งานเตรียมการที่ต้องทำก่อนการปรับโครงสร้างใหม่:

1. รับการเรนเดอร์ PSD ต้องเป็น PSD เพื่อให้คุณสามารถแบ่งส่วนได้อย่างอิสระมากขึ้นด้วยตัวเอง

2. ขั้นแรกให้สร้างหน้าเว็บโดยไม่ต้องแบ่งไฟล์ PSD และตั้งชื่อเป็น index_psd.html (หน้านี้ใช้สำหรับการอ้างอิง)

3. เตรียมอิมเมจโฟลเดอร์ที่จำเป็นหลายอัน (สำหรับรูปภาพ), css (สำหรับไฟล์สไตล์ css) และ js (สำหรับไฟล์ js)

●หลังจากการเตรียมการเสร็จสิ้น ให้วิเคราะห์โครงสร้างของทั้งหน้าก่อน ในการวิเคราะห์โครงสร้างของหน้า ขั้นแรกให้ดูที่ส่วนทั้งหมด จากนั้นจึงดูว่าส่วนที่ใหญ่ที่สุดของหน้ามีความสัมพันธ์กันอย่างไร ไม่ว่าจะวางชิดกันขึ้นและลง หรือเรียงต่อกันไปทางซ้ายและขวา หลังจากเห็นโครงสร้างส่วนขนาดใหญ่ของหน้าอย่างชัดเจนแล้ว คุณสามารถสร้างบล็อกพื้นฐานที่สุดของหน้าได้ ตัวอย่างเช่น หากเพจของเรามีโครงสร้างบน กลาง และล่าง เราสามารถเขียนได้:

<div id=”header”></div>//วางส่วนหัวและการนำทาง ฯลฯ

<div id="content"></div>//เนื้อหาธีมของหน้า

<div id=”footer”></div>//คำชี้แจงลิขสิทธิ์ส่วนท้ายของหน้า ฯลฯ

●เมื่อเขียน CSS คุณต้องใช้ไฟล์ index_psd.html เปิดไฟล์นี้ด้วย DW และเลือกโหมดมุมมอง คุณสามารถวัดความยาวและความกว้างของแต่ละบล็อกได้โดยการดึงบรรทัดเสริมเพื่อเป็นข้อมูลอ้างอิงสำหรับการตั้งค่า CSS ข้อดีของสิ่งนี้คือ เพจที่สร้างขึ้นใหม่สามารถแม่นยำถึง 1 พิกเซล

●ทุกครั้งที่คุณเขียนบล็อก คุณจะต้องใช้ IE และ ff เพื่อทดสอบเอฟเฟกต์เพื่อให้สามารถค้นพบและแก้ไขปัญหาได้ทันที เมื่อแต่ละบล็อกไม่มีเนื้อหา วิธีที่ดีที่สุดคือเพิ่มสีพื้นหลังให้กับบล็อกเหล่านั้น

●หลังจากเขียนส่วนใหญ่แล้ว ให้วิเคราะห์เนื้อหาในส่วนใหญ่ หลักการเดียวกันคือเริ่มจากเนื้อหาทั้งหมดแล้วจึงค่อยวิเคราะห์เนื้อหาในส่วนนี้ เวลา เราสามารถเขียนโค้ดได้เป็น:

<div id=”header”></div>//วางส่วนหัวและการนำทาง ฯลฯ

<div id="content"//เนื้อหาธีมของเพจ

<div class="content-2-1"></div>//ซ้าย

<div class="content-2-2"></div>//right

</div>

<div id=”footer”></div>//คำชี้แจงลิขสิทธิ์ส่วนท้ายของหน้า ฯลฯ

ตารางที่ 2 ในเนื้อหา-2-1 แบ่งออกเป็นสองคอลัมน์ 2-1 หมายถึงคอลัมน์ด้านซ้าย และ 2-2 หมายถึงคอลัมน์ด้านขวา คอลัมน์นี้ ข้อดีมีความชัดเจนมากขึ้น

●รายการข่าว รายการบทความ ฯลฯ เหมาะที่สุด:

<ul>

<li>หัวข้อข่าว 1< >

<li>หัวข้อข่าว 2< >

-

<li>หัวข้อข่าว< >

</ul>

●รายการคอลัมน์พร้อมคำอธิบายเหมาะที่สุด:

<ดล>

<dt>คอลัมน์ 1</dt>

<dl>คำอธิบายของคอลัมน์ 1</dl>

<dt>คอลัมน์ 2</dt>

<dl>คำอธิบายของคอลัมน์ 2</dl>

</ดล>

●วิธีที่ดีที่สุดคือเพิ่มข้อความต่อไปนี้ที่ตอนต้นของคำจำกัดความไฟล์ CSS

ร่างกาย,html{ ความสูง:100%;

*{ ระยะขอบ:0px; ช่องว่างภายใน:0px;

●วิธีที่ดีที่สุดคือตั้งค่า overflow::hidden สำหรับบล็อกขนาดใหญ่ เพื่อให้แน่ใจว่าคอนเทนเนอร์จะไม่ยืดออก ซึ่งจะทำลายเลย์เอาต์ของทั้งหน้า

2. ปัญหา DIV+CSS

1. ปัญหาว่างเปล่าที่ไม่คาดคิด IE6:

เมื่อบล็อกเล็กๆ หลายบล็อกวางเรียงกันในบล็อกขนาดใหญ่ ผลรวมของความกว้างของบล็อกเล็กจะเท่ากับความกว้างของบล็อกใหญ่ ซึ่งไม่มีปัญหาในเบราว์เซอร์อื่นๆ เช่น FF แต่ใน IE6 มีเพียงเท่านั้น หนึ่งบล็อก หากไม่สามารถแสดงได้จะถูกผลักไว้ข้างใต้ ในเวลานี้ คุณสามารถตั้งค่า css ของบล็อกขนาดเล็กให้แสดง: แบบอินไลน์ได้ หากไม่ได้ผล ให้ลดความกว้างของแต่ละบล็อกลง 1 หรือ 2 พิกเซล

2. ปัญหาโกสต์ IE6:

บางครั้งใน IE6 อักขระสองสามตัวที่ส่วนท้ายของเนื้อหา div จะปรากฏซ้ำที่ด้านล่างของ DIV ขนาดใหญ่ ซึ่งไม่ปรากฏในเบราว์เซอร์อื่น เช่น FF มีสองวิธีในการแก้ปัญหานี้: 1) ลบความคิดเห็น; 2) เพิ่ม <div class="clear"></div> หลัง DIV นี้ กำหนดรูปแบบ CSS ของ clear เป็น:

.ชัดเจน {

ขนาดตัวอักษร: 1px;

ชัดเจน: ทั้งสอง;

การมองเห็น: ซ่อนเร้น;

ความกว้าง: 1px;

-

ขอแนะนำให้ใช้วิธีที่สอง หากความคิดเห็นถูกลบ ความสามารถในการอ่านโค้ดจะได้รับผลกระทบ

3. ปัญหากับ IE6 ไม่สามารถจัดกึ่งกลางได้:

โดยทั่วไป ตราบใดที่คุณตั้งค่าสไตล์ css สำหรับ div (ตั้งค่า id เป็น 1): margin:0px auto; คุณสามารถจัดกึ่งกลาง div ในคอนเทนเนอร์ที่เก็บมันไว้ได้ (ตั้งค่า id เป็น 0) ดังต่อไปนี้:

<div id="0">

<div id="1"> … </div>

</div>

แต่ IE6 ใช้งานไม่ได้ ในขณะนี้ คุณสามารถตั้งค่า css ของ div0: text-align: center;

4. เส้นขอบที่ไม่คาดคิดปรากฏบนรูปภาพที่เชื่อมโยงใน IE6

ใน IE6 บางครั้งรูปภาพที่เชื่อมโยงจะมีเส้นขอบที่น่าเกลียด ซึ่งมีสาเหตุมาจาก <a> ซึ่งสามารถแก้ไขได้โดยการตั้งค่า { border:0px;} ใน CSS

5. เนื้อหาภายใน DIV ใน FF หยุดชะงัก

บางครั้งเนื้อหาที่ดูปกติใน IE ก็สามารถเห็นได้ใน FF แต่เนื้อหาภายใน DIV หายไปจากภายนอก สถานการณ์นี้จะเห็นได้ชัดเจนโดยเฉพาะเมื่อ div มีขอบเขต เนื่องจากหลังจากตั้งค่าความสูงของ div ใน IE แล้ว หากเนื้อหาภายใน div สูงกว่า div div จะเพิ่มความสูงโดยอัตโนมัติ แต่ FF นั้นไม่ยืดหยุ่นเท่าไหร่ ตราบใดที่ความสูงมีจำกัด มันก็จะไม่เปลี่ยนแปลงไปเอง ในเวลานี้ คุณสามารถแก้ไขปัญหานี้ได้ด้วยการรีเซ็ตความสูง หรือคุณสามารถตั้งค่าความสูงเป็นอัตโนมัติได้

6. พื้นที่หายไปอย่างกะทันหันใน FF

เค้าโครงปกติใน IE หายไปใน FF ปัญหานี้มักเกิดขึ้นในบล็อกลิขสิทธิ์ที่มุมด้านล่างของหน้า ซึ่งสามารถแก้ไขได้โดยการเพิ่ม: clear:both;

ฉันไม่สามารถคิดถึงปัญหาอื่น ๆ ได้ในขณะนี้ จะมีปัญหาที่อธิบายไม่ได้เสมอในระหว่างกระบวนการสร้างใหม่ ตราบใดที่คุณคิดเก่ง ทดสอบปัญหา หรือค้นหาข้อมูลทางออนไลน์ คุณจะพบวิธีแก้ปัญหาเสมอ การแก้ปัญหาทุกปัญหาคือผลประโยชน์มหาศาล