Dreamweaver Week Three

February 24, 2014 § Leave a comment

Site > New site > ‘third week’ > locate folder (DREAMWEAVER WEEK THREE) > save

open ‘index’ and ‘stylesheet’ in bottom right files

apply rules to divs (‘outerwrapper’ etc.), everything is pretty much a div except for thumbnail

we want to style the heading of the text > go style sheet > at the bottom we make a class > a class starts with a full stop
.leosHead {
    color:#0CF;
    font-size:36px

everything is wrapped in something, and text is no different if wants to be styled

highlight text in index
then > <div id=”header”> <span> Leo’s Website <span><div> when you open the ‘<‘ and start typing it will automatically bring up  list of functions

next we get up the body text (dummy), go to lipsum.com > grab some text and past into the text container in the index
now we need another class to style the body > go to style sheet > below the class we just made:
.leosBody {
    color:#FC6;
    font-size:10px;
}
To style the body, we need to add the class (after the text container code:
<div id=”textContainer”> <strong>Lorem Ipsum</strong> <span=”leosBody”> then </span> before the <div> at bottom (shortcut is /)

Whenever there’s text I want to activate as a link, simply highlight it in the right preview window. Highlight page 1, and at bottom, find the ‘Link’ bar, here we want to link up the page 1 text to the page that’s  been made (in file menu on side). Use the ‘pick whipper’ tool (cross hair symbol next to bar) and hold and release on page in side menu.

<p> [paragraph] <a href=

the class for the link has to use the css syntax – a:link {
font-family is the font used.
font-decoration has lots of options to make the text look different, such as blinking, underlining etc.

a:hover is when the mouse is hovering over the link

a:visited is what happens when the link has been visited. If you want the same specifications as the regular link, simply copy & paste from the original a:link.

a:active is when you actually hold the mouse and click the link

If I wanted to start putting images in the thumbnails, I’d take away the text then ‘insert’ > ‘image’, but the image HAS to be the right size, otherwise it will knock everything else on the page out of place.

Fireworks:

file > bath process > add all pictures I want to and then (scan to fit area) and it will batch process all the images to the right size
Photoshop also has this function, but Fireworks is made for web development.

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading Dreamweaver Week Three at Leo Patterson.

meta

%d bloggers like this: