คู่มือการสร้างเว็บไซต์ Macromedia Dreamweaver 8.0

จัดท าโดย นายกิติกร แสวงหา 53010516033 นายเนติรัฐ ธรรมประชา 53010516042 นายนพพร ภู่ศรีพงษ์ 53010516039 นายคีร ี เสมอภาค 53010516006 นางสาวจิราพร พรหมลิ 53010520007

ชั้นปีที่ 1 คณะศึกษาศาสตร์ สาขาเทคโนโลยีและส่ือสารการศึกษา

มหาวิทยาลัยมหาสารคาม

ค าน า

คู่มือการสร้างเว็บไซต์ จากโปรแกรม Macromedia Dreamweaver นี้ได้จัดท าขึ้นเพื่อประกอบการเรียนการสอนการสร้างเว็บไซต์ ซึ่งในคู่มือเล่มนี้มีเน้ือหาเกี่ยวกับวิธีการใช้โปรแกรม ขั้นตอนการสร้างเว็บไซต์

ดังนั้นคณะผู้จัดท าจึงได้จัดท าคู่มือนี้ เพื่อให้ผู้ศึกษาเข้าใจวิธีการสร้างเว็บไซต์จากMacromedia Dreamweaver ได้ง่ายขึ้น หากผิดพลาดประการใดขออภัยมา ณ ที่นี้ด้วย

ผู้จัดท า

คู่มือการสร้างเว็บไซต์ Macromedia Dreamweaver 8.0

การสร้าง Site เพื่อจัดเก็บไฟล์และโฟลเดอร์

ในการสร้างเว็บไซต์นั้น จะประกอบไปด้วยไฟล์ต่าง ๆ มากมาย ไม่ว่าจะเป็นไฟล์ HTML รูปภาพ และโฟลเดอร์ ซึ่งเราจะต้องมีการเตรียมการจัดเก็บส่วนประกอบเหล่านี้ เพื่อไม่ให้เกิดความสับสนในภายหลัง ซึ่งการสร้าง Site สามารถช่วยจัดการได้

ผู้ที่เร่ิมต้นสร้างเว็บไซต์ใหม่ ๆ อาจจะคิดว่าการสร้างเว็บไซต์ไม่น่าจะยุ่งยากมากนัก รวมทั้งส่วนประกอบก็ไม่ได้สร้างความสับสน แต่จะเกิดปัญหาขึ้นได้ในภายหลังเมื่อคุณมีเว็บไซต์ที่ประกอบไปด้วยไฟล์จ านวน มากเพิ่มขั้น ซึ่งหากคุณไม่จัดเก็บให้ดี คุณจะได้เจอกับปัญหานี้แน่ ๆ ค่ะ เช่น เมื่อต้องการจะแก้ไขไฟล์ภาพสักภาพ คุณก็ต้องมาเสียเวลาคิดว่าไฟล์ที่ใช้งานในหน้านี้ ถูกจัดเก็บไว้ที่ไหน ชื่อไฟล์อะไร เป็นต้น บางคร้ังแก้ไขเสร็จเซฟไว้คนล่ะที่ ท าให้เกิดปัญหาลิงค์ผิดพลาด หรือ บางทีลบไฟล์ หรือเซฟไฟล์ทับผิดที่ เป็นต้น เพราะฉนั้น เพื่อป้องกันปัญหายุ่งยากเหล่านี้ เราจึงต้องมีการวางแผนในการจัดเก็บไฟล์ต่าง ๆ ให้เป็นระเบียบ มีแบบแผน เช่น จากรูปข้างต้น จะเป็นตัวอย่างลักษณะการจัดเก็บไฟล์ที่ Webmaster ก าหนดขึ้น ซึ่งข้อมูลของเว็บไซต์จะถูกเก็บอยู่ในโฟลเดอร์ชื่อ nextstepdev โดยภายในโฟลเดอร์นี้จะเป็นข้อมูลของเว็บ nextstepdev เท่านั้น ซึ่งจะประกอบไปด้วย ไฟล์ HTP และรูปภาพต่าง ๆ โดย Webmaster วางแผนให้ไฟล์ต่าง ๆ ที่เป็นไฟล์เกี่ยวกับเว็บถูกจัดเก็บอยู่ด้านนอกสุด และได้สร้างโฟลเดอร์เพื่อจัดเก็บรูปภาพโดยเฉพาะ คือ โฟลเดอร์ images ส าหรับเก็บรูปภาพที่เป็นภาพที่เป็นโครงร่างของเพจ ส่วนโฟลเดอร์ imgs ถูกสร้างขึ้นมาเพื่อเก็บภาพที่เป็นภาพ ประกอบเน้ือหา เป็นต้น ซึ่งเมื่อเราวางแผนไว้แล้วแบบนี้ เมื่อมีการจัดเก็บไฟล์เพิ่มขึ้น หรือเรียกใช้งานไฟล์ เราก็จะสามารถใช้งานได้สะดวก เพราะจะทราบโดยอัตโนมัติ ว่าจะเซฟไฟล์ไว้ที่ไหน จะเรียกไฟล์จาก

