คู่มือการสอน dreamweaver
Post on 28-Mar-2016
215 Views
Preview:
DESCRIPTION
TRANSCRIPT
1
คมอการสอน
2
1. หลกการออกแบบและพฒนาเวบไซต 2. รจกกบ Macromedia Dreamweaver 8 3. การท างานเบองตนกบเวบไซตและเวบเพจ 4. ขอความในเวบเพจ 5. ใสภาพประกอบเวบเพจ 6. การสรางไฮเปอรลงค (Hyperlink) 7. จดหนาเวบเพจดวยตาราง 8. การสรางฟอรม 9. เลนมลตมเดยบนเวบเพจ (Web Multimedia) 10. สรางเวบเพจใหโตตอบกบผชม (Javascript Behavior) 11. การบรหารจดการเวบไซต 12. การเผยแพรเวบไซต
Web Design Using Adobe PhotoShop CS and Macromedia Dreamweaver 8
ELEPHANT’S TALE LANGUAGE AND COMPUTER TRAINING CENTER
http://www.elephantstale.com/
3
ขนตอนการพฒนาเวบไซต
ขอควรทราบ เวบไซต(Website) : เปนทเกบเวบเพจ(URL)โดยใชบราวเซอรดงขอมล(-ชอหนงสอ-) Web Server : เครองคอมพวเตอรทใหบรการเผยแพรขอมล โฮมเพจ(Homepage) : เวบเพจซงเปนหนาแรก(-ปกหนงสอ-**index) เวบเพจ(Webpage) : หนาเวบ(-หนายอย-) + Dreamweaver มใชจดเรมตน แตเปนการรวบรวมผลงานตาง ๆ ทมมาเผยแพร ถาไมมอะไรจะใสใน dream คงตองไปหาใหมกอน + Dreamweaver มใชจดสดทาย เพราะผลทไดจาก dream มผสรางทราบคนเดยว ตองน าไป upload เพอเผยแพรใน Web Server
รปแบบของโครงสรางเวบไซต
แบบเรยงล าดบ เวบทจ านวนเวบเพจไมมาก/เวบทตองการน าเสนอขอมลแบบทละขน แบบระดบชน เวบทจ านวนเวบเพจมากขนพบทวไป
แบบผสม เวบทซบซอน
ก าหนดเปาหมาย และวางแผน
วเคราะห และจดโครงสรางขอมล
ออกแบบเวบ และเตรยมขอมล
ลงมอสราง และทดสอบ เผยแพร และสงเสรมใหเปนท
รจก ดแล และพฒนา
4
โครงสรางพนฐาน <html>
<head> <title>หวขอเวบเพจ</title>
</head> <body> สวนทมเนอหา และขอมลเกยวกบ ภาพ Link ทปรากฎในเวบเพจ
</body> </html>
รปแสดง File 1st.html
รปแสดงผลการ RUN File 1st.html
5
รปแสดงสวนประกอบ Macrmedia Dreamweaver
6
***ขอตกลง การสราง Macromedia Dreamweaver 1. Set up ภาษาไทย 2. ก าหนด site โดยสราง Folder images 3. Set Title & Font 4. Save หนาแรก index.. ชอหามภาษาไทย
การ SET UP Macromedia Dreamweaver ใหรองรบภาษาไทย วธท 1 การก าหนดทละเวบเพจ
วธท 2 การก าหนดภาษาเปนคาเรมตนใหกบทกเวบเพจ
7
รปแสดงการก าหนดฟอนตของ Dreamweaver 8 ส าหรบการใชงานภาษาไทย
รปแสดงการก าหนด encoding ส าหรบการใชงานภาษาไทย
การสราง Site
รปแสดงไดอะลอก Manage Sites
8
รปแสดงการก าหนดคารายการเมน Local Info
รปแสดงไดอะลอก Manage Sites หลงการก าหนดเวบไซตเสรจแลว
9
รปแสดงหนาจอของ Dreamweaver 8 เมอเปดเวบไซต Personal Home Page เพอใชงาน
รปแสดงหนาจอของ Dreamweaver 8 เมอ set Title, Font, Save As,Site
10
การสรางเวบเพจใหม(1) และ การสรางเวบเพจใหมจากไฟลตวอยางทออกแบบไว(2)
การสรางเวบเพจใหมจากไฟลตวอยางทออกแบบไว
การเปดเวบเพจเดม File > Open , เปดจาก Site
*ขอแตกตางของไฟลทเรยกใชงาน,ไฟลทท าการ save แลวและยงไม save
11
การบนทกเวบเพจ File > Save as, Ctrl + S *เปนภาษาองกฤษเทานน ,ไมมอกขระพเศษใดๆ,ตวพมพเลกทงหมด ,ใช_แทนการเวนวรรค,.html(กอน)=.htm
การก าหนดคณสมบตพนฐานของเวบเพจ
12
*Tracing Image ใชในกรณทตองการน าภาพตวอยงามาวางเพอชวยเปนแนวในการออกแบบเลยเอาทของเวบเพจ(ภาพนจะไมแสดงผลในบราวเซอร) Tracing image เลอกภาพทจะน ามาท าเปนตวอยาง Transparency ปรบความโปรงใสของภาพตวอยาง
ยอนกลบการท างาน History, Ctrl+Z ขอความ
-ใสขอความธรรดา( ชอ-นามสกล) Ctrl+X , Ctrl+C , Ctrl+V Format, Font, Size, Color จาก Insert Bar > Text
-จดต าแหนง
- วรรค Ctrl + Shift + Space , Insert Bar > Text > และ Space ( ) ตงคาใหวรรคโดยเคาะหลายครง Edit > Preferences
-ขนบรรทดใหมในยอหนา Enter, Shift+Enter, Insert Bar > Text >
13
*Dreamweaver ไมสามารถตดค าภาษาไทยได การตดค าขนกบบราวเซอรและสภาพแวดลอมผชมเวบ
- แทรกเสนคน HTML การก าหนดส คลกขวาทเสน > Edit Tag <hr>
- แทรกสญลกษณพเศษ - การ Copy จากโปแกรมอน/ตาราง Excel Edit > Paste Special
การใสภาพ
.Gif
.JPG/.JPEG
.PNG
14
การยกเลกไดอะลอกบอกซส าหรบใสค าอธบาย
15
ปรบแตงคณสมบตของภาพกราฟฟก
16
สรางเอฟเฟคตสลบภาพเมอชเมาส
สรางเวบเพจอลบมรปภาพ Commands > Create Web Photo Album
- โฟลเดอร images เกบไฟลขนาดใหญทโปรแกรมแปลงจากไฟลตนฉบบ - โฟลเดอร thumbnails เกบไฟลขนาดเลกทโปรแกรมแปลงจากไฟลตนฉบบ - โฟลเดอร pages เกบไฟลเกบไฟลเวบเพจซงแสดงภาพขนาดใหญ เวบเพจละ 1 ภาพจะไมมถาเราไม / - Index.htm ถาสรางมากกวา 1 อลบมในโฟลเดอรเดยวกนจะชอ index1.htm, index2.htm,..
17
ใสภาพฉากหลง
no-repeat แสดงภาพเดยวทมมบนซายของหนาเวบเพจ repeat เรยงแบบซ าๆ จนเตมเวบเพจ ทงแนวตงและแนวนอน repeat-x เรยงแบบซ าๆ จนเตมเวบเพจในแนวนอน repeat-y เรยงแบบซ าๆ จนเตมเวบเพจในแนวตง
18
การสรางไฮเปอรลงค(Hyperlink)(ลงค)การเชอมโยงกนของเอกสารบนอนเทอรเนต
1. การสรางลงคภายในเวบเพจเดยวกน
<a name="elephant"></a>
<a href="#elephant">Elephant</a>
2. การสรางลงคไปยงเวบเพจหรอไฟลภายในเวบไซตเดยวกน
<a href="index.html">หนาหลก</a>
Target _blank ใหเปดเวบเพจปลายทางในวนโดวใหม _parent ใหแสดงเวบเพจในเฟรมทครอบครมเฟรมปจจบน(กรณทใชเฟรม) _self ใหแสดงเวบเพจในเฟรมเดมของลงค _top ใหแสดงเวบเพจบนในวนโดวเดม โดยยกเลกเฟรมทครอบอยทงหมด
http://www.elephantstale.com/trainting/course.htm
โปรโตคอล ชอโดเมน พาธและชอไฟล
19
3. สรางลงคไปยงเวบไซตอน
4. สรางลงคเพอสงอเมลล
5. สราง Image Map
6. การสราง Navigation Bar
20
7. การสราง Jump Menu
21
จดหนาเวบเพจดวยตาราง โครงสรางของตาราง
การสรางตาราง
-ใสเนอหาในตาราง - การเลอกสวนตางๆ ของตาราง - เลอกทงตาราง - เลอกแถว/คอลมน - เลอกเซลในตาราง - เลอกสวนประกอบของตารางดวย Tag Selector
22
ปรบแตงคณสมบตของตาราง
- คณสมบตของตารางบน Properties Inspector - ปรบความกวาง/สงของตาราง - หนวยของตาราง - ต าแนง - ใสเสนขอบ - ใสสพน - ใสภาพฉากหลง - ปรบแตงคณสมบตของเซล
- คณสมบตของตารางบน Properties Inspector - ปรบความกวาง/สงของเซล แถว และคอลมภ - ปรบขนาดเซล แถว คอมลมภ ดวย Properties Inspector, คลกเมาส - จดต าแนงเนอหาภายในเซล - ใสสพน สเสนขอบ และภาพฉากหลงของเซล
ปรบแตงเซลในตาราง
- แทรกแถวและคอลมน - ลบแถวและคอลมน
23
- แยกเซล - รวมเซล
เรยงล าดบขอมลในตาราง Command > Sort Table
จดรปแบบตารางอตโนมต Command >Format Table น าตารางมาชวยจดเลยเอาทของเวบเพจ สรางตารางรวมภาพกราฟกจาก Photoshop********** 2 ชวโมง สราง Banner ดวย Photoshop จดหนาเวบเพจในมมมอง Layout จดหนาเวบเพจดวยเลเยอร( Layer) แบงหนาเวบเพจดวยเฟรม (Frame) การสราง Template และการใชงาน Library การสรางฟอรม (Form)
องคประกอบของการสรางฟอรม -ตวฟอรม -ฟอรมออบเจค - ป ม Submit และ Reset - องคประกอบอนๆ
24
25
26
การเลนมลตมเดยบนเวบเพจ (Web Multimedia)
สรางปม Flash
27
ปรบแตงคณสมบตของปม Flash
สรางขอความ Flash
สรางสไลดโชวภาพดวย Image Viewer เลน Flash Video บนเวบเพจ
การแสดงมลตมเดยของ Flash และ Shockwave
28
เลนมลตมเดยอนบนเวบ
.midi / .mid เลนเสงโนตดนตร
.wav เสยง
.aif เสยง
.mp3 เสยง
.rm บนทกเพลง
.mov เสยงและวดโอ
.avi เสยงและวดโอ
.wmv, asf เสยงและวดโอ
29
เลนมลตมเดยโดยใชปลกอน (Plugin)
30
สรางเวบเพจใหโตตอบกบผชม (JavaScript Behavior)
ตวอยางการน า Behavior มาใชงาน
- เปดวนโดวแบบปอปอพ สรางแลวเลอกออกเจคท Behaviors
31
- เลนเสยง เลอกออบเจคทจะใชเลนเสยง
- แสดงกลองขอความ
เลอกภาพกราฟก
32
- แสดงขอความบนแถบสถานะ
เลอกไฮเปอรลงค Action เลอก Set Text > Set Text of Status Bar
การบรหารจดการเวบไซต การเผยแพรเวบไซต
top related