Week 2: Building a Simple Website IMC 320 Web Publishing Spring 2011

Week 2: Building a

Simple Website

IMC 320 Web PublishingSpring 2011

HTML elementsThe things that make up an HTML document

Element/attribute syntax (from w3schools.com)

An HTML element starts with a start tag / opening tag

An HTML element ends with an end tag / closing tag

The element content is everything between the start and the end tag

Some HTML elements have empty content

Empty elements are closed in the start tag

Most HTML elements can have attributes

Can be nested; not case-sensitive

Key HTML elementsDocument: html

Page head: head

Contains style, meta tags, scripts, and links to files containing these thing

Not visible to page viewer

Page body: body

Contains content of page

Visible

Key HTML elements

Paragraph: p

Headings: h1, h2, h3, etc.

Link: a

<a href=“...” target=“...”>Link text</a>

Image: img

<img src= “...” alt= “...” />

Key HTML elements

Lists

Ordered list: ol (has numbers)

Unordered list: ul (has no numbers, can have bullets or images or ...)

List item: li (the things in the list)

Can be nested

Key HTML elementsLine break: br

<br />

Rule: hr

<hr />

Comment: <!-- -->

<!-- This is a comment -->

Key HTML elements

Tables

table

tbody

tr (table row)

th (table head)

td (table ... data?)

Key HTML tags

Bold: strong

Italics: em

Underline: u

Strikethrough: s

Block quotation: blockquote

Code: code

AttributesProvide additional information about HTML elements

Specified in the start tag

Come in name/value pairs: name=“value”

<h2 class=“entry-title”>First Post!</h2>

Enclose values in quotes

Not case-sensitive (but use lowercase)

Attributes: IDs and classes

ID

Only one of each per page

<h1 id=“site-name”>

h1#site-name or #site-name

Class

Can have many of same per page

<h2 class=“entry-title”>

h2.entry-title or.entry-title

Inline styling

<p style=“...”>

Hard to maintain -> not recommended

Spacing and position

Width

Margin

Padding

Div -> a block of elements

Cascading Style Sheets(CSS)

In page head:

<style type="text/css"> ... </style>

As separate file:

<link type="text/css" rel="stylesheet" href="css/style.css" />

FTP with Dreamweaver

Local folder

Site name (DW)

FTP host (A Small Orange server)your domain name (not subdomain)

Host directory (remote folder)public_html/[subdomain directory]

Login & password

Passive FTP

Lab part 11. Create subdomain

2. Set up Dreamweaver site

3. Download files & unzip

4. Create index.html

5. Insert text

6. Set up folders

7. Style document

8. Upload and view

9. Style some more

Files: http://imc320.bigbigdesign.net/assets/week-2.zip

Site menus/navigation

Make a bunch of links

Use an unordered list

Get rid of bullets

Make the list items display as blocks

Float the list items

Style the hovers and visited links

Consistency across pages

Included files

Various methods depending on server settings and type

PHP:

create file with repeated elements

change filename extension to .php

<?php include 'navigation.php'; ?>

Consistency across pages

Dreamweaver templates

Select what’s editable and what’s fixed

Can have multiple templates per site

Use conditions to determine what’s included

Reduces processing on server

Need to check out and reapply templates to all files to which it applies

List => Flexible photo gallery

Remove list styling

Reset margin and padding

Set width and height of list element

Float list element

Optional:

Set image width and height

Style borders

style captions

Lab part 2

Create a navigation menu

Create a template from the repeatable parts of your page, including menu

Create photo gallery page

Create contact page

Link it all together

ResourcesHTML 4.01 / XHTML 1.0 Reference:http://www.w3schools.com/tags/default.asp

List of CSS properties:http://meiert.com/en/indices/css-properties/

Smashing Magazine:www.smashingmagazine.com

http://www.smashingmagazine.com/2011/01/18/time-saving-and-educational-resources-for-web-designers/