hands-on class project

7/31/2019 Hands-On Class Project

1/27

Creating a simple clean professional looking

website.

Chesoli Byron

Strathmore university

Faculty of Information Technology

Web programming (hands-on class project)1


2/27

Road map

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 yourchoice.

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 andCSS 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

2


3/27

Create a site

Start with a markup/plan/layout as you go through yourdesign (sketch on paper or create in a layout program e.g.Photoshop )

the sketch/plan shows where you are going before youstart coding.

Use Dreamweaver to Create an empty site/blank documentwith the following files and folder:

Images (banner.png, subbanner.jpg, banner_landscaping-sm.jpg, banner_landscaping-sm.jpg)

Main.html

Styles.css

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

3


4/27

HTML file

Change the title to ?????

4


5/27

Starting up the project

There are different ways to start up a project:create the CSS for your pages before creating the HTMLstructure 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 alreadydefined styles and ids. it brings them up automatically.

5


6/27

Creating the layout

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 likedefault line heights, margins and font sizes of headings. Reset styles quite oftenappear in CSS frameworks.

CSS Reset removes the inconsistent styling of HTML elements provided bybrowsers. This creates a dependably flat foundation to built upon. With CSSReset loaded, write explicit CSS your project needs.

When CSS Reset is loaded it removes the inconsistent styling of HTML elementsprovided by browsers. Now, just begin writing the CSS rules your project needswithout being burdened by what the browser thinks you need.

6


7/27

Creating the layout

/*reset cssreset.*/

Second section

/*containers

..*/No styling yet, just define the namesfor your structure.

Look at the blue print page: yoursketch/plan ( e.g. we need: banner,sub banner, top-navigation, top, footerand the main container wrapper etc)

Content area is basically one columnno side navigation or side bar.

Save the CSS file .

Main content divs

7


8/27

Creating the basic structure

Back to your source (HTML) code:

Creating the basic structure

/* all the contend forthe page, main outer level container ..

Contains all the content for the pageabout 900px */

8


9/27

Adding content to your page

With the basic structure set, the next step is to add the content and uploadthe CSS styles

Add the banner image, in the banner:

/*mainly used by

screen reader or search engine ..*/

Add links for the top navigation in the topnav div: (most preferredunordered lists)

HomeProductsServicesContacts

9


10/27


Add some content in the content div:

Heading, a paragraph of information and a couple of images.

welcome to landscaping site

paragraph information .

Note: it is always best to resize your images in Photoshop and fireworks, the width and height donein CSS not in HTML.

Add more content: (Sub heading, paragraph of text, a table and final paragraph of text)

/* adding more content */

welcome to landscaping site



10


11/27


Setting up the tables : 7 rows and 3 columns

Title row, Header row (heading of the table), 4 content rows and finally thefooter 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 manuallydefine the header. Leave the caption off, instate use for your title.

In the summary option, type some information about the table to be usedby 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 tableset the width to 500 px

Merge the first and last 3 cells.

Change the first and second row to th

Second to

11


12/27


This should be the tile andthe heading of the table ..

.

this should be the table body section

This should be the table footer section .

The table has the following 3 sections

12


13/27

Setting up your top navigation

The last thing to do before you start working with the css is to create thelinks in topnav div: creating the links is done in HTML and the formatting isdone in CSS.

In design view highlight the words Home, products .etc, and click on theproperty 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 searchengines 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: rememberyour link names

13


14/27

Setting up a CSS Reset

When formatting the pages start with the reset . Click the Style file.

Why Reset . Because different browsers give different properties todifferent elements (e.g. margins). Reset all the properties to a baseline/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 andpaste in your reset section .

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

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

Check your page after putting the reset ..

14


15/27

Setting up layout and formatting CSS

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 anytop 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 lightgreen color*/

Body {background-color:#DFFFDF; } since no other back ground color has been definedfor the layout the body color shows through all everything, solution to this is to define thewrapper color as white.

#wrapper {..; ; background-color:FFF or FFFFFF; } /* wrapper container shouldhave a white background.

15


16/27


Formatting the top div in our design you may not see this div at all, thisis because (top container has no width or height define ..)

#top {widith:100%; height:25px; background-color:000; } /* 100% ofthe container in this case the wrapper . i.e. 100%=900px*/

The top div has a white line separating it from the banner .thin whiteborder .set the white border properties in css .*/Bellow the containerscreate a class or generic selector */

.bdr-thin-white-bottom {boder_bottom:1px #fff solid; } /*style name tella 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 andthe name of the style inside the top div.

16


17/27


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

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

17


18/27


Giving the site its final look . In the code view of your styles .formatthe subbanner .

Define the width and the height so that you can see your image

/* an empty div insert background image as your property image.. 900pxand 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-repeatproperty no-repeat .

18


19/27


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 topand bottom and 0px left and right*/

#footer {background-color:#060; width:100%; height:25px; padding:5px0; }

19


20/27


Format the topnav to give the site the final look

Create the topnav style in your CSS file .. Research on CSS navigation horizontal andvertical.

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 howthe individual list items are going to appear . (li) display is black change from black toinline in order to work together ..works well with the floating .

/*actual batons are the anchor tag ). define the shape of the tab using paddingproperty 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 .

20


21/27


Format the content div:

Start with defining the heading style #Content { main contentcontainer already set }

/* set the margins (top and bottom) proportional to the font size use 1em thisis 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 rightmargins, 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 .*/

21


22/27


Formatting the images set the margins, padding bottom border, this samestyle 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 pushedupwards then add some padding ..*/

Ensure that you apply the style to the footer content

/*apply the class style in the HTML code file .*/

@copyrigt 2012 chesoli class exercise

22


23/27


Check the blue-print, there is a thin dotted line separating the content fromthe 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 topnavigation. 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 .

23


24/27


Format the table

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

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{background-color:#ABF5FE;}/*specifically apply to rows*/

24


25/27

Creating a Dreamweaver page

template from your design

create a page template from your design and add editable regions to thetemplate. 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 partsof 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 makechanges 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 thechange in the template and thet change will cascade in the other pages.

25


26/27

Creating a Dreamweaver page

template from your design

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 beplaced in the home page .

In the blank empty design, click on the insert menu and select template objects and selecteditable region.

Name the editable region one word name e.g. enter-content-here

check the template in HTMl code view:

enter-content-here

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)

26


27/27

Setting up your site pages from your

template

Use the template to create the four pages

Close the template file. Click filenew, select page from template. A newpage appears with the same design, name it index.html, paste the contentyou 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 andput the content . e.g. products in design or code view

Hands on Class project has enabled us to build a complete web site forSMBs. Simple but very professional.

27

hands-on class project

Documents