การเข้าใช้งาน Macromedia Dreamweaver 8

1. คลิ๊กท่ีปุ่ม Start -->All Programs --> Macromedia --> Macromedia Dreamweaver 8 หรือ คลิกท่ี เพ่ือเข้าสู่โปรแกรม

2. ในการเข้าใช้งานครั้งแรกนั้นเมื่อเข้าสู่โปรแกรมเราจะพบหน้าต่าง Workspace Setup ให้เลือกเป็นแบบ Designer จากนั้นคลิกปุ่ม OK

3. หลังจากนั้นเราจะพบหน้าเริ่มต้นของ Macromedia Dreamweaver Mx 2004 ซึ่งเราสามารถจะเริ่มต้นท าเว็บเพจได้ โดยคลิกเมนู File --> New

4. จะปรากฏหน้าต่าง New Document เลือก Basic page จากนั้นคลิกปุ่ม Create เพ่ือสร้างไฟล์ใหม่ การบันทึกหน้าเว็บเพจ เมื่อเราท าการสร้างเว็บเพจเสร็จเรียบร้อยเป็นที่พอใจแล้ว ให้ท าการเซฟไฟล์ โดยมีค าสั่งให้เลือกใช้ดังนี้

File > Save เซฟไฟล์ในชื่อเดิม File > Save As เซฟไฟล์ในชื่อใหม่ File > as Template เซฟไฟล์เป็นเทมเพลต File > All เซฟไฟล์ทั้งหมด

ขั้นตอนง่ายๆ ในการเซฟไฟล์มีดังนี้ 1. เลือกเมนู File > Save หรือ Save As... หรือ Save as Template... หรือ Save All

2. เลือกโฟลเดอร์ที่จะจัดเก็บไฟล์ ในช่อง Save in 3. ใส่ชื่อไฟล์ในช่อง File name แล้วกด Save

การสร้างตารางเพื่อออกแบบหน้า Homepage การสร้างตาราง สามารถท าได้ 2 วิธี คือ วิธีแรกของการสร้างตาราง คือจะต้องคลิกตรงบริเวณต าแหน่งที่ต้องการจะสร้างตารางแล้วคลิกค าสั่ง Insert บนเมนูบาร์ เลือกที่ Table

วิธีที่สองของการสร้างตาราง คือเราสามารถคลิกที่ไอคอน Table ( ) ที่ แท็บ Common ใน Insert Bar

รูปที่ 2 ขั้นตอนการสร้างตารางโดยคลิกที่ไอคอน Table บนแท็บ Common

เมื่อสร้างตารางแล้วจะปรากฏหน้าต่างดังนี้ ให้กรอกข้อมูลตามรูป แล้วคลิกตกลง

จะได้ตาราง ดังรูป

1.ให้นักเรียนท าการผสานเซลล์ในแถวแรก โดยคลุมแถบด าแถวแรก แล้วคลิกขวาเลือก Table > Merge Cells หรือคลิกท่ี รูปสี่เหลี่ยมผืนผ้ามุมล่างซ้าย ดังรูป ให้นักเรียนผสานเซลในแถวที่ 2 ท าเหมือนขั้นตอนที่ 1 การท าข้อความว่ิง พิมพ์ข้อความ ยินดีต้อนรับเข้าสู่เว็บไซต์ ปรับตัวหนังสือให้สวยงาม คลุมแถบด าที่ข้อความ

แล้วคลิกท่ี แถบ Properties > Quick tag editor ดังรูป แล้วพิมพ์ค าว่า marquee แล้วเคาะ enter

การปรับแต่งรายละเอียดของตาราง หากเราต้องการปรับแต่งรายละเอียดของตาราง ให้คลิกเลือกรูปภาพที่ต้องการแล้วปรับค่าต่างๆ ได้จากหน้าต่าง Properties แต่ก่อนอ่ืนเรามารู้จักกับค่าก าหนดต่างๆ ของตารางกันก่อน

Rows Cols

