การกำหนดโฟลเดอร์เพื่อเก็บเว็บไซต์ที่สร้างใหม่ 
              

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

1. คลิกคำสั่ง Site>New Site…

2. จะปรากฏกรอบ Site Definition ขึ้นมา ให้พิมพ์ชื่อเว็บไซต์ที่ต้องการ แล้วคลิกปุ่ม Next

3. ให้คลิกเลือก No, I do not want…….. แล้วคลิกปุ่ม Next

4. ระบุชื่อไดร์ฟและโฟลเดอร์ที่จะใช้เก็บข้อมูลของเว็บไซต์ที่จะทำการออกแบบ จากนั้นคลิกปุ่ม Next

5. คลิกที่ช่อง How do you connect to your remote server ? แล้วคลิกตัวเลือก None จากนั้นให้คลิกที่ปุ่ม Next

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

7. จะปรากฏชื่อของเว็บไซต์ พร้อมทั้งตำแหน่งที่เก็บเว็บไซต์ แสดงไว้ใน Panel Group


 


 

การสร้างหน้าเว็บเพจใหม่


การสร้างเว็บเพจใหม่ สามารถทำได้โดย

1. คลิกคำสั่ง File>New... ที่แถบเมนู

2. จะปรากฎกรอบ New Document ขึ้นมา โดยคลิกที่ตัวเลือก Basic page ในช่อง Category

3. คลิกตัวเลือก HTML ที่ช่อง Basic page

4. คลิกปุ่ม Create


 

         การกำหนดคุณสมบัติพื้นฐานของเว็บเพจ            

            ก่อนการออกแบบเว็บเพจทุกครั้ง ควรเริ่มจากการกำหนดคุณสมบัติพื้นฐาน เช่น ชื่อเว็บเพจ (Title) สีพื้น (Background color) สีของข้อความ (Text color) เป็นต้น Page Properties4โดยสามารถกำหนดได้ด้วยคำสั่ง Modify

          1. การกำหนดลักษณะการแสดงผล (Appearance)

             Appearance เป็นคุณสมบัติทั่วไป ในการแสดงผลของหน้าเว็บเพจ มีรายละเอียดดังนี้คือ


§ Page font รูปแบบตัวอักษร

§ Size ขนาดตัวอักษร

§ Text color สีของข้อความทั่วไป

§ Background color สีพื้นหลังของหน้าเว็บเพจ

§ Background image ภาพฉากหลังของหน้าเว็บเพจ

§ Repeat วิธีแสดงภาพฉากหลังแบบซ้ำ ๆ

§ Left margin ระยะของด้านซ้ายของหน้าเว็บเพจ

§ Right margin ระยะของด้านขวาของหน้าเว็บเพจ

§ Top margin ระยะของด้านบนของหน้าเว็บเพจ

§ Bottom margin ระยะของด้านล่างของหน้าเว็บเพจ

           2. การกำหนดลักษณะข้อความหัวเรื่องและภาษา (Title/Encoding)

              Title/Encoding เป็นการกำหนดชื่อและภาษาที่ใช้ของเว็บเพจ มีรายละเอียดดังนี้คือ


            การบันทึก (Save) เว็บเพจ              

              ไฟล์เว็บเพจของ Dreamweaver 8 ถ้ายังไม่ได้บันทึก (Save) ข้อมูลที่ทำการแก้ไข จะสังเกตได้จากบนแถบชื่อเรื่อง (Title Bar) จะมีเครื่องหมาย ปรากฏอยู่ท้ายชื่อไฟล์ ซึ่งเป็นเครื่องหมายเตือนว่ายังไม่ได้บันทึก (Save) ข้อมูลของไฟล์นั้น ไฟล์ข้อมูลของ Dreamweaver 8 จะถูกจัดเก็บให้เป็นไฟล์ประเภท html ให้อัตโนมัติ คำสั่งที่ใช้ในการจัดเก็บข้อมูล สามารถเลือกใช้ได้ดังนี้คือ

o    File>Save… จัดเก็บไฟล์โดยใช้ชื่อเดิม

o    File>Save As… จัดเก็บไฟล์โดยใช้ชื่อใหม่

o    File>Save as Template… จัดเก็บเป็นไฟล์เทมเพลต

o    File>Save to Remote Server จัดเก็บไว้ที่ Remote Server

