งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

การพัฒนาเว็บ เบื้องต้นด้วย 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) ……. webpage (map.htm) ……

7 ข้อควรรู้ในการทำ เว็บไซต์ ข้อมูลและรูปภาพที่ นำมาประกอบการทำ เว็บไซต์ต้องบอก แหล่งอ้างอิงด้วย

8 ขั้นตอนในการพัฒนา เว็บไซต์ เตรียมข้อมูล ออกแบบเว็บเพจ พัฒนา อัพโหลด file ไปยัง remote site

9 เริ่มต้นการใช้งาน Macromedia Dreamweaver

10

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

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

13 การสร้าง local site

14

15

16

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

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

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

20 Local Site

21

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 จะไม่ปรากฏเส้น ตาราง

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 เราสร้างลิ้งก์ไปไหน ได้บ้าง ? 1. ลิ้งก์ไปยังไฟล์อื่นๆ ใน website ของ เรา 2. ลิ้งก์ไปยัง website อื่นๆ

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

67

68

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

70

71

72

73

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

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

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

77

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

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

80

81

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

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

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

85

86

87

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


ดาวน์โหลด ppt การพัฒนาเว็บ เบื้องต้นด้วย Macromedia Dreamweaver.

งานนำเสนอที่คล้ายกัน


Ads by Google