ที่ไหน เป็นต้น ซึ่งในโปรแกรม Macromedia Dreamweaver ก็มีส่วนที่สนับสนุนการจัดการเกี่ยวกับการจัดเก็บไฟล์และโฟลเดอร์อยู่ ซึ่งเราเรียกว่าการสร้าง Site เพื่ออ านวยความสะดวกในการสร้างเว็บไซต์ เวลาเรียกใช้งาน ก็จะสามารถเรียกใช้งานได้อย่างรวดเร็ว ซึ่งทุก ๆ ครั้งที่เรามีการสร้างเว็บไซต์ใหม่ เราควรจัดการสร้าง Sit ในโปรแกรม Macromedia Dreamweaver เป็นล าดับแรกก่อนค่ะ โดยมีขึ้นตอนในการสร้างดังนี้ค่ะ ขั้นตอนท่ี 1 คลิกเลือกค าสั่ง Site --> Manage Sites... จาก Menu Bar ขั้นตอนท่ี 2 จะปรากฏไดอะล็อกบ็อกซ์ Manage Site ให้ท าการคลิกที่ปุ่ม New... จากนั้นเลือก Site

ขั้นตอนท่ี 3 รอสักครู่จะปรากฏไดอะล็อกบ็อกซ์ Site Definition ให้ท าการตั้งชื่อไซต์ ในช่อง Site name ขั้นตอนท่ี 4 ระบุโฟลเดอร์ที่จะใช้ในการจัดเก็บเว็บไซต์ โดยการคลิกที่รูปโฟลเดอร์ ที่บริเวณ Local root folder ซึ่งจะมีไดอะล็อกบ็อกซ์ใหม่เพิ่มมา ให้เลือกไปยังโฟลเดอร์ที่เราจะจัดเก็บข้อมูล จากนั้น คลิกปุ่ม Select (เลือกไปยังโฟลเดอร์ที่จะจัดเก็บเว็บไซต์ โดยต้องสร้างโฟลเดอร์นี้ไว้ก่อน จากตัวอย่าง Webmaster สร้างโฟลเดอร์ชื่อ nextstepdev ไว้ที่ C:\ AppServ\www ดังนั้น Webmaster จึงเลือกเข้าไปในโฟลเดอร์ชื่อ nextstepdev แล้วจึงกดปุ่ม Select ) ขั้นตอนท่ี 5 เมื่อระบุโฟลเดอร์ส าหรับเก็บข้อมูลเรียบร้อยแล้ว คลิกปุ่ม OK

ขั้นตอนท่ี 6 จะปรากฏชื่อ Site name ที่เราสร้างขึ้นในหน้าต่าง Manage Site ดังภาพ จากนั้นให้เราคลิกปุ่ม Done

แค่นี้ก็เรียบร้อยแล้วค่ะ Site ที่เราสร้างขึ้น จะปรากฏขึ้นที่บริเวณ File Panel ทางด้านขวามือ ดังภาพค่ะ

หลังจากนี้เราก็สามารถสร้างไฟล์เอกสาร และโฟลเดอร์เพิ่มเข้าไปได้ค่ะ ซึ่งติดตามรายละเอียดของการสร้างไฟล์เอกสาร และโฟลเดอร์เข้าไปใน Site ได้ในบทความต่อไปค่ะ

การสร้างไฟล์เอกสาร (เว็บเพจ) ใหม่เพิ่มเข้าไปใน Site

บทความนี้จะเป็นการสร้างไฟล์เอกสารใหม่ (เว็บเพจ) เพิ่มเข้าไปใน Site ซึ่งเราได้สร้างไว้ในบทความท่ีแล้ว ซึ่งการสร้างเอกสาร เว็บเพจใหม่เข้าไปใน Site ท าได้ง่าย ๆ ดังนี้ค่ะ

