it: web technologies: web animation 1 copyright © texas education agency, 2013. all rights...
Post on 17-Jan-2016
214 Views
Preview:
TRANSCRIPT
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
IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, 2013. 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, 2013. All rights reserved.
Page Design Concepts
Proximity Example
4
Title
Information
Information
Title
Information
Title Information Information
Title Information
IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, 2013. 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, 2013. 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, 2013. 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, 2013. 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, 2013. 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, 2013. 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, 2013. 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, 2013. 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, 2013. 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, 2013. 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, 2013. 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, 2013. 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, 2013. All rights reserved.
Slicing the Image
17
IT: Web Technologies: Web Animation 1 Copyright © Texas Education Agency, 2013. 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, 2013. 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, 2013. 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, 2013. 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, 2013. 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, 2013. 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, 2013. All rights reserved.
top related