About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

ก่อตั้งเมื่อปีพุทธศักราช ๒๕๔๖





ค้นหาข้อมูลใน DwThai.Com

วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver ตอนที่ 3 (จบ) [Article ID : 215]


เรื่อง : การออกแบบ Responsive Web Design ด้วย Dreamweaver ตอนที่ 3 (จบ)

กลับมาต่อกันอีกสักตอนสำหรับเรื่องของการใช้งานโปรแกรม Dreamweaver เพื่อการออกแบบเว็บในแบบ Responsive หลังจากที่ปล่อยบทความชุดนี้ขาดระยะการอัพเดทไปนานเหมือนกัน ซึ่งในบทความนี้เราจะมาออกแบบเว็บในลักษณะดังรูปกัน ทั้งนี้เพื่อเป็นแนวทางให้ท่านได้ศึกษาด้วยตนเองต่อไป Responsive Web Design by DwThai.Com

เริ่มต้นออกแบบด้วยการวางโครงสร้าง

ในลำดับแรกเราจะมาทำการวางโครงสร้างหน้าเว็บเพจของเรากันเสียก่อน โดยที่หน้าเว็บเพจสำหรับตัวอย่างในบทความนี้ เราจะออกแบบเป็นลักษณะ 3 กล่องข้อความ ซึ่งท่านได้เห็นจากรูปตัวอย่างด้านบนกันแล้ว ก่อนที่จะไปทำตามลำดับขั้นตอน ให้เราทำการเปิดไฟลที่เราสร้างไว้ตั้งแต่ตอนที่ 1 (อ่านตอนที่ 1) ขึ้นมา และปรับการแสดงผลของโปรแกรม Dreamweaver เป็น Desktop size จากนั้นให้ทำการปฏิบัติตามขั้นตอนต่าง ๆ ดังนี้

1. จากไฟล์ที่สร้างขึ้นไว้เมื่อเราเปิดขึ้นมาแล้วเราจะพบว่าโปรแกรมได้มีการสร้างข้อมูลให้เราจำนวนนึง ให้เราทำการเลือกที่กล่องข้อมูลนั้น (กล่องด้านใน) ดังรูป

2. จากนั้นทำการลบกล่องข้อมูลนั้นออก และให้มี Cursor กระพริบที่ในบริเวณกล่องเส้นประ (เส้นรอบนอก) ดังรูป

3. เมื่อได้ปฏิบัติตามข้อ 2 แล้ว ให้เราทำการไปที่ Insert จากนั้นเลือกไปที่ Layout แล้วเลือกที่รายการ Insert Fluid Grid Layout Div Tag
(Insert -> Layout -> Insert Fluid Grid Layout Div Tag) ดังรูป

4. เมื่อเลือกรายการดั่งข้อที่ 3 แล้ว โปรแกรมจะทำการเปิดหน้าต่าง Insert Fluid Grid Layout Div Tag เพือให้เรากำหนดค่าในการสร้าง Div Tag ซึ่ง Div แรกที่เราจะสร้างขึ้นนนี้จะให้เป็นในส่วนของ Header ของเว็บเพจของเรา ให้ทำการกำหนดค่า และกดที่ปุ่ม OK ดังรูป

5. จากขั้นตอนที่ 4 จะได้ข้อมูล ดังรูป

6. ต่อมาให้เรากดที่รายการเช่นเดียวกับขั้นตอนที่ 3 เพื่อทำการสร้าง Div อีก 1 รายการ โดย Div ที่เราจะสร้างในขั้นตอนนี้ จะเป็นส่วนของการแสดง Menu ของเว็บเรา ให้ทำการกำหนดข้อมูล แล้วกดที่ปุ่ม OK ดังรูป


7. เมื่อได้ดั่งขั้นตอนที่ 6 แล้ว ให้เราทำการกดที่รายการเช่นเดียวกับข้อที่ 3 เพื่อทำการสร้าง Div อีก 1 รายการ โดย Div ต่อไปนี้จะเป็นส่วนของการแสดง Contents หรือเนื้อหาหน้าเว็บเพจ (Box1) ดังรูป

8. เมื่อได้แล้ว ให้ทำการปรับขนาดของ Div หรือกล่องข้อมูลที่ได้จากขั้นตอนที่ 7 ให้เป็น 4 Columns ดังรูป


9. เมื่อได้กล่องของ Contents ที่ 1 จากข้อ 8 แล้ว เราจะทำการสร้างอีก 2 กล่องข้อมูล (Box2 และ Box3) โดยที่ 2 กล่องข้อมูลนี้จะใช้เป็นขนาดที่ 3 Columns ดังรูป



