1 / 23

Web Technologies

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.

Télécharger la présentation

Web Technologies

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.


Presentation Transcript

  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.

More Related