(จ านวนแถวและคอลัมน์) ระบุจ านวนแถวและคอลัมน์ของตารางตามต้องการ

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

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

CellPad ก าหนดระยะระหว่างข้อความในตารางกับขอบตาราง ค่านี้มีผลกับทั้งตาราง ค่าท่ีก าหนดไว้เป็นมาตรฐานคือ 1

CellSpace ก าหนดระยะห่างระหว่างเซลที่อยู่ในตาราง ค่านี้มีผลกับทั้งตาราง ค่าที่ก าหนดไว้เป็นมาตรฐานคือ 2

Align ใช้ระบุการจัดวางตารางให้ชิดซ้าย (Left) ชิดขวา (Right) กึ่งกลาง (Center) หน้าเว็บได้ โดยค่าท่ีก าหนดไว้เป็นมาตรฐาน (Default) คือ Left

Border ถ้าเราไม่ต้องการให้มีเส้นขอบตารางให้ก าหนดค่าในช่องนี้เป็น 0 หากเราต้องการให้มีเส้นขอบตารางให้ก าหนดความหนาของเส้นขอบได้ในช่องนี้

Clear Row Heights Clear Column Widths

ให้ Click mouse ที่ปุ่มเพ่ือลบค่าความสูงหรือความกว้างที่เราระบุให้กับตาราง

Convert Table Widths to Pixel Percent

ให้ Click mouse ที่ปุ่มเพ่ือแปลงค่าความกว้างของตารางที่เราก าหนดไว้จากพิกเซล เป็นค่าเปอร์เซ็นต์ หรอืจากค่าเปอร์เซ็นต์เป็นค่าพิกเซล

Light Brdr, Dark Brdr ระบุสีเส้นขอบในและขอบนอกของตาราง

Bg Color เป็นสีพ้ืนหลังของตาราง Brdr เป็นสีของขอบตาราง Bg Image เป็นรูปภาพที่ใช้เป็นพ้ืนหลังของตาราง

การแทรกแถวและคอลัมน์ การแทรกแถว 1. น าเคอร์เซอร์ไปวางยังต าแหน่งที่ต้องการจะแทรกแถว 2. คลิกเมาส์ปุ่มขวา ในเมนูย่อยให้เลือก Table > Insert Row หรือจากแถบเมนูให้เลือกค าสั่ง Modify > Table > Insert Row หรือ (Ctrl + M)

3. เพ่ิมแถวเข้ามาหนึ่งแถว ซึ่งมีขนาดของเซลล์เท่ากับขนาดของแถวเดิมที่เข้าไปแทรก

การแทรกคอลัมน์ 1. น าเคอร์เซอร์ไปวางไว้ข้างหน้าต าแหน่งที่ต้องการจะแทรกคอลัมน์ 2. คลิกเมาส์ปุ่มขวา ในเมนูย่อยให้เลือก Table > Insert Column หรือจากแถบเมนูให้เลือกค าสั่ง Modify > Table > Insert Column หรือ (Ctrl + Shift + A)

3. จะได้คอลัมน์เพ่ิมขึ้นมา ซึ่งมีขนาดของเซลล์เท่ากับคอลัมน์เดิม การลบแถวและคอลัมน์ การลบแถว 1. เลือกแถวที่ต้องการจะลบแล้วกดปุ่ม Delete 2. คลิกเมาส์ปุ่มขวา ในเมนูย่อยให้เลือก Table > Delete Row หรือจากแถบเมนูให้เลือกค าสั่ง Modify > Table > Delete Row หรือ (Ctrl + Shift +M)

3. แถวที่เลือกไว้จะหายไป

การลบคอลัมน์ 1. เลือกคอลัมน์ที่ต้องการจะลบแล้วกดปุ่ม Delete 2. คลิกเมาส์ปุ่มขวา ในเมนูย่อยให้เลือก Table > Delete Column หรือจากแถบเมนูให้เลือกค าสั่ง Modify > Table > Delete Column หรือ (Ctrl + Shift +-)

