การสรางเวบ ดวยโปรแกรม Macromedia Dreamweaver 8

Macromedia Dreamweaver 8  เปนอกโปรแกรมหนง ทมการออกแบบ มาเพอทจะใชในการจดการกบเอกสารทใชสำาหรบ การสรางเวบเพจ  ซงในสมยกอนหากจะม การสรางเวบเพจ ขนแตละเวบเพจนน ตองใหผทมความร ในภาษา HTML มาเขยนรหสค ำาส ง (Code) ให แต ในป จจ บน โปรแกรม Macromedia Dreamweaver 8  สามารถทจะสรางรหสคำาสงใหก บผใชโดยอตโนมต  ซ งผใชไมจ ำาเปนตองมความรด านของภาษา HTML เนองจากโปรแกรม Macromedia Dreamweaver 8 นนจะมลกษณะ การทำางานทคลายๆ กบโปรแกรมพมพเอกสารทเราเคยใชและรจกกนด  ซ งจะมเคร องมอและแถบคำาสงใหเราเลอกใชได เหมอนกบ Word Processor  จงชวยใหสามารถเวบเพจดวยความสะดวก และรวดเรว

จดเดนของโปรแกรม  Macromedia Dreamweaver 8 1. โปรแกรมจะทำาการแปลงรหสใหเปนภาษา HTML โดยอตโนมตดงนน ผใชทไมมความร ดาน

นกสามารถทำาได 2. มแถบเครองมอ หรอแถบคำาสง ทใชในการควบคมการทำางาน แบงออกเปนหมวดหมจงชวยใน

การทำางานทดขน และรวดเรวยงขน 3. สนบสนนเวบเพจทเปนภาษาไทยไดด 4. มคณสมบตทสามารถจดการกบรปภาพเคลอนไหว โดยไมตองอาศย Plugin 5. สามารถเรยกใชตารางจากภายนอก โดยการอมพอรทจาก Text File 6. เปนโปรแกรมทสามารถสนบสนนการใชงาน CSS (Cadcading Style Sheet) 7. มความสามารถในการทำา Drop Down Menu  รวมไปถงการทำาใหรปภาพเปลยนเมอ

นำาเมาสไปช เปนตน

ความสามารถของ Macromedia Dreamweaver 8

1

สรางเวบเพจภาษาไทย รจกฟงกชนตาง ๆ ของ

Macromedia Dreamweaver

การกำาหนดคา เพอใชในการสรางเวบเพจ ภาษาไทยโปรแกรม Macromedia Dreamweaver 8 มการเขยนขนมา เพอความสะดวก

สบาย ในการสรางเวบเพจ เนองจากมวธการใชทเหมอนกบ โปรแกรม Microsoft Office ม เมนตางๆ ใหผใชเลอกใชจากนน โปรแกรมจะทำาการแปลงใหเปน ภาษา HTML ซงเปนภาษาในการเ ข ย น เ ว บ เ พ จ ใ ห เ อ ง โ ด ย อ ต โ น ม ต

โปรแกรม Macromedia Dreamweaver 8 นนถกออกแบบมา ใหใชไดก บเวบเพจทกภาษา และสามารถทจะเล อกใชฟอนต ไดตามทมในระบบปฏบต การ ซ ง โปรแกรม Macromedia Dreamweaver 8 จะมวธในการเขารหสทเปนตวอกษรแบบมาตรฐานเทานน คอ (Unicode) ซงจะทำาใหมความสะดวกสบายยงขน ทไมตองตดตงโปรแกรมเพมเตมเหมอนกบเวอรชนเกาๆ แตในการทจะใชกบภาษาอะไร ตองมการกำาหนดรหส (Encoding) ใหกบโ ป ร แ ก ร ม ด ว ย เ พ อ ท จ ะ ไ ด ไ ม ม ป ญ ห า เ ก ด ข น ภ า ย ห ล ง

เนองจากภาษาไทยนน มตวอกษร ทคอนขางจะละเอยดออนมาก จงทำาใหเกดปญหาบางครง จะอานภาษาไทยไมได ดงนน กอนทจะ ลงมอในการสรางเวบเพจ ดวยโปรแกรม Macromedia Dreamweaver 8 นนตองมการกำาหนดรหส (Encoding) เพอใหเวบเพจนนสามารถอาน ภาษาไทยได ซงมวธ ในการทจะกำาหนดเพอให Macromedia Dreamweaver 8 อานภาษาไทยไดดงน

