DREAMWEAVER WORKSHOP SESSION III
First half of the session
- Creating roll over images
- Remaining pages and links
- Image galleries and video
- JavaScript
Second half of the session
- Working on our own web designs
Open Dreamweaver > Site > Manage Site > Edit... > Root folder icon (Browse for folder) > User work > Choose root folder > CHOOSE > Save > OK > DONE.
Click 'local files' to see all files in root folder.
ROLLOVER IMAGES
Navigation- all the rest is content.
The content is what makes the website good.
Rollover buttons give an indication they should be clicked on.
Check button size on CSS stylesheet for div button px dimensions.
110px (w)
20px (h)... buttons on CSS with padding
In terms of padding and margins, this is taken into account with the size of the button
130px x 40px (ten for each side) with padding.
TO MAKE ROLLOVER IMAGE BUTTONS
New doc > Web preset > Make 130px x 40px dimensions for buttons (set background contents to transparent- can add this in Dreamweaver if necessary for a much smaller file size).
TO MAKE A NON WEB-SAFE TYPE BUTTON (IMAGE)
Futura > File > Save for web & devices
Choose PNG-24 (for transparent background) to save image
PNG-24 is around half the gbytes compared to jpeg, save in root folder
Call 'home' button... do this for other buttons also necessary
TO EMBED BUTTONS INTO WEB PAGE
Delete name "buttons" between > _____< </div>
In CSS you CANNOT create a roll over button- it takes JavaScript... Dreamweaver generates this for you when you Insert (WYSIWYG function).
Insert > Image Object > Rollover Image
5 FIELDS TO FILL IN...
Image name > home
Original image (before interaction) HOME 1
Rollover image (after interaction) HOME 2
ALTERNATE TEXT (if the image cannot load)... searchable via search engines- by law you're supposed to create a website for ANY person- screenreader for visually impaired, etc.
"Home button"
Select URL when ready/appropriate
Change background colour of buttons (white) b/ground/logo
CSS > HTML/HTML/HTML/HTML
Creating separate HTML pages would be very time consuming
Dreamweaver template will allow us to do this ONCE
Convert into template- dwt (dreamweaver template)
Making editable region (body) for template...
Insert > Template Object > Editable Region...
NAME editable region > content > save this as template...
CREATING NEW PAGES (LINKED)
File > Save as template, Update links? (Are none here at the moment)> Click Yes (will update the pages by linking together on the template).
File > New > Page from template > Create
Save as index.html (in root folder)
Create new pages:
index/about/work/contact (save new pages)
Now I have all of the pages that make up my website, 4 new web pages.
Add different text to each page for content variation.
Delete padding from buttons then 130 x 40px (stylesheet,, have button- see properties box)
Click folder and link to the appropriate .html link page
ADDITIONAL NOTES/QUESTIONS I ASKED SIMON
//
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).
No comments:
Post a Comment