การแบ่งปันประสบการณ์: ทักษะการผลิตเชิงปฏิบัติในการออกแบบเว็บไซต์

1. ใช้สไตล์อย่างยืดหยุ่น

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

2. ใช้ประโยชน์จากคำสั่ง Format Table อย่างเต็มที่

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

3. เชื่อมโยงไปยังหน้าเว็บสองหน้าพร้อมกัน

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

4. อย่าตั้งชื่อไฟล์เป็นภาษาจีน

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

5. ตั้งค่าความละเอียดแบบอักษรอย่างชาญฉลาด

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

6. ซ่อนแท็กอย่างชาญฉลาด

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

7. ใช้เทคนิคการลากและวางให้เป็นประโยชน์

เมื่อเราใช้ Dreamweaver ในการแก้ไขหน้าเว็บ เรามักจะต้องแทรกรูปภาพบางส่วนไว้ หากมีรูปภาพจำนวนมากที่จะแทรก การดำเนินการตามปกติจะยุ่งยากมาก วิธี. เราสามารถใช้เทคนิคการลากและวางเพื่อแก้ไขปัญหานี้ได้เป็นอย่างดี ขั้นแรก เราเปลี่ยนหน้าต่างการทำงานของ Dreamweaver ให้เป็นหน้าต่างที่ใช้งานอยู่เพื่อเพิ่มพื้นที่ว่างเพื่อแสดงหน้าต่าง Explorer หลังจากค้นหาไฟล์รูปภาพที่จะแทรกแล้ว ให้ลากทีละไฟล์ไปยังส่วนที่เหมาะสมของหน้าเว็บด้วยเมาส์ จากนั้น Dreamweaver จะ แทรกรูปภาพเหล่านี้โดยอัตโนมัติ URL ของรูปภาพจะถูกเพิ่มลงในโค้ด HTML ของไฟล์ แน่นอนว่าไฟล์รูปภาพที่ลากจะต้องเป็นไฟล์รูปแบบเว็บ เช่น gif, jpg เป็นต้น เช่นเดียวกับรูปภาพที่มีอยู่แล้วบนหน้าเว็บ เพียงลากไปไว้เหนือ แต่หากมีไฮเปอร์ลิงก์บนรูปภาพที่ลาก คุณจะไม่สามารถใช้เทคโนโลยีการลากได้อีกต่อไป เนื่องจากจะลากเฉพาะที่อยู่ไฮเปอร์ลิงก์เท่านั้น

8. ตั้งเวลาอัปเดตอัตโนมัติ

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

＜ Script Language="JavaScript"> ＜/script> ประการที่สองคือใช้เมาส์เพื่อคลิกข้อความ/สไตล์ที่กำหนดเอง/แก้ไข/สไตล์ชีต/ใหม่/กำหนดแท็ก HTML ใหม่ ใน Dreamweaver และเลือกจากมัน จากนั้นเลือก none ในการตกแต่ง และสุดท้าย คลิก OK ก็เป็นอันเสร็จสิ้น

9. การคัดลอกข้อความอย่างชาญฉลาด

การคัดลอกข้อความระหว่างแอปพลิเคชันต่างๆ เป็นสิ่งที่เรามักทำในการทำงานจริง อย่างไรก็ตาม หากเราคัดลอกข้อความในพื้นที่แก้ไขจาก Dreamweaver ไปยังแอปพลิเคชันอื่น รหัส HTML และข้อความจะถูกคัดลอกพร้อมกัน แล้วเราจะคัดลอกเฉพาะข้อความในพื้นที่แก้ไขได้อย่างไร โดยปกติแล้วจะใช้ปุ่มลัด Ctrl - C เพื่อดำเนินการเมื่อคัดลอก หากเรากดปุ่ม C อีกหนึ่งปุ่มเมื่อทำการคัดลอก Dreamweaver จะคัดลอกเฉพาะข้อความที่เลือกเท่านั้น

10. ใช้ปุ่มลัดให้เกิดประโยชน์

เพื่อปรับปรุงประสิทธิภาพการทำงาน เราสามารถใช้ปุ่มลัดใน Dreamweaver เช่น การใช้ Ctrl-B หรือ Ctrl-I เพื่อใช้รูปแบบตัวหนาหรือตัวเอียงกับข้อความ แป้นพิมพ์ลัดต่อไปนี้เพื่อเลือก ข้อความใช้รูปแบบ HTML: Ctrl-0: ไม่ได้จัดรูปแบบ Ctrl-T: ย่อหน้า Ctrl-1: หัวเรื่อง 1 Ctrl-2: หัวเรื่อง 2 Ctrl-3: หัวเรื่อง 3 Ctrl-4: หัวเรื่อง 4 Ctrl-5: หัวเรื่อง 5 Ctrl-6 : หัวข้อ 6

11. ปิดหน้าเว็บโดยอัตโนมัติ

หากเราต้องการปิดหน้าเว็บโดยอัตโนมัติภายในเวลาที่กำหนด เราอาจเพิ่มโค้ดต่อไปนี้หลังแท็กในซอร์สโค้ดของหน้าเว็บ: ＜ script LANGUAGE ="JavaScript"> ＜ /script> รหัส 3000 ในหมายถึง 3 วินาทีซึ่งวัดเป็นมิลลิวินาที

12. ตั้งชื่อวัตถุอย่างชาญฉลาด

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

13. เพิ่มเอฟเฟกต์ไดนามิกให้กับลิงก์รูปภาพ

บางครั้งเพื่อให้ได้เอฟเฟกต์ที่สมจริง เราหวังว่าจะมีการเคลื่อนไหวเมื่อเลื่อนเมาส์ไปเหนือลิงก์ คุณสามารถบรรลุเอฟเฟกต์นี้ได้อย่างง่ายดายโดยใช้ Dreamweaver เมื่อออกแบบ อันดับแรกเราต้องเตรียมภาพสองภาพ ภาพแรกเป็นภาพต้นฉบับ และภาพที่สองคือภาพหลังจากเลื่อนเมาส์ขึ้น จากนั้นคลิกรูปภาพแรกด้วยเมาส์ กรอกไฟล์ที่จะลิงก์ในคอลัมน์ลิงก์ในแผงคุณสมบัติ จากนั้นคลิกปุ่ม F8 บนแป้นพิมพ์ คลิกเครื่องหมาย "+" ในหน้าต่างป๊อปอัป Behaviors จากนั้น เลือก " สลับรูปภาพ" เลือกรูปภาพที่สองในหน้าต่างที่ปรากฏขึ้น จากนั้นคลิกตกลงในที่สุด