Building Web Sites

In this section of bootcamp we will build a simple website using Dreamweaver and some freely available resources. The emphasis here is to concentrate on the basic building blocks of web design that will be developed over the course of the semester.

Dreamweaver – can be downloaded for a free one-month trial here from adobe.com

Free alternative: Kompozer

Also see free website generators (tend to be flash based)

Tips:

Home page must be named one of the following:
index.htm or index.html or
default.html or default.htm

Filenames: Use lowercase only; use letters and numbers only; can use – and _ (hyphens and underscores) but DO NOT use commas, question marks or other punctuation. Do NOT use spaces in filenames.

RIGHT: football.htm WRONG Football.htm

RIGHT: football-word-cup.htm WRONG football’s&^Wordcup.htm and football worldcup.htm

IT IS VITALLY IMPORTANT TO BE ORGANISED

Keep all your files within a single folder and/or within sub-files of that folder.

DEMO

1. Open up DW

2. Go to SITE; create new site

3. Save it as index.html etc (nb all lower case, no spaces etc)

4. Insert page name, metatags

5. Text

6. Tables

7. Insert text

8. Insert a photo

9. Link to other pages

Tutorials:

• Dreamweaver by J-Learning
• Dreamweaver by Berkeley’s Knight Center

Other useful links:

• http://www.website-designs.com/ – good for free backgrounds, clipart and graphics – remember to respect the link-back requirement
• Lorem ipsum dolor sit amet – dummy text generator
• hong kong weather sticker from weatherunderground
• http://www.widgetbox.com/ – widgets
• http://www.htmlbasix.com/iframe.shtml – iframe code generator
• Iframe generator – alternative
• Drop down menu generator – http://www.ricocheting.com/js/drop.html
• Texty – http://www.texty.com
• Scribd – inserting docs in various formats (ipaper)
• Logo Generator
• Button Generator
• Free icons
• More free icons
• Free photos from http://www.freedigitalphotos.net/
• mp3 widget – http://www.widgetbox.com/widget/mp3-player
• Feedzilla news widget
• Create RSS feeds with http://www.feedforall.com/index.htm
• Free CSS layouts
• Menu generator from Izzymenu
• Flash accordion menu
• Online forms generator http://jotform.com/
• Jing – video your desktop!
• Free web templates from stylishtemplates.com
• Online payment gateways – Paypal and Moneybookers.comONLINE WEBSITE GENERATORS
• Cheat – online website generator at: http://www.wix.com/
• Cheat – online website generator at: http://www.hipero.com/
• Cheat – online website generator at: http://www.jimdo.com/
• Cheat – online website generator at: http://www.yola.com/

• Your classwork is stored at: