PPD ~ Dreamweaver Workshop III

To open

- Root folder means you can work on website on any computer if you download the folder

- Manage sites -> click site -> edit -> local site folder -> navigate to your user work folder and select your folder -> ok -> done

Rollover buttons - be creative!

- Scamp would have measurements on to help work out measurements

- The padding and margin take in to account when working out the size of the button, we are making them width 130px and height 40px

- Photoshop - New document (web) - transparent background

- Try to keep file sizes as small as possible so website will load instantly so viewers don't get bored

- If having a solid background colour in an image, set the image as transparent and add the colour in dreamweaver

- File - save for web and devices - choose PNG24 as transparent background - save in to root folder

- When saving, all lowercase, no spaces, commas dashes etc, make it as short as possible

- Same image, underline, save in to save folder but with a different name

- Insert rollover images (they use javascript)

- Click at end of > of first button

- Alternate text (searchable by google, this is there so the web page is useable by everyone - the screen reader reads the alternate text for blind people when they rollover image) so type what the button is

- Makes the website quite complicated in terms of code

- Put all the buttons in

- Remove the background colour of the buttons on the style sheet to remove the boxes, save and refresh to see the changes....e.g..

[on photoshop should align the text to the left not in the middle!]

Creating new documents

- Use a dreamweaver template so only have to design the page once

- We are going to convert what we have in to a template (.dwt)

- Create 4 html pages from this dreamweaver template, so if we change something on the original dreamweaver template it will change all four pages at the same time

- We are making the area on the right an editable region, click area and then

- Give the region a name

- We don't want it to be HTML, we want it to be DWT so go file - save as template - save as [type template]

- New sub folder where templates are saved

- Need to recreate the index page as it wasn't created from template

- Go file - new - page from template - create

- Save over old index page

- Create the html pages for the other pages

- Put some different text on each page to differ

- Go on to template page

- Delete the padding on the stylesheet page of the buttons and make the width and height the same size as the image

- HTML pages are locked so if you need to edit them you do it on the template

- The properties bar at the bottom displays the specifics for each button and a space for the link, click the folder icon next to the link tab, e.g.

- This updates all the file from the template at once when you save

- File - save all

Making it live

[copy from Sophies blog]

MAKING A NEW DESIGN (STARTING FROM SCRATCH)

New > Blank Template > HTML > (None)

HOW DO YOU MAKE A PAGE LIVE?

FINISH WEBPAGE > Site > Manage site > Servers > + > Site set up (server name can be blank, doesn't matter) > FTP: sophiewilson.com (All other information from One.com) > Save> Save> DONE> 

* Sometimes need to put in ftp. before name, e.g. ftp.sophiewilsondesign (usually at college) *

> Click ^ arrow in files > Click expand button to connect for local files (to update) > Drag the local files over, now live.

HOW DO YOU REFER OVER DOMAIN NAMES? (.CO.UK - .COM)

Check emails from 1-2-3 reg, IPS tag to transfer over to one.com, paste over IPS tag, 24 hour confirmation.

Web forwarding, click forward

HOW DO YOU CHANGE YOUR TEXT PREFERENCES? ARIAL/HELVETICA/SANS SERIF TO HELVETICA/ARIAL/SANS SERIF

Manually in CSS (type in, change order of type preference).

Now that I know the basics, I'm going to have a go at creating a basic web page from scratch. [see blog post]