HTML & CSS Book (English)

Step 2 Preparing Page Layout

Step 2 Preparing Page Layout

A page layout is the design of your Web page. Using a wireframe drawing is a common way to illustrate the page layout. It is a simple visual guide to show you what a Web page would look like, without using any graphics or text. A wireframe may contain the following page elements: logo, banner, navigation, content, footer and whitespace.

Before drawing the wireframe of your Web page, you have to decide the parts of your page. Our Web page will contain a banner, main navigation, content, and footer parts. There is an unlimited amount of ways to place them on a page. We are going to place out page element like in the picture X.3. Some parts will be common in all pages. The banner, navigation and footer will be the same in all pages. Only content will be different. You must decide the width of the page (here 900 pixels) and the general appearance of each part.

Picture X.3: Wireframe of the page.

Practice: Wireframing

1. Generate some alternatives page layouts for our project.

2. Open several Web sites on the Internet and draw their wireframes.

Picture X.4: The wireframe of the site WikiPedia.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *