Week 7: February 27 – March 7
Topic: Images for Web Pages
Assignments Due: March 7
This week we will be working with images, the Fireworks image editing software, and image maps. In the video tutorials I show you how to create a page banner, gradient background, and concept map image. We will use Dreamweaver to draw clickable hotspots on the image after it has been inserted into the page to create an interactive concept map. This is very handy when you have complex information that you want to represent in a visual display. Hotspots allow you to link from the image to open extended information for each part of the image.
Concept maps are described as “graphic tools for organizing and representing knowledge” (See: Novak, J.D. & Canas, A.J., 2006, 2007). They allow us to see the big picture of ideas that are related to a particular concept. These ideas are represented by nodes which are often rectangles or circles. The nodes are connected by links to show relationships. Concept maps are often categorized within the realm of graphic organizers. For additional examples see: http://www.graphic.org/goindex.html.
- Select a concept taught in your content area, or one that you might teach, that has a main idea and at least two (or more) related subordinate ideas. For example, the concept of “seeds” forms a general category. Specific types of seeds are related subordinate ideas. For the purpose of this assignment it is a good idea to create a simple concept map. Complicated maps do not always transfer well to the Web, because there is a limited amount of space on a Web page to hold the image and related text.
- After you have selected a topic then start to look for information on the Internet that relates to the topic. Locate websites that you can link from your concept map.
- Create a new Web page for this project. Save it in the 502 folder of you Web site and name it conceptmap.html.
- Create a new external style sheet and name it conceptmap.css. Link it to the head section of conceptmap.html. Please note that you can reuse favorite styles from previous projects as long as the code is written correctly. Save the style sheet in the styles folder of your Web site.
- Type a title on your page and then type 200 to 500 words of original text about your topic. This should be your own original text that has NOT been copied and pasted from another website or document. For more information, please refer to the course policies in the syllabus under academic honesty.
- Add your name or copyright/name section to your page. In the example this is in the footer of the page.
- Draw your concept map diagram using Fireworks CS4 (or equivalent image editing software). Add text directly on your image map that instructs users how to click on the image to open other Web pages. Otherwise they may not know there are hot spots on it. Export the image in either gif or jpg format. Use the name conceptmap.gif or conceptmap.jpg for your exported image. I would also suggest saving a png copy that can be changed or edited in Fireworks. Export your image into the images folder within the local root folder that was defined in Dreamweaver for your website. This folder should be at the root (top) level of the site and NOT in the 502 folder. It is good file management to save images used on your Web site in a common images folder.
- Insert your concept.gif (or jpg) image into your imagemap.html page.
- In Dreamweaver, draw a minimum of two hotspots on the image. Each hotspot should open a Web page of related information when the user clicks on it in the browser. You can link from your hotspot to any suitable Web page with related information found on the Internet. These pages should not be part of your own website so use absolute links.
- In addition to the necessary XHTML and CSS needed to format your page and make it attractive, please add the following code elements and styles to your project:
Text between <title></title>
Div tags as needed to structure the content of the page. The page should make logicalsense without a style sheet.
- Heading tags as needed to identify major sections: Start with h1 and move progressively down through h2, h3, etc. as necessary for the page.
- Alternative Text: Please add a few words of alt text to your image and also the image map links.
- CSS Image Padding: Add some padding around the image. This will put some space around the image so that the text is not bumped up against it. The code is simple. Just add code similar to the following to your external style sheet. You may want to experiment with the padding until you like the appearance.
- Target the Links: Use the target attribute for each link on the image map to open each Web page in a new browser window. (e.g. target=”_blank” in the opening <a tag.) While, somewhat less accessible, this allows you to keep the starting page open when users visit the linked external sites. Please type a note on your page that alerts users that all links open in a new browser window.
- Optional Items: You can add a graphic page banner and gradient background if you want to, but this is not required. I would suggest using a fixed width container div with a banner graphic.
- 10. Your page should be attractive and adhere to the design principles in the Non-Designer’s Web Book.
- Save and upload all of the files: conceptmap.html, conceptmap.css, and all image file(s) for the page. Try typing the address to your page to open your project page from the server. Your page should have an address similar to the instructor example. However, the snelsonc part of the URL will be changed to your own user name (typically last name and first initial).
- Validate your XHTML. http://validator.w3.org/
- Validate your CSS code with the W3C CSS Validation Service at: http://jigsaw.w3.org/css-validator/
- Correct any problems with the code.
- I would suggest spell checking your page. Click the Commands menu then Check Spelling.
- If you make any additional changes, please be sure to save your pages and upload them to the EDTECH2 server.
- Open your 502.html page and create a link to the conceptmap.html page.
- Post 502.html URL on the Assignment 7 Showcase discussion board to share with the class.