1

Web programming (hands-on class project)

Creating a simple clean professional looking website.
Chesoli Byron Strathmore university Faculty of Information Technology

Road map
2

http://www.coyotelandscaping.info/index.html Using the skills taught in class, you will create a website from beginning to end. create a simple professional four page website for a fictitious company of your choice. The design will be a one column layout with a top navigation bar. The exercise is designed to show practical application of skills learned in HTML and CSS lessons.
create the HTML structure for the site and add some filler content. create the CSS to format and position the design and content. create and format the contact information form

Create a site
3

Start with a markup/plan/layout as you go through your design (sketch on paper or create in a layout program e.g. Photoshop ) the sketch/plan shows where you are going before you start coding. Use Dreamweaver to Create an empty site/blank document with the following files and folder:
Images (banner.png, subbanner.jpg, banner_landscaping-sm.jpg, banner_landscapingsm.jpg) Main.html Styles.css

Place a link inside of HTML to the style sheet. (All the documents are blank)

HTML file
4

Change the title to ?????

Starting up the project

5

There are different ways to start up a project:

create the CSS for your pages before creating the HTML structure or Create the HTML structure before creating the style sheet (CSS).
Either way works

For our class exercise, we start by creating the CSS before creating the structure of the HTML document.
Reason: Dreamweaver brings up the tool tip for the already defined styles and ids. it brings them up automatically.

Creating the layout

6

Click on the CSS and begin to set up your layout/structure

First thing to put in your CSS is the Reset:

The goal of a reset style sheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings. Reset styles quite often appear in CSS frameworks. CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to built upon. With CSS Reset loaded, write explicit CSS your project needs. When CSS Reset is loaded it removes the inconsistent styling of HTML elements provided by browsers. Now, just begin writing the CSS rules your project needs without being burdened by what the browser thinks you need.

Creating the layout

7

/*reset css reset.*/

Second section /*containers ..*/ No styling yet, just define the names for your structure. Look at the blue print page: your sketch/plan ( e.g. we need: banner, sub banner, top-navigation, top, footer and the main container wrapper etc) Content area is basically one column no side navigation or side bar. Save the CSS file .

Main content divs

Creating the basic structure

8

Back to your source (HTML) code:

Creating the basic structure <div id=wrapper> /* all the contend for the page, main outer level container .. Contains all the content for the page about 900px */ <div id=top></div> <div id=banner></div> <divId=subbanner></di> <div id=topnav></div> <div id=content></div> <div id=footer></div> </div>

Adding content to your page

9

With the basic structure set, the next step is to add the content and upload the CSS styles
Add the banner image, in the banner: <div id=banner alt=class exercise landscape> /*mainly used by screen reader or search engine ..*/ <img src=images/banner.png alt=landscaping/> </div>

Add links for the top navigation in the topnav div: (most preferred unordered lists)
<div id=topnav> <ul> <li>Home<li> <li>Products<li> <li>Services<li> <li>Contacts<li> </ul> </div>

Adding content to your page

10

Add some content in the content div: Heading, a paragraph of information and a couple of images.
<div id=content> <h1> welcome to landscaping site</h1> <p>paragraph information .</p> <img src=image file/> <img src=image file alt=text for search engines /> Note: it is always best to resize your images in Photoshop and fireworks, the width and height done in CSS not in HTML. Add more content: (Sub heading, paragraph of text, a table and final paragraph of text) /* adding more content */ <h2> welcome to landscaping site</h1> <p>paragraph information .</p> <thead> <table> <p>paragraph information .</p> </div>

Adding content to your page

11

Setting up the tables : 7 rows and 3 columns

Title row, Header row (heading of the table), 4 content rows and finally the footer row. Use Dreamweaver tools to create the table and just modify it. On menu click insert table in design view .. ( the Width, border, padding and the spacing to be done in CSS) select non for headers, we will manually define the header. Leave the caption off, instate use <thead> for your title. In the summary option, type some information about the table to be used by search engines such as Google and screen readers. Click ok . On checking the cells are or should be very small, .Slect your table by clicking on the lower right Conner then click on the properties of the table set the width to 500 px

Merge the first and last 3 cells.

Change the first and second row to th Second <td> to <th>

Adding content to your page

12

The table has the following 3 sections This should be the tile and the heading of the table .. <thead>
<tbody> this should be the table body section </tbody>

