IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved. 1 Web Technologies Designing Web Site Layout Using a Bitmap & Vector Graphic Editor

Page Design Concepts Before designing a webpage layout, you must understand what makes a good page design. A pages appearance is sometimes called aesthetics. Aesthetics refers to a page’s visual appearance. A well designed page should be appealing to the visitor. 2 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Page Design Concepts Proximity Refers to the relationship among the various components on a page. Related objects should be placed closer to each other. There should be some distance between unrelated items. 3 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Page Design Concepts Proximity Example 4 Title Information Title Information Title Information Title Information IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Page Design Concepts Alignment Refers to the positioning of text and objects on a web page. Alignment Options Left Right Center Justified (aligned on both left and right) 5 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Page Design Concepts Alignment Headings and Titles Generally, headings and titles can be left, right, or centered on the page. Content Text and Paragraphs The main content text and paragraph text should be left or justified. It is generally difficult and unnatural to read paragraph text that is centered or right aligned. 6 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Page Design Concepts Repetition Repetition refers to the consistency of your design. All the text categories (headings, content, etc) should have the same style. The same color scheme should be carried out through your entire site. The same layout should be used on each page of your site. 7 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Page Design Concepts Contrast Contrast refers to the degree of difference in the various objects on your web page. You want to make sure your visitor can distinguish each element of your web page. Objects too similar may blend together. If the text color is too similar to the background, the visitor may not be able to see it. 8 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Graphic Editors Designers use professional graphic editors to design a webpage in graphic format. The image can be sliced up into different parts. Graphic editors can create navigation You can create image map navigation on your image. 9 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Graphical Layout Advantages You can design more creative layouts. The permanent fonts can be embedded onto the design so they will show even if the visitor does not have them installed. Disadvantages The graphic design creates larger web page files. Difficult to update & change the design. 10 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Image Maps The image map tool is at the bottom of the toolbar. The image map tool will allow you to identify each hot spot and specify where it should take the visitors when they click it. 11 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Image Maps Using the image map tool, select the first hotspot area on your image. The home section was selected as the first hotspot. 12 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Image Maps At the bottom of the application, you can enter the properties for the hotspot. Link: page or URL where you want the link to point. Alt: A text alternative for the link. Target: Frame to target the link to. 13 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Creating the Image Map An image map is a navigation tool on a solid image. An image map contains hot spots that will take you to a specific page or location when you click on it. The sample layout contains a navigation menu on the left side. 14 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Creating the Image Map You should apply the hotspot to all the link titles on the image. All the hotspots will be indicated with the aqua color shade. 15 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Slicing the Image Once the navigation is complete, you can slice the image. The Slice Tool The slice tool will allow you to cut your image into different parts. Select the portion of the image you want to slice away. 16 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Slicing the Image 17 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved. The content area was selected so it can be removed from the image and replaced with text.

Exporting as a Web Page Your bitmap & vector graphic editor can create the webpage template for you with your graphic image assembled inside a table when you export the image. From the File menu, select Export. 18 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Exporting as a Web Page Navigate to where you want to save the page. Enter a name for the page. From the Save As type options, select HTML and Images, then click Save. 19 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Exporting as a Web Page Your professional bitmap & vector graphic editor will create the web page with all the image slices in the folder you specify. 20 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Editing the Layout When the page is opened in the browser, you will see your image just as you created it assembled into a web page. We will replace the content area image with our own content. 21 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Editing the Layout You will need your text editor to modify the layout. Open the web page in your text editor and replace the sliced image you want to remove with your content. We removed the slice, filled in the background color of the cell, and added some filler text. 22 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.

Editing the Layout You can apply additional formatting to change the text color and the background color of the document. You can also use style sheets to add more advanced formatting. 23 IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, All rights reserved.