การทำกรอบภาพแบบ Halftone
1.เปิดภาพที่ต้องการทำกรอบขึ้นมา ดับเบิ้ลคลิ๊กที่คำว่า Background บน Layer ของภาพ แล้วก็กด Enter เพื่อปลดล็อค Layer
2.จากนั้นคลิ๊กที่ปุ่ม Edit in Quick Mask Mode แล้วเลือกเครื่องมือ Rectangular Marquee Tool เพื่อเลือกบริเวณที่จะทำกรอบ( Halftone จะใหญ่กว่า Selection ที่เลือกไม่มาก)
3. ต่อจากนั้นก็กด Ctrl+Delete เพื่อเทสีดำลงไป แต่เพราะผู้ใช้ทำงานใน Quick Mask Mode จึงแสดงผลออกมาเป็นสีแดง แล้วกด Ctrl+D เพื่อยกเลิก Selection
4. จากนั้น ไปที่Menubar เลือก Filter > Pixelate > Colour Halftone แล้วปรับค่าต่างๆตามภาพ (ค่า Max. Radius ถ้าปรับมากกว่านี้ จะทำให้ขนาดของวงกลมที่ขอบ ใหญ่และกว้างมากขึ้น)
5. จากนั้นคลิ๊กที่ปุ่ม Edit in Standard Mode ก็จะได้พื้นที่ Selection แล้วก็กด Delete เพื่อลบส่วนที่ไม่ต้องการออก ก็จะได้ภาพที่มีกรอบ
สไตล์ Halftone เทคนิคการทําภาพขอบจุดกระจาย
1. สร้าง File —> New แล้วให้ปรับขนาดตามต้องการ แล้วให้ Mode เป็น RGB Contents เป็น White จากนั้นก็ OK
2. จากนั้นจึงคลิกไอค่อนรูปกระดาษตรง Layer แล้วทําการสร้างเส้น Selection สร้างเส้นรูปวงกลม โดยใช้อุปกรณ์ Marquee Tool จากจุดศูนย์กลางโดยกดปุ่ม Alt +Shift แล้วทําการแดรกเมาส์จากจุดศูนย์กลางจะได้เส้นวงกลม Selection จากนั้น ให้ทําการเลือกสี Foreground color
3. ทําการกด Selection โดยมาที่คําสั่ง Transform Selection แล้วทําการกดโดยการกดปุ่ม Alt +Shift แล้วทําการแดรกเมาส์วงกลมเล็กน้อย แล้วทําการใส่ Feather โดยมาที่ Select —> Feather (Feather Radius=10 pixels)
4. ให้ทําการเปลี่ยนเป็น Quick Mode โดยคลิกปุ่ม Edit in Quick Mask Mode
5. จากนั้นมาที่คำสั่ง Filter —> Pixelate —> Color Halftone ให้ทำการปรับค่าต่างๆ
6. จากนั้นให้ทำการเปลี่ยนเป็น Edit in Standard Mode แล้วทำการเลือกพื้นที่ด้านนอกโดยมาที่ Select –> Inverse จากให้ทำการกดปุ่ม Delete แล้วทำการยกเลิกเส้น Selection โดยมาที่ Select —> Deselect ก็จะได้ภาพเอฟเฟค
การประยุคใช้ Photoshop CS3
เปลี่ยนสีดวงตาในภาพถ่ายให้เป็นสีต่างๆ โดยเปลี่ยนสีจากตาสีฟ้าของนางแบบ
1. เลือกเครื่องมือ Elliptical Maquee เพื่อเลือกพื้นที่วงกลม
2. เลือกพื้นที่ของดวงตาทั้ง 2 ข้าง
3. เลือกเครื่องมือ Color Replacement
4. คลิกเลือกที่ Foreground color
5. เลือกสีเขียว (หรือสีที่ต้องการ)
6. ระบายสีในส่วนที่เลือกไว้
การเปิด - ปิดส่วนประกอบต่าง ๆ ในPhotoshop CS3
ส่วนประกอบต่าง ๆ ในโปรแกรมสามารถปิด – เปิดได้ โดยอาศัยเมนูในหัวข้อ Window เป็นการปิด และเปิดแถบเครื่องมือ ( Tools)
1.)เลือก เมนู Window - Tools
2.)แถบเครื่องมือ ( Tools ) จะหายไปทันที
3.) หากต้องการเปิดแถบเครื่องมือกลับคืนมา ให้เลือกเมนู Window – Toolsนอกจากที่แสดงในตัวอย่างแล้ว ทั้งแถบตัวเลือก ( Option ) และพาเลทต่าง ๆ ล้วนสามารถเปิด – ปิดได้โดยเมนูในหัวข้อ Window นี้ทั้งสิ้น
เริ่มต้นกับการใช้โปรแกรม
( 1.)ในส่วนของ Mene Bar คลิ๊กที่ File แล้วเลือก New จะปรากฏหน้าจอ New เพื่อกำหนดคุณสมบัติของงานใหม่
(2.)หน้าจอ New จะต้องกำหนดค่าต่าง ๆ ให้กับหน้าจอทำงานใหม่ที่ผู้ใช้ต้องการสร้างขึ้นซึ่งสามารถแจกแจงได้ตามนี้
1. Name ชื่อของชิ้นงานใหม่ที่เราสร้างขึ้น
2. Image Size ขนาดของชิ้นงานใหม่ที่เราสร้างขึ้น (กำหนดอันโนมัติ)
3. Preset Sizes ความกว้าง / สูงของชิ้นงานใหม่ที่สร้างขึ้น หน่วยเป็น Pixels
4. Width /Height ส่วนกำหนดความกว้าง/สูง ของชิ้นงานใหม่ โดยผู้ใช้เป็นผู้กรอกข้อมูลในส่วนนี้
5. ส่วนที่ใช้กำหนดหน่วยของความ กว้าง/สูง ของชิ้นงานใหม่
6. Resolution กำหนดจำนวน Pixels ต่อหน่วยพื้นที่
7. Mode กำหนดรูปแบบการแสดงผลของงาน
8. Contents กำหนดรูปแบบของ Blackground
ฟังก์ชั่นการทำงานใหม่ใน Photoshop CS3
6.Camera Raw Camera Raw คือฟีเจอร์ในการตกแต่งภาพจากกล้องดิจิตอล ที่ยังคงรักษาคุณภาพของภาพไว้ 100 เปอร์เซ็นต์ ซึ่งโปรแกรม Adobe Photoshop CS3 มีฟังชั่นการทำงานที่ดีกว่า Photoshop CS2 มาก และฟังก์ชั่นที่ใช้งานได้ดีกว่าเดิมคือ Fill Light Slider (เช่นเดียวกับ Shadow Slider) และ Vibrance Slider ซึ่งเป็นตัวเพิ่มความเข้มของภาพ โดยไม่กระทบ ต่อไฟล์ต้นฉบับ นอกจากนี้ยังมีฟังก์ชั่นใหม่ๆ อย่าง Parametric Curve ซึ่งช่วยให้การปรับแต่งนั้นทำได้ง่ายดายยิ่งขึ้น เพราะระบบ Live Preview ให้ผู้ใช้สามารถเห็นการเปลี่ยนแปลงแบบ ซีนต่อซีน ทำให้มีความสะดวกยิ่งขึ้น
7.Quick Selection Tool เป็นเครื่องมือการเลือกที่ใช้งานง่าย โดยมีฟีเจอร์ที่มีจุดเด่นคือ Refine Edge floating palette ที่จะให้ผู้ใช้ควบคุมการเลือกได้ดีกว่า Photoshop CS2 Sep 19
4.)Printing Done Right Adobe Photoshop CS3 ได้มีการพัฒนาการสั่งพิมพ์ของโปรแกรมให้มีความสามารถมากขึ้น โดยผู้ใช้สามารถกำหนดออปชั่นและตั้งค่าการพิมพ์ได้ดังนี้ - สามารถปรับขนาดภาพที่เหมาะสมสำหรับภาพที่จะนำไปอัดหรือพิมพ์ - สามารถปรับขนาด สัดส่วน และ Resolution ของภาพให้มีความเหมาะสม - สามารถพิมพ์ภาพสีและขาวดำได้โดยตรง - สามารถพิมพ์ภาพแบบเป็นชุดหรือหลายๆขนาดได้ตามความต้องการ - สามารถปรับแต่งการดูเอกสารก่อนพิมพ์ได้อย่างง่ายดาย ผ่านทางไดอะล็อค
5.)Cloning และ Healing พาเล็ตต์ Clone Source เป็นพาเลตต์ที่ทำให้ผู้ใช้สามารถเห็นกระบวนการทำงานในภาพรวมได้ดียิ่งขึ้น ซึ่งทำให้ผู้ใช้ควบคุมการทำงานได้อย่างรวดเร็ว
2.Quick Selection Tool เป็นเครื่องมือที่ใช้ในการปรับแต่งขอบของ Selection และตัดต่อภาพกราฟิค สิ่งที่สำคัญคือการเลือกพื้นที่บนรูปภาพ จากนั้นจึงใช้คำสั่งต่างๆ เพื่อให้เกิดผลเฉพาะบนพื้นที่ดังกล่าว การเลือกพื้นที่ใน Photoshop CS3 เรียกการสร้าง “ซีเล็คชั่น” ซึ่งจะเป็นเครื่องมือที่ใช้งานง่าย โดยมีฟีเจอร์ที่มีจุดเด่นคือ RefineEdge floating palette ที่จะให้ผู้ใช้ควบคุมการเลือกได้ดีกว่า Photoshop CS2
3. Mo Better Curves Curves เป็นคำสั่งที่มีประสิทธิภาพสูงเพราะสามารถเลือกปรับเพิ่มหรือลดแสงเงาของภาพที่ค่าความสว่างต่างๆ ได้อย่างอิสะกว่าคำสั่ง Level และ Shadow/Highlight และเป็นเครื่องมือในการตกแต่งรูปโดยการคลิกลากที่เส้นกราฟเพื่อปรับแสงสว่างชองพิกเซลนอกจากนี้ยังมี AdobeClipping Warning และ In-Dialog เพื่อช่วยให้ผู้ใช้สามารถทำงานได้ง่ายขึ้น
ฟังก์ชั่นการทำงานใหม่ ใน Photoshop CS3
1. Camera Raw Camera Raw คือฟีเจอร์ในการตกแต่งภาพจากกล้องดิจิตอล ที่ยังคงรักษาคุณภาพของภาพไว้ 100 เปอร์เซ็นต์ ซึ่งโปรแกรม Adobe Photoshop CS3 มีฟังชั่นการทำงานที่ดีกว่า Photoshop CS2 มาก และฟังก์ชั่นที่ใช้งานได้ดีกว่าเดิมคือ Fill Light Slider (เช่นเดียวกับ Shadow Slider) และ Vibrance Slider ซึ่งเป็นตัวเพิ่มความเข้มของภาพ โดยไม่กระทบ ต่อไฟล์ต้นฉบับ นอกจากนี้ยังมีฟังก์ชั่นใหม่ๆ อย่าง Parametric Curve ซึ่งช่วยให้การปรับแต่งนั้นทำได้ง่ายดายยิ่งขึ้น เพราะระบบ Live Preview ให้ผู้ใช้สามารถเห็นการเปลี่ยนแปลงแบบ ซีนต่อซีน ทำให้มีความสะดวกยิ่งขึ้น
การสร้างเอกส ารใหม่ ใน Photoshop CS3
เมื่อสร้างไฟล์ใหม่ก็จะปรากฏหน้าต่าง new ก็จะมี Name = การตั้งชื่อหัวข้อเหนือไฟล์ Image Size = ขนาความสูงความกว้างของ พื้นที่ Mode = เป็นการกำหนด Mode สีถ้า เป็นมาตรฐานจะเป็น RGB Color Contents ก็จะเป็นลักษณะพื้นหลังก็จะมี White ( สีขาว) , Background Color ( สีที่เรากำหนด) , Transparent ( สีพื้นแบบ - โปร่งใส , ไม่แสดงสีพื้นโล่ง )
Menu bar เป็นส่วนที่แสดงชื่อเมนูต่างๆ ของโปรแกรมก็จะประกอบด้วย (File , Edit , Image , Layer , Select , Filter , View , Window , Help )
1.File หมายถึง คำสั่งเกี่ยวกับการจัดเก็บและเรียกใช้ไฟล์รูปภาพต่างๆ
2.Edit หมายถึง คำสั่งเกี่ยวกับการแก้ไขลักษณะของรูปภาพและ Image ต่างๆ
3. Image หมายถึง คำสั่งการจัดการรูปภาพและ Image ต่างเช่น การเปลี่ยนสีและการเปลี่ยนขนาด
4. Layer หมายถึง ชั้นหรือลำดับของรูปภาพและวัตถุที่เราต้องการจะทำ Effects
5. Select เป็นคำสั่งการเลือกพื้นที่หรือส่วนต่างของรูปภาพและวัตถุในการที่จะเล่น Effects ต่างๆ
6. Filter เป็นคำสั่งการเล่น Effects ต่างๆสำหรับรูปภาพและวัตถุ
7. View เป็นคำสั่งเกี่ยวกับมุมมองของภาพและวัตถุในลักษณะต่างๆ เช่น การขยายภาพและย่อภาพให้ดูเล็ก
8. Window เป็นส่วนคำสั่งในการเลือกใช้อุปกรณ์เสริมต่างๆที่จำเป็นในการใช้สร้าง Effects ต่างๆ
9. Help เป็นคำสั่งเพื่อแนะนำเกี่ยวกับการใช้โปรแกรมฯและจะมีลายละเอียดของโปรแกรมอยู่ในนั้น หน้าต่างสำหรับการปรับขนาดชิ้นงาน (Image Size) จะประกอบด้วยส่วนต่าง ๆ ที่สำคัญหลายส่วน คือ
1. Pixel Dimensions เป็นส่วนที่ระบุขนาดความจุของชิ้นงานนั้น ๆ
2. Width/Height สำหรับปรับขนาดความกว้าง/สูงของภาพ ในมุมมองของหน้าจอแสดงผลของคอมพิวเตอร์ หน่วยเป็น Pixels หรือ Percent
3. Width/Height สำหรับปรับขนาดความกว้าง/สูงของภาพ ซึ่งในส่วนนี้จะระบุเป็นขนาดจริงของภาพเมื่อทำการ Print ภาพออกมาทางเครื่องพิมพ์
4.Resolution จำนวนจุดสีของภาพต่าหน่วยพื้นที่ เมื่อสั่งพิมพ์ชิ้นงาน
5. ส่วนควบคุมความสัมพันธ์ข้อมูล เป็นส่วนที่เลือกระบุความสัมพันธ์ ระหว่างความกว้าง/สูงของภาพ เพื่อไม่ให้อัตราส่วนของภาพ มีความผิดเพี้ยนไปจากเดิมหมกเกินไป
พื้นที่ทำงานใน Photoshop CS3
1. Menu bar เป็นเมนูที่รวบรวมคำสั่งต่าง ๆที่ใช้ในการจัดการกับภาพ หรือ ไฟล์ภาพ การปรับค่าต่าง ๆ ในการกำหนดคุณสมบัติของภาพ หรือ ไฟล์ภาพ
2. Toolbox กล่องเก็บเครื่องมือซึ่งส่วนนี้จะรวบรวมเครื่องมือที่ใช้ในการทำงานของ Photoshop ที่สำคัญ และใช้บ่อยไว้
3. Option bar เป็นส่วนที่ใช่ในการปรับแต่งค่าต่าง ๆ ของเครื่องมือใน Photoshop ซึ่งในส่วนนี้เริ่มมีใช้ในเวอร์ชั่น 6.0 จากเดิมที่ต้องปรับแต่งเครื่องมือเองในส่วน
4. พื้นที่ทำงาน เป็นส่วนหลักที่ทำงานจริงของภาพ เป็นตัวเก็บงานที่กำลังดำเนินงานอยู่ และยังเป็นพื้นที่ทำงานจริงของโปรแกรมอีกด้วย
5. Palette เป็นวินโดว์ย่อยที่เป็นส่วนเก็บรายละเอียดและปรับแต่งชิ้นงาน ซึ่ง จะถูกแบ่งเป็นส่วน ๆ ตามงานเละคุณสม บัติของงานต่าง ๆ เพื่อสะดวกในการปรับชิ้นงาน
Toolbox (กล่องเครื่องมือ) Toolsbox เป็นส่วนที่เก็บเครื่องมือที่ใช้ในการตกแต่งภาพซึ่งเครื่องมือแต่ละตัวจะทำงานแตกต่างกันไป ซึ่งเครื่องมือต่าง ๆ จะทำงานในส่วน ของตนเองเท่านั้นเว้นแต่ในบางกรณีที่ต้องการทำงานแบบผสมผสานกันหลาย ๆ รูปแบบจะมีการใช้ปุ่มคำสั่งบนคีบอร์ดช่วยซึ่งวิธีการใช้งานเครื่องมือแบบผสมผสานจะ เครื่องมือที่สำคัญในการตกแต่งภาพ
1. Marquee ใช้ในการเลือกหรือกำหนดขอบเขตของภาพที่จะทำงานแบบขอบเขตมาตรฐาน
2. Lasso ใช้ในการเลือกหรือกำหนดขอบเขตของภาพที่จะทำงานแบบกำหนดขอบเขตเอง
3. Move เครื่องมือสำหรับการเครื่อนย้ายงานหรือส่วนของงานที่เลือกไว้
4. Magic Wand ใช้ในการเลือกหรือกำหนดขอบเขตของภาพที่จะทำงานแบบสุ่มค่าสี
5. Crop ตัดภาพเฉพาะในส่วนที่ต้องการ
6. Clone Stampใช้สำหรับ Copy สีในภาพเดียวกัน
7. Paing Bucket เทสีในส่วนที่ทำการเลือกไว้
8. Eraser ลบเม็ดสีที่ไม่ต้องการออก
9. Blur กระจายเม็ดสีออกไปรอบ ๆ
10. Horizontl Type แทรกตัวอักษร ข้อความลงในชิ้นงาน
11. Rectangle รูปทรงอัตโนมัติ
12. Note แทรกข้อความ/เสียงในชิ้นงาน
13. Eyedropper บันทึกค่าสีที่ต้องการ
14. Hand ใช้เลื่อนดูมุมมองของชิ้นงาน
15. Zoomขยายงานเพื่อแก้ไข
16. สีพื้น/ใช้งานสีที่ใช้เป็นพื้นหลังหรือทึ่ต้องการจะใช้กับชิ้นงานนั้น ๆ ไปที่ Menu Bar เลือก File จะปรากฏคำสั่งสำหรับการบันทึกชิ้นงาน 3 รูปแบบ คือ
1.Save การบันทึ่รูปแบบงานแบบมาตราฐานที่สุด ใช้สำหรับงานที่มีการบันทึกไว้แล้วในขั้นแรก และทำการบันทึกการใช้งาานซ้ำหลังจากการแก้ไขหรือปรับแต่งชิ้นงานเพิ่มเติม
2.Save As…การบันทึกชิ้นงานใหม่ หรือต้องการบันทึกรูปแบบการตกแต่ง แก้ไข ไว้อีกชุดหนึ่ง หรือเพื่อสำรองชิ้นงานไว้เพื่อใช้งานอื่น หรือต้องการบันทึกเพื่อเปลี่นยรูปแบบชิ้นงาน ให้เป็นรูปแบบอื่น ๆ
3.Save for Web…เป็นการบันทึกชิ้นงานเพื่อให้ออกมาในรูปแบบของ Webpage
Dreamweaver
Dreamweaver เป็นโปรแกรมสำหรับมืออาชีพที่ใช้ในการพัฒนาและสร้างเว็บไซต์ในปัจจุบัน และเป็นที่นิยมมาก มีเว็บไซต์ดังๆมากมายที่ใช้ Dreamweaver เพื่อพัฒนาเว็บไซต์ เราจะมาดกันว่าทำไม Dreamweaver ถึงเป็นที่นิยมมีผู้ใช้งานกันมากมาย
ช่วยให้คุณทำงานได้เร็วขึ้นนี่คือข้อดีอันดับต้นๆของ Dreamweaver เลยก็ว่าได้ เมื่อก่อนนั้นถ้าเราต้องการสร้างเว็บเพจ เราจะต้องเขียนภาษา HTML ขี้นมาเพื่อให้แสดงผลผ่าน browser เป็นรูปภาพหรือข้อความออกมา ซึ่งทำให้เราทำงานได้ช้าลง เพราะเราจะต้องเขียน HTML ไปและดูการแสดงผลผ่าน browser ไปว่าให้ผลถูกต้องตามที่เราต้องการหรือไม่ แต่สำหรับใน Dreamweaver โปรแกรมจะแสดงหน้าจอที่แสดงผลให้เราสามารถปรับแต่งหน้าตาของเว็บเพจของเราได้เลย โดย Dreamweaver จะทำการเขียน HTML ให้เราเอง
ช่วยให้คุณทำงานได้เร็วขึ้นนี่คือข้อดีอันดับต้นๆของ Dreamweaver เลยก็ว่าได้ เมื่อก่อนนั้นถ้าเราต้องการสร้างเว็บเพจ เราจะต้องเขียนภาษา HTML ขี้นมาเพื่อให้แสดงผลผ่าน browser เป็นรูปภาพหรือข้อความออกมา ซึ่งทำให้เราทำงานได้ช้าลง เพราะเราจะต้องเขียน HTML ไปและดูการแสดงผลผ่าน browser ไปว่าให้ผลถูกต้องตามที่เราต้องการหรือไม่ แต่สำหรับใน Dreamweaver โปรแกรมจะแสดงหน้าจอที่แสดงผลให้เราสามารถปรับแต่งหน้าตาของเว็บเพจของเราได้เลย โดย Dreamweaver จะทำการเขียน HTML ให้เราเอง
เป็น Editor ที่มีประสิทธิภาพตัวหนึ่ง
ในกรณีทีเราต้องการเขียน HTML เอง Dreamweaver ก็เป็นเครื่องมือที่อำนวยความสะดวกให้เราได้ดีมาก ไม่เพียงแต่การใช้การกับ HTML เท่านั้น Dreamweaver ก็รองรับภาษาต่างมากมายเช่น CFML, PHP, ASP, ASP.NET และอื่นอีกมากมาย ช่วยให้เราสามารถเขียน Code ได้ง่ายขึ้น
ในกรณีทีเราต้องการเขียน HTML เอง Dreamweaver ก็เป็นเครื่องมือที่อำนวยความสะดวกให้เราได้ดีมาก ไม่เพียงแต่การใช้การกับ HTML เท่านั้น Dreamweaver ก็รองรับภาษาต่างมากมายเช่น CFML, PHP, ASP, ASP.NET และอื่นอีกมากมาย ช่วยให้เราสามารถเขียน Code ได้ง่ายขึ้น
เป็นโปรแกรมจัดการเว็บไซต์ที่ดี
Dreamweaver ยังเป็นโปรแกรมที่ช่วยให้เราจัดการกับเว็บไซต์ของเราได้ดีขึ้น โดยมีเครื่องมือมากมาย เช่น
Dreamweaver ยังเป็นโปรแกรมที่ช่วยให้เราจัดการกับเว็บไซต์ของเราได้ดีขึ้น โดยมีเครื่องมือมากมาย เช่น
1. FTP เราสามารถแก้ไขหน้าเว็บเพจของเราและส่งไปแสดงผลที่ server ได้ทันที เพราะ dreamwerver จะติดต่อกับ server ให้เราและแสดงไฟล์ของเราที่อยู่ใน server ให้เราเห็นและแก้ไขได้ทันที่ที่เราต้องการถือเป็นเครื่องมือที่สะดวกมาก นอกจากนั้นยังช่วยให้เรามีข้อมูลของเว็บไซต์ของเราสำรองไว้ในเครื่องเราตลอดด้วย
2. Site map เป็นเครื่องมือที่ช่วยแสดงผลเว็บไซต์ของเราให้เป็นรูปร่างขึ้นมา โดยจะแสดงให้เห็นว่าหน้าใด link ไปยังหน้าใดบ้าง โดยเราสามารถย้ายหรือ เปลี่ยนแปลง link ได้ โดยที่ Dreamweaver จะทำการเขียน Code ให้เราใหม่ทันที ถือเป็นเครื่องมือที่ดีมาก เพราะความจริงแล้วเราต้องแก้เว็บเพจของเราตลอด
ช่วยให้เราทำเว็บได้ง่ายขึ้น
สำหรับคนที่ไม่เคยทำเว็บมาก่อนก็สามารถใช้ Dreamweaver เพียงโปรแกรมเดียวเพื่อพัฒนาเว็บไซต์ของตัวเองขึ้นมาได้ง่ายเหมือนกับการเขียนหนังสือ และสำหรับคนที่เชี่ยวชาญ Dreamweaver ก็ทำให้เรามีความคล่องตัวขึ้นเพราะตอนนี้ Dreamwerver มีเครื่องมือมากมายและทำงานเชื่อมต่อกับโปรแกรมดังๆมากมายเช่น Photoshop,Illustrator,Flash หรือแม้แต่กระทั่งการใช้ในลักษณะ Dynamic webpage ก็พัฒนาขึ้นมาก จะเห็นว่าใน Dreamweaver CS3 นั้นมีการใช้งานในส่วนของ Ajax เพิ่มมาอีกด้วยรวมถึงการใช้งาน CSS ที่ได้รับการพัฒนาขึ้นมาก นี่ยังไม่รวมถึง Template มากมายที่ช่วยในการจัดข้อความ ,หน้าตาของเว็บเพจ และเครื่องมืออีกมากมาย ในบทความนี้คงทำให้มองภาพของ Dreamwerver ว่าเป็นเครื่องมือที่อำนวนความสะดวกมากจริงๆ ถ้าลองใช้ดูจะเห็นได้ว่า Dreamweaver นั้นพัฒนาไปมากจากเวอร์ชันแรกๆที่ออกมา และช่วยลดเวลาในการพัฒนาเว็บไซต์ลงได้มาก
สำหรับคนที่ไม่เคยทำเว็บมาก่อนก็สามารถใช้ Dreamweaver เพียงโปรแกรมเดียวเพื่อพัฒนาเว็บไซต์ของตัวเองขึ้นมาได้ง่ายเหมือนกับการเขียนหนังสือ และสำหรับคนที่เชี่ยวชาญ Dreamweaver ก็ทำให้เรามีความคล่องตัวขึ้นเพราะตอนนี้ Dreamwerver มีเครื่องมือมากมายและทำงานเชื่อมต่อกับโปรแกรมดังๆมากมายเช่น Photoshop,Illustrator,Flash หรือแม้แต่กระทั่งการใช้ในลักษณะ Dynamic webpage ก็พัฒนาขึ้นมาก จะเห็นว่าใน Dreamweaver CS3 นั้นมีการใช้งานในส่วนของ Ajax เพิ่มมาอีกด้วยรวมถึงการใช้งาน CSS ที่ได้รับการพัฒนาขึ้นมาก นี่ยังไม่รวมถึง Template มากมายที่ช่วยในการจัดข้อความ ,หน้าตาของเว็บเพจ และเครื่องมืออีกมากมาย ในบทความนี้คงทำให้มองภาพของ Dreamwerver ว่าเป็นเครื่องมือที่อำนวนความสะดวกมากจริงๆ ถ้าลองใช้ดูจะเห็นได้ว่า Dreamweaver นั้นพัฒนาไปมากจากเวอร์ชันแรกๆที่ออกมา และช่วยลดเวลาในการพัฒนาเว็บไซต์ลงได้มาก
ปรับแต่ง Dreamweaver ให้ทำงานกับภาษาไทยได้
1.ปรับแต่งระบบ dreamweaver ให้ทำงานกับภาษาไทยได้ เมื่อเปิดโปรแกรม Dreamweaver ขึ้นมาแล้ว เริ่มแรกเข้าไปที่ Edit > Preferenceจากนั้นจะมีหน้าจอดังรูปด้านล่างให้ท่านเลือกที่เมนูทางด้านซ้ายมือในหัวข้อ Fonts และเปลี่ยนตามรูปการเปลี่ยน fontอาจเปลี่ยนตามที่ผู้ใช้ต้องการก็ได้แต่ ต้องเป็น font ที่สามารถใช้กับภาษาไทยได้โดยมีรายละเอียดดังนี้ Proportional font เป็นตัวอักษรที่ใช้แสดงผลในหน้าแสดงผล (Design) Fixed font เป็นตัวอักษรที่ใช้แสดงผลในหน้าแสดงผล เหมือนกัน เพียงแต่ว่าจะแสดงตัวอักษรที่อยู่ใน pre tag, code tag และ tt tag Code view เป็นตัวอักษรที่แสดงผลในหน้า code ซึ่งเราจะใช้บ่อยมากๆควรปรับให้ตัวใหญ่เพื่อความสะดวกในการอ่าน codeจากนั้นเลือก New Document จากเมนูทางซ้ายมีจะเป็นดังรูป การเปลี่ยน head ของเอกสารใหม่ เมื่อเราเลือกที่ new document แล้วจะปรากฏหน้าตาดังภาพด้านล่าง ซึ่งให้เราเลือกที่ Default document เป็น HTML และเปลี่ยน Default encoding เป็น Thai ตามภาพ เสร็จแล้วก็ให้ไปที่ default document อีกทีเลือก CSS และเปลี่ยน Default encoding เป็น thai อีกเช่นเดียวกันแค่นี้ Dreamweaver ก็สามารถทำงานกับภาษาไทยได้แล้ว ติดตามตัวอย่างการใช้งาน Dreamweaver ในบทต่อไป
1.ปรับแต่งระบบ dreamweaver ให้ทำงานกับภาษาไทยได้ เมื่อเปิดโปรแกรม Dreamweaver ขึ้นมาแล้ว เริ่มแรกเข้าไปที่ Edit > Preferenceจากนั้นจะมีหน้าจอดังรูปด้านล่างให้ท่านเลือกที่เมนูทางด้านซ้ายมือในหัวข้อ Fonts และเปลี่ยนตามรูปการเปลี่ยน fontอาจเปลี่ยนตามที่ผู้ใช้ต้องการก็ได้แต่ ต้องเป็น font ที่สามารถใช้กับภาษาไทยได้โดยมีรายละเอียดดังนี้ Proportional font เป็นตัวอักษรที่ใช้แสดงผลในหน้าแสดงผล (Design) Fixed font เป็นตัวอักษรที่ใช้แสดงผลในหน้าแสดงผล เหมือนกัน เพียงแต่ว่าจะแสดงตัวอักษรที่อยู่ใน pre tag, code tag และ tt tag Code view เป็นตัวอักษรที่แสดงผลในหน้า code ซึ่งเราจะใช้บ่อยมากๆควรปรับให้ตัวใหญ่เพื่อความสะดวกในการอ่าน codeจากนั้นเลือก New Document จากเมนูทางซ้ายมีจะเป็นดังรูป การเปลี่ยน head ของเอกสารใหม่ เมื่อเราเลือกที่ new document แล้วจะปรากฏหน้าตาดังภาพด้านล่าง ซึ่งให้เราเลือกที่ Default document เป็น HTML และเปลี่ยน Default encoding เป็น Thai ตามภาพ เสร็จแล้วก็ให้ไปที่ default document อีกทีเลือก CSS และเปลี่ยน Default encoding เป็น thai อีกเช่นเดียวกันแค่นี้ Dreamweaver ก็สามารถทำงานกับภาษาไทยได้แล้ว ติดตามตัวอย่างการใช้งาน Dreamweaver ในบทต่อไป
สำหรับ Dreamweaver เป็นโปรแกรมสร้างโฮมเพจแบบเสมือนจริง โดยไม่ต้อง เขียนภาษา HTML เอง หรือที่ศัพท์เทคนิคเรียกว่า "WYSIWYG" เราสามารถใช้หน้าจอเสมือนจริงของ Dreamweaver ในการทำเว็บเพจได้เลย โดยใช้เครื่องมือต่างๆที่มีมาให้ดังแสดงในรูปด้านล่าง หน้าตาของโปรแกรม Dreamweaver และชื่อเรียกเครื่องมือต่างๆอธิบายเครื่องมือต่างๆ
1.Document window เป็นส่วนที่ใช้การแสดงผลเว็บเพจที่กำลังสร้างอยู่ ซึ่งแสดงผลได้ทั้งแบบ Code และ แบบเสมือนจริงที่แสดงผลบน web browser หรือจะแสดงควบคู่ไปก็ได้ และใช้ในการทำงานแก้ไขตัวอักษร รูปภาพต่างๆในเว็บเพจด้วย โดยอาศัยเครื่องมือต่างๆ ที่แสดงอยู่ในรูป ข้อเสียของ Dreamweaver ยังไม่อยู่บ้างคือ หน้าจอที่แสดงผลเสมือนจริง กับการแสดงผลจริงใน web browser อาจไม่ตรงกัน ขึ้นอยู่กับ web browser ที่เราใช้ด้วย
2.Insert Bar ประกอบด้วยคำสั่งต่างๆ แยกย่อยดังนี้
2.Insert Bar ประกอบด้วยคำสั่งต่างๆ แยกย่อยดังนี้
1.Common ในแถบนี้จะประกอบด้วยเครื่องมือที่ใช้งานบ่อยๆ เช่น สร้างตาราง , สร้างลิงค์ หรือใส่รูปในเว็บเพจ
2.Layout ในแถบนี้จะเป็นเครื่องมือที่เกี่ยวกับ การแสดงผลแบบ div , ตาราง และ frame สำหรับใช้สร้างเว็บเพจ แบบ layout
3.Forms ในแถบนี้ประกอบด้วยคำสั่งที่ใช้ในการสร้าง form เช่น radio , check box เป็นต้น
4.Data เป็นแถบที่ใส่สำหรับ Dynamic เว็บไซต์ ใช้จัดการกับระบบ data base จะใช้มากในการพัฒนา web application บนเว็บไซต์ เช่นการเขียนระบบ web board , ระบบสมาชิก
5.Spry เป็นแถบใหม่ของ dreamwerver ที่หลายคนจะต้องชอบ เพราะเป็นเครื่องมือที่รวม javascript กับ HTML , CSS เข้าด้วยกัน ทำให้เว็บไซต์มีความน่าสนใจ และมีความสะดวกในการใช้งานมากขึ้น
6.Text ในนี้จะเป็นเครื่องมือที่ใช้จัดการกับตัวอักษรทั้งหมด เช่นใส่สัญลักษณ์พิเศษต่างๆ
6.Text ในนี้จะเป็นเครื่องมือที่ใช้จัดการกับตัวอักษรทั้งหมด เช่นใส่สัญลักษณ์พิเศษต่างๆ
7.Favorites แถบอันนี้คุณสามารถเพิ่ม เครื่องมือต่างด้วยตัวเอง โดยการคลิกขวา สำหรับผู้ที่ต้องการเก็บเครื่องมือต่างๆที่ใช้งานบ่อยไว้ในนี้
3.Property inspector property inspector เป็นแถบเครื่องมือที่จะเปลี่ยนแปลงตามวัตถุที่เราเลือกอยู่เช่น ถ้าคลิกที่รูป property inspector ก็จะเป็นคุณสมบัติเกี่ยวกับรูปนั้นเช่น ขนาดรูป , ชื่อรูป , ลิงค์ของรูป ถ้าเลือกที่ตารางอยู่ ก็จะเป็นคุณสมบัติของตาราง เช่น ขนาดตาราง , จำนวนแถวและหลักของตาราง เป็นต้น
4.docking panels เครื่องมือตัวนี้เป็นเครื่องมือที่จะต้องใช้บ่อยมาก เพราะใช้แสดง file ที่อยู่ในเว็บไซต์ , ไฟล์ CSS และใช้แก้ไข CSS รวมถึงเครื่องมือที่ใช้แสดงภาพ และเครื่องมือ ftp เราสามารถปิด/เปิด แถบนี้ได้โดยการคลิกที่รูปลูกศรด้านซ้ายมือของ panels
5.menu เป็นคำสั่งที่เห็นอยู่ทั่วไปในโปรแกรมทั่วไป จะมีคำสั่งที่ใช้ที่เหมือนกับเครื่องมือต่างที่แสดงอยู่ใน Insert bar, Property inspector, panels แต่มีบางคำสั่งที่แสดงเฉพาะใน menu ด้วย
6.Status bar ถือว่าเป็นเครื่องมือที่มีประโยชน์มาก ทางขวาของแถบนี้จะเป็นตัวเลขที่บอกเวลาในการโหลดหน้านี้ ขนานของ document window เครื่องมือย่อ/ขยาย ส่วนทางขวาจะเป็น Tag select ของ HTML จะแสดงคำสั่งของ HTML เราสามารถแก้ไขคำสั่งต่างๆได้จากหน้าต่างนี้
7.Document Tool bar ทางซ้ายมือสุดจะเป็นคำสั่ง ใช้เปลี่ยนการแสดงผลของ document window อันแรกจะแสดงเฉพาะ code อันต่อมาจะแสดงทั้ง code และ หน้าออกแบบ อันสุดท้ายจะแสดงหน้าออกแบบเท่านั้น และยังมือเครื่องมือที่ใช้กำหนด Title ของหน้าเว็บเพจอีกด้วย
หน้าต่างต่อไปที่จะลืมไม่ได้คือ Perference การเปิดหน้าต่างนี้ทำได้โดยคลิกที่ Edit >Preferences เป็นหน้าต่างที่ใช้ในการปรับระบบต่างๆของ Dreamweaver ให้ตรงกับความต้องการของเรา
การกำหนดไซต์มีความสำคัญมากในการทำเว็บด้วย Dreamweaver ไม่ว่าจะสร้างเว็บไซต์ใหม่ หรือ แก้ไขเว็บไซต์เก่าที่เคยทำมาแล้ว การกำหนดไซต์เป็นขั้นแรกของการทำเว็บด้วย Dreamweaver เป็นการกำหนดให้โปรแกรมทราบที่อยู่ของไฟล์ต่างของเว็บไซต์ที่เราทำไว้ ทำให้โปรแกรมสามารถดึงมาแก้ไขได้ เครื่องมือต่างๆของ Dreamweaver นั้นจะทำงานโดยอ้างอิง site ที่เรากำหนดทั้งหมด ถ้าไม่ได้กำหนด site ก็ทำให้เครื่องมือเหล่านั้นแทบจะหมดความหมายไปเลยทีเดียว สิ่งแรกที่เราจะต้องเข้าใจในการทำเว็บไซต์คือ ไฟล์ทั้งหมด ทั้งรูปภาพ ไฟล์เอกสารต่างๆ เช่น HTML หรือไฟล์ VDO ที่อยู่ในเว็บไซต์ จะถูกรวมอยู่ใน Folder เดียวเราจะเรียก Folder นั้นว่า local root folder
3.Property inspector property inspector เป็นแถบเครื่องมือที่จะเปลี่ยนแปลงตามวัตถุที่เราเลือกอยู่เช่น ถ้าคลิกที่รูป property inspector ก็จะเป็นคุณสมบัติเกี่ยวกับรูปนั้นเช่น ขนาดรูป , ชื่อรูป , ลิงค์ของรูป ถ้าเลือกที่ตารางอยู่ ก็จะเป็นคุณสมบัติของตาราง เช่น ขนาดตาราง , จำนวนแถวและหลักของตาราง เป็นต้น
4.docking panels เครื่องมือตัวนี้เป็นเครื่องมือที่จะต้องใช้บ่อยมาก เพราะใช้แสดง file ที่อยู่ในเว็บไซต์ , ไฟล์ CSS และใช้แก้ไข CSS รวมถึงเครื่องมือที่ใช้แสดงภาพ และเครื่องมือ ftp เราสามารถปิด/เปิด แถบนี้ได้โดยการคลิกที่รูปลูกศรด้านซ้ายมือของ panels
5.menu เป็นคำสั่งที่เห็นอยู่ทั่วไปในโปรแกรมทั่วไป จะมีคำสั่งที่ใช้ที่เหมือนกับเครื่องมือต่างที่แสดงอยู่ใน Insert bar, Property inspector, panels แต่มีบางคำสั่งที่แสดงเฉพาะใน menu ด้วย
6.Status bar ถือว่าเป็นเครื่องมือที่มีประโยชน์มาก ทางขวาของแถบนี้จะเป็นตัวเลขที่บอกเวลาในการโหลดหน้านี้ ขนานของ document window เครื่องมือย่อ/ขยาย ส่วนทางขวาจะเป็น Tag select ของ HTML จะแสดงคำสั่งของ HTML เราสามารถแก้ไขคำสั่งต่างๆได้จากหน้าต่างนี้
7.Document Tool bar ทางซ้ายมือสุดจะเป็นคำสั่ง ใช้เปลี่ยนการแสดงผลของ document window อันแรกจะแสดงเฉพาะ code อันต่อมาจะแสดงทั้ง code และ หน้าออกแบบ อันสุดท้ายจะแสดงหน้าออกแบบเท่านั้น และยังมือเครื่องมือที่ใช้กำหนด Title ของหน้าเว็บเพจอีกด้วย
หน้าต่างต่อไปที่จะลืมไม่ได้คือ Perference การเปิดหน้าต่างนี้ทำได้โดยคลิกที่ Edit >Preferences เป็นหน้าต่างที่ใช้ในการปรับระบบต่างๆของ Dreamweaver ให้ตรงกับความต้องการของเรา
การกำหนดไซต์มีความสำคัญมากในการทำเว็บด้วย Dreamweaver ไม่ว่าจะสร้างเว็บไซต์ใหม่ หรือ แก้ไขเว็บไซต์เก่าที่เคยทำมาแล้ว การกำหนดไซต์เป็นขั้นแรกของการทำเว็บด้วย Dreamweaver เป็นการกำหนดให้โปรแกรมทราบที่อยู่ของไฟล์ต่างของเว็บไซต์ที่เราทำไว้ ทำให้โปรแกรมสามารถดึงมาแก้ไขได้ เครื่องมือต่างๆของ Dreamweaver นั้นจะทำงานโดยอ้างอิง site ที่เรากำหนดทั้งหมด ถ้าไม่ได้กำหนด site ก็ทำให้เครื่องมือเหล่านั้นแทบจะหมดความหมายไปเลยทีเดียว สิ่งแรกที่เราจะต้องเข้าใจในการทำเว็บไซต์คือ ไฟล์ทั้งหมด ทั้งรูปภาพ ไฟล์เอกสารต่างๆ เช่น HTML หรือไฟล์ VDO ที่อยู่ในเว็บไซต์ จะถูกรวมอยู่ใน Folder เดียวเราจะเรียก Folder นั้นว่า local root folder
ขั้นตอนการกำหนด site
1.ไปที่ Menu เลือก Site > New site จะปรากฏหน้าต่างดังรูปข้างล่างขึ้นมา
1.ไปที่ Menu เลือก Site > New site จะปรากฏหน้าต่างดังรูปข้างล่างขึ้นมา
2.ที่แถบด้านบนสุดเลือก Advanced ถ้าเราเลือกที่แถบ Basic จะเป็นการกำหนดแบบอัตโนมัติซึ่งโปรแกรมจะถามเราไปที่ละขั้นตอน
3.แถบ Category ทางซ้ายมือให้เลือก Local Info
4.ช่อง Site name จะใส่ชื่ออะไรลงไปก็ได้ เป็นแค่ชื่ออ้างอิงที่ใช้ในโปรแกรมเท่านั้น เพราะผู้ใช้งาน Dreamweaver อาจทำเว็บไซต์มากกว่า 1 จึงต้องตั้งชื่ออ้างอิงเอาไว้
5.ช่อง Local root folder ให้เราคลิกที่รูป folder สีเหลืองเพื่อเลือก folder ที่ใช้ในการเก็บไฟล์ทั้งหมดของเว็บไซต์ เราจะสร้าง folder นี้ไว้ที่ใดก็ได้ ถ้าคุณมีเว็บไซต์ที่ทำเสร็จแล้วต้องการจะแก้ไขก็ให้เลือก folder ที่เก็บไฟล์ของเว็บนั้นได้เลย
6.ช่อง Default image folder ให้เราระบุสถานที่เก็บไฟล์รูปภาพของเว็บไซต์ แนะนำว่าให้เราสร้าง folder ชื่อ image เอาไว้ใน Local root folder เพื่อเก็บไฟล์รูปทั้งหมดไว้ในนั้น
7.Links Relative to ให้เราเลือก Document เป็นการกำหนดการเขียน link ในเว็บไซต์ของเรา ส่วนการกำหนดแบบ site root จะนิยมใช้เมื่อทำงานกันหลายคนจะใช้วิธีการเขียนลิงค์โดยอ้างอิง root folder
8.Http address เป็นชื่อเว็บไซต์ของเรา เราอาจปล่อยช่องนี้ว่างไว้ก็ได้ถ้ายังไม่มีชื่อเว็บ (url)
9.Case-Sensitive Link ให้เลือกช่องนี้ด้วย เพื่อกำหนดให้การเขียน link เขียนแบบ case sensitive คือคำนึงถึงตัวพิมพ์ใหญ่ หรือพิมพ์เล็กในภาษาอังกฤษด้วย
10.Enable Cache ให้เลือกช่องนี้ เพื่อกำหนดให้ dreamweaver สร้างหน่วยความจำเอาไว้จำทำให้เราสามารถทำงานได้เร็วขึ้น
11.คลิก ok แค่นี้การกำหนด site ของเราก็เสร็จเรียบร้อย ให้เราไปเปิดดูที่ panel ทางขวามือ ในหัวข้อ file จะเห็นรายละเอียดของไฟล์ต่างๆที่เราสร้างไว้ ดังรูปด้านล่าง ในรูปตั้งชื่อเว็บว่า ex1 และกำหนด Local root folder ชื่อ ex และ save ไว้ที่ C: และสร้าง folder ชื่อ images เพื่อใช้ในการเก็บไฟล์รูป ถ้าเราต้องการแก้ไข site ก็ให้เลือกที่ site > manage site ก็จะทำการแก้ไขการกำหนดค่าของ site ได้ ถ้าเรามีหลายไซต์สามารถเลือกแก้ไขแต่ละไซต์ได้โดยคลิกที่ปุ่มที่วงกลมสีแดงไว้ จะแสดง site ทั้งหมดที่เรามีอยู่
เริ่มต้นด้วยการสร้างหน้าเว็บเพจ การสร้างเอกสารใหม่ของ dreamweaver นั้นทำได้ง่ายมากเมื่อเปิดโปรแกรมขึ้นมาจะเห็นว่ามีหน้าจอดังภาพ เราสร้างเอกสารได้จากหน้าจอนี้ดังรูป จากหน้าจอจะเห็นว่ามีชนิดไฟล์มากมายที่เราสามารถสร้างได้ แต่ในบทนี้จะขอพูดถึงแค่ HTML เท่านั้น นอกเหนือจากการใช้หน้าจอเริ่มต้นเมื่อเปิดโปรแกรมเรายังสามารถสร้างเอกสารใหม่ได้ด้วยการไปที่ Menu เลือก File > New Document จะมีหน้าจอให้เลือกดังรูปด้านล่าง เลือก Blank Page > HTML เลือก Create จะได้เอกสาร HTML ขึ้นมา ให้เรา save ทันทีโดยไปที่ Menu เลือก File > save การตั้งชื่อให้กับเว็บเพจ การตั้งชื่อให้กับเว็บเพจนั้นจะต้องตั้งเป็นภาษาอังกฤษเท่านั้น และการตั้งชื่อห้ามมีการเว้นวรรคในชื่อ เราอาจใช้เครื่องหมาย underscore (_) หรือ hyphen (-) แทนการเว้นวรรคได้ หน้าหลักที่จะต้องมีในเว็บไซต์คือหน้า index.html หน้านี้เปรียบเสมือนกับสารบัญของเว็บไซต์ เมื่อเราพิมพ์ชื่อเว็บไซต์ หน้า index.html จะถูกนำมาแสดงเป็นหน้าแรก
เริ่มต้นใส่เนื้อหาให้เว็บเพจ
การใส่เนื้อหานั้นทำได้ง่ายมาก แค่เราคลิกที่ Document window ก็สามารถพิมพ์เนื้อหาลงไปได้เลย ดังตัวอย่างพิมพ์ข้อความว่า ท่องเที่ยววัดพระศรีรัตนศาสดาราม (วัดพระแก้ว) เพื่อเป็นหัวข้อของเว็บเพจอันนี้การสร้างหัวข้อให้กับเว็บเพจ จากเนื้อหา HTML เราทราบอยู่แล้วว่าการสร้างหัวข้อให้กับข้อความนั้น เราจะให้คำสั่ง
เริ่มต้นด้วยการสร้างหน้าเว็บเพจ การสร้างเอกสารใหม่ของ dreamweaver นั้นทำได้ง่ายมากเมื่อเปิดโปรแกรมขึ้นมาจะเห็นว่ามีหน้าจอดังภาพ เราสร้างเอกสารได้จากหน้าจอนี้ดังรูป จากหน้าจอจะเห็นว่ามีชนิดไฟล์มากมายที่เราสามารถสร้างได้ แต่ในบทนี้จะขอพูดถึงแค่ HTML เท่านั้น นอกเหนือจากการใช้หน้าจอเริ่มต้นเมื่อเปิดโปรแกรมเรายังสามารถสร้างเอกสารใหม่ได้ด้วยการไปที่ Menu เลือก File > New Document จะมีหน้าจอให้เลือกดังรูปด้านล่าง เลือก Blank Page > HTML เลือก Create จะได้เอกสาร HTML ขึ้นมา ให้เรา save ทันทีโดยไปที่ Menu เลือก File > save การตั้งชื่อให้กับเว็บเพจ การตั้งชื่อให้กับเว็บเพจนั้นจะต้องตั้งเป็นภาษาอังกฤษเท่านั้น และการตั้งชื่อห้ามมีการเว้นวรรคในชื่อ เราอาจใช้เครื่องหมาย underscore (_) หรือ hyphen (-) แทนการเว้นวรรคได้ หน้าหลักที่จะต้องมีในเว็บไซต์คือหน้า index.html หน้านี้เปรียบเสมือนกับสารบัญของเว็บไซต์ เมื่อเราพิมพ์ชื่อเว็บไซต์ หน้า index.html จะถูกนำมาแสดงเป็นหน้าแรก
เริ่มต้นใส่เนื้อหาให้เว็บเพจ
การใส่เนื้อหานั้นทำได้ง่ายมาก แค่เราคลิกที่ Document window ก็สามารถพิมพ์เนื้อหาลงไปได้เลย ดังตัวอย่างพิมพ์ข้อความว่า ท่องเที่ยววัดพระศรีรัตนศาสดาราม (วัดพระแก้ว) เพื่อเป็นหัวข้อของเว็บเพจอันนี้การสร้างหัวข้อให้กับเว็บเพจ จากเนื้อหา HTML เราทราบอยู่แล้วว่าการสร้างหัวข้อให้กับข้อความนั้น เราจะให้คำสั่ง
ไม่มีความคิดเห็น:
แสดงความคิดเห็น