เลอกคำาสงทเมนบาโดยเลอก Modify จากนนเลอก Page Properties (หรอสามารถเลอกไดทปม Page Properties ทอยบนพาแนล Properties Inspector)

จากนนใหเลอกทหมวดของ Title/Encoding ในชอง Encoding นนใหเลอกท  Thai (Windows) จากนนคลก OK

2

 

รจกฟงกชนตาง ๆ ของ Macromedia Dreamweaver สำาหรบโปรแกรม Macromedia Dreamweaver เปน โปรแกรมเขยนเวบ ท

ออกแบบมาเพอ ชวยจดการกบ เวบเพจ โดยผใชไมจำาเปนตองมความร ในภาษา HTML ซงเปนภาษาสำาหรบสรางเวบเพจ โดยตรง ดงนน โปรแกรม Macromedia Dreamweaver  จงมฟงกชนตางๆ มากมายซงแตละ ฟงกชนกจะ แสดงผลในลกษณะของ วนโดวส (WINDOWS) หรอแถบคำาสง (PALETTE) ตวอยางของ ฟงกชน เชน (BEHAVIOR) เปน ฟงกชนสำาหรบใชในการควบคม การใชสครปตตางๆ เปนตน ในการทจะเลอกใชฟงกชน ผใชตองทำาความเขาใจ และเรยนรวธในการควบคมการทำางาน ของฟงกชนตางๆ ใหเขาใจเสยกอน และวธเรยกใชฟงกชนตางๆ ของโปรแกรม Macromedia Dreamweaver กสามารถทำาไดดงน เลอกคำาสงทเมนบาโดยคลกเลอกเมน Window กจะปรากฏ รายการของคำาสงควบคม หรอฟงกชนตางๆ ใหเลอก

สำาหรบฟงกชน ทเปนมาตรฐานในการ ทำางานกบโปรแกรม Macromedia Dreamweaver ทมการใช งานบอยๆ กมอย 3 ฟงกชน ไดแก

ฟงกชน Insert จะเปนฟงกชนทใชสำาหรบควบคมเกยวกบวตถตางๆ เชน เลเยอร, รปภาพ ซงแถบเครองมอนจะประกอบไปดวย ชดเครองมอตางๆ คอ Characters , Common, Form, Frames, head, Invisible

ฟงกชน Properties เปนฟงกชนลกษณะตางๆ เชน ใชในการกำาหนดคาของขอความในเวบ สของตวหนงสอ รปภาพ ตาราง เปนตน

ฟงกชน Launcher เปนฟงกชนสำาหรบใชในการจดการหรอควบคมในสวนของ สครปต (Behaviors)

3

4

วธ เซตให โปรแกรม Macromedia Dreamweaver 8 เปดขนมาเปน ภาษาไทย1.เขาไปท Edit->Preferences ดงรป (หรอกด crl+u)

5

2.เลอก NEW Document แลวเปลนคาตางๆ ใหเปน ดง

คำาสงพนฐานทควรทราบในการเรมสรางเวบเพจ การกำาหนดตำาแหนงทเกบเวบไซต คำาสงในการสราง เปด บนทกเวบไซต ฯลฯการเรมใชงานโปรแกรม Dreamweaver 8   เมอเขาสโปรแกรม Dreamweaver 8 � จะปรากฏกรอบ Workspace Setup ดงรป ใหคลกเลอก Designer  แลวคลก OK เพอเขาสหนาจอการออกแบบของโปรแกรม Macromedia Dreamweaver 8  

 

6

จากนนจะปรากฎหนาจอ Start Page ซงเปนเครองมอสำาหรบเรมตนการทำางาน  โดยตวเลอกจะแบงเปน 3 กลมดงรป สำาหรบการสรางเวบเพจเปลาแบบพนฐาน ใหเลอกกลม Create New แลวคลกท HTML

สวนประกอบของโปรแกรม Dreamweaver 8  

แถบชอเรอง (Title Bar) แสดงชอแฟมขอมลทกำาลงใชงานอย แถบคำาสง (Menu Bar) เปนสวนทเกบคำาสงตาง ๆ ทใชงานในโปรแกรม

Dreamweaver 8

7

แถบ Document Tool Bar เปนสวนทใชในการจดการกบเวบเพจ ณ ขณะนน เชนการเปลยนมมมองในการดหนาเวบเพจ

แถบ Insert Bar เปนกลมเครองมอทใชสรางองคประกอบตาง ๆ ในเวบเพจ ซงประกอบดวยชดเครองมอ 8 ชดดวยกน

