ยินดีต้อนรับกลับ.
เราจึงได้เรียนรู้พื้นฐานของขวด
เราเข้าใจว่าเซิร์ฟเวอร์ทำอะไรและเรารู้ด้วยว่าเบราว์เซอร์ทำอะไร
แต่ขอซื่อสัตย์ที่นี่
แบบนี้มันน่าเบื่อ
ฉันหมายความว่านี่ไม่น่าประทับใจ
หากคุณแสดงสิ่งนี้ต่อนายจ้างที่เป็นไปได้ พวกเขาจะมองว่าคุณเป็นคนบ้า
มาสร้างพอร์ตโฟลิโอที่ดูดีโดยพิจารณาจากสิ่งที่เราได้เรียนรู้มาจนถึงปัจจุบัน
ตอนนี้ฉันมีของขวัญเล็ก ๆ น้อย ๆ ให้คุณ
นั่นคือความจริงที่ว่าคุณไม่จำเป็นต้องเขียน HTML, CSS และ JavaScript ของคุณเอง เพราะนี่ไม่ใช่หลักสูตรการพัฒนาเว็บ
และโชคดีสำหรับเรา หากคุณใช้ Google ทุกที่ทางออนไลน์สำหรับบางอย่าง เช่น เทมเพลตฟรีหรือเทมเพลต
HTML ฟรี คุณจะพบเว็บไซต์ที่ดูดีและใช้งานได้ฟรี
ตัวอย่างเช่น ลองดูที่จักรวาลตรงนี้ แล้วฉันจะลิงก์ไปยังแหล่งข้อมูลนี้ คุณจะได้ดูตัวเองด้วยถ้าฉันดูตัวอย่าง
ตรวจสอบออก
คุณมีเว็บไซต์หรือหน้าแฟ้มผลงานเล็กๆ น้อยๆ ที่ดีที่คุณสามารถใช้ได้
มันเจ๋งแค่ไหน?
และที่จริงแล้วมันเป็นมิตรกับแท็บเล็ตและมือถืออยู่แล้ว ดังนั้นทุกอย่างจึงถูกสร้างไว้ล่วงหน้าสำหรับคุณแล้ว
ที่สวยเย็นใช่มั้ย?
แล้วเราจะใช้สิ่งนี้ได้อย่างไร?
เอาล่ะ มาดาวน์โหลดกัน
และอีกอย่าง ในขณะที่คุณทำตาม คุณจะสามารถใช้สิ่งเหล่านี้ได้จริงตามต้องการ
แต่สำหรับตอนนี้ ลองใช้จักรวาลเดียว
เพียงเพราะมีนักบินอวกาศตัวน้อยอยู่ที่นี่ มันจึงดูเท่มาก
ลองดาวน์โหลดสิ่งนี้และดูว่าเกิดอะไรขึ้น
เอาล่ะ ฉันได้รับคำถามเล็กน้อยว่า เราจะดาวน์โหลดเทมเพลตได้อย่างไร
ในกรณีของเรา เราต้องการเลือก HTML
และที่นั่นคุณไป
เราได้โฟลเดอร์ซิปเล็ก ๆ ที่ดีและตอนนี้เราได้ดาวน์โหลดแล้ว
มาเปิดเรื่องนี้กันเถอะ
และโอ้ เด็กผู้ชาย นั่นเป็นจำนวนมากทั้งไฟล์และโฟลเดอร์
แล้วเราควรหยิบอะไรจากที่นี่?
มีบางอย่าง
อันดับแรก นี่คือหน้าตัวอย่าง
เราไม่ต้องการสิ่งนี้จริงๆ เลยย้ายไปที่ถังขยะ
ต่อไปเรามีทรัพย์สิน
เหล่านี้เป็นสินทรัพย์ที่แตกต่างกันสำหรับเพจของเราในการทำงาน เช่น เพจนักบินอวกาศ
ดังนั้นเราจะเก็บมันไว้
แล้วเราก็มีหน้า HTML ของเรา
ที่เราต้องการอย่างแน่นอน
แล้วดูเหมือนว่าเรามีไฟล์ JavaScript และไฟล์ CSS
ตอนนี้มีจุด GZ ที่นี่ ซึ่งเราเรียกว่าไฟล์บีบอัด ไฟล์บีบอัด GZ
นี่เป็นเพียงวิธีที่เซิร์ฟเวอร์ส่งไฟล์หรือไฟล์ JavaScript ที่คุณเห็นว่ามีขนาด 138 กิโลไบต์
แต่อยู่ในรูปแบบที่บีบอัด ดังนั้น 44 กิโลไบต์
ด้วยวิธีนี้ เราจะส่งข้อมูลไปยังส่วนหน้าน้อยลง
แล้วเราก็มีบางอย่างเช่น MAP ซึ่งช่วยเราได้จริงในระหว่างการดีบัก
แต่ในกรณีของเรา เราไม่จำเป็นต้องกังวลเกี่ยวกับเรื่องนี้ในตอนนี้
เรามาลบ GZIP และไฟล์แผนที่ทั้งหมดกันเถอะ
ดังนั้นเราจะย้ายไฟล์เหล่านั้นไปที่ถังขยะเพื่อให้เรามีไฟล์ CSS ไฟล์เดียวและไฟล์ JavaScript หนึ่งไฟล์ จากนั้นไฟล์อื่นๆ
ทั้งหมดจะเป็นไฟล์ HTML สำหรับหน้าเว็บต่างๆ ของเรา
ตอนนี้สิ่งที่เราจะทำคือเราจะคัดลอกสิ่งนี้และย้ายไปยังโฟลเดอร์โครงการของเรา
จำโฟลเดอร์นี้ที่นี่?
ตามหลักการแล้ว เราย้ายไฟล์ HTML ไปไว้ในเทมเพลตและไฟล์สแตติก นั่นคือไฟล์ CSS และ JavaScript และอาจเป็นสินทรัพย์ในที่นี้
นั่นคือภาพในที่นี้
มาทำกัน
ฉันมีเว็บเซิร์ฟเวอร์ของฉันที่นี่
ฉันจะคัดลอกและวางสิ่งที่เราเพิ่งคัดลอกก่อน
และย้ายไฟล์ HTML ทั้งหมดของเรา
ลงในแม่แบบของเรา
คุณรู้อะไรไหม เรามาลบเทมเพลตที่มีอยู่ของเรากันด้วย เพราะเราไม่ต้องการมันแล้ว
เรามีไฟล์ HTML ที่สวยงามแล้ว
แล้วมีทั้งหมดนี้
เรามีดัชนีใหม่ html ที่จะสวยกว่าเว็บไซต์เก่าของเรามาก ดังนั้นเราจึงต้องการใช้สิ่งนั้น
ลองย้ายทั้งหมดนั้นไปที่เทมเพลต
จากนั้นมาทำไฟล์ JS และ CSS รวมถึงโฟลเดอร์ asset ลงในสแตติก
สุดยอด.
ตอนนี้เราได้ตั้งค่าแล้ว ให้กลับไปที่โครงการของเราและดูที่
เรามี HTML อีกมากที่เรายังไม่ได้เขียน แต่โชคดีที่มันถูกสร้างขึ้นสำหรับเราแล้ว
ส่วนสุดท้ายของการตั้งค่าก็คือ เนื่องจากเราย้ายไฟล์ของเราไปรอบๆ เราจึงต้องปรับการเชื่อมโยงระหว่าง
HTML, CSS, JavaScript และไฟล์เนื้อหาทั้งหมด
ดังนั้นหากเราเลื่อนไปที่ดัชนี HTML
เราพบว่าเรากำลังมองหาไอคอน fab ของวาติกันและทรัพย์สิน
แต่เนื่องจากสิ่งนี้อยู่ในโฟลเดอร์สแตติก เราจึงต้องเพิ่มสแตติกในที่นี่
ลองหาที่อื่นที่เราใช้สินทรัพย์ที่นี่
ไม่เป็นไร.
เลยทำให้ดูใหญ่ขึ้นหน่อย
ดูเหมือนว่าที่นี่สำหรับภาพพื้นหลังของเรา
เรากำลังมองหารูปภาพอวกาศอีกครั้ง แต่นั่นเป็นสิ่งที่เรารู้ในโฟลเดอร์สแตติก
และมาดูกันว่าเรายังมีที่ไหนอีกบ้างที่เราอยู่ที่นี่ด้วย
มาทำสแตติกกันเถอะ
ไปต่อกันเลย
คงที่.
ไม่เป็นไร.
ทุกอย่างเป็นไปด้วยดี
ตอนนี้เรามีโฟลเดอร์คงที่
โอ้ เราต้องแน่ใจว่าเราเพิ่มเครื่องหมายทับหน้าจุด
Dot หมายถึงไดเร็กทอรีปัจจุบันแล้วดูในโฟลเดอร์สแตติก
กลับมาเถอะ ทำทุกอย่างให้ดีที่สุด
เราจะไปที่นั่น.
และเราไปที่นั่น
ตอนนี้ขอบันทึกนี้
และฉันไม่คิดว่าเรายังทำเสร็จแล้ว แต่สำหรับตอนนี้ ไปที่เซิร์ฟเวอร์ของเรากัน
ดอทพาย.
และสำหรับเส้นทางบ้านเรา เรามาลบสิ่งที่เราเคยมีกันก่อน
และเรียกมันว่าฟังก์ชันบ้านของฉัน
ที่ไม่ต้องใช้พารามิเตอร์ และมันจะย้อนกลับมาหาเราแทน
ดัชนีของเรา
HTML ที่ไม่มีพารามิเตอร์ในอดีต
เลยเก็บเอาไว้
กลับไปที่หน้าของเรา
หรือเว็บไซต์ของฉัน
และดูสิ่งที่เราได้รับเมื่อเรารีเฟรช
ไม่เป็นไร.
นั่นเป็นเว็บไซต์ที่สวยและน่าเกลียดมาก แต่ดูเหมือนว่าอย่างน้อยเรากำลังแสดงบางอย่างอยู่
แต่ในทันที เราสังเกตเห็นว่าไม่มีการใช้ CSS
ดูเหมือนว่าเรามี HTML แต่ลิงก์ก็ใช้งานไม่ได้เช่นกัน
นี่เป็นอีกครั้งเพราะเราต้องอัปเดตลิงก์ระหว่างไฟล์ต่างๆ
สิ่งที่เราจะทำคือกลับไปที่ดัชนี dot HTML และในแท็ก head เราจะเห็นว่าเรามีสไตล์ชีต ไฟล์
CSS ของเรา
แต่อีกครั้ง เราต้องอัปเดตสิ่งนี้เพื่อให้อยู่ในสแตติก
โฟลเดอร์
เช่นเดียวกับไฟล์ JavaScript ซึ่งถ้าเราเลื่อนไปจนสุดทาง เราก็มีไฟล์ JS อยู่ที่นี่
ซึ่งอีกครั้งจะอยู่ในโฟลเดอร์สแตติก
ได้เลย เซฟไว้เลย
และกลับไปดูว่าจะทำให้สิ่งต่างๆ ดีขึ้นหรือไม่
เฮ้ ดูนั่นสิ
ที่สวยเย็น
โปรดทราบว่านี่ดูใหญ่ไปหน่อยเพราะฉันเพิ่มขนาดเว็บไซต์ของฉันโดยทำคำสั่งบวกและลบเพื่อให้เรามองเห็นได้ดีขึ้น
แต่นั่นก็เยี่ยมมาก
ตอนนี้ ถ้าฉันคลิก สมมุติว่าใช้ได้
อืม ฉันได้รับเวิร์กสเตชัน
ไม่มี HTML
แล้วเราจะแก้ไขได้อย่างไร?
เรารู้แล้วว่าต้องทำยังไง ใช่ไหม?
สิ่งที่เราต้องทำคืออัปเดตเส้นทางต่างๆ เหล่านี้เพื่อชี้ไปยังเทมเพลตที่เหมาะสม
ในวิดีโอหน้า ผมจะแสดงวิธีการทำ แต่ผมอยากให้คุณลองทำเอง เพราะเราได้เรียนรู้สิ่งนี้แล้ว
ดังนั้นพยายามทำให้เว็บไซต์ทำงานได้เหมือนที่เรามี
ที่นี่ใน mash up templates ของเรา แล้วพบกันใหม่ในวิดีโอหน้า