บทเรียนเค้าโครงที่ดี รูปแบบที่ปรับเปลี่ยนได้: บทเรียนหรือเข้าสู่การต่อสู้โดยตรง? เส้นแบ่งระหว่างเค้าโครง การออกแบบเว็บไซต์ และส่วนหน้าอยู่ที่ไหน?

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

ในบทความนี้ ฉันนำเสนอแผนการพัฒนาสำหรับนักออกแบบเลย์เอาต์

[ใหญ่โดยคลิก]
แน่นอนว่านี่ไม่ใช่โครงการที่ครอบคลุมและถูกต้องเท่านั้น มีทักษะที่เกี่ยวข้อง เทคโนโลยีที่เกี่ยวข้อง และอื่นๆ มากมาย การไล่สีเป็นเรื่องส่วนตัว

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

เราคาดหวังอะไรอยู่?

ก่อนอื่นต้องเข้าใจสิ่งที่เราคาดหวังจากบุคคลในแต่ละระดับก่อน ความคาดหวังของคุณอาจแตกต่างกันไป
จูเนียร์- รู้แท็กหลัก, สามารถแก้ไขเนื้อหาบนไซต์ html สำเร็จรูป, รู้วิธีจัดรูปแบบข้อความอย่างถูกต้อง, แทรกองค์ประกอบที่ฝังไว้ (วิดีโอจาก YouTube, แผนที่ Yandex) โดยไม่มีปัญหาใด ๆ ทำงานผ่านระบบควบคุมเวอร์ชันสำหรับตัวเขาเองเท่านั้น (อาจารย์, ผู้ร่วมให้ข้อมูล 1 คน) เขาสามารถประดิษฐ์อะไรง่ายๆ ได้ตั้งแต่ต้น และมันก็ใช้ไม่ได้ผลด้วยซ้ำ (สำหรับเขาเป็นการส่วนตัว) โดยทั่วไปไม่ใช่หน่วยงานอิสระและต้องการความเป็นผู้นำจากเบื้องบน
กลาง- หน่วยอิสระไม่มากก็น้อย (หรือเป็นอิสระอย่างสมบูรณ์สำหรับโครงการขนาดเล็กและขนาดกลาง) เว็บไซต์ขนาดกลางสามารถจัดวางได้ดี และจะแสดงอย่างถูกต้องในเบราว์เซอร์เวอร์ชันปัจจุบันทั้งหมด เข้าใจวิธีการทำงานของเครื่องมือเทมเพลตและสามารถใช้งานได้ (โดยต้องระบุโค้ดที่เหลือด้วย) สามารถวางแผนและจัดทำเอกสารงานและประมาณการกำหนดเวลาได้ เข้าใจถึงความสำคัญของการรักษารูปแบบโค้ด เข้าใจว่าทำไมถึงมีระบบกริดและเฟรมเวิร์ก CSS สามารถดึงข้อมูลที่จำเป็นทั้งหมดจากเลย์เอาต์ของนักออกแบบได้ สามารถโต้ตอบกับทีมเล็กๆ สร้างสาขา และดึงคำขอได้
อาวุโส- สามารถออกแบบระบบบล็อกสำหรับโครงการขนาดใหญ่ได้ รู้วิธีหลีกเลี่ยงการทำซ้ำและส่วนที่เป็นปัญหาเมื่อนักพัฒนารายอื่นใช้โค้ดของเขา สามารถแยกแยะปัญหาที่ซับซ้อนและกำหนดงานได้อย่างมีประสิทธิภาพ รู้วิธีประยุกต์ใช้วิธีการพัฒนาอย่างน้อยหนึ่งวิธี (เช่น BEM) สามารถทำให้โครงการเปิดได้เร็วที่สุด เข้าใจเอ็นจิ้นเทมเพลตยอดนิยมหลายตัวเป็นอย่างดี สามารถเขียนตัวสะสมและทำให้กระบวนการที่เกี่ยวข้องเป็นไปโดยอัตโนมัติ สามารถดำเนินการตรวจสอบโค้ดและควบคุมดูแลนักพัฒนาโค้ดรายอื่นได้
ตอนนี้ให้เราพิจารณาให้เจาะจงมากขึ้นอีกหน่อยว่าแต่ละบล็อกในแต่ละระดับรวมอะไรบ้าง

จูเนียร์

