Web Design Day 3

1.      Rollover images
2.      Add link to your Blog Site

index.html
Roll over images:

Use http://cooltext.com/ to create 2 different images for each of:

Home Page, About Me, YouTube, Search, Games, My Work

          Name them HomePage-1, HomePage-2 etc….   NO SPACES!
            Save to the “images” folder.

          Open index.html
          Insert 1 x 6 table at the top of the page
          add numbers to cell padding and cell spacing
          insert rollovers into each cell
         

This is an example for the a rollover link to the Home Page (index.html)

Using Dreamweaver-choose INSERT-Image Objects-Rollover Image

          Original Image-browse for first image i.e. HomePage-1
          Rollover image- browse for second image i.e. HomePage-2
          When click, Go to URL: choose index.html
    
            Once all the links are complete for this page.
           Go to the “CODE” copy the table for the Rollovers
           Paste on each of the other web pages - go back and copy the "SCRIPT" in
           the head section and paste in the other web pages.
aboutme.html
            copy and paste rollover links from aboutme.html
youtube.html
            copy and paste rollover links from aboutme.html
search.html
            copy and paste rollover links from aboutme.html
games.html
            copy and paste rollover links from aboutme.html
mywork.html
            copy and paste rollover links from aboutme.html

Add website link to your blogsite

Use http://cooltext.com/ to create “MY Web Site” image

          Download to your image folder.
         
Launch DropBox Website
            Right click on the index.html file – Copy Public Link
Launch your BlogSite
           Create NEW post “ MY WebSite”
            Insert the image “My Web Site”
            Insert LINK – paste

Title each Page

Go back to each page 
use http://www.3dtextmaker.com/image_editor.html 
create an image of the name of each page
save into the "image" folder
Place this image at the very top center of the page