Download Intro to Web Site Design and Microsoft FrontPage

Introduction to Web Design and
FrontPage
•
•
•
•
•
•
•
•
•
Web design software
Web design issues
Preservation of format
Fonts
Web site performance
Web site content
Web site issues
Related software
Web design tools
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
1
Web design software options
• General word
processing software
(e.g., MS Word)
• Low-end web editors
• Export from other
programs—e.g.,
– MS PowerPoint
– Databases
MKTG 476
• Higher-end web design
software—e.g.,
– DreamWeaver
• Highly flexible
• More difficult to use
– MS FrontPage
• Easier to use
• Automatic standard
formatting
• By default somewhat
less sophisticated
– Adobe GoLive
• Highly integrated with
Acrobat, PhotoShop,
and other Adobe
products
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
2
Editing Web Sites
• WYSIWYG (“What You See Is What You
Get”
• Actual HTML code
– May be most efficient way to find a
problem
– Can insert “code” received elsewhere
– Used to edit non-visible parts of content
(e.g, “meta tags”)
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
3
Tools Used in Conjunction with Web
Design Software
•
•
•
•
Image editing tools (e.g., PhotoShop)
Animation tools (e.g., Java, Flash)
Databases
Adobe Acrobat (PDF files for preserved
format)
• Visual Basic
• Script languages
– Java
– CGI
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
4
General Web Design Software (e.g.,
DreamWeaver or FrontPage)
• Basically sophisticated word processing
program intended for creating web sites
• Text and image editing optimized for online
display
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
5
Issues in Web Site Design
• Speed and bandwidth
use vs.
– Reliability
– Features
• Video streaming
• Games/animation
– Aesthetics—e.g.,
• Graphics quality
(resolution)
• Letter text vs. text
as graphic image
MKTG 476
• Consistency of
appearance across
– Browser software,
settings
– Computer systems
(font availability,
display mode)
• Re-use of “objects”
• Security issues
• Effort vs. quality
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
6
“Heavy” Users of Bandwidth
• High resolution pictures
– Lower resolution can often be used on
screen than would be needed on paper
• Other graphics
• Video streaming (buffering required)
• Audio (buffering required)
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
7
Web Site Content Page Types
• “Index” page
• Information
– Organizational
– Product description
• Sales
• After service support
– FAQ
• Purchase tools
– Shopping cart
– Inventory information
– Shipping calculator
– Customer account
– Check-out
– Order tracking
MKTG 476
• Graphics
– Simple images
– Video “streaming”
• Recorded
• “Live” camera
• Databases
• Games
• Group forums
– “Chat”
– User forums
• Feedback or other “forms”
• Links
• Sound/entertainment (e.g.,
Media Player, Real Player)
• Voice chat
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
8
Potential Problems
• Font substitution or alteration
• Displacement of
– Text
– Graphics
• Malfunctions
– Animation
– Database interface
– Other transactions
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
9
Fonts
• Monospace (e.g.,
Courier) vs.
proportionally spaced
(e.g., Arial, Times
Roman)
• Font sizes
– Measured in
“Points” (average
length and height of
a letter)
– All fonts with the
same “size” are not
equally large!
(Times Roman is
more “efficient”)
MKTG 476
• Serif vs. sans-serif
– Serif fonts have
sharp edges (e.g.,
Times Roman)
• Easier to read for
longer
documents—less
eye strain
– Sans-serif lack
sharp edges
• Generally look
more pleasant
• Used for
headlines
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
10
Some “Standard Fonts”
• Courier (not used much in contemporary
documents, but has been found effective in
direct mail)—looks like a typewriter
• Times Roman—default on many programs
• Arial (Helvetica)—common sans-serif font
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
11
Fonts Usually Standard in Windows
(But Not Necessarily Macintosh)
• Comic Sans
• Letter gothic (monospace)
• Trebuchet (proportional, hybrid serif/sansserif)
• Book Antiqua (proportional, serif)
• Century gothic (proportional, sans-serif)
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
12
Preserving Formatting
• Use of “standard” fonts
• Testing across
– Multiple browsers
– Computer types and configurations
• Use of invisible “tables”
• Use of Adobe Acrobat (PDF) files
– Good for preserving document formatting
while avoiding large task of reformatting
– May require the user’s browser to open
Adobe Acrobat (resulting in delay)
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
13
Web Site Structure
• Index (“root”) file
• Subdirectory files (e.g.,
http://www.larsperner.com/mktg476 takes the surfer
to the index file in the subdirectory “/mktg476)
• In UNIX, directory slashes are forward slashes
rather than the Windows backslash (\)
• Other files in the “root directory” (e.g.,
http://www.larsperner.com/past_courses.htm goes
to the file “past_courses” in the root directory).
These files addresses usually contain an explicit
suffix (e.g., .htm, .html, .cgi)
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
14
Web Site Structure II
• Other files that may be found on web
servers
– Server “extensions” (files used to allow
for features not available in simple HTM)
– Graphical files
– Animation files
– “Script” files
• Files created by web servers
– “Log,” visitor, or “transaction” files
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
15
Secure vs. Non-Secure Files
• Files found in http:// domain addresses are
usually NOT secured against interception
• Files found in https:// domain addresses are
usually encrypted
• Secure files require special setup of server
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
16
Web Site Implementation
• Web site hosting
– Many choices available
– Issues
• Features offered
(e.g., extensions,
video streaming,
support, e-mail,
database support,
mailing lists)
• Domains,
subdomains allowed
• Storage space
allowed
• Bandwidth transfer
included
– 500 MB space w/ 10MB
monthly transfer
available as low as
INTRO TO WEB SITE DESIGN $48.00/year
Lars Perner, Instructor 17
• Domain name registration
– Usually $8-50 per year
– Trademark issues and
disputes
– Domain names
available
– Value by type of domain
• Premium: .com, .net
• Valuable: .org, .tv
• Less valuable: .info,
.us, .biz
– Country regulations
– Some registrars:
usacheapdomains.com,
directNIC.com
MKTG 476
Some Tools
•
•
•
•
Templates
Style sheets
Objects
Scripts
– Java, cgi
• Links to other programs
– Databases
– Visual Basic
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
18
Starting a New FrontPage Web Site
• Enter FrontPage
• On the right side of the screen, click on
“Navigation”
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
19
Starting a New FrontPage Web Site,
Step 2
• Select File, new, page
or web
• On the right side of the
page, click on “Empty
Web.”
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
20
Starting a New FrontPage Web Site,
Step 3
• Enter an appropriate file path and name
(e.g., a:\companyweb )
• Double-click on “One page web”
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
21
Starting a New FrontPage Web Site,
Step 4
• On the left side, double-click on “Navigation”
again
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
22
Starting a New FrontPage Web Site,
Step 5
• Single-click on the icon near the center of the
screen
• Single-click on the default name “index.htm”
and type in a desired name for the site (e.g.,
“Profit Co., Inc.”).
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
23
Starting a New FrontPage Web Site,
Step 6
• Single-click on the icon again to make sure it is
highlighted
• On the top screen menu, click on the “dog earned
page” icon to create an additional page “below.
Click again as needed to create the desired number
of pages.
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
24
Starting a New FrontPage Web Site,
Step 7
• If you clicked three times, you should have
something like this:
• You can now change the descriptions of the
pages as previously described to get something
like this
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
25
Starting a New FrontPage Web Site,
Step 8
• By default, FrontPage
assigns meaningless
names like “New Page
3” to pages created
this way. To assign a
more meaningful
name, double click
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
26
Starting a New FrontPage Web Site,
Step 9
• Single click on one of the default meaningless
names and type in a more meaningful one
• For example, you could rename this file to
“products.htm.” Be sure to retain the same
extension (in this case .htm) for the filename.
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
27
Starting a New FrontPage Web Site,
Step 10
• To work with a file, click on the “Navigation”
icon on the left and then double-click on the
icon of the file you want to edit.
• Within the file itself, you can edit much like
you would do with a word processor. Over
the next three sessions, we will study
special techniques to enhance the content.
MKTG 476
INTRO TO WEB SITE DESIGN
Lars Perner, Instructor
28