ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
Macromedia Dreamweaver 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 1
2
Dreamweaver ความหมายและประโยชน์ของ Dream weaver 8 Macromedia Dreamweaver เป็นโปรแกรมสำหรับออกแบบและ พัฒนาเว็บไซต์ ที่ได้รับความนิยมอย่างมากในปัจจุบัน เนื่องด้วยสามารถ ใช้งานได้ง่าย มีเครื่องมือให้ใช้งานมากมาย ซึ่งสามารถพัฒนาเว็บได้อย่าง รวดเร็ว และง่ายดาย นอกจากโปรแกรม Macromedia Dreamweaver จะ ออกแบบมาให้ใช้สร้างเว็บอย่างง่ายดายแล้ว ยังเพิ่มคุณสมบัติต่าง ๆ ที่มี ประสิทธิภาพ และเอื้อประโยชน์สำหรับผู้ทำเว็บอย่างเต็มที่ ไม่ว่าจะเป็น ระบบการจัดการเกี่ยวกับ Site และการจัดเก็บไฟล์ นอกจากนี้ยังมีระบบ ช่วยจัดการเกี่ยวกับการ Upload ไฟล์ไปยังเซิร์ฟเวอร์อีกด้วย
3
Dreamweaver ลักษณะของ Macromedia Dreamweaver 8 การสร้าง เว็บเพจ ด้วยโปรแกรม Macromedia Dreamweaver 8 ลักษณะของ การใช้งาน ของโปรแกรม ก็จะคล้ายๆ กับโปรแกรม Word Processor ที่เรา สามารถพิมพ์ ใส่ตาราง แทรกรูปภาพ แต่สำหรับการใช้งานจริงๆ แล้ว มันก็ไม่ เหมือนกัน เช่น เวลาที่จะมีการเว้นวรรคข้อความ ซึ่งถ้าเป็น Word Processor นั้น เวลาที่เราจะเว้นวรรคข้อความ โดยกด Spacebar ที่แป้นพิมพ์ได้เลย ไม่ว่าจะเว้น วรรคกี่ตัวอักษรก็ได้ แต่สำหรับ การสร้าง เว็บเพจ ด้วยโปรแกรม Macromedia Dreamweaver 8 แล้วไม่สามารถที่จะทำแบบนั้นได้ เพราะ โปรแกรม Macromedia Dreamweaver 8 การเว้นวรรคในเอกสารนั้น ต้องปฏิบัติ ตามกฎของ ภาษา HTML คือ จะสามารถเว้นวรรคได้เพียงแค่ 1 ช่องไฟหรือ 1 ตัวอักษรเท่านั้น
4
Dreamweaver จุดเด่นของโปรแกรม Macromedia Dreamweaver 8 1. โปรแกรมจะทำการแปลงรหัสให้เป็นภาษา HTML โดยอัตโนมัติดังนั้น ผู้ใช้ที่ไม่มีความรู้ ด้านนี้ก็สามารถทำได้ 2. มีแถบเครื่องมือ หรือแถบคำสั่ง ที่ใช้ในการควบคุมการทำงาน แบ่ง ออกเป็นหมวดหมู่จึง ช่วยในการทำงานที่ดีขึ้น และรวดเร็วยิ่งขึ้น 3.สนับสนุนเว็บเพจที่เป็นภาษาไทยได้ดี 4. มีคุณสมบัติที่สามารถจัดการกับ รูปภาพเคลื่อนไหว โดยไม่ต้องอาศัย Plugin 5. สามารถเรียกใช้ตารางจากภายนอก โดยการอิมพอร์ทจาก Text File 6. เป็นโปรแกรมที่สามารถสนับสนุนการใช้งาน CSS (Cadcading Style Sheet) 7. มีความสามารถในการทำ Drop Down Menu รวมไปถึงการทำให้รูปภาพ เปลี่ยนเมื่อนำเมาส์ไปชี้ เป็นต้น
5
Dreamweaver การสร้าง Web Page CODE HTML เขียน Code เอง ใช้โปรแกรม สำเร็จรูป (WYSIWYG*) *What you see is what you get. 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 5
6
Dreamweaver การสร้าง Web Page โปรแกรมที่ใช้สำหรับการสร้าง Web Page แบบ WYSIWYG Microsoft FrontPage Macromedia Dreamweaver NetObjects Fusion 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 6
7
Dreamweaver ขั้นตอนการพัฒนาเว็บ วางแผนการสร้างเว็บไซต์ กำหนดหัวข้อและเนื้อหาที่จะนำเสนอ ทำเว็บอะไรดี นะเรา ? ทำเว็บส่วนตัวดีกว่า 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 7
8
Dreamweaver แล้วต้องเตรียมอะไรบ้างล่ะ เตรียมข้อมูลเกี่ยวกับตัวเองที่จะนำเสนอ ประวัติส่วนตัว,หน้าที่การงาน,ผลงาน,งานอดิเรก,ความภาคภูมิใจ เตรียมภาพประกอบเว็บ (ถูกลิขสิทธิ์นะจ๊ะ) เตรียมเพลงประจำตัวมาด้วยดีไหมน๊า 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 8
9
Dreamweaver สร้างผังความสัมพันธ์ของข้อมูลแบบรากต้นไม้ 9
10
Dreamweaver กำหนดชื่อไฟล์ของเอกสารเว็บ 1 หน้า/1 ไฟล์ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 10
11
Dreamweaver การออกแบบเว็บในประเภทต่างๆ แบบเชิงเส้น แบบรากต้นไม้แบบผสม 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 11
12
Dreamweaver คำแนะนำในการตั้งชื่อ File และ Folder ชื่อและนามสกุลของไฟล์ ตลอดจน Folder ต่างๆ ควรใช้ อักษรภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9 หรือเครื่องมือขีดลบ - /ขีดล่าง _ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 12
13
Dreamweaver แผนผังการดูแลเว็บเพจ สร้างเว็บเพจ ปรับปรุง Upload 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 13
14
Dreamweaver ทำความรู้จักกับ Dreamweaver Dreamweaver เป็นโปรแกรมประเภท Web Design ซึ่ง มีคุณสมบัติในการใช้งานในแบบ WYSIWYG (What You See Is What You Get) 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 14
15
Dreamweaver What version? โปรแกรม Dreamweaver ออกมาได้หลากหลาย version แล้ว จนถึงวันนี้ Version 8.0 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 15
16
Dreamweaver ทำความรู้จักกับส่วนประกอบที่สำคัญของโปรแกรม ส่วนของ Stage ส่วนของหน้าต่าง Panel ส่วนของ Insert ส่วนของ Properties 1 2 3 4 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 16
17
Dreamweaver ส่วนประกอบที่สำคัญใน Dreamweaver 8 Documents toolbar ตัวเลือกกลุ่ม Insert HTML Code Inspector Insert Palette Window Size ( กำหนดขนาดพื้นที่ใช้งาน ) Properties Inspector Panel Group Files Panel 17
18
Dreamweaver Dreamweaver เป็นโปรแกรมออกแบบ Web page ที่ใช้เทคนิค WYSIWYG (วิสสิวิก What You See Is What You Get) ทำให้สามารถออกแบบและสร้าง Web page ได้อย่างดาย ส่วนประกอบที่สำคัญ Menu barเป็นที่เก็บคำสั่ง Insert Paletteใช้แทรก Tag ต่างๆ ลงใน Web page ซึ่ง Tag ต่างๆจะถูก แบ่งเป็นกลุ่ม สามารถเลือกกลุ่มได้ทั้งแบบ Menu หรือแบบ Tabs 18
19
Dreamweaver ส่วนประกอบที่สำคัญ Document Toolbar แถบเครื่องมือเอกสาร เป็นที่เก็บของ Tool ที่ใช้บ่อยๆ ใส่ TITLE ของ Web page Preview ใน Browser หรือ กด F12 Show Design View แสดเฉพาะหน้าออกแบบ(เหมือนจริง) Show Code and Design แสดงคำสั่งทั้ง HTML และ PHP และ หน้าออกแบบ Show Code View แสดงคำสั่งทั้ง HTML และ PHP 19
20
Dreamweaver ส่วนประกอบที่สำคัญ Properties Inspector ใช้กำหนดคุณสมบัติของ object หรือ tag ที่กำลัง เลือกขณะนั้น การซ่อน / แสดง Window ต่าง เลือกใน เมนู Window 20
21
Dreamweaver ส่วนประกอบเพิ่มเติม Rulers Grids Guides 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 21
22
Dreamweaver ตั้งค่าภาษาไทยใน Dreamweaver ก่อนสร้างเว็บเสมอนะ Edit/Preferences... Ctrl+U Step 1 Step 2 ++เราจะสร้างเว็บภาษาไทย+++ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 22
23
Dreamweaver เริ่มต้นสร้างเว็บแล้วนะ ก่อนอื่นจะเริ่มต้นสร้างเว็บต้องรู้จัก การสร้าง Site งาน กันก่อนนะ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 23
24
Dreamweaver การสร้าง Site Web Site ประกอบด้วย Web page หลายๆหน้า และแต่ละ หน้าอาจประกอบด้วยไฟล์ที่เกี่ยวข้องเป็นจำนวนมาก เช่น ไฟล์รูปภาพ, ไฟล์เสียง ฯลฯ ดังนั้นเพื่อความเป็นระเบียบ ควรจะสร้าง Site หรือ ตำแหน่งเก็บไฟล์ ของ Web page ที่จะสร้าง เพื่อจัดเก็บ Web page และไฟล์ที่ เกี่ยวข้องให้เป็น ระเบียบ และง่ายต่อการ Upload ขึ้น Server ดังนั้นก่อนการสร้าง Web page ใดๆ ควรทำการสร้าง Site ขึ้นก่อน ( ถึงแม้ Web Site จะประกอบด้วย Web page เพียงไฟล์เดียว ) 24
25
Dreamweaver สร้าง Folder เพื่อเก็บข้อมูล Web Site ขั้นตอนการสร้าง Site แล้วสั่ง Next คำสั่ง Site – New Site 25
26
Dreamweaver การสร้าง Site งาน Menu Site/New Site ตั้งชื่อไซต์ สร้าง Folder เก็บ File เว็บ เสร็จแล้วก็ OK เลยนะคะ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 26
27
Dreamweaver จะได้หน้าต่างดังนี้ Site ของฉัน 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 27
28
Dreamweaver สร้างไฟล์ตามที่ได้เตรียมไว้ตอนต้น Click ขวาตามภาพ New File เพื่อสร้างไฟล์ที่ต้องการ จะได้ไฟล์นามสกุล.html หรือ.htm 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 28
29
Dreamweaver เริ่มสร้าง File และ Folder File และ Folder แบบ A แบบ B 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 29
30
Dreamweaver มารู้จัก Local Info ฝั่งการทำงานของเรา Remote Info ฝั่งการทำงานของ Host Local Info Remote Info 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 30
31
Dreamweaver เปิดดูเว็บเพจในแต่ละหน้ามาดู 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 31
32
Dreamweaver เริ่มต้นทำงานทีละหน้าเป็นต้นแบบจะง่ายที่สุด 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 32
33
Dreamweaver อย่าลืมพิมพ์ Title ด้วยนะ F12 ดูเลย นี่ไง Title มีประโยชน์ต่อการ Search Engine นะจะ บอกให้ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 33
34
Dreamweaver การออกแบบเว็บเพจด้วย Layout Mode Layout Mode 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 34
35
Dreamweaver จะออกเว็บเพจด้วย Layout Mode เลือกขนาดเว็บที่ต้องการขนาดอะไรดีนะ 640x??? pixel 800x???? pixel Popular 1 1024x??? pixel Free Size Popular 2 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 35
36
Dreamweaver ประเด็นสำคัญของภาพกราฟิกสำหรับงานเว็บ ใช้ความความละเอียดของภาพ (Resolution) 72 dpi ใช้โหมด RGB ในการสร้างงาน ต้องคำนึงถึง Screen Area ของจอภาพ ดังนี้ o 640 x 480 pixel o 800 x 600 pixel o 1024 x 768 pixel 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 36
37
Dreamweaver มารู้จักชื่อเครื่องมือใน Layout Mode ตัวควบคุม Layout Mode Layout Table Draw Layout Cell Insert Row Above Insert Row Below Insert Column to the left Insert Column to the Right 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 37
38
Dreamweaver มาเริ่มวาดโครงเว็บกันดีกว่า 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 38
39
Dreamweaver มาเริ่มวาดโครงเว็บที่ 800x1000 pixel 1000 800 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 39
40
Dreamweaver เลือกจัดตำแหน่งหน้าเว็บ Center or Left 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 40
41
Dreamweaver ตัวอย่าง การวาด Cells in Tables 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 41
42
Dreamweaver ค่ามาตรฐานในการตกแต่งเว็บ มาตรฐานแบบอักษร มาตรฐานขนาดอักษร มาตรฐานสีอักษร มาตรฐานพื้นหลัง มาตรฐานรูปภาพพื้นหลัง มาตรฐานระยะขอบของเว็บ Pic2. 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 42
43
Dreamweaver ค่ามาตรฐานในการสร้างลิงค์ มาตรฐานแบบอักษรในการลิงค์ มาตรฐานขนาดอักษรในการลิงค์ มาตรฐานสีอักษรในการลิงค์ Link Color Visited links Rollover links Active links มาตรฐานเส้นในการลิงค์ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 43
44
Dreamweaver การกำหนด Fixed Font Font หรือ ตัวอักษร เป็นสิ่งจำเป็นในการจัดทำเว็บเพจ เพราะเป็นสัญลักษณ์ ในการสื่อความหมายข้อความ ความคิด ข่าวสารต่าง ๆ ในบทความนี้เรา เลยมาแนะนำการกำหนดค่า FONT วิธีการทำ ให้ทำการพิมพ์ข้อความที่ต้องการลงบนหน้า webpage จากนั้นให้ทำการ ระบายสีข้อความ เพื่อเลือกข้อความนั้น 3. เมื่อเราเลือกข้อความที่ต้องการได้แล้ว ให้ไปที่หน้าต่าง Properties เพื่อกำหนดค่าของ FONT ต่าง ดังรูป 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 44
45
Dreamweaver Properties ของ Font Format - สามารถกำหนดลักษณะของ ตัวอักษร ว่าเป็น Paragraph หรือเป็น Heading หัวข้อของข้อความ Default Font - เราสามารถเลือกแบบ ของตัวอักษรได้ที่ช่องนี้ Size เราสามารถกำหนดขนาดของ ตัวอักษรได้ที่ช่องนี้ Text Color - ตรงตัว คือ เราสามารถ กำหนดของสีตักอักษรได้โดยการ Click เลือกสีที่ต้องการ Bold- ทำตัวอักษรให้หนา Italic - ทำตัวอักษรให้เอียง Align -ใช้จัดรูปแบบของข้อความ Link -ใช้ในการกำหนด Link Unordered List -กำหนด List หัวข้อ แบบมีสัญลักษณ์นำหน้า Ordered List- กำหนด List หัวข้อแบบ มีตัวเลขนำหน้า Text Oundext & Test Indent - กำหนดการเยื้องของย่อหน้า 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 45
46
Dreamweaver Example Heading 1-6 Heading1 Heading2 Heading3 Heading4 Heading5 Heading6 Preformatted 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 46
47
รูปภาพกับเว็บเพจ Image for Webpages 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 47
48
Dreamweaver Image การทำ Webpages แน่นอนสิ่งหนึ่งที่จะขาดไม่ได้นอกจาก ตัวหนังสือแล้ว รูปภาพก็เป็นสิ่งจำเป็น การจะนำไฟล์รูปภาพต่าง ๆ เข้ามาใช้งานภายใน Webpages เราควรจะมีข้อคำนึงถึงอยู่ 3 ประการด้วยกัน คือ 1. ประเภทของไฟล์รูปภาพ ไฟล์รูปภาพนั้น เราควรจะใช้เป็นนามสกุล *.gif *.jpg จึงจะเหมาะสมกับงานบน website ความจุของไฟล์รูปภาพ (ไม่ใช่ขนาดของรูปภาพ) ควรมีการ Optimize ก่อนการนำมาใช้งาน ควรมีการใช้งานรูปภาพเท่าที่จำเป็น อย่าใส่ให้มากเกินไป ---- 3 ประการนี้ให้เราพิจารณาตามความเหมาะสมกับงานเรา ----- 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 48
49
Dreamweaver กราฟิกไฟล์สำหรับอินเทอร์เน็ต ไฟล์สกุล GIF (Graphics Interlace File) ไฟล์สกุล JPG (Joint Photographer's Experts Group) ไฟล์สกุล PNG (Portable Network Graphics) 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 49
50
Dreamweaver ไฟล์สกุล GIF (Graphics Interlace File) จุดเด่นของไฟล์ประเภทนี้คือ o มีขนาดไฟล์ต่ำ o สามารถทำพื้นของภาพให้เป็นพื้นแบบโปร่งใสได้ (Transparent) o มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Interlace o มีโปรแกรมสนับการสร้างจำนวนมาก o เรียกดูได้กับ Graphics Browser ทุกตัว o ความสามารถด้านการนำเสนอแบบภาพเคลื่อนไหว (Gif Animation) จุดด้อยของไฟล์ o แสดงสีได้เพียง 256 สี 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 50
51
Dreamweaver ไฟล์สกุล GIF (Graphics Interlace File) เป็นไฟล์กราฟิกมาตรฐานที่ทำงานบนอินเทอร์เน็ต มักจะใช้เมื่อ o ต้องการไฟล์ที่มีขนาดเล็ก o จำนวนสีและความละเอียดของภาพไม่สูงมากนัก o ต้องการพื้นแบบโปร่งใส o ต้องการแสดงผลแบบโครงร่างก่อน แล้วค่อยแสดงผลแบบละเอียด o ต้องการนำเสนอภาพแบบภาพเคลื่อนไหว 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 51
52
Dreamweaver ไฟล์สกุล JPG (Joint Photographer’s Experts Group) จุดเด่นคือ o สนับสนุนสีได้ถึงตามค่า True Color ถึง 24 bit colors สามารถ กำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ (compress files) มีระบบ แสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดในระบบ Progressive มีโปรแกรมสนับสนุนการสร้างจำนวนมาก เรียกดูได้กับ Graphics Browser ทุกตัว จุดด้อยคือ o ทำให้พื้นของรูปโปร่งใสไม่ได้ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 52
53
Dreamweaver ไฟล์สกุล PNG (Portable Network Graphics) จุดเด่นคือ o สนับสนุนสีได้ถึงตามค่า True color (16 bit, 32 bit หรือ 64 bit) o สามารถกำหนดค่าการบีบไฟล์ได้ตามที่ต้องการ o มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียด (Interlace) o สามารถทำพื้นโปร่งใสได้ จุดด้อยคือ o ไม่สนับสนุนกับ Graphic Browser รุ่นเก่า สนับสนุนเฉพาะ IE 4 และ Netscape 4 ความละเอียดของภาพและจำนวนสีขึ้นอยู่กับ Video Card 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 53
54
Dreamweaver พิกเซล (Pixel) 1. คำผสมของคำว่า Picture กับคำว่า Element 2. หน่วยพื้นฐานของภาพ 3. เทียบได้กับ "จุดภาพ" 1 จุด 4. แต่ละพิกเซลเปรียบได้กับสี่เหลี่ยมเล็กๆ ที่บรรจุค่าสี โดยถูก กำหนดตำแหน่งไว้บนเส้นกริดของแนวแกน x และแกน y 5. ภาพบิตแมปจะประกอบด้วยพิกเซลหลายๆ พิกเซล 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 54
55
Dreamweaver ความละเอียด (Resolution) จำนวนพิกเซลของภาพแต่ละภาพ เทียบจำนวนพิกเซลกับความยาว ต่อนิ้ว หน่วยเป็น พิกเซลต่อนิ้ว (ppi: pixels per inch) หรือจุด ต่อนิ้ว (dpi; dot per inch) ภาพขนาดเท่ากันแต่มีความละเอียด ต่างกัน แสดงว่าจำนวนพิกเซลต่างกัน และขนาดของจุดพิกเซลก็ ต่างกันด้วย 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 55
56
Dreamweaver วิธีการนำภาพมาประกอบเว็บเพจ 1. ให้เราไปที่ Insert Tool จากนั้นให้เรา Click เลือก ไปที่ Image ของ TAB Common ดังในภาพ 2. เมื่อ Click ไปแล้วจะปรากฏ หน้าต่างใหม่ขึ้นมาเพื่อให้เรา เลือกไฟล์รูปภาพที่จะนำเข้ามา 3. ใช้งานภายในเพจเรา ให้เลือก ไฟล์ได้ตามต้องการ เมื่อเรา เลือกไฟล์ได้แล้วก็ Clcik ที่ปุ่ม OK ของหน้าต่างนั้น 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 56
57
Dreamweaver รายละเอียด Properties image ที่หน้าต่าง Properties นี้เราสามารภกำหนดค่าต่าง ๆ ได้ดังนี้ - ช่องแรก จะเป็นการกำหนดชื่ออ้างอิงของไฟล์รูปภาพ - W จะเป็นค่าความกว้างของรูปภาพ - H จะเป็นค่าความสูงของรูปภาพ ทั้ง W และ H เราสามารถกำหนดได้ 2 ลักษณะคือเป็นเปอร์เซ็น (%) กับเป็น pixel โดยถ้าเราใส่เป็นค่าตัวเลขลงไปอย่างเดียวจะเป็น การกำหนดแบบ Pixel แต่ถ้าเราใส่เป็น 30% จะเป็นการกำหนด แบบ เปอร์เซ็น - Scr คือตำแหน่งของรูปภาพ - Link ถ้าต้องการทำภาพนี้ให้มีการเชื่อมโยงกับไฟล์อื่นหรือเว็บอื่น ก็กำหนดค่าตรงส่วนนี้ (จะกล่าวถึงการทำ link ต่อไป) - Alt คือการกำหนด Title ของรูปภาพ เมื่อเวลาเอาเมาท์วาง เหนือรูปภาพจะมี PopUp แสดงข้อความออกมา - V Space คือค่าความห่างระหว่างรูปภาพกับวัตถุอื่นทางด้าน บนและล่างของรูป - H Space คือค่าความห่างระหว่างรูปภาพกับวัตถุอื่นทางด้าน ขวาและซ้ายของรูป - Border คือ ค่าความหนาของกรอบรูปภาพที่ต้องการ - Align คือการกำหนดตำแหน่งของรูปภาพ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 57
58
การทำงานกับ Link Link for webpage 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 58
59
Dreamweaver ประเภทของลิงค์ 1. Link to Other Pages 2. Link to in Page 3. Link to File (Multimedia, Other File) 4. Link to Download 5. Link to URL 6. Link E-Mail 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 59
60
Dreamweaver ลักษณะจุดคลิกลิงค์ มี 2 แบบ วิธีการสร้างจุดเชื่อมโยง หรือ Hyperlink นั้น เรา สามารถแบ่งออกได้เป็น 2 รูปแบบใหญ่ ๆ คือ Text Link Image Link 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 60
61
ตัวอย่างลิงค์ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 61
62
Dreamweaver Link ภายใน website เดียวกัน 1. ให้ทำการพิมพ์ข้อความที่ต้องการทำเป็นจุดคลิก link ลงบนหน้าเว็บเพจ 2. จากนั้นให้ทำการเลือกข้อความนั้น 3. จากนั้นให้ไปที่หน้าต่าง Properties ด้านล่าง 4. ตรงหน้าต่าง properties จะพบช่อง คำว่า Link อยู่ 5. ที่ช่องนี้ให้ Click ที่รูปไอคอนคล้าย ๆ โฟรเดอร์ซึ่งอยู่ทางขวามือของช่องนี้ (Browser for File) 6. จากนั้นให้ทำการเลือกไฟล์เพจที่ต้องการ Link ไป 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 62
63
Dreamweaver Link URL 1. บางครั้งเราจำเป็นต้องมีการสร้าง Link ไปยังภายนอกเว็บไซต์ เช่นคุณอาจจะอยากจะ Link มาที่เว็บ http://www.janooy.com ก็ไม่ยากดังนี้ -ที่ช่อง Link (จากขั้นตอนก่อน) ให้เราทำการ พิมพ์ URL ของ เว็บไซต์ที่เราต้องการ Link ไปหา โดยวิธีการพิมพ์ต้องพิมพ์แบบระบุ Protocol เช่น http://www.janooy.com เป็นต้น ตรง http:// คือ การระบุโปรโตคอล 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 63
64
Dreamweaver Link ไปยัง e-mail 1. การทำ Link อีกแบบหนึ่งที่นิยมใช้กันคือ การ Link ไปยัง e-mail ที่ ต้องการ มาดูวิธีการทำกัน เช่น sathima@bitsthailand.com ไปที่หน้าต่าง Insert Tool เลือกไปที่ Email Link เมื่อ Click แล้วจะปรากฏหน้าต่างใหม่ขึ้นมา ให้เราทำการกรอก E-mail Account ที่ต้องการ link ลงไปใน Text Box ช่อง Text ให้ทำการพิมพ์ข้อความที่ ต้องการสร้าง link ที่ช่อง E-Mail ให้เราทำการพิมพ์ E-Mail Account ที่ต้องการลงไป Click ที่ OK 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 64
65
Dreamweaver Image Link Image Link หรือ การเชื่อมโยงโดยใช้รูปภาพนั้นเป็นที่นิยมใช้กัน มาก เนื่องจากมีความสวยงามและน่าสนใจกว่าการใช้ Text หรือ ข้อความทั่วไป แต่สิ่งหนึ่งเราควรคำนึงถึง และนำมาพิจารณาเป็น องค์ประกอบในการเลือกระหว่างการใช้ Text หรือ Image ที่จะ นำมาทำเป็น link ก็คือ ระยะเวลาในการ Load ไฟล์เพจของเรา 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 65
66
Dreamweaver วิธีการสร้าง Image Link ให้คุณทำการ Insert ไฟล์รูปภาพเข้ามาภายใน webpage ของ คุณ จากนั้น Click เลือกไปที่รูปภาพนั้น (เมื่อคลิกแล้วจะปรากฏ เป็นกรอบขึ้นมาที่รูปนั้น) จากนั้นให้คุณไปยังหน้าต่าง Properties 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 66
67
Dreamweaver ที่หน้าต่าง Properties นี้ให้เราทำการกำหนดค่าที่ สำคัญ ๆ ดังนี้ - Link คลิกเลือกไฟล์ที่คุณต้องการ link ไป (กรณีไฟล์ที่ต้องการลิงค์ไปอยู่ ใน site เดียวกัน) หรือ พิมพ์ URL ของไฟล์ลงไป กรณีถ้าไฟล์อยู่ต่าง site กัน - Border ให้เรากำหนดค่าเป็น 0 เสีย ไม่เช่นนั้นจะปรากฏกรอบของ link ขึ้นโดยอัตโนมัติที่รูปภาพซึ่งเป็นลิงค์ (แต่ถ้าคุณต้องการกรอบนั้นก็ปล่อย ว่างไว้ไม่ต้องกรอกเลขอะไรทั้งสิ้น) - Target กำหนด Browser ที่จะมา รองรับไฟล์ที่เชื่อมโยงไปนั้น โดยมี ความหมายดังนี้ >>> _blank ให้ทำการเปิด Browser ใหม่ สำหรับไฟล์ที่เชื่อมโยงไป _self ให้เปิดไฟล์ที่เชื่อมโยงไปกับ Browser ที่เรียกใช้ไฟล์นั้น _ top ให้ทำการเปิดไฟล์ที่เชื่อมโยงไป กับ Browser ปัจจุบันและทำการลบ Frame ออกทั้งหมด หากใช้ร่วมกับ เฟรม _self ให้ผลคล้ายกับ _top 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 67
68
Dreamweaver Show Content _blank - the target URL will open in a new window _self - the target URL will open in the same frame as it was clicked _parent - the target URL will open in the parent frameset _top - the target URL will open in the full body of the window 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 68
69
Dreamweaver การสร้างตาราง การสร้างตารางสำคัญและจำเป็นอย่างมากในการสร้างเว็บเพจ เพราะโครงสร้างของหน้าเว็บเพจที่คุณเห็นสวย ๆ นั้น แท้จริง แล้วก็เกิดจาการสร้างตารางขึ้นมาใช้ในการ Layout นั่นเอง ครั้ง นี้เราจะมาเรียนรู้พื้นฐานการสร้างตารางกัน... 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 69
70
Dreamweaver วิธีการสร้าง 1. ให้คุณทำนำ cursor ไปวางไว้ยังตำแหน่งที่ คุณต้องการสร้างตาราง 2. จากนั้นให้คุณทำการเปิด หรือไปที่หน้าต่าง Insert ในกรณี MX หรือที่ Object ในกรณี version.4 นะ 3. จากนั้นที่หน้าต่างนี้ให้ไปที่เมนู Common Object ที่เมนูนี้เราจะเห็น Icon เป็นรูปตาราง อยู่ ที่ชื่อว่า Insert Table ให้เราทำการ Click ที่ icon นี้ 4. เมื่อท่านได้ทำการ Click ที่ Icon นี้แล้วจะ ปรากฏหน้าต่างใหม่ขึ้นมาให้เรากำหนดค่า คุณสมบัติต่าง ๆ ของตารางที่เราจะทำการสร้าง 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 70
71
Dreamweaver การกำหนดคุณสมบัติของตาราง Row -> กำหนดจำนวนแถวของตาราง (เซลตารางตามแนวนอน) Columns -> กำหนดจำนวนคอลัมน์ของตาราง (เซลตารางตามแนวตั้ง) Width -> กำหนดความกว้างของตาราง ตรงนี้เราสามารถกำหนดได้ เป็น 2 แบบคือแบบ Pixels กับแบบ Percent (%) Border -> กำหนดค่าความหนาของกรอบตาราง Cell Padding -> กำหนดระยะห่างระหว่างกรอบขอข้อความกับตัวอักษร ภายในเซล Cell Spacing -> กำหนดระยะห่างระหว่าง Cell ของตาราง 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 71
72
Dreamweaver Rollover Image เมื่อเรานำเอาเมาท์ไปวางเหนือภาพที่ใช้เทคนิค Rollover นี้ รูปภาพจะ เปลี่ยนไปเป็นอีกรูปหนึ่ง นี้คือการทำงานของ -Rollover Image Name : ให้ทำการตั้งชื่อของรูปภาพ -Original Image : ทำการ Browse..เพื่อเลือกไฟล์รูปภาพที่จะนำมาแสดง ก่อนที่เมาท์จะมาวางเหนือรูปภาพ -Rollover Image : ทำการ Browse..เพื่อเลือกรูปภาพที่จะมาแสดงแทน เมื่อ ผู้ใช้ทำการนำเมาท์มาวางเหนือรูปภาพ -Perload Rollover Image : ติ๊กเครื่องหมายถูก เพื่อให้ Browser ทำการ โหลดไฟล์ Rollover Image มาเก็บไว้ก่อน เพื่อการแสดงผลที่รวดเร็ว -Alternate Text : ข้อความอธิบายรูปภาพ -When Clicked, Go To URL : ทำการเลือกไฟล์ หรือใส่ชื่อ URL สำหรับการ ทำ link ให้แก่รูปภาพ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 72
73
File Flash กับ Dreamweaver 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 73
74
Dreamweaver การนำเข้าไฟล์แฟลท ปัจจุบันงานประเภท Flash ได้รับความนิยมจากผู้ออกแบบและผู้ใช้งาน website เป็นอย่างมาก อาจจะเป็นเพราะเทคโนโลยีที่เปลี่ยนไป ทำให้ Browser ต่าง ๆ หันมาสนับสนุนเทคโนโลยีของ Flash กันมากขึ้น ซึ่ง ผิดกับเมื่อก่อนนี้ ที่ใครต้องการชมเว็บเพจที่มีใช้งานไฟล์ Flash นี้ต้องไป Download ตัว Plug in มาติดตั้งเพิ่มเติมกับ Browser เอง แต่ปัจจุบบัน ผู้พัฒนา Browser ต่าง ๆ ไม่ว่าจะเป็น IE หรือ NS ล้วนแต่สนับสนุน ไฟล์ Flash นี้ โดยที่คุณไม่ต้องทำการติดตั้งโปรแกรมเพิ่มเติมแต่อย่างใด....ครั้งนี้เราจะมาทำการ Insert Flash File ด้วยโปรแกรม Dreamweaver 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 74
75
Dreamweaver วิธีการ Insert Flash File 1.กับ webpage โดยอาจจะสร้างขึ้นมาเองด้วย โปรแกรม Macromedia Flash หรือจะเข้าไป หา Download ไฟล์ Flash นี้จากเว็บไซต์ที่ ให้บริการก็ได้ 2. เมื่อเราได้ไฟล์ Flash ที่ต้องการแล้วต่อไปก็ มาเริ่มนำเข้ามาใช้งานกับ webpage ของเรา เลย โดยให้เปิดโปรแกรม DW ขึ้นมา จากนั้นให้ ทำการ New File ขึ้นมาใหม่ หรืออาจจะเปิดไฟล์ เพจเดิมที่มีอยู่แล้วก็ได้ จากนั้นให้คุณนำเอา cursor ไปวางในตำแหน่งที่ต้องการจะทำการ Insert Flash เข้าไป 3. เมื่อได้ตำแหน่งในการจัดวางไฟล์ Flash นี้ แล้ว ให้ไปที่หน้าต่าง (Panel) ที่ชื่อว่า Common แล้วเลือกไปที่ icon ที่ชื่อว่า Flash 4. เมื่อเลือกไปที่ icon ที่ชื่อว่า Flash จาก ขั้นตอนก่อนแล้ว ก็จะเกิดเป็น Dialog Box ขึ้นมาใหม่เพื่อให้เราทำการเลือกไฟล์ Flash ที่ เราต้องการนำมาใช้งานกับ webpage ของเรา ให้เราทำการเลือกไปที่ไฟล์ Flash ที่เราต้องการ นำมาใช้ 5. เมื่อเลือกแล้วโปรแกรมจะทำการ Insert Flash File ให้เรา ขั้นตอนนี้อาจจะมีการถามให้ เราตอบคำถามบ้างอย่าง กรณีนี้จะเกิดขึ้นได้ หากมีการเรียกใช้ File Flash นอกไซต์ที่ทำการ ตั้งเอาไว้ ให้ ตอบ OK ไป แล้วให้ทำการ Save ตามที่โปรแกรมแนะนำ 6. เมื่อเราได้ทำการ Insert เป็นที่เรียบร้อย แล้ว ในโปรแกรม Dreamweaver ที่เรา ออกแบบจะไม่แสดงไฟล์ Flash นั้นให้เราเห็น แต่จะแสดงเป็นวัตถุสีเทา ๆ แทน 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 75
76
Dreamweaver การแทรกวัน - เวลา หลายครั้งการสร้าง webpage ขึ้นมา เราต้อง ทำการบันทึกวันเวลาลงไปกับหน้าเว็บเพจนั้น ๆ ครั้นจะมานั่งพิมพ์มันก็เสียเวลา ในวันนี้เลย มาแนะนำปุ่ม Insert - Day Format : เลือกรูปแบบวันที่ต้องการ แสดง - Date Format : เลือกรูปแบบวัน-เวลาที่ ต้องการแสดง - Time Format : เลือกรูปแบบเวลาที่ ต้องการแสดง - Update Automatically on Save : ถ้า เราเลือกที่ Option นี้ หมายความว่า เรา ต้องการให้ตัวโปรแกรมทำการบันทึกเวลาให้ ใหม่ทุก ๆ ครั้งที่เราทำการ Save เว็บเพจ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 76
77
Dreamweaver การสร้าง Flash Button ในโปรแกรม Dreamweaver ตั้งแต่เวอร์ชั่น 4 ขึ้นมา เราจะสามารถสร้าง Flash Button หรือ ปุ่มกดในแบบแฟลทได้จากโปรแกรม Dreamweaver โดยไม่ต้องพึงโปรแกรม Macromedia Flash ในการสร้างปุ่มขึ้นมาใช้งาน วิธีสร้าง 1. ให้ไปที่ Panel ที่ชื่อว่า Insert จากนั้นเลือกไปที่ TAB ที่ชื่อว่า Media สำหรับ MX 2003 แต่ใน MX 2004 จะปรากฏอยู่ที่ Common > Media > Flash Button 2. จากนั้นให้ไปที่ Icon ที่ชื่อว่า Flash Button 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 77
78
Dreamweaver การสร้าง Flash Button ที่หน้าต่าง Insert Flash Button นี้ให้เรากำหนดค่าต่าง ๆ ดังนี้ - Sample :: แสดงตัวอย่างของรูปแบบ Flash Button ที่เรา ต้องการ - Style :: เลือกรูปแบบของ Button - Button Text :: ทำการพิมพ์ข้อความที่ต้องการให้ปรากฏบน Button - Font :: เลือกรูปแบบ Font ที่ต้องการ - Size :: เลือกขนาดของ Font - Link :: ทำการกำหนด Link ที่ต้องการ ในกรณีที่อยู่ใน Site เดียวกันให้ทำการ Browse.. ไปยังไฟล์เพจที่ต้องการได้ทันที แต่ หากอยู่นอกไซต์ให้ทำการพิมพ์ URL ในแบบเต็มลงไป (ดังใน รูป) - Target :: เลือกกำหนดการเปิด Link ไปยัง window ที่ ต้องการ (อ่านรายละเอียดเพิ่มเติมที่หัวข้อการสร้าง Link) - Bg Color :: เลือกสีพื้น Background - Save As :: เลือก หรือ พิมพ์ชื่อไฟล์ที่ต้องการบันทึกไฟล์ Button นี้ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 78
79
Dreamweaver การสร้าง Flash TEXT วิธีการสร้าง Flash TEXT ให้ท่านทำการเปิดไฟล์เว็บเพจที่ต้องการ Insert Flash Text ขึ้นมา หรือให้สร้างขึ้นมา ใหม่ (ในกรณีที่สร้างไฟล์เพจขึ้นมาใหม่ ให้ทำ การ Save ไฟล์เพจนั้นเสียก่อน) 2. ไปที่ Panel ของ Insert เลือกไปที่ Media 3. จากนั้นที่ Tab Media ให้เราเลือกที่ Icon ที่ชื่อว่า Flash Text 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 79
80
Dreamweaver การสร้าง Flash TEXT ที่หน้าต่าง Insert Flash Text นี้ให้เราทำการกำหนดค่าต่าง ๆ ดังนี้ - Font เลือกรูปแบบ Font ที่ต้องการ - Size เลือกขนาดของตัวอักษร - Color เลือกสีตัวอักษร - Rollover Color เลือกสีตัวอักษรเมื่อผู้ใช้นำ Mouse มาวาง เหนือข้อความนั้น - Show Font ใช้เลือกเพื่อให้ทำการแสดง Font นั้น - Link ทำการ Browse..ไปหาไฟล์ที่เราต้องการ Link ไปด้วย ข้อความนี้ หรือในกรณีที่จะทำการ Link ไปยังนอกเว็บไซต์ของ เราให้ทำการพิมพ์ URL แบบเต็ม ๆ ลงไป ดังในรูป - Target กำหนดหน้าต่างเป้าหมายที่เราจะให้เปิด Link นั้น (อ่านรายละเอียดในเรื่องการสร้าง Link) - Bg Color เลือกสีพื้น - Save AS ตั้งชื่อไฟล์ที่เราต้องการทำการ Save ไฟล์ Flash Text นี้ หรือให้เราทำการ Browse หากต้องการนำไฟล์นี้ไป เก็บยังโฟลเดอร์อื่น ๆ (อ่านรายละเอียดในเรื่องการสร้าง Link) 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 80
81
Dreamweaver การสร้าง Layer Layer เปรียบเสมือนแผ่นใส ที่เราสามารถจัดวางเคลื่ออนย้ายและซ้อน กันได้กับ Object ต่าง ๆ ได้อย่างอิสระ และภายใน Layer ที่เราสร้างขึ้น เรายังสามารถ Insert หรือ ใส่ TEXT, Image, Table ต่าง ๆ ลงไปได้ เหมือนเราใช้งานบนพื้นที่ปรกติ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 81
82
Dreamweaver วิธีการสร้าง 1. เรียกใช้ Layer จากหน้าต่าง Common Object (Object Palette) โดยใช้ icon ที่ชื่อว่า Draw Layer หรือจะเรียกใช้จากแถบเมนู (MenuBar) โดยไปที่คำสั่ง Insert >> Layout Objects/Layer 2. วาด Leyer ยังตำแหน่งที่ต้องการ 3. click ที่ Layer ที่เราสร้างจากนั้นทำการกำหนดคุณสมบัติของ Layer 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 82
83
Dreamweaver การกำหนด Properties >> Layer ID : กำหนดชื่อที่อ้างอิงให้กับ Layer หากไม่กำหนด โปรแกรมจะทำการกำหนดชื่อให้เราโดยอัตโนมัติ ตามลำดับ Layer mี่ เราสร้างขึ้น L (Left) : กำหนดตำแหน่งเริ่มต้นทางด้านซ้ายของ Layer (มีค่าเป็น Pixel) T (Top) : กำหนดตำแหน่งเริ่มต้นด้านบนสุดของ Layer (มีค่าเป็น Pixel) W (Width) : กำหนดความกว้างของ Layer (มีค่าเป็น Pixel) H (Hight) : กำหนดความสูงของ Layer (มีค่าเป็น Pixel) Z-Index : กำหนดค่าการซ้อนกันของ Layer (โดย Layer ที่มีค่า Z-Index มากจะอยู่เหนือ Layer ที่มี Z- Index น้อยกว่า) Vis : กำหนดค่าสถานะของ Layer Inherit : ใช้คุณสมบัติจาก layer’s parent Visible : ให้แสดง Layer Hidden : ไม่ให้แสดง Layer (การซ่อน) Bg Image : กำหนดภาพ Background ให้กับ Layer Bg Color : กำหนดสีให้กับพื้นหลังให้ของ Layer Tag : เลือกคำสั่ง HTML ที่ใช้ในการสร้าง Layer (ปกติจะใช้ DIV เนื่องจากใช้ได้กับ Browser ทุกค่าย) Overflow : ในกรณีที่เนื้อหามีพื้นที่ใหญ่กว่าขนาดของ Layer เราสามารถกำหนดให้ Layer ทำการขยาย (Visible) ไม่ขยาย (Hidden) หรือว่าให้มีแถบเลื่อน (Scroll) Clip-L (Left), T (Top), R (Right), B (Bottom) : เป็นการกำหนดบริเวณพื้นที่ของ Layer ที่จะแสดง 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 83
84
Dreamweaver >> การตบแต่งแต่งแก้ไขรูปภาพ << 1. ให้ทำการ Insert รูปภาพเข้ามายังไฟล์เว็บเพจ จากนั้นให้คุณทำการ Click เลือกที่รูปภาพนั้น 2. เมื่อได้ทำการเลือกที่รูปภาพที่เราต้องการจะทำการตบแต่งแล้ว ให้คุณ ไปที่ Properties panel เราจะพบ Option สำหรับการตบแต่งรูปภาพอยู่ 3 Icon ดังนี้ Crop สำหรับการตัดรูปภาพเฉพาะส่วนที่เราต้องการ Brightness and Contrast สำหรับการปรับแสงของรูปภาพ Sharpen สำหรับการปรับความคมชัดของรูปภาพ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 84
85
Insert Multimedia 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 85
86
Dreamweaver การ Insert ไฟล์ VDO มาใช้งานบนเว็บเพจ วิธีการ Insert ไฟล์ VDO 1. จัดเตรียมไฟล์ VDO ที่คุณต้องการ อาจจะอยู่รูปแบบของ Format : *.wmv - *.avi ก็ได้ตามแต่สะดวก 2. ทำการเปิดไฟล์เว็บเพจที่เราต้องการ Insert VDO ขึ้นมา หรือ สร้างไฟล์เว็บเพจใหม่ขึ้นมาและทำการ Save ไว้ใน Site ที่เรา กำหนด 3. จากนั้นนำ CURSOR ไปวางในจุดที่ต้องการแทรกไฟล์วีดีโอบน Document Window ของโปรแกรม ตามที่ต้องการ 4. เมื่อได้ตำแหน่งหรือจุดที่เราต้องการแทรกแล้วให้ไปที่ Insert Bar เลือกไปที่ Media จากนั้น Click ไปที่ Icon ที่ชื่อว่า ActiveX 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 86
87
Dreamweaver การแทรก Sound วิธีการ Insert ไฟล์ Sound 1. จัดเตรียมไฟล์ Sound ที่คุณต้องการ อาจจะอยู่รูปแบบของ Format : *.mp3 - *.wma ก็ได้ตามแต่สะดวก 2. ทำการเปิดไฟล์เว็บเพจที่เราต้องการ Insert Sound ขึ้นมา หรือ สร้างไฟล์เว็บเพจใหม่ขึ้นมาและทำการ Save ไว้ใน Site ที่เรา กำหนด 3. จากนั้นนำ CURSOR ไปวางในจุดที่ต้องการแทรกไฟล์วีดีโอบน Document Window ของโปรแกรม ตามที่ต้องการ 4. เมื่อได้ตำแหน่งหรือจุดที่เราต้องการแทรกแล้วให้ไปที่ Insert Bar เลือกไปที่ Media จากนั้น Click ไปที่ Icon ที่ชื่อว่า ActiveX 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 87
88
Dreamweaver :: การสร้างเทมเพลต :: ออกแบบหน้าเพจเหมือนปกติในที่นี้ผมแบ่งออกเป็น 3 ส่วน ส่วนบน ส่วนเมนูทางด้านซ้ายมือและส่วนที่อยู่ตรง กลางเป็นส่วนที่ปล่อยว่างไว้เพื่อจะใช้กำหนดให้เป็นส่วนที่ สามารถแก้ไขได้ ในหัวข้อต่อไป ในการแบ่งนี้ผมใช้ layout cell และ layout table ช่วย 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 88
89
Dreamweaver เทมเพลตคืออะไร Template ทำหน้าที่เหมือนแม่แบบในการออกแบบ webpage ช่วยให้เราประหยัดเวลาในการสร้างสร้างเว็บเพจต่อไปในอนาคต โดยการสร้างเทมเพลตจะแบ่งออกเป็น 2 ส่วนใหญ่ๆ คือ ส่วนที่ คงที่และส่วนที่สามารถแก้ไขได้ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 89
90
Dreamweaver Template 1. การสร้างเทมเพลต 2. การนำเทมเพลตมาใช้งาน 3. การปรับปรุงเทมเพลต 4. การซ้อนเทมเพลต (Nested Template) 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 90
91
Dreamweaver เรื่อง การใช้งาน CSS กับโปรแกรม Dreamweaver CSS ย่อมาจาก Cascading Style Sheets ซึ่งเป็นนมาตราฐานนึงใน การกำหนดรูปแบบลักษณะต่าง ๆ ของข้อมูลบนเว็บเพจ CSS ช่วยเราได้ อย่างมากในการออกแบบหรือจัดการกับปัญหาบางอย่างที่ HTML โดยปรกติไม่สามารถทำได้ หรือทำได้ไม่ดีเท่าที่ควร เช่น การกำหนดขนาด Font ให้ได้ขนาดตามที่เราต้องการ หรือการใส่สีสรรให้กับช่องกรอกข้อมูล บนหน้าเว็บ และอื่น ๆ ในบทเรียนนี้เราจะมาเริ่มรู้จักกับการใช้งาน CSS กับโปรแกรม Dreamweaver เบื้องต้นกันสักนิด สำหรับเทคนิควิธีการใช้ งาน CSS ต่าง ๆ คุณอาจจะหาอ่านได้จากหน้า Tricks ของเเว็บไซต์นี้Trick 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 91
92
Dreamweaver การใช้งาน CSS Styles Panel เบื้องต้น 1. การเรียกใช้งาน CSS Styles Panel สำหรับโปรแกรม Dreamweaver เรา สามารถเรียกใช้งานหน้าต่าง CSS Styles ได้จาก Main menu -> Window -> CSS Styles หรือหาก เป็นเวอร์ชั่น MX2004 คุณสามารถ เรียกใช้งานได้จาก Panel Group ทาง ขวามือของโปรแกรม (ตามค่าเริ่มต้น ของโปรแกรม) หน้าตาของ CSS Styles Panel 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 92
93
Dreamweaver 2. วิธีการสร้าง CSS Styles ใหม่ เราสามารถสร้าง CSS ขึ้นมาใหม่ ได้โดยไปที่หน้าต่าง CSS Styles จากนั้นให้ทำการกดไปที่ Icon ที่มี เครื่องหมายบวก (+) หรือเราเรียก icon นี้ว่า New CSS Style ดัง จะเห็นได้จากภาพข้างต้น เมื่อทำ การกดไปแล้ว โปรแกรมจะทำการ เปิดหน้าต่างใหม่ขึ้นมาให้เราทำการ ตั้งชื่อหรือเลือก TAG ของ HTML มาใช้ในการกำหนดค่า ดังรูป 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 93
94
Dreamweaver ที่หน้าต่าง New CSS Style นี้จะมีช่องให้เราตั้งชื่อหรือเลือกรูปแบบของ CSS ได้ ดังนี้ - Selector : เป็นการกำหนดชื่อของ CSS ที่เราต้องการ และที่ช่องนี้จะทำงานสัมพันธ์กับ Type ด้านล่าง หากเราเลือก Type เป็น Redifine HTML TAG ที่ช่อง Selector จะมี List ของ TAG HTML ให้เราเลทอกเพื่อทำการกำหนดคุณสมบัติใหม่ให้กับ TAG HTML - Tyle : เลือกรูปแบบที่เราจะกำหนดคุณสมบัติ CSS มี 3 ค่าให้เลือก คือ Make Custom Style (class) เป็นการสร้าง CSS ขึ้นมาใหม่โดยเราทำการกำหนดชื่อของ Style ขึ้นเอง เราอาจจะเรียก Style นั้นว่า Class ก็ได้ Redifine HTML Tag เป็นการเลือก TAG ของ HTML ขึ้นมาทำการกำหนดคุณสมบัติใหม่ Use CSS Selector เป็นการกำหนดคุณสมบัติ CSS ให้กับบางจุดของหน้าเว็้บเพจที่เราต้องการ เช่น จุดที่เป็น Link จุดที่เรากำหนด ID ของ TAG นั้น ๆ ไว้ เป็นต้น ใน MX2004 จะใช้ชื่อ option นี้ว่า Advanced ดังรูป - Define in : เป็นการเลือกว่าเราจะกำหนดการเก็บ CSS ที่เรากำลังจะสร้างขึ้นไว้ในรูปแบบใด มี 2 รูปแบบให้เลือก คือ 1. New Style Sheet File เป็นการเก็บ CSS ไว้ภายนอกเว็บเพจ หรือพูดอีกนัยนึง คือ เป็นการ เก็บ CSS ไว้ใน File ต่างหากแยกออกจากเว้บเพจที่เรากำลังทำงานอยู่นี้ 2. This document only เป็นการฝั่ง CSS นี้ลงในไฟล์เว็บเพจปัจจุบันนี้ (สำหรับมือใหม่ แนะนำให้เลือกที่ option ไปก่อน เพื่อการเรียนรู้) 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 94
95
Dreamweaver ที่หน้าต่าง CSS Style Definition นี้เราสามารถกำหนดลักษณะรูปแบบต่าง ๆ ของ CSS ได้ มากมาย ซึ่งโปรแกรมได้ทำการแบ่งไว้เป็นหมวด ๆ ดังนี้ - Type เป็นการกำหนดรูปแบบของข้อความที่เป็นลักษณะของ Text หรือ Font ต่าง ๆ - Background เป็นการกำหนดคุณสมบัติของพื้นหลัง เช่น สีพื้นหลัง ลักษณะรูปภาพของพื้นหลัง เป็นต้น - Block เป็นการกำหนดขอบเขตในลักษณะของ Block - Box เป้นการกำหนดขนาดของพื้นที่ในรูปแบบของ Box เราสามารถกำหรดค่าความกว้างความ สูงลงไปได้กับคุณสมบัตินี้ - Border เป็นการกำหนดลักษณะคุณสมบัติของเส้นขอบ เช่น รูปแบบของเส้นขอบ สีสรรต่าง ๆ - List เป็นการกำหนดลักษณะของข้อความในลักษณะ List Menu - Position เป็นการกำหนดตำแหน่งของวัตถุ (Object) ที่เลือกใช้ CSS นี้ - Extension เป็นการกำหนดค่าเพิ่มเติมของ CSS ในรูปแบบพิเศษ เช่นการกำหนด Cursor ให้ เป็นรูปแบบใหม่ตามที่เราต้องการ เป็นต้น ค่าคุณสมบัติต่าง ๆ จากหน้าต่าง CSS Style Definition เราจะเลือกที่จะกำหนดเพียงคุณสมบัติ ใด คุณสมบัติหนึ่งก็ได้ ไม่จำเป็นต้องกำหนดให้ครบทุกคุณสมบัติ เมื่อเราได้ทำการกำหนดค่าเป็นที่ เรียบร้อยแล้ว ให้ทำการ Click ที่ปุ่ม OK เราก็จะได้ CSS Style ในคุณสมบัติที่เราต้องการ 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 95
96
Dreamweaver 3. การเรียกใช้งาน CSS Style เมื่อเราได้ทำการกำหนดค่าคุณสมบัติต่าง ๆ กับ CSS ที่เรา ต้องการแล้ว สำหรับวิธีการเรียกใช้ CSS กับ Obj ที่เราต้องการ นั้น มีการเรียกใช้ได้หลากหลายรูปแบบที่เราต้องการ หากเป็น Dreamweaver MX2004 คุณสามารถเรียกใช้ได้จาก Properties Panel ได้เลยในทันที จากช่องที่ชื่อว่า Style ดังรูป 20 กันยายน 2559 20 กันยายน 2559 20 กันยายน 2559 96
97
www.charprom.com A&Q
งานนำเสนอที่คล้ายกัน
