North Kitsap High School Teen Aware Lesson Plans:

Teen Media Campaign Goals

Newsletter Design

Introducing Teen Media Campaign Project

Photographic Tips and Techniques

Steps of a Media Campaign

Basic Concepts of Web Page Design
Print Ad Campaign Project Television Production Tips

Print Design Checklist

 

Basic Concepts of Web Page Design

What makes the internet significant is not just its collection of individual pages,
but the links and relationships between those pages.

WHAT IS A WEB SITE?

A web site is a group of related pages that reside together on a Web server. When you edit your Web site on your computer with DreamWeaver or another HTML editor, your site exists as a group of Web pages inside a folder on a volume mounted on your computer. The site folder can contain images and subfolders containing more folders, images, and Web pages.

You can prepare and maintain a site on a computer away from the Web server, such as on your home computer or laptop, and then upload, or send a copy of the site to the Web server where it will be published electronically to the world. If you have file access to the Web server, you can work on a site directly on the server

CREATING WEB PAGES VISUALLY

Pages on the World Wide Web are created using Hypertext Markup Language (HTML) or other scripting languages.You can learn the actual HTML codes that format the text and graphics on a page or you can use an application such as Macromedia DreamWeaver or Microsoft Frontpage which lets you create pages without typing any codes. You can format text by choosing formats from menus, and you can import, resize, and reposition graphics on the page simply by dragging them.

If you want to, you can enter custom HTML code into these programs when, for example, you want to add a feature or special effect not directly supported by the program.

UNDERSTANDING WEB PAGE DESIGN ISSUES

Your options for page design are much different for a Web page than for a printed page. You'll need to get to know a bi about the capabilities of HTML. Even though you do not have to enter HTML code to create a Web page, the capabilities of HTML determine what you are able to present on a Web page.

Depending on the kind of pages you want to design, HTML may expand or limit your design options. The following is an overview of the differences between designing for the printed page and for a World Wide Web page.

Layout considerations

HTML is primarily a set of tags for a sequence of text and graphics, with hypertext links. It was not designed as a full page-description language. An HTML page is essentially one column of continuous text with graphics that flow along with the text, as if they were text characters themselves. This text-stream model limits control over page layout. For example, in HTML version 2.0, you cannot set up layouts that use multiple columns, layered text and graphics, or rotated text.

You cannot control the size of the page and the width of the text column, because the page proportions and line breaks can vary depending on the size of the monitor or window in which the page is viewed, and with the size of the font the reader chooses in a Web browser.

However, as a rough guideline, you should design for the line length produced by a Web browser using a default font on a 640x480-pixel screen.

Because graphics are part of the text stream in HTML, you cannot specify a precise horizontal and vertical position for a graphic. For example, if you position a graphic at the bottom right of a page as it appears on your monitor and a reader decides to make the window narrower, the graphic will probably move to the next line down and may end up on the left the page

There are other scripting languages such as XML, JAVA and Javascript which allow greater control.

Typographical considerations

Because each user can set their own type preferences in their browsers, you cannot set type specifications that affect typographical density using HTML. Line breaks, letter spacing, and word spacing are completely determined by the size of the window and the font settings in a Web browser. In addition, the following type characteristics are either completely controlled or not supported by Web browsers and cannot be specified from within or imported from other applications:

  • Font, type size, and leading
  • Font width
  • Tracking
  • Strikethru, outline, shadow, reverse, superscript, and subscript type styles
  • Tab positions
  • Spacing before or after a paragraph

If you want to preserve the typography in a short passage of text, such as a company logo, create the text in an image-processing program and import it as an image. However, text saved as an image takes much longer to download than plain text.

Structuring a page around HTML formats

 

Although the constraints of HTML may be limiting to a page designer, they are intended as advantages for online delivery to the reader. The goal of HTML is to make Web pages as readable as possible on a wide variety of computer systems and monitor sizes. The approach is to specify the informational structure of a page separately from its appearance. The page author creates the structure, and the reader specifies the appearance.

HTML structures information using named formats. You apply formats based on the function of a particular piece of text, such as a heading, a regular paragraph, or a list. HTML formats are similar to the named styles in many word-processing programs in that the author can change the appearance of text by applying them. However, the appearance of a format might also be changed by a person reading a Web page with a browser.

The formats in HTML are built so that the functional organization of the page is preserved even if a reader changes the appearance of a format.

Preserving a graphical layout on the Web

 

If preserving a sophisticated graphic identity or page layout is important, consider creating some of your Web pages using tables, or Fireworks, Flash, Dreamweaver or as Adobe Acrobat Portable Document Format (PDF) files. PDF files preserve the layout and typographical characteristics that are not preserved by HTML, and can include hypertext links between pages and to the World Wide Web.

