สำหรับผู้สร้างเว็บเพจมืออาชีพที่ต้องการสร้างเว็บเพจที่ซับซ้อนในสภาพแวดล้อมที่มองเห็นได้ Dreamweaver ได้ค่อยๆ ปรากฏในตลาดเครื่องมือแก้ไขเว็บเพจ และกลายเป็นตัวเลือกที่ดีที่สุดสำหรับมืออาชีพในการเขียนเว็บเพจ เมื่อพิจารณาจากสถานการณ์ปัจจุบัน ฟังก์ชันภายในของ Dreamweaver อาจกล่าวได้ว่ามีมากมาย สมบูรณ์ และครบถ้วนมากขึ้นเรื่อยๆ ฉันอยากจะแนะนำเคล็ดลับการใช้งานในเวอร์ชัน 4.0 ให้กับคุณที่นี่
1. ทำให้หน้าเว็บมีความยืดหยุ่นมากขึ้น นักพัฒนาเว็บบางคนเรียกเทคนิคที่นำมาใช้ด้านล่างของเหลว แต่ฉันเรียกเทคนิคนี้ในที่นี้ว่ายืด (เทคนิคการขยายแบบยืดหยุ่น) นี่เป็นเทคนิคที่สามารถปรับขนาดของหน้าเว็บได้เมื่อขนาดของหน้าต่างเบราว์เซอร์ของผู้เยี่ยมชมเปลี่ยนแปลง ดังนั้น หากหน้าต่างใหญ่เกินไปก็จะไม่มีช่องว่าง และหากหน้าต่างเล็กเกินไป หน้าต่างจะขึ้นและ แถบเลื่อนลงจะไม่ปรากฏบนขอบ ที่จริงแล้วหน้าเว็บธรรมดาส่วนใหญ่จะปรับขนาดหน้าโดยอัตโนมัติตามขนาดของหน้าต่างเบราว์เซอร์ อย่างไรก็ตาม หากมีการใช้เฟรมและตารางที่แตกต่างกันจำนวนมากในหน้าเว็บ ก็จะเป็นการยากที่ขนาดหน้าเว็บจะปรับขนาดโดยอัตโนมัติและ ปรับได้อย่างยืดหยุ่น โดยปกติแล้ว นักออกแบบเว็บไซต์จะใช้การผสมผสานระหว่างกรอบความกว้างของคอลัมน์คงที่และรูปภาพ GIF เป็นช่วงเวลาในการออกแบบหน้าเว็บ ด้วยวิธีนี้ ไม่ว่าจะใช้ Internet Explorer หรือ Mac ขนาดหน้าจะได้รับการแก้ไขและจะไม่หายไป ด้วย Dreamweaver 4.0 คุณสามารถออกแบบหน้าเว็บที่ปรับเปลี่ยนได้อย่างยืดหยุ่นโดยอัตโนมัติ ทำอย่างไร?
เปิดหน้าเว็บโดยใช้ปุ่มบนจานสีวัตถุ และสลับไปที่มุมมองเค้าโครง ในขณะนี้ คุณสามารถดูความกว้างของคอลัมน์ของกล่องข้อความได้ มีลูกศรดรอปดาวน์เล็กๆ อยู่ตรงกลางของกล่องเหนือแต่ละคอลัมน์ เลือกลูกศรเล็กๆ เหนือคอลัมน์ที่คุณต้องการตั้งค่าการแสดงผลแบบยืดหยุ่น และ จากนั้นเลือก "ทำให้คอลัมน์มีความยืดหยุ่น" (ทำให้คอลัมน์ยืดอัตโนมัติ) (ตั้งค่าการปรับความกว้างคอลัมน์โดยอัตโนมัติให้จำกัดไว้ที่หนึ่งคอลัมน์) ในขณะนี้ เส้นหยักจะปรากฏขึ้นเหนือกล่องคอลัมน์ แทนที่จะเป็นตัวเลขเดิมที่ระบุความกว้างของคอลัมน์ Dreamweaver จะสร้างไฟล์รูปภาพเปล่าที่มีเลย์เอาต์คงที่โดยอัตโนมัติ โดยจะมีตารางว่างยาว 2 ตารางอยู่เหนือคอลัมน์ ด้วยวิธีนี้ เลย์เอาต์จะถูกเติมโดยอัตโนมัติ และการตั้งค่าเลย์เอาต์ที่ยืดหยุ่นจะเสร็จสมบูรณ์ (เมื่อคุณเพิ่มไฟล์รูปภาพเปล่าเป็นครั้งแรก กล่องโต้ตอบจะปรากฏขึ้นเพื่อถามว่าคุณต้องการใช้ไฟล์รูปภาพในตัวหรือไม่ เพื่อผลที่ดีที่สุด ฉันขอแนะนำให้คุณปล่อยให้ Dreamweaver สร้างไฟล์ขึ้นมาโดยอัตโนมัติ ไม่อย่างนั้นคุณ ไม่ต้องใช้ไฟล์ภาพเปล่าเพื่อเติมเค้าโครง)
2. สร้างพาเนลสีส่วนบุคคลของ Dreamweaver 4.0 เป็นเครื่องมือใหม่ที่สามารถจัดการไฟล์ตามประเภทไฟล์ เช่น รูปภาพ เทมเพลต ฯลฯ . เมื่อแก้ไขเว็บไซต์ เมื่อคุณกำหนดเว็บไซต์ใหม่ (เลือกไซต์ · ไซต์ใหม่) ส่วนประกอบทุกประเภทจะถูกเพิ่มลงในกล่องที่เหมาะสมในแผงสินทรัพย์โดยอัตโนมัติ แผงเนื้อหาใหม่นี้ยังมีกล่องสีในแผงควบคุมคุณสมบัติ ซึ่งจัดเก็บสีทั้งหมดที่ใช้ในเว็บไซต์ของคุณ รวมถึงสีข้อความ สีพื้นหลัง และสีลิงก์ นี่คือชุดสีสำหรับเว็บไซต์ที่ออกแบบมาสำหรับผู้ใช้ เพียงเปิดใช้งานแผงสินทรัพย์ (เลือกหน้าต่างก่อน จากนั้นเลือกสินทรัพย์) จากนั้นเลือกแถบเลื่อนสีเล็กๆ ทางด้านซ้าย แล้วคุณจะเห็นตัวเลือกสีที่หลากหลายสำหรับเว็บไซต์ของคุณ แน่นอนคุณสามารถดึงสีเหล่านี้ไปยังข้อความที่เลือกได้ แม้ว่าคุณจะเลือกสี ค่าเลขฐานสิบหกของสีและรหัสที่สอดคล้องกันสามสี (RGB) จะปรากฏบนหน้าจอ หากคุณต้องการทำให้แถบเครื่องมือจานสีของคุณเล็กลง คุณสามารถเพิ่มเฉพาะสีบางสีลงในรายการโปรดของจานสีของคุณได้ เพียงไฮไลต์สีที่เลือก เลือกปุ่ม "เพิ่มในรายการโปรดของฉัน" ในหน้าต่าง (ปุ่มขวาล่าง) เท่านี้ก็เสร็จเรียบร้อย
3. การสร้างระบบนำทางเมนูป๊อปอัป เดิมทีการสร้างระบบนำทางเมนูป๊อปอัปต้องใช้ทักษะด้านไวยากรณ์ JavaScript บางอย่าง แต่หากคุณติดตั้ง Dreamweaver/Fireworks Studio ก็สามารถทำได้อย่างรวดเร็ว เริ่มแรกในดอกไม้ไฟ เลือกรูปภาพ จากนั้นเลือกแทรก·เมนูป๊อปอัปในกล่องโต้ตอบตั้งค่าเมนูป๊อปอัป คุณสามารถป้อนชื่อของรายการและเลือกปุ่มบวกเพื่อเพิ่มโปรเจ็กต์ คุณสามารถดำเนินการตั้งค่าโดยละเอียดต่อไปได้ในกล่องข้อความป๊อปอัป เช่น การตั้งค่าข้อความและลิงก์ที่จะใช้สำหรับรายการนั้น แน่นอนว่าคุณสามารถเพิ่มเมนูย่อยและจัดเรียงการตั้งค่าใหม่สำหรับระดับถัดไปได้ เมื่อเสร็จแล้ว ให้เลือก ถัดไป เพื่อตั้งค่ากำหนดเช่น สี แบบอักษร และอื่นๆ ต่อไป หลังจากเมนูเสร็จสิ้น คุณสามารถดูตัวอย่างไวยากรณ์ HTML และดูตัวอย่างรูปภาพได้ จากนั้นเลือก เสร็จสิ้น ในเวลานี้เมื่อเมาส์เลื่อนไปที่รูปแบบเดิม รายการเนื้อหาของระบบเมนูจะปรากฏขึ้น จากนั้นเมื่อคุณส่งออกไฟล์ที่สร้างขึ้น Fireworks จะสร้างไฟล์ HTML, JavaScript และรูปภาพทั้งหมดที่ Dreamweaver ต้องการโดยอัตโนมัติ
4. ทำให้ไฟล์รูปภาพเคลื่อนไหว!
หากคุณติดตั้ง Dreamweaver/Fireworks Studio ในเวลาเดียวกัน คุณจะทึ่งกับการผสมผสานที่ลงตัวของผลิตภัณฑ์ทั้งสองนี้ แม้ว่าคุณจะไม่ใช่นักออกแบบกราฟิกมืออาชีพ แต่คุณยังคงต้องการแก้ไขไฟล์ภาพ GIF บางไฟล์เพื่อให้มีสีสันมากขึ้นเมื่อออกแบบหน้าเว็บ Dreamweaver ให้คุณสร้างแอนิเมชั่นได้โดยไม่ต้องถามใคร! เลือกรูปภาพที่คุณต้องการแก้ไขในหน้าต่างมาตรฐาน จากนั้นเลือกปุ่มแก้ไขในตัวตรวจสอบคุณสมบัติ หากรวม Fireworks ไว้ในการติดตั้ง Dreamweaver ของคุณ Fireworks จะเป็นโปรแกรมแก้ไขรูปภาพเริ่มต้นของ Dreamweaver และรูปภาพจะถูกโหลดเข้าสู่ Fireworks โดยอัตโนมัติ (หากสังเกตดีๆ จะพบว่าข้อความและกราฟิก เช่น การแก้ไขจาก Dreamweaver จะปรากฏบนหน้าจอดอกไม้ไฟ ซึ่งบ่งบอกว่าคุณสามารถแก้ไขรูปภาพจาก Dreamweaver ได้) เอาล่ะ ตอนนี้เลือกรูปภาพที่จะแก้ไขใน Fireworks แล้วเลือก Modify· เคลื่อนไหว · การเลือกภาพเคลื่อนไหว จากนั้น ตั้งค่าในกล่องโต้ตอบ Animate ให้เสร็จสิ้น เลือกจำนวนเฟรมสำหรับภาพเคลื่อนไหว ทิศทางการเคลื่อนไหวของภาพเคลื่อนไหว ความโปร่งใส ฯลฯ คุณยังสามารถเลือกแถบเครื่องมือ Frames เพื่อตั้งค่าความเร็วในการเคลื่อนที่ และเลือกแผง Object เพื่อเปลี่ยนการตั้งค่า หากต้องการส่งออกไฟล์ เพียงเลือกแถบเครื่องมือ Optimize และเลือก Animated GIF เป็นประเภทไฟล์ หลังจากเสร็จสิ้น ดอกไม้ไฟจะส่งออกรูปภาพโดยอัตโนมัติด้วยการตั้งค่าที่ปรับให้เหมาะสม อัปเดตไฟล์รูปภาพ GIF โดยอัตโนมัติ และแสดงไฟล์รูปภาพที่อัปเดตใน Dreamweaver เลือกไฟล์·ดูตัวอย่างในเบราว์เซอร์ เพื่อให้คุณสามารถดูตัวอย่างภาพน่ารักที่คุณเพิ่งสร้างขึ้นในเบราว์เซอร์ได้!
5. ทำให้ปุ่มมีเอฟเฟกต์การกะพริบ ใน Dreamweaver คุณสามารถสร้างวัตถุปุ่ม Flash พร้อมเอฟเฟกต์การกะพริบโดยไม่ต้องใช้โปรแกรม Flash เวอร์ชัน 4.0 มีออบเจ็กต์ปุ่ม Flash ในตัวหลายรายการ ซึ่งสามารถสร้างปุ่มได้หลายรูปแบบ เลือกแทรก·รูปภาพเชิงโต้ตอบ·ปุ่มแฟลชเพื่อดูว่ามีปุ่มใดในตัวที่พร้อมใช้งาน คุณยังสามารถใช้เมาส์เพื่อชี้ไปที่รูปแบบปุ่มที่คุณต้องการใช้ในกล่องโต้ตอบ แล้วดูว่ามันทำงานอย่างไรในเบราว์เซอร์ ใช้เคอร์เซอร์ของเมาส์เพื่อเลือกรูปแบบปุ่มที่คุณต้องการใช้ จากนั้นป้อนพารามิเตอร์ตามลำดับ เช่น ข้อความ แบบอักษร สี ลิงก์ ฯลฯ บนปุ่ม หรือชื่อไฟล์ที่กำหนดเอง กดตกลง จากนั้น ไฟล์ SWF จะถูกสร้างขึ้นและวางบนหน้าเว็บของคุณโดยอัตโนมัติ คลิกที่ไฟล์ที่เสร็จสมบูรณ์แล้วคุณจะเห็นคุณสมบัติของไฟล์ที่แสดงใน Property Inspector เมื่อแสดงคุณสมบัติของไฟล์ หากคุณขยายรายการคุณสมบัติของไฟล์ ปุ่มเล่นจะปรากฏขึ้น หลังจากเลือกแล้ว คุณสามารถดูตัวอย่างเอฟเฟกต์การกะพริบของปุ่มได้โดยไม่ต้องเปิดเบราว์เซอร์
6. สร้างข้อความต่อเนื่อง การเพิ่มข้อความต่อเนื่องให้กับหน้าเว็บนั้นง่ายพอๆ กับการเพิ่มปุ่ม Flash ที่ฉันเพิ่งแนะนำ ในทำนองเดียวกัน คุณไม่จำเป็นต้องติดตั้ง Flash คุณสามารถทำได้ง่ายๆ ด้วยฟีเจอร์ใหม่ๆ ของ Dreamweaver 4.0 ผู้สร้างเว็บเพจที่มักใช้ไวยากรณ์ HTML ในการเขียนเว็บเพจและไม่มีประสบการณ์ด้านสื่อเชิงโต้ตอบสามารถสร้างข้อความที่มีขนาดกะทัดรัดในรูปแบบ Flash ได้อย่างง่ายดาย จากข้อมูลของ Macromedia ผู้ใช้อินเทอร์เน็ต 97% สามารถดูหน้าเว็บที่มีเอฟเฟกต์ Flash ได้ ดังนั้นฟีเจอร์ใหม่นี้จึงสามารถเพิ่มการโต้ตอบในการเรียกดูและผู้อ่านไปยังหน้าเว็บได้โดยไม่ต้องเพิ่มปัญหาความเข้ากันได้ เลือก แทรก · รูปภาพเชิงโต้ตอบ · ข้อความแฟลช จากนั้นกรอกการตั้งค่ากำหนดทีละรายการ (เช่น ข้อความ ลักษณะแบบอักษร สีแบบอักษร ขนาดแบบอักษร ฯลฯ ที่คุณต้องการเปลี่ยนเอฟเฟ็กต์)
7. เปลี่ยนแป้นพิมพ์ลัด Dreamweaver ช่วยให้ผู้ใช้ปรับแต่งอินเทอร์เฟซได้ การออกแบบนี้มีความยืดหยุ่นมาก ตัวอย่างเช่นผู้ใช้สามารถเปลี่ยนเมนูโดยการเขียนโปรแกรมหรือเพิ่มวัตถุ คุณไม่จำเป็นต้องเป็นผู้เชี่ยวชาญในการเปลี่ยนแป้นพิมพ์ลัด เนื่องจาก Dreamweaver มีอินเทอร์เฟซแบบกราฟิกที่เรียกว่า Keyboard Shortcut Editor เพียงเลือกแก้ไข · แป้นพิมพ์ลัด จากนั้นกล่องโต้ตอบจะโหลดและแสดงรายการคีย์ลัดที่สามารถเปลี่ยนแปลงได้ ช่วยให้คุณเปลี่ยนคีย์เป็นค่าการตั้งค่าที่คุณคุ้นเคยได้อย่างรวดเร็ว หากต้องการเปลี่ยนคีย์ลัด เพียงใช้เมนูแบบเลื่อนลงของรายการชุดปัจจุบันและคำสั่ง ค้นหาคำสั่งที่คุณต้องการเปลี่ยนระหว่างคำสั่งที่มีอยู่ จากนั้นเลือกคีย์ลัดปัจจุบัน ซึ่งจะปรากฏในรายการคีย์ลัด ในรายการคีย์ นอกจากนี้ หากคุณต้องการเพิ่มการตั้งค่าคีย์ด่วน คุณสามารถเลือกปุ่มบวก พิมพ์คีย์ตัวแทนด่วนใหม่ที่คุณต้องการใช้บนแป้นพิมพ์ และเลือก เปลี่ยน ในเวลาเดียวกัน คุณยังสามารถเลือกปุ่มทางลัดและเลือกปุ่มลบ (ลบ) เพื่อลบปุ่มทางลัดได้
8. รีเซ็ตความกว้างคอลัมน์ของหน้าต่าง Site เพียงเลือก View·File View Columns จากหน้าต่าง Site เพื่อปรับแต่งขนาดและการนำเสนอความกว้างของคอลัมน์เมื่อดูมุมมอง Site เลือกคอลัมน์ชื่อและใช้ลูกศรขึ้นและลงเพื่อปรับขนาด หรือยกเลิกการเลือกแสดงฟิลด์เพื่อซ่อนคอลัมน์ นอกจากนี้ คุณยังสามารถเพิ่มคอลัมน์ได้โดยเลือกปุ่มบวก และสร้างชื่อคอลัมน์ของคุณเอง นอกจากนี้ คุณยังสามารถเชื่อมโยงคอลัมน์กับบันทึกการออกแบบโดยเลือกบันทึกย่อที่มีอยู่จากเมนูแบบเลื่อนลง
9. อ่านไฟล์หน้าเว็บต้นฉบับ เมื่อคุณเปิดการอ้างอิงรหัส O'Reilly (หน้าต่าง · การอ้างอิง) เพื่อตรวจสอบคุณสมบัติหรือความเข้ากันได้ของเบราว์เซอร์ หน้าต่างเริ่มต้นจะแสดงการตั้งค่าการอ้างอิงเป็นแบบอักษรขนาดเล็ก แต่ถ้าคุณกดปุ่มขวาที่มุมขวาบนของหน้าต่าง (ใต้ปุ่มปิด) แถวของเมนูแบบเลื่อนลงจะปรากฏขึ้นโดยคุณสามารถเลือกขนาดตัวอักษรของเอกสารต้นฉบับได้ (เล็ก ถึงกลาง และ ใหญ่). . การเลือกแบบอักษรขนาดใหญ่จะไม่ทำให้เสียสายตาเพราะคุณไม่จำเป็นต้องถือแว่นขยายเพื่อดูหน้าจอเมื่อดูไฟล์ HTML ต้นฉบับ!
10. เพิ่มปุ่ม Flash ใหม่ ฉันได้สอนวิธีใช้ปุ่มที่ตั้งไว้ล่วงหน้า 20 ประเภทเพื่อสร้างปุ่ม Flash ใน Dreamweaver วิธีนี้ไม่จำเป็นต้องติดตั้งไฟล์หรือโปรแกรมเพิ่มเติมใดๆ มีวิธีอื่นด้านล่าง ซึ่งก็คือการติดตั้งปุ่มดอกไม้ไฟ ฟังก์ชันเพิ่มเติมนี้ให้ผลเหมือนกับเคล็ดลับที่ 5 ไปที่ Exchange for Dreamweaver (ศูนย์แลกเปลี่ยนส่วนขยาย Dreamweaver) ป้อนคำค้นหา "InstaGraphics Extensions for Dreamweaver" จากนั้นดาวน์โหลดไฟล์ 577K นี้ สลับไปที่ Dreamweaver เลือก Commands·Manage Extensions จากนั้นเลือก File·Install Extension เพื่อเริ่มการติดตั้ง เมื่อเปิดใช้งาน Dreamweaver อีกครั้ง จะมีปุ่มประเภทใหม่ที่น่าสนใจอยู่หกประเภท รวมถึงกระดานโต้คลื่นและแถบกระสุน ในขณะนี้ เพียงใช้คำสั่ง แทรก · รูปภาพเชิงโต้ตอบ · ปุ่มดอกไม้ไฟ เพื่อสร้างปุ่มเจ๋งๆ คุณยังสามารถใช้คำสั่ง ·แปลงสัญลักษณ์แสดงหัวข้อย่อยเป็นรูปภาพ และคำสั่ง ·แปลงข้อความเป็นรูปภาพ ทั้งสองวิธีข้างต้นสามารถเรียกใช้ดอกไม้ไฟได้โดยอัตโนมัติ
11. เพิ่มฟังก์ชัน "Set as Favorites" ลงในหน้าเว็บและค้นหาใน Exchange คุณจะพบฟังก์ชันเสริมของ Add To Favorites ไฟล์ขนาดเล็กนี้ใช้พื้นที่เพียง 3K และเวลาในการดาวน์โหลดจะใช้เวลาไม่นานเกินไป จากนั้นทำตามขั้นตอนเดียวกันเพื่อโหลดจาก Extension Manager (คำสั่ง · จัดการส่วนขยาย, ไฟล์ · ติดตั้งส่วนขยาย) จากนั้นเปิดใช้งาน Dreamweaver อีกครั้ง ไฟล์นามสกุลที่โหลดใหม่นี้จะเพิ่มคุณสมบัติใหม่ให้กับ Dreamweaver หากคุณเพิ่มฟังก์ชัน "เพิ่มในรายการโปรด" นี้ลงในหน้าเว็บของคุณ เมื่อผู้ใช้อินเทอร์เน็ตเยี่ยมชมเว็บไซต์ของคุณ เขาก็จะสามารถเพิ่มเว็บไซต์ของคุณลงในรายการโปรดของเบราว์เซอร์ได้อย่างง่ายดายเพียงคลิกเดียว (หรือบุ๊กมาร์กส่วนตัว) นอกจากนี้คุณยังสามารถปรับแต่งชื่อของทางลัดที่ชื่นชอบและไอคอนเล็ก ๆ ที่จะปรากฏด้านหน้าชื่อทางลัดที่ชื่นชอบได้ (โดยทั่วไปไอคอนเล็ก ๆ ที่อยู่ด้านหน้าทางลัดที่ชื่นชอบใน IE จะเป็นค่าเริ่มต้นของ IE หากคุณ มีไอคอนขนาดเล็กที่ออกแบบมานั้นเจ๋งกว่ามาก โปรดทราบว่าฟังก์ชั่นนี้รองรับเฉพาะเบราว์เซอร์ที่มี IE 4.0 ขึ้นไป เพียงเลือกแผงพฤติกรรมในเมนู Windows และเลือกตัวเลือกนี้ในเมนูแบบเลื่อนลงฟังก์ชั่น IE
ต้องการสร้างแผนภูมิเจ๋งๆ
คุณยังต้องใช้เวลาพิมพ์ซอร์สโค้ดของหน้าเว็บหรือไม่ มีอันสำเร็จรูปให้ดาวน์โหลดจาก Exchange แล้ว! เพื่อคัดลอกแบบฟอร์มที่มีฟิลด์ต่างๆ เช่น ประเทศ เพศ สถานภาพสมรส กลุ่มอายุ และหมวดหมู่อื่นๆ ดาวน์โหลดไฟล์ขนาดเล็ก (เพียง 11K) จาก Exchange จากนั้นใช้ Extension Manager ติดตั้ง (คำสั่ง·จัดการส่วนขยาย ไฟล์) ·ติดตั้งส่วนขยาย) จากนั้นเพียงเปิดใช้งาน Dreamweaver อีกครั้งและเลือก Insert·FormBuilder และคุณจะพบไฟล์นามสกุลใน (Insert·FormBuilder) หลังจากเลือก หน้าต่างโต้ตอบจะปรากฏขึ้น เมนูรูปแบบที่เกี่ยวข้องทั้งหมด