ออกแบบเว็บไซต์ให้ครบสูตร ด้วย Dreamweaver + Photoshop + Flash

ผู้เขียน: ฟอร์จูน สิริศุภรัชต์
ISBN: 978-616-7119-31-1
จำนวนหน้า: 300 หน้า
ขนาด: 16.5 x 19 x 1.6 ซม.
รูปแบบหนังสือ: พิมพ์ 4 สี

ราคาปก: 199 บาท
ราคาสั่งซื้อ: 175 บาท
ส่งหน้านี้ให้เพื่อน  


  • เรียนรู้การสร้างเว็บเพจด้วย Dreamweaver ตั้งแต่ขั้นพื้นฐานถึงใช้งานได้จริง
  • เสริมด้วยการออกแบบตกแต่งเว็บเพจด้วย Photoshop อย่างถูกต้อง
  • พร้อมตัวอย่างการทำ animation ด้วย Flash เพื่อเพิ่มลูกเล่นให้เว็บเพจ

หนังสือเล่มนี้เหมาะกับใครบ้าง?

  • ผู้เริ่มต้น (มือใหม่) ที่ต้องการเข้าสู่อาชีพนักออกแบบและพัฒนาเว็บไซต์
  • ผู้ที่ต้องการสร้าง Animation ด้วย Flash แบบเบื้องต้น
  • ผู้ที่ต้องการประยุกต์ครื่องมือ Photoshop เพื่อสร้างเว็บเพจแบบใช้งานจริง
  • นักศึกษา - ผู้สนใจทั่วไปที่ต้องการเรียนรู้ทางด้านพัฒนาเว็บไซต์

จะอ่านหนังสือเล่มนี้จะต้องมีทักษะหรือความรู้อะไรมาก่อนบ้าง?

  • วิธีการใช้โปรแกรม Photoshop เพื่อสำหรับออกแบบหน้าเว็บเพจ
  • เข้าใจหลักการทำงานของเว็บไซต์

จะทดลองทำตามขั้นตอนที่อธิบายในหนังสือ ต้องมีอะไรบ้าง?

  • โปรแกรม Adobe Dreamweaver, Photoshop และ Flash (ทั้ง 3 โปรแกรมควรเป็นเวอร์ชัน CS5)


บทที่ 1 การออกแบบโครงหน้าเว็บเพจด้วย Photoshop

Photoshop เป็นโปรแกรมสำคัญสำหรับการออกแบบหน้าเว็บเพจต่างๆ และจัดได้ว่าเป็นขั้นตอนแรกของการพัฒนาเว็บไซต์ คุณจึงจำเป็นต้องเข้าใจหลัก การและวิธีการใช้งานเบื้องต้นสำหรับการออกแบบ ดังนั้น ผมจะอธิบายรายละเอียดและแสดงตัวอย่างในลักษณะ Workshop ซึ่งเหมาะสำหรับมือใหม่ที่เพิ่งเริ่มต้นเรียนรู้อย่างยิ่ง

  • การออกแบบลวดลายฉากหลัง
  • การออกแบบหน้าโฮมเพจ
  • สร้างเมนูสำหรับทำเป็นโรลล์โอเวอร์ (Rollover)
  • การตัดภาพ (Slice) นำไปใช้ใน Dreamweaver
  • ออกแบบหน้าเว็บเพจ About US
  • ออกแบบหน้าเว็บเพจ News and Event

บทที่ 2 เรียนรู้องค์ประกอบพื้นฐาน

โปรแกรม Dreamweaver CS5 ไม่ได้มีการปรับปรุงเครื่องมือต่างๆ มากนัก แต่สำหรับผู้ที่ไม่เคยมีประสบการณ์กับการใช้งานเวอร์ชันก่อนหน้านี้ สมควรที่จะเรียนรู้และเข้าใจพื้นฐานการใช้งานและองค์ประกอบต่างๆ ของโปรแกรม ให้ดีเสียก่อน

  • องค์ประกอบพื้นฐานในการเรียกใช้งาน
  • รู้จักส่วนประกอบพื้นฐานในการพัฒนาเว็บไซต์
  • ทำความรู้จักกับ INSERT Panel
  • ทำความรู้จักกับ PROPERTIES Panel
  • ทำความรู้จักกับ FILES Panel
  • ทำความรู้จักกับแถบ Status
  • มุมมองในการสร้างเว็บเพจ
  • การสร้างไซต์สำหรับจัดเก็บไฟล์
  • การสร้างไฟล์หรือโฟลเดอร์ขึ้นมาใหม่

