ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
การพัฒนาเว็บเบื้องต้นด้วย Macromedia Dreamweaver
2
หัวข้อในวันนี้ ทำความรู้จักเว็บไซต์ ขั้นตอนในการพัฒนา website
การจัดการเกี่ยวกับเว็บเพจ การใส่ตัวอักษร
3
การใส่ภาพ การใส่ flash การสร้างลิ้งก์
4
มาทำความรู้จักกับเว็บไซต์
1 เว็บไซต์ประกอบด้วย หลายเว็บเพจ 1 เว็บเพจ คือ ไฟล์เอกสาร HTML 1 ไฟล์ HTML (Hypertext Markup Language)
5
ใน 1 เว็บไซต์ จะมี หน้าหลัก 1 หน้าเรียกว่า โฮมเพจ (Homepage)
1 ไฟล์ html มีการใส่รูปภาพ ภาพเคลื่อนไหว และอื่นๆ อีกมากมาย
6
website ........ webpage (index.htm) ……. webpage (king.htm) …….
(map.htm) ……. website
7
ข้อควรรู้ในการทำเว็บไซต์
ข้อมูลและรูปภาพที่นำมาประกอบการทำเว็บไซต์ต้องบอกแหล่งอ้างอิงด้วย
8
ขั้นตอนในการพัฒนาเว็บไซต์
เตรียมข้อมูล ออกแบบเว็บเพจ พัฒนา อัพโหลด file ไปยัง remote site
9
เริ่มต้นการใช้งาน Macromedia Dreamweaver
11
ความรู้เกี่ยวกับไซต์
Local site คือ การสร้าง folder เพื่อเก็บไฟล์งานต่างๆ ไว้ในเครื่องของเรา Remote site คือ การเก็บไฟล์งานไว้ที่เครื่อง web server
12
Remote site เช่น web server ของ มสด. อัพโหลด Local site เช่น
C:\MyDocument\my_website
13
การสร้าง local site
17
จะเก็บไฟล์ที่ทำเว็บไว้ที่ไหน Folder อะไร
C:\my_website\ จะเก็บไฟล์ที่ทำเว็บไว้ที่ไหน Folder อะไร
18
เลือก None (ไม่ติดต่อกับ remote server)
19
คลิกเลือกปุ่ม Done
20
Local Site
21
Local Site
22
เริ่มต้นการสร้างเว็บเพจ
เลือก HTML
24
เริ่มต้นด้วยการ save file ก่อนเลย
หลักการตั้งชื่อไฟล์ หน้าแรก หรือ homepage ควรตั้งชื่อเป็น index.html home.html default.html
25
หลักการตั้งชื่อไฟล์ (ต่อ)
ชื่อไฟล์ต้องเป็นตัวอักษรภาษาอังกฤษตัวพิมพ์เล็กเท่านั้น ใช้เลข 0-9 ประกอบได้ ชื่อไฟล์ห้ามมีเว้นว่างระหว่างชื่อ (space) ควรใช้ขีดล่าง (_) หรือขีดกลาง (-) ถ้าต้องการแบ่งชื่อไฟล์ เช่น my_work.htm
26
หลักการตั้งชื่อไฟล์ (ต่อ)
ห้ามใช้ตัวอักขระพิเศษ เช่น % * > < / , ในการตั้งชื่อไฟล์ หลีกเลี่ยงการขึ้นชื่อไฟล์ด้วยตัวเลข ตั้งชื่อไฟล์สั้นแต่ได้ใจความ
29
แถบเครื่องมือ แบบการทำงาน หน้าต่างออกแบบ
คุณสมบัติของเครื่องมือที่เลือกใช้
30
แทรกตาราง แทรกรูปภาพ แทรกสื่ออื่นๆ สร้าง link ในหน้าเดียวกัน
ไปจดหมาย แทรกรูปภาพ สร้าง link ในหน้าเดียวกัน
31
มุมมองออกแบบ
32
มุมมองภาษา HTML
33
ภาษา HTML มุมมองออกแบบ
34
การจัดการกับหน้า (webpage)
คลิกเมาส์ขวาที่หน้าออกแบบ เลือก Page Properties
36
การเปลี่ยนขนาดตัวอักษร
37
การเปลี่ยนสีตัวอักษร
38
การเปลี่ยนสีพื้นหลัง
39
การเปลี่ยนพื้นหลังให้เป็นรูปภาพ
40
การใส่ชื่อให้กับเว็บเพจ (webpage)
41
การจัดการเกี่ยวกับ อักษรภาษาไทย
42
เลือก Thai (Windows)
44
การใส่ตัวอักษรในหน้าออกแบบ
สามารถพิมพ์ตัวอักษรลงใน พื้นที่ว่างในส่วนของ design view ได้เลย
45
การใส่ตัวอักษร
46
คุณสมบัติของตัวอักษร
47
การใส่ตาราง (Table) เลือกรูปตาราง ที่แถบเครื่องมือ
49
ส่วนสำคัญ คือ Border ถ้า = 0 จะไม่ปรากฏเส้นตาราง
คุณสมบัติของตาราง ส่วนสำคัญ คือ Border ถ้า = 0 จะไม่ปรากฏเส้นตาราง
50
การใส่สื่อต่างๆ ใน webpage
รูปภาพ Flash ควรนำไฟล์สื่อเหล่านี้ไปจัดเก็บใน local site ก่อน
51
การใส่รูปภาพในเวบเพจ
เลือกรูปต้นไม้ที่แถบเครื่องมือ
54
คุณสมบัติของรูปภาพ
55
crop (ตัดภาพ) brightness+contrase ความสว่าง และความเข้มของสี
sharpen (ความคมชัด)
56
crop (ตัดภาพ)
57
brightness+contrase ความสว่าง และความเข้มของสี
58
sharpen (ความคมชัด
59
การใส่ไฟล์ flash
62
คุณสมบัติของ flash
63
การ Preview ดูเว็บเพจผ่าน web browser ทำได้ด้วยการ กดปุ่ม F12
64
การสร้างการเชื่อมโยง (hyper link)
การลิ้งก์จากตัวอักษร การลิ้งก์จากจากรูปภาพ การลิ้งก์ไปยัง อีเมล การลิ้งก์ไปเอกสารในหน้าเดียวกัน
65
เราสร้างลิ้งก์ไปไหนได้บ้าง?
ลิ้งก์ไปยังไฟล์อื่นๆ ใน website ของเรา ลิ้งก์ไปยัง website อื่นๆ
66
การกำหนดสีและรูปแบบของลิ้งก์
คลิ๊กขวา เลือก Page properties
69
1. การสร้างลิ้งก์จากตัวอักษร
พิมพ์ข้อความที่ต้องการเชื่อมโยง ทำการ hilight ข้อความที่ต้องการเชื่อมโยง เลือกไฟล์ที่ต้องการเชื่อมโยง
74
ลิ้งก์ไฟล์ในเว็บเดียวกัน
75
ลิ้งก์ไปยังเว็บไซต์ข้างนอก
พิมพ์ URL ที่ต้องการลิ้งก์ลงไป
76
2. การสร้างลิ้งก์จากรูปภาพ
คลิ๊กเลือกรูปภาพที่ต้องการลิ้งก์ เลือกไฟล์ หรือ URL ที่ต้องการลิ้งก์ไปถึง
78
ใส่ชื่อไฟล์ที่ต้องการลิ้ง หรือ ใส่ชื่อเว็บไซต์ที่ต้องการลิ้งก์ไป
79
3. การสร้างลิ้งก์ไปยังอีเมล
พิมพ์ข้อความที่ต้องการลิ้งก์ Hilight ข้อความที่ต้องการลิ้ง คลิ๊กรูปซองจดหมายที่แถบเครื่องมือ
82
4. การลิ้งก์ไปเอกสารในหน้าเดียวกัน
83
ต้นทาง . ปลายทาง
84
1. การกำหนดปลายทางของลิ้งก์ (Target)
Hilight เลือกส่วนที่การให้ลิ้งก์ เลือก Named anchor ที่แถบเครื่องมือ ใส่ชื่อ anchor
88
2. กำหนดต้นทางของลิ้งก์ (Source)
Hilight ต้นทางที่ต้องการลิ้งก์ ใส่เครื่องหมาย # ตามด้วยชื่อของ anchor
งานนำเสนอที่คล้ายกัน
© 2024 SlidePlayer.in.th Inc.
All rights reserved.