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

ดังนั้นการออกแบบเว็บคืออะไร? การออกแบบเว็บไซต์เป็นสาขาการออกแบบที่เกี่ยวข้องกับการพัฒนาเว็บ การออกแบบกราฟิกของโครงสร้างเว็บไซต์ และการออกแบบส่วนต่อประสานเว็บของผู้ใช้ กล่าวอีกนัยหนึ่ง การออกแบบเว็บไซต์เป็นโครงสร้างเชิงตรรกะของหน้าเว็บ โดยมีการนำเสนอข้อมูลที่สะดวกและชัดเจน รวมถึงการออกแบบทางศิลปะของทรัพยากรอินเทอร์เน็ต หน้าที่ของเว็บไซต์คือการถ่ายทอดข้อมูลที่จำเป็นไปยังผู้ชมต่างๆ และการออกแบบเว็บไซต์ที่ถูกต้องจะเข้ามาแทนที่เราด้วยสื่อมวลชนประเภทหนึ่งซึ่งเป็นข้อดีที่หลายคนรู้จัก เพราะเป็นทรัพยากรอินเทอร์เน็ตที่ไม่จำกัดเวลาและการเข้าถึง เช่น รายการโทรทัศน์หรือหนังสือพิมพ์ที่ได้รับการจัดสรร เวลาที่แน่นอนหรือขนาดคอลัมน์ ในทางตรงกันข้ามเว็บไซต์สามารถเข้าถึงได้จากทุกที่ในโลกตลอดเวลา ถูกเวลา, ฉันจะเข้าถึงอินเทอร์เน็ตได้ที่ไหน

เมื่อสร้างเว็บไซต์ เราต้องระบุงานที่สามารถมอบหมายให้กับนักพัฒนาได้:

• 1. เอกลักษณ์;
• 2. งานหลักประการหนึ่งของการออกแบบหน้าเว็บคือการสร้างเอกลักษณ์และความแตกต่างจากผู้อื่น เพื่อให้บรรลุถึงความแตกต่าง นักออกแบบเว็บไซต์จึงหันไปใช้สีดั้งเดิมและโซลูชันทางศิลปะ โลโก้ที่สดใสและสะดุดตาซึ่งแสดงถึงภาพลักษณ์ของบริษัท ตลอดจนเนื้อหาเว็บไซต์ที่สะดวกและจัดวางอย่างผิดปกติ ในเวลาเดียวกันเราไม่ควรลืมว่าอินเทอร์เฟซควรคงความคล้ายคลึงกันทั่วทั้งไซต์เพื่อให้ผู้เยี่ยมชมสามารถค้นหาข้อมูลที่เขาต้องการได้โดยไม่สับสน
• 3. ดึงดูดความสนใจ

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

4. การให้ข้อมูลที่จำเป็น การออกแบบหน้าเพจไม่ได้เป็นเพียงปกที่สวยงามซึ่งเต็มไปด้วยภาพประกอบและองค์ประกอบกราฟิกที่สดใส นอกจากนี้ยังควรจำไว้ว่าการส่งข้อมูลที่จำเป็นให้กับผู้ใช้ไซต์นั้นมีความสำคัญไม่น้อยไปกว่าที่กล่าวมาข้างต้น

เนื้อหาที่โพสต์บนเว็บไซต์จะต้องได้รับการจัดเรียงและจัดรูปแบบอย่างถูกต้อง โดยเพิ่มกราฟิกและรูปภาพที่เสริมข้อมูล เมื่อเยี่ยมชมเว็บไซต์ผู้ใช้จะต้องค้นหาคำตอบทั้งหมดสำหรับคำถามที่เขาสนใจ การออกแบบดั้งเดิมและการปฏิบัติตามกฎการออกแบบเว็บไซต์ทั้งหมดจะเน้นย้ำถึงความสำคัญของเนื้อหาเสมอ

การตรวจสอบโดยละเอียดเกี่ยวกับกระบวนการสร้างเว็บไซต์จะช่วยให้เราทราบได้อย่างแน่ชัดว่าต้องทำอะไรในขั้นตอนต่างๆ ของการพัฒนา:

1. ข้อกำหนดทางเทคนิค (TOR);

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

2. ข้อมูลโครงสร้าง

ขั้นตอนนี้ประกอบไปด้วยรูปแบบและการจัดระเบียบเนื้อหาของเว็บไซต์ รวมประเด็นต่างๆ มากมาย ตั้งแต่โครงสร้างเชิงตรรกะของเว็บไซต์ไปจนถึงการเลือกรูปแบบการนำเสนอข้อมูลที่สะดวกที่สุด

3. การออกแบบกราฟิก

ใน โปรแกรมแก้ไขกราฟิกพื้นที่การมองเห็นของไซต์ถูกสร้างขึ้นโดยใช้องค์ประกอบกราฟิกเป็นการตกแต่งหรือการนำทาง การออกแบบหน้าเป็นไฟล์กราฟิกขนาดใหญ่

4. เค้าโครง;

ในขั้นตอนนี้ ภาพกราฟิกจะถูกตัดออกเป็นแต่ละองค์ประกอบโดยใช้รูปแบบ HTML (Hyper Text Markup Language) ภาษาจะถูกแปลงเป็นโค้ดที่สามารถดูได้โดยใช้เบราว์เซอร์

5. การทำเว็บมาสเตอร์

ในขั้นตอนสุดท้าย จะดำเนินการเพื่ออำนวยความสะดวกในการเผยแพร่และส่งมอบเว็บไซต์ผ่านเครือข่ายอย่างมีประสิทธิผล ที่นี่เราต้องการโฮสติ้งเพื่อการใช้งานไซต์บนเวิลด์ไวด์เว็บต่อไป

เมื่อสร้างเว็บไซต์ เราไม่ควรปฏิบัติตามหลักเกณฑ์การออกแบบเพจอื่น:

• 1. ความเรียบง่าย;
• 2. การทำเครื่องหมายตรงกลาง
• 3. คอลัมน์จำนวนน้อย
• 4. แยกส่วนบน;
• 5. บล็อกสีสดใส
• 6. การนำทางที่ง่าย
• 7. เพิ่มขนาดตัวอักษร;
• 8. การแทรกข้อความขนาดใหญ่ (มักใช้เป็นองค์ประกอบกราฟิก)
• 9. โลโก้ที่กำหนดเอง

แต่ละไซต์ที่เราเยี่ยมชมทุกวันมีลักษณะลักษณะและการจำแนกประเภทของตัวเอง เว็บไซต์ที่นำเสนอต่อหน้าเรามีหมวดหมู่ต่างๆ มากมายไม่รู้จบ ปัจจุบันมีแหล่งข้อมูลทางอินเทอร์เน็ตที่เกี่ยวข้องหลายประเภท