พนทออกแบบ (Document Window) เปนสวนทใชสำาหรบใสเนอหาและจดองคประกอบของเวบเพจ โดยประกอบดวยมมมองการทำางาน 3 รปแบบดวยกนคอ Design, Code และ Code and Design

แถบสถานะ (Status Bar) เปนสวนทแสดงสถานะของการใชงานโปรแกรม ณ ขณะนน หนาตาง Properties เปนสวนของคำาสงทใชในการกำาหนดคณสมบตขององคประกอบตาง ๆ ทเราตองการเปลยนแปลงหรอตกแตง

Panel Group เปนกลมของแผงควบคม ทใชแทนคำาสงและตดตอกบฐานขอมล

มมมองตาง ๆ ของ Document Windows   ในการออกแบบหนาเวบเพจดวยโปรแกรม Dreamweaver 8 เราสามารถเลอกรปแบบหรอมมมองของหนาตางเวบเพจได 3 รปแบบดวยกนคอ  Show Code View    ใชแสดงหนาจอออกแบบเปนภาษา HTML Show Code and Design View   ใชแสดงหนาจอออกแบบเปนภาษา HTML  และหนาจอออกแบบจรง Show Design View   ใชแสดงหนาจอออกแบบเปนหนาจอออกแบบจรง

การซอนและแสดงเครองมอออกแบบ ในการออกแบบเวบเพจนน บางครงตองการใชเครองมอเพมเตมเพอใชในการออกแบบ แตบางครงกตองการซอนเครองมอตาง ๆ ไวชวขณะเพอดหนาเวบเพจทออกแบบไวใหชดเจน การซอนและแสดงเครองมอออกแบบในโปรแกรม Dreamweaver 8 สามารถทำาไดหลายวธดวยกน ดงนคอ วธท 1 โดยการคลกทคำาสง Windows แลวคลกคำาสงทตองการใชงาน วธท 2 โดยการคลกทปมลกศรเลก ๆ หนาแถบ Panel

8

วธท 3 กดแปนพมพ <F4> เพอซอนหรอแสดงเครองมอทงหมด

การกำาหนดโฟลเดอรเพอเกบเวบไซตทสรางใหม การเรมตนสรางเวบไซตใหมในโปรแกรม Dreamweaver 8 จะตองเรมตนจากการตงชอเวบไซต และกำาหนดตำาแหนง เชน ไดรฟ และโฟลเดอร ทจะใชเกบไฟลตาง ๆ ของเวบไซตทเราจะออกแบบ ซงทำาไดตามขนตอนดงนคอ

1. คลกคำาสง Site>New Site… 2. จะปรากฏกรอบ Site Definition ขนมา ใหพมพชอเวบไซตทตองการ แลวคลกปม

Next 3. ใหคลกเลอก No, I do not want…….. แลวคลกปม Next 4. ระบชอไดรฟและโฟลเดอรทจะใชเกบขอมลของเวบไซตทจะทำาการออกแบบ จากนนคลกปม

Next 5. คลกทชอง How do you connect to your remote server ?

แลวคลกตวเลอก None จากนนใหคลกทปม Next 6. จะแสดงกรอบใหเหนวาไดกำาหนดเวบไซตใหมเปนทเรยบรอยแลว คลกทปม Done เพอเรม

ตนการออกแบบเวบเพจ 7. จะปรากฏชอของเวบไซต พรอมทงตำาแหนงทเกบเวบไซต แสดงไวใน Panel Group

9

การสรางหนาเวบเพจใหม

10

การสรางเวบเพจใหม สามารถทำาไดโดย 1. คลกคำาสง File>New... ทแถบเมน 2. จะปรากฎกรอบ New Document ขนมา โดยคลกทตวเลอก Basic page ใน

ชอง Category 3. คลกตวเลอก HTML ทชอง Basic page 4. คลกปม Create

 

การกำาหนดคณสมบตพนฐานของเวบเพจ กอนการออกแบบเวบเพจทกครง ควรเรมจากการกำาหนดคณสมบตพนฐาน เชน ชอเวบเพจ (Title) สพน (Background color) สของขอความ (Text color) เปนตน Page Propertiesโดยสามารถกำาหนดไดดวยคำาสง Modify

1. การกำาหนดลกษณะการแสดงผล (Appearance) Appearance เปนคณสมบตทวไป ในการแสดงผลของหนาเวบเพจ มรายละเอยดดงนคอ

