Simple website design and code-Part 3

In previous two articles we designed home page and we sliced it and now we are going to code it.

Step 1 - Setting up files and folders

You are supposed to have folder first-website. In that folder you have another folder images, with images from previous article and first-website - Copy.xcf file.

Rename this file to first-website.xcf.

Open this file in GIMP, we'll need to pick up fonts, colors... In your first-website folder add two files - index.html and style.css. Open the editor of your choice, press CTRL+N twice to create new files.

Save one as index.html by pressing CTRL+S and other as style.css.

Open index.html in your browser and open lorem ipsum website and generate some lorem ipsum text.

Step 2 - HTML code - structure of our page

a) Skeleton of our page.

<!DOCTYPE html>
<html>
<head>
<title>Simple website design and code</title>
</head>

<body>

</body>

</html>

b) In first part - step 2, I said we'll have simple website with header, content, sidebar and footer. Each of these sections will be within its own <div> tags, and we will give them appropriate id.

<!DOCTYPE html>
<html>
<head>
<title>Simple website design and code</title>
</head>

<body>

<div id="main">

<div class="container">

<div id="header">
</div>



<div id="content">
</div>



<div id="sidebar">
</div>

</div>

</div>



<div id="footer">

<div class="container">
</div>

</div>

</body>
</html>

Step 3 - HTML code - Content

a) Header

In header we have 3 main elements: logo, tagline, and navigation menu. We'll put the logo and tagline in their own divs. We'll put logo in h1 tag and tagline in h3 tag. For navigation menu, we'll place menu items in an unordered list and each list item will contain an anchor tag.


<div id="header">
<div id="logo">
<h1>Logo</h1>
</div>
<div id="tagline">
<h3>Here add tagline</h3>
</div>
<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>

b) Main content

We have h2 tag for our title, h3 tags for our summary and Latest news, h4 tags for news title, small tag for date and p tag for paragraphs.


<div id="content">
<h2>Lorem Ipsum Dolor Sit</h2>
<h3>Fusce orci velit, faucibus ut ex nec, fermentum, lacinia enim, suspendisse ac dolor</h3>
<p>Aenean finibus placerat turpis id fringilla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer viverra lorem in elit eleifend, vel euismod nunc pulvinar. Suspendisse vitae porttitor purus. Quisque in risus non diam porta laoreet. Integer consectetur porta interdum. Vivamus eu tempus est. Integer ac venenatis leo. Nunc pulvinar ipsum non mauris pharetra ultrices. Nam sit amet libero sapien. Fusce eget lobortis est. Suspendisse congue sapien a enim iaculis volutpat.</p>
<p>Praesent lobortis euismod finibus. Quisque pharetra a massa rhoncus fringilla. Mauris maximus dignissim turpis, id ultrices leo ullamcorper pretium. Sed at cursus dolor, eleifend ullamcorper mauris. In dictum aliquet urna ac euismod. Curabitur iaculis finibus ante, nec pharetra tellus vulputate eget. Praesent cursus dui et ligula accumsan aliquet. </p>
<div id="news">
<h3>Latest News</h3>
<h4>Vivamus porttitor magna sed nunc eleifend</h4>
<small>March 17, 2016</small>
<p>Etiam aliquam viverra justo vel venenatis. Curabitur vel iaculis massa. Sed egestas eros id massa eleifend tristique et nec tortor. Maecenas sollicitudin pulvinar erat id tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus.<a href="#"> Read more</a></p>
<h4>Aenean dignissim blandit ipsum</h4>
<small>March 14, 2016</small>
<p>Proin ac lorem sed sapien semper pellentesque. Donec eget nibh fringilla, viverra lectus vel, auctor ex. Cras tincidunt faucibus dolor, vitae sodales enim lacinia at, sed dolor eros, interdum enim odio.<a href="#"> Read more</a></p>
</div>
</div>

c) Sidebar

Sidebar has 3 elements. All 3 elements will be wrapped in its own div tags.

Each div tag will contain an h3 tag and an unordered list, and each list item will contain an anchor tag.


<div id="sidebar">
<div id="subscribe">
<h3>Subscribe</h3>
<ul>
<li id="rss"><a href="#">Subscribe via RSS</a></li>
<li id="twitter"><a href="#">Follow Us on Twitter</a></li>
<li id="facebook"><a href="#">Follow us on Facebook</a></li>
</ul>
</div>
<div id="blog-posts">
<h3>New Blog Posts</h3>
<ul>
<li><a href="#">Phasellus imperdiet congue consectetur</a></li>
<li><a href="#">Nullam dictum, erat nec lobortis </a></li>
<li><a href="#">Suspendisse auctor pretium dui</a></li>
<li><a href="#">Cras finibus auctor erat in molestie</a></li>
</ul>
</div>
<div id="latest-projects">
<h3>Latest Projects</h3>
<ul>
<li><a href="#">Phasellus imperdiet</a></li>
<li><a href="#">Nullam dictum erat</a></li>
<li><a href="#">Suspendisse auctor pretium</a></li>
<li><a href="#">Cras finibus auctor erat</a></li>
</ul>
<a href="#" class="button">Hire Us</a>
</div>
</div>