• – ไซต์การนำเสนอ ไซต์ดังกล่าวนำเสนอข้อมูลเกี่ยวกับบริษัท บริการ ผลิตภัณฑ์ หน้าที่หลักของไซต์นี้คือการนำเสนอเนื้อหาแก่ผู้เยี่ยมชมเพจอย่างมีประสิทธิภาพมากที่สุดโดยใช้การออกแบบภาพ ในไซต์ดังกล่าว มีการเน้นไปที่การออกแบบกราฟิกมากกว่าข้อมูลที่เป็นข้อความ
• – เว็บไซต์ของบริษัทเป็นตัวแทนขององค์กร (บริษัท มหาวิทยาลัย) แต่เฉพาะบนเวิลด์ไวด์เว็บเท่านั้น สำหรับไซต์ดังกล่าวที่มีข้อกำหนดสูงสุดสำหรับการออกแบบเว็บเพจ โครงสร้างที่ชัดเจนและแม่นยำของเว็บไซต์ สีที่เหมาะสม องค์ประกอบกราฟิกที่เป็นเอกลักษณ์ โลโก้ที่ทรงพลังของแต่ละคนจะเน้นและมอบ “ความสนุก” ให้กับเว็บไซต์ดังกล่าว ข้อมูลข้อความมีความสมดุลอย่างเท่าเทียมกันกับการออกแบบกราฟิก
• – แหล่งข้อมูล เว็บไซต์ดังกล่าวส่วนใหญ่มักเป็นห้องสมุด หนังสือพิมพ์ และสื่อต่างๆ ตามกฎแล้ว ข้อมูลที่โพสต์ในทรัพยากรนี้จะได้รับการอัปเดตหลายครั้งต่อวัน ก่อนที่จะพัฒนาเว็บไซต์ประเภทนี้ จำเป็นต้องคำนึงถึงความต้องการของผู้เข้าชมด้วย และนี่คือความต้องการเนื้อหา ไม่ใช่เพื่อการออกแบบที่สวยงาม ข้อมูลข้อความมีโครงสร้างสูงสุด ช่วยให้ผู้เยี่ยมชมสามารถค้นหาข้อมูลที่ต้องการได้ แต่ในทางกลับกัน กราฟิกจะถูกเก็บไว้ให้น้อยที่สุด โดยแสดงเฉพาะข้อเท็จจริงที่ชัดเจนที่เกี่ยวข้องกับเนื้อหาเท่านั้น
• – ร้านค้าอิเล็กทรอนิกส์ซึ่งเป็นไซต์ประเภทนี้ กำหนดหน้าที่ไม่เพียงแต่ดึงดูดความสนใจของผู้เยี่ยมชมไซต์ได้อย่างรวดเร็วและมีประสิทธิภาพด้วยการให้ข้อมูลที่น่าสนใจ แต่ยังรวมไปถึงความสนใจของลูกค้าในการซื้อด้วย เมื่อพัฒนาทรัพยากรบนเว็บ ประการแรกจำเป็นต้องให้ความสำคัญกับการบริการ ค้นหาตามสินค้าและบริการ แคตตาล็อกผลิตภัณฑ์ที่สะดวกและมีสีสัน การสื่อสารที่รวดเร็วพร้อมการสนับสนุน และการลงทะเบียนที่ง่ายดายเมื่อสั่งซื้อมีความสำคัญมากกว่าการออกแบบกราฟิก

งานเกี่ยวกับการออกแบบเว็บกราฟิกคือ ดูซับซ้อนกิจกรรม. ท้ายที่สุด ลองจินตนาการว่านักพัฒนาเว็บไซต์ต้องเผชิญกับงานบรรจุข้อมูลจำนวนมหาศาลไว้ในแหล่งข้อมูลทางอินเทอร์เน็ตเพียงแหล่งเดียวที่กระชับและอ่านง่าย

ความรู้เบื้องต้นเกี่ยวกับการออกแบบเว็บไซต์

• การออกแบบเว็บคืออะไร?
• เหตุใดจึงจำเป็น?
• เครื่องมือที่จำเป็น
• “สมมุติฐาน” พื้นฐานของการออกแบบเว็บไซต์

• เทคโนโลยีการออกแบบเว็บ
• โครงสร้างเชิงตรรกะและทางกายภาพของไซต์
• หน้าแรก
• รูปแบบเว็บไซต์แบบไดนามิกและคงที่
• เค้าโครงหน้าคงที่
• เค้าโครงหน้าแบบไดนามิก

• องค์ประกอบของเว็บเพจ
• จะเริ่มต้นที่ไหน?

การออกแบบเว็บคืออะไร?

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

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

หน้าแรกส่วน; ครอบครัวของฉัน

เรื่องราวเกี่ยวกับภรรยาของฉัน

เรื่องราวเกี่ยวกับลูกชายของฉัน

รูปของฉันบนชายหาดในโซชี

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

หน้าแรก

หนึ่งในเกณฑ์ที่เราสามารถแบ่งเว็บไซต์ต่างๆ ออกเป็นสองประเภทหลักคือการมีอยู่ของ หน้าแรก(สาด) หรือขาดไป

หน้าแรกเป็นเอกสาร HTML ที่ไม่มีเนื้อหาหรือองค์ประกอบการนำทางใดๆ ไฟล์หน้าหลักชื่อ index.html ในขณะที่หน้าเริ่มต้นถูกเรียกต่างกันและถูกเรียกโดยการจัดระเบียบไฮเปอร์ลิงก์จากหน้าหลัก ซึ่งจะโหลดก่อนเมื่อเข้าถึงไซต์ หน้าหลักมักประกอบด้วยโลโก้ของบริษัทที่เป็นเจ้าของแหล่งข้อมูลนี้ ตัวนับการเข้าชม และข้อเสนอในการเลือกการเข้ารหัสซีริลลิก หรือตัวเลือกระหว่างเว็บไซต์เวอร์ชันภาษาอังกฤษและรัสเซีย ตัวอย่างของทรัพยากรบนเว็บที่มาพร้อมกับเพจดังกล่าวจะแสดงในรูป 3.2.

เมื่อเข้าถึงไซต์ที่ไม่มีหน้าชื่อเรื่อง เอกสารแรกที่แสดงคือเอกสารเริ่มต้น ซึ่งรวมถึงเนื้อหาข้อมูลบางส่วน องค์ประกอบการนำทาง และบางครั้งการประกาศหัวข้อเฉพาะเรื่องที่ประกอบเป็นทรัพยากรนี้ ในรูป รูปที่ 3.3 แสดงตัวอย่างเว็บไซต์ที่ไม่มีหน้าชื่อเรื่อง

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

รูปแบบเว็บไซต์แบบไดนามิกและคงที่

