ออกแบบเว็บไซต์ให้ครบสูตร ด้วย 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