Skip to main content

วิธีใช้ Adobe Dreamweaver

29 แฮ็คประจำวันมีประโยชน์ (เมษายน 2025)

29 แฮ็คประจำวันมีประโยชน์ (เมษายน 2025)
Anonim

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

การกำหนดไซต์

  • เริ่มต้นเว็บไซต์ใหม่
  • สร้างเว็บไซต์
  • ตั้งค่าเฉพาะส่วนต่างๆของไซต์ที่คุณต้องการเมื่อต้องการ * New in CS5
  • ตั้งค่าระยะไกล QA และเซิร์ฟเวอร์ทดสอบสำหรับเวิร์กโฟลว์ที่สมบูรณ์ยิ่งขึ้น * ใหม่ใน CS5
  • สร้างและเผยแพร่ไดเรกทอรีใหม่
  • เปลี่ยน DOCTYPE
  • รวมข้อมูลเมตาในหน้าเว็บของคุณ

การวางไซต์ของคุณอยู่

  • กำหนดไซต์ระยะไกล
  • ไฟล์ FTP ไปยังเว็บเซิร์ฟเวอร์
  • ใช้ระบบควบคุมเวอร์ชันเพื่อตรวจสอบไฟล์เข้าและออก
  • เชื่อมต่อกับ Subversion เพื่อการควบคุมเวอร์ชันขั้นสูง * ใหม่ใน CS5
  • จดบันทึกไว้สำหรับเพื่อนร่วมทีมของคุณ

การสร้างเว็บเพจ

  • เขียนหน้าในโหมด WYSIWYG
  • เขียนหน้าเว็บใน HTML
  • สร้างหน้าเว็บใหม่จากเทมเพลต
  • สร้างหน้าใหม่ตั้งแต่เริ่มต้น
  • สร้างเทมเพลต
  • บันทึกไฟล์ลงในไดเรกทอรีไซต์ของคุณ
  • กำหนดคุณสมบัติของเพจ

CSS

  • ใช้สไตล์ชีท CSS
  • การเพิ่มรูปแบบอินไลน์
  • สร้างสไตล์ชีตภายนอก
  • แนบสไตล์ชีทภายนอก
  • สร้างคลาส ID แท็กและตัวเลือก CSS แบบผสม
  • แก้ไขกฎ CSS ที่มีอยู่
  • สร้าง CSS สำหรับหน้าที่สามารถพิมพ์ได้
  • เปิดและปิดคุณสมบัติสไตล์ * ใหม่ใน CS5
  • ตรวจสอบรูปแบบกล่อง CSS แบบมองเห็นได้ * ใหม่ใน CS5

ข้อความ

  • แก้ไขข้อความ
  • ใช้แบบอักษรที่แตกต่างกัน
  • แทรกตัวแบ่งบรรทัด
  • ใช้อักขระพิเศษ
  • รวมวันที่ของวันนี้
  • เขียนความคิดเห็น
  • ใช้แท็ก HTML กับข้อความ
  • เพิ่มแอตทริบิวต์ HTML ลงในแท็ก

การเชื่อมโยง

  • เชื่อมโยงข้อความและรูปภาพ
  • ตรวจสอบลิงก์ของไซต์
  • เปลี่ยนสีลิงก์ที่เป็นค่าเริ่มต้น (ลิงก์, เยี่ยมชม, เลื่อนเมาส์อยู่, ใช้งานอยู่)
  • สร้างเคล็ดลับเครื่องมือเกี่ยวกับลิงก์
  • สร้างลิงก์ mailto
  • สร้าง anchors หน้าเว็บ

ภาพ

  • เพิ่มกราฟิกลงในเพจ
  • แก้ไขภาพ
  • ปรับขนาดภาพ
  • เพิ่มข้อความ alt ลงในภาพ
  • เพิ่มตัวเลือกการเข้าถึงเพิ่มเติมสำหรับรูปภาพ
  • จัดเรียงรูปภาพและข้อความ
  • สร้างภาพแบบโรลโอเวอร์
  • ใช้แผนที่รูปภาพ
  • ใช้ภาพการสืบค้นกลับ
  • ใช้ตัวยึดตำแหน่งรูปภาพ
  • แทรกดอกไม้ไฟ HTML
  • แทรกไฟล์ Photoshop

แบบ

  • ใช้เทมเพลตฟรีที่รวม * เค้าโครงสเปรดชีต CSS ใหม่ใน CS5
  • แทรก divs สำหรับเค้าโครง
  • แก้ไข div ในแผงสไตล์ CSS
  • แทรกองค์ประกอบตำแหน่งที่แน่นอน
  • จัดรูปแบบตำแหน่งที่แน่นอนในตัวตรวจสอบสถานที่ให้บริการ
  • ใช้ผู้ปกครอง, กริดและคำแนะนำ

รายการ

  • เพิ่มรายการสัญลักษณ์แสดงหัวข้อย่อยและหมายเลข
  • ปรับแต่งรายการสัญลักษณ์แสดงหัวข้อย่อยและตัวเลข

ตาราง

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