บทที่ 3 พื้นฐานการใช้งานโปรแกรม Dreamweaver

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

  • เลือกรายละเอียดการสร้างไฟล์เว็บเพจด้วยตนเอง
  • การเปิดอ่านไฟล์เว็บเพจ
  • การจัดเก็บเว็บเพจ
  • การแสดงผลผ่านเบราเซอร์
  • พื้นฐานการปรับแต่งหน้าเว็บเพจ
  • การใส่ข้อความบนเว็บเพจ
  • การเลือกรูปแบบตัวอักษรใหม่
  • การเพิ่มเติมรูปแบบตัวอักษร
  • การใส่รูปภาพบนหน้าเว็บเพจ
  • การนำรูปภาพมาสร้างเป็นฉากหลัง
  • การปรับขนาดรูปภาพ
  • การใส่กรอบรูปภาพ
  • การตัดรูปภาพให้เหลือเฉพาะส่วนที่ต้องการ
  • การปรับค่า Brightness/Contrast
  • การปรับภาพให้เกิดความคมชัด

บทที่ 4 การสร้างไฮเปอร์ลิงก์เพื่อเชื่อมโยงหน้าเว็บเพจ

เนื้อหาในบทนี้คุณจะได้เรียนรู้เกี่ยวกับวิธีการเชื่อมโยงหน้าเว็บเพจต่างๆ ภายในเว็บไซต์เข้าด้วยกัน ตำแหน่งในการเชื่อมโยงนั้น เราเรียกว่า “ไฮเปอร์ลิงก์” (hyperlink) ซึ่งมีทั้งไฮเปอร์ลิงก์ประเภทที่เป็นข้อความ, ไฮเปอร์ลิงก์ที่เป็นรูปภาพ ตลอดจนเทคนิคการนำรูปภาพมาสร้างเป็นแบบโต้ตอบกับผู้เข้าชมเว็บอีกด้วย

  • การสร้างไฮเปอร์ลิงก์จากข้อความ
  • รู้จักลักษณะของการเชื่อมโยงเว็บเพจ
  • การเปลี่ยนสีไฮเปอร์ลิงก์ใน Properties
  • การสร้างไฮเปอร์ลิงก์จากรูปภาพ
  • การสร้างไฮเปอร์ลิงก์ด้วยรูปภาพแบบบางส่วน
  • การสร้างไฮเปอร์ลิงก์ไปยังอีเมล
  • การสร้างไฮเปอร์ลิงก์แบบดาวน์โหลดข้อมูล
  • การสร้างไฮเปอร์ลิงก์ภายในหน้าเว็บเพจเดียวกัน
  • การสร้างไฮเปอร์ลิงก์เพื่อเรียกใช้ไฟล์วิดีโอ
  • การสร้างไฮเปอร์ลิงก์แบบ Rollover Image
  • การยกเลิกไฮเปอร์ลิงก์

บทที่ 5 เทคนิคการจัดวางตำแหน่งด้วย AP Div Layout

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

  • การใช้งาน AP Div Layout
  • การจัดการกับ AP ELEMENTS
  • การแสดงหรือซ่อน apDiv
  • การใส่ข้อความ
  • การใส่รูปภาพ
  • รู้จักกับคุณสมบัติของเลเยอร์จาก PROPERTES
  • การจัดเรียงลำดับและปรับขนาดของเลเยอร์
  • การสร้างและวางซ้อนลำดับใน AP ELEMENTS
  • การลบ apDiv ที่ไม่ต้องการ
  • การแปลง AP Div Layout เป็นตาราง
  • การแปลงตารางกลับเป็น AP Div Layout

บทที่ 6 เทคนิคการจัดวางข้อมูลด้วยตาราง

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

  • การสร้างตาราง
  • การย่อ-ขยายขนาดตาราง
  • การใส่ข้อความลงในตาราง
  • การจัดตำแหน่งข้อมูลในตาราง
  • การแทรกแถวหรือคอลัมน์
  • การลบแถวหรือคอลัมน์
  • การจัดเรียงข้อมูลภายในตาราง
  • การรวมเซลล์ในตารางเข้าด้วยกัน
  • ยกเลิกการรวมเซลล์
  • การตกแต่งเซลล์, แถว หรือคอลัมน์
  • กำหนดไม่ให้แสดงเส้นแบ่งเซลล์
  • การสร้างตารางซ้อนตาราง

บทที่ 7 การแบ่งหน้าเว็บเพจออกเป็นเพจย่อยๆ ด้วยเฟรม

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

  • เริ่มออกแบบหน้าเว็บเพจด้วยเทคนิคเฟรม
  • รู้จักส่วนประกอบของเฟรม
    • กำหนดคุณสมบัติของเฟรมหลัก
    • กำหนดคุณสมบัติของเฟรมย่อย
  • การสร้างเฟรมซ้อนเฟรม
  • การปรับขนาดเฟรม
  • การลบเฟรม
  • การบันทึกเว็บเพจแบบเฟรม
  • การบันทึกเฉพาะเฟรมย่อย