การ์ดแสดงผลสมัยใหม่รองรับโหมดวิดีโอที่ตั้งค่าโดยพลการหลายโหมด โดยมีความละเอียดของหน้าจอและจำนวนสีที่ใช้ในการแสดงข้อมูลบนหน้าจอคอมพิวเตอร์ การใช้ฟังก์ชันในตัว ระบบปฏิบัติการผู้ใช้สามารถตั้งค่าความละเอียดหน้าจอมาตรฐานได้หลายค่า เช่น 640x480, 800x600, 1024x768, 1152x864, 1280x1024 หรือ 1600x1200 พิกเซล แน่นอนว่าเมื่อเปิดเว็บเพจในเบราว์เซอร์เดียวกันก็อาจจะไม่แสดงผลในลักษณะเดียวกัน ทั้งนี้ขึ้นอยู่กับความละเอียดหน้าจอที่ผู้เยี่ยมชมเว็บไซต์ใช้

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

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

เค้าโครงหน้าคงที่

ข้อดี. ความเรียบง่ายของอัลกอริธึมเค้าโครงเอกสาร ด้วยการเพิ่มประสิทธิภาพหน้าเว็บของคุณให้แสดงที่ความละเอียดหน้าจอ 640x480 พิกเซล คุณจะมั่นใจได้ว่าองค์ประกอบการออกแบบจะไม่ลอยเมื่อเปลี่ยนการตั้งค่าหน้าจอของผู้ใช้ นอกจากนี้ ในกรณีส่วนใหญ่ ตัวเลือกเค้าโครงไซต์นี้ (ขึ้นอยู่กับเงื่อนไขเพิ่มเติมหลายประการ) ช่วยให้คุณสามารถแสดงเอกสาร HTML ที่เหมือนกันในเบราว์เซอร์ Microsoft อินเทอร์เน็ตเอ็กซ์พลอเรอร์และเน็ตสเคป เนวิเกเตอร์

ข้อบกพร่อง. เมื่อแสดงเอกสารบนคอมพิวเตอร์ที่ความละเอียดหน้าจอสูง มีพื้นที่ว่างที่เห็นได้ชัดเจนบริเวณขอบหน้าจอหรือทางด้านขวาของหน้าจอ

เค้าโครงหน้าแบบไดนามิก

ข้อดี. เอกสารจะขยายเต็มความกว้างของหน้าจอ โดยไม่เหลือระยะขอบว่างที่ไม่ได้ใช้

ข้อบกพร่อง. ความซับซ้อนของเค้าโครงหน้าและการดีบักมักส่งผลให้การแสดงเอกสารดังกล่าวไม่เพียงพอในเบราว์เซอร์ Microsoft Internet Explorer และ Netscape Navigator

หมายเหตุ ค่าพิกเซล (จุดทั่วไป) ที่ใช้ในคำสั่ง HTML แสดงถึงขนาดทางกายภาพของจุดบนหน้าจอของผู้ใช้และขึ้นอยู่กับประเภทของจอภาพ

ตัวอย่างการใช้งานไซต์ที่มีเค้าโครงหน้าคงที่และไดนามิกแสดงไว้ในรูปที่ 1 3.4 และ 3.5 ภาพเหล่านี้ถ่ายด้วยความละเอียดหน้าจอคงที่ 800x600 พิกเซล

องค์ประกอบของเว็บเพจ

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

องค์ประกอบแรกของหน้าเว็บที่เราต้องดูคือชื่อของมัน สามารถทำได้ทั้งในรูปแบบข้อความหรือกราฟิก แต่ในทั้งสองกรณี ควรอยู่ที่ด้านบนของเอกสาร บางครั้งส่วนหัวจะรวมกับเมนูสำหรับเลือกการเข้ารหัส Cyrillic และปุ่มสำหรับสลับจากเวอร์ชันรัสเซียเป็นเวอร์ชันภาษาอังกฤษของไซต์หากแหล่งข้อมูลบนเว็บนี้นำเสนอในสองภาษา ตามกฎแล้วภายใต้คำบรรยายของเอกสารคือพื้นที่ที่จัดสรรสำหรับวางแบนเนอร์โฆษณา การรวมแบนเนอร์ไว้ที่ด้านบนของหน้าเว็บในกรณีส่วนใหญ่เป็นข้อกำหนดเบื้องต้นสำหรับการลงทะเบียนไซต์ในบริการแลกเปลี่ยนแบนเนอร์ - ระบบที่โฆษณาทรัพยากรที่คุณสร้างขึ้นเพื่อแลกกับการแสดงโฆษณาของผู้เข้าร่วมรายอื่นในเครือข่ายแลกเปลี่ยนแบนเนอร์บนหน้าของ เว็บไซต์ของคุณ ขนาดมาตรฐานของแบนเนอร์ที่เผยแพร่ภายใต้ชื่อเอกสารมักจะอยู่ที่ 468x60 พิกเซล หากคุณใช้เค้าโครงหน้าคงที่ ความกว้างส่วนหัวของเอกสารจะอยู่ที่ประมาณ 640 พิกเซล เพื่อให้แน่ใจว่าเอกสารของคุณจะแสดงอย่างถูกต้องบนจอภาพขนาด 640x480 พิกเซล และเพื่อหลีกเลี่ยงไม่ให้มีแถบเลื่อนแนวนอนที่ทำให้ดูได้ยาก เห็นได้ชัดว่าความกว้างของแบนเนอร์ในกรณีนี้จะน้อยกว่าความกว้างของส่วนหัวอย่างมากเนื่องจากในส่วนของหน้าที่คุณวางแผนจะจัดสรรพื้นที่สำหรับการโฆษณาพื้นที่ว่างจะปรากฏขึ้นซึ่งสามารถเติมด้วย โลโก้ของบริษัทที่เป็นเจ้าของไซต์นี้หรือลิงก์ไปยังเซิร์ฟเวอร์ที่ใช้เว็บโฮสติ้ง แน่นอนว่าโลโก้ไม่จำเป็นเสมอไป ตามกฎแล้ว โลโก้จะรวมอยู่ในหน้าเว็บเฉพาะในกรณีที่ไซต์นั้นเน้นเชิงพาณิชย์เท่านั้น

ส่วนหลักของเอกสารถูกครอบครองโดยฟิลด์ข้อความที่เรียกว่า - พื้นที่ที่มีเนื้อหาความหมายของหน้า: ข้อความข้อมูลที่มีความหมายและภาพประกอบ องค์ประกอบที่แสดงเรียกอีกอย่างว่าเนื้อหา (จากภาษาอังกฤษ เนื้อหา) ตำแหน่งของฟิลด์ข้อความขึ้นอยู่กับวิธีที่นักออกแบบเว็บไซต์จะวางองค์ประกอบที่เหลือของเอกสารเป็นหลัก