d) Footer


<div id="footer">

<div class="container">
<p>Copyright © 2016. | My Website | All Rightd Reserved</p>
</div>

</div>

Step 4 - CSS code - style.css

a) We need to link our style.css to our index.html file. Place the next code in head tags under title tag.

<head>
<title>Simple website design and code</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

b) First, we are going to choose font for all text within the body of the page.
body {
font-family: Georgia, Helvetica, sans-serif;
}

c) We'll define width and margins of our class "container" inside div tags.

.container {
width: 900px;
margin: 0 auto;
}

d) Point of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The next code usually goes to top of css file.

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {
margin: 0px;
padding: 0px;
}

Step 5 - CSS code - style.css - header background image

a) Our background header image (header_slice.png) will be in "main" div tag, which will stretch from left to right side. We'll also repeat this image along the x axis. We'll specify where is our image.

#main {

background: url(images/header_slice.png) repeat-x;

}

Step 6 - CSS code - style.css - logo

#logo {

background: url(images/logo.png) no-repeat;

height: 60px;

width: 299px;

color: white;

text-transform: uppercase;

}

#logo h1 {

text-indent: 100px;

padding-top: 12px;

}

#header {

padding-top: 65px;

}

Step 7 - CSS code - style.css - tagline

a) We'll use float property to place tagline in line of our logo. What is float property?

Float property specifies whether or not a box (an element) should float.

#logo {
background: url(images/logo.png) no-repeat;
height: 60px;
width: 299px;

color: white;

text-transform: uppercase;

float: left;

}

b) We need to give our tagline separate float. Also, we are going to add property clear to our index.html file, under the end of tagline div, so our menu doesn't follow our tagline.

<h3>Here add tagline</h3>

</div>

<div style="clear:both"></div>

<li><a href="about.html">About</a></li>

<li><a href="projects.html">Projects</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

c) Copy font styles from first-website.xcf and add padding at the top and left:

#tagline {
float: left;
padding-top: 20px;
padding-left: 400px;
}

#tagline h3 {
font-size: 22px;
color: #ffffff;
}

How to copy styles from .xcf file? Select Here add tagline text layer, select Text Tool (T), click twice in Here add tagline text (GIMP Editor Text will pop out). From Toolbox you can see the Font and Size.

Step 8 - CSS code - style.css - navigation menu

a) Since we have unordered list in "menu" id and in "sidebar" id, we have to specify which id refers to which unordered list.

ul#menu {
list-style: none;
}

ul#menu li a {
font-size: 22px;
color: #073f53;
text-decoration: none;
}

ul#menu li {
float: left;
}

Our content is following our menu,

b) To solve this, we will use property clear again. Go back to your index.html and add it after the end of ul tag.

<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div style="clear:both"></div>
</div>

c) We'll add space top of our menu
ul#menu {
list-style: none;
padding-top: 37px;
font-weight: bolder;
}

d) We'll add padding to our menu items

ul#menu li {
float: left;
padding-left: 0;
padding-right: 107px;
}

Step 9 - CSS code - style.css - main content

a) Copy styles from .xcf file. If you don't like color or font type or size you can change it.

#content h2 {
font-size: 32px;
color: #015878;
}

#content h3 {
font-size: 24px;
color: #073f53;
padding-top: 20px;
padding-bottom: 10px;
}

#content h4 {
font-size: 18px;
color: #373737;
font-weight: normal;
}

#content p {
font-size: 14px;
color: #595858;
padding-top: 20px;
}

#content small {
font-size: 12px;
color: #373737;
}

#content a {
color: #0f6c8d;
font-weight: bold;
text-decoration: none;
}

b) Now we need to add space between h2, h3 and p tags.

#content h2 {
font-size: 32px;
color: #015878;
padding-top: 25px;
}

#content h3 {
font-size: 24px;
color: #073f53;
padding-top: 15px;
padding-bottom: 5px;
}

#content p {
font-size: 14px;
color: #595858;
padding-top: 20px;
}

c) We'll add space in news section.
#news {
padding-top: 10px;
}

#news h3 {
padding-bottom: 10px;
}

#news h4 {
font-weight: bold;
}

#news small {
font-size: 14px;
}

#news p {
padding-top: 10px;
padding-bottom: 14px;
}

Step 10 - CSS code - style.css - sidebar content

a) We will set the width for the content and we will set the content area and sidebar to float left.

#content {
width: 480px;
float: left;
}

#sidebar {
float: left;
}

b) Footer text is following sidebar content. To solve this, we will use property clear again. Go back to your index.html and add it after the end of sidebar.

<div id="latest-projects">
<h3>Latest Projects</h3>
<ul>
<li><a href="#">Phasellus imperdiet</a></li>
<li><a href="#">Nullam dictum erat</a></li>
<li><a href="#">Suspendisse auctor pretium</a></li>
<li><a href="#">Cras finibus auctor erat</a></li>
</ul>
<a href="#" class="button">Hire Us</a>
</div>
</div>

