หน่วยที่ 4 การสร้างเว็บไซต์ใหม่ ด้วยโปรแกรม Adobe Dreamwear CS5

4.1 เริ่มต้นการสร้างไซต์งานใหม่

       ในการสร้างเว็บไซต์ใหม่ จะต้องมีการสสร้างไซต์เปรียบเสหมือนโฟลเดอร์หลักที่ใช้ในการจัดโฟลเดอร์ของเว็บเพจและไฟล์ต่าง ๆ ประกอบกันเป็นเว็บไซต์ขึ้นมาก่อน โดยจัดข้อมูลประเภทรูปภาพ ไฟล์สื่อประกอบ และส่วนประกอบต่าง ๆ ไว้ให้เป็นระบบเป็นระบบเพื่อให้ง่ายต่อการเคลื่อนย้ายข้อมูลหรืออัพโหลดข้อมูลแก้ปัญหารูปภาพหรือไฟล์ ไม่แสดงผลเมื่ออัพข้อมูลขึ้นเผยแพร่ในระบบอินเทอร์เน็ต ซึ่งมีขั้นตอนดังนี้
            1. คลิกที่เมนู Site > New Site….

                                    
            2. จะปรากฏกล่องข้อความให้ใส่รายละเอียดของเว็บไซต์ที่แถบ Site

            3. กำหนดชื่อเว็บไซต์ที่ช่อง Site Name

                                    

           4. คลิกเลือกโฟลเดอร์ที่ต้องการใช้เก็บข้อมูลหลักของเว็บไซต์ ที่ช่อง Local  Site Folder
           5. จะปรากฏโฟลเดอร์ที่เลือก คลิกปุ่ม Select เพื่อเลือกไซต์ที่ต้องการ
           6. คลิกปุ่ม Save เพื่อบันทึกข้อมูล จะได้ไซต์ที่เก็บข้อมูลตามที่กำหนดไว้


4.2 การเปลี่ยนแปลงแก้ไขไซต์งานใหม่
       หากต้องการที่จะปรับปรุงแก้ไขไซต์งานเพื่อบันทึกข้อมูลไว้ที่ใหม่ สามารถทำได้ ดังนี้
           1. คลิกเลือก Site > Manage Sites
           2. คลิกเลือกเว็บไซต์ที่ต้องการแก้ไข
           3. คลิกปุ่ม Edit เพื่อแก้ไข
           4. แก้ไขข้อมูลเว็บไซต์ตามที่ต้องการ
           5. คลิกปุ่ม Save


4.3 การสร้างไฟล์เว็บเพจใหม่
       การสร้างไฟล์เว็บเพจหน้าใหม่ขึ้นมา สามารถทำได้ดังนี้
       1. คลิกที่เมนู File > New หรือคลิกคีย์ลัดที่แป้นพิมพ์ Ctrl + N
       2. คลิกเลือก Blank Page สร้างเอกสารเว็บเปล่า
       3. คลิกเลือกประเภทของเว็บเพจเป็น HTML
      4. คลิกเลือกรูปแบบเป็น None
      5. คลิกปุ่ม Create เพื่อสร้างหน้าเว็บเปล่าใหม่
      6. หน้าเว็บใหม่จะแสดงขึ้นมา
      สำหรับเว็บไซต์ใหม่ในมุมมอง Code นั้น ชุดคำสั่งของเอกสารภาษา HTML ประกอบกลุ่มของชุดคำสั่งต่อไปนี้
การเขียนเว็บเพจด้วยภาษา HTML นั้น เอกสาร HTML นั้นจะประกอบด้วยส่วนประกอบ 3 ส่วนดังนี้

                        
1.ส่วนเริ่มต้นของเอกสาร HTMLเป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมเว็บเพจด้วยภาษา HTML และคำสั่ง </HTML> เป็นการสิ้นสุดคำสั่งเริ่มต้นของโปรแกรมภาษา HTML
2.ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนที่เป็นชื่อเรื่อง (Title) ของหน้าต่างการทำงานที่แสดงผลในโปรกแรมเว็บบราวเซอร์
3.ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งประกอบด้วย Tag คำสั่งในการจัดรูปแบบหรือตกแต่งเอกสารด้วยภาษา HTML ต่าง ๆ
คำสั่งเริ่มต้นของเอกสารภาษา HTML
<HTML>……</HTML>
คำสั่ง  <HTML> เป็นคำสั่งที่เริ่มต้นในการเขียนโปรแกรมเว็บเพจด้วยภาษา HTML และคำสั่ง</HTML>เป็นการสิ้นสุดคำสั่งเริ่มต้นของชุดโปรแกรมภาษา HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บบราวเซอร์ แต่สำหรับโปรแกรม Adobe Dreamweaver CS5 เมื่อสร้างเอกสารใหม่ในมุมมองออกแบบ (Design) แล้วจะสร้างชุดคำสั่งตามรูปแบบที่ออกให้อัตโนมัติ แต่การเรียนรู้ในการจัดการชุดคำสั่งภาษา HTML นั้นมีความจำเป็นต่อการเพิ่มประสิทธิภาพของเว็บไซต์ เนื่องจากการทำงานบางอย่างไม่สามารถออกแบบได้จึงจำเป็นต้องเขียนชุดคำสั่งเพื่อสั่งให้แสดงผล การพัฒนาเว็บไซต์ให้มีประสิทธิภาพและเหมาะสมกับยุคสมัยใหม่จึงจำเป็นต้องศึกษาหลายวิธีควบคู่กัน
ส่วนหัวเรื่องเอกสารเว็บ (Head Section)
<HEAD>………</HEAD>
Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้น ๆ เช่น ชื่อเรื่องของเว็บ (Title) ชื่อผู้จัดทำเว็บ (Author) คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ
<TITLE>……….</TITLE>
ข้อความที่ใช้เป็นชื่อเรื่อง (TITLE) ไม่ควรพิมพ์เกิน 64 ตัวอักษร ไม่ต้องใส่ลักษณะพิเศษเช่น ตัวหนา เอียง หรือสี และควรใช้ภาษาที่มีความหมายครอบคลุมถึงเนื้อหาของเว็บเพจนั้นหรือเป็นคำสำคัญในการค้นหา (Keyword) ในเว็บไซต์ต่าง ๆ เมื่อทำการเผยแพร่ในระบบอินเทอร์เน็ต