Web Design Lesson 3
Upcoming SlideShare
Loading in...5

Web Design Lesson 3



M6 Web Design - Lesson 3 - Links and Images

M6 Web Design - Lesson 3 - Links and Images



Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.slideshare.net 1


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Web Design Lesson 3 Web Design Lesson 3 Presentation Transcript

  • Web Design Lesson 3
  • Adding links (your pages)
    • Inserting a link to your other pages:
    • Make sure both pages are saved in the SAME folder
    • Select the text you wish to use as a hyperlink.
    • Insert – Hyperlink
    • Next to the Link box click the folder and find the page you want to link to.
  • Target property for hyperlinks
    • _blank loads the linked file into a new, unnamed browser window.
      • Usually use this for opening external pages linked from your site.
    • _self loads the linked file into the same frame or window as the link. This target is the default, so you usually don’t need to specify it.
      • Usually use this for moving around your own pages.
    • There are 2 more options you won’t need to use yet.
    • _top
    • _parent
  • Adding links (external pages)
    • Inserting links to external pages (for example www.hi5.com , www.yahoo.com . or your friends websites)
    • Select the text you wish to use as a hyperlink.
    • Insert – Hyperlink
    • Type in the FULL web address including http://
    • e.g.
      • http://www.yahoo.com/
      • http://www.freewebs.com/satree/
  • Adding Graphics to Web Pages
    • We use 2 file types for images on our web pages:
      • .gif - logos, titles, buttons, animations.
      • .jpg - photographs.
    • Please remember to save ALL images you use in your web design folder.
    • Try to edit the size of the graphics in PhotoShop before you import them into Dreamweaver.
  • Alt Property of Images
    • Add a simple description of your image in this box.
    • This text is displayed when the mouse rolls over the image.
    • This text is also used for people who do not display graphics, or for visually impaired users.
  • Using Images as Links
    • We can add a link to your image.
    • Insert the hyperlink in the Link box.
    • Remember to use the FULL address http://www.webaddress.com
    • You can also use the Target property that we learnt about last week.
  • Image Maps
    • We use Image Maps to create links within an image. These links are called hot spots.
    • Select an Image you wish to use as an Image Map.
    • Insert this Image on your picture.
    • Then select the rectangle, circle or freehand tool below:
  • Image Maps
    • Select the area of the Image you wish to use as a hot spot, or hyperlink.
    • Then add your Hyperlink, Alt and Target properties.
    • It is important to fill in the Alt property which tells the user about your hot spot.
  • Rollover Images
    • A rollover image is an image that changes when the mouse rolls over it.
    • We can use this for buttons, or to create simple user generated animations.
    • We need to create 2 images that are the same size for this example.
    • Remember - BOTH these Images must be in your web design folder and BOTH must be uploaded to your web site.
  • Rollover Image
    • Once you have your 2 Images:
      • Insert - Image Objects - Rollover Image
    • Fill in the box below:
    • Then Preview your Rollover Image.
  • Task Today – Part 1
    • Create a webpage that features rollover images and an image map.
    • Upload this to your web account.
    • Don’t forget what we learnt last week:
      • Well designed text
      • Page title
  • Task Today – Part 2
    • Create a Welcome or Introduction page for your website.
    • Include links to:
      • Your work from last week (text) and this week (images)
      • Your friends
      • Other websites
    • How about: Try making a menu with rollover images.
    • You can create interactive buttons.
    • Create your buttons in Photoshop, or find some on the Internet.
  • Task Today
    • When you have finished add your Welcome page link to the English-Study website.
    • Remember – there is no exam in this subject. Your grades will depend on your work this semester.