องค์ประกอบบังคับถัดไปของหน้าเว็บคือองค์ประกอบการนำทาง - ไฮเปอร์ลิงก์ที่เชื่อมต่อเอกสารนี้กับส่วนอื่น ๆ ของไซต์ องค์ประกอบการนำทางสามารถสร้างได้ในรูปแบบของสตริงข้อความ อ็อบเจ็กต์กราฟิก นั่นคือ ปุ่ม หรือส่วนประกอบที่ใช้งานอยู่ ตัวอย่างเช่นแอปเพล็ต Java ปุ่มหลังเป็นปุ่มเดียวกับที่สามารถตอบสนองการเคลื่อนไหวของเมาส์ได้ ซึ่งต่างจากรุ่นพี่รุ่นเดียวกันทั่วไป โดยดำเนินการง่ายๆ บางอย่างเมื่อวางเคอร์เซอร์ไว้เหนือปุ่มเหล่านั้น (เปิดไฟแบ็คไลท์ สร้างเอฟเฟกต์การคลิก การเปลี่ยนรูปร่าง ฯลฯ) ตามที่ฉันได้กล่าวไปแล้วในส่วน "สมมุติฐาน" พื้นฐานของการออกแบบเว็บ องค์ประกอบการนำทางควรอยู่ในตำแหน่งในลักษณะที่มองเห็นได้เสมอ นั่นคือ เพื่อให้ผู้ใช้ไม่จำเป็นต้องกรอกลับหน้าหาก ช่องข้อความมีหน้าจอทางกายภาพที่มีความสูงหลายระดับ จากนั้นใช้เวลานานในการค้นหาลิงก์ไปยังส่วนอื่นๆ แนวทางที่กำหนดไว้มากที่สุดคือการวางองค์ประกอบการนำทางไว้ที่ขอบด้านซ้ายของหน้า

ที่ด้านล่างของเอกสาร เป็นเรื่องปกติที่จะเผยแพร่ข้อมูลเกี่ยวกับผู้พัฒนาไซต์และที่อยู่ อีเมลซึ่งผู้เข้าชมแหล่งข้อมูลสามารถส่งคำตอบ คำแนะนำ และความปรารถนาไปยังเจ้าของเพจได้ หากหน้าเว็บเป็นเอกสารเริ่มต้น ตัวนับการเข้าชมจะถูกวางไว้ที่ด้านล่างของหน้าด้วย - สคริปต์ขนาดเล็กที่เรียกใช้สคริปต์ CGI ที่ติดตั้งบนเซิร์ฟเวอร์ ซึ่งจะบันทึกการเปิดเอกสารแต่ละครั้งในเบราว์เซอร์ของผู้ใช้ โดยเปลี่ยนค่าของ ตัวบ่งชี้ตัวนับ ด้วยเหตุนี้ผู้ดูแลเว็บจึงสามารถกำหนดจำนวนผู้เยี่ยมชมที่เยี่ยมชมเพจของเขาในช่วงเวลาหนึ่งได้อย่างง่ายดาย ฉันทราบว่าตัวนับการเข้าชมได้รับการติดตั้งเฉพาะในหน้าแรกที่เรียกว่าเมื่อเข้าถึงไซต์เท่านั้น ไม่มีอยู่ในเอกสารอื่นของทรัพยากร ไม่แนะนำให้วางตัวนับหลายตัวในหน้าเดียว

ดังนั้นเราจึงได้ตรวจสอบองค์ประกอบหลักทั้งหมดของหน้าเว็บและตำแหน่งที่เป็นไปได้ซึ่งสัมพันธ์กัน

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

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

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

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

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

แน่นอนว่ามีตัวเลือกเลย์เอาต์ที่หลากหลายสำหรับหน้าเว็บ: วิธีแก้ปัญหาเฉพาะนั้นขึ้นอยู่กับจำนวนส่วนที่ประกอบเป็นทรัพยากร ปริมาณข้อความที่เตรียมไว้สำหรับการวางบนเว็บไซต์ และสุดท้ายก็ขึ้นอยู่กับจินตนาการของ นักออกแบบเอง มันเป็นสิ่งสำคัญเท่านั้น รูปร่างเว็บไซต์ไม่ได้ก่อให้เกิดการร้องเรียนใด ๆ จากผู้เยี่ยมชม ในท้ายที่สุด มีเพียงคุณในฐานะนักพัฒนา คุณและไม่มีใครมีสิทธิ์แสดงความสามารถและความสามารถทั้งหมดของคุณ และจัดเรียงหน้าเพจตามที่คุณต้องการ ผู้สร้างโฮมเพจบางหน้าวางตัวนับการเข้าชมที่มุมขวาบนของเอกสารโดยไม่ต้องสงสัยชื่อของไซต์เขียนด้วยฟอนต์ขนาดเล็กที่ประณีตและเผยแพร่ภายใต้แบนเนอร์โฆษณาและด้วยเหตุผลบางประการ องค์ประกอบการนำทาง ปรากฏอยู่ตรงกลางบล็อกข้อความโดยไม่คาดคิดระหว่างเรื่องราวเกี่ยวกับตัวคุณและรูปถ่ายของสุนัขอันเป็นที่รักของผู้เขียนโครงการ ไม่มีสหายในเรื่องรสชาติและสีอย่างที่พวกเขาพูด แต่โดยส่วนตัวแล้วโรคนี้ดูเหมือนรักษาไม่หายสำหรับฉัน

จะเริ่มต้นที่ไหน?

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

สิ่งแรกที่คุณต้องทำก่อนเริ่มพัฒนาเว็บไซต์ใด ๆ คือการชงกาแฟหรือชาที่มีกลิ่นหอมเข้มข้นสักแก้ว นั่งลงที่โต๊ะแล้วคิดให้รอบคอบ ฉันไม่ได้ล้อเล่น. คุณควรคิดถึงเป้าหมายที่คุณตั้งไว้สำหรับตัวคุณเองเมื่อสร้างโปรเจ็กต์ใหม่ การเลือกเป้าหมายจะเป็นตัวกำหนดวิธีการบรรลุเป้าหมายรวมถึงการออกแบบด้วย ความสำเร็จของทั้งองค์กรจะขึ้นอยู่กับการกำหนดงานที่ถูกต้อง คุณต้องการหน้าแรกหรือไม่? อัศจรรย์. หยิบปากกา กระดาษแผ่นหนึ่ง แล้วพิจารณาว่าการสร้างสรรค์ในอนาคตของคุณควรรวมหัวข้อเฉพาะใดบ้าง สิ่งที่คุณต้องการจะบอกต่อสาธารณชนที่ก้าวหน้าด้วยความช่วยเหลือ คุณได้ตัดสินใจสร้างไซต์ข้อมูลที่ไม่แสวงหากำไรแล้วหรือยัง? มหัศจรรย์. ตัดสินใจว่าจะอุทิศให้กับอะไร หากนี่เป็นโครงการบันเทิง หลังจากที่คุณได้รายการหมวดหมู่ที่เกี่ยวข้องแล้ว (เช่น เรื่องตลก การ์ตูนล้อเลียน หรือเรื่องขำขัน) คุณจะต้องเลือกโซลูชันการออกแบบที่เหมาะสมซึ่งสอดคล้องกับเนื้อหาไม่มากก็น้อย ผู้เยี่ยมชมมักจะสับสนเล็กน้อยกับโครงการบันเทิงที่ออกแบบมาในรูปแบบของข้อมูลหรือพอร์ทัลข่าวที่จริงจัง บางทีคุณอาจต้องการเผยแพร่แหล่งข้อมูลสำหรับการผลิตไวน์โฮมเมดโดยเฉพาะ เดินเล่นบนอินเทอร์เน็ต ดูว่าเพื่อนร่วมงานของคุณได้สร้างอะไรไว้บ้าง ส่วนใดบ้างที่อยู่ในไซต์ที่คล้ายกัน ประเมินว่าข้อมูลใดบ้างที่ขาดหายไป และข้อมูลใดที่ตรงกันข้าม มีมากเกินไป วิธีนำเสนอข้อมูลนี้ต่อผู้บริโภค ไม่ว่าจะเป็นการอ่านที่น่าเบื่อหรือในทางกลับกันก็น่าสนใจและน่าหลงใหล

