Web Design Lesson 3


Published on

M6 Web Design - Lesson 3 - Links and Images

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Web Design Lesson 3

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