Web Technologies

1. Web Technologies Designing Web Site Layout Using a Bitmap & Vector Graphic Editor

2. 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.

3. 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.

4. Page Design Concepts • Proximity Example Title Information Information Title Information Title Information Information Title Information

5. 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)

6. 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.

7. 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.

8. 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.

9. 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.

10. 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.

11. 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.

12. Image Maps • Using the image map tool, select the first hotspot area on your image. • The home section was selected as the first hotspot.

13. 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.

14. 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.

15. 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.

16. 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.

17. Slicing the Image • The content area was selected so it can be removed from the image and replaced with text.

18. 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.

19. 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.

20. 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.

21. 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.

22. 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.

23. 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.