Hands-On Class Project
-
Upload
raphael-gunny-ngunu -
Category
Documents
-
view
218 -
download
0
Transcript of 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
-
7/31/2019 Hands-On Class Project
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
-
7/31/2019 Hands-On Class Project
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
-
7/31/2019 Hands-On Class Project
4/27
HTML file
Change the title to ?????
4
-
7/31/2019 Hands-On Class Project
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
-
7/31/2019 Hands-On Class Project
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/31/2019 Hands-On Class Project
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
-
7/31/2019 Hands-On Class Project
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
-
7/31/2019 Hands-On Class Project
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
-
7/31/2019 Hands-On Class Project
10/27
Adding content to your page
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
paragraph information .
paragraph information .
10
-
7/31/2019 Hands-On Class Project
11/27
Adding content to your page
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
-
7/31/2019 Hands-On Class Project
12/27
Adding content to your page
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
-
7/31/2019 Hands-On Class Project
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
-
7/31/2019 Hands-On Class Project
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
-
7/31/2019 Hands-On Class Project
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
-
7/31/2019 Hands-On Class Project
16/27
Setting up layout and formatting CSS
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
-
7/31/2019 Hands-On Class Project
17/27
Setting up layout and formatting CSS
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
-
7/31/2019 Hands-On Class Project
18/27
Setting up layout and formatting CSS
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
-
7/31/2019 Hands-On Class Project
19/27
Setting up layout and formatting CSS
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
-
7/31/2019 Hands-On Class Project
20/27
Setting up layout and formatting CSS
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
-
7/31/2019 Hands-On Class Project
21/27
Setting up layout and formatting CSS
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
-
7/31/2019 Hands-On Class Project
22/27
Setting up layout and formatting CSS
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
-
7/31/2019 Hands-On Class Project
23/27
Setting up layout and formatting CSS
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
-
7/31/2019 Hands-On Class Project
24/27
Setting up layout and formatting CSS
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
-
7/31/2019 Hands-On Class Project
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
-
7/31/2019 Hands-On Class Project
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
-
7/31/2019 Hands-On Class Project
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