วันจันทร์ที่ 19 พฤศจิกายน พ.ศ. 2561

เริ่มต้นสร้างเว็บเพจ



ขั้นตอนการสร้างเว็บไซต์

        การสร้างเว็บไซต์ อาจเริ่มตั้งแต่การกำหนดเนื้อหารายละเอียดต่างๆในหน้าเว็บเพจ
จนถึงการอัพโหลดเว็บไซต์ขึ้นบนอินเทอร์เน็ต   จะมีขั้นตอนดังนี้

    ขั้นตอนที่ 1 วางแผนจัดทำเว็บไซต์

            กำหนด เนื้อหา แบ่งเนื้อหาเป็นหมวดหมู่ต่างๆ ตามลำดับก่อนหลัง และรายละเอียด
ของเว็บที่เราจะจัดทำเพื่อให้เห็นมุมมอง คร่าวๆ ก่อนจะลงมือสร้างเว็บไซต์

    ขั้นตอนที่ 2 การกำหนดโครงสร้างของเว็บ


            คือขั้นตอนการกำหนดผังของเว็บไซต์ หรือที่เรียกว่า Site Map เพื่อให้ทราบ
องค์ประกอบทั้งหมดของเว็บไซต์ ตัวอย่างเช่น    เรามีหน้าเว็บเพจทั้งหมด 6 เว็บเพจ
กำหนด Site Map ได้ดังรูป



    ขั้นตอนที่ 3 กำหนดการเชื่อมโยงระหว่างเว็บเพจ

            เป็นการกำหนดการเชื่อมโยงในแต่ละหน้าเว็บเพจให้สามารถเชื่อมโยงกลับ
ไปกลับมาระหว่างหน้าเว็บเพจต่าง ๆ        ได้ จากตัวอย่าง จะเห็นว่าหน้า index.html
สามารถเชื่อมโยงไปยังหน้าต่างๆได้และแต่ละหน้าก็สามารถเชื่อมโยงกลับมา  
 ยังหน้า index.html ได้ตัวอย่างดังรูป


    ขั้นตอนที่ 4 ออกแบบหน้าเว็บเพจแต่ละหน้า

            ออกแบบโครงสร้างหน้าเว็บเพจในแต่ละหน้าเพื่อจะได้รู้ว่าในเว็บเพจแต่ละหน้า
มีรายละเอียดอะไรบ้าง ไม่ว่าจะเป็น ข้อมูล รูปภาพ จากนั้นทำการออกแบบหน้าเว็บเพจ
หน้าต่อไป


        จากรูปด้านบนจะเห็นว่าเราได้แบ่งหน้าเว็บเพจออกเป็นส่วนๆ โดยเราสามารถแบ่ง
ส่วนประกอบของหน้าเว็บ ได้ดังนี้

ส่วนประกอบของหน้าเว็บเพจ

ส่วนประกอบของหน้าเว็บเพจที่ดี จะมีอยู่ด้วยกันทั้งหมด 3 ส่วนหลัก ๆ ดังนี้

        1. ส่วนหัวของหน้า (Header)

        เป็นส่วนที่อยู่บนสุดของหน้า มักใส่ภาพกราฟิกเพื่อสร้างความประทับใจ เช่น
ภาพโลโก้ (Logo) เมนูหลักหรือลิงก์ (Navigation Bar) เพื่อเป็นจุดเชื่อมโยงไปสู่เนื้อหา
ของเว็บไซต์ในหน้าต่อไป

        2. ส่วนของเนื้อหา (Body) 

        เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ประกอบด้วย
ข้อความ, ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ และอาจมีเมนูหลัก หรือเมนูเฉพาะ
กลุ่มวางอยู่ในส่วนนี้ด้วย

        3. ส่วนท้ายของหน้า (Footer)

        เป็นส่วนที่อยู่ด้านล่างสุดของหน้า มักวางระบบนำทางที่เป็นลิงค์ข้อความง่าย ๆ
และอาจแสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น เจ้าของเว็บไซต์,
ข้อความแสดงลิขสิทธิ์, วิธีการติดต่อกับผู้ดูแลเว็บไซต์, คำแนะนำการใช้เว็บไซต์ เป็นต้น
 โดยปกติส่วนหัวและส่วนท้ายมักแสดงเหมือนกันในทุกหน้าของเว็บเพจ

    ขั้นตอนที่ 5 สร้างเว็บเพจในแต่ละหน้า


            เมื่อได้ทำการออกแบบหน้าเว็บเพจแต่ละหน้าแล้ว ต่อไปคือขั้นตอนการสร้างหน้า
เว็บเพจตามที่ได้ออกแบบไว้ ด้วยโปรแกรมต่างๆไม่ว่าจะเป็นโปรแกรมประเภทText Editor
 เพื่อใช้ในการเขียนชุดคำสั่ง HTML หรือโปรแกรมสำเร็จรูปเพื่อให้แต่ละหน้าเว็บเพจ
นำเสนอข้อความ รูปภาพ วีดีโอ และเสียง อยู่ในรูปแบบตามที่ต้องการ


ตัวอย่างการสร้างหน้าเว็บเพจด้วยโปรแกรม Notepad 

    ขั้นตอนที่ 6 จดโดเมนเนมและหาพื้นที่ฝากเว็บไซต์

            หลังจากเราสร้างเว็บไซต์เสร็จแล้ว ขั้นตอนต่อไป คือ ทำการตั้งชื่อเว็บไซต์คือ