HTML- ความรู้เกี่ยวกับแท็กและคุณลักษณะพื้นฐาน เข้าใจวิธีการเขียนตามหลักการ
วิชาการพิมพ์- ความสามารถในการจัดรูปแบบข้อความ ข้อความเป็นพื้นฐานของเกือบทุกโครงการ การแทรกช่องว่างแบบไม่แยกตามที่จำเป็น โดยเน้นด้วยตัวหนา ตัวเอียง ตัวย่อ และอื่นๆ คุณสามารถใช้เครื่องพิมพ์หรือบริการที่คล้ายกันแต่สามารถเข้าใจผลลัพธ์ได้
ความหมาย- เข้าใจว่ามีแท็กเฉพาะสำหรับงานบางอย่าง รู้วิธีเลือกแท็กที่ถูกต้อง
สื่อ- สามารถฝังสื่อประเภทใดลงในเพจได้
ไอเฟรม- การฝังวิดเจ็ตของบุคคลที่สาม (วิดีโอ เสียง แผนที่ ฯลฯ)
วิดีโอเสียง-สามารถเลื่อนการเรียนได้เพราะว่า แก้ไขได้บางส่วนโดยใช้ iframe ทำความเข้าใจว่าเบราว์เซอร์สามารถเล่นรูปแบบใดได้ ออกแบบโปรแกรมเล่นอย่างไร และอื่นๆ
รูปภาพ- รูปแบบกราฟิกใดและเบราว์เซอร์รับรู้ในรูปแบบใด ข้อดีและข้อเสียของการใช้รูปแบบบางอย่าง
แรสเตอร์- jpg, PNG, กิฟ ทำความเข้าใจความแตกต่างระหว่างรูปแบบต่างๆ และสามารถนำสิ่งที่คุณต้องการไปใช้ได้ทุกที่
SVG-สามารถเลื่อนการเรียนได้เพราะว่า ใช้น้อยกว่าที่เราต้องการ ทำความเข้าใจข้อดี ข้อเสีย ข้อจำกัด ฯลฯ
แบบอักษร-สามารถเลื่อนการเรียนได้ จริงๆ แล้วนี่เป็นหัวข้อที่ค่อนข้างซับซ้อน และโดยทั่วไปแล้ว ฉันขอแนะนำให้ผู้เริ่มต้นใช้แบบอักษรของระบบ สามารถโหลดแบบอักษร เพิ่มประสิทธิภาพการแสดงผล ลดความล่าช้าในการเรนเดอร์ด้วยแบบอักษรที่กำหนดเอง
เค้าโครงตาราง- ไม่จำเป็น. สำหรับผู้ที่ต้องการสร้างจดหมายข่าวทางอีเมลคุณภาพสูงในอนาคต
ซีเอสเอส 1- แบบอักษร สี การจัดตำแหน่ง ขนาด
ซีเอสเอส 2.1- การควบคุมพฤติกรรมของบล็อก การวางตำแหน่ง การออกแบบเต็มรูปแบบ
ตัวเลือก- ตัวเลือกอย่างง่ายสำหรับแท็ก คลาส องค์ประกอบที่ซ้อนกัน ตัวเลือกหลอกอย่างง่ายเช่น:โฮเวอร์
การตั้งชื่อ- ตั้งชื่อคลาสยังไงให้ไม่เจ็บเลือดตาแทบกระเด็น
เค้าโครงบล็อก- แบ่งรูปภาพออกเป็นบล็อกที่มีสติ ใช้งานบล็อกใน HTML และออกแบบด้วย CSS
เบราว์เซอร์-สามารถเลื่อนการเรียนได้ มีเบราว์เซอร์อะไรบ้าง อะไรคือความแตกต่าง
เครื่องมือสำหรับนักพัฒนา-สามารถเลื่อนการเรียนได้ ใช้เครื่องมือเบราว์เซอร์เพื่อทำความเข้าใจปัญหาการแสดงผล
โปรแกรมแก้ไขข้อความ- มีโปรแกรมแก้ไขข้อความอะไรบ้างสำหรับนักพัฒนาและเพราะเหตุใด SublimeText และ Notepad++ เป็นตัวอย่างตามที่ฉันคุ้นเคย สามารถกำหนดค่าสิ่งต่างๆ พื้นฐานในนั้นได้ เช่น การเยื้อง การขึ้นบรรทัดใหม่ และอื่นๆ
ระบบควบคุมเวอร์ชัน- โดยส่วนตัวแล้วฉันถือว่าความสามารถในการใช้งานอย่างน้อยสำหรับตัวฉันเองเป็นสิ่งสำคัญมาก ทำความเข้าใจว่าเหตุใดระบบเหล่านี้จึงถูกสร้างขึ้นและคืออะไร
คอมไพล์- เข้าใจในแง่ทั่วไปเกี่ยวกับงานและหลักการของระบบควบคุมเวอร์ชันที่ได้รับความนิยมสูงสุด
Github/bitbucket- สามารถใช้หนึ่งในแพลตฟอร์มยอดนิยมสำหรับคอมไพล์ได้
ชำระเงิน/กระทำ/ผลักดัน/ดึง- การดำเนินงานขั้นพื้นฐานเพื่อการใช้งานส่วนบุคคล
สะสม- สำหรับการจัดเก็บข้อมูลชั่วคราวที่ไม่จำเป็นในปัจจุบัน
10 ผลงาน- สร้างผลงานอย่างน้อย 10 ชิ้นในรูปแบบที่แตกต่างกัน คุณสามารถทำการทดสอบได้ มันไม่สำคัญ สิ่งสำคัญคือต้องครบถ้วนภายในความรู้ปัจจุบัน

