Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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 , . 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> </li></ul></ul><ul><ul><li> </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 </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>