ขึ้นตอนแรก ให้สังเกตที่ File Panel บริเวณทางด้านขวามือค่ะ เราจะเจอโฟลเดอร์ ชื่อเดียวกับชื่อ Site ที่เราได้สร้างไว้ ซึ่งเราเรียกโฟลเดอร์นี้ว่า Site งานของเราค่ะ การสร้างไฟล์เว็บเพจเพิ่มเข้าไปใน Site งาน ท าได้โดยการคลิกขวาที่บริเวณโฟลเดอร์ Site จากนั้นเลือก New File

ขึ้นตอนท่ี 2 จะมีการสร้างไฟล์เว็บเพจใหม่ขึ้น ซึ่งมีสัญลักษณะดังภาพ ให้เราท าการก าหนดชื่อไฟล์ค่ะ ซึ่งไฟล์นี้เป็นไฟล์ส าหรับหน้าแรก Webmaster เลยตั้งชื่อว่า index.html

แค่นี้ละค่ะ เป็นอันเสร็จเรียบร้อย เวลาต้องการเรียกใช้งานก็แค่ดับเบิ้ลคลิกที่ไฟล์ที่สร้างไว้ หน้าเพจก็จะถูกเรียกให้แสดงผลท่ีบริเวณ Document Window ซึ่งเราก็สามารถจะเพิ่มเติมข้อมูลเข้าไปได้เลย

การก าหนดคุณสมบัติพื้นฐานของเว็บเพจ

ก่อนท่ีเราจะเร่ิมต้นสร้ างเว็บเพจ หลังจากเราได้สร้างไฟล์ใหม่แล้ว เราควรก าหนดคุณสมบัติพื้นฐานให้กับหน้าเว็บเพจของเราก่อน เพื่อใช้เป็นค่าเริ่มต้นในการท าเว็บเพจของเพจนั้น

คุณสมบัติพื้นฐานหรือค่าเร่ิมต้นของเว็บเพจ ซึ่งเราจะต้องเร่ิมก าหนดก่อนท าเว็บ ได้แก่ การก าหนดค่าของฟอนต์ ขนาดของฟอนต์ สีของข้อความ สีของพื้นหลัง เป็นต้น ซึ่งมีวิธีก าหนดค่าคุณสมบัติพื้นฐานของเว็บเพจ ดังนี้ ขั้นตอนแรก คลิกที่เมนู Modify --> Page Properties จะมีไดอะล็อกบ็อกซ์ ปรากฏขึ้น ขั้นตอนท่ี 2 ก าหนดค่าในส่วนของ Appearance ซึ่งจะประกอบไปด้วย รายละเอียดที่ต้องก าหนดดังนี้ 1. ข้อมูลเกียวกับลักษณะของข้อความ ที่จะปรากฏทางหน้าเว็บเพจ เช่น จะเป็นฟอนต์อะไร ขนาดเท่าไหร่ สีอะไรเป็นต้น 2. ข้อมูลเกี่ยวกับพื้นหลังของเว็บเพจ ซึ่งสามารถก าหนดได้ ว่าต้องการให้พื้นหลังของเว็บเพจเป็นสีอะไร หรือหากไม่ก าหนดเป็นสีก็สามารถก าหนด เป็นพื้นหลังแบบรูปภาพก็ได้ 3. ส่วนของระยะขอบของเว็บเพจ ซึ่งหากคุณไม่ได้ก าหนดไว้ ค่าเร่ิมต้นของเว็บเพจของคุณจะมีลักษณะเว้นว่างบริเวณขอบทั้งสี่ด้าน หากไม่ต้องการให้มีขอบให้ก าหนดค่า margin ทั้งสี่ด้านให้เท่ากับ 0

การสร้างข้อความ

การสร้างข้อความบน Dreamweaver 8 มีอยู่ด้วยกัน 3 วิธี ดังนี้ 1.พิมพ์ข้อความลงในส่วนของหน้าจอการท างานเลย เปน็วิธีที่ง่ายที่สุด เราแค่เตรียมเนื้อหาให้พร้อม จากนั้นก็ลุยพิมพ์ได้เลย

2.พิมพ์ข้อความจากโปรแกรมอื่น แล้วก๊อปปี้มาใส่ที่หน้าจอการท างาน เป็นอีกความสามารถหนึ่งของ Dreamweaver 8 ที่สนับสนุนการโอนย้ายข้อมูลจากโปรแกรมอ่ืน เช่น Word , Excel และ Notepad โดยสามารถน ามาใส่ที่หน้าจอารท างานได้เลย และยังแสดงผมได้เหมือนต้นฉบับอีกด้วย 3.พิมพ์ในรูปแบบการท างานแบบ HTML อันนี้ส าหรับคนที่ถนัดถาษา HTML สักหน่อย ก็อาจจะคลิก