กลาง

ซีเอสเอส 3- การไล่ระดับสี, เงา, การลดรอยหยัก, ฟิลเตอร์, การแปลง
ตัวเลือกขั้นสูง- องค์ประกอบตามที่กำหนด (+) กำหนดโดยการนับ (n-child) shadow-dom ก่อน/หลัง และอื่นๆ
ภาพเคลื่อนไหว- ไม่จำเป็น. การเปลี่ยนแปลงและภาพเคลื่อนไหว การเปลี่ยนภาพเคลื่อนไหวที่ราบรื่น เข้าใจข้อจำกัดและข้อเสีย.
กริด- เหตุใดจึงมีอยู่ วิธีสร้าง มีโซลูชันสำเร็จรูปอะไรบ้าง ตัวอย่างเช่น คุณสามารถดูตาราง Flexbox หรือตารางอื่นๆ ที่คุณพบได้
กรอบงาน (CSS)- เหตุใดจึงจำเป็น วิธีใช้ ขอแนะนำให้เรียนรู้วิธีใช้อย่างน้อยหนึ่งอย่าง มีประโยชน์มากสำหรับการสร้างต้นแบบ ปรับปรุงคุณภาพของโครงการอย่างมีนัยสำคัญในกรณีที่ไม่มีงบประมาณการออกแบบ (ไม่ซ้ำกัน แต่ใช้งานได้)
ตัวประมวลผลล่วงหน้า CSS-สามารถเลื่อนการเรียนได้ การเพิ่มประสิทธิภาพการทำงาน โค้ดที่สวยงามและอ่านง่ายขึ้น ตัวแปร มิกซ์อิน ฯลฯ ทำงานร่วมกับโปรเซสเซอร์ล่วงหน้ายอดนิยมตั้งแต่หนึ่งตัวขึ้นไป เช่น SASS, LESS, Stylus
สื่อสอบถาม-สามารถเลื่อนการเรียนได้ แสดงสไตล์ที่ต้องการขึ้นอยู่กับเงื่อนไข (อุปกรณ์ ขนาดหน้าจอ ความหนาแน่นของพิกเซล เวอร์ชันการพิมพ์ ฯลฯ)
สไตล์รหัส- เข้าใจว่าทำไมถึงมีแบบแผน ศึกษาและเริ่มสมัครได้เลย (แนะนำจาก AirBNB)
แห้ง/จูบ/แข็ง-สามารถเลื่อนการเรียนได้ ทำความเข้าใจหลักการพัฒนาที่สำคัญซึ่งทำให้การสนับสนุนโครงการเพิ่มเติมง่ายขึ้นอย่างมาก
โอโอซีเอส- ไม่จำเป็น. ทำความเข้าใจว่า CSS เชิงวัตถุคืออะไรและมีไว้เพื่ออะไร มันถูกใช้ในรูปแบบใดรูปแบบหนึ่งในหลาย ๆ โครงการ (แม้ว่าจะไม่เข้าใจก็ตาม) เป็นการดีที่จะเรียนรู้วิธีการออกแบบ สามารถดีเยี่ยมสำหรับโครงการขนาดใหญ่
เอกสารประกอบ- เข้าใจว่าจะจัดทำเอกสารอะไรและอย่างไร เอกสาร. คุณสามารถเลื่อนออกไปได้ แต่อย่าลืมศึกษามาร์กดาวน์ในอนาคต
การวางแผน- เรียนรู้การประมาณกำหนดเวลาจากรูปภาพและกำหนดลำดับของงาน
การสลายตัว-สามารถเลื่อนการเรียนได้ เรียนรู้ที่จะแบ่งงานออกเป็นงานย่อย มันยากกว่าที่คิด :-)
ตั้งเป้าหมาย-สามารถเลื่อนการเรียนได้ เรียนรู้ที่จะอธิบายงานอย่างชัดเจนในรูปแบบข้อความ เพื่อให้นักพัฒนารายอื่น รวมถึงผู้ที่มีคุณสมบัติน้อยกว่า เข้าใจอย่างชัดเจนว่าต้องทำอะไรเพื่อให้งานเหล่านั้นเสร็จสมบูรณ์
เฟล็กซ์บ็อกซ์- เข้าใจโมเดล สามารถนำไปใช้ได้อย่างเต็มที่
เค้าโครงจดหมาย- ไม่จำเป็น. โดยทั่วไปแล้วทักษะไม่ได้ฟุ่มเฟือย ทำความเข้าใจคุณสมบัติของระบบเมล รักษารูปลักษณ์ที่ดี และไม่ตกเป็นสแปม (หากไม่ใช่สแปม)
โพลีฟิล- เข้าใจวิธีใช้คุณสมบัติการพัฒนาล่าสุดในขณะที่ยังคงความเข้ากันได้แบบย้อนหลัง ทำความเข้าใจข้อดีข้อเสียของแนวทางนี้
เค้าโครงข้ามแพลตฟอร์ม- เข้าใจสิ่งที่ต้องทำเพื่อทำให้โปรเจ็กต์ดูดีไม่เพียงแต่ใน Windows, Linux และ Mac แต่ยังรวมถึง SmartTV หรือ PS
เค้าโครงข้ามเบราว์เซอร์- เข้าใจความแตกต่างในการเรนเดอร์เบราว์เซอร์และทำให้แสดงผลเหมือนกัน เว็บไซต์ CanIUse ช่วยได้มากในเรื่องนี้
เค้าโครงมือถือ-สามารถเลื่อนการเรียนได้ ทำความเข้าใจข้อจำกัดของแพลตฟอร์มมือถือ ใช้พื้นที่จำกัดอย่างชาญฉลาด
การเพิ่มประสิทธิภาพ-สามารถเลื่อนการเรียนได้ เข้าใจ “ราคา” ของเทคนิคบางอย่าง ทำความเข้าใจขั้นตอนในการแสดงเว็บไซต์ต่อผู้ใช้ -สามารถเลื่อนการเรียนได้ การเพิ่มประสิทธิภาพที่เกี่ยวข้องกับขนาด แคช การบีบอัด การรวมทรัพยากร ฯลฯ
กำลังแสดงผล-สามารถเลื่อนการเรียนได้ การเพิ่มประสิทธิภาพที่เกี่ยวข้องกับความเร็วในการเรนเดอร์หลังการโหลด
การทำ SEO-สามารถเลื่อนการเรียนได้ อย่างน้อยก็มีความเข้าใจพื้นฐานเกี่ยวกับวิธีการทำงานของเครื่องมือค้นหา ความสามารถในการ “ช่วย” เสิร์ชเอ็นจิ้นรู้ว่าจะต้องดูที่ไหนและอะไรสำคัญ
เอ็นจิ้นเทมเพลต- ทำความเข้าใจว่าคุณสามารถใช้โค้ด องค์ประกอบกลุ่ม และหน้าเค้าโครงซ้ำได้อย่างไร ขอแนะนำเป็นอย่างยิ่งให้เรียนรู้ทั้งการเรนเดอร์ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ รวมถึงเทมเพลตในภาษา “ล้วนๆ” (เช่น ส่วนแทรก PHP แบบธรรมดา) เราไม่สนใจงาน "ก่อน" (กระแสข้อมูล) ของกลไกจัดการเทมเพลต
PHP-สามารถเลื่อนการเรียนได้ เข้าใจไวยากรณ์พื้นฐานและสามารถแก้ไขเล็กน้อยที่เกี่ยวข้องกับการออกแบบเพจได้
ซีเอ็มเอส-สามารถเลื่อนการเรียนได้ ค้นหาว่ามี CMS ใดบ้างและทำไมจึงถูกสร้างขึ้น เรียนรู้การเขียนเทมเพลตอย่างน้อยหนึ่งรายการ (ฉันแนะนำ Wordpress)
จาวาสคริปต์-สามารถเลื่อนการเรียนได้ เรียนรู้ไวยากรณ์พื้นฐาน ทำความเข้าใจวิธีแนบตัวจัดการแบบง่าย และทำงานง่ายๆ กับ DOM
jQuery-สามารถเลื่อนการเรียนได้ เรียนรู้ที่จะประหยัดเวลาได้มากในการแก้ปัญหาทั่วไปโดยใช้ปลั๊กอินสำหรับไลบรารี js ที่ได้รับความนิยมสูงสุด (หลังจาก vanilla.js แน่นอน)
โหนดJS-สามารถเลื่อนการเรียนได้ พิจารณาวิธีการรันเซิร์ฟเวอร์แบบง่าย กระจายสแตติก และเรนเดอร์บนฝั่งเซิร์ฟเวอร์ คุณสามารถใช้ Express หรือกรอบงานอื่นๆ
การประกอบ- ไม่จำเป็น. เรียนรู้วิธีรวบรวมโปรเจ็กต์จากไฟล์ CSS / HTML จำนวนมากให้เป็นสิ่งที่คุณต้องการ ฉันขอแนะนำให้คุณทำความคุ้นเคยกับอย่างน้อยเสียงฮึดฮัดและอึกทึกในฐานะตัวแทนของค่าย "ต่างกัน"
ไอดี- ไม่จำเป็น. เรียนรู้ว่าเหตุใดจึงจำเป็นต้องมี IDE และวิธีใช้งาน เปลี่ยนไปใช้ IDE บางส่วนเพื่อประหยัดเวลา สิ่งสำคัญ: การเรียนรู้ IDE เปรียบได้กับการเรียนรู้ภาษาการเขียนโปรแกรมอย่างสมบูรณ์ และการใช้เวลามากมายไปกับมันอาจไม่คุ้มค่า โดยส่วนตัวแล้วฉันใช้โปรแกรมแก้ไขข้อความ (และเปิด IDE สำหรับโครงการขนาดใหญ่มากเท่านั้น)
การแตกแขนง- เรียนรู้วิธีจัดการสาขาใน git
ผสาน- เรียนรู้การผสานสาขาเข้ากับการแก้ไขข้อขัดแย้ง
ดึงข้อมูล/Rebase- ค้นหาว่ามีไว้เพื่ออะไร ควรใช้เมื่อใด และเริ่มใช้ตามความจำเป็น
บรรณาธิการกราฟิก- ค้นหาว่าพวกเขาคืออะไรและทำไม เวกเตอร์แตกต่างจากแรสเตอร์อย่างไร สิ่งสำคัญคือต้องเข้าใจบรรณาธิการอย่างน้อยก็ในระดับ "การอ่าน" เค้าโครงจากนักออกแบบ เลือกแบบอักษร ขนาด สี ฯลฯ ที่เหมาะสม ไม่ใช่ด้วยสายตา แต่แน่นอน ฉันแนะนำให้ทำงานกับแรสเตอร์อย่างน้อย 1 ตัว (Photoshop) และเวกเตอร์ 1 ตัว (Figma)
50 ผลงาน- เมื่อสิ้นสุดสเตจ คุณจะมีผลงานประมาณ 50 ชิ้นที่สาธิตทักษะจากสาขาที่ศึกษา

