ดังที่เราทุกคนทราบกันดีว่าการผลิตเว็บไซต์เกี่ยวข้องกับความรู้หลายด้าน รวมถึงการออกแบบกราฟิก การสร้างเพจ HTML การกำหนดสไตล์ CSS การเขียนสคริปต์ฝั่งไคลเอ็นต์ (JavaScrfipt/VBScript) การเขียนสคริปต์ฝั่งเซิร์ฟเวอร์ (Asp/Asp.Net/PHP/JSP) ฯลฯ เนื้อหา ในฉบับนี้ ผู้เขียนเริ่มต้นจากพื้นฐานที่สุด โดยเน้นที่วิธีสร้างเว็บไซต์ HTML แบบง่ายๆ และเริ่มสัมผัสประสบการณ์ความสนุก
1. เครื่องมือสร้างหน้าเว็บที่ผู้เขียนใช้ที่นี่คือ Dreamweaver ขั้นแรกให้เรียกใช้ Dreamweaver เลือกเมนู "File" → "New" จากนั้นหน้าต่างที่แสดงในรูปที่ 1 จะปรากฏขึ้น
2. มีเจ็ดตัวเลือกภายใต้แท็บ "หน้าพื้นฐาน" ในหน้าต่างนี้ หลังจากที่เราเลือกรายการ "HTML" และคลิกปุ่ม "สร้าง" พื้นที่ทำงานในการสร้างจะว่างเปล่า ซึ่งหมายความว่าหน้า HTML ถูกสร้างขึ้นสำเร็จแล้ว คลิกที่มุมมองโค้ดและเนื้อหาที่แสดงในรูปที่ 2 จะปรากฏขึ้น
3. ละเว้นความหมายเฉพาะของโค้ดหน้า HTML ที่แสดงเหล่านี้ อันดับแรกเราเปลี่ยน "ชื่อเอกสารที่ไม่มีชื่อ" เป็น "เปิดตัวหน้าเว็บ" จากนั้นเลือกมุมมองการออกแบบ คลิก "เมนู" → "แทรก" → "HTML" → "กรอบ" → "ด้านบน" เพื่อแทรกกรอบที่ด้านบนของหน้าเว็บ ขณะนี้หน้าเว็บแบ่งออกเป็น 2 เฟรม คือ กรอบบนและกรอบล่าง หลังจากที่เราเลือกเฟรมแล้ว ให้เลือกคำสั่ง "Menu" → "Insert" → "HTML" → "Frame" → "Left" ซึ่งจะแทรกเฟรมทางด้านซ้ายของหน้าเว็บ
4. คลิก "Ctrl+S" เพื่อบันทึกแต่ละเฟรม (top.htm, left.htm, right.htm) จากนั้นเลือกกรอบด้านซ้ายแล้วคลิกคำสั่ง "เมนู" → "แทรก" → "ไฮเปอร์ลิงก์" จากนั้นกล่องโต้ตอบที่แสดงในรูปที่ 3 จะปรากฏขึ้น ป้อนรายการต่างๆ ในกล่องโต้ตอบนี้ โดยที่ "ข้อความ" คือข้อความที่แสดงในลิงก์ "ลิงก์" คือที่อยู่หน้าที่ข้ามไปยังหลังจากการคลิก และ "เป้าหมาย" คือเฟรมที่จะแสดง ที่นี่เราเลือก "เป้าหมาย" เป็น mainFrame (เช่น กรอบด้านซ้าย) และทำตามขั้นตอนนี้เพื่อแทรกไฮเปอร์ลิงก์ต่อไป จากนั้น เข้าสู่มุมมองโค้ดของเฟรมด้านขวา (right.htm) และป้อน <marquee detail=left align=middle>ยินดีต้อนรับสู่เว็บไซต์ของฉัน!!!</marquee> ใน <body></body> นี่คือข้อความ เอฟเฟกต์พิเศษสามารถทำให้ข้อความเลื่อนไปทางซ้าย ขวา ขึ้นและลง การเปลี่ยนทิศทางเป็น (ขึ้น ลง ซ้าย ขวา) สามารถเปลี่ยนทิศทางการเคลื่อนไหวของข้อความได้
5. ตอนนี้เราได้สร้างเพจ HTML พร้อมเฟรมแล้ว เราจะเพิ่มแบนเนอร์ที่เฟรมด้านบน (top.htm) แบนเนอร์สามารถสร้างเอฟเฟกต์แบบไดนามิกของ JavaScript ได้ สามารถดูโค้ดเฉพาะสำหรับเอฟเฟกต์การแลกเปลี่ยนแบบไดนามิกได้ในซอร์สโค้ดของหน้า Top.Htm ผู้เขียนให้รหัสคีย์ที่นี่เท่านั้น:
แบนเนอร์โฆษณา[0]=pic173.gif;
BannerADlink[0]=http://www.sina.com;
แบนเนอร์โฆษณา[1]=pic1732.gif;
แบนเนอร์ADlink[1]=http://www.sohu.com;
คำอธิบายโค้ด: ด้านบนเป็นอาร์เรย์ JavaScript BannerAD จะจัดเก็บรูปภาพ และ BannerADlink จะจัดเก็บลิงก์หลังจากคลิกที่รูปภาพ คุณสามารถเพิ่มหรือลบรูปภาพได้ตามความต้องการ
6. สร้างหน้าสำหรับไฮเปอร์ลิงก์ในกรอบด้านขวาต่อไป สามารถปรับแต่งเนื้อหาเฉพาะได้ด้วยตัวเอง เลือกเมนู "ไฟล์" คลิก "ใหม่" เลือก HTML เพื่อสร้างชุดหน้า และชื่อของหน้าควรสอดคล้องกับชื่อที่เขียนเมื่อแทรกลิงก์ ผู้เขียนได้ยกตัวอย่างไว้ 2 ตัวอย่าง (ข่าวล่าสุดและดาราดัง) ในเอกสารต้นฉบับ และผู้อ่านสามารถลองเพิ่มเนื้อหาได้ด้วยตนเอง ด้วยวิธีนี้ ต้นแบบของเว็บไซต์ HTML จะถูกสร้างขึ้น ดังแสดงในรูปที่ 4 เป็นผลสุดท้ายของหน้า
เอฟเฟกต์ไดนามิกจะไม่ปรากฏในภาพหน้าจอ ผู้อ่านสามารถเปิด Index.htm ในไฟล์ต้นฉบับใน IE ได้โดยตรง หลังจากเปิดแล้ว จะมีข้อความแจ้งเมื่อคุณคลิกขวา เมนูพร้อมท์ "อนุญาตเนื้อหาที่ถูกบล็อก" จะปรากฏขึ้น (รูปที่ 5)
สรุป: ในฉบับนี้ เราจะแนะนำวิธีใช้ Dreamweaver เพื่อสร้างไซต์ HTML อย่างง่าย ซึ่งใช้ JavaScript, กรอบงาน HTML, ไฮเปอร์ลิงก์ และเทคโนโลยีอื่นๆ นอกจากนี้ ข้อความแจ้งการบล็อกเนื้อหาที่เราเห็นด้านบนเป็นเพราะหน้าเว็บไม่ได้รับการเผยแพร่ไปยังไซต์ ในฉบับหน้าผู้เขียนจะนำเสนอเนื้อหาที่น่าตื่นเต้นยิ่งขึ้นให้กับคุณ