คุณจำเป็นต้องพัฒนาเว็บไซต์เชิงพาณิชย์หรือไม่? ในกรณีนี้ ทั้งรายการหัวข้อเฉพาะเรื่องและการตัดสินใจขั้นสุดท้ายเกี่ยวกับเทคนิคการออกแบบที่คุณใช้ เช่น การใช้สีขององค์กร แบบอักษรพิเศษ หรือปุ่มที่ออกแบบมาให้ตรงกับแนวคิดโดยรวมของโครงการ มักจะดำเนินการโดย ลูกค้าไซต์ อย่างไรก็ตามไม่ว่าในกรณีใดคุณจะต้องจัดเตรียมตัวเลือกการทดลองใช้หลายอย่างให้เขาซึ่งเรียกว่าโครงการออกแบบซึ่งแสดงการใช้งานทรัพยากรในอนาคตที่เป็นไปได้ โปรดดูเว็บไซต์ขององค์กรคู่แข่งทั้งในประเทศและต่างประเทศ ดูว่าส่วนใดบ้างที่ประกอบเป็นเว็บไซต์ มีข้อมูลใดบ้างที่นำเสนอในแต่ละหัวข้อ

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

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

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

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

ในการสร้างตารางที่ซับซ้อน คุณสามารถใช้การซ้อนตารางหนึ่งไปยังอีกตารางหนึ่งได้ ตัวอย่างเช่น ตารางหลักที่มีความกว้าง 640 จุดจะระบุพาร์ติชันแนวนอนของหน้า และตารางอีกตารางหนึ่งที่มองไม่เห็นซึ่งมีความกว้างเท่ากันจะซ้อนกันในแต่ละเซลล์ โดยจัดให้มีฉากกั้นแนวตั้ง วิธีการนี้ช่วยให้คุณสามารถแบ่งส่วนต่างๆ ของหน้าเว็บได้อย่างอิสระจากกัน โดยสร้าง เช่น คอลัมน์แนวตั้งสี่คอลัมน์ที่มีความกว้างต่างกันในช่องเดียว และสองคอลัมน์ในคอลัมน์อื่น ขณะที่ดำเนินการกับพารามิเตอร์ที่แตกต่างกันของตารางที่ซ้อนกันภายในเอกสารเดียวกัน - ขนาดของช่องว่างระหว่างคอลัมน์ ความหนาของเส้นขอบ ฯลฯ

หลังจากที่องค์ประกอบหลักของเอกสารได้รับการประกอบและทำเครื่องหมายตารางที่มองไม่เห็นแล้ว คุณควรมีภาพร่างคร่าวๆ ของไซต์ในอนาคต ตอนนี้ได้เวลาเตรียมเนื้อหาแล้ว

ขั้นแรก ฉันแนะนำให้พิมพ์ข้อความที่จำเป็นทั้งหมดในตัวแก้ไขใดๆ และวิธีที่ดีที่สุดคือบันทึกในรูปแบบข้อความธรรมดา นั่นคือในไฟล์ที่มีนามสกุล .txt จากนั้นคุณจะต้องวาดเข้า โปรแกรมแก้ไขเวกเตอร์(เช่น ใน Corel-Draw) องค์ประกอบกราฟิกที่จำเป็น ส่งออกเป็นรูปแบบแรสเตอร์ ประมวลผลในตัวแก้ไข กราฟิกแรสเตอร์(ในกรณีของเราเรากำลังพูดถึง Adobe Photoshop) ให้รูปภาพมีขนาดและความละเอียดที่ต้องการ จากนั้นจึงปรับให้เหมาะสมโดยใช้คอมเพรสเซอร์พิเศษหรือวิธีการอื่นที่คล้ายคลึงกัน เรื่องราวโดยละเอียดเกี่ยวกับการเตรียมตัว ภาพกราฟิกเราจะกล่าวถึงในบทเรียนที่ 5 ตอนนี้เราจะพูดถึงลำดับของการกระทำเท่านั้น

หลังจากทำตามขั้นตอนทั้งหมดที่อธิบายไว้ข้างต้นแล้ว คุณสามารถดำเนินการประกอบเพจได้โดยตรง: สร้างเลย์เอาต์ในโปรแกรมแก้ไข HTML การเขียนและการดีบักโค้ดขั้นสุดท้าย

เนื่องจากการออกแบบเอกสารทั้งหมดที่ประกอบเป็นเว็บไซต์ในอนาคตของคุณมักจะเหมือนกันเกือบทั้งหมด จึงขอแนะนำให้สร้างเทมเพลตที่เรียกว่าก่อน เทมเพลตคือเอกสาร HTML ที่ประกอบด้วยตารางที่มองไม่เห็น ส่วนหัว ออบเจ็กต์กราฟิกทั้งหมด องค์ประกอบการนำทาง หรืออีกนัยหนึ่งคือเกือบทุกอย่างยกเว้นเนื้อหาจริง หากคุณจำเป็นต้องรวมเอกสารใหม่ในโครงการในภายหลัง คุณจะต้องเปิดเอกสารนั้นในตัวแก้ไข html เท่านั้น เทมเพลตสำเร็จรูปและนำเข้าข้อความและภาพประกอบที่จำเป็นทั้งหมดลงไป ฉันแนะนำให้คุณพัฒนาและบันทึกเทมเพลตที่แตกต่างกันสองแบบลงในดิสก์: สำหรับหน้าข้อมูลและไฟล์ดัชนี เมื่อหน้าพร้อมแล้ว ควรตรวจสอบเพื่อให้แน่ใจว่าหน้าจะแสดงผลเหมือนกันในเบราว์เซอร์ต่างๆ ที่ความละเอียดหน้าจอและชุดสีต่างกัน โหลดเอกสาร HTML ที่คุณสร้างลงใน Microsoft Internet Explorer ตั้งค่าชุดสีหน้าจอเป็น 256 สี จากนั้นเปลี่ยนความละเอียดหน้าจอเป็น 640x480, 800x600 และสุดท้ายเป็น 1024x768 พิกเซลตามลำดับ ดูว่าเค้าโครงหน้ามีการเปลี่ยนแปลงหรือองค์ประกอบต่างๆ เคลื่อนไหวสัมพันธ์กันหรือไม่ ทำตามขั้นตอนเดียวกันสำหรับ Netscape Navigator หากคุณไม่สังเกตเห็นการเปลี่ยนแปลงที่สำคัญใดๆ คุณสามารถมั่นใจได้ว่าเอกสารอื่นๆ ที่สร้างโดยใช้เทมเพลตเดียวกันจะมีโอกาส 95% ในการแสดงอย่างถูกต้องเช่นเดียวกัน

