ads by google

วันอังคารที่ 11 ธันวาคม พ.ศ. 2555

ตัวอย่างการสร้างเว็บเพจด้วย CSS layout

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

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



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

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

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

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

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

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

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

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



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

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

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

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

การเพิ่ม NAVIGATION BAR


รายชื่อในส่วนบนของหน้า HTML ตั้งใจจะใช้เป็นเมนู navigation เวบไซด์หลายเวบมีการใช้เมนูวางเรียงไว้ด้านบนหรือไว้ด้านข้างของ หน้าและหน้านี้ก็ควรมีเช่นกันซึ่งเราจะวางไว้ด้านซ้ายเนื่องจากดูแล้วน่าแล้วน่าสนใจกว่าวางไว้ด้านบน
เมนูดังกล่าวนี้มีอยู่ในหน้า HTML แล้วโดยใช้ <ul>แสดงรายการไว้ด้านบนลิงค์ยังไม่สามารถใช้ได้เนื่องเวบไซด์ของเราในขณะนี้มี เพียงหน้าเดียวแต่ในขณะนี้เรื่องนั้นไม่สำคัญ แต่แน่นอนว่าสำหรับเวบไซด์จริงๆแล้วไม่ควรจะมีลิงค์ที่ใช้งานไม่ได้
ดังนั้นเราจะต้องย้ายรายชื่อลงมาอยู่ด้านซ้ายและย้ายข้อความที่เหลือทั้งหมดมาทางด้านขวาเล็กน้อยเพื่อให้มีพื้นที่ CSS property ที่เราใช้คือ 'padding-left' (สำหรับย้ายข้อความในส่วน body) และ 'position' 'left' และ 'top' (เพื่อย้ายเมนู)
ยังมีวิธีอื่นๆที่สามารถทำได้หากคุณดูในส่วน “column” หรือ “layout” ในหน้า Learning CSS (เรียนรู้ CSS)คุณจะเจอเทมเพลตที่ใช้ได้เลยหลายอันแต่ อันนี้ก็ใช้ได้เหมาะสมกับจุดประสงค์ของเรา
ในหน้าโปรแกรมแก้ไข ให้เพิ่มบรรทัดต่อไปนี้เขาไปในไฟล์ HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]
หากคุณเซฟไฟล์อีกครั้งและ reload ในบราวเซอร์ทีนี้คุณก็จะได้รายชื่อลิงค์ที่อยู่ทางด้านซ้ายของข้อความหลัก ซึ่งตอนนี้หน้าเวบนี้ก็ ดูน่าสนใจขึ้น
ภาพจากหน้าจอที่มีเมนูด้านซ้าย
ข้อความหลักย้ายไปอยู่ที่ด้านขวาและตอนนี้รายชื่อลิงค์ย้ายไปอยู่ที่ด้านซ้ายแล้วแทนที่จะอยู่ด้านบน
เดือน! ล่วงหน้า:การใส่ 'position: absolute' เป็นการบอกว่า element ul ถูกวางไว้แยกออกจากข้อความที่มาก่อนหรือหลังภายในเอกสารและการใช้ 'left' และ 'top' ก็เพื่อแสดงให้รู้ว่าอยู่ในตำแหน่งใด ในกรณีนี้ คือ 2em จากด้านบนและ 1em จากด้านซ้ายของหน้าต่าง
'2em' หมายถึง 2 เท่าของขนาดฟอนท์ปัจจุบันเช่น ถ้าเมนูใช้ฟอนท์ขนาด 12 point ดังนั้น '2em' จะเท่ากับ 24 point 'em' เป็นหน่วย การวัดประเภทหนึ่งที่มีประโยชน์ในการใช้ CSS เนื่องจากสามารถนำมาใช้กับฟอนท์ที่ผู่อ่านมักจะใช้ได้โดยอัตโนมัติ บราวเซอร์ส่วนใหญ่ มีเมนูที่ไว้เพิ่มหรือลดขนาดของฟอนท์คุณจะเห็นได้ว่าขนาดของเมนูจะเพิ่มเมื่อขนาดของฟอนท์เพิ่มซึ่งจะไม่เป็นไปตามนั้นหากในกรณี ที่เราใช้หน่วยเป็นพิกเซลแทน
เขียนโดย ที่
ป้ายกำกับ: , ,
สมัครสมาชิก: บทความ (Atom)