Web Design - Lesson 3

Web Design - Lesson 3

• 1.
  Web Design Lesson3
• 2.
  Last Week Congratulationsfor those of you that uploaded your work last week! We are still missing some – please try to keep up to date in this subject, it is very easy to fall behind.
• 3.
  Adding links (yourpages) 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.
• 4.
  Target property forhyperlinks _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
• 5.
  Adding links (externalpages) 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/
• 6.
  Adding Graphics toWeb 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.
• 7.
  Alt Property ofImages 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.
• 8.
  Using Images asLinks 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.
• 9.
  Image Maps Weuse 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:
• 10.
  Image Maps Selectthe 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.
• 11.
  Rollover Images Arollover 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.
• 12.
  Rollover Image Onceyou have your 2 Images: Insert - Image Objects - Rollover Image Fill in the box below: Then Preview your Rollover Image.
• 13.
  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
• 14.
  Task Today –Part 2 Create a Welcome or Introduction page for your website. Your home page MUST be named index.html so your web host knows it is your MENU or HOME page. 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.
• 15.
  Website Layout HomePage Text Page Image Page
• 16.
  Task Today Whenyou have finished add your Homepage link to the English-Study website. You will be given your before mid term grade for successfully completing these 3 pages.