อาวุโส

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

บทสรุป

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

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

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

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

เค้าโครงเริ่มต้นที่ไหน?

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

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

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

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

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

เครื่องมือสำหรับสร้างเค้าโครงเว็บไซต์

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

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

เจอกันครับ - HTML

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

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

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

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

เริ่มดีขึ้น – CSS

ทันทีที่คุณเชี่ยวชาญพื้นฐานของ HTML แล้ว คุณก็สามารถเริ่มเรียนรู้ CSS (สไตล์ชีทแบบเรียงซ้อน) ได้ทันที ซึ่งช่วยให้คุณสามารถตั้งค่าแบบอักษร สี และตำแหน่งของบล็อกเว็บไซต์แต่ละบล็อกได้

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

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

จำเป็นต้องเรียนรู้แท็ก HTML/CSS คุณลักษณะ และคุณสมบัติทั้งหมดหรือไม่

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

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

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

เช่นเดียวกับภาษาอื่นๆ รวมถึง JavaScript, PHP ฯลฯ ทุกสิ่งที่คุณใช้บ่อยๆ จะถูกจดจำด้วยตัวเอง คุณสามารถค้นหาทุกสิ่งที่คุณไม่ค่อยได้ใช้ในไดเร็กทอรี ซึ่งมีมากมายบนอินเทอร์เน็ต ไม่มีอะไรน่าละอายในเรื่องนี้และฉันจะบอกความลับแก่คุณเว็บมาสเตอร์ทุกคนก็ทำเช่นนี้