o    File>Save All จัดเก็บทุกไฟล์ที่เปิดใช้งานอยู่

o    นอกจากนี้ยังสามารถใช้แป้นพิมพ์ <Ctrl>+<S> แทนการใช้คำสั่ง File>Save… หรือ File>Save As… ได้

 

            การดูผลการออบแบบบนบราวเซอร์               

                การออกแบบเว็บเพจด้วยโปรแกรม Dreamweaver 8 ผู้ออกแบบควรทำการตรวจสอบการแสดงผลที่เว็บบราวเซอร์ (Web Browser) ด้วย เพราะการแสดงผลบางอย่างไม่สามารถจะแสดงผลในDreamweaver 8 ได้ สำหรับการดูผลที่เว็บบราวเซอร์ (Browser) ทำได้ดังนี้คือ

· คลิกคำสั่ง File>Preview in Browser>iexplorer (หรือคลิกแป้นพิมพ์ <F12>)

· จะปรากฏหน้าของเว็บเพจในเว็บบราวเซอร์ (Web Browser)

            การเปิด (Open) ขึ้นมาแก้ไข

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

1. เรียกใช้งานในส่วนของ Group Panel จากนั้นให้คลิกเลือกชื่อของเว็บไซต์ที่ต้องการแก้ไขขึ้นมา

2. ดับเบิลคลิกชื่อไฟล์ประเภท htm หรือ html ที่ต้องการแก้ไข

3. ไฟล์ที่ต้องการแก้ไขจะปรากฏขึ้นมา

 



การแทรกข้อความบนหน้าเว็บเพจ

การแทรกข้อความ และอักขระพิเศษ และการจัดรูปแบบข้อความ


            การใส่ Title             

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

การใส่หัวเรื่องของเว็บเพจสามารถทำได้ วิธีดังนี้คือ


            การใส่ข้อความบนหน้าเว็บ

                การแทรกข้อความในหน้าเว็บเพจ ผู้ออกแบบเพียงแต่พิมพ์ข้อความที่ต้องการลงไป หรืออาจจะคัดลอก (Copy) ข้อความที่พิมพ์ไว้เรียบร้อยแล้วจากไฟล์อื่นมาใช้ก็ได้

          1. การพิมพ์ข้อความในหน้าเว็บเพจ

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

          2. การคัดลอกข้อความจากไฟล์อื่นมาไว้ในหน้าเว็บเพจ

                เราสามารถคัดลอกข้อความที่พิมพ์ไว้ด้วยโปรแกรมอื่น แล้วนำมาวางไว้ในหน้าเว็บเพจได้ ซึ่งส่วนมากในการทำเว็บไซต์ มักจะนิยมพิมพ์ข้อความที่ต้องการเตรียมไว้โดยใช้โปรแกรมNotepad แล้วเก็บบันทึกไว้เป็นแบบ Text File (มีนามสกุลเป็น txt) โดยมีวิธีการดังนี้คือ

· เปิดไฟล์ที่เก็บข้อความที่ต้องการขึ้นมา จากนั้นระบายข้อความที่ต้องการ

· คลิกคำสั่ง Edit>Copy หรือกดแป้นพิมพ์ <Ctrl>+<C>

· เปิดหน้าของเว็บเพจที่ออกแบบด้วยโปรแกรม Dreamweaver 8 จากนั้นคลิกคำสั่ง Edit>Paste หรือกดแป้นพิมพ์ 

    <Ctrl>+<V>

· ข้อความที่คัดลอกมาจะแสดงในหน้าเว็บเพจ

          3. การเว้นวรรคระหว่างข้อความ

                การใส่ข้อความบนหน้าเว็บเพจนั้น ปกติแล้วโปรแกรม Dreamweaver 8 จะเว้นวรรคให้เพียง ครั้งเท่านั้น แต่อย่างไรก็ตามเราสามารถที่จะเว้นวรรคมากกว่า ครั้งได้ โดย กดแป้นพิมพ์<Ctrl>+<Shift>+<Space>

 

            การจัดรูปแบบข้อความบนหน้าเว็บ

                การจัดรูปแบบอักษรในงานออกแบบเว็บเพจด้วยโปรแกรม Dreamweaver 8 สามารถทำได้ดังนี้คือ

            1. ระบายข้อความที่ต้องการจัดรูปแบบอักษร

            2. กำหนดค่าในส่วนของพาเนล Properties

 

             การแทรกตัวอักษรพิเศษ (Symbol)        

             1. การเพิ่มระยะเว้นวรรคระหว่างข้อความ

                 Dreamweaver 8 กำหนดให้เว้นวรรคระหว่างข้อความได้เพียง ช่องเท่านั้น เมื่อต้องการที่จะให้มีระยะเว้นวรรคมากขึ้น จะต้องใช้คำสั่งเพื่อเพิ่มระยะการเว้นวรรค ซึ่งทำได้ดังนี้คือ

