340 likes | 475 Views
Dreamweaver Directions. Getting Started Tables Adding Images and Color Adding Text Adding Links Creating a Rollover. DW. Open Dreamweaver Select HTML. DW. Select HTML Layout none Click Create. File Organization. A home page is always called index.html
E N D
Dreamweaver Directions Getting Started Tables Adding Images and Color Adding Text Adding LinksCreating a Rollover DW
Open Dreamweaver Select HTML DW
Select HTML • Layout none • Click Create
File Organization • A home page is always called index.html • images folder inside Project files folder • index.html page file inside Project files folder DW
Tables • Find tabs at the top of your window • Common tab • Select the table icon: it looks like a little grid DW
Select the number of: • Rows • Columns • Table width 700-1000 pixels • Boarder 0 • Cell pad 0 • Cell space 0 • Header none • Click ok DW
In PROPERTIES INSPECTOR- at bottom of windowYou can enter a number for the width & height for each table cell DW
Add color to a whole cell Click inside cell Clk <td> tag (cell tag) in the Properties Inspector Enter either 6-digit color code -Or clk on Bg to get color menu . DW
Adding Background Color • Page Properties in properties inspector • Go to Bg-type 6-digit color code or click in little box next to Bg for color menu DW
Background Color - more • Click Page Properties in the Properties Inspector < APPEARANCE • Click Background Color box • Either insert a 6-digit color code • Or click Background color box and select from swatches DW8
Select Image Source • Open your images folder • Select the image you want DW
Adding Text DW
Click inside table cell • Type some words • Select the <td> tag DW
Choose Font • In properties inspector (window < properties) • Font: choose font style • Arial, Times, Courier, Georgia, Veranda, etc. DW
Choose Font Format • In properties inspector • Format: choose either paragraph, heading 1, heading 2, etc. DW
Choose Font Size In properties inspector (window < properties) Size: choose font size DW
Choose Font Color • Select grey unmarked box to change font color DW
Bold, Italic & Align Font • Bold, Italic • Left, Center, Right, All Justify • Bullets and Numbering DW
Align Font (will also align images) • Horizontal alignment • Vertical alignment DW
Click link icon • Select a word or words • Click on the link icon in the common insert bar DW
Fill in Hyperlink information • Text: selected text • Link: this is where you will type the page URL • Target: _blank opens the linked page in a new window DW
Check your link • Click once away from the selected text to deselect it • The link text should be blue • And underlined in blue DW
Change Link Color In properties inspector Go to page properties Category: Click links Link color: select from swatches Rollover links: choose color Underline Style: choose Click ok DW
Inserting a Rollover Image • In the common insert bar at the top of the window • Go to image (tree icon) • Rollover image DW
Inserting a Rollover Image • In the insert rollover image dialogue box • Click browse • Go to your images folder DW
Select your image • Original Image: browse and choose • Rollover image: browse and choose • Alternate text: what the image is • Ok DW
Preview your rollover Click on the Preview in Browser icon (little world) Click preview in browser DW
Check your rollover In your browser windowrollover image should change as cursor hoversover image DW