เราทำให้กระบวนการเลย์เอาต์ง่ายขึ้น

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

เมื่อคุณเชี่ยวชาญ CSS เป็นอย่างดีและเริ่มสร้างสิ่งที่มีเอกลักษณ์ คุณอาจไม่มีความยืดหยุ่นในภาษานี้เพียงพออีกต่อไป และคุณจะต้องการใช้ตัวประมวลผลล่วงหน้า CSS บางประเภท ตัวประมวลผลล่วงหน้าจะลบขยะทั้งหมดออกจากโค้ด CSS ทำให้สะอาดขึ้นและมีเหตุผลมากขึ้น และเพิ่มระดับของนามธรรมด้วยความช่วยเหลือของตัวแปรและ "เทคนิค" อื่นๆ โปรเซสเซอร์ล่วงหน้าที่ได้รับความนิยมมากที่สุด ได้แก่ LESS, Sass และ Stylus

ไม้ลอย--JavaScript

เมื่อคุณเรียนบทเรียนการออกแบบเว็บไซต์ขั้นสูง คุณจะพบกับองค์ประกอบ JavaScript ที่ฝังอยู่ใน HTML ที่ทำให้หน้าเว็บโต้ตอบได้ หากคุณวางแผนที่จะไม่เพียงแต่ Back-end เท่านั้น แต่ยังรวมถึงการพัฒนา Front-end ด้วย คุณจำเป็นต้องรู้จัก JavaScript ในระดับที่ดีมาก

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