11

Page font รปแบบตวอกษร Size ขนาดตวอกษร Text color สของขอความทวไป Background color สพนหลงของหนาเวบเพจ Background image ภาพฉากหลงของหนาเวบเพจ Repeat วธแสดงภาพฉากหลงแบบซำา ๆ Left margin ระยะของดานซายของหนาเวบเพจ Right margin ระยะของดานขวาของหนาเวบเพจ Top margin ระยะของดานบนของหนาเวบเพจ Bottom margin ระยะของดานลางของหนาเวบเพจ

2. การกำาหนดลกษณะขอความหวเรองและภาษา (Title/Encoding)Title/Encoding เปนการกำาหนดชอและภาษาทใชของเวบเพจ มรายละเอยดดงนคอ

12

การบนทก (Save) เวบเพจ ไฟลเวบเพจของ Dreamweaver 8 ถายงไมไดบนทก (Save) ขอมลททำาการแกไข จะสงเกตไดจากบนแถบชอเรอง (Title Bar) จะมเครองหมาย * ปรากฏอยทายชอไฟล ซงเปนเครองหมายเตอนวายงไมไดบนทก (Save) ขอมลของไฟลนน ไฟลขอมลของ Dreamweaver 8 จะถกจดเกบใหเปนไฟลประเภท html ใหอตโนมต คำาสงทใชในการจดเกบขอมล สามารถเลอกใชไดดงนคอ

o File>Save… จดเกบไฟลโดยใชชอเดม o File>Save As… จดเกบไฟลโดยใชชอใหม o File>Save as Template… จดเกบเปนไฟลเทมเพลต o File>Save to Remote Server จดเกบไวท Remote

Server o File>Save All จดเกบทกไฟลทเปดใชงานอย o นอกจากนยงสามารถใชแปนพมพ <Ctrl>+<S> แทนการใชคำาสง

File>Save… หรอ File>Save As… ได

การดผลการออบแบบบนบราวเซอร การออกแบบเวบเพจดวยโปรแกรม Dreamweaver 8 ผออกแบบควรทำาการตรวจสอบการแสดงผลทเวบบราวเซอร (Web Browser) ดวย เพราะการแสดงผลบางอยางไมสามารถจะแสดงผลใน Dreamweaver 8 ได สำาหรบการดผลทเวบบราวเซอร (Browser) ทำาไดดงนคอ

13

คลกคำาสง File>Preview in Browser>iexplorer (หรอคลกแปนพมพ <F12>)

จะปรากฏหนาของเวบเพจในเวบบราวเซอร (Web Browser) การเปด (Open) ขนมาแกไข เวบเพจทไดออกแบบยงไมเสรจหรอตองการทำาการแกไขใหม สามารถเปดเวบเพจนน ๆ ขนมาแกไขได ตามขนตอนดงน คอ

1. เรยกใชงานในสวนของ Group Panel จากนนใหคลกเลอกชอของเวบไซตทตองการแกไขขนมา

2. ดบเบลคลกชอไฟลประเภท htm หรอ html ทตองการแกไข 3. ไฟลทตองการแกไขจะปรากฏขนมา

 

การแทรกขอความบนหนาเวบเพจ การแทรกขอความ และอกขระพเศษ และการจดรปแบบขอความ

การใส Title หวเรองหรอไตเตล (Title) ของเวบเพจ มความสำาคญมาก เพราะเปนขอความทแสดงบนบราวเซอรเพอใหผเขาชมเวบไซตเขาใจวาเนอหาในหนาเวบเพจนนเกยวกบเรองใด นอกจากนยงเปนขอมลสำาคญท Search Engine ใชคนหาเวบเพจอกดวย การใสหวเรองของเวบเพจสามารถทำาได 2 วธดงนคอ

14

การใสขอความบนหนาเวบ การแทรกขอความในหนาเวบเพจ ผออกแบบเพยงแตพมพขอความทตองการลงไป หรออาจจะคดลอก (Copy) ขอความทพมพไวเรยบรอยแลวจากไฟลอนมาใชกได 1. การพมพขอความในหนาเวบเพจ การพมพขอความในหนาเวบเพจสามารถทำาไดงาย โดยพมพขอความทตองการ เมอตองการขนบรรทดใหมใหกดแปนพมพ หรอกดแปนพมพ พรอมกบ ในกรณทตองการใหระยะบรรทดไมหางกนมาก 2. การคดลอกขอความจากไฟลอนมาไวในหนาเวบเพจ เราสามารถคดลอกขอความทพมพไวดวยโปรแกรมอน แลวนำามาวางไวในหนาเวบเพจได ซงสวนมากในการทำาเวบไซต มกจะนยมพมพขอความทตองการเตรยมไวโดยใชโปรแกรม Notepad แลวเกบบนทกไวเปนแบบ Text File (มนามสกลเปน txt) โดยมวธการดงนคอ