แล้วพิมพ์ข้อความลงในส่วน <body>หรือ <head> +--ข้อควรจ า--+ ในเร่ืองของการพิมพ์ข้อความ ก็เลือกเอาตามความถนัดเลย แต่ควรตรวจเร่ืองของ Font ให้ดี เพราะบาง อ่านไทยไม่ได้ โดนสามรถตั้งค่าได้โดยการกด Ctrl + U แล้วก็จะได้หน้าต่าง Preferences ดังรูป

วิธีการเปลี่ยนรูปแบบตัวอักษร

1.ลากเมาส์ข้อความที่ต้องการเปลี่ยน 2.คลิกที่ Font เพื่อเลือก Font ที่ต้องการ ควรเป็น MS Sans Serif

การเปลี่ยนขนาดตัวอักษร 1.ลากเมาส์ข้อความที่ต้องการเปลี่ยนแปลง 2.คลิกที่ Size เพื่อปรับขนาดตามต้องการ

3.ตัวอักษรจะเปลี่ยนขนาดไป

วิธีการเปลี่ยนสีตัวอักษร 1.ลากเมาส์ข้อความที่ต้องการเปลี่ยนแปลง 2.คลิกทีปุ่ม Text color เพื่อเลือกสี

3.ตัวอักษรจะเปลี่ยนสีแล้ว การจัดก็จะคล้ายๆกับพวก Microsoft word ที่เรารู้กันดี

การแทรกรูปภาพ

1.คลิกวางเคอร์เวอร์ตรงบริเวณที่เราต้องการจะวาง 2.คลิกที่ปุ่มค าสั่ง Image

3. เลือกไฟล์ภาพที่ต้องการ

4.คลิกปุ่ม OK

5.มีข้อความเตือนให้ save ก่อน ให้คลิก OK

การน าภาพมาใส่พื้นหลัง เป็นอีกวิธีหนึ่งในการตกแต่งเว็บเพจที่คนนิยมใช้กันมาก มีขั้นตอนท าง่าย ดังนี ้1.คลิกที่ปุ่ม หรือกด Ctrl+J เพื่อเปิดหน้าต่าง Page Properties

2.คลิกที่ปุ่ม ในช่อง Background Image

3.เลือกไฟล์รุปที่ต้องการ แล้วคลิกปุ่ม

4.คลิกปุ่ม ที่หน้า Page Properties อีกครั้ง 5.ภาพที่เลือกไว้เปลี่ยนเป็นพื้นหลังเรียบร้องแล้ว

การสร้างตาราง

การน าเสนอข้อมูลบางอย่างจ าเป็นต้องใช้ตาราง เพื่อที่จะให้ข้อมูลที่น าเสนอไปนั่นเข้าใจง่าย เรามี

วิธีการสร้างง่ายๆดังนี้

1.วางเคอร์เซอร์ไว้ตรงบริเวรที่ต้องการ

2.คลิกปุ่ม ที่แถบเคร่ืองมือ Insert

3.คลิกปุ่ม

4.จะมีหน้าต่างคุณสมบัติของตารางขึ้นมา ให้ก าหนดค่าต่างๆของตารางตามต้องการ

5.คลิกที่ปุ่ม

6.จะได้ตารางที่พร้อมส าหรับใช้งานแล้ว

เมื่อเราท าการออกแบบตารางเรียบร้อยแล้ว ขั้นต่อปก็คือการ กรอกข้อมูลลงไปในตารางที่สร้างไว้

หากคลิกที่ตารางแล้วแถบ Properties จะมีคุณสมบัติต่างๆดังนี้

Horz คือ จัดต าแหน่งเคอร์เซอร์ด้านยาว

Vert คือ จัดต าแหน่งเคอร์เซอร์ด้านกว้าง

W คือ ก าหนดขนาดด้านยาว

H คือ ก าหนดขนาดด้านกว้าง

Bg คือ ภาพพื้นหลัง หรือ สีพื้นหลัง

Brdr คือ สีเส้นขอบ

หากคลิกที่ตารางแล้วแถบ Properties จะมีคุณสมบัติต่างๆดังนี้

Table Id คือ ตั้งชื่อให้ตาราง

Rows คือ จ านวนแถว

Cols คือ จ านวนคอลัมน์

W คือ ความกว้าง

H คือ ความสูง

CellPad คือ ก าหนดระยะห่างระหว่างเซล์

CellSpace คือ ก าหนดระยะห่างขอบเซลล์

Aligan คือ การจัดวางตาราง

Border คือ เส้นขอบตาราง

Bg color คือ สีพื้นหลัง