มาสรุปกัน

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

ความเร็วในการโหลดไซต์

ความเพียงพอของการแสดงผลในเบราว์เซอร์ต่างๆ

การปรับตัวให้เข้ากับหน้าจอผู้ใช้ที่แตกต่างกัน

การปฏิบัติตามมาตรฐาน HTML และข้อกำหนดของเครื่องมือค้นหา

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

แล้วพบกันใหม่เพื่อนร่วมงานที่รักและผู้ที่เพิ่งเริ่มต้นเส้นทางการพัฒนาเว็บไซต์ที่ยากลำบาก แต่น่าตื่นเต้นมาก!

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

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

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

โดยส่วนตัวแล้ว ฉันเริ่มต้นด้วยหนังสือง่ายๆ (และกระดาษ) เกี่ยวกับ HTML/CSS จากนั้นก็มีการฝึกอบรมหลายปี และเมื่อเวลาผ่านไป ฉันตัดสินใจที่จะรวบรวม / จัดระบบความรู้ด้วยความช่วยเหลือของบางหลักสูตร มีให้เลือกมากมายจริงๆ แม้ว่าตัวเลือกทั้งหมดจะไม่คุ้มค่าก็ตาม ฉันเข้ารับการฝึกอบรมออนไลน์เรื่องเลย์เอาต์ที่บริษัท Netology พวกเขากำลังรับสมัครกลุ่มต่อไป

ข้อดีของหลักสูตรคือสามารถให้ความรู้แบบทีละขั้นตอนและมีประสิทธิภาพผ่าน:

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

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

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

อินเทอร์เน็ตเป็นบริการการเรียนรู้รูปแบบยาก

สุดท้ายนี้ เรามาดูโปรเจ็กต์ Interneting is Hard กันดีกว่า - มันเจ๋งมากจริงๆ! หลักสูตรนี้เป็นหลักสูตรที่ครอบคลุมเต็มรูปแบบสำหรับการเรียนรู้ HTML และ CSS สำหรับผู้เริ่มต้นที่ไม่เคยพยายามเข้าใจรายละเอียดโครงสร้างของหน้าเว็บและการพัฒนา หากคุณไม่รู้ว่าจะเริ่มเรียนรู้เลย์เอาต์จากที่ไหน มาที่นี่ 100%

สิ่งที่คุณต้องมีในการเริ่มต้นคือแรงจูงใจและความรู้ภาษาอังกฤษ ปัญหาเกี่ยวกับองค์กรจะไม่มีปัญหา - นักพัฒนาได้รวบรวมบางอย่างเช่น "หลักสูตร" ซึ่งรวมถึง:

• 14 บทพร้อมเนื้อหาที่ลึกซึ้งอย่างค่อยเป็นค่อยไป
• ตัวอย่างโค้ดที่ชัดเจน 284 รายการ
• แผนภูมิและกราฟ
• เกือบ 43,000 คำ;
• เทคโนโลยีสมัยใหม่ (ใช่แล้ว มี Flexbox ด้วย)

คุณสมบัติและคำแนะนำในการให้บริการ

กระบวนการเรียนรู้เค้าโครง HTML ใน Interneting นั้นยาก มีข้อดีหลายประการเมื่อเปรียบเทียบกับโครงการอื่นที่คล้ายคลึงกัน:

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

2. กระบวนการฝึกอบรมเกี่ยวข้องกับเทคนิคการจัดวางสมัยใหม่ทั้งหมด: การพิมพ์เว็บ, ความหมาย HTML, การสร้างการออกแบบและภาพประกอบที่ตอบสนอง เช่นเดียวกับ Flexbox พวกเขาจะช่วยให้ผู้เริ่มต้นกลายเป็นผู้เชี่ยวชาญที่เป็นที่ต้องการและเป็นมืออาชีพในการรีเฟรชความรู้

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

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

