2. แก้ไขชื่อไฟล์อย่างรวดเร็ว หลายครั้งที่เราสร้างไฟล์ใหม่ เรามักจะมองข้ามเนื้อหาของชื่อไฟล์ เมื่อเราต้องการแก้ไขในภายหลัง เรามักจะต้องเปิดแต่ละไฟล์และแก้ไขแยกกัน ที่จริงแล้วงานนี้สามารถทำให้เสร็จได้อย่างง่ายดายในหน้าต่างไซต์ เปิดแสดงชื่อหน้าภายใต้เมนูมุมมองของหน้าต่างไซต์เพื่อทำให้ไฟล์ในหน้าต่างไซต์แสดงส่วนหัวของไฟล์แทนชื่อไฟล์ต้นฉบับ ส่วนหัวของไฟล์เริ่มต้นคือ Untitled Document เราสามารถคลิกสองครั้งเพื่อเปลี่ยนข้อความเริ่มต้นเป็นส่วนหัวของไฟล์ที่เราต้องการ ดังแสดงในภาพ:
3. สร้างแผนผังเว็บไซต์อย่างรวดเร็ว บางครั้งเราจำเป็นต้องสร้างแผนผังไซต์ที่มีโครงสร้างไฟล์ทั้งหมดของไซต์ปัจจุบันและไม่สามารถหาวิธีการที่เหมาะสมได้ Dreamweaver มีฟังก์ชันนี้เอง วิธีการมีดังนี้: เปิดไฟล์—บันทึกแผนผังเว็บไซต์ และป้อนชื่อไฟล์ที่บันทึกไว้ในกล่องโต้ตอบป๊อปอัป Dreamweaver จะสร้างไซต์รูปแบบ .bmp หรือ .png ในไดเร็กทอรีรากโดยอัตโนมัติ ของไซต์ปัจจุบัน
2.เทคนิคในขั้นตอนการจัดเรียงหน้ากระดาษ
Dreamweaver ไม่เพียงแต่เป็นเครื่องมือสร้างเพจที่ดีเท่านั้น แต่ยังสามารถเรียงพิมพ์และจัดวางหน้าได้อย่างแม่นยำ ในส่วนนี้ เราจะแนะนำเทคนิคการจัดวางหน้าต่างๆ
1. เปิดแบบฟอร์มเสริม เพื่อนๆ ที่ทำการออกแบบโดยเฉพาะหวังที่จะวางตำแหน่งองค์ประกอบหน้าเว็บได้อย่างแม่นยำ พวกเขาชอบให้แต่ละองค์ประกอบสามารถวางตำแหน่งได้อย่างถูกต้องตามความต้องการ ฟังก์ชั่น Grid ที่มาพร้อมกับ Dreamweaver สามารถช่วยทำให้ความหวังนี้เป็นจริงได้ ดำเนินการคำสั่ง View—แก้ไข Grid เพื่อเปิดการประสานงาน คุณสามารถเลือกตารางหรือการแสดงจุด และเปิด Snap to Grid ได้ เมื่อแทรกหรือเพิ่มองค์ประกอบใหม่ในอนาคต องค์ประกอบเหล่านั้นจะถูกจัดตำแหน่งอย่างแม่นยำตามการตั้งค่าของคุณ
2. ใช้เทคนิคการจัดหน้าตาราง การใช้ฟังก์ชันตารางอย่างเหมาะสมใน Dreamweaver สามารถบรรลุวัตถุประสงค์ในการตกแต่งเพจได้อย่างง่ายดาย ฉันจะแนะนำเทคนิคบางอย่างด้านล่างนี้
1) สร้างเส้นขอบ 1px เพื่อนบางคนบ่นว่า Dreamweaver ไม่สามารถสร้างเส้นขอบตารางพิกเซลเดียวได้ ที่จริงแล้วคุณสามารถสร้างตารางพิกเซลเดียวได้โดยใช้แผงคุณสมบัติของตารางอย่างระมัดระวัง ขั้นแรก ให้ใช้แผงวัตถุเพื่อแทรกตารางและกำหนดความกว้าง ความสูง แถว และคอลัมน์ของตาราง ในขณะนี้ CellPad, CellSpace และ Border เริ่มต้นของตารางที่แทรกใน Dreamweaver จะเป็น 0 ทั้งหมด กำหนดเส้นขอบของตารางในแผงคุณสมบัติเป็น 0, CellPad เป็น 5 (ซึ่งจะเก็บ 5 พิกเซลระหว่างเนื้อหาในเซลล์และขอบของเซลล์) CellSpace คือ 1 (ซึ่งจะเก็บ 1 พิกเซลระหว่างเซลล์) ระยะห่างระหว่าง รายการ) ตั้งค่าสีพื้นหลังของตารางเป็นสีเข้ม (เช่น #999999) และตั้งค่าสีพื้นหลังของเซลล์ให้เป็นสีอ่อน (เช่น #FFFFFF) เพียงแค่เรียกดูและสังเกตผลกระทบ
2) นำเข้าตารางข้อมูล บางครั้งเราจำเป็นต้องนำเข้าตารางบางตารางที่สร้างในไฟล์ Excel ลงใน Dreamweaver เราสามารถบันทึกไฟล์ Excel ดั้งเดิมเป็นไฟล์ข้อความ .txt ที่คั่นด้วยแท็บได้ การดำเนินการแทรก—วันที่แบบตารางใน Dreamweaver จะเปิดหน้าต่างต่อไปนี้:
หลังจากเพิ่มพารามิเตอร์แต่ละตัวแล้ว ข้อมูลก็สามารถนำเข้าไปยังตารางใน Dreamweaver ได้
3) จัดรูปแบบตาราง หากคุณเบื่อกับการตั้งค่าพารามิเตอร์ของแต่ละเซลล์ซ้ำๆ คุณสามารถใช้คำสั่ง Format Table เพื่อจัดรูปแบบตารางได้อย่างรวดเร็ว จะใช้โทนสีกับตารางที่คุณเลือกโดยอัตโนมัติ ดังแสดงในภาพ:
4. การแลกเปลี่ยนระหว่างตารางและเลเยอร์ เพื่อนบางคนชอบจัดเรียงเนื้อหาในเพจของตนอย่างอิสระ แต่ไม่ชอบวิธีการทำงานของตาราง ในความเป็นจริง คุณสามารถใช้เลเยอร์ที่ยืดหยุ่นเพื่อจัดเรียงเนื้อหาเพจของคุณ จากนั้นแปลงเป็นตารางเมื่อคุณพอใจ เลือกเลเยอร์ที่คุณต้องการแปลงและดำเนินการคำสั่ง Modify—Convert—Layers to Table ดังแสดงในภาพ:
5. อัปเดตเพจหลายเฟรมพร้อมกัน มีความจำเป็นต้องอัปเดตเนื้อหาของหน้าเฟรมอื่น ๆ สองหน้าขึ้นไปพร้อมกันเมื่อมีการคลิกลิงก์ ซึ่งสามารถทำได้โดยใช้พฤติกรรมของ Dreamweaver ผ่านขั้นตอนต่อไปนี้
1) เลือกข้อความหรือรูปภาพของลิงก์
2) เปิดแผงพฤติกรรม (พฤติกรรม) แล้วคลิกเครื่องหมายบวกเพื่อเพิ่มลักษณะการทำงานไปที่ URL
3) ในกล่องโต้ตอบ Go to URL หน้าต่างเฟรมที่มีอยู่ทั้งหมดจะปรากฏขึ้น เราเลือกชื่อหน้าต่างตามลำดับและสามารถตั้งค่าเนื้อหาไฟล์แต่ละรายการที่จะอัปเดตในแต่ละหน้าต่างได้ Dreamweaver จะเพิ่มเครื่องหมาย "*" หลังหน้าต่างที่มีการตั้งค่าไฟล์เป้าหมาย เพื่อระบุว่า URL ได้รับการตั้งค่าสำหรับหน้าต่างเฟรมนี้
4) คลิกตกลงหลังจากเสร็จสิ้น เมื่อเราคลิกลิงก์นี้ เนื้อหาของหลายหน้าต่างจะได้รับการอัปเดตพร้อมกัน
3. เนื้อหา
วิธีจัดระเบียบเนื้อหาให้เร็วขึ้นและสะดวกยิ่งขึ้นคือสิ่งที่เพื่อนทุกคนอยากรู้ คุณอาจจะรู้เคล็ดลับต่อไปนี้หรือไม่ก็ได้ แต่สิ่งสำคัญคือเมื่อใช้งานอย่างต่อเนื่อง คุณจะค้นพบข้อดีของมัน
1. การแก้ไขฉลากอย่างรวดเร็ว สำหรับเพื่อนที่คุ้นเคยกับโค้ดที่เขียนด้วยลายมือ พวกเขามักจะต้องสลับไปที่หน้าต่างโค้ดเพื่อเพิ่มโค้ดด้วยตนเอง ในความเป็นจริง คุณสามารถแทรกแท็ก HTML ต่างๆ ได้อย่างรวดเร็วโดยใช้ Quick Tag Editor ของ Dreamweaver วิธีหนึ่งคือการคลิกที่แผงคุณสมบัติ
การแทรกไอคอน ทางลัดอื่นคือ Ctrl+T ทั้งสองวิธีจะเปิดการแก้ไขแท็กอย่างรวดเร็ว คุณสามารถเลือกแท็กซอร์สโค้ดที่ต้องการได้โดยตรงจากรายการ ดังที่แสดงด้านล่าง:
2. เพิ่มเส้นขอบรูปภาพอย่างรวดเร็ว รูปภาพจำนวนมากที่แทรกลงในหน้าเว็บไม่มีขอบเขต บางครั้งเราจำเป็นต้องเพิ่มเส้นขอบให้กับรูปภาพ วิธีหนึ่งคือการเลือกรูปภาพและกำหนดเส้นขอบเป็น 1px โดยตรงในแผงคุณสมบัติ ซึ่งจะเพิ่มเส้นขอบ 1 พิกเซลให้กับรูปภาพ อีกวิธีคือกำหนดสไตล์ เราสามารถกำหนดแท็ก img เป็นสไตล์ได้โดยตรง ด้วยขนาด 1px ทุกด้าน จากนั้นรูปภาพทั้งหมดที่แทรกในหน้าเว็บจะมีเส้นขอบเดียวกัน ดังแสดงในภาพ:
3. ใช้การลากเพื่อเพิ่มลิงก์ Dreamweaver รองรับการลากลิงค์โดยตรงจากเอกสารไปยังไฟล์อื่น ๆ ในเว็บไซต์ เราสามารถวางหน้าต่างไซต์และหน้าต่างเอกสารเคียงข้างกันดังแสดงในรูป:
จากนั้นเลือกข้อความที่ต้องการลิงก์ในเอกสาร เปิดแผงคุณสมบัติ และชี้ไปที่ไฟล์หลังแถบที่อยู่ลิงก์ไปยังไฟล์เป้าหมายในหน้าต่างไซต์ ดังที่แสดงด้านล่าง:
4. วิธีเพิ่มเสียงพื้นหลัง เพื่อนหลายคนสับสนเล็กน้อยเกี่ยวกับการแทรกไฟล์เสียงมัลติมีเดียใน Dreamweaver จริงๆ แล้วมันง่ายมาก คลิกแท็บที่มุมซ้ายล่างของหน้าต่างการทำงานของ Dreamweaver เปิดแผงพฤติกรรม คลิกเครื่องหมาย + ในหน้าต่าง หน้าต่างลักษณะการทำงานแบบผุดขึ้น เลือก เล่นเสียง และเลือก สามารถเพิ่มไฟล์เสียงที่คุณต้องการได้ เลือกโลโก้ไฟล์เสียงในหน้าต่างเอกสารแล้วคลิกพารามิเตอร์ในแผงคุณสมบัติเพื่อกำหนดจำนวนลูปของเพลงพื้นหลังว่าจะเล่นโดยอัตโนมัติและคุณสมบัติอื่น ๆ ดังแสดงในรูป:
4. ความสวยงาม
การปรับปรุงองค์ประกอบต่างๆ ของหน้าเว็บให้สวยงามเป็นงานที่ต้องใช้เวลาและไม่มีประสิทธิภาพเสมอไป เคล็ดลับต่อไปนี้อาจช่วยคุณได้เล็กน้อย
1. สร้างโทนสีอย่างรวดเร็ว เรามักจะต้องตั้งค่าสีข้อความของแต่ละสถานะลิงก์ เพื่อนบางคนรู้สึกว่าการรับรู้สีของพวกเขาไม่ดีนัก ดังนั้นพวกเขาจึงมองหาคู่มือการจับคู่สีอยู่เสมอ อันที่จริง Dreamweaver เองก็มาพร้อมกับชุดสีอยู่แล้ว เปิดคำสั่ง Commands-Set Color Scheme และเราจะเห็นว่ามีชุดสีหลายชุด ซึ่งแต่ละชุดจะกำหนดสีพื้นหลัง สีข้อความ และสีของแต่ละลิงก์ state. คุณจะต้องเลือกเพียงชนิดเดียวก็เพียงพอแล้ว ดูภาพด้านล่าง:
2. ทักษะสไตล์ลิงก์ CSS โดยทั่วไปลิงก์ข้อความจะมีสี่สถานะ ลิงก์ โฮเวอร์ ใช้งานอยู่ และเยี่ยมชมแล้ว โดยปกติแล้วเราจะกำหนดสีและสไตล์ที่แตกต่างกันสำหรับลิงก์ข้อความแต่ละสถานะ อย่างไรก็ตาม เพื่อนๆ มักจะพบว่าสไตล์ที่พวกเขากำหนดไว้ดูไม่เป็นไปตามที่คาดหวัง เหตุผลหลักก็คือ มีข้อกำหนดบางประการสำหรับลำดับคำจำกัดความของลิงก์ในสไตล์ชีต ลำดับที่ถูกต้องคือ: A:link—A:visited—A:hover สำหรับเพื่อนทั่วไป จริงๆ แล้ว หลายครั้งพวกเขาต้องการเปลี่ยนสถานะโฮเวอร์ เคล็ดลับเล็กๆ น้อยๆ ไม่ใช่การกำหนดรูปแบบลิงก์ตามวิธีการข้างต้น แต่เพียงกำหนดรูปแบบของสถานะ a และ a:hover เท่านั้น เพื่อที่ มีเพียงสถานะโฮเวอร์เท่านั้นสไตล์ที่แตกต่างจากสถานะอื่น วิธีการแก้ไขมีดังต่อไปนี้
3. สร้างข้อความเชื่อมต่อและขีดเส้นใต้ด้วยสีต่างๆ ข้อความลิงก์ปกติและลิงก์ที่ขีดเส้นใต้มีสีเดียวกัน ที่จริงแล้ว เรายังสามารถใช้แอตทริบิวต์ Border ในสไตล์ชีตเพื่อแทนที่การขีดเส้นใต้ของลิงก์ทั่วไปได้ เนื่องจาก Border มีพารามิเตอร์และสไตล์การควบคุมมากกว่า ตราบใดที่สีของเส้นขอบและของเรา บรรลุวัตถุประสงค์ได้ด้วยคำจำกัดความสีต่างๆ ของข้อความ ตัวอย่างเช่น เราสามารถกำหนดข้อความเป็นสีดำและขีดเส้นใต้เป็นสีแดงได้ในตัวเลือก Border ดังที่แสดงด้านล่าง
5. เทคนิคการปรับปรุงประสิทธิภาพ
Dreamweaver ยังมีคำสั่งมากมายที่สามารถปรับปรุงประสิทธิภาพการทำงานได้อย่างมาก รวมถึงการสร้างโปรเจ็กต์ไลบรารี การใช้เทมเพลต ฟังก์ชันแผงประวัติ และฟังก์ชันการค้นหาและแทนที่ ที่นี่ฉันแนะนำเคล็ดลับเล็กๆ น้อยๆ เพื่อแสดงพลังของคำสั่งเหล่านี้
1. เคล็ดลับในการล้างไฟล์ Word เรามักจะต้องแปลงไฟล์ Word บางไฟล์เป็นไฟล์ HTML แต่ผลลัพธ์ของการแปลงนี้คือไฟล์ HTML ที่สร้างขึ้นมีขนาดใหญ่มากและมีโค้ดซ้ำจำนวนมาก การใช้ฟังก์ชันต่างๆ ของ Dreamweaver สามารถล้างโค้ดที่ไม่มีประโยชน์ได้อย่างง่ายดาย ขั้นแรก ให้เปิดไฟล์ HTML ที่สร้างโดย Word และดำเนินการคำสั่ง Clean Up Word HTML ใต้เมนู Commands โปรแกรมจะระบุเวอร์ชัน Word ดั้งเดิมโดยอัตโนมัติและลบโค้ดที่ไม่มีประโยชน์ออก อย่างไรก็ตาม ไฟล์ในขณะนี้ยังคงมีโค้ดซ้ำจำนวนมาก โดยส่วนใหญ่ประกอบด้วยโค้ด และ
แท็กจำนวนมาก เราสามารถดำเนินการคำสั่ง Clean up HTML ภายใต้เมนู Commands อีกครั้ง โดยเลือกตัวเลือกแท็กเฉพาะในป๊อปอัป กล่องโต้ตอบขึ้น และป้อนแท็ก span และ p โดยคั่นด้วยช่องว่าง หลังจากดำเนินการคำสั่ง แท็ก span และ p ทั้งหมดจะถูกล้าง
แต่ในขณะนี้ คุณลักษณะรูปภาพแต่ละรายการในไฟล์ยังมีคุณลักษณะที่คล้ายกับ v:shapes="_x0000_i1025" และเรายังคงจำเป็นต้องล้างแอตทริบิวต์เหล่านี้ เปิดแผงค้นหาและแทนที่และตั้งค่ากฎการแทนที่ตามที่แสดงด้านล่าง หลังจากดำเนินการ คุณลักษณะเหล่านี้ของรูปภาพทั้งหมดจะถูกล้าง ดังแสดงในภาพ;
2. เปลี่ยนชื่อไฟล์อย่างรวดเร็ว ก่อนหน้านี้ฉันแนะนำว่าคุณสามารถแทนที่ชื่อไฟล์ในหน้าต่างไซต์ได้ แต่คุณสามารถแทนที่ชื่อเรื่องของไฟล์ได้ครั้งละหนึ่งไฟล์เท่านั้น เราสามารถลองใช้คำสั่ง find และแทนที่ที่แนะนำในขั้นตอนก่อนหน้าเพื่อแทนที่ชื่อเรื่องของหลาย ๆ ไฟล์ ไฟล์พร้อมกัน โดยปกติแล้วชื่อเรื่องของไฟล์ที่สร้างขึ้นใหม่ของเราคือ Untitled Document คุณสามารถเปิดคำสั่ง Edit-Find Andแทนที่ และทำการตั้งค่าต่อไปนี้เพื่อแทนที่ไฟล์ทั้งหมดบนไซต์ปัจจุบันที่ชื่อว่า Untitled Document ด้วยชื่อของเราเอง
3. ตั้งค่ารูปแบบเอกสารเริ่มต้น แม้ว่าวิธีการข้างต้นจะรวดเร็ว แต่ทุกครั้งที่เราสร้างไฟล์ใหม่ ชื่อไฟล์เริ่มต้นจะยังคงเป็น Untitled Document เพราะเมื่อสร้างเอกสารใหม่ Dreamweaver จะเรียกหน้าเริ่มต้นเป็นรูปแบบเริ่มต้น ไฟล์นี้คือ Dreamweaver 4ConfigurationTemplatesDefault.html เพื่อให้เราสามารถตั้งค่ารูปแบบที่เป็นหนึ่งเดียวในไซต์ของเรา เช่น สีพื้นหลัง ขนาดตัวอักษร ชื่อไฟล์ ฯลฯ จากนั้นให้บันทึกทับไฟล์ Default.html ด้านบน เมื่อเราสร้างไฟล์ใหม่ในอนาคต Dreamweaver จะใช้รูปแบบที่เราตั้งไว้โดยอัตโนมัติ ซึ่งสามารถปรับปรุงประสิทธิภาพการทำงานได้อย่างมาก
6. หลังการบำรุงรักษา
โอเค หลังจากที่แนะนำมามากมายข้างต้น เราได้เชี่ยวชาญทักษะการผลิตหน้าเว็บแล้ว แต่หน้าที่เสร็จแล้วของคุณจะไม่มีข้อผิดพลาดอีกต่อไปหรือไม่ ลิงก์ของคุณเป็นลิงก์ที่ถูกต้องทั้งหมดหรือไม่ เพจของคุณทำงานได้ดีบนเบราว์เซอร์หรือไม่? คุณยังมีไฟล์จำนวนมากในไซต์ของคุณที่คุณไม่ต้องการอีกต่อไปหรือไม่? ปัญหาที่คล้ายกันหลายประการยังคงอยู่ และปัญหาเหล่านี้เกิดจากการตรวจหาและบำรุงรักษาไซต์ในภายหลัง เราจะแนะนำเทคนิคหลังการตรวจจับเพิ่มเติมบางประการที่นี่
1. การตรวจจับลิงก์ ดำเนินการเมนูไฟล์—คำสั่งตรวจสอบลิงก์ Dreamweaver จะตรวจจับลิงก์ทั้งหมดในไซต์ปัจจุบันโดยอัตโนมัติและตรวจจับลิงก์ที่ไม่ถูกต้องดังที่แสดงด้านล่าง:
การดับเบิลคลิกผลลัพธ์ที่ตรวจพบจะเป็นการเปิดหน้าที่เกี่ยวข้องโดยอัตโนมัติและค้นหาลิงก์ที่ไม่ถูกต้องโดยตรง ซึ่งสะดวกมากสำหรับเราในการแก้ไขข้อผิดพลาดของลิงก์
2. ตรวจจับไฟล์ที่ไม่มีประโยชน์อย่างรวดเร็ว การดำเนินการคำสั่งเมนู ไซต์—ตรวจสอบลิงก์ทั่วทั้งไซต์ สามารถเปิดฟังก์ชันการตรวจจับไฟล์ลิงก์ได้ เรายังสามารถใช้ฟังก์ชันนี้เพื่อตรวจสอบไฟล์ที่ไม่มีประโยชน์ในไซต์และลบออกได้ เพียงเลือกไฟล์ที่ถูกละเลยในกล่องแบบเลื่อนลงด้านบน และไฟล์ที่ไม่มีประโยชน์ทั้งหมดในไซต์จะแสดงรายการด้านล่าง เลือกทั้งหมดแล้วกดปุ่ม Delete เพื่อลบออก
