Hoe OM - Maak 'n webwerf
Leer hoe om 'n responsiewe webwerf te skep wat op alle toestelle, rekenaar, skootrekenaar, tablet en foon sal werk.
Skep 'n webwerf van nuuts af
'n "uitlegkonsep"
Dit kan wys wees om 'n uitlegkonsep van die bladsyontwerp te teken voordat 'n webwerf geskep word:
Navigasiebalk
Sy-inhoud
Sommige teks sommige teks ..
Hoofinhoud
Sommige teks sommige teks ..
Sommige teks sommige teks ..
Sommige teks sommige teks ..
Voetskrif
Eerste stap - Basiese HTML-bladsy
HTML is die standaard opmaaktaal vir die skep van webwerwe en CSS is die taal wat die styl van 'n HTML-dokument beskryf. Ons sal HTML en CSS kombineer om 'n basiese webblad te skep.
Let wel: As jy nie HTML en CSS ken nie, stel ons voor dat jy begin deur ons HTML-tutoriaal te lees .
Voorbeeld
<!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>
Voorbeeld Verduidelik
- Die
<!DOCTYPE html>verklaring definieer hierdie dokument as HTML5 - Die
<html>element is die wortelelement van 'n HTML-bladsy - Die
<head>element bevat meta-inligting oor die dokument - Die
<title>element spesifiseer 'n titel vir die dokument - Die
<meta>element moet die karakterstel definieer as UTF-8 - Die
<meta>element met name="viewport" laat die webwerf goed lyk op alle toestelle en skermresolusies - Die
<style>element bevat die style vir die webwerf (uitleg/ontwerp) - Die
<body>element bevat die sigbare bladsyinhoud - Die
<h1>element definieer 'n groot opskrif - Die
<p>element definieer 'n paragraaf
Die skep van bladsy-inhoud
Binne die <body>element van ons webwerf sal ons ons "uitlegkonsep" gebruik en skep:
- 'n Opskrif
- 'n Navigasiebalk
- Hoofinhoud
- Sy inhoud
- 'n Voetskrif
Opskrif
'n Kopskrif is gewoonlik bo-aan die webwerf (of reg onder 'n boonste navigasiekieslys). Dit bevat dikwels 'n logo of die webwerf se naam:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
Dan gebruik ons CSS om die kopskrif te styl:
.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;
}
Navigasiebalk
'n Navigasiebalk bevat 'n lys skakels om besoekers te help om deur jou webwerf te navigeer:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
Gebruik CSS om die navigasiebalk te styl:
/* 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 */
}
Inhoud
Skep 'n 2-kolom-uitleg, verdeel in 'n "sy-inhoud" en 'n "hoofinhoud".
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
Ons gebruik CSS Flexbox om die uitleg te hanteer:
/* 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 */
}
Voeg dan medianavrae by om die uitleg responsief te maak. Dit sal seker maak dat jou webwerf goed lyk op alle toestelle (rekenaars, skootrekenaars, tablette en fone). Verander die grootte van die blaaiervenster om die resultaat te sien.
/* 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%;
}
}
Wenk: Om 'n ander soort uitleg te skep, verander net die buigwydte (maar maak seker dat dit 100% is).
Wenk: Wonder jy hoe die @media-reël werk? Lees meer daaroor in ons CSS Medianavrae-hoofstuk .
Wenk: Lees ons CSS Flexbox-hoofstuk om meer te wete te kom oor die Flexible Box -uitlegmodule .
Wat is boksgrootte?
Jy kan maklik drie drywende bokse langs mekaar skep. Wanneer jy egter iets byvoeg wat die breedte van elke boks vergroot (bv. opvulling of grense), sal die boks breek. Die box-sizingeiendom stel ons in staat om die vulling en rand by die boks se totale breedte (en hoogte) in te sluit, om seker te maak dat die vulling binne die boks bly en dat dit nie breek nie.
Jy kan meer lees oor die boksgrootte-eienskap in ons CSS Box Sizing Tutoriaal .
Voetskrif
Uiteindelik sal ons 'n voetskrif byvoeg.
<div class="footer">
<h2>Footer</h2>
</div>
En styl dit:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
Baie geluk! Jy het 'n responsiewe webwerf van nuuts af gebou.
W3Skole Spasies
As jy jou eie webwerf wil skep en jou .html-lêers wil huisves, probeer ons gratis webwerfbouer , genaamd W3schools Spaces :
