HTML

HTML defines the content of your web page... the Title, Headings, paragraphs, lists, and other text formats. HTML also defines images, objects, and layout.

CSS

CSS styles the content. You can apply CSS rules to any HTML element, any "id" or any "class"

Building your site

Your web page is divided into parts, that we have defined as The banner, the menus/navigation, content with headings, sub-headings and other text. Other elements on a page include photos/graphics, search functions, simple forms and legal/priavacy information. you can layout the general form of your web page, containing those elemests using Dreamweaver's AP Div's and iFrames.

We'll start off with a Basic CSS html page and begin with the first HTML element that appears on a web page, the banner. We'll start of using AP Div's.

Step 1: Building the Banner.

The banner contains Headings, a slug line, a logo, background colors and/or images.

Working with graphics

Chapter 6 Pages 129 to 161 (Dreamweaver On Demand CS4 and CS5) of you text book deals with inserting graphics or images on a web page. Dreamweaver has a new feature called "smart objects" that works intandem with Photoshop. It’s now possible to import a layered Photoshop file into Dreamweaver. Dreamweaver recognizes if the original has been edited and will notify you to update the web graphic. All you have to do is click a red arrow on the image in Dreamweaver.

Logo with smart indicator A SMART LOGO

Even though Dreamweaver is designed to integrate with Photoshop, Fireworks, and Flash any third party graphic/image editor of your choice will work... Try Sumopaint.com a free on-line paint program!

Fonts

One of the most frustrating parts of building a web site is the limited number of fonts available to typeset your web pages. See -- Common Fonts for the web Laying out the Web Page container and banner

Absolute Placement Dividers the AP Divs

fake div

An AP Div that is nested (inside another AP div) postion is measured from the top left corner of the div it is inside not from the edge of the browser.

Position is Everything

To assemble a web page you need to understand how position works.

Here's a web page that defines the different ways you can position the <div></div> element on a page. http://uofgts.com/BasicWD/position/

You can cut and paste the source to play with the example pages... the source is commented.

Banner layout

Step #1

`1. Nesting two APdivs

Step #2

2. Add a Background

Step #3

3. Add Logo

Step #4

4. Adding an Heading and a slugline

Step #5

5. Using APDivs to layout the rest of the web page adding:
a left column, space for content, a right column and a footer.

 

 

NEXT, the Navigation/Menus, forms and other ways to layout web pages....