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 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 (AP) Divs

Are boxes you can drawn on a Web page. They can contain text, colored borders, background images, images, video, flash -- any kind of HTML.A single AP Divs location on a web page is measured from the top and left edge of the browser!

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

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. Just the APdiv's Nested

Step #2

2. Add a Background

Step #3

3. LogoAdded

Step #4

4. Heading and slugline added

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