การพัฒนาเว็บเบื้องต้นด้วย Macromedia Dreamweaver
หัวข้อในวันนี้ ทำความรู้จักเว็บไซต์ ขั้นตอนในการพัฒนา website การจัดการเกี่ยวกับเว็บเพจ การใส่ตัวอักษร
การใส่ภาพ การใส่ flash การสร้างลิ้งก์
มาทำความรู้จักกับเว็บไซต์ 1 เว็บไซต์ประกอบด้วย หลายเว็บเพจ 1 เว็บเพจ คือ ไฟล์เอกสาร HTML 1 ไฟล์ HTML (Hypertext Markup Language)
ใน 1 เว็บไซต์ จะมี หน้าหลัก 1 หน้าเรียกว่า โฮมเพจ (Homepage) 1 ไฟล์ html มีการใส่รูปภาพ ภาพเคลื่อนไหว และอื่นๆ อีกมากมาย
website ........ webpage (index.htm) ……. webpage (king.htm) ……. (map.htm) ……. ........ website
ข้อควรรู้ในการทำเว็บไซต์ ข้อมูลและรูปภาพที่นำมาประกอบการทำเว็บไซต์ต้องบอกแหล่งอ้างอิงด้วย
ขั้นตอนในการพัฒนาเว็บไซต์ เตรียมข้อมูล ออกแบบเว็บเพจ พัฒนา อัพโหลด file ไปยัง remote site
เริ่มต้นการใช้งาน Macromedia Dreamweaver
ความรู้เกี่ยวกับไซต์ Local site คือ การสร้าง folder เพื่อเก็บไฟล์งานต่างๆ ไว้ในเครื่องของเรา Remote site คือ การเก็บไฟล์งานไว้ที่เครื่อง web server
Remote site เช่น web server ของ มสด. อัพโหลด Local site เช่น C:\MyDocument\my_website
การสร้าง local site
จะเก็บไฟล์ที่ทำเว็บไว้ที่ไหน Folder อะไร C:\my_website\ จะเก็บไฟล์ที่ทำเว็บไว้ที่ไหน Folder อะไร
เลือก None (ไม่ติดต่อกับ remote server)
คลิกเลือกปุ่ม Done
Local Site
Local Site
เริ่มต้นการสร้างเว็บเพจ เลือก HTML
เริ่มต้นด้วยการ save file ก่อนเลย หลักการตั้งชื่อไฟล์ หน้าแรก หรือ homepage ควรตั้งชื่อเป็น index.html home.html default.html
หลักการตั้งชื่อไฟล์ (ต่อ) ชื่อไฟล์ต้องเป็นตัวอักษรภาษาอังกฤษตัวพิมพ์เล็กเท่านั้น ใช้เลข 0-9 ประกอบได้ ชื่อไฟล์ห้ามมีเว้นว่างระหว่างชื่อ (space) ควรใช้ขีดล่าง (_) หรือขีดกลาง (-) ถ้าต้องการแบ่งชื่อไฟล์ เช่น my_work.htm
หลักการตั้งชื่อไฟล์ (ต่อ) ห้ามใช้ตัวอักขระพิเศษ เช่น % * > < / , ในการตั้งชื่อไฟล์ หลีกเลี่ยงการขึ้นชื่อไฟล์ด้วยตัวเลข ตั้งชื่อไฟล์สั้นแต่ได้ใจความ
แถบเครื่องมือ แบบการทำงาน หน้าต่างออกแบบ คุณสมบัติของเครื่องมือที่เลือกใช้
แทรกตาราง แทรกรูปภาพ แทรกสื่ออื่นๆ สร้าง link ในหน้าเดียวกัน ไปจดหมาย แทรกรูปภาพ สร้าง link ในหน้าเดียวกัน
มุมมองออกแบบ
มุมมองภาษา HTML
ภาษา HTML มุมมองออกแบบ
การจัดการกับหน้า (webpage) คลิกเมาส์ขวาที่หน้าออกแบบ เลือก Page Properties
การเปลี่ยนขนาดตัวอักษร
การเปลี่ยนสีตัวอักษร
การเปลี่ยนสีพื้นหลัง
การเปลี่ยนพื้นหลังให้เป็นรูปภาพ
การใส่ชื่อให้กับเว็บเพจ (webpage)
การจัดการเกี่ยวกับ อักษรภาษาไทย
เลือก Thai (Windows)
การใส่ตัวอักษรในหน้าออกแบบ สามารถพิมพ์ตัวอักษรลงใน พื้นที่ว่างในส่วนของ design view ได้เลย
การใส่ตัวอักษร
คุณสมบัติของตัวอักษร
การใส่ตาราง (Table) เลือกรูปตาราง ที่แถบเครื่องมือ
ส่วนสำคัญ คือ Border ถ้า = 0 จะไม่ปรากฏเส้นตาราง คุณสมบัติของตาราง ส่วนสำคัญ คือ Border ถ้า = 0 จะไม่ปรากฏเส้นตาราง
การใส่สื่อต่างๆ ใน webpage รูปภาพ Flash ควรนำไฟล์สื่อเหล่านี้ไปจัดเก็บใน local site ก่อน
การใส่รูปภาพในเวบเพจ เลือกรูปต้นไม้ที่แถบเครื่องมือ
คุณสมบัติของรูปภาพ
crop (ตัดภาพ) brightness+contrase ความสว่าง และความเข้มของสี sharpen (ความคมชัด)
crop (ตัดภาพ)
brightness+contrase ความสว่าง และความเข้มของสี
sharpen (ความคมชัด
การใส่ไฟล์ flash
คุณสมบัติของ flash
การ Preview ดูเว็บเพจผ่าน web browser ทำได้ด้วยการ กดปุ่ม F12
การสร้างการเชื่อมโยง (hyper link) การลิ้งก์จากตัวอักษร การลิ้งก์จากจากรูปภาพ การลิ้งก์ไปยัง อีเมล การลิ้งก์ไปเอกสารในหน้าเดียวกัน
เราสร้างลิ้งก์ไปไหนได้บ้าง? ลิ้งก์ไปยังไฟล์อื่นๆ ใน website ของเรา ลิ้งก์ไปยัง website อื่นๆ
การกำหนดสีและรูปแบบของลิ้งก์ คลิ๊กขวา เลือก Page properties
1. การสร้างลิ้งก์จากตัวอักษร พิมพ์ข้อความที่ต้องการเชื่อมโยง ทำการ hilight ข้อความที่ต้องการเชื่อมโยง เลือกไฟล์ที่ต้องการเชื่อมโยง
ลิ้งก์ไฟล์ในเว็บเดียวกัน
ลิ้งก์ไปยังเว็บไซต์ข้างนอก พิมพ์ URL ที่ต้องการลิ้งก์ลงไป
2. การสร้างลิ้งก์จากรูปภาพ คลิ๊กเลือกรูปภาพที่ต้องการลิ้งก์ เลือกไฟล์ หรือ URL ที่ต้องการลิ้งก์ไปถึง
ใส่ชื่อไฟล์ที่ต้องการลิ้ง หรือ ใส่ชื่อเว็บไซต์ที่ต้องการลิ้งก์ไป
3. การสร้างลิ้งก์ไปยังอีเมล พิมพ์ข้อความที่ต้องการลิ้งก์ Hilight ข้อความที่ต้องการลิ้ง คลิ๊กรูปซองจดหมายที่แถบเครื่องมือ
4. การลิ้งก์ไปเอกสารในหน้าเดียวกัน
ต้นทาง . ปลายทาง
1. การกำหนดปลายทางของลิ้งก์ (Target) Hilight เลือกส่วนที่การให้ลิ้งก์ เลือก Named anchor ที่แถบเครื่องมือ ใส่ชื่อ anchor
2. กำหนดต้นทางของลิ้งก์ (Source) Hilight ต้นทางที่ต้องการลิ้งก์ ใส่เครื่องหมาย # ตามด้วยชื่อของ anchor