Thaigraph

 

   

ค้นหา
Thaigraph หน้าฟอรั่ม Webmaster Tip วิธีการวางโครงร่างเวปหนึ่ง ...
Maple Avatar ห้องแต่งตัวใหม่วิธีการเขียน Blog ส่วนตัววิธีโพสคลิปจาก Youtubeตารางข้อมูล เครดิต + Moneyวิธีการโพสกระทู้แบบรวดเร็ว
ดู: 2804|ตอบ: 0
go

วิธีการวางโครงร่างเวปหนึ่งหน้าอย่างมีระบบ

Rank: 9Rank: 9Rank: 9

โพสต์เมื่อ 6-8-2008 20:00 |แสดงโพสต์ทั้งหมด
ในการทำเวปนั้นเมื่อเราวางโคร่งให้เป็นระบบตอนแรก เราก็สมารถบริหารเวปได้อย่างทั่วถึง และการแก้ไขต่างๆจะง่ายยิ่งขึ้น และเวปเราก็จะได้ดูมีมาตรฐานยิ่งขึ้น เริ่มเรียนรู้กันเลย

 

 

 

 

 

ขั้นตอนที่1. เปิดโปรแกรมที่จะทำเวปขึ้นมาในที่นี้จะใช้ Dreamweaver ในการทำเวป ขั้นตอนที่2. เมื่อทำการเปิดโปรแกรมฯ แล้วจากนั้นให้ทำการกำหนดส่วนของเวปเรา ดังจะเห็นจากตัวอย่าง.ในที่นี้จะยกตัวอย่างแบบที่เขานิยมวางกัน. คือการแบ่งหน้าเวปออกเป็นสี่ส่วนด้วยกัน.

 

 

ส่วนที่1. คือ ส่วนบนสุดเป็นส่วนเด่นที่สุดในเวป มักนิยม ใส่โลโก้ตรงหัวมุมสุดและวางแบนเนอร์โฆษณาในตรงกลาง ให้คนเข้าเวปสามารถเห็นเด่นชัดมากที่สุด ส่วนที่2.ส่วนที่3. คือ ส่วนของเนื้อหาในเวปของเรานั้นเองไม่ว่าจะเป็นส่วนของข่าวสารหรือข้อมูลใหม่ๆ หรือจะเป็นบทความต่างๆ ของเวปเรา ส่วนที่4. คือส่วนของเมนูเสริมต่างๆ เช่น อาจจะเป็นพื้นที่ส่วนโฆษณาและโชว์ข้อมูลเวป ที่เด่นก็ได้หรืออาจจะใส่แบนเนอร์ลิงค์กับเวปอื่นๆก็ได้ ขั้นตอนที่3. สร้าง Table กำหนดสัดส่วนของเวปเริ่มจากส่วนด้านบนก่อน 3.1 Table ส่วนด้านบน ก่อนอื่นทำการการ Setpage ก่อน โดยมาที่ Modify --- Page Propertiesแล้วทำการ Setpage ดังที่ได้กล่าวในบทที่แล้ว จากนั้นให้ทำการ คลิ๊กที่ Objact Table แล้วทำการปรับค่า Rows = 1 , Columns = 1, Cell Padding = 0, Cell Spacing = 0 Width = 100 Percent, Border = 0 เราก็จะได้ Table ที่มีความกว้างเต็มพื้นที่ของเวป และติดกับขอบด้านบนของ Page จากนั้นให้เคอร์เซอร์อยู่ใน Table ที่สร้างแล้วใส่สีลงไปโดยไปเลือกสีที่ Porperties ก็จะได้ส่วนด้านบนที่เรากำหนดดังภาพ.

 

 

เมื่อเราได้ Table ส่วนนอกของส่วนด้านบนแล้วจากนั้นให้เราทำการใส่โลโก้และแบนเนอร์ของเรา ลงไปด้วย ทำได้โดย ให้เคอเซอร์อยู่ใน Table ที่เราสร้างจากนั้นก็ทำการใส่ Table ซ้อนเข้าไปอีก ทีหนึ่ง โดยคลิ๊กที่ Objact Table อีกครั้งหนึ่งแล้วให้ใส่ค่าลงไปดังนี้ Rows = 1 , Columns = 2, Cell Padding = 1, Cell Spacing = 1 Width = 100 Percent, Border = 0 จากนั้นก็จะได้ Table ที่แบ่งออกเป็นสองส่วน จากนั้นก็ใส่โลโก้และแบเนอร์ของเราลงไป โดยให้เคอร์เซอร์ ไปอยู่ใน Table แรกจากนั้นให้ทำการ คลิ๊กที่ Object images แล้วทำการหารูปโลโก้มาใส่ จะสังเกตเห็นว่าขนาดพื้นทั้งสองข้างเท่ากัน เราต้องการให้ ความกว้างของ Table ด้านโลโก้ มีความกว้างเท่า ขนาดความกว้างของ โลโก้ เราก็คลิ๊ก ที่รูปเพื่อดูว่ามีขนาดความกว้างเท่าไหร่ จะสังเกตุเห็นได้จากตรง Properties ของ Object images ดังภาพ.

 

จากนั้นเราก็มาปรับ Properties ของ Table ให้เท่ากับความกว้างของรูปภาพ

 

 

แล้วให้ไปอีก Table หนึ่งแล้วให้ใส่ภาพแบนเนอร์ลงไปในตำแหน่งตรงกลางก็จะได้ดังภาพ. เราก็จะได้ส่วนบนของเวป

 

 

3.2 Table ส่วนด้านข้างและส่วนกลาง เมื่อเราได้ Table ส่วนบนเสร็จแล้วจากนั้นเรามาทำการวาง Table ส่วนด้านข้างและตรงการ โดยใส่ Table ที่แบ่งออกเป็นสาม Table ทำได้โดยการคลิ๊กที่ Object Table จากนั้นให้ทำการ ปรับค่าต่างๆดังนี้ Rows = 1 , Columns = 3, Cell Padding = 1, Cell Spacing = 1 Width = 100 Percent, Border = 0 แล้วทำการใส่สี Table ด้านข้างทั้ง สองข้างเสีย และทำการกำหนดความกว้างให้สัมพันธ์กัน (ดังที่กล่าวมาขั้นต้น) เราก็จะได้โครงร่างเวปดังภาพ แล้วก็ทำการ Save

 

 
[ คลิ๊กเพื่อดูตัวอย่างโครงร่างเวปที่ได้ ]
 
เป็นไงครับพอจะมองเห็นการเริ่มทำเวปอย่างเป็นระบบหรือยังหละคราวหน้าเราจะมาเรียนรู้เกี่ยว การทำส่วนเมนูให้ดูเด่นด้วยลูกเล่น Table กัน โปรดติดตามชม
ตอนต่อไป
 
ธนา mastertana

Thaigraph

GMT+7, 14-10-2019 06:24 , Processed in 0.039598 second(s), 19 queries .

Powered by Discuz! X1.5

© 2001-2010 Comsenz Inc. Thai Language by DiscuzThai! Team.

Top 10 Best Sellers in Clothing for 2017 Top 10 Best Sellers in Clothing Best Sellers in Clothing
Top 10 Best Sellers in Books reviewer 2017 Top 10 Best Sellers in Books Best Sellers in Books