การวางแผนเว็บไซต์
ขั้นแรกคุณต้องวางแผนเว็บไซต์ บทช่วยสอนนี้จะใช้รูปต่อไปนี้เป็นตัวอย่างในการสร้างเว็บไซต์
รูปที่ 1
แสดงอยู่ด้านล่าง:
รูปที่ 2
ส่วนใหญ่ประกอบด้วยห้าส่วน:
1. แถบนำทางการนำทางหลักพร้อมเอฟเฟกต์ปุ่ม
ความกว้าง: 760px ความสูง: 50px
2. ส่วนหัว ไอคอนส่วนหัวของเว็บไซต์ประกอบด้วยโลโก้และชื่อของเว็บไซต์
ความกว้าง: 760px ความสูง: 150px
3. เนื้อหา เนื้อหาหลักของเว็บไซต์
ความกว้าง: 480px ความสูง: การเปลี่ยนแปลงขึ้นอยู่กับเนื้อหา
4. ขอบแถบด้านข้าง ข้อมูลเพิ่มเติมบางส่วน
ความกว้าง: 280px ความสูง: การเปลี่ยนแปลงขึ้นอยู่กับ
5. คอลัมน์ด้านล่างของเว็บไซต์ Footer มีข้อมูลลิขสิทธิ์ ฯลฯ
ความกว้าง: 760px ความสูง: 66px
1. สร้างเทมเพลต html และไดเร็กทอรีไฟล์ ฯลฯ
รหัสมีดังนี้:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<หัว>
<meta http-equiv="ประเภทเนื้อหา" content="text/html; charset=UTF-8" />
<title>ชื่อบริษัท - ชื่อหน้า</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name = "MSSmartTagsPreventParsing" content = "true" />
<meta name="description" content="คำอธิบาย" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</หัว>
<ร่างกาย>
</ร่างกาย>
</html>
บันทึกเป็น index.html และสร้างโฟลเดอร์ css และรูปภาพ โครงสร้างเว็บไซต์เป็นดังนี้:
รูปที่ 3
2. สร้างกล่องขนาดใหญ่สำหรับเว็บไซต์ :
สร้างกล่องกว้าง 760px ที่จะมีองค์ประกอบทั้งหมดของเว็บไซต์
เขียน <div id="page-container"> ระหว่าง <body> และ </body> ในไฟล์ html
สวัสดีชาวโลก.
</div>
สร้างไฟล์ css ตั้งชื่อเป็น master.css และบันทึกไว้ในโฟลเดอร์ /css/ เขียน:
#เพจคอนเทนเนอร์ {
ความกว้าง: 760px;
พื้นหลัง: สีแดง;
-
ความกว้างของกล่องที่มี ID เป็นคอนเทนเนอร์หน้าถูกควบคุมให้เป็น html คือ 760px และพื้นหลังเป็นสีแดง ประสิทธิภาพมีดังนี้
รูปที่ 4
เพื่อจัดกึ่งกลางกล่อง ให้เขียน margin: auto; เพื่อให้ไฟล์ css เป็น:
#เพจคอนเทนเนอร์ {
ความกว้าง: 760px;
ระยะขอบ: อัตโนมัติ;
พื้นหลัง: สีแดง;
-
ตอนนี้คุณจะเห็นว่ามีช่องว่างกว้าง 8px ระหว่างด้านบนของกล่องและเบราว์เซอร์ นี่เป็นเพราะช่องว่างภายในและเส้นขอบเริ่มต้นของเบราว์เซอร์ เพื่อขจัดช่องว่างนี้ คุณต้องเขียนลงในไฟล์ css:
html เนื้อความ {
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
-
แบ่งเว็บไซต์ออกเป็นห้าส่วน
1. ใส่ห้าส่วนที่กล่าวถึงใน "ขั้นตอนที่ 1" ลงในกล่องแล้วเขียนลงในไฟล์ html:
<div id="เพจคอนเทนเนอร์">
<div id="main-nav">การนำทางหลัก</div>
<div id="header">ส่วนหัว</div>
<div id="sidebar-a">แถบด้านข้าง A</div>
<div id="content">เนื้อหา</div>
<div id="footer">ส่วนท้าย</div>
</div>
มีพฤติกรรมดังนี้:
รูปที่ 5
2. เพื่อแยกแยะความแตกต่างระหว่างห้าส่วน เราทำเครื่องหมายห้าส่วนเหล่านี้ด้วยสีพื้นหลังที่แตกต่างกัน และเขียนลงในไฟล์ css:
#main-nav {
พื้นหลัง: สีแดง;
ความสูง: 50px;
-
#ส่วนหัว {
พื้นหลัง: สีฟ้า;
ความสูง: 150px;
-
#แถบด้านข้าง-a {
พื้นหลัง: เขียวเข้ม;
-
#เนื้อหา {
พื้นหลัง: สีเขียว;
-
#ส่วนท้าย {
พื้นหลัง: สีส้ม;
ส่วนสูง: 66px;
}
ประสิทธิภาพการทำงานเป็นดังนี้:
รูปที่ 6
เค้าโครงเว็บเพจและ div แบบลอย ฯลฯ
1. แบบลอย: ขั้นแรก ให้เส้นขอบลอยไปทางขวาของเนื้อหาหลัก ใช้ css เพื่อควบคุมการลอยตัว
#แถบด้านข้าง-a {
ลอย: ขวา;
ความกว้าง: 280px;
พื้นหลัง: เขียวเข้ม;
}
ประสิทธิภาพการทำงานเป็นดังนี้:
รูปที่ 7
2. เขียนข้อความลงในช่องเนื้อหาหลัก เขียนในไฟล์ html:
<div id="เนื้อหา">
Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim.
Donec ใน sapien ใน nibh rutrum gravida
euismod หยาบคาย Nullam rhoncus mauris ac metus
Duis scelerisque justo a pede นาม augue lorem, semper ที่, porta eget, placerat eget,
Purus. Suspendisse mattis nunc ลิกูลา.
</div>
ประสิทธิภาพมีดังนี้:
รูปที่ 8
แต่คุณจะเห็นได้ว่ากล่องเนื้อหาหลักใช้ความกว้างของคอนเทนเนอร์หน้าทั้งหมด และเราจำเป็นต้องตั้งค่าเส้นขอบด้านขวาของ #content เป็น 280px เพื่อไม่ให้ขัดแย้งกับเขตแดน
รหัส CSS เป็นดังนี้:
#เนื้อหา {
ขอบขวา: 280px;
พื้นหลัง: สีเขียว;
}
ในเวลาเดียวกัน ให้เขียนข้อความไว้ที่เส้นขอบ เขียนในไฟล์ html:
<div id="sidebar-a">
Lorem ipsum dolor นั่ง amet, consectetuer adipiscing elit.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim.
Donec ใน sapien ใน nibh rutrum gravida
euismod หยาบคาย Nullam rhoncus mauris ac metus
Duis scelerisque justo a pede นาม augue lorem, semper ที่, porta eget, placerat eget,
Purus. Suspendisse mattis nunc ลิกูลา.
</div>
มีพฤติกรรมดังนี้:
รูปที่ 9
นี่ไม่ใช่สิ่งที่เราต้องการ กรอบด้านล่างของเว็บไซต์อยู่ต่ำกว่าเส้นขอบ เนื่องจากเราลอยเส้นขอบไปทางขวาเนื่องจากลอยอยู่จึงสามารถเข้าใจได้ว่ามันอยู่บนอีกชั้นหนึ่งเหนือกล่องทั้งหมด ดังนั้น กล่องด้านล่างและกล่องเนื้อหาจึงอยู่ในแนวเดียวกัน
ดังนั้นเราจึงเขียนด้วย css:
#ส่วนท้าย {
ชัดเจน: ทั้งสอง;
พื้นหลัง: สีส้ม;
ส่วนสูง: 66px;
}
ประสิทธิภาพการทำงานเป็นดังนี้:
รูปที่ 10
การจัดวางและการนำเสนอโครงสร้างเพิ่มเติมนอกกรอบหลักของหน้าเว็บ การนำเสนอ (Layout) ของโครงสร้างเพิ่มเติมนอกกรอบหลักของหน้าเว็บ ได้แก่
1. แถบนำทางหลัก;
2. ชื่อเรื่อง รวมถึงชื่อเว็บไซต์และชื่อเนื้อหา
3. เนื้อหา;
4. ข้อมูลส่วนท้าย รวมถึงลิขสิทธิ์ ใบรับรอง และแถบนำทางย่อย (ไม่บังคับ)
เมื่อเพิ่มโครงสร้างเหล่านี้ เพื่อไม่ให้เฟรมเวิร์กดั้งเดิมเสียหาย เราจำเป็นต้องเพิ่มไว้ใต้แท็ก "body" (TAG) ของไฟล์ css:
.ที่ซ่อนอยู่ {
จอแสดงผล: ไม่มี;
-
".hidden" คือคลาสที่เราเพิ่มเข้าไป คลาสนี้สามารถทำให้องค์ประกอบใดๆ บนเพจที่เป็นของคลาสที่ซ่อนอยู่ไม่แสดงขึ้นมา สิ่งเหล่านี้จะถูกใช้ในภายหลัง ดังนั้นลืมมันไปก่อน
ตอนนี้เราเพิ่มส่วนหัว:
ขั้นแรกให้กลับไปที่โค้ด HTML <h1> ถึง <h6> เป็นโค้ดส่วนหัว html ที่เราใช้งานกันทั่วไป ตัวอย่างเช่น โดยทั่วไปเราใช้ <h1>ชื่อเว็บไซต์</h1>, <h2>คำบรรยายของเว็บไซต์</h2>, <h3>ชื่อหลักของเนื้อหา</h3> ฯลฯ เราเพิ่มสิ่งต่อไปนี้ในเลเยอร์ส่วนหัว (Div) ของไฟล์ html:
<div id="ส่วนหัว">
<h1>ให้ความกระจ่างแก่การออกแบบ</h1>
</div>
รีเฟรชหน้าและคุณจะเห็นชื่อขนาดใหญ่และพื้นที่สีขาวรอบๆ ชื่อ ซึ่งเกิดจากขนาดเริ่มต้นและระยะขอบของแท็ก <h1>> หากต้องการกำจัดช่องว่างเหล่านี้ก่อน คุณต้องเพิ่ม:
h1 {
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
}
ถัดไปคือแถบนำทาง :
โค้ด css ที่ควบคุมประสิทธิภาพของแถบนำทางนั้นค่อนข้างซับซ้อน เราจะแนะนำโดยละเอียดในขั้นตอนที่เก้าหรือสิบ ตอนนี้เพิ่มโค้ดการนำทางลงในไฟล์ html:
<div id="main-nav">
<ul>
<li id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > เกี่ยวกับ</a></li>
<li id="บริการ"> <a href=" http://css.jorux.com/wp-admin/post.php #" > บริการ</a></li>
<li id="พอร์ตโฟลิโอ"> <a href=" http://css.jorux.com/wp-admin/post.php #" > พอร์ตโฟลิโอ</a></li>
<li id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > ติดต่อเรา</a></li>
</ul>
</div>
(หมายเหตุ: บทช่วยสอนดั้งเดิมใช้ dl และ dt ส่วน jorux ใช้แท็ก ul และ li ที่ใช้กันทั่วไปมากกว่าที่นี่)
ในปัจจุบัน ประสิทธิภาพของแถบนำทางค่อนข้างต่ำ แต่ประสิทธิภาพพิเศษจะถูกนำมาใช้ในบทช่วยสอนในอนาคต ดังนั้นจึงจำเป็นต้องซ่อนแถบนำทางชั่วคราว ดังนั้นฉันจึงเพิ่ม:
<div id="main-nav">
<dl class="ซ่อน">
<dt id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > เกี่ยวกับ</a></dt>
<dt id="บริการ"> <a href=" http://css.jorux.com/wp-admin/post.php #" > บริการ</a></dt>
<dt id="พอร์ตโฟลิโอ"> <a href=" http://css.jorux.com/wp-admin/post.php #" > พอร์ตโฟลิโอ</a></dt>
<dt id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > ติดต่อเรา</a></dt>
</ดล>
</div>