1

ภาควชาวทยาการคอมพวเตอรและเทคโนโลยสารสนเทศ ม.นเรศวร

ปฏบตการท 12 การออกแบบเวบไซตดวยโปรแกรม Dream Weaver ครงท 1

วชา 001272 คอมพวเตอรสารสนเทศขนพนฐาน

รหส ชอ สาขา

คณะ หมเรยนท วนท เดอน พ.ศ

วตถประสงค

1. เพอแนะน าเครองมอในโปรแกรม Dreamweaver 2. เพอแนะน าการก าหนดคาเวบเพจ การแทรกตาราง แทรกภาพ แทรกการเชอมโยง

โปรแกรม Dreamweaver คออะไร

Dreamweaver เปนโปรแกรมประเภทการออกแบบเวบไซต (Web Design) ซงมคณสมบตในการใชงานในแบบ WYSIWYG (What You See Is What You Get) คอเปนโปรแกรมประเภทคณออกแบบมาอยางไรกบโปรแกรมของคณ คณกเหนงานของคณเปนแบบนน การใชงานของโปรแกรมจะอ านวยความสะดวกใหกบการออกแบบเวบเพจเปนอยางมาก เนองจาก เราไมจ าเปนตองมาน งเรยนรภาษาของ HTML เลย เรากสามารถสรางเวบไซต (Website) ไดอยางมออาชพแลว โปรแกรมยงรองรบมลตมเดยตางๆได เชน การใสเสยง การแทรกไฟลวดโอ การใชงานรวมกบโปรแกรม Flash และ Fireworks เปนตน

ซงโปรแกรมในแนวทางเดยวกนกบโปรแกรม Dreamweaver กยกตวอยาง เชน โปรแกรม FrontPage จากคาย Microsoft เปนตน ซงปจจบนอยในชดโปรแกรม Adobe

การเขาโปรแกรมใหเขาไปในชดโปรแกรมของ Adobeแลวเลอกไปท Adobe Dreamweaver

รปท 12.1 หนาแรกหลงเขาโปรแกรม

Object Palette

Site

Properties

Palette

Menu Bar

2

ภาควชาวทยาการคอมพวเตอรและเทคโนโลยสารสนเทศ ม.นเรศวร

สวนประกอบของ Dreamweaver

แถบค าสง (Menu Bar) เปนแถบทใชเกบค าสงทงหมดของโปรแกรม

แถบวตถ (Object Palette) เปนกลมเครองมอตางๆ ทใชในการควบคมวตถ บนชนงาน เอกสารเวบ เชน เสนกราฟก (Horizontal Rule), ตาราง, รปภาพ, เลเยอร (Layer)

แถบควบคมการท างาน (Properties Palette) เปนรายการทปรบเปลยนได ตามลกษณะการเลอกขอมล เชน หากมการเลอกทจะพมพ หรอแกไขเนอหา รายการกจะเปน สวนท างานทเกยวกบอกษร , การจดพารากราฟ ถาเลอกทรปภาพ รายการในแถบน กจะเปนค าสงตางๆ ทเกยวกบ การควบคมเรองรปภาพ

ขนตอนการปฏบต ขอใหนสตปฏบตตามดงสงตอไปน

ขนตอนท 1 สรางโฟลเดอร myWebsite (พมพตดกน) *กอนอนใหนสตโหลดไฟลชอ myWebsite.zip *

ขนตอนท 1.1 กอนเรมเพอใหการสรางเวบไซตมการจดการไปในทศทางเดยวกน ขอใหโหลดไฟล myWebsite.zip

ไปไวท C: แลวคลกขวาทไฟลนน เลอก “แยกทน” หรอ Extract Here จากนนนสตจะพบวามโฟลเดอรและรปภาพอย โดยม

โฟลเดอรชอ myWebsite และ Images ถาท าไดแลวใหขามไปขนตอนท 2

ขนตอน 1.2 หรออาจจะสราง Folder ชอ myWebsite ทไดรฟ C: กอน จากนนภายใน myWebsite สรางโฟลเดอร

Images จากนน น าไฟลภาพจากไฟล MyWebsite.zip มาวางไวท Images กจะไดดงรป 12.2

รปท 12.2 โฟลเดอรทสราง

ขนตอนท 2 สราง Site เพอจ าลองการท างานในเครอง

ใหนสตเลอกไปทเมน Site New Site (ครงแรก แตถาแกไขตองไปท Manage Site ..) จากนนใหก าหนดคาท ท

แทป Local Info ดงรป 12.3 จากนนก าหนดคา

- ก าหนดชอ Site ท Site Name ก าหนดวา myWebsite

- ก าหนดโฟลเดอรท างาน ท Local Root Folder ก าหนดวา C:\myWebsite (โฟลเดอรก าหนดไวในขนตอนท 1)

