Transcript Text Editors

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