<div style="clear:both"></div>
</div>

</div>

c) Copy the font styles from our .xcf file for the sidebar. Text for the list items in the "subscribe" section is larger than list items in the "blog-posts" and "latest-projects" sections. So, we'll add id "subscribe" to the ul in index.html file.

<div id="sidebar">
<div id="subscribe">
<h3>Subscribe</h3>
<ul id="subscribe">
<li id="rss"><a href="#">Subscribe via RSS</a></li>
<li id="twitter"><a href="#">Follow Us on Twitter</a></li>
<li id="facebook"><a href="#">Follow us on Facebook</a></li>
</ul>

</div>

now we can add css code
ul#subscribe li a {
font-size: 16px;
}

Step 11 - CSS code - style.css - styling sidebar content

We'll add backgrounds and borders, padding and margins.

a) First, we'll remove the bullets.
#sidebar ul {
list-style: none;

}

b) Add margins to top and left.
#sidebar {
float: left;
margin-left: 25px;
margin-top: 35px;
}

c) We'll add background and border for our sidebar. Copy background color from .xcf file.

#sidebar {
float: left;
margin-left: 25px;
margin-top: 35px;
background: ##98c6d7
border: 1px solid #47849b;

}

How to get sidebar background color? Select Bucket Fill Tool (Shift+B),

from Toolbox, click on foreground color (Change Foreground Color window will pop out).

Select eyedropper tool (on the right side and in the line of HTML notation), click on sidebar background. Select color

and press CTRL+C to copy color (#98c6d7). Go to style.css and press CTRL+V to paste color.

Go back to .xcf file, from Toolbox, click on foreground color and pick a little darker color (#47849b) for border.

Note: we need to add background for body. Copy background color from .xcf file the same way you did for sidebar background.

body {
font-family: Georgia, Helvetica, sans-serif;
background: #bbd3df;
}

d) We'll add 20 px padding on all sides
#sidebar {
float: left;
margin-left: 25px;
margin-top: 35px;
background: #98c6d7;
border: 1px solid #47849b;
padding: 20px;
}

e) We'll add padding to our text styles to make space between Subscribe, New Blog Posts and Projects.
#sidebar h3 {
font-size: 24px;
color: #073f53;
font-weight: normal;
padding-bottom: 10px;
padding-left: 0;
}

#sidebar ul li a {
font-size: 14px;
color: #393838;
}

ul#subscribe li a {
font-size: 16px;
}

#sidebar ul {
list-style: none;
padding-bottom: 25px;
}

ul#subscribe li {
padding-bottom: 5px;
padding-left: 45px;
padding-top: 15px;

}

Step 12 - CSS code - style.css - adding icons

a) We'll add icons as background images and we'll add background images to each list item
li#rss {
background: url(images/rss_icon.png) no-repeat;
}

li#twitter {
background: url(images/twitter_icon.png) no-repeat;
}

li#facebook {
background: url(images/facebook_icon.png) no-repeat;

}

Step 13 - CSS code - style.css - button

a) We'll add background image for button and some space.
a.button {
color: #CDEEF7;
text-decoration: none;
background: url(images/button.png) no-repeat;
margin-left: 0;
padding: 10px 20px;
border: 1px solid #5ba4bf;

}

b) We need a little more space at the bottom. so we'll add padding-bottom to the sidebar div.
#sidebar {
float: left;
margin-left: 25px;
margin-top: 35px;
background: #98c6d7;
border: 1px solid #47849b;
padding: 20px;
padding-bottom: 30px;
}

c) Now we'll add button hover image. Copy background color from .xcf file the same way you did for sidebar background.
a.button:hover {
background: url(images/button_hover.png) repeat-x;
background-color: #054157;
}

Step 14 - CSS code - style.css - footer

We'll add footer background image the same we added it for header.

a) Our background footer image (footer_slice.png) will be in "footer" div tag, which will stretch from left to right side. We'll also repeat this image along the x axis. We'll specify where is our image.
#footer {
background: url(images/footer_slice.png) repeat-x;

}

b) We'll make text white and we'll center it and we'll add space on top and bottom.
#footer {
background: url(images/footer_slice.png) repeat-x;
color: #ffffff;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;

}

Step 15 - CSS code - style.css - Read more text

We'll add hover color for Read more text. You can pick lighter or darker color (#073749)
#news p a:hover {
color: #073749;

}

Step 16 - CSS code - style.css - navigation menu hover

We'll add hover color for our navigation menu. Color #bbd3df same as our body background color looks nice.
ul#menu li a {
font-size: 22px;
color: #073f53;
text-decoration: none;
}

ul#menu li a:hover {
color: #bbd3df;
}

ul#menu li {
float: left;
padding-left: 0;
padding-right: 107px;
}

That's it.

Skola Tutorijala - School of Tutorials

Website Development Prices

Search Blog

Monday, March 21, 2016

Simple website design and code-Part 3

No comments:

Post a Comment

Get new posts by email:

Flag Counter