ก่อนที่เราจะเริ่มทำเรามาวิเคราะห์หน้านี้ก่อน มาดูกันว่าเพจนี้ใช้อะไรบ้าง
□หัวข้อ "หน้าแรกของฉัน" ที่ด้านบนของหน้าเว็บคือย่อหน้าของข้อความ
□ตรงกลางของหน้าเว็บมีรูปภาพ
□ข้อความต้อนรับที่ด้านล่างเป็นย่อหน้าของข้อความ
□พื้นหลังของหน้าเว็บเป็นสีม่วงเข้ม
หลังจากกำหนดโครงสร้างของหน้าเว็บนี้แล้ว เราก็มาเริ่มสร้างมันได้เลย
ขั้นแรกให้เริ่ม Dreamweaver และตรวจสอบให้แน่ใจว่าคุณได้สร้างเว็บไซต์ (ไดเร็กทอรีราก) โดยใช้ตัวจัดการไซต์
เพื่อความสะดวกในการผลิต โปรดเปิดตัวจัดการทรัพยากรล่วงหน้าและรวบรวมรูปภาพเพื่อใช้ในโฟลเดอร์รูปภาพของไดเร็กทอรีเว็บไซต์
[ ใส่ข้อความชื่อเรื่อง]
เข้าสู่สถานะมุมมองการออกแบบการแก้ไขหน้า ภายใต้สถานการณ์ปกติ ตัวแก้ไขจะใช้ค่าเริ่มต้นในการจัดตำแหน่งด้านซ้าย เคอร์เซอร์จะกะพริบที่มุมซ้ายบน และตำแหน่งเคอร์เซอร์คือตำแหน่งของจุดแทรก หากคุณต้องการแทรกข้อความตรงกลาง ให้คลิกปุ่มตรงกลางในแผงคุณสมบัติ เริ่มวิธีการป้อนข้อมูลภาษาจีนและป้อนคำสี่คำ "หน้าแรกของฉัน" ฟอนต์จะเล็กไม่สำคัญเราตั้งค่าได้
[ตั้งค่ารูปแบบข้อความ] เลือกข้อความและตั้งค่ารูปแบบแบบอักษรเป็นแบบอักษรเริ่มต้นในแผงคุณสมบัติด้านบน สามารถเปลี่ยนขนาดแบบอักษรได้ตามต้องการ และเลือก "B" เพื่อให้แบบอักษรเป็นตัวหนา
[ตั้งค่าสีของข้อความ] ขั้นแรกให้เลือกข้อความ คลิกไอคอนการเลือกสีในแผงคุณสมบัติ และใช้หลอดดูดสีเพื่อเลือกสีในตัวเลือกสีแบบป๊อปอัป
[ตั้งชื่อเรื่องและสีพื้นหลังของหน้าเว็บ]
คลิกเมนู "แก้ไข" และเลือก "คุณสมบัติของเพจ" ระบบจะเปิดกล่องโต้ตอบคุณสมบัติของหน้าขึ้นมา (ดังภาพด้านล่าง)
กรุณากรอกชื่อ "หน้าแรกของฉัน" ในช่องป้อนชื่อ
ตั้งค่าสีพื้นหลัง: พื้นหลังของหน้าเว็บอาจเป็นรูปภาพหรือสีก็ได้ ในกรณีนี้คือสี เปิดตัวเลือกสีพื้นหลังตามที่แสดงด้านบนเพื่อเลือก หากคุณต้องการตั้งค่าพื้นหลังให้กับรูปภาพ ให้คลิกปุ่ม "เรียกดู" สำหรับรูปภาพพื้นหลัง ระบบจะแสดงกล่องโต้ตอบการเลือกรูปภาพขึ้นมา เลือกไฟล์รูปภาพพื้นหลังแล้วคลิกปุ่มตกลง
ในสถานะมุมมองออกแบบ คลิกเมาส์ในพื้นที่ว่างทางด้านขวาของชื่อ "หน้าแรกของฉัน" กด Enter เพื่อเปลี่ยนเส้น และทำตามขั้นตอนด้านล่างเพื่อแทรกรูปภาพและจัดรูปภาพให้อยู่ตรงกลาง คุณยังสามารถจัดตำแหน่งให้ชิดซ้ายได้โดยใช้ปุ่มจัดชิดซ้ายในแผงคุณสมบัติ
【แทรกรูปภาพ】เลือกวิธีใดวิธีหนึ่งต่อไปนี้:
(1) ใช้เมนูแทรก: เลือก "รูปภาพ" ในเมนู "แทรก" จากนั้นกล่องโต้ตอบ "เลือกไฟล์แหล่งที่มาของรูปภาพ" จะปรากฏขึ้น เลือกไฟล์รูปภาพ แล้วคลิกตกลง ดังที่แสดงด้านล่าง:
(2) ใช้คอลัมน์การแทรก: คลิกปุ่มวัตถุคอลัมน์การแทรก > ปุ่มเลือก จากนั้นกล่องโต้ตอบ "เลือกไฟล์แหล่งที่มาของรูปภาพ" จะปรากฏขึ้น และการดำเนินการที่เหลือจะเหมือนกับข้างต้น
(3) ใช้แผง "ทรัพยากร" ของกลุ่มแผง (ดังแสดงด้านล่าง): คลิกปุ่ม ขยายโฟลเดอร์รูปภาพในไดเรกทอรีราก เลือกไฟล์ และลากไปยังตำแหน่งที่เหมาะสมในพื้นที่ทำงานด้วยเมาส์
หมายเหตุ: เพื่อความสะดวกในการจัดการ เราใส่รูปภาพไว้ในโฟลเดอร์ "images" หากมีรูปภาพน้อย คุณสามารถวางไว้ในไดเร็กทอรีรากของไซต์ได้ โปรดทราบว่าชื่อไฟล์จะต้องตั้งชื่อเป็นภาษาอังกฤษหรือพินอินและเป็นตัวพิมพ์เล็ก และไม่สามารถเป็นภาษาจีนได้ ไม่เช่นนั้นจะเกิดปัญหาขึ้น
มีการแทรกรูปภาพ (แทรกไฟล์ภาพเคลื่อนไหว *.swf เลือกเมนู "แทรก" > สื่อ > Flash)
[ป้อนข้อความต้อนรับ]
คลิกในช่องว่างทางด้านขวาของรูปภาพแล้วกด Enter เพื่อตัดเส้น ยังคงปฏิบัติตามวิธีการข้างต้น ให้ป้อนข้อความ "ยินดีต้อนรับ..." จากนั้นใช้แผงคุณสมบัติเพื่อตั้งค่าข้อความ
บันทึกหน้า
หน้าธรรมดาได้รับการแก้ไขเช่นนี้
[แสดงตัวอย่างหน้าเว็บ] กด F12 ในตัวแก้ไขเพจเพื่อดูตัวอย่างเอฟเฟกต์ของหน้าเว็บ
หน้าแรกของเว็บไซต์ ซึ่งก็คือหน้าแรก มักจะชื่อว่า index.htm เมื่อทำการบันทึก
[สรุป] เราสร้างหน้าเว็บที่เรียบง่าย
มีเนื้อหาอยู่ 4 ประการ คือ
1. การตั้งค่าการแทรกและการจัดตำแหน่งรูปภาพ
2. การตั้งค่ารูปแบบข้อความ สี และตัวหนา
3. การตั้งค่าสีพื้นหลัง
④ดูตัวอย่างหน้าเว็บเพื่อดูผลกระทบที่เกิดขึ้นจริง
ไม่เพียงแต่คุณจะต้องเชี่ยวชาญเท่านั้น แต่คุณยังต้องฝึกฝนซ้ำๆ อีกด้วย