4. ตัวเลือกสำหรับการเรียนรู้วิธีการออกแบบเว็บไซต์นี้ไม่มีค่าใช้จ่ายใด ๆ ทั้งสิ้น เมื่อเริ่มเรียน HTML หลายๆ คนยังลังเลว่านี่คือสิ่งที่พวกเขาอยากทำจริงๆ หรือไม่ และหากหลักสูตรแบบชำระเงินอาจทำให้คุณเสียใจกับการสูญเสียเงินไป Interneting is Hard จะให้ความรู้สูงสุดแก่คุณโดยไม่ต้องเสียเงินสักบาทเป็นการตอบแทน

ส่วนต่างๆ สำหรับการเรียนรู้เค้าโครงทีละขั้นตอน

ดังที่ฉันได้กล่าวไว้ข้างต้น “หลักสูตร” ประกอบด้วย 14 ช่วงตึก มาดูกันอย่างรวดเร็ว:

1. การแนะนำ- ส่วนเบื้องต้นที่อธิบายว่า HTML, CSS และ . นอกจากนี้ยังอธิบายความแตกต่างระหว่างเฟรมเวิร์กและภาษา และยังแสดงวิธีทำงานกับโปรแกรมแก้ไขข้อความ ATOM
2. หน้าเว็บพื้นฐาน- บทที่สองแสดงโครงสร้างของเว็บเพจพื้นฐาน โครงสร้าง HTML หรือ “โครงกระดูก” ของเว็บไซต์ แสดงไว้ที่นี่ ผู้เยี่ยมชมจะได้เรียนรู้ว่าเหตุใดจึงต้องมีแท็ก แท็กคืออะไร และแต่ละแท็กมีไว้เพื่ออะไร
3. ลิงค์และรูปภาพ- เมื่อทราบพื้นฐานของการออกแบบแล้ว ส่วนที่สามจะแนะนำให้ผู้ใช้จัดเรียงรูปภาพและเชื่อมโยงหน้าเว็บเข้าด้วยกัน
4. สวัสดี CSS- ถัดมาเป็นสไตล์ชีตที่เรียกว่า แนวคิดนี้รวมทุกอย่างที่เกี่ยวข้องกับการออกแบบ: แบบอักษร สี ตำแหน่ง รูปร่าง และขนาดของข้อความ
5. โมเดลกล่อง- บทที่ห้าของหลักสูตรยังคงดำเนินต่อไปในหัวข้อการออกแบบ โดยพูดถึงรูปแบบเนื้อหาแบบ "บล็อก" ผู้ออกแบบโครงร่างในอนาคตจะคุ้นเคยกับสิ่งต่างๆ เช่น ระยะขอบ เส้นขอบ ระยะขอบภายใน และเนื้อหา
6. ตัวเลือก CSS- กล่องจะตามด้วยตัวเลือก - พื้นฐานของ CSS การใช้ตัวอย่างโค้ดในตัวแก้ไข ผู้สร้างหลักสูตรจะสอนการใช้สไตล์ที่ถูกต้อง
7. ลอยตัว- ส่วนที่เจ็ดขยายสิ่งที่เราได้เรียนรู้เกี่ยวกับการจัดการขนาดบล็อกและพื้นที่รอบๆ มุ่งเน้นไปที่แนวคิดของโฟลว์บนหน้าเว็บ (โฟลต) และอธิบายความแตกต่างของการทำงานกับกริดของไซต์
8. เฟล็กซ์บ็อกซ์- เมื่อไปถึงเส้นศูนย์สูตรของหลักสูตร คุณจะได้รับเชิญให้ทำความคุ้นเคยกับ Flexbox นี่คือเครื่องมือเลย์เอาต์สมัยใหม่ที่ให้คุณควบคุมการจัดตำแหน่ง ทิศทาง ลำดับ และขนาดของบล็อกได้อย่างสมบูรณ์ เมื่อเร็ว ๆ นี้ฉันได้พูดคุยเกี่ยวกับสิ่งที่เจ๋งกว่านั้น
9. การวางตำแหน่งขั้นสูง- ถัดมาคือวัสดุที่ซับซ้อนมากขึ้น - การวางตำแหน่งขั้นสูงและประเภทหลัก: สัมพัทธ์สัมบูรณ์และคงที่ แม้ว่าฉันจำได้ว่าในหลักสูตรที่เราศึกษาฟีเจอร์นี้ร่วมกับ Float และก่อน Flexbox แน่นอน
10. การออกแบบที่ตอบสนอง- ส่วนที่สิบจะอธิบายพื้นฐานและบทบาทของการออกแบบแบบตอบสนองบนเว็บไซต์ ตอนนี้คุณไม่สามารถอยู่ได้โดยปราศจากเขา
11. รูปภาพที่ตอบสนอง- บทเรียนนี้เน้นไปที่ภาพที่ปรับเปลี่ยนได้ การปรับขนาด การกำหนดทิศทางและการสร้างรูปแบบทางเลือกโดยใช้ฟังก์ชันพิเศษ
12. ความหมาย HTML- บทที่สิบสองกลับไปสู่แนวคิดพื้นฐานของ HTML โดยเปิดเผยจากมุมมองเชิงความหมาย ที่นี่ผู้อ่านจะได้รู้จักกับองค์ประกอบ "ส่วน" แท็กใหม่และแอปพลิเคชัน
13. แบบฟอร์ม- ในย่อหน้าสุดท้ายผู้เยี่ยมชมจะได้รับโอกาสศึกษาการสร้างแบบฟอร์มและองค์ประกอบของมัน: รายการแบบเลื่อนลง, เมนู, ช่องข้อความ, การออกแบบและการส่งข้อมูลเช่นผ่าน
14. การพิมพ์เว็บ- บทช่วยสอนสุดท้ายพูดถึงการพิมพ์เว็บสมัยใหม่บนเว็บไซต์ - ลักษณะของข้อความ หัวเรื่อง แบบอักษร ฯลฯ ในบล็อกอื่นของฉัน มีส่วนเกี่ยวกับการพิมพ์เว็บ ซึ่งคุณจะพบบันทึกที่เป็นประโยชน์มากมายในหัวข้อนี้

