การก าหนดคาเรมตน Dreamweaver CS6 การด Preferences การดและก าหนดคา Preferences ของ โปรแกรม Macromedia Dreamweaver เปนสงทส าคญทสด ของการสรางเวบไซต ดวยโปรแกรมน เพราะ Preferences ของโปรแกรมกคอ การก าหนดคาเบองตนทงหมด ของโปรแกรม ถาเราออกแบบเวบโดยไมได ก าหนดคา เวบกจะมคาผดพลาด เพยนจากความเปนจรง และไมสามารถแกไขไดในเหนานน เราตอง set คาแลวกออกแบบใหม มาดวธการก าหนดทส าคญดงน

การก าหนด Font 1. ไปทเมน Edit >Preferences จะไดหนาตางการก าหนดคา ดงรป

2. หลงจากนนใหเลอก Front settings เปน Thai แลวในสวนของ Proportional font และ Code view เปน Tahoma เพอเปนการก าหนดคา Front เรมตน ดงรป

การตงก าหนดคาของเอกสารเรมตน 1. New Document เปนการก าหนดคา default ใหเอกสารเรมตน ดงรป

การตงคาไฟลเอกสารเรมตน หากตองการก าหนดคาต าแหนงเรมตนชดบนสด ซายสด 1. เลอก Modify > Page Properties…

2. ก าหนดคา Left margin : 0 และ Top margin : 0

ก าหนดคา Title เพอใชแสดงใน Title bar บนโปรแกรมเวบบราวเซอร 1. เลอก Modify > Page Properties… แลวเลอกท Title/Encoding

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

กอนเรมตนสรางเวบไซตและเวบเพจ ควรมการก าหนดโครงสรางเวบไซตกอน ซงเปนการเตรยมพนทหรอโฟลเดอรสาหรบเกบไฟลเวบเพจของเวบไซต โดยจดการสรางโฟลเดอรเพอเกบขอมลหรอเกบไฟลตางๆ ใหเปนหมวดหมเพองายตอการจดทาเวบไซต และงายตอการบรหารงานเวบไซต ดงนนการจดการวางแผนจดเกบขอมลลงในโฟลเดอรจงเปนสงส าคญ ลกษณะของ การจดเกบควรมลกษณะดงน โฟลเดอรหลกใชเกบไฟลประเภท .html หรอ .php โฟลเดอรรปภาพ โฟลเดอรเสยง โฟลเดอรภาพเคลอนไหว

อกทงยงสามารถสรางโฟลเดอรยอย (Sub folder) ลงในโฟลเดอรตาง ๆ ไดอกดวย แสดงดงรป

หลงจากททาความรจกกบการก าหนดโครงสรางของเวบไซต ตอไปเปนการสรางหนาเวบไซตดวยโปรแกรม Adobe Dreamweaver CS6 ประกอบดวยขนตอนดงน

การก าหนดโครงสรางเวบไซต

เปนการเตรยมความพรอมในการสรางเวบไซต ควรประกอบดวยอะไร เชน เนอหา รปภาพ ภาพเคลอนไหวหรอมลตมเดยตางๆ ซงควรมการแบงแยกเนอหาแตละสวนไวอยางชดเจนไมใหปะปนกน จากนนจงจะดาเนนการเรมตนสรางเวบไซต

เปนการเตรยมโฟลเดอรเพอเกบขอมลโดยสรางเปนโฟลเดอรยอยในเครองคอมพวเตอร โดยถาใชงานรวมกบโปรแกรมเซรฟเวอรจาลองจะสรางอยในโฟลเดอร WWW ตามการสรางโฟลเดอรใชงานของโปรแกรม

การสรางไซตสาหรบจดเกบไฟลเวบเพจ

การสรางไซต เปนการสรางแหลงสาหรบจดเกบไฟลตาง ๆ ทใชในการออกแบบและพฒนาเวบไซต อาจประกอบดวยไฟลรปภาพ ไฟลเวบเพจ ไฟล CSS หรอไฟลประเภทวดโอ-มลตมเดยตาง ๆ ซงมขนตอนดงตอไปน

1. คลกเลอกเมน Site 2. คลกเลอกคาสง New Site จะปรากฏหนาจอ Site Setup for <ชอไซต> 3. คลกเลอกแทบ Site 4. ก าหนดชอเวบไซตจากชอง Site Name เชน spathai เปนตน

5. คลก เพอเลอกแหลงทเกบไฟลตาง ๆ ของเวบไซต 6. เลอกโฟลเดอรทจดเกบไฟลตาง ๆ หากยงไมมโฟลเดอรใหสรางโฟลเดอรใหม

7. หลงจากเลอกโฟลเดอรแลวคลกปม

การแกไขไซต

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

1. คลกเลอกเมน Site 2. เลอกคาสง Manage Sites 3. คลกเลอกชอเวบไซตทตองการแกไข 4. คลกปม 5. แกไขขอมลชอไซต 6. แกไขโฟลเดอรแหลงเกบไฟลของเวบไซต

7. คลกปม เพอบนทกการเปลยนแปลงไซต

8. คลกปม สนสดการแกไขไซต

การสรางโฟลเดอรเพอจดเกบไฟล

หลงจากทสรางไซตพรอมสรางโฟลเดอรหลกสาหรบเกบไฟลเวบเพจ จากนนจาเปนตองสรางโฟลเดอรยอย เพอจดเกบไฟลขอมลตาง ๆ ทเกยวของในการสรางเวบไซตและเวบเพจ เชน โฟลเดอรเกบรปภาพ มลตมเดย และขอมลทเกยวของกบการสรางเวบไซต โดยแบงเปนหมวดหมแยกตามประเภทของไฟลขอมลทใชงาน การสรางหลายโฟลเดอร ใชขนตอนการปฏบตเชนเดม ซงสามารถกระทาไดตามขนตอนดงตอไปน