- ก าหนดโฟลเดอรรปภาพท Default Images Folder ก าหนดวา C:\myWebsite\images

3

ภาควชาวทยาการคอมพวเตอรและเทคโนโลยสารสนเทศ ม.นเรศวร

รปท 12.3 การเซต Site

เมอก าหนดเสรจแลวใหกด OK แลวใหดท Site Palette

รปท 12.4 แสดง Site ท Palette หลงจากการเซต

ขนตอน 3 เรมสรางไฟลงาน HTML

ขนตอนท 3.1 ใหเลอกไปท Create New HTML หรอ ไปทเมน FileNew จากนนเลอก HTML

รปท 12.5 แสดงขนตอนการเรมสราง HTML

4

ภาควชาวทยาการคอมพวเตอรและเทคโนโลยสารสนเทศ ม.นเรศวร

ขนตอนท 3.2 ก าหนดหนาจอแสดงผล (Document Windows) ขณะออกแบบ

หนาตางการท างานของ Dreamweaver สามารถเลอกหนาตางการท างานได 3 รปแบบ โดยการคลกไอคอนทอยในแถบเครองมอ Toolbar ดงน

Show Code View เปนหนาตางทใหแสดงเฉพาะโคด HTML ของหนาเวบเพจท ก าลงท างาน

Show Code and Design View เปนหนาตางทแสดงทงโคด HTML และหนาเวบเพจทก าลงท างาน

Show Design View ใหแสดงแตหนาเวบเพจไมตองแสดงโคด HTML

รปท 12.6 หนาจอการออกแบบ

ซงในทนขอใหนสตเลอกแบบท 3

ขนตอนท 3.3 ก าหนดคาใหเพจของเวบ ใหเลอกไปท Modify Page Properties.. หรอกดท Page Properties..

ดานลางของ Properties Palette จากนนกจะพบหนาจอเพอใหปรบคา ในทนจะลองปรบคาของแทปคอ Appearance (CSS)

และ Title/Encoding

- ทแทป Appearance (HTML) เพอก าหนดสพนหลง (Background Color) ภาพพนหลงของเพจ (Background

Image) หรอ สตวอกษร (Text Color)

- ทแทป Title/Encoding เพอก าหนด Titlebar ของเพจ และก าหนดภาษาทใชแสดง ในทนเลอก “Thai/Windows”

1 2

3 เพจทยงไม

บนทกจะขนวา

Untitled-… *

5

ภาควชาวทยาการคอมพวเตอรและเทคโนโลยสารสนเทศ ม.นเรศวร

รปท 12.7 การก าหนด Page Properties

หมายเหต กอนท าขนตอนตอไป ขอใหนสตบนทกไฟลนชอ index.html ไวทโฟลเดอร C:\myWebsite

ขนตอนท 4 แทรกตาราง

ขนตอนท 4.1 ไปทเมน Insert Table หรอ กดไปทเครองใน Insert

จะพบหนาจอส าหรบเพมตารางดงรปท 12.9

รปท 12.8 เครองมอ Insert

6

ภาควชาวทยาการคอมพวเตอรและเทคโนโลยสารสนเทศ ม.นเรศวร

ขนตอนท 4.2 ก าหนดคาตางๆของตาราง โดยก าหนดแถว 8 แถว (Rows) คอลมน 3 คอลมน (Columns) ก าหนด

ขนาดตาราง (Table Width) เปน 800 พกเซล (หนวยปรบขนาดม 2 แบบคอ Pixels กบ Percent) ถาเปน Percent

หมายถงใหปรบขนาดเปนเปอรเซนตหนาจอทแสดงจรง ปรบความหนาเสนขอบ (Border thickness) ก าหนดเปน 0

พเซล ปรบระยะหางของขอความหรอภาพ (Cell Padding) ภายในชองจากเสนขอบ ก าหนดเปน 0 พเซล และปรบ

ระยะหางของเสนดานใน-นอก (Cell Spacing) ก าหนดเปน 0 พเซล

รปท 12.9 การก าหนดแทรกตาราง

จากนนกจะไดตารางดงรปท 12.10 จากนนน าเมาสไปคลกทเสนขอบแลวก าหนด Properties ท Align เปน “Center”

เพอใหตารางอยตรงกลางเพจ

รปท 12.10 ตารางขนาด 8x3

ขนตอนท 4.3 การผสานหรอการรวมชองตารางและการก าหนดสในชองตาราง ใหนสตท าการเลอกบรเวณท

ตองการรวมชอง จากนนไปเลอกท อยใน Properties ดานลาง จากนนสามารถเลอกก าหนดสพนหลง

ไดท Bg ในทนขอใหรวมตารางแถวแรกและแถวท 2 ก าหนดสเหลอง ดงรปท 12.12

รปท 12.11 Properties ของตาราง

8 แถว 3 คอลมน

ขนาดตาราง 800 พกเซล