โครงสร้างบทเรียนรูปแบบการสอน

เพื่อชื่นชมฟังก์ชันการทำงานและความสะดวกสบายของบริการ Interneting is Hard ฉันเสนอให้พิจารณาการใช้งานในส่วนย่อยอย่างใดอย่างหนึ่ง เรามาเรียนบทเรียนที่สองเกี่ยวกับการสร้างหน้าเว็บพื้นฐานกัน

สิ่งที่ฉันชอบเป็นการส่วนตัว:

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

ข้อสรุป

ฉันจะชอบมันได้อย่างไร ปัจจุบัน Interneting is Hard เป็นหนึ่งในเว็บไซต์ที่ดีที่สุดสำหรับการสอนเลย์เอาต์ตั้งแต่เริ่มต้น ผู้เขียนหลักสูตรทำให้แน่ใจว่าผู้เริ่มต้นที่ไม่เคยใช้ HTML และ CSS สามารถเข้าใจพื้นฐานของการสร้างหน้าเว็บด้วยวิธีที่ง่ายและเข้าถึงได้ ข้อมูลมีโครงสร้างที่ดีมาก - ค่อยๆ ครอบคลุม 14 ส่วน คุณจะเอาชนะเส้นทางจากผู้ใช้มือใหม่ไปจนถึงนักออกแบบเลย์เอาต์ที่มีประสบการณ์ แน่นอนว่ามันเป็นไปไม่ได้หากไม่มีการฝึกฝนและการประยุกต์ใช้ความรู้ แต่สำหรับพื้นฐานทางทฤษฎี นี่เป็นการรวบรวมข้อมูลที่สมบูรณ์ที่สุดเท่าที่ฉันเคยเจอมา หากคุณต้องการเรียนกับอาจารย์ ลองดูตัวเลือกจาก Netology ซึ่งก็ค่อนข้างดีเช่นกัน แม้ว่าจะจ่ายเงินแล้วก็ตาม

หากคุณรู้จักบริการอื่นๆ ที่น่าสนใจ สำหรับศึกษาการจัดวางเว็บไซต์ ส่งลิงค์มาในความคิดเห็นได้เลย

เค้าโครงบล็อก

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

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

นี่คือเค้าโครง (คลิกได้)

เราเห็นว่ามันมี 4 ส่วนเชิงตรรกะ:

• ส่วนหัวของเว็บไซต์ (ต่อไปนี้เราจะเรียกว่าส่วนหัว);
• คอลัมน์ด้านซ้าย (ต่อไปนี้เราจะเรียกว่าแถบด้านข้างซ้าย);
• คอลัมน์ขวา (ต่อไปนี้เราจะเรียกว่าเนื้อหา)
• ส่วนท้าย (ต่อไปนี้เราจะเรียกว่าส่วนท้าย);

แน่นอนว่า มาเริ่มกันที่บล็อกส่วนหัวกันก่อน แบบจำลองของเรามีความกว้าง 1,000 พิกเซล (px)

ก่อนอื่น ฉันจะบอกว่าเลย์เอาต์นั้นเสร็จสิ้นโดยใช้แท็ก html ตัวอย่างเช่น,