ทำอย่างไร - สร้างเว็บไซต์
เรียนรู้วิธีสร้างเว็บไซต์ที่ตอบสนองได้รวดเร็วซึ่งใช้งานได้กับทุกอุปกรณ์ พีซี แล็ปท็อป แท็บเล็ต และโทรศัพท์
สร้างเว็บไซต์ตั้งแต่เริ่มต้น
"ร่างเค้าโครง"
ควรวาดร่างเค้าโครงของการออกแบบหน้าก่อนสร้างเว็บไซต์:
แถบนำทาง
เนื้อหาด้านข้าง
ข้อความบ้างข้อความบ้าง..
เนื้อหาหลัก
ข้อความบ้างข้อความบ้าง..
ข้อความบ้างข้อความบ้าง..
ข้อความบ้างข้อความบ้าง..
ส่วนท้าย
ขั้นตอนแรก - หน้า HTML พื้นฐาน
HTML เป็นภาษามาร์กอัปมาตรฐานสำหรับการสร้างเว็บไซต์ และ CSS เป็นภาษาที่อธิบายลักษณะของเอกสาร HTML เราจะรวม HTML และ CSS เพื่อสร้างหน้าเว็บพื้นฐาน
หมายเหตุ:หากคุณไม่ทราบ HTML และ CSS เราขอแนะนำให้คุณเริ่มต้นด้วยการอ่านบทช่วยสอน HTML ของเรา
ตัวอย่าง
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta
charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
ตัวอย่างที่อธิบาย
- การ
<!DOCTYPE html>ประกาศกำหนดเอกสารนี้เป็น HTML5 - องค์ประกอบ
<html>นี้เป็นองค์ประกอบรากของหน้า HTML - องค์ประกอบ
<head>ประกอบด้วยข้อมูลเมตาเกี่ยวกับเอกสาร - องค์ประกอบ
<title>ระบุชื่อเรื่องสำหรับเอกสาร - องค์ประกอบ
<meta>ควรกำหนดชุดอักขระเป็น UTF-8 - องค์ประกอบ
<meta>ที่มีชื่อ="วิวพอร์ต" ทำให้เว็บไซต์ดูดีบนอุปกรณ์และความละเอียดหน้าจอทั้งหมด - องค์ประกอบ
<style>ประกอบด้วยสไตล์สำหรับเว็บไซต์ (เค้าโครง/การออกแบบ) - องค์ประกอบ
<body>ประกอบด้วยเนื้อหาของหน้าที่มองเห็นได้ - องค์ประกอบ
<h1>กำหนดหัวเรื่องขนาดใหญ่ - องค์ประกอบ
<p>กำหนดย่อหน้า
การสร้างเนื้อหาหน้า
ภายใน<body>องค์ประกอบของเว็บไซต์ของเรา เราจะใช้ "Layout Draft" และสร้าง:
- ส่วนหัว
- แถบนำทาง
- เนื้อหาหลัก
- เนื้อหาด้านข้าง
- ส่วนท้าย
หัวข้อ
ส่วนหัวมักจะอยู่ที่ด้านบนของเว็บไซต์ (หรือด้านล่างเมนูนำทางด้านบนขวา) มักจะมีโลโก้หรือชื่อเว็บไซต์:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
จากนั้นเราใช้ CSS เพื่อจัดรูปแบบส่วนหัว:
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
แถบนำทาง
แถบนำทางประกอบด้วยรายการลิงก์ที่จะช่วยให้ผู้เยี่ยมชมนำทางผ่านเว็บไซต์ของคุณ:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
ใช้ CSS เพื่อจัดรูปแบบแถบนำทาง:
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
เนื้อหา
สร้างเค้าโครง 2 คอลัมน์ แบ่งเป็น "เนื้อหาด้านข้าง" และ "เนื้อหาหลัก"
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
เราใช้ CSS Flexbox เพื่อจัดการเลย์เอาต์:
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
จากนั้นเพิ่มคิวรีสื่อเพื่อให้เลย์เอาต์ตอบสนอง วิธีนี้จะช่วยให้แน่ใจว่าเว็บไซต์ของคุณจะดูดีบนอุปกรณ์ทั้งหมด (เดสก์ท็อป แล็ปท็อป แท็บเล็ต และโทรศัพท์) ปรับขนาดหน้าต่างเบราว์เซอร์เพื่อดูผลลัพธ์
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
เคล็ดลับ:หากต้องการสร้างเลย์เอาต์ประเภทอื่น ให้เปลี่ยนความกว้างของเฟล็กซ์ (แต่ต้องเพิ่ม 100%)
เคล็ดลับ:คุณสงสัยหรือไม่ว่ากฎ @media ทำงานอย่างไร อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในบท CSS Media Queries ของเรา
เคล็ดลับ:หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับโมดูลเลย์เอาต์กล่องแบบยืดหยุ่นโปรดอ่านบท CSS Flexbox ของเรา
ขนาดกล่องคืออะไร?
คุณสามารถสร้างกล่องลอยสามกล่องเคียงข้างกันได้อย่างง่ายดาย อย่างไรก็ตาม เมื่อคุณเพิ่มสิ่งที่ขยายความกว้างของแต่ละกล่อง (เช่น ช่องว่างภายในหรือเส้นขอบ) กล่องจะแตก คุณสมบัติbox-sizingช่วยให้เราสามารถใส่ช่องว่างภายในและเส้นขอบในความกว้างทั้งหมด (และความสูง) ของกล่อง ตรวจสอบให้แน่ใจว่าช่องว่างภายในของกล่องและไม่แตกหัก
คุณสามารถอ่านเพิ่มเติมเกี่ยวกับคุณสมบัติการปรับขนาดกล่องได้ในCSS Box Sizing Tutorial
ส่วนท้าย
ในที่สุดเราจะเพิ่มส่วนท้าย
<div class="footer">
<h2>Footer</h2>
</div>
และจัดสไตล์:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
ยินดีด้วย! คุณได้สร้างเว็บไซต์ที่ตอบสนองตั้งแต่เริ่มต้น
W3Schools Spaces
หากคุณต้องการสร้างเว็บไซต์ของคุณเองและโฮสต์ไฟล์ .html ให้ลอง ใช้ตัว สร้างเว็บไซต์ฟรี ของเรา ที่เรียกว่าW3schools Spaces :