10. เมื่อได้สร้างกล่องสำหรับแสดง Contents ครบทั้ง 3 ดั่งขั้นตอนที่ 9 แล้ว จากนั้นทำการสร้างอีก 1 กล่องข้อมูล เพื่อสร้างเป็น Footer ของเว็บเพจ ดังรูป

เราจะสังเกตได้ว่า กล่องทั้ง 3 ที่เราได้สร้างขึ้นสำหรับในส่วนของ Contents นั้น เราจะกำหนดขนาดโดยใช้ระบบ Grid เป็นการกำหนดขนาด ซึ่งระบบ Grid ที่เราเลือกใช้เป็นแบบ 10 Grids จึงได้เป็นลักษณะดั่งกล่าว (4+3+3 = 10)

ใส่ข้อมูลและตบแต่ง

11. เมื่อได้ดั่งขั้นตอนที่ 10 แล้ว ทำการพิมพ์ข้อมูลและจัดรูปแบบข้อความของเราลงไปตามโครงสร้างที่ได้วางไว้ ซึ่งอาจดูได้จากตัวอย่าง ดังรูป
(ตรงนี้ผมจะไม่ขออธิบายในบทความนี้ เนื่องจากเป็นเรื่องของการใช้ CSS ปรกติทั่วไปในการตบแต่งข้อความ)

ทดสอบการแสดงผล

12. เมื่อได้ทำการใส่ข้อมูลและตบแต่งเป็นที่เรียบร้อยแล้ว ทำการทดสอบการแสดงผลโดยใช้ Tools ที่เราได้เคยเรียนรู้ไปจากตอนที่ 2 (อ่านตอนที่ 2) ดังรูป

13. จากนั้นทำการทดสอบแสดงผลกับ Web Browser ด้วยการกด F12 จะแสดงผล ดังรูป

และเมื่อมีการย่อหน้าต่าง Web Browser ลงจะเกิดการเปลียนแปลง ซึ่งเป็นการแสดงผลในแบบที่เราเรียกกันว่า Responsive นั่นเอง ดังรูป

จาก 3 ตอนของบทความชุด วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver คงจะพอช่วยให้ผู้ใช้งานโปรแกรม Dreamweaver พอมองเห็นแนวทางในการออกแบบเว็บ ซึ่งสามารถแสดงผลตอบสนองได้ในหลายหลายอุปกรณ์แสดงผลได้กันบ้างพอสมควร แต่หลักการของ Responsive Web Design ยังมีอีกมาก ซึ่งท่านควรหาศึกษาและเรียนรู้กันต่อ ๆ ไป หรือหากมีโอกาสทาง DwThai.Com จะนำเสนอท่านในตอนต่อ ๆ ไป.
About the Author
Mr.Sittichai Raksasuk

Mr.Sittichai Raksasuk

Sittichai is a Web Developer and Web Technology Instructor for over 10 yrs. He is also a webmaster of dwthai.com and author jQuery with Dreamweaver (2010). DwThai.Com is a website for web developer using Adobe Dreamweaver.

Contact with him : dwthai@gmail.com



บทความอื่นที่คุณอาจสนใจ

การเขียนโค้ดโปรแกรมด้วย PHP กับ Dreamweaver (PHP with Dreamweaver)

เรื่อง : PHP กับโปรแกรม Dreamweaver บทความนี้จะขอมาแนะนำการใช้งานโปรแกรม Dreamweaver กับการเขียนโปรแกรมด้วยภาษา PHP ครับ ...  

สร้าง Popup Window ด้วย Open Browser Window

เรื่อง : การทำ Popup Window กำหนดขนาดหน้าต่าง Web Browser คงจะเคยเข้าไปตามเว็บ ซึ่งเขาอาจจะมีปุ่มกด ซึ่งเมื่อกดไปที่ปุ่ม...  

การสร้างโปรแกรมสำหรับการค้นหา (Search) ข้อมูลจาก Database

เรื่อง : การสร้างโปรแกรมสำหรับการค้นหา (Search) ข้อมูลจาก Database บทความนี้คงถูกอกถูกใจของใครหลายคนเป็นแน่ เ...  

การทำสี Background ในแบบ Gradient ด้วย CSS

เรื่อง : วิธีทำสีพื้นหลังแบบ Gradient ด้วย CSS (Gradient Background Color) CSS3 มีค่าของ...  


Copyright ©2003-2016 dwthai.com. All rights reserved.
This website was created by : S.raksasuk.

ติดต่อ DwThai.Com

e-mail : dwthai@gmail.com
mobile: 08-9495-7296

เขียน Guestbook : DwThai.Com

*
*
*