English 413: Electronic Documents and Publications Dr. Jablonski Spring 2004 What You Need to Complete this Lab Lab #3: Web Design with Graphics 1. HTML editing software, preferably Dreamweaver MX 2. UNLV Student Computing Resources SCR account. http://ccs.unlv.edu/scr/support/display.asp?crumb=2&typeid=2 3. A basic understanding of how the Internet works and how Web pages are made 4. Knowledge of the readings assigned for today: Web Style Guide Ch. 3, 4, & 7 http://www.webstyleguide.com/index.html?/ Charlie Morris' "Amateur Web sites The Top Ten Signs" http://www.webdevelopersjournal.com/columns/ abc_mistakes.html Robin Williams' "Web Design Features" (read both "good" and "bad" lists) http://www.ratz.com/features.html Lab Assignment For this lab, you will practice incorporating graphics into Web pages. Web designers use graphics for not just pictures, but also for design elements like navigation buttons, banner (or logo) designs, backgrounds, and even to display non-standard text. Web page graphics are not created in the HTML editor, but other applications like Photoshop and Fireworks. These images then can easily be imported into Dreamweaver. For this lab, you ll use Macromedia s Fireworks MX to create a page header and a simple graphic navigation bar. You ll then incorporate these elements into a Web page that should resemble something like the following example when you re done: http://www.unlv.edu/faculty2/jablonski/413/lab3 1
Before you begin this tutorial, go to the comedy team Just the Funny s list of characters http://www.justthefunny.com/characters.html and pick a character you ll use for this lesson. You can also opt to use pictures of yourself for this lab. For this option, you ll just need to take some printed pictures of yourself to a public lab and ask the lab monitor to help you scan your pictures as.jpg files. Task Hint Sample 1. Open Fireworks and create a new file with the canvas size 650 pixels wide and 100 pixels high. Leave the canvas color white. Macromedia s Fireworks MX is found near Dreamweaver on most Start menus. 2. In the property inspector, change the canvas color to #FFFF33 (a yellow). This will be the banner portion of the example (the part that says Cracko the Clown ). Most designers call this location on a Web page the banner or page header. The Getting Started with Fireworks documentation (PDF form) is the best overview of the Fireworks interface: upport/documentatio n/en/fire works/ There s also a fairly lengthy but excellent Web-based overview of Fireworks basics by Macromedia at: upport/fireworks/workflow/fw mx_modeless_editing/ 3. Next, pick the text tool (the A shaped icon under Vector tools palette) and type a funny title for your site. 4. Add a black border to your banner image by selecting the rectangle tool (the square icon under Vector palette). You can change the font style and color in the property inspector before you type the text or after. The font used in the example is Kids, red, size 40 & 20. Before you draw the shape, in the property inspector, change the color (paint bucket icon) to transparent (white square with red diagonal line), and set the border color (pencil icon) to black, 3 pixels. 2
5. Save your file as banner.png 6. Convert your banner.png file into a Web-ready graphic 7. Create a New Fireworks file, dimensions 150 W x 100 H, and a white background. Draw your shape by placing the cursor in the upper left corner and then dragging across the canvas. Don t worry about getting it exact, because you can go to the property inspector and type the exact dimensions (you want 647 x 96). You can also select the square and adjust the location on the canvas with your arrow keys. NOTE: png (short for Portable Network Graphic) files cannot be viewed on the Web. This is the name of the Fireworks source file. Having a png file enables you to continually go back to the source file and make changes. To be viewed on the Web, you ll have to change your file into a.gif or jpg file by exporting from the source file. With the banner.png file open in Fireworks, go to File > Export Preview... The Export Preview options that appear are all for optimizing your graphic. Bigger image files take longer to download and optimization is the process of trimming file size from graphics. This process is complicated, so basically make sure your format option says gif and then click the export button. Then save the gif file into your public_html folder. Next, you need to create your page s logo, which is generally the space in the upper-left corner of the page. The Cracko example uses the small picture of Cracko from the characters page. Macromedia Fireworks tutorial on exporting: upport/fireworks/export/fw_ex port_vs_sav/ 3
8. Import your character s small picture into your logo file by selecting File > Import 9. Re-size/re-design your picture to fill the canvas size of the logo you re creating. 10. Save your file as logo.png From the characters page, save your character s small picture to your public_html folder (right mouse/save picture as...). Once you select your character s file, you will see a picture corner icon appear. Move that picture corner to a side of the canvas and leftmouse click. The picture should appear. You can move the picture around the canvas. The small character pictures are only 120 pixels wide, but the logo canvas is 150 pixels. To blend the picture into the background, go to Modify > Canvas > Image Color. Next, select the Custom option and then click on the small arrow in the lower-right corner of the color chooser square. A little eye -dropper should appear. Drag the eyedropper to the background of the character picture and leftmouse click, then click okay. This should make the canvas background the same color as the background color of the character image. 11. Convert the logo file into a logo.gif file. 12. Create a New Fireworks file, dimensions 150 W x 400 H, background color #FFFF33 13. Create a rectangle 150 pixels wide and 35 pixels high, with a transparent background and a 1 pixel wide black border. Repeat Step 6, saving the file in your public_html folder. Now you re creating the leftside navigation bar of the example. You re making your first graphic button. Set these attributes in the property inspector of the rectangle before inserting the rectangle. 4
14. Make 4 more rectangle/buttons. 15. Finish the navigation bar s bottom. Select the rectangle with the pointer tool (black arrow) and copy and paste the rectangle. Then, use your down arrow key to move the copied rectangle below the first rectangle. Repeat this 3 more times until you have 5 rectangles stacked on top of each other. Paste and move the 150 x 35 rectangle one more time, but this time change the final rectangle s dimensions to 150 x 230. 16. Add text to your buttons. Select the text tool and type the words Home, Photos, Rates, Contact, Links into the buttons. Maintain consistency and save yourself some work by copying, pasting, and modifying the first text you type to the remaining buttons. 17. Save the file as navbar.png, then export the file as navbar.gif. 18. Open a New file in Dreamweaver and save it as lab3.html. 19. Insert a 2 column, 2 row table, 800 pixels wide, cell padding=5, cell spacing=0, border=0. Now, you ll assemble the graphics you created in Fireworks using Dreamweaver You re using a fixed width table to layout your Web page. The width is set at 800 pixels wide because according to Counter.com, 87% of Internet users have a screen resolution of at least 800 x 600 pixels wide. Remember, you always want to design pages that conform to what most people are using, in terms of browser type and browser resolution. See the Counter.com s January statistics: http://www.thecounter.com/ stats/2004/january/res.php 20. Change the cell dimensions of your table. Upper-left = 150 x 100 Upper-right = 650 x 100 Lower-left = 150 x 400 Lower-right = 650 x 100. Also, make sure vertical alignment ( vert ) is set to top for both bottom cells. NOTE: Lynch and Horton, the authors of Web Style Guide, recommend dimensions of 760 x 410 as a safe viewing area for screen resolutions of 800 x 600. http://www.webstyleguide.c om/page/dimensions.html 5
21. In the upper-left cell, insert your logo.gif image. 22. In your upper-right cell, insert your banner.gif image. 23. In the lower-left cell, insert the navbar.gif image. Save your page and preview it (F12) in the browser at this point. 24. Add links to the navbar To make the navbar work, you need to add what s called an image map, or linked hot spots to the image. Click on the navbar image and look at the property inspector. You should see some Map options, if not click on the expander arrow at the bottom far right of property inspector. Here s an easy tutorial on image maps: http://www.wmich.edu/imi/tec hnology/dreamweaver/advanc ed/image-map.html Here s another one: http://wonders.eburg.wednet.e du/wondersresources/crimag e.htm Click on the rectangle hot spot tool (blue square) and draw a rectangle over the home button of the navbar. When you re done, you ll get the hotspot properties, where you should add a link ( index.html ) and some alt text ( link to home ). Repeat this process for a couple more of the buttons, then save and preview. The buttons on your navbar should now work like links in the browser (i.e., you should see the little hand cursor). 6
25. Add text and a graphic to the content (lower-right cell) portion of your page. 26. Wrap your text around your image in the lower-right cell. 27. Add alt text to all of your images. 28. Check that the file works on the Internet and e-mail the URL of your finished lab #3 to Dr. J. Type 150-200 words of text into the lower-right cell (and make sure the cell vertical alignment is set to top, not default ). Next, insert a picture of your character pulled from the Just the Funny Web site (not the small picture). These should be jpg files, which have a higher resolution and are used mostly for photographs. Select the picture, change the alignment ( align in property inspector you might need to expand property inspector) to right, then drag the picture to the front of the text. This should wrap the text around the image. When wrapping images, you can add space between the image and text by setting the V Space and H Space properties. In Dreamweaver, click on each image, including the logo, banner, navbar, and character picture, and add alt text that explains each visual to users who are visually impaired or otherwise viewing your site as textonly. Make sure your lab3.html and all image files are in your public_html file. Check for broken images Make sure the image map in the navbar works (i.e., has working links to other pages, but don t actually need the other pages) Link to Just the Funny characters page: http://www.justthefunny.com/ characters.html For more on setting image alignment properties, see: upport/dreamweaver/assets/ins ert_images/insert_images04.ht ml For adding space around images: upport/dreamweaver/assets/ins ert_images/insert_images05.ht ml See upport/dreamweaver/assets/ins ert_images/insert_images08.ht ml 7