1. คลกเมาสขวาตรงพาเนล File โดยใหเมาสชตรงชอไซตทตองการสรางโฟลเดอรสาหรบเกบไฟลขอมลตาง ๆ (หากไมปรากฏพาเนล File ใหทาการเปดพาเนล File โดยคลกเลอกเมน Window และคลกเลอกคาสง File แลวพาเนล File จะแสดงอยในสวนลางขวาของจอภาพ)

2. เมอปรากฏแทบค าสง ใหเลอกคาสง New Folder เพอสรางโฟลเดอรใหม

3. โปรแกรมจะก าหนดชอโฟลเดอรให ซงสามารถเปลยนแปลงชอโฟลเดอรได โดยลบชอโฟลเดอรทโปรแกรมตงให แลวพมพชอโฟลเดอรทตองการแลวกดแปน Enter โปรแกรมจะเปลยนชอโฟลเดอรตามทก าหนด

การสรางตารางและการปรบแตงคณสมบต

ในการออกแบบเวบไซตสวนใหญ เรามกจะใชตารางมาชวยในการท า เพราะสามารถชวยท าใหงายในการจดการกบ Layout ของเวบเพจไดด ซงในสวนใหญจะพบปญหา เกยวกบการใสรปภาพและและขอความตางๆ ซงจะมวธการจด Layout ดวยตาราง ดงน 1. ในขนตอนแรก ใหคลกเลอก Workspace แบบ Design 2. คลกเลอกท Insert บนแทบเครองมอ กจะปรากฏเมนยอยขนมา 3. คลกทปมเครองมอ Table ดงภาพตวอยาง เพอแทรกตาราง

เมอคลกท Table กจะเดงหนาตางดงรปภาพดานลาง

1 2

3

4 5

6 7

8 9

4. Rows คอ จ านวนแถวของตาราง 5. Columns คอ จ านวนคอลมน

7. ความหนาของเสนตาราง 9. ชองวางระหวางเสนตาราง

6. ขนาดความกวางของตาราง ก าหนดทงแบบ Pixels และ Percent 8. ความหางระหวางเสนตาราง

จากภาพดานลางก าหนด ความกวางขนาด 1000 pixels จ านวน 7 แถว 5 คอลมน

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

เมอนกเรยนน าเมาสไปคลกทพนทในตารางจะปรากฏเมน ดงภาพดานลางขนมาแทน ซงจะเปนสวนของ Properties ส าหรบจดการตาราง หรอตกแตงตารางทเราสรางขนมา

1. ในสวนของ Cell จะมหนาทท าการรวมชองตารางเปนชองเดยวกน หรอหากรวมเปนแลว อยางแบงออกเหมอนเดมกสามารถใชเมน Cell ในการจดการได 2. Horz ส าหรบจดการในชองตารางวาตองการใหจดขอความ หรอภาพไวทตรงสวนไหนของชองตารางนน โดยกจะมเมนใหเลอก คอ Left, Center และ Right นอกจากนยงมเมน Vert ท าหนาทเหมอนกนกบ Horz โดยจะมเมนใหเลอกคอ Top, Meddle, Bottom และ Baseline 3. Bg ยอมาจาก Background หรอพนหลงนนเอง โดยเราสามารถคลกเลอกสไดตามทเราตองการ

1 2 3

การสราง Banner และ ปมกด

ใหนกเรยนสรางภาพจากโปรแกรม Photoshop ตามขนาดทก าหนด - การสราง Banner ก าหนดขนาดใน Photoshop ดงน

จากนนกใหนกเรยนใสสลงไปในภาพ สใดกไดตามใจชอบ แลว Save ไฟลออกมาเปน JPEG จะไดดงรป

- การสราง ปมกดหรอปม Social ก าหนดขนาดใน Photoshop ดงน

จากนนกใหนกเรยนใสสลงไปในภาพ สใดกไดตามใจชอบ แลว Save ไฟลออกมาเปน JPEG จะไดดงรป

โดยไฟลภาพทงหมดเกบไวใน โฟลเดอรเดยวกนทงหมด โดยเกบในมร Appserv > www > 574000

เมอนกเรยนสรางภาพแตละรปจนไดไฟลภาพครบทงหมดตามทตองการแลว ดงรปแลว

กลบมาเปดทโปรแกรม Adobe Dreamweaver CS6 หรอ Dw

1. ใหนกเรยนสรางตารางขนมาโดยไปท Insert > Table

2. ก าหนดคาตาราง ดงภาพดานลาง

3. เมอไดตารางมาตามทตองการแลว ใหท าการรวมชองตารางแถวท 1 โดย 3.1 ลากคลมตารางแถวท 1 ทง 2 คอลมน

3.2 แลวกดปม ทางดานลางของโปรแกรม

3.3 แลวใหไปคลกทชองทเรารวมกนเรยบรอยแลว จากนนไปกด Insert > Image

กอนการแรกรปภาพให Save ไฟลงานนกอนการแทรก

3.4 เลอกไฟลภาพทเราตองการ แลวกด OK

3.5 เรากจะไดภาพทเราตองการแทรกตามตองการ

4. ในสวนของปมกดตางๆ กแทรกรปภาพเขามาในลกษณะเดยวกน หรอ อาจจะใชวธลากเขามาวางลงในชองของตารางทเราตองการเลยกได

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

5.1 แลวเพมตารางเขามาโดยกด Insert > Table แลวก าหนดตามน

5.2 เรากจะไดตารางยอยเพมเขามาอก

6. จากนนใหเราท าการแทรกรปภาพเขาไปจนครบตามทก าหนด