โดยทั่วไปแล้วงานที่เสร็จสมบูรณ์โดยการออกแบบเว็บเป็นจริง: แปลงการเรนเดอร์ PSD เป็นหน้าเทมเพลต HTML+CSS โดยทั่วไปเราจะได้รับ PSD ของศิลปินและผู้คนที่แตกต่างกันจะมีวิธีการที่แตกต่างกัน:
1. เปิดดอกไม้ไฟและส่งออกภาพไปยัง HTML
2. ใช้เครื่องมือโดยตรงเช่น Dreamweaver เพื่อลากและจัดวางเค้าโครงนำเข้ารูปภาพที่เกี่ยวข้องและทรัพยากรแฟลช
3. หลังจากเสร็จสิ้นการตัดใน PS ก่อนอื่นดูการเรนเดอร์ในตัวแก้ไขข้อความและทำให้พวกเขาทีละขั้นตอน
ข้างต้นเป็นวิธีการที่ใช้กันมากที่สุด แต่ไม่มีวิธีใดที่ดี:
วิธีแรกคือวิธีที่เลวร้ายที่สุดรหัสดังกล่าวจะไม่ได้รับการบำรุงรักษาหรืออ่านได้เลย
วิธีที่สองไม่ดีเช่นกันรหัสจะซ้ำซ้อนอย่างหลีกเลี่ยงไม่ได้และสิ่งที่คุณต้องตรวจสอบ
วิธีที่สามไม่ดีเช่นกันเพราะคุณต้องดูการเรนเดอร์ทีละบิตนั่นคือเมื่อเขียนแท็ก HTML คุณมักจะสมมติว่าจะแสดงผลงานชิ้นนี้ได้อย่างต่อเนื่อง
วิธีที่ถูกต้องในการทำ:
1. หลังจากได้รับ PSD อย่าทำอย่างอื่นก่อน เขียนเฟรมเวิร์กหน้าเว็บโดยตรงในตัวแก้ไขข้อความ อย่าคิดว่าจะแสดง CSS นี้อย่างไรในอนาคต เป็นป้ายกำกับสัญชาติที่สมบูรณ์โดยไม่ต้องเพิ่ม CSS ใด ๆ
2. หลังจากเขียนตรวจสอบให้แน่ใจว่าไม่มีปัญหากับการวางตำแหน่งโดยรวมหลังจากเรียกใช้แต่ละเบราว์เซอร์
3. เขียน CSS โดยรวมที่นี่ CSS รับผิดชอบเฉพาะการวางตำแหน่งและรูปแบบของบล็อกขนาดใหญ่
4. ตัดทรัพยากรรูปภาพที่จำเป็นออกมาทีละบิตในกรอบการเขียนที่เป็นลายลักษณ์อักษรดีบั๊กอย่างต่อเนื่องและในที่สุดก็กลายเป็นผลิตภัณฑ์สำเร็จรูป
5. ในที่สุดเพิ่มความคิดเห็นในรหัสของคุณเองและเพิ่มความคิดเห็นในรหัสของคุณเองอย่างเหมาะสมทั้งใน CSS และ HTML
ยังมีอีกหลายสิ่งที่จะให้ความสนใจหากเราต้องการเปลี่ยนความยืดหยุ่นเพื่อให้ผิวและปล่อยให้ CSS ครองประสิทธิภาพ แต่กระบวนการทั่วไปเป็นเช่นนี้ แน่นอนว่าเราไม่สามารถเขียน HTML ได้โดยตรงในตอนแรก แต่อย่างน้อยเราต้องมีการรับรู้นี้และดำเนินการทีละขั้นตอน - -
ไฟล์ PSD ตัดเว็บไซต์จากสองประเด็นหลัก:
1. หน้าอิสระ
1. วิเคราะห์หน้านี้และอธิบายโครงสร้างทั่วไปในหัวของคุณหรือบนกระดาษร่าง
2. ตามสถานการณ์ของร่างการออกแบบวิเคราะห์การกระจายภาพพื้นหลังการกระจายของภาพ ICO ฯลฯ
3. ตัดรูปภาพที่เกี่ยวข้องส่งออกและรวมรูปภาพ
4. เขียนรหัสโครงสร้างโดยรวม XHTML ในตัวแก้ไขรวมถึงโครงสร้างขององค์ประกอบทั้งหมดที่ปรากฏในหน้า
5. เขียนรหัสโดยรวมและโมดูลในสไตล์ CSS
6. การปรับรายละเอียด
7. หลังการทำงานเบราว์เซอร์จะตรวจสอบว่าถูกต้องหรือไม่
2. ไซต์ขนาดเล็กหรือขนาดใหญ่ประกอบด้วยหลายหน้า
1. เรียกดูร่างการออกแบบทั้งหมดและรวมการกระจายของโมดูลไซต์รูปภาพและไฟล์
2. เริ่มต้นจุดแรกของการดำเนินการ แต่เป็นสิ่งสำคัญในการวางแผนการกระจายเนื้อหาของเว็บไซต์
การพิจารณาโดยรวม:
1. การผสานรูปภาพเพื่อลดจำนวนคำขอ
2. ความมีเหตุผลเชิงโครงสร้างและความหมาย
3. ความเรียบง่ายของสไตล์ทำให้ง่ายต่อการบำรุงรักษาในภายหลัง
4. ส่วนใหญ่พิจารณาการบำรุงรักษาและการพัฒนาโปรแกรมในภายหลังวิธีการบรรลุผล