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

Slides:



Advertisements
งานนำเสนอที่คล้ายกัน
เรียนรู้และเข้าใจ HTML อย่างง่าย
Advertisements

ส่วนประกอบของโปรแกรม Macromedia Dreamweaver 8
for Beginning & Publishing
Dreamweaver Adobe การสร้างโฮมเพจด้วย โปรแกรม 4 โดย.. ไชยยงค์ กงศรี
Chapter 2 เริ่มต้นการสร้างเว็บ
HTML Language ภาษา HTML คืออะไร ? HTML (Hyper Text Markup Language) เป็นภาษาที่ใช้ในการพัฒนา web page เพื่อให้โปรแกรม web brower ต่างๆ (Internet Explorer,
การใช้โปรแกรม explorer
Microsoft Word 2002 พุธทอง กาบบัวลอย.
Script Programming& Internet Programming
หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา
การพัฒนาเว็บไซต์ คณะวิทยาศาสตร์
ขั้นตอนการพัฒนาเว็บเพจ
พื้นฐานความรู้เกี่ยวกับอินเทอร์เน็ต
เตรียมเอกสารประกอบการนำเสนอ
ADOBE Dreamweaver CS3.
HTML (คืออะไร) ภาษา HTML (HyperText Markup Language) เป็นภาษาที่ใช้คำสั่งที่เรียกว่า Tag มีทั้งเปิดและปิด เพื่อกำหนดบริเวณที่มีผลของคำสั่ง คำสั่งภาษา HTML.
วิชา การเขียนโปรแกรมบนเว็บ (Web-based Programming)
ภาษา HTML เบื้องต้น เช่น Internet Explorer และ Netscape Navigator
รูปแบบของเว็บเพจ. รูปแบบของเว็บเพจ รูปแบบของเว็บเพจ 1. เว็บเพจในแนวตั้ง.
ปฏิบัติการที่ 3 : การสร้างโฮมเพจอย่างง่าย
World Wide Web WWW.
Microsoft Word XP โดย พิสมัย น้ำจันทร์.
การสร้าง Web Page จาก Wizard
ตัวอย่างขั้นตอนในการสืบค้นข้อมูล
กระบวนการพัฒนา เอกสารเว็บเพจ
ขั้นตอนการเขียนเว็บเพจ
บทที่ 9 การใส่รูปภาพ (Image).
บทที่ 6 โครงสร้างของเว็บ.
การพิมพ์รายงาน / วิทยานิพนธ์
คู่มือการใช้งานโปรแกรม EndNote. ตั้งชื่อไฟล์ที่จะใช้งาน.
การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป
การสร้างพื้นหลัง (Background)
การสร้างเว็บเพจ HTML.
บทที่ 1 เริ่มต้นกับ HTML.
โปรแกรม DeskTopAuthor
Charter 12 1 Chapter 12 อินเทอร์เน็ต Internet.
การแปลงข้อมูลใน Excel เป็นฐานข้อมูลใน Access
เรื่อง การจัดแต่งเอกสาร
การ Generate ตารางข้อมูลให้เป็นแผนที่โดยใช้ ArcView
HTML, PHP.
การสร้างหน้าโฮมเพจด้วยโปรแกรม Macromedia Dreamweaver MX 2004
CHAPTER 6 Macromedia Dreamweaver MX 8.
การเรียนรู้ Internet Explorer 6.0
การนำเสนองานบนอินเตอร์เน็ต
ความรู้เบื้องต้นเกี่ยวกับการสร้าง WebPage
การใช้งานโปรแกรม Microsoft Power Point
บทที่ 3 การทำงานกับฟอร์ม (Form)
Web Technology & Basic Web Development
การทำ Link E-book.
Hosting ( Hosting, Web Hosting)
www เริ่มมีพัฒนาการมา ในราวปี ค. ศ ที่ Cern ซึ่งเป็น ห้องปฏิบัติการทางฟิสิกส์ แห่งยุโรป ตั้งอยู่ที่ประเทศ สวิตเซอร์แลนด์ โดย Bernner – Lee เป็นผู้
ความรู้พื้นฐานเกี่ยวกับ Microsoft Visual C#
HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล
หลักการเขียนเว็บไซต์
การเขียนเว็บเพ็จด้วยโปรแกรม
การสร้างพจนานุกรม.
เริ่มต้น Photoshop CS5.
Web browser.
ภาพนี้ชื่อว่าอะไร ? ก. แถบเมนูบาร์
การสร้าง website ด้วยโปรแกรมโปรแกรม Dreamweaver CS4 ตอนที่ 1
HOME PAGE.
บทที่ สร้างงานเอกสารและการแก้ไข
คำศัพท์ระบบอินเตอร์เน็ต
การใช้งานอินเทอร์เน็ต
การพิมพ์ตารางออกทางเครื่องพิมพ์
การสร้างความเชื่อมโยง (Link)
เรื่อง เว็บสวยด้วยมือเรา
เริ่มใช้งาน Microsoft Office
หลักการออกแบบเว็บไซต์
สื่อการสอนการเขียนเว็บเพจ ด้วยภาษา HTML
ใบสำเนางานนำเสนอ:

การพัฒนาเว็บเบื้องต้นด้วย 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