Transcript แนะนำ Dreamweaver 8.0

Macromedia DREAMWEAVER 8
1
01 เวิลด์ไวด์เว็บ
(World Wide Web)
เวิลด์ไวด์เว็บ (world wide web หรื อ www) หรื อที่เรี ยก
สั้นๆ ว่า เว็บ เป็ นการบริ การข้อมูลข่าวสารในแบบสื่ อประสมหรื อมัลติมีเดีย
กล่าวคือ ข้อมูลเหล่านี้จะเป็ นข้อมูลที่มีท้ งั ข้อความภาพ และเสี ยง ประกอบ
กัน แทนที่จะมีเพียงตัวอักษรละลานตาเพียงอย่างเดียว จึงสามารถเรี ยกร้อง
ความสนใจจากผูช้ มได้เป็ นอย่างดี ความก้าวหน้าของเทคโนโลยีปัจจุบนั ทา
ให้ขอ้ มูลประเภทนี้สามารถแสดงภาพเคลื่อนไหวในแบบของภาพยนตร์
และแสดงเสี ยงให้คุณภาพระดับเดียวกับแผ่นซีดีเลยทีเดียว
2
เว็บไซต์ (Web site)
เป็ นเครื่ องที่ใช้ในการจัดเก็บเว็บเพจ มักเรี ยกว่า เว็บเซิ ร์ฟเวอร์ (web server)
แต่ละองค์กรที่จะนาเสนอข้อมูลของตนในรู ปของเว็บนั้นมักจะมีเว็บไซต์เป็ นของตัวเอง
และมักใช้ชื่อองค์กรเป็ นชื่อเว็บไซต์เพื่อให้ผทู ้ ี่สนใจสามารถจดจาได้ง่าย
3
เว็บเพจ (Web page)
เป็ นเอกสารข้อมูลในแต่ละหน้าซึ่ งถูกเขียนขึ้นด้วยภาษา HTML ข้อมูลที่แสดงใน
เว็บเพจแต่ละหน้านี้อาจจะประกอบด้วยข้อความ,ภาพ,และเสี ยง จึงเป็ นข้อมูล
แบบสื่ อประสมหรื อมัลติมีเดีย
4
เว็บบราวเซอร์ (Web Browser)
เว็บเพจแต่ละหน้าเป็ นเอกสารข้อมูลที่ถกู เขียนขึ้นด้วยภาษา HTML ดังนั้นการที่เครื่ อง
ของเราจะอ่านและแสดงผลเว็บเพจเหล่านี้ได้จะต้องมีโปรแกรมพิเศษสาหรับทาหน้าที่น้ ี
โดยเฉพาะ โปรแกรมเหล่านี้เรี ยกว่า เว็บบราวเซอร์ (Web Browser) ซึ่ งมีอยูม่ ากมายใน
ปั จจุบนั แต่ที่รู้จกั กันดีเห็นจะได้แก่ Internet Explorer ของบริ ษทั ไมโครซอฟท์ ซึ่ งมีติดมา
กับเครื่ องทุกเครื่ องอยูแ่ ล้ว
5
HTML (Hypertext Markup Language)
เป็ นภาษาที่ใช้ในการเขียนโปรแกรมภาษาหนึ่งของคอมพิวเตอร์เพื่อตอบสนองในการแสดง
ผลบนจอภาพในระบบอินเตอร์ เน็ต ในลักษณะของเว็บเพจ ซึ่ งสามารถแสดงผลได้ท้ งั
ภาษาไทย และภาษาอังกฤษ รวมทั้งภาพนิ่งและภาพเคลื่อนไหว,เสี ยง หรื อแม้กระทัง่
การเชื่อมโยงไปยังเว็บไซต์อื่นๆ ในระบบอินเตอร์เน็ต
ภาษา HTML เป็ นภาษาที่มีลกั ษณะเป็ นโค๊ด (Code) กล่าวคือ จะเป็ นไฟล์ที่เก็บข้อมูลที่เป็ น
อักษรในมาตรฐานของรหัสแอสกี (ASCII Code) โดยเขียนอยูใ่ นรู ปของเอกสารข้อความ
ดังนั้นจึงทาให้ง่ายต่อการเรี ยนรู ้ สามารถกาหนดรู ปแบบและโครงสร้างได้ง่าย
ด้วยภาษา HTML นี้ได้ถกู พัฒนามาอย่างต่อเนื่องเพื่อให้ใช้ได้ง่ายขึ้นและตอบสนองต่อการใช้
รู ปภาพทางกราฟิ ค นอกจากนี้ ภาษา HTML ยังมีลกั ษณะพิเศษที่ควรทราบดังนี้
6
HTML (Hypertext Markup Language) Cont.
- สามารถใช้ได้กบั โปรแกรมสร้างและแก้ไขไฟล์ขอ้ ความ (Text Editor) ได้แก่ Notepad
,Word , Processing ต่างๆ ซึ่ งง่ายต่อการเรี ยนรู ้ และไฟล์ที่ได้จะมีขนาดเล็ก
- HTML ที่ถกู บันทึกใน Text Editor จะมีชนิดของไฟล์เป็ น HTM สาหรับในระบบปฏิบตั ิ
การ MS-DOS และจะมีชนิดเป็ น HTM หรื อ HTML ในระบบปฏิบตั ิการยูนิกซ์,วินโดว์
- สามารถทางานได้บนเว็บบราวเซอร์ทุกตัวที่สนับสนุน HTML เช่น
Microsoft Internet Explorer, Netscape,Mozilla Firefox
7
เข้าสู่ บทเรี ยนที่ 1 พื้นฐานการใช้โปรแกรม
8
ส่ วนประกอบทีส่ าคัญใน Dreamweaver 8
ตัวเลือกกลุ่ม Insert
Insert Palette
Documents toolbar
Panel Group
Files Panel
Window Size (กาหนดขนาดพื้นที่ใช้งาน)
HTML Code Inspector
Properties Inspector
9
Dreamweaver เป็ นโปรแกรมออกแบบ Web page ทีใ่ ช้ เทคนิค WYSIWYG
(วิสสิ วกิ What You See Is What You Get) ทาให้ สามารถออกแบบและสร้ าง
Web page ได้ อย่างดาย
ส่ วนประกอบทีส่ าคัญ
Menu bar
เป็ นที่เก็บคาสั่ ง
Insert Palette
ใช้ แทรก Tag ต่ างๆ ลงใน Web page ซึ่ง Tag ต่ างๆจะถูก
แบ่ งเป็ นกลุ่ม
สามารถเลือกกลุ่มได้ ท้งั แบบ Menu
หรือแบบ Tabs
10
ส่ วนประกอบทีส่ าคัญ
Document Toolbar แถบเครื่ องมือเอกสาร
เป็ นที่เก็บของ Tool ทีใ่ ช้ บ่อยๆ
ใส่ TITLE ของ Web page
Preview ใน Browser
หรือ กด F12
Show Design View แสดเฉพาะหน้าออกแบบ(เหมือนจริ ง)
Show Code and Design แสดงคาสั่งทั้ง HTML และ PHP และ หน้าออกแบบ
Show Code View แสดงคาสั่งทั้ง HTML และ PHP
11
ส่ วนประกอบทีส่ าคัญ
Properties Inspector
ใช้กาหนดคุณสมบัติของ object หรื อ tag ที่กาลัง
เลือกขณะนั้น
การซ่อน/แสดง Window ต่าง
เลือกใน เมนู Window
12
การสร้าง Site
Web Site ประกอบด้วย Web page หลายๆหน้า และแต่ละหน้าอาจ
ประกอบด้วยไฟล์ที่เกี่ยวข้องเป็ นจานวนมาก เช่น ไฟล์รูปภาพ, ไฟล์เสี ยง ฯลฯ
ดังนั้นเพื่อความเป็ นระเบียบ ควรจะสร้าง Site หรื อ ตาแหน่งเก็บไฟล์
ของ Web page ที่จะสร้าง เพื่อจัดเก็บ Web page และไฟล์ที่เกี่ยวข้องให้เป็ น
ระเบียบ และง่ายต่อการ Upload ขึ้น Server
ดังนั้นก่อนการสร้าง Web page ใดๆ ควรทาการสร้าง Site ขึ้นก่อน
(ถึงแม้ Web Site จะประกอบด้วย Web page เพียงไฟล์เดียว)
13
ทดลองพิมพ์ขอ้ ความใน index.php
เลือก มุมมอง Design
เลือกมุมมอง Design
แล้วพิมพ์
สั่ง Save แล้วทดลองแสดงผลบน Browser
14
เลือก มุมมอง Code
เลือก มุมมอง Spilt
15
ขณะ Design สามารถกาหนดคุณสมบัติของอักษร เช่น สี , ขนาด ฯลฯ ผ่าน Properties Inspector
กาหนดคุณสมบัติของทั้ง Page
16
กาหนดให้สามารถเคาะ Spacebar ได้มากกว่า 1 ช่องว่าง
17
การขึ้นย่อหน้าใหม่
การขึ้นย่อหน้าใหม่ทาได้ 2 วิธี คือ
1. Enter
จะมีการแทรกบรรทัดว่างก่อนและหลังข้อความ ทาให้เกิดระยะห่างระหว่าง
บรรทัดมาก เหมาะสาหรับทาหัวข้อหลัก
2. Shift+Enter
จะไม่แทรกบรรทัดว่าง วิธีน้ ีใช้สาหรับขึ้นบรรทัดใหม่แบบเนื้อหาต่อเนื่องกัน 18
กาหนดให้สามารถแสดงตัวอักษรภาษาไทยได้
เลือก Page Properties ใน Properties Inspector
หรื อ เลือก Modify – Page Properties
19
ทดสอบ พิมพ์ code PHP
ไปที่ Code view
ใน Design View จะแสดงสัญญลักษณ์วา่ เป็ น code
Extension คือ โปรแกรมที่จะมาช่วยเสริ มและขยายขีดความสามารถของตัว
Dreamweaver จากที่มีอยูป่ รกติ ให้มีความสามารถในการออกแบบ และจัดการ Web page
ได้ง่าย และสวยงามยิง่ ขึ้น
ทดลอง download extension แล้ว double click ที่ไฟล์ extension (.XMP)
จะเป็ นการเรี ยกใช้โปรแกรม Macromedia Extension Manager
การสร้าง Frame
จะแสดง
การสร้าง Frame
กาหนดคุณสมบัติ Frameset
เลือก Frameset
กาหนดรายละเอียดแต่ะละ Frame ใน Frameset
เนื้อหาที่จะนามาแสดงใน Frame นี้
เลือกเฉพาะ Frame
สร้างเนื้อหาของ Web page ที่จะถูกนามาแสดงใน Frame