3. คอลัมน์ที่เลือกไว้จะหายไป

การใส่ภาพพื้นหลัง ( background )

1. คลิกท่ี เมนู Modify > Page properties.. จะได้หน้าต่างดังรูป

2. คลิกเลือกพ้ืนหลังที่ต้องการดังภาพ กดปุ่ม Apply เพ่ือแสดงตัวอย่าง กด OK เพ่ือตกลง

การใส่สีและขนาดให้กับข้อความใน Macromedia Dreamweaver 8

ขั้นตอนแรก อย่างแรกเลยเราก็ต้องสร้างข้อความไว้ก่อนค่ะ

พื้นหลงัท่ีเป็นรูปภาพ

พื้นหลงัท่ีเป็นสี

ขั้นตอนที่ 2 เมื่อสร้างข้อความเสร็จแล้วให้ท าเลือกข้อความที่เราจะใส่สี โดยการลากเมาท์ให้เป็นแถบสีด าดังภาพ

ขั้นตอนที่ 3 สังเกตที่บริเวณ Properties ด้านล่างค่ะ จากนั้นคลิกที่ช่องสีเหลี่ยมตามภาพค่ะ จะมีตารางสีปรากฏขึ้น ต้องการให้ข้อความสีอะไรก็คลิกท่ีช่องสีนั้นได้เลยค่ะ

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

ใส่ขนาด

รูปที่ 1 ภาพแสดงวิธีการเลือกเซลล์เพื่อแทรกรูปภาพในตาราง 2. เลือกค าสั่ง Insert ไปเลือกท่ี Image

รูปที่ 2 ภาพแสดงวิธีการเลือกเมนู Insert -> Image 3. หรือคลิกที่ไอคอน Image ( ) บนแท็บ Common ของแถบ Insert Toolber

รูปที่ 3 ภาพแสดงวิธีการเลือกไอคอน บนแท็บ Common เพื่อแทรกรูปภาพในตาราง 4. จากนั้นจะปรากฏกรอบ Select Image Source เพ่ือให้ผู้ใช้เลือกไฟล์รูปภาพที่ต้องการ

รูปที่ 4 ภาพแสดงหน้าต่าง Select Image Source เพื่อเลือกรูปภาพที่ต้องการจะแทรก 5. เมื่อเลือกเสร็จให้คลิกที่ปุ่ม OK ก็จะสามารถแทรกภาพในตาราง หรือเซลล์ที่ต้องการได้ การแทรกไฟล์ flash เมื่อเราใส่ Flahs Movie ลงในเว็บเพจ จะใช้แท็ก object และ embed ร่วมกัน เพ่ือให้การแสดงผลเป็นไปอย่างถูกต้อง เมื่อเราเปลี่ยนแปลงค่าของ Flahs Movie ใน Property Inspector แล้ว Dreamweaver ก็จะเปลี่ยนแปลงค่าที่เหมาะสมในแท็ก object และ embed ให้ด้วย ซึ่งขั้นตอนในการใส่ Flahs Movie ลงในเว็บเพจสามารถท าได้ดังนี้ 1. เลือกต าแหน่งที่ต้องการเพ่ิม Flash Movie 2. ใน Insert Bar เลือก Media Tab แล้วคลิกปุ่ม * หรือ เลือกเมนู Insert > Media > Flash * หรือกด Ctrl + Alt + F 3. เลือกไฟล์ Flash ที่จะเพ่ิมในเว็บเพจ 4. หลังจากท่ีเราแทรกไฟล์ Flash แล้ว สามารถที่จะดูการแสดงผลได้โดยการคลิกเลือกไฟล์ แล้วกดปุ่ม Play