บทที่ 8 การออกแบบฟอร์มเพื่อใช้รับ-ส่งข้อมูลบนหน้าเว็บเพจ

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

  • รู้จักประเภทการรับข้อมูลของฟอร์ม
  • รู้จักกับ Input Tag Accessibility Attributes
  • เริ่มต้นการสร้างฟอร์ม
  • การพิมพ์ข้อความด้วย Label
  • การสร้างช่องรับข้อความ (Text Field)
  • สร้างช่องรับข้อความหลายบรรทัด (Textarea)
  • การสร้างกลุ่มตัวเลือกแบบเมนู (List/Menu)
  • การสร้างตัวเลือกแบบเลือกได้เพียง 1 ตัวเลือก
  • การสร้างตัวเลือกแบบเลือกได้มากกว่า 1 ตัวเลือก
  • การสร้างปุ่มคำสั่ง (Button)
  • หน้าที่ของ Spry เพื่อสร้างฟิลด์ในแบบฟอร์ม
    • การกำหนดเงื่อนไขให้กับ Spry Validation Text Field
    • การกำหนดเงื่อนไขให้กับ Spry Validation Textarea
    • การกำหนดเงื่อนไขให้กับ Spry Validation Checkbox
    • การกำหนดเงื่อนไขให้กับ Spry Validation Select
    • การกำหนดเงื่อนไขให้กับ Spry Validation Password
    • การกำหนดเงื่อนไขให้กับ Spry Validation Confirm
    • การกำหนดเงื่อนไขให้กับ Spry Validation Radio Group

บทที่ 9 ควบคุมการแสดงข้อความบนหน้าเว็บเพจด้วย CSS

CSS เป็นวิธีการควบคุมการแสดงผลของข้อความที่ปรากฏบนหน้าเว็บเพจต่างๆ โดยเนื้อหาภายในบทนี้จะนำเสนอวิธีการสร้าง, เรียกใช้ และจัดการกับ CSS ให้สอดคล้องกับหน้าเว็บเพจต่างๆ ที่เราสร้างขึ้นมา

  • รู้จักกับ CSS
  • ตำแหน่งในโครงสร้าง HTML สำหรับการเก็บสไตล์
  • รู้จักกับ CSS STYLES PANEL
  • การสร้างกฎ (Rule) ขึ้นมาใหม่
  • การนำกฎเข้ามาใช้งาน
  • การลิงก์ไฟล์ .css เข้ากับเว็บเพจ
  • การกำหนดกฎ (Rule) แบบ Inline
  • วิธีการเปลี่ยนชื่อกฎ (Rule) - สไตล์ใหม่
  • การถอด - ยกเลิกกฎ (Rule)
  • การลบกฎ
  • การแก้ไขค่า CSS

บทที่ 10 การปรับแต่งการทำงานที่เกี่ยวข้องกับเว็บเบราเซอร์

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

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

บทที่ 11 การใส่ไฟล์ Flash Animation บนหน้าเว็บเพจ

Flash Animation เป็นวิธีการเพิ่มลูกเล่นหรือเทคนิคพิเศษให้แก่หน้าเว็บเพจ เพื่อไม่ให้เว็บเพจดูน่าเบื่อจนเกินไป โดยการสร้างไฟล์ Animation จากโปรแกรม Flash (สามารถติดตามได้ในบทต่อไป)

  • การใส่ไฟล์แฟลชประเภท SWF
  • การแทรกไฟล์คลิปวิดีโอประเภท .FLV

บทที่ 12 ตัวอย่างการสร้างอนิเมชันด้วย Adobe Flash

คุณจะได้เริ่มต้นสร้างสรรค์งานอนิเมชันด้วยโปรแกรม Flash เพื่อวางประกอบบนหน้าเว็บเพจ โดยจะมุ่งเน้นการสร้างป้ายโฆษณา (แบนเนอร์) ในลักษณะต่างๆ ซึ่งคุณควรมีพื้นฐานการใช้งานโปรแกรม Flash มาบ้างแล้ว เพื่อความรวดเร็วในการเรียนรู้ที่ดียิ่งขึ้น

  • สร้างนาฬิกา
  • สร้างแบนเนอร์โดยไม่ใช้คำสั่ง Mask
  • สร้างวัตถุเคลื่อนที่ตามเมาส์
  • สร้างแบนเนอร์ใส่ฟิลเตอร์
  • สร้างแบนเนอร์ใส่ฟิลเตอร์และเทคนิค Mask