it: web technologies: web animation 1 copyright © texas education agency, 2013. all rights...

IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, 2013. 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



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



Proximity Example

4

Title

Information

Information

Title

Information

Title Information Information

Title Information



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



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



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



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


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


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


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


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


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


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


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


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


Slicing the Image

17


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



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



Your professional bitmap & vector graphic editor will create the web page with all the image slices in the folder you specify.

20


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


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


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, 2013. all rights...

Documents

web page

web animation

good page design

page design conceptsbefore

designed page

related information

paragraph text

text color