5. จะปรากฎไฟล์ที่แสดงผล แต่หากต้องการหยุดก็ให้กดปุ่ม Stop การเชื่อมโยงเว็บเพจ (Link) การก าหนดต าแหน่งเป้าหมายของการเชื่อมโยง เป็นการก าหนดให้เว็บเพจนั้นแสดงบนหน้าต่างเว็บบราวเซอร์ใหม่ หรือแสดงที่หน้าต่างเดิม ซึ่งสามารถก าหนดได้ โดยการเลือก Properties แล้วเลือก Target แล้วเลือกค าสั่งที่ต้องการใช้ ดังนี้ _blank ให้แสดงเว็บเพจปลายทางในหน้าต่างใหม่ _parent ให้แสดงเว็บเพจปลายทางในหน้าต่างเดิม โดยจะแทนที่หน้าต่างเดิม _self ให้แสดงเว็บเพจปลายทางในพ้ืนที่ที่เป็นจุดเชื่อมโยง หากจุดเชื่อมโยงนั้นอยู่เฟรมทางซ้าย เว็บปลายทางจะปรากฏที่เฟามด้านซ้าย _top ให้แสดงเว็บเพจปลายทางในลักษณะเช่นเดียวกัน _parent

รูป Porperties Bar

การเชื่อมโยงในเว็บเพจเดียวกัน ใช้ในกรณีท่ีเนื้อหามีจ านวนมาก ต้องใช้ Scroll Bar เลื่อนไปยังเนื้อหาที่ต้องการ ท าให้ไม่สะดวกในการอ่านเนื้อหา จึงมีการสร้างการเชื่อมโยงภายในเว็บเพจเดียวกันขึ้น โดยการน าชื่อจุดเชื่อมโยงปลายทาง ไปใส่ไว้ในช่อง Link มีข้ันตอนดังนี้ 1. วางเคอร์เซอร์ไว้ตรงต าแหน่งที่ต้องการเชื่อมโยง

รูปการเลือกต าแหน่งจุดเชื่อมโยง

2. เลือกเมนู Insert เลือก Named Anchor

รูป Menu Insert Named Anchor

หรือคลิกท่ีรูป ที่แถบ Toolbar Common

3. จะปรากฏกรอบโต้ตอบ Named Anchor ให้ต้องชื่อจุดเชื่อมโยงปลายทาง แล้วกด OK

รูป Named Anchor Box

4. จะปรากฏสัญลักษณ์ “ สมอ ” หน้าข้อความที่เลือก การเชื่อมโยงภายในเว็บไซต์เดียวกัน การเชื่อมโยงลักษณะนี้ เป็นการเชื่อมโยงไปยังส่วนต่าง ๆ ที่อยู่ในไฟล์เว็บเพจอื่น แต่อยู่ในเว็บไซต์เดียวกัน มีข้ันตอนดังนี้ 1. เลือกข้อความหรือรูปภาพ ที่ต้องการสร้างเป็นจุดเชื่อมโยง

2. ไปที่ Properties ในช่อง Link ให้คลิกท่ี Browse for file ทางขวามือ เพ่ือเลือกไฟล์ที่ต้องการเชื่อมโยง จากนั้นคลิกปุ่ม OK

รูป Properties Bar

รูป Select File

หรือพิมพ์ต าแหน่งและชื่อไฟล์เว็บเพจที่ต้องการเชื่อมโยงลงในช่อง Link

รูป Properties Bar

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

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

พิมพ ์URL

3. จะปรากฎหน้าต่าง Insert Rollover Image ส าหรับก าหนด Rollover Image

- Original Image ก าหนดภาพที่จะแสดงบนหน้าจอเว็บเพจ - Pollover Image ก าหนดภาพที่จะแสดงเมื่อน าเมาส์ไปวางเหนือรูป - When Clicked, Go to URL ก าหนดไฟล์ที่จะเชื่อมโยงเมื่อมีการคลิกไปที่รูปภาพ

4. เซฟหน้าเว็บเพจ และกดปุ่ม F12 เมื่อน าเมาส์ไปวางเหนือรูปภาพ รูปภาพจะสลับเป็นรูปใหม่ที่เลือกไว้