Creating Web Pages

Chapter 5

Learn how to…

• Identify Web page creation strategies.

• Define HTML Web page elements.

• Describe the principles of good screen design.

• Analyze the layout of a Web page.

Adopting a Web Page Creation Strategy

Web Page Creation

• There are four ways to create a Web page:– Text editor– HTML editor– Save As option to convert word-processed

documents into Web pages.– WYSIWYG (What You See Is What

You Get) editor

Text Editors

• You can use a plaintext editor to create HTML Web pages since HTML is a textual encoding language.

– Notepad is Window’s built-in text editor.

– Wordpad is also Window’s built-in text editor, but is more powerful.

HTML Editors

• Hypertext Markup Language (HTML) consists of text and special tags that mark up the text or define how it should appear.

• An editor that allows you to work directly with HTML tags is called an HTML editor.

HomeSite

• HomeSite is a popular HTML editor created by Macromedia.

• Macromedia offers a 30-day free trial at www.macromedia.com/homesite

HomeSite

BBEdit

• Bare Bones Edit (BBEdit) is the most popular Macintosh HTML editor.– For a demo version,

visit www.barebones.com/products/bbedit

HTML Translators

• An HTML translator is a tool that can convert an existing document into the HTML format.– Microsoft Word, Excel, Access, and

PowerPoint– Use the File | Save As Web Page option

WYSIWIG Editors

• WYSIWYG stands for what you see is what you get.

• Using WYSIWYG editors, your page will look exactly as it will on the Web.

• WYSIWYG editors include:– Dreamweaver

• For a free trial version, visit www.macromedia.com/dreamweaver

– FrontPage• For a free trial version, visit www.microsoft.com/frontpage

– Netscape Composer comes with Netscape.

Dreamweaver

FrontPage

Netscape Composer

Defining the Elements of Web Page Design

Elements in Web Pages

• Backgrounds• Bookmarks• Frames• Headings• Horizontal rules• Images

• Links• Lists• Paragraphs• Special characters• Tables

HTML Headings

• Heading styles are numbered H1 through H6.

Paragraphs

• Paragraphs consist of plaintext that wraps automatically at the right margin and adapts to changes in window size.

Horizontal Rules

• A horizontal rule is used to create a divider between sections of a Web page.

Lists

• Lists can be ordered or unordered.

• In an ordered list, the items are numbered automatically.

• In an unordered list, the items are bulleted.

Images

• Images enhance the visual appeal of the Web page.

Backgrounds

• Backgrounds can be filled with a solid color, or you can tile a bitmap into the background to create a textured appearance.

• Choose a background that does not detract from the readability of the text.

Bookmarks

• A bookmark is a named anchor to which you can link a hot word or menu item so users can jump around to different places within a Web page.

Links

• Links can be textual or pictorial.

• Any word or picture on the screen can be linked to any resource on the Web.

• Most links connect you to other Web pages or to bookmarks on the current Web page.

Special Characters

• Web pages can contain special symbols such as the Greek characters used in scientific notation, as well as mathematical functions, operators, delimiters, accents, arrows, and pointers.

Tables

• The table is a way of dividing the screen into rectangular regions into which you can lay out text and graphics on a Web page.

• Text flows inside the rectangles of the table, creating a columnar appearance much like the columns of text that appear in printed newspapers.

Tables

Frames

• Frame refers to the border that appears around the windows on your screen.

• You can interact with the information in the windows independently.

• The collection of these inner windows is called a frameset.

Frames

Understanding Screen Design Principles

Layout

• The relationship among HTML elements on the screen is called layout.

• Plan a Web page layout so your content is presented with good balance.

• Think of dividing the screen into regions, of which some will be pictorial, with others consisting of blocks of text.

Layout

Layout

Layout

Font Selection

• Most Web browsers support the fonts shown at right.

• If no font is specified, the default font is displayed.

Proportional Fonts

• Proportional fonts (more space is used for a wide letter like m than a narrow letter like i) are more readable.

• Courier is non-proportional and can be used to make columns line up.

Serifs

• Serifs are decorative lines at the ends of the letters.

• Fonts with serifs tend to cause your eyes to flow with the text better.

• However, fonts without serifs are better to use for headlines or for small print.

Text Sizing

• Text size is measured in points (1/72nd of an inch).

• Several point sizes are shown on the right.

Colors

• Certain combinations of foreground and background colors work better together than others.

Tiled Backgrounds

• A tiled background is a graphical effect created when a bitmap smaller than the screen is drawn repeatedly up, down, and across the screen until the entire screen surface has been covered.

• Tiles should be seamless, meaning you cannot perceive or detect the edges of the bitmap.

Tiled Backgrounds

Navigational Icons

• Navigational icons can be used to help the user navigate your Web site.– Show in the same region on the page.– Put them in a logical order.

Scrolling

• If the document is long, navigational icons should be provided periodically.

• In long documents, sections should be divided by horizontal rules.

• The front page of a Web site should be short.

Usability

• The Web pages should be easy to use.– Navigational buttons and hypertext should be

added to clarify their meaning.– Icon navigation is more effective than words.

Consistency

• Web pages should be simple.

• A common look and feel should be adopted.

Analyzing the Layout of a Web Page Resume

Analysis of Layout