รูปแบบ

  • ใช้แบบฟอร์ม mailto
  • กำหนดการกระทำแบบฟอร์ม
  • เพิ่มข้อความวิทยุช่องทำเครื่องหมายไฟล์รูปภาพเลือกกล่องและเขตข้อมูลฟอร์มที่ซ่อนไว้
  • ทำให้ฟอร์มของคุณสามารถเข้าถึงได้โดยใช้ fieldset และช่องป้ายชื่อ
  • สร้างปุ่มส่งแบบกำหนดเอง
  • ยืนยันแบบฟอร์มด้วย JavaScript (Spry)

ฐานข้อมูลและ PHP Scripting

  • แนบไซต์ของคุณเข้ากับฐานข้อมูล
  • ตั้งค่าไซต์ PHP / MySQL
  • ใช้อิลิเมนต์ Spry เพื่อเชื่อมต่อกับฐานข้อมูล
  • แทรกวัตถุข้อมูลลงในหน้าเว็บของคุณ
  • ทดสอบและอัพเดตแหล่งข้อมูลหรือการแสดงผล Spry
  • แก้ไขเว็บไซต์แบบไดนามิกที่ซับซ้อนในมุมมองการออกแบบ
  • ค้นพบไฟล์ที่เกี่ยวข้องแบบไดนามิกทั้งหมดเพื่อรวบรวมเว็บไซต์ PHP CMS (WordPress, Joomla และ Drupal) * ใหม่ใน CS5
  • ตัวบอกรหัสแบบกำหนดเองสำหรับโค้ด PHP รวมถึงกรอบงานของบุคคลที่สามเช่นกรอบ Zend * ใหม่ใน CS5

กรอบ

  • สร้างเว็บไซต์ที่มีกรอบ
  • แก้ไขเนื้อหา noframes
  • จัดรูปแบบและกำหนดสไตล์เฟรมของคุณ
  • ตั้งค่าเป้าหมายการเชื่อมโยงเริ่มต้นระหว่างเฟรม

เพิ่มการโต้ตอบ

  • สร้างอัลบั้มรูป (ไม่มีใน CS5)
  • เพิ่มเสียงลงในเว็บเพจ
  • สร้างเมนูแบบเลื่อนลง
  • ใช้พฤติกรรมของ Dreamweaver เพื่อเปิดหน้าต่างป๊อปอัปสร้างเมนูกระโดดเล่นเสียงสลับรูปภาพและอื่น ๆ
  • เพิ่มฟีด RSS ลงในเว็บไซต์
  • แทรกข้อความ Flash เป็นแบบโรลโอเวอร์
  • แทรกข้อความ CSS เป็นแบบโรลโอเวอร์
  • แทรกปลั๊กอินอื่น ๆ
  • เพิ่มแถบเมนู Spry แผงแท็บหีบเพลงเคล็ดลับเครื่องมือและแผงแบบยุบ
  • ใช้ Widget Browser เพื่อค้นหาวิดเจ็ตใหม่สำหรับไซต์ของคุณโดยไม่จำเป็นต้องรู้ JavaScript

ทดสอบหน้าเว็บของคุณ

  • ทดสอบหน้าเว็บของคุณในมุมมอง Live View เพื่อดูการเปลี่ยนแปลงที่เกิดจาก JavaScript และการติดต่อสื่อสาร * ใหม่ใน CS5
  • ยืนยัน HTML ของคุณ
  • ดูตัวอย่างหน้าเว็บในเบราว์เซอร์หลาย ๆ
  • ใช้ BrowserLab เพื่อดูตัวอย่างหน้าเว็บของคุณในระบบปฏิบัติการอื่น ๆ * ใหม่ใน CS5
  • ใช้ Device Central เพื่อตรวจสอบลักษณะของหน้าเว็บบนอุปกรณ์เคลื่อนที่
  • ตรวจสอบความเข้ากันได้ของเบราเซอร์
  • เปลี่ยนการตั้งค่าให้ตรงกับความต้องการของไซต์ที่คุณต้องการ
  • ตรวจสอบลิงก์ภายในไซต์
  • ทดสอบการเข้าถึงไซต์ (ไม่มีใน CS5)
  • แปลงเอกสาร Word เป็น HTML

กำหนดค่า Dreamweaver

  • เพิ่มส่วนขยาย
  • ปิดใช้งานส่วนขยาย
  • กำหนดค่า Dreamweaver ด้วยทางลัด

เพิ่มประสิทธิภาพของคุณ

  • ใช้แป้นพิมพ์ลัดในตัว
  • ใช้ตัวอย่างโค้ด
  • สร้างและใช้แม่แบบ
  • สร้างหน้าเว็บใหม่จากเทมเพลตที่กำหนดเอง
  • อัปเดตเทมเพลต
  • รวมไฟล์หนึ่งไฟล์ในไลบรารีอื่นด้วยไลบรารี Dreamweaver
  • อัปเดตรายการในไลบรารี
  • รวมไฟล์หนึ่งไฟล์ในไฟล์อื่นโดยใช้ SSI
  • ใช้การค้นหาและแทนที่