· วางเคอร์เซอร์ในตำแหน่งที่ต้องการเพิ่มระยะเว้นวรรค

· คลิกแถบ "Common" แล้วคลิกเลือกแถบ "Text"

· จากนั้นกดแป้นพิมพ์ <Ctrl>+<Shift>+<Space Bar>  หรือคลิกเครื่องมือ "BR" แล้วคลิกคำสั่ง "Non-Breaking Space"

          2. การแทรกสัญลักษณ์พิเศษ

 สัญลักษณ์พิเศษที่ไม่มีในแป้นพิมพ์ สามารถจะแทรกเพิ่มเติมได้จากแถบ Characters โดยทำได้ดังนี้คือ

· วางเคอร์เซอร์ในตำแหน่งที่ต้องการแทรกสัญลักษณ์พิเศษ

· คลิกแถบ "Common" แล้วคลิกเลือกแถบ "Text"

· จากนั้นคลิกเครื่องมือ "BR" แล้วคลิกเลือกสัญลักษณ์ตามต้องการ

 

            การใส่วันที่

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

        · วางเคอร์เซอร์ในตำแหน่งที่ต้องการแทรกวันที่

        · คลิกแถบ "Common" บน Insert Bar

        · จากนั้นคลิกเครื่องมือ   จะปรากฏกรอบให้กำหนดรูปแบบ

        · ให้เลือกรูปแบบตามที่ต้องการแล้วคลิก OK

        · ถ้าต้องการให้วันที่ปรับเปลี่ยนอัตโนมัติให้คลิกเครื่องหมายถูก ที่หน้าข้อความ Update Automatically on Save

 

            การใส่เส้นคั่นเนื้อหา

            1. การแทรกเส้นแบ่งเนื้อหา มีวิธีการดังนี้คือ

        · วางเคอร์เซอร์ในตำแหน่งที่ต้องการแทรกเส้น

        · คลิกเลือกแถบ "HTML" บน Insert Bar

        · จากนั้นคลิกเครื่องมือ 

            2. การปรับแต่งสีเส้น

        · คลิกที่เส้นคั่นที่ต้องการปรับแต่ง

        · กำหนดค่าในส่วนของพาเนล Properties  ซึ่งประกอบด้วย

o    คือความยาวของเส้น ซึ่งจะเลือกกำหนดเป็นแบบพิกเซล หรือ ก็ได้

o    คือความหนาของเส้น ค่าปกติจะกำหนดความหนาไว้ที่ พิกเซล

o    Align คือการจัดวางเส้น จะเลือกแบบชิดซ้าย กลาง ขวา ก็ได้

o    Shading คือการกำหนดให้เส้นเป็นแบบเส้นทึบหรือเส้นโปร่ง


ตกแต่งเว็บเพจด้วยรูปภาพ


1.คลิกวางเคอร์เวอร์ตรงบริเวณที่เราต้องการจะวาง

2.คลิกที่ปุ่มคำสั่ง Image

                                                    
3.
 เลือกไฟล์ภาพที่ต้องการ
                                                    
4.คลิกปุ่ม OK
                                                   
5.มีข้อความเตือนให้ save ก่อน ให้คลิก OK
                                                     

        การปรับขนาดของรูปภาพ

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

                                                   
2.เลื่อนเมาส์บริเวณมุมของภาพเพื่อย่อ หรือขยายภาพตามต้องการ
                                                    
3.รูปภาพถูกย่อขนาดลงแล้ว
                                                    


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

มีวิธีการทำง่ายๆ ดังนี้

1.คลิกรูป ที่อยู่บนหน้าจอการทำงาน
                                           

                                        

2.ที่แถบ 
ให้พิมพ์ข้อความลงไป
3.ทดสอบกับ Browser โดยกด F12

                                                             
                                    

          การใส่รูปภาพที่พื้นหลัง

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

