Design For Web... Workshop 1

- HTML - Hyper Text Markup Language

- PHP- Hyper Text Preprocessor

e.g. Not all webpages are physically there on a website for example, Amazon, when searching for a wheelbarrow, all information tagged 'wheelbarrow' is pulled in and applied to the website template, if all pages existed websites would be very slow.

- CSS - Cascading Style Sheets

Split view of the New HTML document. (Code on left, design on right)

Design view

Code view

- Metatag - makes a website searchable.

Original code at the start of new document:

Edited code, deleting unnecessary lines:

Web management:

- Create a folder called root, no capitals or spaces.

- Inside that folder create images, again no capitals or spaces.

Once this is made go to Dreamweaver and go Site > New Site.



Rename site and point the local site folder to your root folder.

This will feature the information for uploading to the internet.






- FTP - File Transfer Protocol - used to transfer files like email.

As we have named our root folder, every time you save it saves to the root.

- When saving the homepage, save as index.html

- Setting up the table:

Height is not an option to change in this box so it must be done using the code.

tr in brackets = table row

td in brackets = table data

= nothing/no data

Pressing space after the width brings up this menu, the height needs specifying so press h:

When height is selected, click it, it brings the height code up:


Here the pixel value can be inputted:

- Preview of the webpage so far...

Using the table and cell buttons, create the desired layout:

Creating roll over buttons:

The website has 5 so 10 need to be made, using Photoshop.

File > New > Web (specify pixel size!)

1 button needs to be created that is visible all the time, and a second button for when the user rolls over the button.

Save For Web > PNG 24 >

Save to image folder within root. 1st = home1.png

Back to Dreamweaver, choose cell to place image.

Insert > Image Objects > Rollover image

- Image name: home button

- Original image: select 1st image (home 1.png)

- Rollover image: select home2.png

- Check preload rollover image box. - to avoid lagging in loading.

- Alternate text: (for partially sighted) home button

- When clicked, go to URL : type in url

My site in Design View:

Original button:

Rollover button: