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

HomeSite

BBEdit Bare Bones Edit (BBEdit) is the most popular Macintosh HTML editor. –For a demo version, visit /products/bbedit /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 –FrontPage For a free trial version, visit –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

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/72 nd 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