ด้วยเหตุนี้ ลำดับการดำเนินการในการพัฒนาเว็บไซต์จึงเป็นอัลกอริธึมง่ายๆ ดังต่อไปนี้:

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

HTML 5, CSS 3 และเว็บ 2.0 การพัฒนาเว็บไซต์สมัยใหม่ โดรนอฟ วลาดิมีร์

บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับการออกแบบเว็บสมัยใหม่ เว็บ 2.0 การสร้างเว็บเพจ

ความรู้เบื้องต้นเกี่ยวกับการออกแบบเว็บสมัยใหม่ เว็บ 2.0 การสร้างเว็บเพจ

เวิลด์ไวด์เว็บ, WWW, การออกแบบเว็บไซต์, เว็บไซต์, เว็บเพจ - ทุกคนรู้ว่ามันคืออะไร แต่อะไรคือเวิลด์ไวด์เว็บสมัยใหม่ การออกแบบเว็บสมัยใหม่ และเว็บเพจสมัยใหม่? หนังสือเล่มนี้เริ่มต้นพร้อมกับคำตอบสำหรับคำถามเหล่านี้ทั้งหมด ต่อไปเราจะพูดถึงหลักการของอินเทอร์เน็ต เว็บเพจ และเว็บไซต์กันเล็กน้อย สร้างเว็บเพจแรกของเรา และเริ่มศึกษา ภาษา HTML 5 แล้วเลือกโปรแกรมที่เราจะใช้ในการทำงานของเรา พูดได้เลยว่าทันที...

การออกแบบเว็บสมัยใหม่ แนวคิดเว็บ 2.0

ก่อนหน้านี้ การเข้าถึงอินเทอร์เน็ตสามารถเข้าถึงได้จากคอมพิวเตอร์เท่านั้น จากนั้นพวกเขาก็เริ่มออนไลน์ด้วย โทรศัพท์มือถือ. ขณะนี้เครื่องเล่นมัลติมีเดียและอุปกรณ์การอ่านได้เชื่อมต่อกับอินเทอร์เน็ตแล้ว e-booksและโทรทัศน์ และพรุ่งนี้ - ใครจะรู้; บางทีเราอาจเข้าถึงเว็บไซต์จากเตารีดหรือเครื่องดูดฝุ่น...

“ฉันจะไปทุกที่” อินเทอร์เน็ตประกาศ - “ฉันจะอยู่ทุกหนทุกแห่ง ทุกคนเตรียมพร้อมรับการมาถึงของฉัน!”

สิ่งที่ต้องการจากเว็บไซต์สมัยใหม่

มาเตรียมตัวกันดีกว่า... แต่พวกเราในฐานะนักออกแบบเว็บไซต์ในอนาคตควรทำอย่างไรเพื่อสิ่งนี้? ปฏิบัติตามกฎง่ายๆสามข้อ

1. ปฏิบัติตามมาตรฐานอินเทอร์เน็ตทั้งหมดอย่างเคร่งครัด

2. พิจารณาเนื้อหาของเว็บเพจอย่างรอบคอบ

3. ดูแลการเข้าถึงเว็บเพจ

มาดูพวกเขากันดีกว่า

อินเทอร์เน็ตคุกคามเข้ามามากที่สุด อุปกรณ์ที่แตกต่างกันซึ่งอาจขึ้นอยู่กับแพลตฟอร์มฮาร์ดแวร์และซอฟต์แวร์ที่แตกต่างกัน ซึ่งมักจะแตกต่างกันมาก ดังนั้นคอมพิวเตอร์ส่วนบุคคลจึงถูกสร้างขึ้นบนแพลตฟอร์มฮาร์ดแวร์และแพลตฟอร์มซอฟต์แวร์ของ Intel ไมโครซอฟต์ วินโดวส์(โดย อย่างน้อย, ส่วนใหญ่). โทรศัพท์มือถือของผู้เขียนใช้แพลตฟอร์มฮาร์ดแวร์และซอฟต์แวร์ของ Samsung และไม่มีใครสามารถพูดได้ว่าเครื่องดูดฝุ่นทางอินเทอร์เน็ตจะทำงานอย่างไร

สิ่งหนึ่งที่รวมความหลากหลายของฮาร์ดแวร์และซอฟต์แวร์ทั้งหมดนี้เข้าด้วยกัน - การปฏิบัติตามมาตรฐานอินเทอร์เน็ต ไม่งั้นอุปกรณ์เข้า. สถานการณ์กรณีที่ดีที่สุดจะแสดงเว็บเพจไม่ถูกต้องหรืออย่างแย่ที่สุดจะไม่ทำงานเลย

สิ่งนี้นำไปสู่กฎข้อแรกที่ระบุไว้ข้างต้น - เมื่อสร้างเว็บเพจ นักออกแบบเว็บไซต์จะต้องปฏิบัติตามมาตรฐานอินเทอร์เน็ตสมัยใหม่อย่างเคร่งครัด เพื่อให้ผลงานสร้างสรรค์ของพวกเขาแสดงผลเท่ากัน (หรือเกือบเหมือนกัน) บนอุปกรณ์ทั้งหมด

กฎข้อแรกยังกำหนดให้ต้องละทิ้งเทคโนโลยีอินเทอร์เน็ตที่ล้าสมัยและเป็นกรรมสิทธิ์ ด้วยเทคโนโลยีที่ล้าสมัย ทุกอย่างชัดเจน: สิ่งเก่าไม่สามารถช่วยสิ่งใหม่ได้ เทคโนโลยีแบบปิดนั้นไม่สะดวกเนื่องจากมักถูกควบคุมโดยบริษัทเดียวที่ "รับฟังเสียง" โดยลำพัง และไม่รับฟังความคิดเห็นของชุมชนอินเทอร์เน็ตเสมอไป เทคโนโลยีดังกล่าวได้แก่ โดยเฉพาะ อะโดบี แฟลชและไมโครซอฟต์ ActiveX

