การพัฒนาเว็บเบื้องต้นด้วย Macromedia Dreamweaver

งานนำเสนอเรื่อง: "การพัฒนาเว็บเบื้องต้นด้วย Macromedia Dreamweaver"— ใบสำเนางานนำเสนอ:

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

10

11 ความรู้เกี่ยวกับไซต์
Local site คือ การสร้าง folder เพื่อเก็บไฟล์งานต่างๆ ไว้ในเครื่องของเรา Remote site คือ การเก็บไฟล์งานไว้ที่เครื่อง web server

12 Remote site เช่น web server ของ มสด. อัพโหลด Local site เช่น
C:\MyDocument\my_website

13 การสร้าง local site

14

15

16

17 จะเก็บไฟล์ที่ทำเว็บไว้ที่ไหน Folder อะไร
C:\my_website\ จะเก็บไฟล์ที่ทำเว็บไว้ที่ไหน Folder อะไร

18 เลือก None (ไม่ติดต่อกับ remote server)

19 คลิกเลือกปุ่ม Done

20 Local Site

21 Local Site

22 เริ่มต้นการสร้างเว็บเพจ
เลือก HTML

23

24 เริ่มต้นด้วยการ save file ก่อนเลย
หลักการตั้งชื่อไฟล์ หน้าแรก หรือ homepage ควรตั้งชื่อเป็น index.html home.html default.html

25 หลักการตั้งชื่อไฟล์ (ต่อ)
ชื่อไฟล์ต้องเป็นตัวอักษรภาษาอังกฤษตัวพิมพ์เล็กเท่านั้น ใช้เลข 0-9 ประกอบได้ ชื่อไฟล์ห้ามมีเว้นว่างระหว่างชื่อ (space) ควรใช้ขีดล่าง (_) หรือขีดกลาง (-) ถ้าต้องการแบ่งชื่อไฟล์ เช่น my_work.htm

26 หลักการตั้งชื่อไฟล์ (ต่อ)
ห้ามใช้ตัวอักขระพิเศษ เช่น % * > < / , ในการตั้งชื่อไฟล์ หลีกเลี่ยงการขึ้นชื่อไฟล์ด้วยตัวเลข ตั้งชื่อไฟล์สั้นแต่ได้ใจความ

27

28

29 แถบเครื่องมือ แบบการทำงาน หน้าต่างออกแบบ
คุณสมบัติของเครื่องมือที่เลือกใช้

30 แทรกตาราง แทรกรูปภาพ แทรกสื่ออื่นๆ สร้าง link ในหน้าเดียวกัน
ไปจดหมาย แทรกรูปภาพ สร้าง link ในหน้าเดียวกัน

31 มุมมองออกแบบ

32 มุมมองภาษา HTML

33 ภาษา HTML มุมมองออกแบบ

34 การจัดการกับหน้า (webpage)
คลิกเมาส์ขวาที่หน้าออกแบบ เลือก Page Properties

35

36 การเปลี่ยนขนาดตัวอักษร

37 การเปลี่ยนสีตัวอักษร

38 การเปลี่ยนสีพื้นหลัง

39 การเปลี่ยนพื้นหลังให้เป็นรูปภาพ

40 การใส่ชื่อให้กับเว็บเพจ (webpage)

41 การจัดการเกี่ยวกับ อักษรภาษาไทย

42 เลือก Thai (Windows)

43

44 การใส่ตัวอักษรในหน้าออกแบบ
สามารถพิมพ์ตัวอักษรลงใน พื้นที่ว่างในส่วนของ design view ได้เลย

45 การใส่ตัวอักษร

46 คุณสมบัติของตัวอักษร

47 การใส่ตาราง (Table) เลือกรูปตาราง ที่แถบเครื่องมือ

48

49 ส่วนสำคัญ คือ Border ถ้า = 0 จะไม่ปรากฏเส้นตาราง
คุณสมบัติของตาราง ส่วนสำคัญ คือ Border ถ้า = 0 จะไม่ปรากฏเส้นตาราง

50 การใส่สื่อต่างๆ ใน webpage
รูปภาพ Flash ควรนำไฟล์สื่อเหล่านี้ไปจัดเก็บใน local site ก่อน

51 การใส่รูปภาพในเวบเพจ
เลือกรูปต้นไม้ที่แถบเครื่องมือ

52

53

54 คุณสมบัติของรูปภาพ

55 crop (ตัดภาพ) brightness+contrase ความสว่าง และความเข้มของสี
sharpen (ความคมชัด)

56 crop (ตัดภาพ)

57 brightness+contrase ความสว่าง และความเข้มของสี

58 sharpen (ความคมชัด

59 การใส่ไฟล์ flash

60

61

62 คุณสมบัติของ flash

63 การ Preview ดูเว็บเพจผ่าน web browser ทำได้ด้วยการ กดปุ่ม F12

64 การสร้างการเชื่อมโยง (hyper link)
การลิ้งก์จากตัวอักษร การลิ้งก์จากจากรูปภาพ การลิ้งก์ไปยัง อีเมล การลิ้งก์ไปเอกสารในหน้าเดียวกัน

65 เราสร้างลิ้งก์ไปไหนได้บ้าง?
ลิ้งก์ไปยังไฟล์อื่นๆ ใน website ของเรา ลิ้งก์ไปยัง website อื่นๆ

66 การกำหนดสีและรูปแบบของลิ้งก์
คลิ๊กขวา เลือก Page properties

67

68

69 1. การสร้างลิ้งก์จากตัวอักษร
พิมพ์ข้อความที่ต้องการเชื่อมโยง ทำการ hilight ข้อความที่ต้องการเชื่อมโยง เลือกไฟล์ที่ต้องการเชื่อมโยง

70

71

72

73

74 ลิ้งก์ไฟล์ในเว็บเดียวกัน

75 ลิ้งก์ไปยังเว็บไซต์ข้างนอก
พิมพ์ URL ที่ต้องการลิ้งก์ลงไป

76 2. การสร้างลิ้งก์จากรูปภาพ
คลิ๊กเลือกรูปภาพที่ต้องการลิ้งก์ เลือกไฟล์ หรือ URL ที่ต้องการลิ้งก์ไปถึง

77

78 ใส่ชื่อไฟล์ที่ต้องการลิ้ง หรือ ใส่ชื่อเว็บไซต์ที่ต้องการลิ้งก์ไป

79 3. การสร้างลิ้งก์ไปยังอีเมล
พิมพ์ข้อความที่ต้องการลิ้งก์ Hilight ข้อความที่ต้องการลิ้ง คลิ๊กรูปซองจดหมายที่แถบเครื่องมือ

80

81

82 4. การลิ้งก์ไปเอกสารในหน้าเดียวกัน

83 ต้นทาง . ปลายทาง

84 1. การกำหนดปลายทางของลิ้งก์ (Target)
Hilight เลือกส่วนที่การให้ลิ้งก์ เลือก Named anchor ที่แถบเครื่องมือ ใส่ชื่อ anchor

85

86

87

88 2. กำหนดต้นทางของลิ้งก์ (Source)
Hilight ต้นทางที่ต้องการลิ้งก์ ใส่เครื่องหมาย # ตามด้วยชื่อของ anchor