คู่มือการสอน
1
ELEPHANT’S TALE LANGUAGE AND COMPUTER TRAINING CENTER http://www.elephantstale.com/
Web Design Using Adobe PhotoShop CS and Macromedia Dreamweaver 8
1. หลักการออกแบบและพัฒนาเว็บไซต์ 2. รู้จกั กับ Macromedia Dreamweaver 8 3. การทางานเบื ้องต้ นกับเว็บไซต์และเว็บเพจ 4. ข้ อความในเว็บเพจ 5. ใส่ภาพประกอบเว็บเพจ 6. การสร้ างไฮเปอร์ลิงค์ (Hyperlink) 7. จัดหน้ าเว็บเพจด้ วยตาราง 8. การสร้ างฟอร์ม 9. เล่นมัลติมีเดียบนเว็บเพจ (Web Multimedia) 10. สร้ างเว็บเพจให้ โต้ ตอบกับผู้ชม (Javascript Behavior) 11. การบริหารจัดการเว็บไซต์ 12. การเผยแพร่เว็บไซต์
2
ขั้นตอนการพัฒนาเว็บไซต์ กาหนดเป้ าหมาย และวางแผน วิเคราะห์ และจัดโครงสร้าง ข้อมูล ออกแบบเว็บ และเตรี ยมข้อมูล ลงมือสร้าง และทดสอบ เผยแพร่ และส่ งเสริ มให้เป็ นที่ รู ้จกั ดูแล และพัฒนา
ข้ อควรทราบ เว็บไซต์ (Website) : เป็ นที่เก็บเว็บเพจ(URL)โดยใช้บราวเซอร์ ดึงข้อมูล(-ชื่อหนังสื อ-) Web Server : เครื่ องคอมพิวเตอร์ ที่ให้บริ การเผยแพร่ ขอ้ มูล โฮมเพจ(Homepage) : เว็บเพจซึ่ งเป็ นหน้าแรก(-ปกหนังสื อ-**index) เว็บเพจ(Webpage) : หน้าเว็บ(-หน้าย่อย-) + Dreamweaver มิใช่ จุดเริ่มต้ น แต่เป็ นการรวบรวมผลงานต่าง ๆ ที่มีมาเผยแพร่ ถ้าไม่มีอะไรจะใส่ ใน dream คงต้องไปหาให้มีก่อน + Dreamweaver มิใช่ จุดสุ ดท้ าย เพราะผลที่ได้จาก dream มีผสู ้ ร้างทราบคนเดียว ต้องนาไป upload เพื่อเผยแพร่ ใน Web Server
รูปแบบของโครงสร้ างเว็บไซต์
แบบเรี ยงลาดับ เว็บที่จานวนเว็บเพจไม่มาก/เว็บที่ตอ้ งการนาเสนอข้อมูลแบบทีละขั้น
แบบระดับชั้น เว็บที่จานวนเว็บเพจมากขึ้นพบทัว่ ไป
แบบผสม เว็บที่ซับซ้อน
3
โครงสร้ างพืน้ ฐาน <html> <head> <title>หัวข้ อเว็บเพจ</title> </head> <body> ส่ วนที่มีเนื้อหา และข้ อมูลเกี่ยวกับ ภาพ Link ที่ปรากฎในเว็บเพจ </body> </html>
รู ปแสดง File 1st.html
รู ปแสดงผลการ RUN File 1st.html
4
รู ปแสดงส่ วนประกอบ Macrmedia Dreamweaver
5
***ข้ อตกลง การสร้ าง Macromedia Dreamweaver 1. Set up ภาษาไทย 2. กาหนด site โดยสร้ าง Folder images 3. Set Title & Font 4. Save หน้ าแรก index.. ชื่อห้ ามภาษาไทย
การ SET UP Macromedia Dreamweaver ให้ รองรับภาษาไทย วิธีที่ 1 การกาหนดทีละเว็บเพจ
วิธีที่ 2 การกาหนดภาษาเป็ นค่าเริ่มต้ นให้ กับทุกเว็บเพจ
6
รู ปแสดงการกาหนดฟอนต์ของ Dreamweaver 8 สาหรับการใช้งานภาษาไทย
รู ปแสดงการกาหนด encoding สาหรับการใช้ งานภาษาไทย
การสร้ าง Site
รู ปแสดงไดอะล็อก Manage Sites
7
รู ปแสดงการกาหนดค่ารายการเมนู Local Info
รู ปแสดงไดอะล็อก Manage Sites หลังการกาหนดเว็บไซต์ เสร็จแล้ว
8
รู ปแสดงหน้ าจอของ Dreamweaver 8 เมื่อเปิ ดเว็บไซต์ Personal Home Page เพื่อใช้ งาน
รู ปแสดงหน้ าจอของ Dreamweaver 8 เมื่อ set Title, Font, Save As,Site
9
การสร้ างเว็บเพจใหม่ (1) และ การสร้ างเว็บเพจใหม่จากไฟล์ตวั อย่างที่ออกแบบไว้ (2)
การสร้างเว็บเพจใหม่จากไฟล์ตวั อย่างที่ออกแบบไว้
การเปิ ดเว็บเพจเดิม File > Open , เปิ ดจาก Site
*ข้อแตกต่างของไฟล์ที่เรี ยกใช้งาน,ไฟล์ที่ทาการ save แล้วและยังไม่ save
10
การบันทึกเว็บเพจ File > Save as, Ctrl + S *เป็ นภาษาอังกฤษเท่านั้น ,ไม่มีอกั ขระพิเศษใดๆ,ตัวพิมพ์เล็กทั้งหมด ,ใช้_แทนการเว้นวรรค,.html(ก่อน)=.htm
การกาหนดคุณสมบัตพิ นื้ ฐานของเว็บเพจ
11
*Tracing Image ใช้ในกรณี ที่ตอ้ งการนาภาพตัวอย่งามาวางเพื่อช่วยเป็ นแนวในการออกแบบเลย์เอาท์ของเว็บเพจ (ภาพนี้จะไม่แสดงผลในบราวเซอร์ ) Tracing image เลือกภาพที่จะนามาทาเป็ นตัวอย่าง Transparency ปรับความโปร่ งใสของภาพตัวอย่าง
ย้อนกลับการทางาน History, Ctrl+Z ข้ อความ -ใส่ ขอ้ ความธรรดา( ชื่อ-นามสกุล) Ctrl+X , Ctrl+C , Ctrl+V Format, Font, Size, Color จาก Insert Bar > Text
-จัดตาแหน่ง - วรรค Ctrl + Shift + Space , Insert Bar > Text > ตั้งค่าให้วรรคโดยเคาะหลายครั้ง Edit > Preferences
และ Space (&nbsp;)
-ขึ้นบรรทัดใหม่ในย่อหน้า Enter, Shift+Enter, Insert Bar > Text > 12
*Dreamweaver ไม่สามารถตัดคาภาษาไทยได้ การตัดคาขึ้นกับบราวเซอร์ และสภาพแวดล้อมผูช้ มเว็บ - แทรกเส้นคัน่ HTML การกาหนดสี คลิกขวาที่เส้น > Edit Tag <hr>
-
แทรกสัญลักษณ์พิเศษ การ Copy จากโปแกรมอื่น/ตาราง Excel Edit > Paste Special
การใส่ ภาพ .Gif .JPG/.JPEG .PNG
13
การยกเลิกไดอะล็อกบ็อกซ์ สาหรับใส่ คาอธิบาย
14
ปรับแต่งคุณสมบัตขิ องภาพกราฟฟิ ก
15
สร้ างเอฟเฟ็ คต์สลับภาพเมือ่ ชี้เม้าส์
สร้ างเว็บเพจอัลบั้มรูปภาพ Commands > Create Web Photo Album
-
โฟล์เดอร์ images เก็บไฟล์ขนาดใหญ่ที่โปรแกรมแปลงจากไฟล์ตน้ ฉบับ โฟล์เดอร์ thumbnails เก็บไฟล์ขนาดเล็กที่โปรแกรมแปลงจากไฟล์ตน้ ฉบับ โฟล์เดอร์ pages เก็บไฟล์เก็บไฟล์เว็บเพจซึ่ งแสดงภาพขนาดใหญ่ เว็บเพจละ 1 ภาพจะไม่มีถา้ เราไม่ / Index.htm ถ้าสร้างมากกว่า 1 อัลบั้มในโฟลืเดอร์ เดียวกันจะชื่อ index1.htm, index2.htm,..
16
ใส่ ภาพฉากหลัง
no-repeat repeat repeat-x repeat-y
แสดงภาพเดียวที่มุมบนซ้ายของหน้าเว็บเพจ เรี ยงแบบซ้ าๆ จนเต็มเว็บเพจ ทั้งแนวตั้งและแนวนอน เรี ยงแบบซ้ าๆ จนเต็มเว็บเพจในแนวนอน เรี ยงแบบซ้ าๆ จนเต็มเว็บเพจในแนวตั้ง
17
การสร้ างไฮเปอร์ ลงิ้ ค์ (Hyperlink)(ลิงค์)การเชื่อมโยงกันของเอกสารบนอินเทอร์เน็ต โปรโตคอล
ชื่อโดเมน
พาธและชื่อไฟล์
http://www.elephantstale.com/trainting/course.htm 1. การสร้ างลิงค์ภายในเว็บเพจเดียวกัน
<a name="elephant"></a>
<a href="#elephant">Elephant</a> 2. การสร้ างลิงค์ไปยังเว็บเพจหรือไฟล์ภายในเว็บไซต์เดียวกัน
<a href="index.html">หน้าหลัก</a>
Target _blank _parent _self _top
ให้เปิ ดเว็บเพจปลายทางในวินโดว์ใหม่ ให้แสดงเว็บเพจในเฟรมที่ครอบครุ มเฟรมปัจจุบนั (กรณี ที่ใช้เฟรม) ให้แสดงเว็บเพจในเฟรมเดิมของลิงค์ ให้แสดงเว็บเพจบนในวินโดว์เดิม โดยยกเลิกเฟรมที่ครอบอยูท่ ้งั หมด 18
3. สร้ างลิงค์ไปยังเว็บไซต์อนื่
4. สร้ างลิง้ ค์เพือ่ ส่ งอีเมลล์
5. สร้ าง Image Map
6. การสร้ าง Navigation Bar
19
7. การสร้ าง Jump Menu
20
จัดหน้ าเว็บเพจด้ วยตาราง โครงสร้ างของตาราง
การสร้ างตาราง
-ใส่เนื้อหาในตาราง - การเลือกส่วนต่างๆ ของตาราง - เลือกทั้งตาราง - เลือกแถว/คอลัมน์ - เลือกเซลในตาราง - เลือกส่วนประกอบของตารางด้วย
Tag Selector 21
ปรับแต่งคุณสมบัตขิ องตาราง
-
คุณสมบัติของตารางบน Properties Inspector ปรับความกว้าง/สูงของตาราง หน่วยของตาราง ตาแน่ง ใส่เส้นขอบ ใส่สีพ้นื ใส่ภาพฉากหลัง ปรับแต่งคุณสมบัติของเซล
- คุณสมบัติของตารางบน Properties Inspector - ปรับความกว้าง/สูงของเซล แถว และคอลัมภ์ - ปรับขนาดเซล แถว คอมลัมภ์ ด้วย Properties Inspector, คลิกเมาส์ - จัดตาแน่งเนื้อหาภายในเซล - ใส่สีพ้นื สีเส้นขอบ และภาพฉากหลังของเซล ปรับแต่งเซลในตาราง
-
แทรกแถวและคอลัมน์ ลบแถวและคอลัมน์ 22
-
แยกเซล รวมเซล
เรียงลาดับข้ อมูลในตาราง Command > Sort Table
จัดรูปแบบตารางอัตโนมัติ Command >Format Table นาตารางมาช่ วยจัดเลย์เอาท์ ของเว็บเพจ สร้ างตารางรวมภาพกราฟิ กจาก Photoshop********** 2 ชั่วโมง สร้ าง Banner ด้ วย Photoshop จัดหน้ าเว็บเพจในมุมมอง Layout จัดหน้ าเว็บเพจด้ วยเลเยอร์ ( Layer) แบ่ งหน้ าเว็บเพจด้ วยเฟรม (Frame) การสร้ าง Template และการใช้ งาน Library การสร้ างฟอร์ ม (Form) องค์ประกอบของการสร้างฟอร์ ม -ตัวฟอร์ ม -ฟอร์ มออบเจ็ค - ปุ่ ม Submit และ Reset - องค์ประกอบอื่นๆ
23
24
25
การเล่นมัลติมเี ดียบนเว็บเพจ (Web Multimedia)
สร้ างปุ่ ม Flash
26
ปรับแต่งคุณสมบัตขิ องปุ่ ม Flash
สร้ างข้ อความ Flash
สร้ างสไลด์ โชว์ภาพด้ วย Image Viewer เล่น Flash Video บนเว็บเพจ การแสดงมัลติมเี ดียของ Flash และ Shockwave
27
เล่นมัลติมเี ดียอืน่ บนเว็บ .midi / .mid เล่นเสีงโน๊ตดนตรี .wav เสียง .aif เสียง .mp3 เสียง .rm บันทึกเพลง .mov เสียงและวีดีโอ .avi เสียงและวีดีโอ .wmv, asf เสียงและวีดีโอ 28
เล่นมัลติมเี ดียโดยใช้ ปลัก๊ อิน (Plugin)
29
สร้ างเว็บเพจให้ โต้ตอบกับผู้ชม (JavaScript Behavior)
ตัวอย่างการนา Behavior มาใช้ งาน - เปิ ดวินโดว์แบบป๊ อปอัพ สร้างแล้วเลือกออกเจ็คที่ Behaviors
30
- เล่นเสียง เลือกออบเจ็คที่จะใช้เล่นเสียง
- แสดงกล่องข้ อความ เลือกภาพกราฟิ ก
31
- แสดงข้ อความบนแถบสถานะ เลือกไฮเปอร์ ลิงค์ Action เลือก Set Text > Set Text of Status Bar
การบริหารจัดการเว็บไซต์ การเผยแพร่ เว็บไซต์ 32