มาตรฐานอินเทอร์เน็ตแบบเปิด รวมถึงมาตรฐานเว็บ ได้รับการจัดการโดย World Wide Web Consortium หรือเรียกย่อๆ ว่า W3C พัฒนามาตรฐาน สอดคล้องกับความต้องการของผู้เข้าร่วมตลาด และเผยแพร่บนเว็บไซต์ http://www.w3.org.มาตรฐานทั้งหมดที่เผยแพร่มีผลผูกพัน

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

ขณะนี้ผู้ใช้อินเทอร์เน็ตส่วนใหญ่เป็นคนธรรมดา ข้อความธรรมดาที่มีรูปภาพสองสามภาพไม่เพียงพอสำหรับพวกเขา ให้ข้อความ เพลง และวิดีโอที่ออกแบบมาอย่างดีแก่พวกเขา พวกเขามีความต้องการมากกว่าชาวอินเทอร์เน็ตกลุ่มแรก

สิ่งนี้นำไปสู่กฎข้อที่สอง - นักออกแบบเว็บไซต์จะต้องดูแลความครบถ้วนและความสะดวกในการกรอกเว็บเพจ

โครงสร้างของเว็บเพจจะต้องได้รับการพิจารณาอย่างดีเพื่อให้ผู้เยี่ยมชมสามารถค้นหาทุกสิ่งที่เขาต้องการได้ทันที

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

หากเว็บไซต์นั้นมีไว้สำหรับเพลงหรือวิดีโอโดยเฉพาะ ทุกอย่างควรจะสามารถเล่นได้โดยตรงบนเว็บเพจโดยไม่ต้องดาวน์โหลด

กล่าวอีกนัยหนึ่ง - ทุกอย่างเพื่อความสะดวกของผู้เยี่ยมชม! (บางทีกฎนี้ควรอยู่ด้านบนสุดของรายการ...)

อินเทอร์เน็ตคุกคามที่จะเข้าถึงอุปกรณ์หลากหลายจาก ลักษณะที่แตกต่างกัน: ความเร็วโปรเซสเซอร์, ความจุหน่วยความจำ, ความละเอียดหน้าจอ, ความเร็วในการเข้าถึงอินเทอร์เน็ต แต่ทั้งหมดจะต้องให้ผลลัพธ์ที่สม่ำเสมอของเว็บเพจ จะบรรลุเป้าหมายนี้ได้อย่างไร?

นี่คือกฎข้อที่สาม - นักออกแบบเว็บไซต์จะต้องดูแลการเข้าถึงเพจ

หน้าเว็บควรมีขนาดกะทัดรัดที่สุด ยิ่งไฟล์มีขนาดกะทัดรัดก็ยิ่งดาวน์โหลดผ่านเครือข่ายได้เร็วยิ่งขึ้น - นี่คือสัจพจน์

หน้าเว็บไม่ควรซับซ้อนจนเกินไป ยิ่งเว็บเพจมีความซับซ้อนมากเท่าไร ก็ยิ่งต้องใช้เวลาและทรัพยากรระบบมากขึ้นในการประมวลผลและแสดงผล

หน้าเว็บไม่ควรต้องมีการเพิ่มเติมใดๆ ซอฟต์แวร์. ตามหลักการแล้ว คุณเพียงต้องใช้เว็บเบราว์เซอร์ในการแสดงข้อมูลเหล่านั้น

แต่กฎเหล่านี้จะนำไปใช้ในทางปฏิบัติอย่างไร? เรามาเปิดเว็บไซต์สมัยใหม่กัน เช่น เว็บไซต์ที่เป็นขององค์กร W3C (รูปที่ 1.1) ดังที่เราจำได้สามารถพบได้ตามที่อยู่อินเทอร์เน็ต http://www.w3.org.

ข้าว. 1.1. หน้าแรกของเว็บเพจของเว็บไซต์องค์กร W3C

ข้าว. 1.1.หน้าแรกของเว็บเพจของเว็บไซต์องค์กร W3C

เราเห็นอะไรที่นี่?

เว็บไซต์นี้สร้างขึ้นโดยคำนึงถึงมาตรฐานอินเทอร์เน็ตสมัยใหม่ทั้งหมด ปรากฏเกือบจะเหมือนกันในเว็บเบราว์เซอร์ทั้งหมด

เว็บไซต์ไม่ได้ใช้เทคโนโลยีอินเทอร์เน็ตที่ล้าสมัยหรือเป็นกรรมสิทธิ์ใดๆ

โครงสร้างของเว็บเพจมีความชัดเจนมาก - เราสามารถค้นหาทุกสิ่งที่เราต้องการได้อย่างง่ายดาย ด้านซ้ายเป็นชุดไฮเปอร์ลิงก์ที่นำไปสู่เว็บเพจอื่นๆ ของเว็บไซต์ ตรงกลางคือรายการข่าวสารและไฮเปอร์ลิงก์ไปยังบทความที่เลือกสรร และทางด้านขวาคือไฮเปอร์ลิงก์ไปยังเนื้อหาเพิ่มเติม

หน้าเว็บสามารถอ่านได้อย่างสมบูรณ์ แบบอักษร sans-serif แบบบาง โทนสีเทา-น้ำเงินที่ดูสงบ กรอบบางที่มีมุมโค้งมน กราฟิกขั้นต่ำ - ไม่มีอะไรดึงดูดสายตาของคุณ

มีแม้กระทั่งวิดีโอ!

หน้าเว็บโหลดเร็วและแสดงผลได้ทันที

เว็บเพจไม่ต้องการสิ่งอื่นใดนอกจากเว็บเบราว์เซอร์ที่จะแสดง มีการปฏิบัติตามมาตรฐาน เนื้อหา และการเข้าถึง สามในสาม!

หน้าเว็บประเภทนี้เองที่เราจะเรียนรู้เพื่อสร้างในหนังสือเล่มนี้

จากหนังสือ Adobe InDesign CS3 ผู้เขียน ซัฟโกรอดนี วลาดิเมียร์

การสร้างเทมเพลตหน้า ก่อนอื่นเราต้องเลือก (ระบุ) รูปแบบหน้าสร้างเอกสารใหม่และอย่างน้อยก็ออกแบบหน้าต้นแบบล่วงหน้า สมมติว่า หนังสือของเราจะอยู่ใน 60 ? 90/16. ดังที่เราทราบจากส่วนแรกของหนังสือโดยไม่มีคำปรึกษาค่ะ

จากหนังสือ Microsoft Windows SharePoint Services 3.0 เวอร์ชันรัสเซีย บทที่ 9-16 ผู้เขียน ลอนเดอร์ โอลกา