<tr>
<th colspan =3>.<th>

</tr>

<tr>
<th></th> <th></th> <th></th>

<tfoot> This should be the table footer section .

</tr>
</thead>

<tfoot>

Setting up your top navigation

13

The last thing to do before you start working with the css is to create the links in topnav div: creating the links is done in HTML and the formatting is done in CSS. In design view highlight the words Home, products .etc, and click on the property inspector. In the link option enter the link, index.html or main.html text blue this is your home page .
Name other pages in such a way that they are descriptive for search engines to pickup what the content is and also drive traffic to our site ... (use many key words) Create the 4 pages (e.g. index.html, products.html etc ) note: remember your link names

Setting up a CSS Reset

14

When formatting the pages start with the reset . Click the Style file.
Why Reset . Because different browsers give different properties to different elements (e.g. margins). Reset all the properties to a base line/default.

Ways of putting a rest :

use of a universal selector

* { margin:0; padding:0border:0; }
CSS framework .. Download the frame work and access the reset. Copy and paste in your reset section .

If the code is too long compress it, though not recommended, CSS code compressor does not make the code readable ..

On saving click on, Save all in your HTML code .

Check your page after putting the reset ..

Setting up layout and formatting CSS

15

Set up the properties for the containers to give the final look of the site. Start with the wrapper (main or outer container) which holds all the content/ containers.. /* set the width for the entire design, determined by the width of the border. Remove any top margin values, for top, bottom, and left, right. Left right need to be centered so just use auto. */
#wrapper {width:900px; margin:0 auto; }