ความหนาเสนขอบเปน 0 พเซล

ปรบระยะหางของขอความ

ปรบระยะหางของเสนดาน

ใน-นอก

7

ภาควชาวทยาการคอมพวเตอรและเทคโนโลยสารสนเทศ ม.นเรศวร

รปท 12.12 ตารางทรวมชองและก าหนดสแลว

ตารางดงกลาวสามารถปรบขนาดชองตางๆไดโดยใชเมาสลากปรบแตงไดทนท

ขนตอนท 5 แทรกขอความและภาพในตาราง

ขนตอนท 5.1 แทรกขอความในแถวท 3 คอลมนท 1 วา “Menu” ซงสามารถปรบคาบางอยางไดท Properties เชน

ตวหนา ตวเอยง หรอต าแหนงการแสดง

ขนตอนท 5.2 แทรกภาพลงในชองตารางซงท าไดหลายแบบ ตวอยางเชน ใชเครองมอ d

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

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

รปท 12.13 คนหาภาพ

การแทรกภาพอกวธกคอ ใหไปดท Site ของเราทอยดานขวา โดยกดไปท “ASSETS” เพอเปลยนมมมองใหเหนภาพ

ของเราดวย ดงรป 12.14 เมอตองการภาพไหนกแคลากภาพนนลงไปบรเวณทตองการ

ไดทนท (แตตองเปนภาพทเตรยมไวแลว)

ขณะทเราจากไปวาง กจะมหนาจอแสดงขนมาให ใสคาขอความ(Alternate

Text) คอขอความนจะแสดงเมอน าเมาสชไปทภาพ และชอลงค (Long Description) ถา

ไมตองการก าหนดใหกด “Cancel” จากนนใหนสตน าภาพตางๆ ซงในทนออกแบบไว

แลว ทงป มเมน ปายเวบ (Banner) ตางๆ ใหไดต าแหนง ดงรปท 12.15

รปท 12.14 ภาพทอยใน Site ของเรา

8

ภาควชาวทยาการคอมพวเตอรและเทคโนโลยสารสนเทศ ม.นเรศวร

รปท 12.15 เพจทใสรปแลว

หมายเหต ภาพตางๆในโฟลเดอรน นสตสามารถออกแบบเพมเตมได เพราะมไฟลทสามารถออกแบบใน Photoshop ซงมอย

ในโฟลเดอร PSD ของ โฟลเดอร Images

ขนตอนท 6 ก าหนดการเชอมโยง (Links)

- ถาลงคเปนรปภาพ ใหน าเมาสไปคลกสภาพทตองการท าลงคจากนนไปก าหนดท Properties ดงรป

รปท 12.16 ก าหนดลงคใน Properties ของภาพ

o Link คอก าหนดชอไฟลหรอเวบไซตทตองการไปหลงกดทลงคนน

o Target คอหนาตางทตองการใหแสดง ในทนก าหนดเปน “_blank” ดงนนเวบจะเปดหนาตางใหมไป

ทกครงทกดลงคดงกลาว

o Border คอ เสนรอบรปภาพ ถาไมตองการใหก าหนดเปน 0

o Alt หรอ Alternate Text คอ ขอความทตองการใหปรากฏเมอเอาเมาสไปชภาพน

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

เหมอนกบทท ากบรปภาพ เชน ท าลงคไป “Naresuan University” ใช http://www.nu.ac.th

หมายเหต ในสวนของการท าเชอมโยง (Link) น อาจจะเปน URL ชอเวบไซต ไฟล HTML หรอไฟลอนๆ กได เชน

ไฟล Word, Excel, PDF, Power Point, Zip เปนตน ขนอยกบความตองการของผออกแบบ

9

ภาควชาวทยาการคอมพวเตอรและเทคโนโลยสารสนเทศ ม.นเรศวร

ขนตอนท 7 การดผลลพธเวบเพจในหนา Browser

ใหเลอกไปทเมน File Preview in Browser IExplore หรอ กด F12 โดยการดผลลพธใหบนทกไฟลกอน

(Ctrl+S) ทกครง

รปท 12.18 การแสดงใน Internet Explorer

ค าถามทายบท

1. การก าหนด Site ใน Dreamweaver มประโยชนอยางไร ………………………………………………………………

………………………………………………………………………………………………………………………….

2. การแสดงแบบ ASSETS ใน Sites เพออะไร …………………………………………………………………………

………………………………………………………………………………………………………………………….

3. การก าหนด Cell Spacing ในตาราง เพออะไร ……………………………………………………………………

………………………………………………………………………………………………………………………….

4. ขนาดของตารางมหนวยทใชปรบขนาดอะไรบาง ……………………………………………………………………

………………………………………………………………………………………………………………………….

5. Properties ชอ ALT ของภาพ ใชเพอก าหนดอะไร ……………………………………………………………………

………………………………………………………………………………………………………………………….