Suche senden
Hochladen
Dreamweaver8 new[1]
•
5 gefällt mir
•
3,219 views
thongtaw
Folgen
Technologie
Design
Melden
Teilen
Melden
Teilen
1 von 96
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Manual
Manual
Bridge Chapter
Ch10
Ch10
burin rujjanapan
Html
Html
chukiat008
เฉลยการเขียนเว็บเพจ บทที่ 1
เฉลยการเขียนเว็บเพจ บทที่ 1
Beerza Kub
Answer com2
Answer com2
chukiat008
คำอธิบายรายวิชาสาระเพิ่มเติม
คำอธิบายรายวิชาสาระเพิ่มเติม
เขมิกา กุลาศรี
รายงาน window
รายงาน window
NooLuck
4แผนการจัดการเรียนรู้รายหน่วย
4แผนการจัดการเรียนรู้รายหน่วย
kaimmikar123
Empfohlen
Manual
Manual
Bridge Chapter
Ch10
Ch10
burin rujjanapan
Html
Html
chukiat008
เฉลยการเขียนเว็บเพจ บทที่ 1
เฉลยการเขียนเว็บเพจ บทที่ 1
Beerza Kub
Answer com2
Answer com2
chukiat008
คำอธิบายรายวิชาสาระเพิ่มเติม
คำอธิบายรายวิชาสาระเพิ่มเติม
เขมิกา กุลาศรี
รายงาน window
รายงาน window
NooLuck
4แผนการจัดการเรียนรู้รายหน่วย
4แผนการจัดการเรียนรู้รายหน่วย
kaimmikar123
Dreamweaver
Dreamweaver
Mevenwen Singollo
รายงาน คอม
รายงาน คอม
NooLuck
Blog ด้วย Wordpress.com
Blog ด้วย Wordpress.com
Boonlert Aroonpiboon
รายงานคอม
รายงานคอม
dekthai
Ch09
Ch09
burin rujjanapan
Kompozer manual
Kompozer manual
สมชาย ทุมอาริยะ
Dream weaver8
Dream weaver8
คุณครู ผู้น่ารัก
แผนการสอน เว็บไซต์ ม.5
แผนการสอน เว็บไซต์ ม.5
พงศธร ภักดี
12 หลักการออกแบบเว็บ
12 หลักการออกแบบเว็บ
teaw-sirinapa
คู่มือเขียน Windows 8 apps ด้วย html5 และ java script สำหรับผู้เริ่มต้น (ตัวอ...
คู่มือเขียน Windows 8 apps ด้วย html5 และ java script สำหรับผู้เริ่มต้น (ตัวอ...
Panda Jing
00 ส่วนนำ1
00 ส่วนนำ1
Chalita Vitamilkz
Google site
Google site
สุรินทร์ ดีแก้วเกษ
1.รู้จักโปรแกรมช่วยสร้างเว็บเพจ
1.รู้จักโปรแกรมช่วยสร้างเว็บเพจ
sa_jaimun
คู่มือใช้งาน Mambo ฉบับภาษาไทย
คู่มือใช้งาน Mambo ฉบับภาษาไทย
ธนวัฒน์ แสนสุข
คู่มือ Dream cs3
คู่มือ Dream cs3
Natda Wanatda
Dream weaver cs3
Dream weaver cs3
first351
Power point20079
Power point20079
thongtaw
Power point20078
Power point20078
thongtaw
Power point20077
Power point20077
thongtaw
Power point20076
Power point20076
thongtaw
Power point6
Power point6
thongtaw
Power point5
Power point5
thongtaw
Weitere ähnliche Inhalte
Ähnlich wie Dreamweaver8 new[1]
Dreamweaver
Dreamweaver
Mevenwen Singollo
รายงาน คอม
รายงาน คอม
NooLuck
Blog ด้วย Wordpress.com
Blog ด้วย Wordpress.com
Boonlert Aroonpiboon
รายงานคอม
รายงานคอม
dekthai
Ch09
Ch09
burin rujjanapan
Kompozer manual
Kompozer manual
สมชาย ทุมอาริยะ
Dream weaver8
Dream weaver8
คุณครู ผู้น่ารัก
แผนการสอน เว็บไซต์ ม.5
แผนการสอน เว็บไซต์ ม.5
พงศธร ภักดี
12 หลักการออกแบบเว็บ
12 หลักการออกแบบเว็บ
teaw-sirinapa
คู่มือเขียน Windows 8 apps ด้วย html5 และ java script สำหรับผู้เริ่มต้น (ตัวอ...
คู่มือเขียน Windows 8 apps ด้วย html5 และ java script สำหรับผู้เริ่มต้น (ตัวอ...
Panda Jing
00 ส่วนนำ1
00 ส่วนนำ1
Chalita Vitamilkz
Google site
Google site
สุรินทร์ ดีแก้วเกษ
1.รู้จักโปรแกรมช่วยสร้างเว็บเพจ
1.รู้จักโปรแกรมช่วยสร้างเว็บเพจ
sa_jaimun
คู่มือใช้งาน Mambo ฉบับภาษาไทย
คู่มือใช้งาน Mambo ฉบับภาษาไทย
ธนวัฒน์ แสนสุข
คู่มือ Dream cs3
คู่มือ Dream cs3
Natda Wanatda
Dream weaver cs3
Dream weaver cs3
first351
Ähnlich wie Dreamweaver8 new[1]
(16)
Dreamweaver
Dreamweaver
รายงาน คอม
รายงาน คอม
Blog ด้วย Wordpress.com
Blog ด้วย Wordpress.com
รายงานคอม
รายงานคอม
Ch09
Ch09
Kompozer manual
Kompozer manual
Dream weaver8
Dream weaver8
แผนการสอน เว็บไซต์ ม.5
แผนการสอน เว็บไซต์ ม.5
12 หลักการออกแบบเว็บ
12 หลักการออกแบบเว็บ
คู่มือเขียน Windows 8 apps ด้วย html5 และ java script สำหรับผู้เริ่มต้น (ตัวอ...
คู่มือเขียน Windows 8 apps ด้วย html5 และ java script สำหรับผู้เริ่มต้น (ตัวอ...
00 ส่วนนำ1
00 ส่วนนำ1
Google site
Google site
1.รู้จักโปรแกรมช่วยสร้างเว็บเพจ
1.รู้จักโปรแกรมช่วยสร้างเว็บเพจ
คู่มือใช้งาน Mambo ฉบับภาษาไทย
คู่มือใช้งาน Mambo ฉบับภาษาไทย
คู่มือ Dream cs3
คู่มือ Dream cs3
Dream weaver cs3
Dream weaver cs3
Mehr von thongtaw
Power point20079
Power point20079
thongtaw
Power point20078
Power point20078
thongtaw
Power point20077
Power point20077
thongtaw
Power point20076
Power point20076
thongtaw
Power point6
Power point6
thongtaw
Power point5
Power point5
thongtaw
Wordpress
Wordpress
thongtaw
Power point20074
Power point20074
thongtaw
Power point20073
Power point20073
thongtaw
Power point20072
Power point20072
thongtaw
Power point20071
Power point20071
thongtaw
ตารางวิเคราะห์เนื้อหารายวิชา
ตารางวิเคราะห์เนื้อหารายวิชา
thongtaw
การทำภาพสีให้เป็นแบบฟิล์ม
การทำภาพสีให้เป็นแบบฟิล์ม
thongtaw
ทำตัวอักษรให้เคลื่อนไหวแบบจางหาย ใน gif animation
ทำตัวอักษรให้เคลื่อนไหวแบบจางหาย ใน gif animation
thongtaw
Mehr von thongtaw
(14)
Power point20079
Power point20079
Power point20078
Power point20078
Power point20077
Power point20077
Power point20076
Power point20076
Power point6
Power point6
Power point5
Power point5
Wordpress
Wordpress
Power point20074
Power point20074
Power point20073
Power point20073
Power point20072
Power point20072
Power point20071
Power point20071
ตารางวิเคราะห์เนื้อหารายวิชา
ตารางวิเคราะห์เนื้อหารายวิชา
การทำภาพสีให้เป็นแบบฟิล์ม
การทำภาพสีให้เป็นแบบฟิล์ม
ทำตัวอักษรให้เคลื่อนไหวแบบจางหาย ใน gif animation
ทำตัวอักษรให้เคลื่อนไหวแบบจางหาย ใน gif animation
Dreamweaver8 new[1]
1.
สารบัญ
หัวขอ หนา 1. ความรูเบื้องตนในการสรางเว็บไซต 6 หลักการสรางเว็บไซต 6 อินเทอรเน็ตพืนฐาน้ 6 ความสําคัญของอินเทอรเน็ต 6 ทําความรูจัก HTML 8 คุณสมบัติของเครื่องที่เหมาะกับ Dreamweaver 8 9 การติดตั้ง Dreamweaver 8 9 การเปดใชงาน Dreamweaver 8 12 สวนประกอบของ Dreamweaver 8 13 2. หลักการสรางเว็บไซต 17 เริ่มตนสรางเว็บไซต 17 การจัดการโครงสรางโฟลเดอร 20 การสรางเว็บเพจใหม 20 การเพิ่มและแกไของคประกอบบนหนาเว็บ 26 การใสหัวเรื่องบนหนาเว็บ 27 การใชงานภาษาไทยใน Dreamweaver 8 27 การเพิ่ม-ลบฟอนต 29 3. การปรับแตงขอความบนเว็บเพจ 30 การใสขอความบนหนาเว็บ 30 การตกแตงและจัดรูปแบบขอความ 31 การยอนกลับเพื่อแกไขขอผิดพลาดดวยพาเนล History 32 การบันทึกเว็บเพจ 34 การดูผลลัพธของเว็บเพจบนหนาตางบราวเซอร 36 4. ตกแตงเว็บเพจดวยกราฟก 36 เตรียมภาพเพือใชในเว็บเพจ ่ 36 การปรับแตงรูปภาพ 38 การนําภาพมาแสดงเปนพื้นหลังเว็บเพจ 43 การแกไขรูปภาพ 45 5. การสรางตารางบนเว็บเพจ 46 การสรางตาราง 46 การปรับขนาดชองตาราง การใสขอมูลและภาพในตาราง 48 การเลือกตาราง แถว คอลัมน และเซล 50 การปรับแตงรายละเอียดของตาราง 52 เนรมิตเว็บสวยดวย Dreamweaver หนา 1/96
2.
การจัดเรียงขอความในตาราง
52 การแทรกแถวและคอลัมน 54 การลบแถวและคอลัมน 56 การรวมและการแบงเซล 57 การขยายและลดความกวางเซลในตาราง 58 ปรับความสูงและความกวางของตารางใน Property Inspector 59 การซอนตาราง 62 การกําหนดสีใหกับพื้นตาราง 62 การคัดลอกขอมูลในตาราง 65 6. การเชื่อมโยง 65 การเชื่อมโยงภายในเว็บเพจหนาเดียวกัน 65 การเชื่อมโยงภายในเว็บไซตเดียวกัน 66 การเชื่อมโยงไปเว็บไซตอื่นและเชื่อมโยงดวยอีเมล 68 การเชื่อมโยงดวย Map Link 69 การกําหนดคุณสมบัติของการเชื่อมโยง 70 7. การออกแบบเลยเอาท 71 การใชเลยเอาท 71 โครงสรางของหนาเว็บ 73 การสรางเลยเอาทเทเบิล และเลยเอาทเซล ้ 73 8. เฟรม เลเยอร แฟลช 77 การใชเฟรม 77 การใชเลเยอร 80 การใชแฟลช (Flash) 82 9. การจดทะเบียนเว็บไซต การหาเว็บโฮสติ้ง และการอัพโหลดไฟล 85 การจดทะเบียนเว็บไซต 85 การหาเว็บโฮสติ้ง 88 การอัพโหลดไฟล 90 หนา 2/96 เนรมิตเว็บสวยดวย Dreamweaver
3.
เนรมิตเว็บสวยดวย Dreamweaver
คําอธิบายรายวิชา หลักสูตรเนรมิตเว็บสวยดวย Dreamweaver นี้ จะชวยใหผูเขาอบรมลดภาระการประชาสัมพันธ การเผยแพรขอมูลตางๆ ของ องคการ และลดปริมาณเอกสารภายใน โดยการจัดเก็บไวในรูปแบบของสื่อ อิเล็กทรอนิกส หลักสูตรนี้เหมาะอยางยิ่งสําหรับหนวยงานที่ตองการจัดทําเอกสารไวในรูปแบบของ เอกสารอิเล็กทรอนิกส หรือตองการลดปริมาณกระดาษ เชน ฝายบุคคลตองการสรางเว็บเพื่อแสดงขอมูล ของพนักงานแตละคนไดวาชื่ออะไร อยูแผนกไหน เบอรโทรศัพทอะไร อีเมลอะไร พรอมรูปถาย หรือแจง ขาวสารการจัดฝกอบรม การจัดเก็บคูมือปฏิบัติงาน การจัดเก็บวิดีโอสอนการทํางาน ฝายขายก็สามารถ แสดงภาพสินคา และคุณสมบัติตางๆ ของ สินคาแตละชนิดได ฝายประชาสัมพันธก็สามารถเผยแพร ขาวสารของบริษัทได ไมวาจะเปน ขาวเกี่ยวกับ 5ส การไปทัศนะศึกษาดูโรงงาน หรือวิดีโอการทํา กิจกรรมในวันสําคัญตางๆ ฝายหองสมุดก็สามารถแนะนําหนังสือใหมๆ หรือความรูตางๆ สําหรับ เผยแพรภายในบริษัท ฝายธุรการก็สามารถสรุปรายงานการประชุม ขาวสารจากผูบริหารได ซึ่งจะชวยให องคการ ของทานมีการสื่อสารกันไดอยางมีประสิทธิภาพ จุดประสงค 1. เพื่อใหผูเขาอบรมเขาใจหลักการสรางเว็บไซตสําหรับใชภายในองคกรของตนได 2. เพื่อใหผูเขาอบรมเขาใจการทํางาน และสามารถใชโปรแกรม Dreamweaver ได 3. เพื่อใหผูเขาอบรมนําไฟลประเภทตาง ๆ เชน ไฟลรูปภาพ ไฟลวิดีโอ มาใชในการจัดทําเว็บไซต ไดอยางมีประสิทธิภาพ ความรูพื้นฐานของผูเขาอบรม 1. Microsoft Windows 2. Internet Explorer เนื้อหาหลักสูตร 1. ความรูเบื้องตนในการสรางเว็บไซต หลักการสรางเว็บไซต อินเทอรเน็ตพืนฐาน ้ ความสําคัญของอินเทอรเน็ต ทําความรูจัก HTML คุณสมบัติของเครื่องที่เหมาะกับ Dreamweaver 8 การติดตั้ง Dreamweaver 8 การเปดใชงาน Dreamweaver 8 สวนประกอบของ Dreamweaver 8 เนรมิตเว็บสวยดวย Dreamweaver หนา 3/96
4.
2. หลักการสรางเว็บไซต
เริ่มตนสรางเว็บไซต การจัดการโครงสรางโฟลเดอร การเปดเว็บเพจใหม การเพิ่มและแกไของคประกอบบนหนาเว็บ การใสหัวเรื่องบนหนาเว็บ การใชงานภาษาไทยใน Dreamweaver 8 การเพิ่ม-ลบฟอนต 3. การปรับแตงขอความบนเว็บเพจ การใสขอความบนหนาเว็บ การตกแตงและจัดรูปแบบขอความ การยอนกลับเพื่อแกไขขอผิดพลาดดวยพาเนล History การบันทึกเว็บเพจ การดูผลลัพธของเว็บเพจบนหนาตางบราวเซอร 4. ตกแตงเวบเพจดวยกราฟก ็ เตรียมภาพเพือใชในเว็บเพจ ่ การปรับแตงรูปภาพ การนําภาพมาแสดงเปนพื้นหลังเว็บเพจ การแกไขรูปภาพ 5. การสรางตารางบนเว็บเพจ การสรางตาราง การปรับขนาดชองตาราง การใสขอมูลและภาพในตาราง การเลือกตาราง แถว คอลัมน และเซล การปรับแตงรายละเอียดของตาราง การจัดเรียงขอความในตาราง การแทรกแถวและคอลัมน การลบแถวและคอลัมน การรวมและการแบงเซล การขยายและลดความกวางเซลในตาราง ปรับความสูงและความกวางของตารางใน Property Inspector การซอนตาราง การกําหนดสีใหกับพื้นตาราง การคัดลอกขอมูลในตาราง 6. การเชื่อมโยง การเชื่อมโยงภายในเว็บเพจหนาเดียวกัน การเชื่อมโยงภายในเว็บไซตเดียวกัน หนา 4/96 เนรมิตเว็บสวยดวย Dreamweaver
5.
การเชื่อมโยงไปเว็บไซตอื่นและเชื่อมโยงดวยอีเมล
การเชื่อมโยงดวย Map Link การกําหนดคุณสมบัติของการเชื่อมโยง 7. การออกแบบเลยเอาท การใชเลยเอาท โครงสรางของหนาเว็บ การสรางเลยเอาทเทเบิล และเลยเอาทเซล ้ 8. เฟรม เลเยอร แฟลช การใชเฟรม การใชเลเยอร การใชแฟลช (Flash) 9. การจดทะเบียนเว็บไซต การหาเว็บโฮสติ้ง และการอัพโหลดไฟล การจดทะเบียนเว็บไซต การหาเว็บโฮสติ้ง การอัพโหลดไฟล เนรมิตเว็บสวยดวย Dreamweaver หนา 5/96
6.
ความรูเบื้องตนในการสรางเว็บไซต
หลักการสรางเว็บไซต ในการสรางเว็บไซตในยุคเริ่มแรกนั้น ผูสรางจะตองมีความรูเกี่ยว กับภาษา HTML จึงจะ สามารถสรางเว็บเพจได โดยใชโปรแกรม EditPlus หรือ Notepad ในการเขียนโคดทั้งหมด แลวบันทึก เปนไฟลนามสกุล .html จากนั้นเปดบราวเซอรเพื่อดูผลลัพธของหนาเว็บที่สราง ซึ่งทําใหเสียเวลาในการ ทํางานมาก แตถามี ความรูในภาษา HTML บางจะชวยใหเราสรางสรรคงานไดอยางสวยงาม ตามความ ตองการ ในปจจุบันโปรแกรม Dreamweaver เปนโปรแกรม สรางเอกสารเว็บเพจ ที่ทํางานในลักษณะ HTML Generator คือ โปรแกรมจะสรางรหัสคําสั่ง HTML ใหอัตโนมัติ โดยผูใช ไมตองศึกษาภาษา HTML หรือปอนรหัสคําสั่ง HTML มีลักษณะการทํางานคลายๆ กับการพิมพเอกสารดวย Word Processor โดยอาศัยปุมเครื่องมือ (Toolbars) หรือแถบคําสั่ง (Menu Bar) ควบคุมการทํางาน ชวยให งายตอการใชงาน สะดวก และรวดเร็วในการสรางเว็บเพจ อินเทอรเน็ตพื้นฐาน อินเทอรเน็ต มาจากคําวา Inter Connection Network เปนระบบเครือขายคอมพิวเตอรที่มีขนาด ใหญ เครื่องคอมพิวเตอรทุกเครื่องทั่วโลกสามารถติดตอสื่อสารถึงกันได โดยใชมาตรฐานในการรับสง ขอมูลที่เปนหนึ่งเดียว หรือที่เรียกวา โปรโตคอล (Protocol) ซึ่งโปรโตคอลที่ใชบนระบบเครือขาย อินเทอรเน็ตมีชื่อวา ทีซีพี/ไอพี (TCP/IP : Transmission Control Protocol/Internet Protocol) ลักษณะของระบบอินเทอรเน็ตเปนเสมือนใยแมงมุม ที่ครอบคลุมทั่วโลก ในแตละจุดที่เชื่อมตอ อินเทอรเน็ตนั้น สามารถสื่อสารกันไดหลายเสนทางตามความตองการ โดยไมกําหนดตายตัว และไม จําเปนตองไปตามเสนทางโดยตรง อาจจะผานจุดอื่น ๆ หรือเลือกไปเสนทางอื่นไดหลาย ๆ เสนทาง การ ติดตอสื่อสารผานระบบเครือขายอินเทอรเน็ตนั้นอาจเรียกวา การติดตอสื่อสารแบบไรมิติ หรือ Cyberspace ความสําคัญของอินเทอรเน็ต 1. การประยุกตใชเทคโนโลยีสารสนเทศที่ทันสมัย 2. การติดตอสื่อสารที่สะดวก และรวดเร็ว 3. สามารถใชเปนแหลงคนควาหาขอมูลไดทั่วโลก ระบบเครือขายอินเทอรเน็ตจะทําหนาที่ เสมือนเปนหองสมุดขนาดใหญ และเปนแหลงรวบรวมขอมูลแหลงใหญที่สุดในโลก ในการติดตอสื่อสารบนเครื่อขายอินเทอรเน็ตที่คอมพิวเตอรทั่วโลกเชื่อมโยงถึงกันนั้น มีการ ติดตอสื่อสารอยู 2 แบบคือ แบบสงขอมูลและรับขอมูล และการที่จะสรางเว็บเพจดวย Dreamweaver นั้น เราควรมีความรูเกี่ยวกับศัพททางอินเทอรเน็ตที่เกี่ยวของ เพื่อความเขาใจที่ดี ดังนี้ เครื่องใหบริการ (Server) คือ เครื่องคอมพิวเตอรที่ทําหนาที่สงขอมูล เครื่องรับบริการ (Client) คือ เครื่องคอมพิวเตอรที่ทําหนาที่รับขอมูล เครือขายใยแมงมุม WWW (World Wide Web) หรือเรียกสั้น ๆ วาเว็บ คือ การใหบริการในรูปแบบที่เรียกบราวเซอร เชน Internet Explorer จากเครื่อง หนา 6/96 เนรมิตเว็บสวยดวย Dreamweaver
7.
ของเรา และระบุที่อยู URL
ก็สามารถที่จะเปดเว็บไซตได เชน ถาเราระบุ URLที่ ตองการเปด คือ www.TrainingDD.com ก็เ ปนการเปดดูเ ว็บไซต ของ TrainingDD ดังภาพ เว็บเพจ (Web Page) คือ เอกสารที่เราเปดดูจาก www ซึ่งสวนใหญจะถูกสราง ขึ้นจากภาษาคอมพิวเตอรที่ เรียกวา HTML ประกอบดวยตัวหนังสือ รูปภาพ และมีการเชื่อมตอกับเว็บเพจอื่นๆ เว็บไซต (Web Site) คือ การรวบรวมเว็บเพจไวหลาย ๆ หนา และ กําหนด เว็บเพจหนาหนึ่งใหเปนหนาแรก เรียกวา โฮมเพจ (Home Page) ซึ่งเปนประตู ทางเขาสูเว็บเพจหนาอื่น ๆ ทั้งหมดในเว็บไซตนั้น ๆ เว็บบราวเซอร (Web Browser) คือ โปรแกรมที่ใชเขาสู World Wide Web เปนโปรแกรมที่อยูในเครื่องคอมพิวเตอรลูกขาย (Client) ทําหนาที่ในการ นําเสนอขอมูลเว็บ บราวเซอรที่ไดรับความนิยมในปจจุบัน เชน Internet Explorer ของไมโครซอฟท และ Firefox ซึ่งเปนบราวเซอรโอเพนซอสต เว็บเซิรฟเวอร (Server) คือ ที่เก็บเว็บเพจ โดยใชโปรแกรม WFTP ในการนํา เว็บเพจขึ้นไปไวบนเซิรฟเวอร เรียกวาอัพโหลด (Upload) และนําเว็บเพจลงมา แกไขในเครื่องของเรา เรียกวา ดาวนโหลด (Download) โดเมนเนม (Domain name) คือ การติดตอกันบนอินเทอรเน็ต จะใชไอพี แอดเดรส (IP address)ในการทํางาน แตเปนตัวเลขหลายตัว ทําใหจดจําไดยาก จึงมีการใชโดเมนเนม ซึ่งเปนตัวอักษรที่จดกัน และจะมีชื่อไมซ้ํากันโดยตั้งชื่อให สอดคลองกับหนวยงาน องคกร บริษัท หางราน เพื่อความสะดวกในการจดจํา ชื่อ เชน การไฟฟาฝายผลิตแหงประเทศไทย มีโดเมนเนม คือ egat.co.th เนรมิตเว็บสวยดวย Dreamweaver หนา 7/96
8.
ทําความรูจัก HTML
HTML ยอมาจาก Hyper Text Markup Language ภาษา HTML เปนภาษาที่ใชในวงการ อินเทอรเน็ต เว็บไซตตาง ๆ เขียนขึ้นโดยใชภาษา HTML เปนหลัก ทําใหเราสามารถนําเสนอ ขอความ ภาพ เสียง หรือแมแตวิดีโอ ผานทางอินเทอรเน็ตได คําวา Hyper มีความหมายตรงขามกับคําวา เรียงลําดับ คือ ไมจําเปนตองเรียงลําดับ สามารถ กระโดดขามขั้นตอนได เชน ในหนาเว็บ เราสามารถที่จะคลิกไปยังที่ตาง ๆ ตามลิงค ไดตามตองการ ไม จําเปนตองอานเรียงไปทีละหนา นี่จึงเปนลักษณะสําคัญของ HTML ที่สามารถลิงคไปยังที่ตาง ๆ ได คําวา Text หมายถึงขอความ HTML เปนไฟลตัวอักษร หรือ text file สามารถสรางโดยใช โปรแกรมไดหลายโปรแกรม เชน Notepad, EditPlus หรือแมแต MS Word ก็ได คําวา Markup เปนการแบงขอความออกเปนสวน ๆ โดยมีคําสั่ง หรือ tag บอกใหทราบวาจะให แสดงภาพ หรือ ขอความนั้น ๆ อยางไร เชน ใหตัวอักษรเปนสีตาง ๆ มีลักษณะตัวหนา หรือ ตัวเอียง เปนตน สวนคําวา Language หมายถึง ภาษา เราจัด HTML เปนภาษา ทางคอมพิวเตอรภาษาหนึ่ง แต ใชในการนําเสนอเนื้อหาสาระบนเว็บเทานั้น อยางไรก็ตาม มีบางคนยัง ไมยอมรับวา HTML เปนภาษา ทางคอมพิวเตอรเพราะขาดคุณสมบัติทางดานตัวแปรเพราะ HTML ไมมีการเก็บคา ตัวแปรแตอยางใด โครงสรางของภาษา HTML โครงสรางหลักของภาษา จะมี Tag ที่ประกอบจากวงเล็บ <TAG name> เปนตัวเปดการควบคุม อักษรและปดการควบคุมอักษรดวย </TAG name> โดยมีเครื่องหมาย / อยูใน Tag หมายถึง การปด การควบคุม ภายใน Tag ตาง ๆ จะมี Tag ที่อยูเดี่ยว (Single) กับ Tag ที่ตองประกอบกันเปนชุด (Composite) และใน Tag แตละตัวอาจจะมี Attribute เพื่อขยาย ความหมายหรือเพิ่มการควบคุม Tag ไดอีกดวย นอกจากนั้น HTML สามารถทํา Comment ไดดวยการใช <! และจบดวย !> เพื่อไมตองแปล สัญลักษณที่อยูระหวางเครื่องหมายทั้งสองนี้ Tag ในภาษา HTML ที่สําคัญมีดังตอไปนี้ <HTML> และ </HTML> เปน Tag ที่ใชเพื่อกําหนดวาเอกสารตอไปนี้ เปนเอกสาร HTML เปน Markup Language <HEAD> และ </HEAD> เปน Tag ที่ใชกําหนดสวนหัวของเอกสาร HEAD ไมไดเปนสวนของ เอกสารภายใน แตจะให ขอมูลเกี่ยวกับเอกสารฉบับนี้ โดยจะมี <METHA> Tag เปนตัวกําหนด คุณสมบัติตาง ๆ การกําหนด Key Word ใหรูวาเว็บของเราคืออะไร เปนคําสั่งควบคุมการทํางาน ของเว็บใหทํางานแบบอัตโนมัติได ซึ่งจะเปนประโยชนสําหรับการคนหาเว็บไซตตาง ๆ ที่มีอยูใน โลกนี้ ดวยวิธี Search Engine <TITLE> และ </TITLE> เปนการระบุขอความที่ตองการใหเปนสวนหัวของเอกสาร ที่จะปรากฏ อยูที่ Task Bar ใน Browser โดย Title จะเปนสวนหนึ่งของ Head เชน <title> การไฟฟาฝาย ผลิตแหงประเทศไทย</title> จะปรากฏใหเห็นรายละเอียดอยูดานบน Task Bar ดานบน <BODY> และ </BODY> เปน Tag ที่บอกถึงลักษณะตาง ๆ ของเอกสารฉบับนี้ ซึ่งใน Body จะ มี Attribute ตาง ๆ ไดแก BGCOLOR = "#XXXXXX", TEXT = "# XXXXXX " เปนตน หนา 8/96 เนรมิตเว็บสวยดวย Dreamweaver
9.
ตัวอยาง HTML Code
ตัวอยางผลลัพธที่ได คุณสมบัติของเครื่องทีเหมาะกับ Dreamweaver 8 ่ สําหรับเครื่อง PC CPU ความเร็วไมต่ํากวา 800 MHz ระดับไมต่ํากวา Pentium III หนวยประเมินผลกลาง(CPU) processor หรือเทียบเทา ระบบปฏิบัติการ windows 2000 หรือ Windows XP หนวยความจํา(RAM) 256 MB หากใชงานบน Windows XP ควรใช 512 MB หรือ 1 GB ขึ้นไป พื้นที่วางบนฮารดดิสก อยางนอย 650 MB การติดตั้ง Dreamweaver 8 การติดตั้ง Dreamweaver 8 เริ่มตนดวยการนําแผนโปรแกรมใสในชองอาน CD และเริ่มติดตั้ง ตามขั้นตอนดังตอไปนี้ 1. ดับเบิ้ลคลิกที่ไอคอน Install Dreamweaver 8 ดังภาพ 2. จะปรากฏหนาตางเตรียมการติดตั้งโปรแกรม ดังภาพ เนรมิตเว็บสวยดวย Dreamweaver หนา 9/96
10.
3. คลิกเมาสที่ปุม Next
เพื่อเริ่มขั้นตอนการติดตั้ง ดังภาพ 4. จากนั้นคลิกเมาสเลือก I accept the terms in the license agreement เพื่อรับขอตกลง ในการใชงาน Dreamweaver และคลิก Next เพื่อติดตั้งโปรแกรมตอไป ดังภาพ 5. โปรแกรมจะแสดงไดเร็กทอรี่ที่จะเก็บโปรแกรม Dreamweaver 8 ถาไมตองการ ก็ สามารถคลิกปุม Change เพื่อเปลี่ยนไดเร็กทอรี่ได นอกจากนี้โปรแกรมยังเปดโอกาสให เลือกสราง Shortcut ไวที่แถบ Quick launch และไวที่บนหนาจอ (Desktop) หากไม ตองการไมตองคลิกเลือก แลวคลิกปุม Next ดังภาพ หนา 10/96 เนรมิตเว็บสวยดวย Dreamweaver
11.
6. กําหนดวาจะให Dreamweaver
แกไขไฟลชนิดใดบาง ใหเลือก Select All แลว คลิก Next เพื่อเขาสูขั้นตอนตอไป 7. คลิกเมาสที่ปุม Install เพื่อติดตั้งโปรแกรม 8. โปรแกรมจะเริ่มทําการติดตั้ง ดังภาพ 9. ขั้นตอนสุดทาย เมื่อติดตั้งเสร็จ ใหคลิก Finish ดังภาพ เนรมิตเว็บสวยดวย Dreamweaver หนา 11/96
12.
10. เปนการเสร็จสิ้นขั้นตอนการติดตั้งโปรแกรม
การเปดใชงาน Dreamweaver 8 เมื่อติดตั้ง Dreamweaver 8 เสร็จเรียบรอยแลว เราก็สามารถเปดใชโปรแกรม Dreamweaver 8 โดยปฏิบัติตามขั้นตอนดังตอไปนี้ 1. คลิกเมาสที่ปุม 2. เลือกคําสั่ง All Programs>Macromedia>Macromedia Dreamweaver 8 ดังภาพ 3. คลิกเลือก Macromedia Dreamweaver 8 โปรแกรมจะเปดหนาจอ ดังภาพ 4. หนาจอนี้มีสวนสําคัญ 3 สวน คือ a. สวนที่ 1 Open a Recent Item เปนการเลือกเว็บเพจที่เราสรางไวแลว นํากลับ ขึ้นมาทํางานใหม หนา 12/96 เนรมิตเว็บสวยดวย Dreamweaver
13.
b. สวนที่ 2
Create New เปนการสรางหนาเว็บใหม โดยเราจะตองเลือกรูปแบบ การทํางาน เชน HTML, Cold Fusion, PHP, ASP, JavaScript ตามที่ตองการ c. สวนที่ 3 Create from Samples เปนการสรางหนาเว็บใหม โดยใชหนาเว็บ สําเร็จรูปมาใชเปนแบบเริ่มตน d. ในที่นี้ เราจะสรางเว็บเพจใหม ใหคลิกเลือกใช HTML ในสวนที่ 2 Create New ดังภาพ 5. หนาเอกสารวาง ๆ จะถูกเปดขึ้นสําหรับการสรางเว็บเพจ เราสามารถใสขอความและ รูปภาพ ในหนานี้ได ดังตัวอยางที่เห็นในภาพ สวนประกอบของ Dreamweaver 8 กอนที่เราจะใชงาน Dreamweaver 8 เราควรรูสวนประกอบตาง ๆ ของ Dreamweaver 8 ใน เบื้องตนเพื่อเปนพื้นฐานในการใชงานไดสะดวก 1. เมื่อคลิกเมาสเขาสูโปรแกรม Dreamweaver 8 และคลิกเลือก HTML จะเกิดหนาจอ ดัง ภาพ เนรมิตเว็บสวยดวย Dreamweaver หนา 13/96
14.
2. สวนประกอบที่สําคัญของหนาจอนี้ มีดังนี้
สวนที่ 1 แถบเมนู (Menu bar) เปนแถบที่เก็บคําสั่งทังหมดของโปรแกรม ้ สวนที่ 2 แถบกลุมเครื่องมือ (Insert bar) เปนแถบที่รวมเครื่องมือตาง ๆ ใน การสรางเว็บ สวนที่ 3 แถบเครื่องมือ (Toolbar) รวมปุมเครื่องมือตาง ๆ ที่ใชงานบอย สวนที่ 4 แถบสถานะ (Status bar) แสดงขอมูลเพิ่มเติมเกี่ยวกับงานที่กําลังทํา อยู สวนที่ 5 Property Inspector เปนสวนกําหนดคุณสมบัติขององคประกอบตาง ๆ บนหนาเว็บและ สามารถปรับแตงคาขององคประกอบตาง ๆ ได 3. แถบแสดงสถานะที่ควรรูจัก ดังภาพ สวนที่ 1 สวนไวเลือกแท็ก HTML: จะแสดงโคด HTML ของเว็บเพจ สวนที่ 2 เปนเครื่องมือปรับการแสดงผลเว็บเพจขณะทํางาน: Zoom Tool สําหรับซูมเขาออกเพื่อขยายหนาจอการแสดงผล หรือใช Hand Tool เลื่อนดู หนาเว็บในสวนที่มองไมเห็น สวนที่ 3 แสดงขนาดหนาตางของเว็บเพจ Window Size: ที่เรากําหนด สามารถ เลือกกําหนดเปนขนาดและเปอรเซ็นต สวนที่ 4 แสดงขนาดเอกสารและเวลาในการโหลด: แสดงเวลาโดยประมาณ ที่ใชใน การโหลดหนาเว็บเพจที่เราสราง กลุมเครื่องมือ การเขาถึงกลุมเครื่องมือ ใหคลิกเมาสที่ปุมตัวเลือก ดังภาพ และคลิกเลือกกลุมเครื่องมือที่ตองการได ดังภาพ หนา 14/96 เนรมิตเว็บสวยดวย Dreamweaver
15.
กลุมเครื่องมือที่ใชสําหรับสรางงานเว็บเพจ มีอยู 8
กลุมที่ควรรูจัก ดังนี้ 1. กลุมเครื่องมือ Common: เปนสวนที่รวบรวมเครื่องมื่อตาง ๆ ที่เราใชงานบอย เชน การแทรกภาพ แทรกตาราง เปนตน 2. กลุมเครื่องมือ Layout :เปนสวนที่รวบรวมเครื่องมื่อตาง ๆ ที่ใชจัดองคประกอบบน หนาเว็บ เชน การจัดวางขอความใหอยูในตําแหนงตาง ๆ เปนตน 3. กลุมเครื่องมือ Forms :เปนสวนที่รวบรวมเครื่องมื่อในการสรางแบบฟอรม ปุม ตัวเลือก ลักษณะตาง ๆ เชน check box, radio button เปนตน 4. กลุมเครื่องมือ Text :เปนสวนที่รวบรวมเครื่องมื่อสําหรับการจัดวางตําแหนง และ ปรับแตงตัวอักษรบนหนาเว็บ 5. กลุมเครื่องมือ HTML :เปนสวนที่รวบรวมเครื่องมื่อสําหรับจัดการภาษา HTML บน หนาเว็บ 6. กลุมเครื่องมือ Application :เปนสวนที่รวบรวมเครื่องมื่อสําหรับการสราง Application ติดตอกับฐานขอมูล 7. กลุมเครื่องมือ Flash elements: เปนเครื่องมือสําหรับนําองคประกอบที่สรางจาก โปรแกรม Flash มาวางบนหนาเว็บ 8. กลุมเครื่องมือ Favorites: เราสามารถเลือกเครื่องมือที่ใชบอยจากแตละกลุมเครื่องมือ มาใสในเมนูนี้ไดตามความตองการ เนรมิตเว็บสวยดวย Dreamweaver หนา 15/96
16.
การเปลี่ยนรปแบบการเรียกใชงานกลุมเครื่องมือ
ู ในกลุมเครื่องมือ คําสั่งสุดทาย คือ Show as Tabs ดังภาพ Show as Tabs คือคําสั่งที่ใหแสดงกลุมเครื่องมือแยกเปนแท็บ ๆ เราสามารถคลิกเลือกแท็บ ของเครื่องมือที่ตองการใชงานไดตามความตองการ ดังภาพ การกําหนดคุณสมบัติขององคประกอบตาง ๆ บนหนาเว็บ (Property Inspector) การกําหนดคุณสมบัติขององคประกอบตาง ๆ บนหนาเว็บ สามารถกระทําไดเมื่อเราคลิกเลือก ภาพ ตาราง ตัวหนังสือหรือองคประกอบอื่น ๆ ก็จะปรากฏ Property Inspector ขององคประกอบนั้น ๆ ใหเราสามารถปรับแตงไดตามตองการ กลุมหนาตางพาเนล(Panel Group) โปรแกรม Dreamweaver 8 มีหนาตางพาเนลตาง ๆ ที่เพิ่ม ความสามารถในการจัดการและออกแบบหนาเว็บเพจ ซึ่งแตละพาเนลจะ มีความสามารถในการจัดการหนาเว็บเพจไดไมเหมือนกัน เราเรียกเปด พาเนลไดจากเมนู Window > และเลือกพาเนลที่ตองการ ดังภาพ มุมมองการทํางานใน Dreamweaver ในการสรางงานเว็บเพจ เราสามารถเลือกมุมมองในการทํางาน ได 3 รูปแบบ โดยคลิกที่รูปไอคอน ที่อยู ใน Toolbar แถบเครื่องมือมาตรฐาน ดังนี้ 1. Show Code View คลิกที่ จะปรากฏมุมมอง แสดงโคด HTML ของหนาเว็บเพจที่เรากําลังทํางานอยู ถาเรามีความรูเรื่องภาษา HTML ก็สามารถแกไขโคดไดตามตองการ ดังภาพ หนา 16/96 เนรมิตเว็บสวยดวย Dreamweaver
17.
2. Show Code
and Design View คลิกที่ จะปรากฏมุมมองที่แสดงทั้งโคดและ หนาเว็บเพจที่เรากําลังทํางานอยู สําหรับผูที่ตองการดูโคดไปพรอมกับการออกแบบ หนาจอ ดังภาพ 3. Show Design View คลิกที่ จะแสดงหนาจอที่เราออกแบบเว็บเพจซึ่ง ประกอบดวยภาพ ขอความ ตาราง หรื่ออื่น ๆ โดยไมมีการแสดงโคดตาง ๆ มา เกี่ยวของ ดังภาพ การออกจากโปรแกรม Dreamweaver การออกจากโปรแกรม Dreamweaver ทําไดหลายวิธีดวยกัน ดังนี้ 1. เลือกคําสั่ง File แลวเลือกคําสั่ง File>Exit เปนการสุดสิ้นการใชงานโปรแกรม 2. คลิกเมาสที่ บริเวณมุมบนขวาของหนาจอ 3. คลิกเมาสที่ บริเวณมุมบนซายของหนาจอและเลือกคลิกที่ Close 4. กดที่คียบอรด <Ctrl+Q> หลักการสรางเว็บไซต เริ่มตนสรางเว็บไซต ในการสรางเว็บไซตดวย Dreamweaver 8 กอนอื่นตองมีการกําหนด Site เพื่อใชจัดเก็บหนาเว็บ เพจแตละหนาใหอยูในชื่อเว็บไซตเดียวกัน และจัดการกับไซตที่เราสรางขึ้น ไดตามตองการ เนรมิตเว็บสวยดวย Dreamweaver หนา 17/96
18.
การกําหนดโครงรางของเว็บ
ในการสรางเว็บไซต กอนอื่นควรออกแบบโครงรางคราวๆ ของเว็บไซตนั้นกอน เพื่อไมใหเกิด ความยุงยากที่จะตามมาในภายหลัง เว็บไซตที่ประกอบดวยเว็บเพจหลาย ๆหนา ควรจัดเก็บเว็บเพจไว ในโฟลเดอรตาง ๆ ดังตัวอยาง ถาเราทําเว็บไซตเกี่ยวกับองคกรของเรา ก็อาจสรางตั้งโฟลเดอรชื่อ Organization เปนโฟลเดอร ที่เก็บรวมเว็บเพจและไฟลตาง ๆ ที่ใชไวทั้งหมด โดยโฟลเดอรนี้อาจ ประกอบไปดวยโฟลเดอรยอย ๆ สําหรับเก็บไฟลตาง ๆ ที่ประกอบกันเปนเว็บไซต ดูตัวอยาง ดังภาพ ตัวอยางการจัดโฟลเดอรสําหรับเก็บไฟลตาง ๆ จากภาพ จะเห็นวาหนาโฮมเพจหลัก (index.html) จะตองอยูในโฟลเดอร หลักและไมควรอยูในโฟลเดอรยอยใด ๆ ทั้งสิ้น การสรางเว็บไซตใหมใน Dreamweaver การสรางเว็บไซตใหมใน Dreamweaver ตองกําหนดที่อยูของไฟลตาง ๆ บนเว็บไซตเสียกอน โดยการสราง Site ไฟลทุกไฟลและภาพที่นํามาใช ตองอยูใน Site งานที่กําหนด วิธีการสรางเว็บไซตแบบใชวิซารด สามารถดําเนินการไดตามขั้นตอนดังนี้ 1. เลือกคําสั่ง Site> New Site... เพื่อเขาสูการสรางเว็บไซต ดังภาพ 1. จะปรากฏหนาจอ Site Definition for Unnamed Site1 เพื่อใหตั้งคา ดังตอไปนี้ • หมายเลข 1 คลิกเมาสเลือกที่แท็บ Basic ที่อยูมุมบนซาย • หมายเลข 2 คลิกเมาสเลือก Local Info • หมายเลข 3 ที่ Site name : ใหตั้งชื่อไซตงานตามตองการ ควรใหมีความหมาย เกี่ยวของกับงานหรือกิจกรรมของเว็บไซตนั้น ๆ ในที่นี้ จะตั้งชื่อวา myorganization • หมายเลข 4 ที่ Local root folder : เปนการกําหนดที่อยูของเว็บไซตบนเครื่องที่เรากําลัง ทํางานอยู (ควรสรางโฟลเดอรเก็บงานไวกอนแลว ในที่นี้สรางโฟลเดอรเก็บงาน ชื่อ organization ไวใน ไดรฟ C) และสามารถคลิกเลือกโฟลเดอรไดเลย • หมายเลข 5 กําหนดโฟลเดอรที่จะเก็บภาพ โดยอาจคลิกเลือกโฟลเดอรยอยที่สรางไว แลว ในโฟลเดอรเก็บงาน ในที่นี้ใชชื่อ images หนา 18/96 เนรมิตเว็บสวยดวย Dreamweaver
19.
• หมายเลข 6
ที่ HTTP address : เปนการกําหนดที่อยู บน Server ถายังไมมีที่อยูบน Server ไมตองใส หรือถามีแตไมตองการให Dreamweaver สงขึ้นไปก็ไมตองใส • หมายเลข 7 ที่ Case - sensitive links :ใหคลิกเลือกเครื่องหมายถูก เพื่อตรวจสอบ ตัวอักษร เล็ก-ใหญ ซึ่งจะเห็นขอแตกตาง ถา Server เปนระบบ Unix เพราะ Unix ถือ วาตัวอักษร เล็ก-ใหญ ไมเหมือนกันเปนคนละตัวกัน 2. ใสชื่อ Site name เลือกโฟลเดอร และตั้งคาตาง ๆ ดังภาพ แลวคลิก Ok ที่ปุมดานลาง 3. โปรแกรมจะแสดงชื่อเว็บไซต โฟลเดอรที่ เก็บเว็บไซตที่เรากําลังจะสรางขึ้นใหม และ โฟลเดอรเก็บภาพ ดังภาพ เนรมิตเว็บสวยดวย Dreamweaver หนา 19/96
20.
การจัดการโครงสรางโฟลเดอร
ในการสรางเว็บไซตดวย Dreamweaver 8 เมื่อสรางเว็บไซต หรือ Site งานขึ้นมาแลว โปรแกรม จะสรางโฟลเดอรใหมสําหรับเก็บขอมูลการทํางานในเว็บไซตนั้น ทั้งหมด หรืออีกวิธีหนึ่ง เราสามารถ สรางโฟลเดอร เก็บงานไวที่ไดร C และสรางโฟลเดอรยอย ๆ ในการเก็บงานแตละประเภท และเมื่อใช โปรแกรม Dreamweaver ใหเราเลือกโฟลเดอรที่สรางเตรียมไวสําหรับเก็บเว็บเพจไดตามตองการ การสรางเว็บเพจใหม ในการสรางเว็บเพจใหมที่จะเก็บไวในเว็บไซตของเรา เราสามารถสรางได 2 วิธี ดวยกัน คือ การสรางเว็บเพจใหมในหนาตาง New Document และการสรางเว็บเพจใหมในพาเนล Files • การสรางเว็บเพจใหมในหนาตาง New Document กอนสรางเว็บ ทานตองสรางโครงสราง และกําหนด Site ตามขั้นตอนในเรื่องที่ 1 ใหเรียบรอย เสียกอน จากนั้นจึงสรางหนาเว็บแตละหนา ซึ่งทานสามารถดําเนินการไดตามขั้นตอน ตอไปนี้ 1. ไปที่เมนู File แลวคลิกเลือก New ดังภาพ 2. หนาตาง New Document จะปรากฏขึ้น ใหคลิกเลือกแท็บ General เพื่อเลือกหัวขอการสราง เว็บเพจใหม และในชอง Category คลิกหัวขอ Basic page แลวเลือก HTML ดังภาพ 3. จะเกิดหนาเว็บเพจใหมขึ้น และพรอมที่จะสรางงาน หนา 20/96 เนรมิตเว็บสวยดวย Dreamweaver
21.
4. เมื่อออกแบบเว็บเพจเสร็จแลว จะทําการบันทึก
ใหไปที่ File>save จะเกิดหนาจอขึ้น ดังภาพ 5. ใหตั้งชื่อเว็บเพจ ในที่นี้ เราจะตั้งชื่อเว็บเพจนี้วา index.html แลวคลิก save ชื่อเว็บเพจนี้จะ ปรากฏอยูในเว็บไซตหรือ Site งานที่เราสรางขึ้น ดังภาพ เนรมิตเว็บสวยดวย Dreamweaver หนา 21/96
22.
• การสรางเว็บเพจใหมในพาเนล File
เปนการสรางไฟลงานใหมที่เก็บไวใน Site งานที่งาย สะดวก รวดเร็ว มีขั้นตอน ดังตอไปนี้ 1. คลิกเมาสปุมขวาที่โฟลเดอร Site งาน แลวคลิกเลือก New File 2. จะปรากฏเว็บเพจใหม ชื่อ Untitled (แปลวา ไมมีชื่อ) ที่มีนามสกุล .html พรอมสําหรับการ เปลี่ยนชื่อ ใหตั้งชื่อไฟลงานตามตองการ 3. ดังตัวอยาง สมมุติเว็บเพจนี้เปนหนาหลัก ใช ชื่อวา index.html ก็พิมพชื่อแลวกด Enter การสรางโฟลเดอรใหมในเว็บไซต ในกรณีที่เราตองการสรางโฟลเดอรใหมเพื่อเก็บภาพ หรือแยกจัดเก็บเรื่องตาง ๆ ไมใหปะปนกัน เราจําเปนตองสรางโฟลเดอรใหม การสรางโฟลเดอรใหม สามารถทําไดดังนี้ 1. คลิกเมาสปุมขวาที่โฟลเดอรที่เก็บ Site งาน แลว เลือก New Folder 2. ใหตั้งชื่อโฟลเดอรใหม สมมุติโฟลเดอรนี้ไวเก็บ ข อ มู ล บุ ค คลที่ ใ ช ใ นเว็ บ ไซต นี้ ให ชื่ อ โฟลเดอร ว า personal พิมพชื่อแลวกด Enter จะไดดังภาพ หนา 22/96 เนรมิตเว็บสวยดวย Dreamweaver
23.
การเปลี่ยนชือไฟลและโฟลเดอร
่ การเปลี่ ย นชื่ อ ไฟล แ ละโฟลเดอร สามารถ กระทําไดงาย โดยคลิกเมาสขวาที่ไฟล หรือโฟลเดอรที่ ตองการจะเปลี่ยนชื่อ แลวเลือก Edit >Rename จะเกิด ลักษณะพรอมที่จะเปลี่ยน แลวพิมพชื่อใหมที่ตองการ การลบไฟลและโฟลเดอร การลบไฟลและโฟลเดอร ทําไดโดยคลิกเมาสขวา ที่ ไฟล หรือโฟลเดอรที่ตองการลบ แลวเลือก Edit >Delete ไฟลหรือโฟลเดอรจะถูกลบไป ดังภาพ การเปดเว็บเพจใหม ในการเปดเว็บเพจใหม ใหดับเบิ้ลคลิกไฟลที่สรางไว เพื่อที่จะเขาไปทํางาน เว็บเพจจะถูกเปดหนา วางขึ้นมาใหเราออกแบบการทํางาน เนรมิตเว็บสวยดวย Dreamweaver หนา 23/96
24.
กอนที่จะเริ่มตนการออกแบบทํางาน เราควรที่จะกําหนดรายละเอียดของหนาเว็บเสียกอน โดย คลิกเมาสขวาที่หนาเว็บ
แลวเลือก Page Properties เพื่อตั้งคาตาง ๆ Page Properties จะแบงออกเปน 5 หมวด โดยในหมวดแรก คือ 1. หมวด Appearance เปนการกําหนดสวนประกอบตาง ๆ บนหนาเว็บ ดังภาพ สวนประกอบตาง ๆ ในหนานี้ มีการกําหนดคา ดังนี้ หมายเลข 1 Page font ใหเลือกรูปแบบตัวอักษรที่จะใชในเว็บเพจ หมายเลข 2 Size กําหนดขนาดของตัวอักษร หมายเลข 3 Text color กําหนดสีของตัวอักษร หมายเลข 4 Background color กําหนดสีพื้นหลังของหนาเว็บเพจ หมายเลข 5 Background image กําหนดภาพที่เปนพื้นหลังของหนาเว็บเพจ หมายเลข 6 Repeat กําหนดใหเลือกภาพ Background วาใหกระทําซ้ําอยางไร (no-repeat ไมซ้ํา, repeat เปนแบบปูเต็มพื้นที่, repeat-x ปูไปตามแนวนอน, repeat-y ปูไปตามแนวตั้ง) หมายเลข 7 Left margin กําหนดระยะขอบซายของหนาเว็บ หมายเลข 8 Right margin กําหนดระยะขอบขวาของหนาเว็บ หมายเลข 9 Top margin กําหนดระยะขอบบนของหนาเว็บ หมายเลข 10 Bottom margin กําหนดระยะขอบลางของหนาเว็บ 2. หมวด 2 Links เปนการกําหนดคุณสมบัติของ Links มีรายละเอียด ดังนี้ หมายเลข 1 Link font กําหนดตัวอักษรของลิงค หมายเลข 2 Size กําหนดขนาดตัวอักษรของลิงค หมายเลข 3 Link color กําหนดสีใหกับลิงค หนา 24/96 เนรมิตเว็บสวยดวย Dreamweaver
25.
หมายเลข 4 Rollover
links การกําหนดสีเมื่อเมาสลากผาน หมายเลข 5 Visited links กําหนดสีมื่อไปที่ Link นี้แลว หมายเลข 6 Active links การกําหนดสี Link ที่ใชงานได หมายเลข 7 Underline style กําหนดรูปแบบการขีดเสนใตใหกับลิงค 3. หมวด 3 Headings เปนการกําหนดคุณสมบัติหัวขอของเว็บเพจ มีรายละเอียด ดังนี้ หมายเลข 1 Heading font กําหนดรูปแบบตัวอักษรหัวขอที่จะปรากฏบนหนาเว็บ หมายเลข 2 Heading 1-6 กําหนดขนาดตัวอักษรที่ใชสรางหัวขอบนหนาเว็บ 4. หมวด 4 Title/Encoding เปนการกําหนดชื่อใหสวนไตเติ้ลและกําหนดชุดตัวอักษรที่ใชของ เว็บเพจ มีรายละเอียด ดังนี้ หมายเลข 1 Title กําหนดสวนไตเติ้ลหรือชื่อหัวเรื่องใหเว็บเพจ หมายเลข 2 Document type กําหนดประเภทของเว็บเพจ หมายเลข 3 Encoding กําหนดรูปแบบภาษาของตัวอักษรที่ใชในเว็บเพจ สําหรับ การแปลงตัวอักษรเพื่อเปนภาษามาตรฐาน โดยใหเลือก Thai (Windows) ถา ตองการใชภาษาไทย 5. หมวด 5 Tracing Image เปนการกําหนดคุณสมบัติของรูปที่ใชเปนแบบในการสรางหนา เว็บเพจ มีรายละเอียด ดังนี้ เนรมิตเว็บสวยดวย Dreamweaver หนา 25/96
26.
หมายเลข 1 Tracing
Image ใหเลือกไฟลภาพที่จะใช หมายเลข 2 Image Transparency กําหนดคาความโปรงใสของภาพที่จะแสดงบนหนา เว็บเพจ การเพิ่มและแกไของคประกอบบนหนาเว็บ ในการเพิ่มและปรับแตงองคประกอบบนหนาเว็บ สามารถทําไดงาย ๆ ไมวาจะพิ่มตาราง รูปภาพ หรือแบบฟอรมตาง ๆ ในโปรแกรม Dreamweaver จะเรียกองคประกอบเหลานี้วา Object (ออบเจ็กต) โดยเราสามารถสรางออบเจ็กตนี้ได โดยอาศัยกลุม เครื่องมือตาง ๆ ที่ไดกลาวไว แลวในตอนตน ดังตัวอยาง ถาเราตองการนําภาพเขา ในโปรแกรม ใหไปที่เครื่องมือรูป ซึ่งอยูในกลุม Common เมื่อ เลือ กภาพที่ ตอ งการไดแ ลว ให ค ลิก แทรกภาพเข า โปรแกรม ภาพก็จะปรากฏในหนาเว็บ ณ ตําแหนงที่ เคอรเซอรอยู เมื่อนําภาพเขาโปรแกรมไดแลว ถ า เราจะจั ดการปรั บ แต ง ภาพ หรื อ ออบเจ็กต ใหคลิกที่ภาพนั้น ๆ จะเกิอ จุดดํา 3 จุดรอบภาพ และเกิด Property Inspector ของภาพดานลาง เพื่อให กําหนดรายละเอียดตามตองการ สําหรับการพิมพตัวหนังสือ สามารถพิมพลงบนหนาเว็บไดเลย และปรับแตงตัวหนังสือ กําหนด ขนาด กําหนดสีและอื่น ๆ ไดที่ Properties ดานลาง หนา 26/96 เนรมิตเว็บสวยดวย Dreamweaver
27.
การใสหัวเรืองบนหนาเว็บ
่ การใสหัวเรื่องบนหนาเว็บ เมื่อเราเปดเว็บไซตขึ้นมา ในชอง Title บน Toolbar เราสามารถพิมพ ชื่อหัวเรื่องที่ตองการลงไปไดเลย ตอจากนั้นเลือกคําสั่ง File>Save เพื่อบันทึก แลวกดปุม F12 ดู ชื่อหัวเรื่องของหนาเว็บบน หนาตางบราวเซอร ซึ่งจะปรากฏชื่อตามที่เราตั้งไว ดังภาพ การใชงานภาษาไทยใน Dreamweaver 8 การใชงานภาษาไทยใน Dreamweaver 8 ซึ่งในเวอรชั่นนี้ เราสามารถพิมพภาษาไทย ในหนาตาง Design View ได เ ลยและข อ ความภาษาไทยก็ จ ะปรากฏในหน า ต า งบราวเซอร ทั น ที สําหรับผูที่ตองการเขาไปแกไขโคด HTML ในหนาตาง Code View จะเห็นไดวาขอความที่เรา พิมพที่ Design View จะแสดงเปนเลขรหัส ในหนาตาง Code View ดังภาพ เนรมิตเว็บสวยดวย Dreamweaver หนา 27/96
28.
ถาเราตองการจะอานโคดออก เปนภาษาไทยเหมือนที่เราพิมพที่ Design
View ตองกําหนดให ภาษาที่ใชในเว็บเปน Thai (Windows) โดยเลือกเมนูคาสั่ง Modify>Page Properties หรือคลิกขวาที่ ํ หนาเว็บ แลวเลือก Page Properties ดังภาพ ตอไป ใหเลือกหัวขอ Title/Encoding ที่ชอง Encoding เลือก Thai (Windows) ดังภาพ เมื่อเลือก Thai (Windows) แลว โคดที่เปนรหัสจะแสดงเปนภาษาไทยเหมือนที่เราพิมพ ที่ หนาตาง Design View ดังภาพ หนา 28/96 เนรมิตเว็บสวยดวย Dreamweaver
29.
การเพิ่ม-ลบฟอนต
ก า ร เ พิ่ ม -ล บ ฟ อ น ต เ พื่ อ ใ ช ง า น ใ น Dreamweaver ทําไดโดย เลือกคําสั่งที่เมนูบาร Text>Font>Edit Font List ดังภาพ ขั้นตอนการเพิ่มฟอนต มีรายละเอียดดังนี้ ดู ภาพประกอบ 1. หมายเลข 1 Font list เปนฟอนตที่มีอยูแลว 2. หมายเลข 2 Available fonts เลือกฟอนตจาก windows ที่ตองการเพิ่ม ดังตัวอยาง ถาตองการ เลือกฟอนต ชื่อ AngsanaUPC ใหคลิกเลือก 3. หมายเลข 3 เมื่อเลือกฟอนตไดแลว ใหคลิกปุม เพื่อสงมาที่ชองหมายเลข 4 4. หมายเลข 4 Chosen fonts เปนชองที่วางฟอนตที่ถูกเลือกเพิ่มขึ้นมา 5. หมายเลข 5 สามารถจัดลําดับของฟอนตที่ใชบอย ๆ ใหเลื่อนขึ้นมาอยูลําดับแรก ๆ ได โดยใช ลูกศรเลื่อนขึ้น หรือลูกศรเลื่อนลงเพื่อตองการจัดใหฟอนตเลื่อนลงจากตําแหนงเดิม 6. หมายเลข 6 เมื่อเลือกฟอนตไดตามตองการแลว ใหกดปุม OK • การลบฟอนต การลบฟอนต ทําไดโดย เลือกคําสั่งที่เมนูบาร Text>Font>Edit Font List แลวเลือกฟอนตที่ ตองการลบในชอง Font list และคลิกปุม แลวคลิกปุม OK เนรมิตเว็บสวยดวย Dreamweaver หนา 29/96
30.
การปรับแตงขอความบนเว็บเพจ
การใสขอความบนหนาเว็บ การใสขอความบนหนาเว็บเพจ กระทําไดงาย ๆ โดยการพิมพบนหนาเว็บเพจไดเลย หรือจะ copy ขอความมาจากไฟล word หรือจากโปรแกรมอื่น ๆ แลวนํามาวางบนหนาเว็บเพจก็ได ดังภาพ จากตัวอยาง ถาเราตองการขึ้นยอหนาใหม ตรงขอความ "ตอมา ไดมีการจัดตั้ง...ใหเราตั้งเคอร เซอรหนาขอความที่ตองการจะขึ้นยอหนาใหมแลวกด Enter ที่แปนพิมพ ขอความนั้น จะขึ้นยอหนาใหม ให และเกิดการแทรกบรรทัดวางขึ้น ดังภาพ ถาเราไมตองการขึ้นยอหนาใหม แตตองการขึ้นบรรทัดใหม ใหกด <Shift + Enter> หรือคลิก เมาสที่ปุม ในกลุมเครื่องมือ Text จะเปนการแทรก Line Break ในขอความตรงตําแหนงที่เรา ตองการ ดังตัวอยาง ถาเราตองการขึ้นบรรทัดใหม ตรงขอความ "ตอมา ไดมีการจัดตั้ง...ใหเราตั้งเคอรเซ อรหนาขอความที่ตองการจะขึ้นบรรทัดใหมแลวกด <Shift + Enter> ที่แปนพิมพ ก็จะได ดังภาพ ตอไป ถาเราตองการจะยอหนา ใหคลิกเมาสที่ สามเหลี่ยมเล็ก ๆ ขางปุม BR ดังภาพ หนา 30/96 เนรมิตเว็บสวยดวย Dreamweaver
31.
ซึ่งอยูในกลุมเครื่องมือ Text และเลือก
Non-Breaking Space ตอไป เราตองการยอหนา บรรทัดแรก ใหเราตั้งเคอรเซอร ที่หนาคําวา "ศูนย... และบรรทัดที่ 5 คําวา "ตอมา...ใหคลิกที่รูป ดังภาพ โดยคลิกติด ๆ กัน จนกวาจะยอหนาเขา ไปไดตามตองการ ดังภาพ การตกแตงและจัดรูปแบบขอความ กอนที่จะตกแตงและจัดรูปแบบขอความ เราตองเลือกขอความทั้งหมดกอน โดยเลือกคําสั่ง Edit >Select All หรือคลิกเลือกที่แท็ก <body> จะไดผลลัพธ ดังภาพ เมื่อเลือกขอความแลว เราปรับแตงและจัดรูปแบบขอความ โดย Property Inspector หรือใชกลุม เครื่องมือ Text ที่แถบ Insert Bar ในที่นี้ ใหไปที่ Window และเลือก Properties โปรแกรมจะเปด เครื่องมือ Properties เราก็สามารถตั้งคาฟอนต ขนาด สี ตําแหนงของขัอความ ดังภาพ เมื่อเปดหนาจอเครื่องมือ ที่จะใชปรับแตงตัวหนังสือ หรือขอความ ขึ้น เราสามารถกําหนดขนาด ประเภทตัวหนังสือหรือฟอนต สีของตัวอักษร ตําแหนง และอื่น ๆ สมมุติวา ตองการใหขอความเปน ตัวสี เนรมิตเว็บสวยดวย Dreamweaver หนา 31/96
32.
น้ําเงิน เอียง ขอความตําแหนงชิดซายของเว็บเพจ
และหัวขอเปนตัวหนา สามารถกระทําไดโดยใช เครื่องมือดังที่กลาวมาแลว ขางตน จะไดผลลัพธ ดังภาพ เครื่องมือที่ใชจัดตําแหนงและตกแตงขอความ ที่ควรรู มีดังนี้ การจัดตําแหนงขอความโดยใชปุม 1. จัดชิดซายของเว็บเพจ 2. จัดอยูกึ่งกลาง 3. จัดชิดขวา 4. จัดใหขอความอยูเต็มบรรทัด การจัดยอหนาโดยใชปุม 5. คลิกที่ปุม Text Indent เพื่อจัดยอหนาของขอความใหเขาไปมากนอยไดตาม ตองการ 6. ถาจัดยอหนาเขาไปมากเกินไป ก็สามารถคลิกปุม Text Outdent เพื่อยกเลิกยอหนา ใหไดระยะหางตามตองการ การใส Bullet และตัวเลขกํากับในแตละบรรทัด 7. ใชจัดลําดับเนื้อหาในแตละบรรทัดดวย Bullet หรือสัญลักษณรูปแบบ ตาง ๆ 8. ใชจัดลําดับเนื้อหาในแตละบรรทัดดวยตัวเลข การยอนกลับเพื่อแกไขขอผิดพลาดดวยพาเนล History ในการทํางานออกแบบเว็บเพจ เมื่อทําไปเรื่อย ๆ อาจเกิดขอผิดพลาดได เราสามารถยอนกลับไป แกไขขอผิดพลาดได โดยไปที่เมนูบาร Window>History หรือกดคีย < Shift+F10> ดังภาพ หนา 32/96 เนรมิตเว็บสวยดวย Dreamweaver
33.
เมื่อเปดพาเนล History จะเห็นบันทึกการทํางานทุกขั้นตอน
โดยขั้นตอนลาสุด จะเรียงอยูลําดับ บนสุดของรายการ ขั้นตอนกอนหนานี้จะอยูลาง ๆ ดังภาพ การยอนกลับการทํางานหลาย ๆ ขั้นดวยพาเนลนี้ เราทําไดโดย คลิกเลื่อนแถบ ไปยังขั้นตอนที่ เราตองการยอนกลับไป โดยจะเลื่อนไปทีละขั้นตอน หรือหลายขั้นตอนได ดังภาพ การทําซ้ําขั้นตอนการทํางาน เราสามารถสั่งใหทําซ้ําขั้นตอนการทํางานที่เราตองการจะใหทําซ้ํา ในพาเนล History ได โดย 1. คลิกเลือกขั้นตอนที่ตองการใหซ้ํา เนรมิตเว็บสวยดวย Dreamweaver หนา 33/96
34.
2. คลิกที่ปุม
ที่อยูมุมลางดานซายมือ ดังภาพ การบันทึกเว็บเพจ เมื่อเราออกแบบเว็บเพจไดตามตองการแลว การที่จะบันทึกงาน ใหเลือกคําสั่ง File>Save As เพื่อ บันทึกไฟลในชื่อใหม ดังภาพ จากนั้นใหทําตามขั้นตอน ดังนี้ 1. เลือกโฟลเดอรที่เก็บไฟลงาน 2. ใหตั้งชื่อไฟล โดยใสนามสกุลเปน .html 3. คลิกปุม Save เพื่อสั่งบันทึกไฟล หนา 34/96 เนรมิตเว็บสวยดวย Dreamweaver
35.
นอกจากนี้ ยังมีรูปแบบในการบันทึกเว็บเพจทีควรรูอีก 4
วิธี คือ ่ • วิธีที่ 1 เลือกคําสั่ง File>Save เพื่อบันทึกไฟลในชื่อเดิม • วิธีที่ 2 เลือกคําสั่ง File>Save All บันทึกไฟลทั้งหมดที่มการเปลี่ยนแปลงแกไข ี • วิธีที่ 3 เลือกคําสั่ง File>Save to Remote Server ทําการบันทึกเว็บเพจและอัพโหลดไปยัง เซิรฟเวอร • วิธีที่ 4 คลิกเลือกรูป นี้ ในกลุมเครื่องมือ Standard Bar บน Insert Bar เพื่อบันทึกไฟลเว็บ เพจใหมโดยตั้งชื่อใหมตามที่เราตองการ หรือบันทึกไฟลเว็บเพจในชื่อเดิมไดอยางรวดเร็ว โดย ดําเนินการไดดงนี้ 1. คลิกเมาสขวาที่แถบกลุมเครื่องมือ Document และเลือกคําสั่ง Standard ดังภาพ 2. คลิกเมาสบันทึกไฟลเว็บเพจที่เรากําลังทํางานอยู ดังภาพ แตถาเราออกแบบงานเว็บเพจเสร็จแลว และยังไมไดมีการบันทึก หรือมีการแกไข เปลี่ยนแปลงและยังไมไดบันทึก โปรแกรม Dreamweaver จะมีเครื่องหมาย * ปรากฏเตือนอยูที่ มุมบนขวาของชื่อไฟล ดังภาพ เนรมิตเว็บสวยดวย Dreamweaver หนา 35/96
36.
การดูผลลัพธของเว็บเพจบนหนาตางบราวเซอร
เมื่อเราบันทึกเว็บเพจเสร็จเรียบรอยแลว และ ตองการที่จะดูเว็บเพจที่เราออกแบบวาเวลาแสดงผล บนหนาตางบราวเซอรจะมีผลตามที่ตองการหรือไม อยางไร เราสามารถดําเนินการได 3 วิธีการ ดังนี้ วิธีที่ 1 กดปุม < F12 > ที่คียบอรด วิธีที่ 2 ดับเบิ้ลคลิกที่ไฟล html ที่เราบันทึกเก็บไวในเครืองคอมพิวเตอร ่ วิธีที่ 3 เลือกคําสั่ง File>Preview in Browser>IEexplore ดังภาพ หลังจากนั้นผลลัพธ จะปรากฏบนหนาจอในหนาตางบราวเซอร ดังภาพ ตกแตงเว็บเพจดวยกราฟก เตรียมภาพเพื่อใชในเว็บเพจ ในการออกแบบเว็บเพจ นอกจากจะมีขอความแลว ภาพนับวาเปนสิ่งสําคัญที่จะชวยทําใหเว็บ เพจนั้น ๆ มีความนาสนใจมากยิ่งขึ้น หนา 36/96 เนรมิตเว็บสวยดวย Dreamweaver
Jetzt herunterladen