Download Chapter 9 - Pearson Higher Education

Chapter 9:
Basic Web Page Construction
Web 101
Third Edition
by Wendy G. Lehnert &
Richard L. Kopec
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Learning Objectives
• Review the basics about copyright law and the Web.
• Learn the fundamentals of Web page design.
• Learn how to use Mozilla Composer to build Web
pages.
• Learn how to add absolute URLs, relative links, mail
links, and internal links using named anchors to your
Web pages.
• Learn how to add pictures and colors to a Web page.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-2
Learning Objectives
• Find out how to use tables to format your Web
pages.
• Learn how to publish a Web page.
• Find out about browser-safe colors and valid
image file formats.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-3
Taking Charge
• Anyone with access to the Internet can post a
Web page.
• You can create a Web page with just a text
editor.
• There are Web page construction tools available
that allow you to create pages without
understanding the underlying machinery.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-4
Copyright Basics
• It’s very easy to capture content (text, images,
video/audio files) from the Web.
• These same items can just as easily be placed
onto your Web page.
• Everything you see/hear over the Internet is
copyrighted, whether it explicitly says so or
not!
• Technically speaking, you can use content from
other sources only when you have explicit
permission to do so.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-5
Copyright Basics
• Content from public domain sites is available
for use.
• Some sites grant explicit to use their content, as
long as it is not used in a commercial product.
• Most everything from a government Web site is
in the public domain.
• Always acknowledge the source of copied
material on your Web page when present.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-6
Copyright Basics
• Consult Appendix D for further information
about copyright law.
• Some material may be copylefted.
• Copyleft is used to remove typical copyright
restrictions.
• Copylefted material can be studied, used,
modified, and redistributed as long as the same
license terms apply to redistributed material.
• A license is still required to do this.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-7
Planning Your Web Page
• Think about the theme or purpose of your Web
page.
• Think about what you want to place on your
page, and the source of the material you will
use.
• Ensure that your content is consistent with your
theme.
• Then consider the organization of this content.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-8
Planning Your Web Page
• Create a storyboard.
• The storyboard shows the layout of the material
you plan to place on your Web page.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-9
Planning Your Web Page
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-10
Planning Your Web Page
• Basic Elements
–
–
–
–
Descriptive title
Include your name and contact info (e-mail)
Show the creation/modification date
Use picture to highlight and emphasize the purpose of the
page.
– Provide navigational content if multiple pages are used.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-11
Planning Your Web Page
• Design & Organization Recommendations
– Put the most interesting/important info at the top of the page.
– Keep the image files small and few. Use thumbnail image
links to full size images if there are many.
– Add alternate text to your images. Not all the Web page
visitors are sighted. The alternate text will clue them in
about the purpose of the picture.
– Use browser-safe colors. Non-standard colors may appear
differently on other systems.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-12
Planning Your Web Page
• Design & Organization Recommendations
– Use the default fonts. Specialty fonts may npt be installed
on the viewer’s computer - so an alternate font will be used,
potentially affecting the impact of your page.
– Use only a few fonts. The display may become too “busy”.
– Use a style sheet. Separate display info from content when
possible. Simplifies cosmetic changes.
– Use subtitles and headings to break up content.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-13
Planning Your Web Page
• Design & Organization Recommendations
– Use the spell checker! Most Web page editors include a
spell checker - use it!
– Preview/test your page. Nothing is more frustrating than a
Web page that is incomplete because the author failed to fix
display issues.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-14
Creating Web Pages with a
WYSIWYG Editor
• A Web page is simply a text file written in
hypertext markup language (HTML).
• Although any text editor can be used to create
one, a Web page editor greatly simplifies the
process.
• A free Web page editor named Composer is
packaged with the Mozilla/Sea Monkey Web
browsers.
• Usually it’s a good idea to set preferences first.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-15
Creating Web Pages with a
WYSIWYG Editor
• Set Composer preferences:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-16
Creating Web Pages with a
WYSIWYG Editor
• Set New Page preferences:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-17
Creating Web Pages with a
WYSIWYG Editor
• Set Toolbar preferences:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-18
Creating Web Pages with a
WYSIWYG Editor
• Use your
storyboard
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-19
Creating Web Pages with a
WYSIWYG Editor
• Create your new Web page by selecting “Composer”
from the Mozilla Window menu drop-down list
• When creating a new page, immediately title and save
it!
• This will save you some major headaches later on.
• Also - avoid using special characters (especially the
space) in your Web page file name. These characters
might cause problems later on.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-20
Creating Web Pages with a
WYSIWYG Editor
• Familiarize yourself with Composer
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-21
Creating Web Pages with a
WYSIWYG Editor
• The user interface is similar to that of a word
processor.
• Some differences
– The TAB key does not insert tabs, use the indent
tools to insert/remove tabs instead:
– Tables are generally used to create columns of text
or to precisely control the arrangement of text from
one line to the next. CSS (Chapter 10) can do this
too.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-22
Creating Web Pages with a
WYSIWYG Editor
• More differences
– The web page display in edit view may differ from
its appearance in browser view.
Use the Preview tab (at the bottom of the page) or
the Browse tool to see this.
– Older browsers may condense multiple space
characters into a single one.
– Links of various kinds can be inserted.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-23
Creating Web Pages with a
WYSIWYG Editor
• Some tools:
Inserts horizontal line
Inserts an image
Inserts a link
Inserts a named anchor
Inserts a table
Used to set alignment
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-24
Creating Web Pages with a
WYSIWYG Editor
• The best way to learn Composer’s Web page editing
tools is to use them!
• Use Composer to create a new Web page with these
items:
–
–
–
–
–
–
A Title
A Heading
Some text
A List (ordered or unordered)
A Horizontal Line
Experiment with the indent & alignment tools
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-25
Creating Web Pages with a
WYSIWYG Editor
• Links are used to make your Web page “hyper”
• There are several different kinds of links, all created
with the link tool:
– Internal (aka Named) link - used to move display to a
different place on the same page, requires a Named Anchor
– Relative link - used to change to a different page on the same
server
– Absolute link - used to change to a different page on a
different server
– Mail link - used to create a pre-addressed mail message
using Mozilla Messenger
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-26
Creating Web Pages with a
WYSIWYG Editor
• Named Anchor & Internal Link
• Create the named anchor first
• Then use the link tool, selecting this anchor
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-27
Creating Web Pages with a
WYSIWYG Editor
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-28
Creating Web Pages with a
WYSIWYG Editor
• Relative Link:
– Enter the name of the new Web page file - if it’s in
the same directory as this Web page file, otherwise
path info is needed too
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-29
Creating Web Pages with a
WYSIWYG Editor
• Suggestion: keep ALL your Web page materials
(images, sound files, HTML files, etc) in the
SAME directory/folder.
• Put these files into the folder before you insert
or create links to them.
• This will eliminate path problems later on when
you upload your page to the server.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-30
Creating Web Pages with a
WYSIWYG Editor
• Absolute Link:
– Copy the complete URL
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-31
Creating Web Pages with a
WYSIWYG Editor
• Mail Link:
– Type mailto:account@mailservername
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-32
Creating Web Pages with a
WYSIWYG Editor
• Links can also be used to display image files
and play sounds or video.
• Use short, descriptive word/phrase for your link
text.
• Use simple, descriptive names for your named
anchors.
• Name anchors must be placed before you can
select it from the drop down list to make an
internal link.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-33
Creating Web Pages with a
WYSIWYG Editor
• If creating a multiple page Web site, use relative
links to navigate between the various pages.
• All pages linked relatively must reside on the
same server.
• Use absolute links only when necessary absolute links will change if the pages are
moved to another location on the same server or
another server.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-34
Creating Web Pages with a
WYSIWYG Editor
• Links only work in browser view.
• Browse your page to make sure they work!
• Mail links may not work if the computer you
use has not been configured for e-mail,
common on public access computers.
• Always add a mail link to Web page author and
creation/modification date.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-35
Creating Web Pages with a
WYSIWYG Editor
• Acquire your image files in advance.
• Portable Network Graphics (.png) files are
recommended for drawn images.
• Can use Joint Photographic Expert Group (.jpg)
for photographs.
• Compuserve GIF (graphics interchange format)
works too, but copyrighted.
• Keep the image size as small as possible ideally less than 40 KB.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-36
Creating Web Pages with a
WYSIWYG Editor
• Put all images files in the same folder as the Web page
that displays them before placing onto the page.
• Inserted images are not actually placed into the Web
page file.
• Only the name of the file to be displayed is actually
inserted.
• When publishing your Web page, you must also
“publish” all the image files too.
• Use the Image tool to insert images.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-37
Creating Web Pages with a
WYSIWYG Editor
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-38
Creating Web Pages with a
WYSIWYG Editor
• Can use the image dialog box tabs to change
various properties of the image:
–
–
–
–
–
Alternate text (for non-sighted page visitors)
Dimensions
Wrapping/placement of adjacent text
Borders & Spacing
Link property
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-39
Creating Web Pages with a
WYSIWYG Editor
– Can custom-size dimensions - but not
recommended, may distort image
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-40
Creating Web Pages with a
WYSIWYG Editor
– Wrapping/placement of adjacent text
– Borders and Spacing
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-41
Creating Web Pages with a
WYSIWYG Editor
– Link property, converts image to a link
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-42
Creating Web Pages with a
WYSIWYG Editor
– Tables can be used to control the position of Web
page elements relative to each other.
– CSS (cascading style sheet) rules are superceding
this usage, but browser support may be incomplete.
– Tables are also used to show tabular information!
– The table dialog box can be used to adjust table or
row/column/cell parameters.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-43
Creating Web Pages with a
WYSIWYG Editor
• You can put anything inside a table data
element (a cell), even another table.
• You can create borders on your Web page.
• Tables can be used to give Web pages a margin.
• Each cell, row, or column can have it’s own
background color or pattern.
• You can extend a cell across multiple columns.
• You can extend a cell across multiple rows.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-44
Creating Web Pages with a
WYSIWYG Editor
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-45
Creating Web Pages with a
WYSIWYG Editor
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-46
Creating Web Pages with a
WYSIWYG Editor
– Can join cells across rows or down columns
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-47
Creating Web Pages with a
WYSIWYG Editor
– Can also split joined cells
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-48
Publishing Your Web Page
• In order to make your Web page visible to the
world, it must be uploaded to a Web server this is publishing.
• You must also upload any files (images, sounds,
videos) that you use on your page.
• The particular method used depends on your
Internet Service Provider (ISP) or your Web
page host service provider.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-49
Publishing Your Web Page
• To publish your page you must
– Acquire access to a Web server.
– Determine the DNS address of your Web server.
– Determine the pathname needed when you upload
files to the server.
– Upload your Web files to the Web server.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-50
Publishing Your Web Page
– Determine the URL to use to view your home page.
– Fix any file protection codes that need fixing contact your ISP for help if access to your Web page
is forbidden!
• You can upload files with an FTP client or an
HTML construction kit that has an upload
function.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-51
Image File Formats
• PNG, JPEG, and GIF are the most common
graphics formats on the Web.
• JPEG is better suited for high-resolution
photographs and complex graphics.
• GIF is better suited for line drawings and
simple graphics.
• PNG was designed to replace the GIF format
• An inline image is an image that is treated like a
single alphanumeric character.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-52
Basic Web Page Graphics
• Use the ALT attribute in the IMG tag to
describe graphic elements for users who are
visually challenged.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-53
All About Color
• There are 16,777,216 possible colors that can
be used as the background for a Web page.
• Web-safe colors are 216 colors that can be
faithfully reproduced on any computer monitor
regardless of the operating system used.
• Web pages use hexadecimal (base 16) codes to
describe colors.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-54
All About Color
• A color palette is a collection of colors.
• 8-bit and 24-bit color describe the size of the affiliated
color palette.
• An 8 bit palette contains 256 colors
• A 24 bit palette contains 16,777,216 colors.
• A 48 bit palette contains LOTS of colors!
• JPEG images use 24-bit true color.
• GIF images use 8-bit color.
• PNG supports up to 48-bit true color
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-55
Creating a Navigation Bar
• A table can be used to create a graphical
navigation bar.
• Use a general-purpose image-splitting utility
(like Splitz) to split an image into rectangular
sections.
• Insert each section into a single row table with
zero border, spacing, and padding.
• Convert each image section into a link.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-56
Background Patterns
• You can use any PNG, JPEG or GIF file as a
background for a Web page.
• The browser will place the image in the upperleft corner and will tile it left to right.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-57
Image Processing Utilities
• Different utilities exist for processing images for
different purposes.
• An image viewer displays graphics files quickly and
easily.
• Graphics editors are used to manipulate graphics files
such as photos or drawings.
• Color samplers can find the hexadecimal code of a
color in a picture.
• Screen shot utilities allow you to take a picture of a
window on your computer.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-58
A Web Site Construction Checklist
• Remember the three C’s of Web page design:
– quality Content
– reader Convenience
– artistic Composition.
• Avoid common mistakes.
• Write, view and test all Web pages before
installing them on a Web server.
• Keep Web page titles short but accurate.
• Keep download times short.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-59
A Web Site Construction Checklist
• Make your pages portable! (Use relative links!)
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
9-60