Brdr color คือ สีของส้นขอบ

Bg Image คือ รูปพื้นหลัง

หลังจากที่ได้ก าหนดคุณสมบัติกันมาแล้ว ทีนี้มาดูวิธีการพิมพ์ข้อความส่งในตารางกันดีกว่านะครับ 1.คลิกเลือกบริเวณที่จะพิมพ์ข้อความ 2.พิมพ์ข้อความลงไป

เราสามรถน าเอารูปภาพมาตกแต่งตารางได้ตามต้องการ ด้วยขั้นตอนต่อไปนี้ 1.คลิกเลือกที่เซลล์ที่ต้องการจะใส่รูปลงไป

2.คลิกหาไฟล์รูป ที่ช่อง Bg จากเซลล์ Properties

3.เลือกรูปที่ต้องการ

4.คลิกปุ่ม 5.รูปที่ถูกน ามาตกแต่งเซลล์เป็นมีที่เรียบร้อยแล้ว ถ้าต้องการเปลี่ยนทั้งตารางก็ให้คลิกเลือกตารางทังหมดก่อนแล้วจึงท าการเปลี่ยนตามข้อ 2-5 ตารางที่เราสร้างขึ้นมานอกจากจะน ารูปมาใส่ได้แล้ว เรายังเปลี่ยนสีพื้น และเส้นขอบตารางได้อีกด้วย โดยมีชั้นตอนดังนี้ การเปลี่ยนสีพื้นตาราง 1.คลิกเลือกตารางทั้งหมด

2.เลือกสี ที่ช่อง Bg Color จาก Table Properties 3.พื้นหลังของตารางมีสีเรียบร้อยแล้ว

ส่วนประกอบของเลเยอร์

เมื่อเราน าเมาส์ไปคลิกที่เลเยอร์ ก็เป็นการแสดงส่วนประกอบของเลเยอร์ ซึ่งประกอบ

เมนูต่างๆในแถบ Properties

Layer ID เป็นหมายเลขอ้างอิงเวลาเรียกใช้ Layer นั้นๆ สามารถตั้งชื่อได้ตามใจ แต่ปกติโปแกรมจะตั้งให้ตามล าดับของเลเยอรืที่ถุกสร้างขึ้นมาก่อน-หลัง เช่น layer1,layer2,layer3....

L และ T เป็นการก าหนดต าแหน่งของเลเยอร์ ย่อมากจาก Left(L) และ Top(T) W และ H เป็นการก าหนดขนาดของเลเยอร์ ย่อมาจาก Width(W) และ Hight(H) หน่วยของ

มันจะเป็น PX(Pixel) Z-Index (มีอีกชื่อหน่ึงว่า Stacking order) ใช้ในการเปลี่ยนล าดับเลเยอร์ แต่เหมือนว่าใช้

Layer Palette จะสะดวกกว่า VIS ใช้ตั้งชื่อค่าว่าจะให้เลเยอร์มองเห็น หรือซ่อนไว้ก่อน

default โดนส่วนใหญ่ Browser จะใช้ว่า inherent inherent ใช้ค่า Visibillty ของเลเยอร์ที่เซ็ตไว้ Visible จะโชว์เลเยอร์ hidden จะซ่อนเลเยอร์

Bg image ang Bg color ปรับสี และรูปพื้นหลังเลเยอร์ Overflow คือ การตั้งค่าเผื่อ Object ที่มีขนาดใหญ่กว่าเลเยอร์

visible ขยายเลเยอร์เพื่อให้เห็นทั้งหมด โดยขยายไปทางขวา hidden จ ากัดขนาดเลเยอร์เท่เดิม แล้วส่วนเกินจะมองไม่เห็น scroll จะสร้าง scroll bar อัตโนมัติ auto จะสร้าง scroll bar ให้อัตโนมัติ ถ้าขนาดของ Object ใหญ่กว่าเลเยอร์ขึ้นมา

Clip จะสามารถระบุต าแหน่งส่วน content ที่จะแสดงในเลเยอร์อีกทีตัดส่วนอ่ืนให้เป็น invisble หมดโดยจะมีต าแหน่ง L(Left) , R(Right) , T(Top) , B(Bottom) , พูดง่ายๆก็คอื จ ากัดส่วนแสดงผล

วิธีการสร้างเลเยอร์ 1.เลือก Layout จากแถบเคร่ืองมือ Insert

