Upload
-
View
16.559
Download
1
Tags:
Embed Size (px)
DESCRIPTION
การสร้างเว็บเพจด้วยDream 8
Citation preview
การสรางเวบเพจโดย โปรแกรม Macromedia Dreamweaver 8
4.1 ข &นตอนการเขาสโปรแกรม
วธการเขาสโปรแกรมมข �นตอนดงน �
1.คลก ท� Taskbar ดานลาง
2. เลอกท� Program > Macromedia > Macromedia Dreamweaver 8 โปรแกรมจะทางาน และเปดหนาตางโปรแกรมข �นมา
4.2 หนาตางเปดงาน
1.เปดงานท�เรากาลงทาคางอย โปรแกรมจะแสดงงานท�เราเปดใชบอยๆ ไวดานบน 2.เลอกประเภทงานท�ตองการสรางใหม ไดแก HTML , Coldfusion, PHP ASP ,JavaScrip ฯลฯ 3.เลอกงานตามฟอรมท�โปรแกรมจดไวใหโดยมรปแบบใหเลอกหลายประเภท
หนาจอการทาง
4.3 หนาจอการทางานหลกของโปรแกรม
หลงจากท�เลอกโปรแกรมเสรจแลว เราจะพบกบหนาตางการทางาน ซ�งประกอบดวย
1.Title Bar คอ สวนท�แสดงช�อโปรแกรม และช�อไฟลท�กาลงทางานอย
2.Menu Bar คอ สวนท�รวมคาส�งการทางานท �งหมด แลวแบงยอยตามประเภทและในคาส�งหลกมกจะมเมนลดใหกดดวย
3.Object Palette คอ แถบแสดงป มตางๆของโปรแกรม
เราสามารถเลอกประเภทคาส�งไดดวยการคลกท� Common จะปรากฏเมนข �นมา 4.Toolbar คอ แถบเคร�องมอสาหรบการใชงานดาน HTML และอนเตอรเนท ประกอบดวย
Show Code View แสดงการทางานในรปแบบ HTML
Show Code and Design Views แสดงการทางานแบบ HTML ควบคกบแสดงพ �นท�ออกแบบ
Show Design View แสดงการทางานแบบแสดงพ �นท�ออกแบบ
Document Title ต �งช�อของเวบเพจ
Check Errors ตรวจสอบขอผดพลาดจาก Browser
File Management จดการกบไฟลๆ ท�อยในเวบเพจ
Preview / Debug in Browser ทดลอง ดเวบเพจทาง Browser หรอกด F12
View Options มมมองในการทางานเพ�มเตม 5.หนาตางออกแบบเวบเพจ ใชพมพขอความและจดเรยงรปภาพ 6.Tag Selector ใชควบคมการทางานในรปแบบ HTML 7.Window Size กาหนดพ �นท�ใชงานตามตองการ 8.Estimate Download Time แสดงเวลา ท�ใชในการดาวนโหลด 9.Properties ใชกาหนดรปแบบตางๆ ของตวอกษร และรปภาพ รวมถงการสรางลงค
หนาตาง Proties สามารถจะเปดปดไดตามตองการดวยการคลกท� เพ�อขยายหนาตางการทางานใหมากข �น หรอคลกท� Window > properties กไดเชนกน
10. Dockable Window เปดหนาตางท�รวบรวมเคร�องมออานวยความสะดวกเอาไว โดยคลกท� เพ�อเปด-ปดได เชนเดยวกบ Properties
4.4 วธการสราง Site
การสราง Site กเพ8อท8เวลาสรางเวบไซต ขอมลจะไดถกจดอยางเปนระเบยบ ไมกระจดกระจาย งายตอการตรวจสอบ วธการสรางกงายๆ ตามรปเลย
4.5 การสรางขอความบน Dreamweaver 8
การสรางขอความบน Dreamweaver 8 ม ดงน � พมพขอความลงในสวนของหนาจอการทางานเลย เปนวธท�งายท�สด เราแคเตรยมเน �อหาใหพรอม
จากน �นกพมพไดเลย
+--ขอควรจา--+ ในเร�องของการพมพขอความ กเลอกเอาตามความถนดเลย แตควรตรวจเร�องของ Font ใหดเพราะบางFont อานไทยไมได โดยสามารถต �งคาไดโดยการกด Ctrl + U แลวกจะไดหนาตาง Preferences ดงรป
4.6 วธการเปล8ยนรปแบบตวอกษร
1.ลากเมาสขอความท�ตองการเปล�ยน 2.คลกท� Font เพ�อเลอก Font ท�ตองการ ควรเปน MS Sans Serif
การเปล8ยนขนาดตวอกษร 1.ลากเมาสขอความท�ตองการเปล�ยนแปลง 2.คลกท� Size เพ�อปรบขนาดตามตองการ
3.ตวอกษรจะเปล�ยนขนาดไป
4.7 วธการเปล8ยนสตวอกษร 1.ลากเมาสขอความท8ตองการเปล8ยนแปลง
2.คลกทปม Text color เพ8อเลอกส
3.ตวอกษรจะเปล8ยนสแลว
4.8 การจดเรยงขอความในเพจ
การจดกจะคลายๆกบพวก Microsoft word ท�เรารกนดน�นแหละ
หากตองการใชคาส�งจดเรยงขอความท�บรรทดใด กใหคลกเคอรเซอร ไปท�บรรทดน �น แลวคลกคาส�งไดเลย
4.9 วธเปล8ยนสพ &นหลงและรปภาพท8พ &นหลง
การเพ8มสสนใหกบเวบในสวนพ &นหลง มวธการดงน &
1.คลกท8ปม 2.เลอกสท8ชอง ของ Background Color หรอ Background Images
3.คลกท8ปม 4.สพ &นหลงเปล8ยนตามท8ถกเลอกไวแลว
หมายเหต ถาตองการใสรปใหเลอกท� Background Images
4.10 วธนารปภาพมาใสในเวบ
1.คลกวางเคอรเวอรตรงบรเวณท�เราตองการจะวาง 2.คลกท�ป มคาส�ง Images
3. เลอกไฟลภาพท�ตองการ
4.คลกป ม OK
5.มขอความเตอนให save กอน ใหคลก OK
4.11 วธการสรางตาราง การนาเสนอขอมลบางอยางจาเปนตองใชตาราง เพ�อท�จะใหขอมลท�นาเสนอไปน �นเขาใจงาย เราม
วธการสรางงายๆดงน �
1.วางเคอรเซอรไวตรงบรเวรท�ตองการ 2.คลกป ม ท�แถบเคร�องมอ Insert 3.คลกป ม
4.จะมหนาตางคณสมบตของตารางข &นมา ใหกาหนดคาตางๆของตารางตามตองการ
5.คลกท8ปม 6.จะไดตารางท8พรอมสาหรบใชงานแลว
4.12 การสรางลงคจากขอความ ลงค (Link) หรอจดเช8อมโยงเวบเพจ มหลายรปแบบดงน &
การทาลงคแบบขอความ การทาลงคไปยง E-mail
การทาลงคไปยง Named Anchor การทาลงคแบบ Rollover Image การทาลงคใน Dreamweaver 8 สวนสาคญจะอยตรงท�แถบ Properties ซ�งจะมอย 2 สวนดวยกน ไดแก
1.Link คอ แถบสาหรบเลอกไฟลท�ตองการจะลงคไปถง 2.Target คอ แถบสาหรบเลอกรปแบบของปลายทาง ซ�งไดแก _blank คอ การแสดงเวบเพจปลายทางในหนาตางใหม _parent คอ การแสดงเวบเพจท�หนาตางเด�ยว แตอยในเฟรมหลก _self คอ การแสดงเวบเพจในเฟรมเดยวกบตนทาง _top คอ การแสดงผลเวบเพจ โดยจะไมมเฟรม วธสรางลงคจากขอความ 1.พมพขอความลงไป 2.ลากเมาสทบขอความท�ตองการ
3.คลกท� ในแถบ properties เพ�อเลอกไฟลท�จะลงค 4.เม�อเลอกไดแลว ใหคลกป ม 5.ขอความกลายเปนลงคเรยบรอยแลว
6. ทดสอบผลทาง Browser โดยการกด F12
4.13 การสรางลงคจากรปภาพ
การสรางลงคดวยรปภาพกาลงเปนท8นยมในปจจบนน & ซ8ง Dreamweaver 8 กสามารถทาไดงายๆดงน & 1.คลกท8รปภาพ
2.เลอกไฟลท8จะลงค โดยคลกท8 ในแถบ Properties
3.คลกท8ปม 4.ทดสอบผลทาง Browser โดยการกด F12
4.14 การทาลงคไปยงเวบไซตอ8น
การทาลงคไปยงเวบไซตอ8น สามารถทาไดท &งแบบขอความและรปภาพ วธการทา กมดงน & 1.ถาเปนขอความใหลากเมาสขอความส&นๆ สวนถาเปนรปใหคลกท8รป 2.พมพ http:// ช8อเวบไซต ลงในชอง Link และเลอกรปแบบปลายทาง 3.คลกพ &นท8วาง จากน&นกดผลทาง Browser
4.15 การทาปม Flash
วธการนาป มกด Flash มาใชงาน มข �นตอนดงน � 1.วางเคอเซอรบนพ �นท�ทางาน
2.ไปท� Menu Bar เลอก Insert > Media > Flash button
3.ในข �นน �ถาเรายงไมไดบนทกเวบเพจ โปรแกรมจะเตอนใหเราบนทกกอน ถงจะสามารถใชป ม Flash ได ใหเราทาการบนทก 4.จะปรากฏหนาตาง Insert Flash Button ข �นมา ใหเราเลอกรปแบบของป ม
5.จะไดป ม Flash เรยบรอยแลว ใหทดสอบแสดงผลทาง Browser โดยการกดป ม F12