About DwThai.Com 00

DwThai.Com Logo

DwThai.Com

Tip and Trick Dreamweaver

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





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

วิธีการออกแบบเว็บในแบบ Responsive ด้วย Dreamweaver ตอนที่ 2 [Article ID : 213]


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

ต่อจากตอนที่ 1 ที่เราได้ทำการ Create ไฟล์สำหรับการเริ่มต้นเรียนรู้การสร้างเว็บเพจในแบบ Web Responsive ไปแล้ว ซึ่งเบื้องต้นนนี้ ก็ยังอยู่ในเรื่องของการเรียนรู้ Tools ในการใช้งานกันอยู่นะครับ เพื่อให้เราได้เกิดความรู้ความเข้าใจในการใช้เครื่องมือต่าง ๆ ที่เกี่ยวข้องกันเสียก่อน

ไฟล์ที่เกี่ยวข้อง

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

จะดูการแสดงผลกับ Mobile, Tablet หรือ Desktop Computer ได้อย่างไร ?

เราสามารถดูการแสดงผลในหน้าจอที่แตกต่างกันได้ โดยที่ในส่วนของ Status ด้านล่างของหน้าจอโปรแกรม จะมี Icon ให้เราได้กดเพื่อดูการแสดงผลเบื้องต้นกับขนาดหน้าจอต่าง ๆ ดังรูป ให้ทำการทดสอบกดไปที่หน้าจอขนาดต่าง ๆ จาก Icon ข้างต้น และลองสังเกตระบบ Grid ที่เปลียนแปลงไปตามขนาดหน้าจอต่าง ๆ จะพบว่า สัมพันธ์กับระบบ Grid ที่เราได้ทำการกำหนดในขั้นตอนของการสร้างไฟล์ใหม่ที่ผ่านมา (ถ้าจำไม่ได้ลองย้อนกลับไปอ่านตอนที่ 1)
ซึ่ง Grid ที่แสดงกับโปรแกรม Dreamweaver นี้จะไม่แสดงผลกับ Web Browser และที่ Window Size เรายังสามารถ Click เพื่อให้โปรแกรม Dreamweaver แสดงผลกับขนาดหน้าจออื่น ๆ ได้อีกด้วย ดังรูป

Multi Screen

Dreamweaver มี Option ที่เรียกว่า Multi Screen ให้เราได้เลือกขนาดหน้าจอต่าง ๆ คล้าย ๆ กับ Window Size ที่ผ่านมา แต่ Multi Screen สามารถแสดงผลในขนาดหน้าจอเพื่อให้นักพัฒนาเว็บใช้ในการรับชมเปรียบเทียบขนาดหน้าจอเมื่อมีการแสดงผลเว็บเพจ ดังรูป
เมื่อเลือกไปที่ Multiscreen Preview โปรแกรมจะทำการแสดงผลเว็บเพจ ดังรูป

สำหรับบทความนี้ มุ่งเน้นการแนะนำการใช้ Tools ต่าง ๆ ที่ Dreamweaver จัดเตรียมมาให้เพื่อใช้ในการออกแบบเว็บในแบบ Web Responsive ซึ่งบทความในตอนต่อจากนี้ เราจะได้เรียนรู้ขั้นตอนต่างๆ ต่อไป...โปรดติดตาม.
คลิกอ่านตอนที่ 3
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



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

เปิดใช้งานไม้บรทัด (Rulers) และเส้น Guides Line ไว้ใช้กะระยะแนวเส้น

เรื่อง : เปิดใช้งานไม้บรทัด (Rulers) และเส้น Guides Line ไว้ใช้กะระยะแนวเส้น ในการออกแบบเว็บเพจ บางครั้งเราจำเป็นต้อง...  

ตรวจเช็คข้อมูลในฟอร์มก่อนส่งไปประมวลผล (Form Validation)

เรื่อง : การทำ Form Validation ด้วยโปรแกรม Dreamweaver เว็บโปรแกรมเมอร์ที่ต้องทำการเขียนโปรแกรมต่าง ๆ บนเว็บ มักต้องการเข...  

การทำ Refresh/Redirect ให้ Web Browser ด้วย Dreamweaver

เรื่อง : สั่งให้ Web Browser ทำการ Refersh หรือ Redirect ตัวเอง ใบบางครั้งเรามีความจำเป็นต้องทำการ Refresh ...  

สร้างโปรแกรม Guestbook ด้วย Dreamweaver + PHP + MySQL ตอนที่ 2

หลังจากที่เราได้ทำการสร้าง Database และ Table ไปแล้วจากตอนที่ 1 ที่ผ่านมา ขั้นตอนต่อไปก็คือ เราต้องทำการสร้างตัว MySql Connection ใ...  


Copyright ©2003-2019 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

*
*
*