2.คลิกปุ่ม (draw Layer) เพื่อออกแบบเลเยอร์ 3.ลากเมส์สร้างเลเยอร์ให้มีขนาดจามที่ต้องการ 4.คลิกในพื้นที่ของเลเยอร์ แล้วพิมพ์ข้อความ หรือ น ารูปภาพมาลง 5.ปรับขนาดของเลเยอร์ให้พอดี

การเรียกใช้งาน Layer Palettle ให้เลือกเมนู Windows > Layer (หรือกด F2) จะเห็น Layer Palette ขึ้นทางด้านขวา

:: ประโยชน์ของ Layer Palette ::

1.ใช้ในการบอกต าแหน่งของเลเยอร์ว่าเลเยอร์ไหนอยู่บนสุด

2.ถ้าเรากดตัวเลยที่อยู่ทางขวา จะสามารถเปลี่ยนตัวเลขได้ ตัวเลขเหล่านี้ มีไว้เพื่อ การจัดล าดับเลเยอร์นั่นเอง

3.เมื่อเราต้องการจะเรียกเลเยอร์ไหน ก็คลิกที่ชื่อเลเยอร์ในช่อง Layer Palette ได้เลย เพียงเท่านี้เลเยอร์ที่อยุ่ใน Document ก็จะถูกเรียกไปด้วย

4.ถ้าคลิกที่เลเยอร์แล้วกด ctrl ลากไปไว้ในเลเยอร์ ซ้อนกันได้ในทันที (หรือจะแยกออกมาก็ได้ โดยกด Ctrl ค้างแล้วลากออกมาเช่นกัน)

5.เคร่ืองหมายรูปตา ใช้ในการก าหนดว่าจะแสดงหรือไม่แสดงเลเยอร์ โดยการคลิกที่รูปตาว่าจะให้เปิด หรือ ปิด และยังเลือกได้ว่าจะเปิดปิดการแสดงเลเยอร์ใดบ้าง โดยการคลิกที่รุปตาของ เลเยอร์นั้น

การก าหนดคุณสมบัติของเฟรม

การแบ่งหน้าจอการท างานเป็นลักษณะเฟรม เราควรจะก าหนดคุณสมบัติต่างๆของเฟรม(ในส่วนของเฟรมหลัก) ซึ่งการก าหนด คุณสมบัติเฟรมนี้สามารถท าได้โดย 1.คลิกที่เส้นแบ่งเฟรม 2.จะปรากฏหน้าต่าง Frame properties ขึ้นมาด้านล่าง 3.ท าการก าหนดคุณสมบัติเฟรม

การย่อ-ขยายเฟรม

การย่อ-ขยายเฟรม มีวิธีการดังนี้ 1.คลิกที่เส้นแบ่งเฟรม 2.ลากเมาส์เพื่อย่อ หรือขยายเฟรม 3.คลิกพื้นที่ว่าง ก็จะได้ขนาดเฟรมตามต้องการ

วิธีการลบเฟรม

ในกรณีที่เราต้องการยกเลิกใช้งานเฟรม เราสามรถที่จะลบเฟรมน้ันออกจากเว็บเพจได้ ส่วนวิธีการก็สุดแสนจะง่านดาย ดังนี้ครับ 1.คลิกเมาส์ที่เส้นแบ่งเฟรม 2.ลากเมาส์ไปให้ชิดขอบด้านใดด้านหน่ึง เฟรมนั้นๆจะถูกยุบรวมกับเฟรมที่ชิดด้วย 3.คลิกที่พื้นที่ว่าง เฟรมจะหายไปเรียบร้อย

หากเราต้องการจะสร้างเฟรมย่อยเพิ่มเติมเข้าไปอีก ก็สามารถท าได้ดดย 1.คลิกที่พื้นที่ที่ต้องการจะสร้างเฟรมใฟม่

2.คลิกปุ่ม แล้วเลือกรูปแบบเฟรมที่เราต้องการ

3.จะได้เฟรมเพิ่มทันที

วิธีการสร้างเว็บเพจภายในเฟรม

เมื่อเราสร้างเฟรมขึ้นมาได้แล้ว จากนี้เราก็จะมาเร่ิมออกแบบเว็บเพจในเฟรมนั้นซึ่งมีอยู่ด้วยกัน 2 แบบ คือ