Set the body tag /* before the wrapper .. apply some background color light green color*/ Body {background-color:#DFFFDF; } since no other back ground color has been defined for the layout the body color shows through all everything, solution to this is to define the wrapper color as white. #wrapper {..; ; background-color:FFF or FFFFFF; } /* wrapper container should have a white background.

Setting up layout and formatting CSS

16

Formatting the top div in our design you may not see this div at all, this is because (top container has no width or height define ..)
#top {widith:100%; height:25px; background-color:000; } /* 100% of the container in this case the wrapper . i.e. 100%=900px*/

The top div has a white line separating it from the banner .thin white border .set the white border properties in css .*/Bellow the containers create a class or generic selector */
.bdr-thin-white-bottom {boder_bottom:1px #fff solid; } /*style name tell a lot about the style,. a one pixel solid white border thin line */ To apply this style to the source code (HTML), use the class attribute and the name of the style inside the top div.

<div id=top class=bdr-thin-white-bottom>

Setting up layout and formatting CSS

17

Save the style and go to design view then to live preview thin line border must appear .

Because we defined the style as Generic or class style we can reuse it over and over again on different elements as we want.

Setting up layout and formatting CSS

18

Giving the site its final look . In the code view of your styles .format the subbanner .
Define the width and the height so that you can see your image

/* an empty div insert background image as your property image.. 900px and 250px.. */ #subbanner {width:900px; height: 250px; backgraond-image:url (images/subanner.jpg); background-repeat:no-repeat; }
To ensure that the background does not tile add the background-repeat property no-repeat .

Setting up layout and formatting CSS

19

Set up (format) the content container

/* padding pushes the content out of the edge and give it some shape specify the background color, incase the wrapper color changes this will remain white */

#content {padding:30px; background-color:#fff; }

Format the footer container /* set the background color dark green .width to 100%, padding 5px top and bottom and 0px left and right */ #footer {background-color:#060; width:100%; height:25px; padding:5px 0; }

Setting up layout and formatting CSS

20

Format the topnav to give the site the final look Create the topnav style in your CSS file .. Research on CSS navigation horizontal and vertical. There four different steps for setting up a horizontal CSS navigation Set up the properties for the UL (unordered list)that the navigation is going to be contained in #topnav {} #topnav ul {width:100%; background-color:360;float:letf; } /* applied only on the ..Ul.., dark green color, float the entire ul to the left*/ #topnav ul li {display:inline; } /* use of ancestor and descendant selectors to specify how the individual list items are going to appear . (li) display is black change from black to inline in order to work together ..works well with the floating . /*actual batons are the anchor tag <a>). define the shape of the tab using padding property 10px top and bottom 30px left and right. Change text color to white

#topnav ul li a {padding:10px 30px; float:left; color:ff; font-size:16px; font-weight:bold; }

/* apply the hover over effect */ #topnav a:hover {background-color:#690; } there is hover effect after applying the style .

Setting up layout and formatting CSS

21

Format the content div: Start with defining the heading style #Content { main content container already set } /* set the margins (top and bottom) proportional to the font size use 1em this is a promotional unit, if the size changes the margins changes accordingly ..*/
#Content h1 {fant-size:24px; font-weight:bold; margin-bottom:1em; } /* if it does not work well remove the bottom and add 0 left and right margins, i.e. (margin:1em 0) */

#Content h2 {fant-size:18px; font-weight:bold; margin-bottom:1em; } /* change the 2nd level headings size to 18px.*/ #content p {font-size:12px; line-height:140%; margin-bottom:.75em} /* setup the way the paragraphs are going to look .*/

Setting up layout and formatting CSS

22

Formatting the images set the margins, padding bottom border, this same style can be applied to every image within the content area. /* setting properties for the images apply the border all the way round */
#content img {padding:8px; margin:16px; border:1px #666 dotted; } /*Set the footer text: create a class style for the text ..*/ #footer {.done ..}

.footer-text {padding:5px;text-align:center; color:#fff;font- weight:bold; } /* center align the text .change the font color to white ..if it is pushed upwards then add some padding ..*/ Ensure that you apply the style to the footer content <div id=footer> /*apply the class style in the HTML code file .*/
<p class=footer-text>@copyrigt 2012 chesoli class exercise </p>

Setting up layout and formatting CSS

23

Check the blue-print, there is a thin dotted line separating the content from the background set this property in the wrapper.
/* adding the line property in the wrapper .grey border*/ #wrapper {.. ;. ;.; border-left:1px #666 dotted; border-right:1px #666 dotted; } There is also a white line that separates the subbanner from the top navigation. This class style is already created just need to apply (reuse that style) at the bottom of the subbanner In the HTML code apply the thin line class style we created early .
<div id=subbanner class=bdr-thin-bottom>

Setting up layout and formatting CSS

24

Format the table Remove the table width value 500px, set the style in the CSS. The table has 3 sections

<thead> </thead> <tbody> </tbody> <tfoot> <tfoot> In the CSS code put a comment /*table formatting */
/* put top and bottom margin and center the table on the page Space out the individual cells:*/

table{width:500px; margon:20 auto; border:1px #999 dotted;} /*Center the content:*/ th, td{ padding:8px; text-align:center; font-size:12px; } /*add the shading in the head and footer use the thead and tfoot*/ Thead, tfoot{background-color:#BFFFBF;} Bold the headers: th{font-weight:bold; } Add a hover effect in the table : tbody tr:hover{backgroundcolor:#ABF5FE;}/*specifically apply to rows*/

Creating a Dreamweaver page template from your design

25

create a page template from your design and add editable regions to the template. We need to create 4 pages out of this page ( home, products, services and contacts ).
Use the temple to avoid modifying/making changes in every page. some parts of the page are reusable e.g. the banner, footer, topnav etc. Create the content area as an editable region

Lock all parts of the template except for the content area, the user can make changes they want in the content area but lock them out of everything else in the design.
If you modify the rest of the page e.g. in the banner or subbanner. Make the change in the template and thet change will cascade in the other pages.

Creating a Dreamweaver page template from your design

26

Steps of creating the template Adding the editable region in the content area Saving the page as a template Use the template to create the four pages Adding the editable region in the content area In design view (remove all the content in your design). Highlight and cut. The content has to be placed in the home page . In the blank empty design, click on the insert menu and select template objects and select editable region. Name the editable region one word name e.g. enter-content-here check the template in HTMl code view: <h1>enter-content-here</h1> Saving the page as a template Click save, make sure you select the correct site: save it as main the description is optional. Accept the prompt to update the links (click yes)

Setting up your site pages from your template

27

Use the template to create the four pages

Close the template file. Click file new, select page from template. A new page appears with the same design, name it index.html, paste the content you had cut (from the clip board) before. You will be required to put some descriptions for your images.

Create the other three pages, (file new page from template) Highlight and put the content . e.g. <h1>products</h1> in design or code view
Hands on Class project has enabled us to build a complete web site for SMBs. Simple but very professional.