1.คลิกที่ปุ่ม    หรือกด Ctrl+J เพื่อเปิดหน้าต่าง Page Properties 
2.คลิกที่ปุ่ม  
 ในช่อง Background Image
3.เลือกไฟล์รุปที่ต้องการ แล้วคลิกปุ่ม 

4.คลิกปุ่ม  
  ที่หน้า Page Properties อีกครั้ง
5.ภาพที่เลือกไว้เปลี่ยนเป็นพื้นหลังเรียบร้อยแล้ว

 

          การใส่กรอบให้รูปภาพ

ในกรณีที่เราอยากจะให้รูปภาพเรามีกรอบด้วย ให้ทำดังนี้
1. คลิกที่รูป

                                                          

2.ใส่ตัวเลขในช่อง  
  เพื่อกำหนดขนาดของกรอบ รูปที่ต้องการ
3.คลิกบริเวณที่ว่างของหน้าต่าง Document จะเห็นได้ว่ามีกรอบที่รูปภาพแล้ว
 

                                                         

การปรับระยะห่างของรูปแบบละเอียด

การปรับระยะห่างของรูปแบบละเอียด สามารถทำได้โดย
1.คลิกที่รูป

 

2.ใส่ตัวเลขในช่อง   เพื่อเพิ่มระยะห่างแนวตั้ง หรือช่อง   เพื่อเพิ่มระยะห่างแนวนอน
3.คลิกบริเวณที่ว่างของหน้าต่าง Document จะเห็นว่ามีระยะห่างของภาพมากขึ้น

                                                          

         การจัดรูปแบบทั่วไปของรูปภาพ

การจัดวางตำแหน่งของรูปแบบทั่วไป จะคล้ายคลึงกับการจัดข้อความ  ซึ่งมีวิธีการดังต่อไปนี้
1.คลิกที่รูป
2.ที่แถบคำสั่ง Picture Properties ให้เลือกคลิกปุ่ม

 จัดวางไปทางซ้ายสุด
  จัดวางไว้ตรงกลาง
 
 จัดวางไว้ทางขวาสุด

 

         การจัดให้มีข้อความ  แล้วมีรูปประกอบด้วย สามารถดังนี้

1.คลิกที่รูป

2.เลือกไปที่   จะมีลักษณะการจัดเรียงให้เลือกดังต่อไปนี้

-Default เป็นการจัดเรียงแบบอัตโนมัติ (ปกติ)
-Baseline จัดให้ขอบล่างของรูปอยู่แนวเดียวกับบรรทัดข้อความ
-Top จัดให้ขอบบนของรูปอยู่แนวเดียวกับบรรทัดข้อความ
-Middle จัดให้ตรงกลางของรูปอย่แนวเดียวกับข้อความ
-Bottom จัดให้ขอบล่างของรูปอยู่แนวเดียวกับบรรทัดของความ
-Text Top จัดให้ขอบล่างของรูปอยู่แนวเดียวกับบรรทัดข้อความ
-Absolute Middle จัดให้กึ่งกลางของรูปอยู่แนวเดียวกับส่วนกลางบรรทัดข้อความ
-Left จัดให้รูปภาพอยู่ซ้ายสุดของบรรทัดข้อความ
-Right จัดให้รูปภาพอยู่ขวาสุดของบรรทัดข้อความ
 

                                                              
              3.ภาพจะถูกจัดวางตมคำสั่ง ในตัวอย่างจะมีให้เลือกการจัดวางแบบ Left

                                                             

         วิธีการทำ Tracing Image

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

            1.วางเคอร์เซอร์ที่หน้าจอการทำงาน 
            2.คลิกที่ปุ่ม 
 
  หรือกด Ctrl+J
            3.
 เลือกไปที่ Tracing Image
            4.เลือกไฟล์ภาพที่ต้องการ โดยกดปุ่ม  

            5.ปรับแต่งค่าความโปร่งใส (Transparency) และค่าความมัว (Opaqute)

                                                                                           
            6. คลิกปุ่ม   หรือถ้าต้องการทดสอบดูก่อนให้กดปุ่ม Apply


         ข้อมูลจาก http://202.143.168.19/3640900093896/Dreamweaver8.doc  27 ตุลาคม  2555