1.การออกแบบเฟรมและสร้างเว็บเพจภายในเฟรมเลย 2.การน าเว็บเพจที่สร้างไว้แล้ว มาเปิดในเฟรม ส าหรับแบบที่ 1 แล้วไม่มีขั้นตอนยุ่งยากสักเท่าไหร่ เพราะว่าเราแค่คลิกที่พิ้นที่การท างานของเฟรมจากนั้นก็ลงมือพิมพ์ข้อความ หรือลงรูปภาพ ลงไปได้เลย เหมือนกับการออกแบบเว็บเพจปกติ แต่ถ้าเป็นแบบที่ 2 จะเป็นการน าเข้าเว็ลบเพจที่เราออกแบบไว้มาแล้วมาเปิดในเฟรม ซึงมีขึ้นตอนดัง นี ้ การน าเว็บเพจมาเปิดในเฟรม 1.คลิกที่พื้นที่การท างานของเฟรมย่อยที่เราต้องการ 2.ไปที่ Menu Bar เลือก File > Open in Frame... (หรือกด Ctrl+Shift+O )

วิธีการบันทึกเฟรม

การบันทึกเฟรมมีหลัก ง่ายๆคือ เราต้องก าหนดชื่อของแต่ละเฟรม ทั้งเฟรมหลักและเฟรมย่อน ให้เหมือนกับการบันทึกข้อมูลหน้าเว็บเพจทั่วไปนั่นแหละ โดยเร่ิมจาก การบันทึกเฟรมย่อย 1.คลิกที่เฟรมที่จะบันทึก 2.ไปที่ Menu Bar เลือก File > save Frame As.. หรือกด(Ctrl+Shift+S)

3.ก าหนดที่เก็บไฟล์ แล้วคิลกปุ่ม

การเซฟเฟรมหลัก 1.คลิกที่เส้นขอบเฟรม 2.ไปที่ Menu Bar เลือก File > Save frameset As... หรือกด (Ctrl+Shift+S)

3.ก าหนดที่เก็บไฟล์ แล้วคลิกที่

การสร้างลิงค์จากข้อความ

ลิงค์ (Link) หรือจุดเชื่อมโยงเว็บเพจ มีหลายรูปแบบดังนี้

การท าลิงค์แบบข้อความ การท าลิงค์ไปยัง E-mail การท าลิงคืไปยัง Named Anchor

การท าลิงค์แบบ Rollover Image การท าลิงค์ใน Dreamweaver 8 ส่วนส าคัญจะอยุ่ตรงที่แถบ Properties ซึ่งจะมีอยู่ 2 ส่วนด้วยกัน ได้แก่

1.Link คือ แถบส าหรับเลือกไฟล?ที่ต้องการจะลิงค์ไปถึง 2.Target คือ แถบส าหรับเลือกรูปแบบของปลายทาง ซึ่งได้แก่ _blank คือ การแสดงเว็บเพจปลายทางในหน้าต่างใหม่ _parent คือ การแสดงเว็บเพจที่หน้าต่างเด่ียว แต่อยู่ในเฟรมหลัก _self คือ การแสดงเว็บเพจในเฟรมเดียวกับต้นทาง _top คือการแสดงผลเว็บเพจ โดยจะไม่มีเฟรม

วิธีสร้างลิงค์จากข้อความ 1.พิมพ์ข้อความลงไป 2.ลากเม้าส์ทีบข้อความที่ต้องการ 3.คลิกที่ ในแถบ properties เพื่อเลือกไฟล์ที่จะลิงค์

4.เมื่อเลือกได้แล้ว ให้คลิกปุ่ม

5.ข้อความกลายเป็นลิงค์เรียบร้อยแล้ว

การสร้างลิงค์จากรูปภาพ

การสร้างลิงค์ด้วยรูปภาพก าลังเป็นที่นิยมในปัจจุบันน้ี ซึ่ง Dreamweaver 8 ก็สามารถท าได้ง่ายๆดังนี้ 1.คลิกที่รูปภาพ 2.เลือกไฟล์ที่จะลิงค์ โดยคลิกที่ ในแถบ Properties

3.คลิกที่ปุ่ม 4.ทดสอบผลทาง Browser โดยการกด F12

การท าลิงค์ไปยังเว็บไซต์อื่น

การท าลิงค์ไปยังเว็บไซต์อ่ืน สามารถท าได้ทั้งแบบข้อความและรูปภาพ วิธีการท า ก็มดีังนี้ 1.ถ้าเป็นข้อความให้ลากเมาส์ข้อความสั้นๆ ส่วนถ้าเป็นรูปให้คลิกที่รูป 2.พิมพ์ http:// ชื่อเว็บไซต์ ลงในช่อง Link และเลือกรูปแบบปลายทาง 3.คลิกพื้นที่ว่าง จากนั้นก็ดูผลทาง Browser

การเปลี่ยนสีของตัวอักษรท่ีเป็นลิงค์