เปดไฟลทเกบขอความทตองการขนมา จากนนระบายขอความทตองการ

15

คลกคำาสง Edit>Copy หรอกดแปนพมพ <Ctrl>+<C> เปดหนาของเวบเพจทออกแบบดวยโปรแกรม Dreamweaver 8

จากนนคลกคำาสง Edit>Paste หรอกดแปนพมพ <Ctrl>+<V>

ขอความทคดลอกมาจะแสดงในหนาเวบเพจ 3. การเวนวรรคระหวางขอความ การใสขอความบนหนาเวบเพจนน ปกตแลวโปรแกรม Dreamweaver 8 จะเวนวรรคใหเพยง 1 ครงเทานน แตอยางไรกตามเราสามารถทจะเวนวรรคมากกวา 1 ครงได โดย กดแปนพมพ <Ctrl>+<Shift>+<Space>

การจดรปแบบขอความบนหนาเวบ การจดรปแบบอกษรในงานออกแบบเวบเพจดวยโปรแกรม Dreamweaver 8 สามารถทำาไดดงนคอ

1. ระบายขอความทตองการจดรปแบบอกษร 2. กำาหนดคาในสวนของพาเนล Properties

การแทรกตวอกษรพเศษ (Symbol) 1. การเพมระยะเวนวรรคระหวางขอความ Dreamweaver 8 กำาหนดใหเวนวรรคระหวางขอความไดเพยง 1 ชองเทานน เมอตองการทจะใหมระยะเวนวรรคมากขน จะตองใชคำาสงเพอเพมระยะการเวนวรรค ซงทำาไดดงนคอ

วางเคอรเซอรในตำาแหนงทตองการเพมระยะเวนวรรค คลกแถบ "Common" แลวคลกเลอกแถบ "Text" จากนนกดแปนพมพ <Ctrl>+<Shift>+<Space Bar>  หรอ

คลกเครองมอ "BR" แลวคลกคำาสง "Non-Breaking Space"

16

2. การแทรกสญลกษณพเศษ สญลกษณพเศษทไมมในแปนพมพ สามารถจะแทรกเพมเตมไดจากแถบ Characters โดยทำาไดดงนคอ

วางเคอรเซอรในตำาแหนงทตองการแทรกสญลกษณพเศษ คลกแถบ "Common" แลวคลกเลอกแถบ "Text" จากนนคลกเครองมอ "BR" แลวคลกเลอกสญลกษณตามตองการ

การใสวนท การใสวนทในหนาเวบเพจ นอกจากเพอตองการแสดงวนทแลว เรายงสามารถกำาหนดรปแบบวนท พรอมทงกำาหนดใหวนทปรบเปลยนตามวนไดอตโนมตดวย โดยทำาตามขนตอนดงนคอ

วางเคอรเซอรในตำาแหนงทตองการแทรกวนท คลกแถบ "Common" บน Insert Bar จากนนคลกเครองมอ   จะปรากฏกรอบใหกำาหนดรปแบบ ใหเลอกรปแบบตามทตองการแลวคลก OK ถาตองการใหวนทปรบเปลยนอตโนมตใหคลกเครองหมายถก ทหนาขอความ Update

Automatically on Save

การใสเสนคนเนอหา 1. การแทรกเสนแบงเนอหา มวธการดงนคอ

วางเคอรเซอรในตำาแหนงทตองการแทรกเสน คลกเลอกแถบ "HTML" บน Insert Bar จากนนคลกเครองมอ

2. การปรบแตงสเสน คลกทเสนคนทตองการปรบแตง กำาหนดคาในสวนของพาเนล Properties  ซงประกอบดวย

o W คอความยาวของเสน ซงจะเลอกกำาหนดเปนแบบพกเซล หรอ % กได o H คอความหนาของเสน คาปกตจะกำาหนดความหนาไวท 3 พกเซล o Align คอการจดวางเสน จะเลอกแบบชดซาย กลาง ขวา กได o Shading คอการกำาหนดใหเสนเปนแบบเสนทบหรอเสนโปรง

17