Introduction to Web Page Design HTML/XHTML Bartosz Sakowicz.
Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web...
-
Upload
esther-terry -
Category
Documents
-
view
215 -
download
0
Transcript of Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web...
![Page 1: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/1.jpg)
![Page 2: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/2.jpg)
Creating Web Pages
Chapter 5
![Page 3: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/3.jpg)
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.
![Page 4: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/4.jpg)
Adopting a Web Page Creation Strategy
![Page 5: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/5.jpg)
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
![Page 6: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/6.jpg)
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.
![Page 7: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/7.jpg)
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.
![Page 8: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/8.jpg)
HomeSite
• HomeSite is a popular HTML editor created by Macromedia.
• Macromedia offers a 30-day free trial at www.macromedia.com/homesite
![Page 9: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/9.jpg)
HomeSite
![Page 10: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/10.jpg)
BBEdit
• Bare Bones Edit (BBEdit) is the most popular Macintosh HTML editor.– For a demo version,
visit www.barebones.com/products/bbedit
![Page 11: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/11.jpg)
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
![Page 12: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/12.jpg)
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.
![Page 13: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/13.jpg)
Dreamweaver
![Page 14: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/14.jpg)
FrontPage
![Page 15: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/15.jpg)
Netscape Composer
![Page 16: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/16.jpg)
Defining the Elements of Web Page Design
![Page 17: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/17.jpg)
Elements in Web Pages
• Backgrounds• Bookmarks• Frames• Headings• Horizontal rules• Images
• Links• Lists• Paragraphs• Special characters• Tables
![Page 18: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/18.jpg)
HTML Headings
• Heading styles are numbered H1 through H6.
![Page 19: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/19.jpg)
Paragraphs
• Paragraphs consist of plaintext that wraps automatically at the right margin and adapts to changes in window size.
![Page 20: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/20.jpg)
Horizontal Rules
• A horizontal rule is used to create a divider between sections of a Web page.
![Page 21: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/21.jpg)
Lists
• Lists can be ordered or unordered.
• In an ordered list, the items are numbered automatically.
• In an unordered list, the items are bulleted.
![Page 22: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/22.jpg)
Images
• Images enhance the visual appeal of the Web page.
![Page 23: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/23.jpg)
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.
![Page 24: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/24.jpg)
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.
![Page 25: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/25.jpg)
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.
![Page 26: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/26.jpg)
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.
![Page 27: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/27.jpg)
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.
![Page 28: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/28.jpg)
Tables
![Page 29: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/29.jpg)
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.
![Page 30: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/30.jpg)
Frames
![Page 31: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/31.jpg)
Understanding Screen Design Principles
![Page 32: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/32.jpg)
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.
![Page 33: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/33.jpg)
Layout
![Page 34: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/34.jpg)
Layout
![Page 35: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/35.jpg)
Layout
![Page 36: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/36.jpg)
Font Selection
• Most Web browsers support the fonts shown at right.
• If no font is specified, the default font is displayed.
![Page 37: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/37.jpg)
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.
![Page 38: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/38.jpg)
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.
![Page 39: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/39.jpg)
Text Sizing
• Text size is measured in points (1/72nd of an inch).
• Several point sizes are shown on the right.
![Page 40: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/40.jpg)
Colors
• Certain combinations of foreground and background colors work better together than others.
![Page 41: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/41.jpg)
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.
![Page 42: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/42.jpg)
Tiled Backgrounds
![Page 43: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/43.jpg)
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.
![Page 44: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/44.jpg)
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.
![Page 45: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/45.jpg)
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.
![Page 46: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/46.jpg)
Consistency
• Web pages should be simple.
• A common look and feel should be adopted.
![Page 47: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/47.jpg)
Analyzing the Layout of a Web Page Resume
![Page 48: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/48.jpg)
Analysis of Layout
![Page 49: Creating Web Pages Chapter 5 Learn how to… Identify Web page creation strategies. Define HTML Web page elements. Describe the principles of good screen.](https://reader030.fdocuments.net/reader030/viewer/2022032806/56649efd5503460f94c11ab0/html5/thumbnails/49.jpg)