การสร้างไลบรารี Wiki แม้ว่าคุณสามารถสร้างไซต์ใน SharePoint Services ได้โดยใช้เทมเพลตไซต์ wiki เป็นฐาน เทคโนโลยี wiki ไม่ได้จำกัดอยู่เพียงไซต์ดังกล่าว Wikis สามารถใช้บนไซต์ใดๆ ในกลุ่มโดยการสร้างไลบรารีของหน้า wiki

จากหนังสือศิลปะแห่งการออกแบบเว็บไซต์ คู่มือการปฏิบัติ ผู้เขียน เบอร์ดีเชฟ เซอร์เกย์ นิโคลาวิช

บทที่ 2 การออกแบบเว็บเป็นเทคโนโลยี

จากหนังสือ HTML 5, CSS 3 และ Web 2.0 การพัฒนาเว็บไซต์สมัยใหม่ ผู้เขียน โดรนอฟ วลาดิมีร์

บทที่ 1 ความรู้เบื้องต้นเกี่ยวกับการออกแบบเว็บไซต์สมัยใหม่ เว็บ 2.0 การสร้างเว็บเพจ เวิลด์ไวด์เว็บ, WWW, การออกแบบเว็บ, เว็บไซต์, เว็บเพจ - ทุกคนรู้ว่ามันคืออะไร แต่อะไรคือเวิลด์ไวด์เว็บสมัยใหม่ การออกแบบเว็บสมัยใหม่ และเว็บเพจสมัยใหม่? มันมาพร้อมกับคำตอบสำหรับคำถามเหล่านี้ทั้งหมด

จากหนังสือ HTML 5, CSS 3 และ Web 2.0 การพัฒนาเว็บไซต์สมัยใหม่ ผู้เขียน โดรนอฟ วลาดิมีร์

จากหนังสือ XSLT ผู้เขียน โฮลซ์เนอร์ สตีเฟน

จากหนังสือ Web-Samodelkin วิธีสร้างเว็บไซต์ด้วยตัวเองอย่างรวดเร็วและเป็นมืออาชีพ ผู้เขียน แกลดกี้ อเล็กเซย์ อนาโตลิวิช

บทที่ 16: การสร้างเว็บเพจเชิงโต้ตอบ ในบทที่แล้ว เราได้สำรวจไลบรารี่ Ext Core วัตถุ คุณสมบัติ วิธีการ และเหตุการณ์ที่มีอยู่มากมายทำให้คุณเวียนหัว... จะนำความมั่งคั่งทั้งหมดนี้ไปใช้ในทางปฏิบัติได้อย่างไร บทนี้จะเน้นไปที่เรื่องนี้โดยเฉพาะ เราจะเรียนรู้ที่จะสร้าง

จากหนังสือ Meet Me เทคโนโลยีสารสนเทศ ผู้เขียน โวลอฟนิค อาร์คาดี อาฟราเลวิช

การออกแบบเว็บสมัยใหม่ แนวคิดของ Web 2.0 ก่อนหน้านี้ อินเทอร์เน็ตสามารถเข้าถึงได้จากคอมพิวเตอร์เท่านั้น จากนั้นพวกเขาก็เริ่มเข้าถึงอินเทอร์เน็ตจากโทรศัพท์มือถือ ขณะนี้เครื่องเล่นมัลติมีเดีย เครื่องอ่าน e-book และโทรทัศน์ได้เชื่อมต่อกับอินเทอร์เน็ตแล้ว และพรุ่งนี้ -

จากหนังสือ Access 2002: Tutorial ผู้เขียน ดับนอฟ พาเวล ยูริเยวิช

บทที่ 10 การออกแบบเว็บแบบคอนเทนเนอร์ ในบทที่แล้ว เราดูที่คุณลักษณะ สไตล์ CSSซึ่งระบุตัวเลือกย่อหน้าและการแสดงผล มีน้อยมากและบทก็เล็กไป ตอนนี้ เราจะทำการออกแบบเว็บ เห็นด้วย - หน้าเว็บของเราแม้ว่าจะมีการสร้างอะไรขึ้นมาก็ตาม

จากหนังสือนิตยสารดิจิทัล "คอมพิวเตอร์" ฉบับที่ 195 ผู้เขียน นิตยสารคอมพิวเตอร์

บทที่ 16: การสร้างเว็บเพจเชิงโต้ตอบ ในบทที่แล้ว เราได้สำรวจไลบรารี่ Ext Core วัตถุ คุณสมบัติ วิธีการ และเหตุการณ์ที่มีอยู่มากมายทำให้คุณเวียนหัว... จะนำความมั่งคั่งทั้งหมดนี้ไปใช้ในทางปฏิบัติได้อย่างไร บทนี้จะเน้นไปที่เรื่องนี้โดยเฉพาะ เราจะได้เรียนรู้

จากหนังสือของผู้เขียน

การสร้างลำดับหน้า: ลำดับหน้าคืออะไร? นี่คือชุดของหน้าที่มีลักษณะเหมือนกัน (เช่น บทในหนังสือ) ซึ่งสามารถจัดรูปแบบในลักษณะเดียวกันได้หากต้องการ หน้าในเอกสารผลลัพธ์มา

จากหนังสือของผู้เขียน

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

จากหนังสือของผู้เขียน

การสร้าง เปิด และบันทึกหน้าเว็บ ด้วยการใช้โปรแกรม คุณสามารถสร้างหน้าเว็บใหม่ได้ตลอดจนแก้ไขหน้าเว็บที่สร้างไว้ก่อนหน้านี้ หากต้องการสร้างหน้าเว็บใหม่ คุณต้องดำเนินการคำสั่งเมนูหลัก File?

จากหนังสือของผู้เขียน

บทที่ 1 โลกสมัยใหม่. ยุคแห่งเทคโนโลยีสารสนเทศ หนึ่งในความขัดแย้งของการพัฒนามนุษย์ก็คือ ตลอดการพัฒนา มนุษย์ได้ใช้ สะสม และส่งข้อมูล โดยไม่เข้าใจหรือคิดแม้แต่น้อย อารยธรรมที่แท้จริง

จากหนังสือของผู้เขียน

บทที่ 6 การสร้างหน้าการเข้าถึงข้อมูล data access page เป็นไฟล์ชนิดพิเศษที่ออกแบบมาสำหรับการดูและทำงานผ่านอินเทอร์เน็ตหรืออินทราเน็ตโดยมีข้อมูลที่จัดเก็บไว้ในฐานข้อมูล ข้อมูลไมโครซอฟต์แอคเซสหรือไมโครซอฟต์ เซิร์ฟเวอร์ SQL. หน้าการเข้าถึงข้อมูลถูกโหลดลงในฐานข้อมูล Access 2002