If you use these programs to create pages, your readers may have to download plugins or upgrade their browsers to see your page properly. It is best to include links to text versions of all graphical pages.

If you include PDF files, you should provide a link to the free Adobe Acrobat Reader application, required to view PDF files. Acrobat Reader can be configured as a helper application for browsers, interpreting the PDF format for browsers that do not support it directly. Acrobat Reader runs on Macintosh, Windows, MS-DOS, and some UNIX'9 systems. For more information about PDF files and Adobe Acrobat, see the Adobe Web site at http://www.adobe.com.

WEB LINKS

 

Links are one of the most significant differences between printed pages and Web pages. Web pages can contain hypertext links to other Web pages or to other parts of the same page. When you click a link, the Web browser takes you to the page set as a destination for the link. Links appear as specially marked text or images on the page.

When you design a Web site, links allow you to create nonsequential arrangements of pages. Instead of having one page follow another as in a printed book, several links may be sprinkled throughout each page, with each link leading directly to another page containing links to even more pages. You can link pages into the most appropriate structure for the information you are conveying.

Links can lead to other pages within your site or to pages on any other Web server in the world, giving your readers access to additional information related to the content you are presenting.

Building A Web Site

 

Planning is important and can save you much time and trouble later. A Web site is dependent on both local and network hardware and software.

You should begin by knowing where your Web server is, and how you will be expected to deliver the files to it for publishing. If you want to use image maps, you must know what kind of server will deliver your pages before you begin designing.

A Web server is a computer equipped with software that can broadcast Web pages over the Internet, making the pages available to anyone who connects to the Web server's address. You may have access to a Web server in any of the following ways:

• Your own computer can be a Web server if it has the proper software and a direct IP connection to the Internet, but running a Web server involves a great deal of technical and administrative overhead. Most individuals and small companies avoid this labor-intensive option and look for someone else to provide Web access to them.

• You can arrange for an Internet Service Provider (ISP) to publish your Web pages for you. An ISP maintains their own server and charges a fee to publish your Web pages. They can also provide other kinds of Internet access such as e-mail and Usenet newsgroups.

• You may work for a company with its own direct Internet connection. Some companies allow employees to publish personal Web pages, but many limit personal Web pages to be visible only within the company. Contact your company's Web-server administrator, or Webmaster, for more information.

A Web server can be on any platform, such as Macintosh, UNIX, or Windows. The server platform and location will determine how you will be able to transfer your pages to it.

If you are not operating the Web server yourself, talk with the Webmaster to determine how the files are to be delivered to the server. For image maps, you will need to ask what kind of server it is and how to set up image maps and forms on the server. Once you know this, you can begin creating pages.

Sketch the page layouts and site links

 

Before you begin producing Web pages, you need to have a basic idea of how your pages will look and how they will link together.

For each page, draw a rough sketch, setting up areas for text and images. Decide where you will place links and what elements you'll provide for navigating among the pages.

For the site as a whole, sketch out the relationships between the pages with a diagram showing how pages link to each other and to pages outside your site.

It is also a good idea to come up with a logical structure for the names of the files making up your site.

 

Organize files and folders on your computer

For a Web site to display properly over the internet, all page files and all of the images used on the pages must be present on the Web server. Therefore, you should ensure that when you upload your site from your computer to the Web server, all the site files transfer together. You can keep this process simple by setting up the folders you'll use to store your pages and images before you begin creating pages.

Start by creating a folder on your computer that will hold your entire Web site. This is known as the site's local rootfolder. Create and organize folders that reflect the hierarchy you set up when you sketched out the site plan. As you create the new folders, keep them all inside the root folder.

Set up a default folder to contain all images.

Layout your pages

 

Create pages in DreamWeaver or another application, following the layout sketches you made. Make sure to optimize graphics to ensure that the load quickly.

Add links

Following the plan you sketched, add links between pages, and then test the links in a browser.

The Preview mode in DreamWeaver or FrontPage can test links between the pages within your site, but to test external links, you must load the page in a browser connected to the World Wide Web

Test links within your Web site

Before you upload pages to the Web server, make sure there aren't any broken links on your pages DreamWeaver can find and correct broken links within a site quickly and automatically.

Upload your pages to the file server

 

When you have completed and tested your Web pages, upload them to the Web server. The way you upload them depends on the type of server you are using and your connection to it.

Test the pages by connecting to them from the Web server. If everything works, your pages are now available to anyone in the world with a connected Web browser!

Source: Macromedia DreamWeaver User Manual

Back to top

Back to main North Kitsap Teen Aware page

© Theresa Aubin Ahrens, North Kitsap High School, 2001