หลักการตกแต่งหน้าเว็บ

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 1)

ในบทความนี้จะเป็นเนื้อหาการสร้างเว็บเพจด้วย CSS layout โดยจะมีขั้นตอนดังนี้

1.ออกแบบโครงสร้างหลักๆของหน้าเว็บเพจก่อน ดังรูปด้านล่าง

จากรูปจะเห็นว่าเราได้แบ่งส่วนต่างๆของหน้าเว็บเพจออกเป็น 4 ส่วนคือ

1.1.ส่วนแสดงสัญลักษณ์ของเว็บไซต์ ส่วนนี้เราจะให้แสดงรูปภาพและสัญลักษณ์ของเว็บไซต์

1.2.ส่วนแสดง Navigation ของเว็บไซต์ ส่วนนี้จะแสดงลิงค์ไปยังหน้าต่างของเว็บไซต์

1.3.ส่วนแสดงเนื้อหา จะแสดงเนื้อหาและรูปภาพ

1.4.ส่วนท้ายสุดของหน้า จะแสดงลิงค์ไปยังหน้าหลักๆของเว็บไซต์

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

2.ออกแบบหน้าตาของเว็บเพจ 

หลักจากที่เราได้โครงสร้างหลักๆของเว็บเพจแล้ว เราก็จะออกแบบหน้าตาของเว็บเพจกัน โดยใช้โปรแกรมกราฟิกต่างๆ เช่น Photoshop , Firework , Illustrator แล้วแต่ถนัด โดยในตัวอย่างจะออกแบบโดยใช้โปรแกรม Illustrator

หลังจากที่เราออกแบบเว็บเพจเรียบร้อยแล้ว ในบทต่อไปจะเริ่มสร้างเว็บเพจกัน

เพื่อความเข้าใจที่ง่ายขี้น

คลิกที่นี่เพื่อดูตัวอย่างเว็บเพจที่เสร็จแล้ว

คลิกที่นี่เพื่อดาว์นโหลดตัวอย่างเว็บเพจที่เสร็จแล้ว

เกี่ยวกับบทความนี้

  • ระดับความยาก : พื้นฐาน
  • คะแนนของบทความนี้ : 11
  • สร้างเมื่อ : 16-05-2010
  • จำนวนครั้งที่เปิด : 64,627
  • เนื้อหาที่เกี่ยวข้อง :

คะแนนความน่าสนใจ39639สุดยอด!

คลิกที่ สุดยอด! เพื่อโหวตให้กับบทความนี้หากคิดว่าน่าสนใจ

บทความอื่นๆในหมวดลองทำเว็บไซต์ แบบง่ายๆ (13 เรื่อง)

แนะนำ  CSS Layouts

แนะนำ CSS Layouts

CSS layouts เป็นการจัดหน้าเว็บเพจโดยไม่ต้องใช้คำสั่ง table มีข้อดีอย่างไรในบทความนี้จะบอกทั้งหมด

สร้างเมื่อ : 16-05-2010 10:03 | จำนวนครั้งที่เปิด : 27,775

พื้นฐาน CSS Layout

พื้นฐาน CSS Layout

ความสามารถ CSS layout นั้นเป็นความสามารถใหม่ที่มีใน Dreamweaver CS3 เท่านั้น ในบนนี้จะมีเนื้อหาปูพื้นฐานความเข้าใจในการทำงานของ CSS layout

สร้างเมื่อ : 16-05-2010 10:03 | จำนวนครั้งที่เปิด : 30,479

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 1)

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 1)

ในบทนี้จะพูดถึงการเริ่มต้นออกแบบเว็บเพจ และตัวอย่างเว็บเพจที่ทำด้วย CSS layout ให้ดาว์นโหลดไปศึกษากัน

สร้างเมื่อ : 16-05-2010 10:03 | จำนวนครั้งที่เปิด : 64,627

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 2)

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 2)

เริ่มการใช้งาน CSS layout

สร้างเมื่อ : 16-05-2010 10:05 | จำนวนครั้งที่เปิด : 32,528

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 3)

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 3)

ใส่เนื้อหาให้กับเว็บเพจ

สร้างเมื่อ : 16-05-2010 10:07 | จำนวนครั้งที่เปิด : 24,245

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 4)

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 4)

เขียน CSS ควบคุมการแสดงผลส่วน HEAD

สร้างเมื่อ : 16-05-2010 10:07 | จำนวนครั้งที่เปิด : 23,988

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 5)

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 5)

จัดการ CSS ในส่วนของ Containner และ Main

สร้างเมื่อ : 16-05-2010 10:09 | จำนวนครั้งที่เปิด : 19,815

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 6)

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 6)

จัดการ CSS ในส่วนของ Left ทั้งหมด

สร้างเมื่อ : 16-05-2010 10:10 | จำนวนครั้งที่เปิด : 13,833

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 7)

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 7)

กำหนด CSS ให้ navigation ต่อจากบทที่ 6

สร้างเมื่อ : 16-05-2010 10:10 | จำนวนครั้งที่เปิด : 11,700

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 8)

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 8)

จัดการ CSS ในส่วนของ Right ทั้งหมด

สร้างเมื่อ : 16-05-2010 10:11 | จำนวนครั้งที่เปิด : 10,073

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 9)

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 9)

จัดการ CSS ในส่วนของ Right ต่อจากตอนที่ 8

สร้างเมื่อ : 16-05-2010 10:11 | จำนวนครั้งที่เปิด : 9,931

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 10)

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 10)

จัดการ CSS ในส่วนของ Right ต่อจากตอนที่ 9

สร้างเมื่อ : 16-05-2010 10:12 | จำนวนครั้งที่เปิด : 9,669

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 11)

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout (ตอนที่ 11)

จัดการกับ CSS ส่วนสุดท้ายของเว็บเพจ footer

สร้างเมื่อ : 16-05-2010 10:12 | จำนวนครั้งที่เปิด : 13,899

 

 

 

This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s