การจดโดเมนเนม และหาที่ฝากเว็บไซต์    ที่เรียกว่า เว็บโฮสติ้ง (Web Hosting)
ที่มีทั้งแบบเสียค่าใช้จ่าย และแบบให้พื้นที่ฝากเว็บไซต์ฟรี อย่างเช่นเว็บไซต์ที่ให้บริการ
ฝากเว็บไซต์ฟรี คือ http://www.thcity.com วิธีการให้ทำการสมัครตามขั้นตอนต่างๆ
บนหน้าเว็บเพจ เท่านี้เราก็จะมีชื่อเว็บไซต์และพื้นที่ ฝากเว็บไซต์แล้ว



    ขั้นตอนที่ 7 อัพโหลด












เว็บไซต์

            หลังจากสมัครบริการพื้นที่ฝากเว็บไซต์แล้ว ขั้นตอนต่อไป คือการอัพโหลดไฟล์
เว็บไซต์ของเราไปยังเว็บไซต์ที่ให้บริการพื้นที่ฝากเว็บไซต์ผ่านโปรแกรม FTP เช่นโปรแกรม
 Filezilla แค่นี้ทุกคนทั่วโลกก็สามารถเปิดดูเว็บไซต์ของเราผ่านระบบเครือข่ายอินเทอร์เน็ต
ได้แล้ว

วันจันทร์ที่ 12 พฤศจิกายน พ.ศ. 2561

เริ่มต้นการพิมพ์

https://drive.google.com/file/d/1eDRPBGmTfiw2J17Eka5qp6FAt0jLxy9O/view

การสร้างเว็บไซต์ด้วย Dreamwemver Cs6

2การเริ่มต้นสร้างเว็บไซต์

การเริ่มต้นสร้างเว็บไซต์เป็นการตั้งโฟล์เดอร์ที่ใช้เก็บทุกส่วนประกอบบนหน้าเว็บเอาไว้ และใช้เป็นตำแหน่งอ้างอิงเพื่อเชื่อมโยงหน้าเว็บแต่ละหน้าเข้าไว้ด้วยกัน

2การกำหนดโครงร่างเว็บไซต์

การกำหนดโครงสร้างเว็บไซต์เป็นการออกแบบส่วนประกอบทั้งหมดของเว็บไซต์ที่ต้องการให้ผู้เข้ามาเยี่ยมชม
ได้ทราบเช่น เว็บไซต์ทั้งหมดจะมีกี่หน้า แต่ละหน้าจะมีเนื้อหาอะไร เนื้อหาแต่ละส่วนจะเชื่อมโยงกันอย่างไร เปรียบเสมือนการเขียนหนังสือที่แบ่งเนื้อหาออกเป็นบทย่อย ๆ แต่ละบทมีหัวข้อใหญ่ เช่น โครงสร้างเว็บไซต์

จากโครงสร้างจะเห็นว่า ไฟล์ Index.html จะอยู่แยกออกมาต่างหาก ไม่รวมอยู่ในโฟล์เดอร์ใด ๆ เพราะเป็นหน้าโฮมเพจที่เมื่อมีผู้เข้ามาเยี่ยมชมเว็บไซต์จะต้องเข้ามาที่หน้านี้เป็นอันดับแรก ก่อนที่จะลิงก์ไปยังหน้าเว็บเพจอื่น ๆ

2การสร้างไซต์ (Site)   

  •  การกำหนดไชต์ (Site) งานเป็นการนำโครงสร้างเว็บไซต์ที่ได้ออกแบบไว้แล้วมาสร้างจริงด้วยโปรแกรม Dreamweaver CS6 โดยโปรแกรมจะแบ่งงานของเราออกเป็น 2 ส่วน คือส่วนที่อยู่บนเครื่องจะเรียกว่า Local Folder หรือ 
  • โลคอลไซต์ (Local Site) ต่อเมื่อได้ สร้างเว็บไซต์เสร็จแล้วจึงจะนำไซต์ทั้งหมดอัพโหลดเข้าสู่เครื่องเซิร์ฟเวอร์จริงเพื่อเผยแพร่
มีขั้นตอนการสร้างไซต์
1. คลิกที่เมนู Site
2. คลิกเลือกคำสั่ง New Site 
2. จะได้หน้าต่าง Site Setup เพื่อกำหนดชื่อไซต์ใหม่ โดยมี   7  ขั้นตอนดงนี้
1.       Click ที่ Site เพื่อตั้งชื่อและสร้างที่เก็บ
2.       ตั้งชื่อSite (ในที่นี้ใช้ชื่อว่า SiteKruAoh)
3.       Click ที่ Folder เลือกตำแหน่งที่ต้องการจัดเก็บ ไว้สำหรับเวลา save/save as
4.       Click ที่ Advanced Setting
5.       เลือก Local Info
6.       Click ที่ Folder Dialog เพื่อเลือก Path ที่ต้องการเก็บรูปภาพ
7.        กดปุ่ม Save

2การจัดการโครงสร้างเว็บไซต์

การแก้ไขไซต์ การปรับการตั้งค่าการใช้งานไซต์ ให้คลิกที่คำสั่ง Sites > Manage Sites เลือกไซต์ที่ต้องการแก้ไขหรือปรับปรุง  ดังนี้

2การจัดการโฟล์เดอร์และไฟล์ภายในไซต์

การสร้างโฟล์เดอร์ย่อยและไฟล์งานบรรจุไว้ในไซต์ตามแผนงานที่ได้วางไว้มีวิธีสร้าง 4 ขั้นตอนดังนี้
  1. ที่ Panel เลือก Files
  2. Right Click ที่ Folder หลัก ในที่นี้คือ Site – site kruaoh
  3. เลือก New Folder ทำการสร้าง Folder ใหม่ขึ้นมา
  4. พิมพ์ชื่อโฟล์เดอร์ใหม่แล้ว กด Enter