Planning a website
First you need to plan a website. This tutorial will take the following figure as an example to build a website.
Figure 1
is shown below:
Figure 2
mainly consists of five parts:
1. Main Navigation navigation bar, with button effects.
Width: 760px Height: 50px
2. Header The website header icon contains the website’s logo and name.
Width: 760px Height: 150px
3. Content The main content of the website.
Width: 480px Height: Changes depending on content
4. Sidebar border, some additional information.
Width: 280px Height: Changes depending on
5. The bottom column of the Footer website contains copyright information, etc.
Width: 760px Height: 66px
1. Create html templates and file directories, etc.
The code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
</body>
</html>
Save it as index.html, and create folders css and images. The website structure is as follows:
Figure 3
2. Create a large box for the website :
Create a box 760px wide that will contain all the elements of the website.
Write <div id="page-container"> between <body> and </body> in the html file
Hello world.
</div>
Create a css file, name it master.css, and save it in the /css/ folder. Write:
#page-container {
width: 760px;
background: red;
}
The width of the box whose id is page-container is controlled to be html is 760px, and the background is red. The performance is as follows.
Figure 4
Now in order to center the box, write margin: auto;, so that the css file is:
#page-container {
width: 760px;
margin: auto;
background: red;
}
Now you can see that there is an 8px wide gap between the top of the box and the browser. This is due to the browser's default padding and borders. To eliminate this gap, you need to write in the css file:
html, body {
margin: 0;
padding: 0;
}
Divide the website into five divs
1. Put the five parts mentioned in "Step 1" into boxes and write in the html file:
<div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
behaves as follows:
Figure 5
2. In order to distinguish the five parts, we mark these five parts with different background colors and write in the css file:
#main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}
The performance is as follows:
Figure 6
Web page layout and div floating, etc.
1. Floating: First, let the border float to the right of the main content. Use css to control floating.
#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}
The performance is as follows:
Figure 7
2. Write some text into the main content box. Write in the html file:
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
Purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
Performance is as follows:
Figure 8
But you can see that the main content box takes up the entire page-container width, and we need to set the right border of #content to 280px. so that it does not conflict with the border.
The css code is as follows:
#content {
margin-right: 280px;
background: green;
}
At the same time, write some text into the border. Write in the html file:
<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
Purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
behaves as follows:
Figure 9
This is not what we want. The bottom frame of the website has gone below the border. This is because we float the border to the right. Since it is floating, it can be understood that it is on another layer above the entire box. Therefore, the bottom box and the content box are aligned.
So we write in css:
#footer {
clear: both;
background: orange;
height: 66px;
}
The performance is as follows:
Figure 10
The layout and presentation of additional structures outside the main frame of the web page. The presentation (Layout) of additional structures outside the main frame of the web page, including the following:
1. Main navigation bar;
2. Title, including website name and content title;
3. Content;
4. Footer information, including copyright, certification, and sub-navigation bar (optional).
When adding these structures, in order not to destroy the original framework, we need to add under the "body" tag (TAG) of the css file:
.hidden {
display: none;
}
".hidden" is the class we added. This class can make any element on the page that belongs to the hidden class not to be displayed. These will be used later, so forget about it for now.
Now we add the heading:
First go back to the HTML code, <h1> to <h6> are our commonly used html heading codes. For example, we generally use <h1>website name</h1>, <h2>website subtitle</h2>, <h3>content main title</h3>, etc. We add the following to the Header layer (Div) of the html file:
<div id="header">
<h1>Enlighten Designs</h1>
</div>
Refresh the page and you can see the huge title and the white space around the title. This is caused by the default size and margin of the <h1>> tag. To eliminate these white spaces first, you need to add:
h1 {
margin: 0;
padding: 0;
}
Next is the navigation bar :
The css code that controls the performance of the navigation bar is relatively complicated. We will introduce it in detail in the ninth or tenth step. Now add the navigation code to the html file:
<div id="main-nav">
<ul>
<li id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > About</a></li>
<li id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Services</a></li>
<li id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Portfolio</a></li>
<li id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Contact Us</a></li>
</ul>
</div>
(Note: The original tutorial used dl and dt, jorux uses the more commonly used ul and li tags here)
At present, the performance of the navigation bar is relatively poor, but its special performance will be introduced in future tutorials, so it is necessary to temporarily hide the navigation bar, so I added:
<div id="main-nav">
<dl class="hidden">
<dt id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > About</a></dt>
<dt id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Services</a></dt>
<dt id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Portfolio</a></dt>
<dt id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Contact Us</a></dt>
</dl>
</div>