สีของตัวอักษรเราสามารถเปลี่ยนให้เป็นสีอะไรก็ได้ โดยการท าตามขั้นตอนดังนี้ 1.เปิดหน้าต่าง Page Properties ขึ้นมา 2.เลือกที่หัวข้อ Link ให้ก าหนดค่าเหล่านี้ Link Color : สีของลิงค์ Visited links : สีของลิงค์ที่เคยเข้าชมแล้ว Rollover Link : สีของลิงค์แบบ Rollover Active link : สีของลิงค์แบบ Active Underline Style : ลักษณะการขีดเส้นใต้ข้อความที่เป็นลิงค์

3.เมื่อเราก าหนดเรียบร้อยแล้วให้คิลกปุ่ม

4.เมื่อท าการทดสอบผลกับ Browser จะเห็นการเปลี่ยนแปลงตามที่เราก าหนดไว้

การน าไฟล์ Flash มาใช ้

วิธีการน าไฟลื Flash มาใช้ มีขั้นตอนดังน้ี 1.วางเคอเซอร์บนพื้นที่การท างาน 2.ไปที่ Menu Bar เลือก Insert > Media > Flash หรือกด Ctrl+Alt+F 3.เลือกไฟล์ Flash ที่จะน ามาใช้งาน (เฉพาะนามสกุล .swf)

4.คลิกปุ่ม 5.ที่หน้าจอการท างานจะแสดงที่ตั้งของไฟลื Flash 6.ทดสอบผลทาง Browser โดยการกด F12

การเปลี่ยน Title ของเว็บเพจ จริงๆ แล้วก็เป็นเทคนิคที่ช่วยให้ Search Engine หาเว็บเราเจอ และเป็น

การสื่อกับผู้เยี่ยมชมเว็บของเรา มาดูขั้นตอนการท า

ขั้นตอนการท า

1. ท าการเปลี่ยนโดยใช้ Dreamweaver สร้าง / เปิดเอกสารที่เราต้องการแก้ไข จากนั้นเปลี่ยน Title ได้

จากเมนู Title ด้านบนได้เลย ดังภาพ

การท า Magic Wand

วิ่งตามเมาส์ก็คล้ายๆ กับลูกบอลวิ่งตามเมาส์ แต่เราไม่ใช้รูปภาพท าให้เว็บที่เราท าไม่ช้า อันนี้ก็เป็น

โค้ดที่ส าเร็จรูปอยู่แล้วเพียงแต่เราน ามาวางก็ใช้วานได้เลย

ขั้นตอนการใช้

1. เปิดเอกสารที่เราต้องการใส่ Script ขึ้นมา หลังจากนั้นให้น าโค้ดทั้งหมดมาวางใน Tag Body

2. หลังจากนั้นลอง F12 ทดสอบดุนะครับว่าใช้ได้หรือไม่

การท า POP-UP MENU ด้วยการวาด layer จาก Dreamweaver

1. เตรียมภาพที่เราต้องการ สร้างเมนู ขึ้นมา เป็นจุดเร่ิม

2. วาด เลเยอร์ไปใกล้ๆ แล้วน า Table มาแบ่ง

3. ใช้ Rollover Image ในการท า ทิคนิค ช่วยเปลี่ยน รูปแบบ ของภาพ

>>

4. จากนั้นให้เราก าหนดค่าเร่ิมต้นของ layer ที่เราสร้างให้เป็นแบบ hidden เพื่อกการซ่อน Layer จาก properties (ก าหนดตรง Vis ให้เป็น hidden) และก าหนดชื่อของ layer นี้ด้วยในตัวอย่างผมใช้ชื่อว่า pop

5. จากนั้นไปที่ Menu ที่เราสร้าง จากนั้น เปิด Tag Inspectoc > Behavions

6. กด เคร่ืองหมาย + และเลือก Show - Hide Layers

7. จะได้ Menu นี้ขึ้นมา ซึ่งชื่อว่า หน้าต่าง Menu ว่า Show-Hide Layer ในขั้นตอนแรกให้เราเลือกไปที่ชื่อ Layer ที่เราได้ท าการตั้งชื่อไว ้(POP) แล้วให้เลือกไปที่ปุ่ม Show ดังรูป จากนั้นให้เราท าการคลิ๊กที่ OK ไปก่อน 1 คร้ัง

8. ท าอย่างเดิมอีกครั้ง แ้ล้ว แต่ คร้ังที่ 2 เลือกปุ่ม Hide จากนั้น เปลี่ยน Events

คร้ังที่ท า อันแรก Show ให้ Events เป็น onMouseOver

คร้ังที่ 2 Hide ให้ Events เป็น OnMouseOut