Wednesday, 27 April 2011

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:

No comments:

Post a Comment