ปฏิบัติการที่ 12 dreamweaver ครั้ง 1
DESCRIPTION
TRANSCRIPT
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 ของภาพ ใชเพอก าหนดอะไร ……………………………………………………………………
………………………………………………………………………………………………………………………….