CIS 321 Data Communications & Networking

Download Report

Transcript CIS 321 Data Communications & Networking 

CIS 250
Advanced Computer Applications
Web Publishing
Web Page Development
Web Page – hypertext document you see on
the web
 Web site – a group of related web pages
 HTML – language used to build web pages
 Controls web page appearance
 Web browser software translates HTML
messages and creates text, images, and
plays sound based on those commands


Sounds, graphics, and animations are separate
files referenced by the web page
University of South Alabama - CIS 250
2
HTML
HTML tag – provides filenames, locations of
files, and instruction to browser.
 “<“ and “>” symbols are used to mark the
tag
 Speed of display of web page depends on
speed of modem, amount of traffic on network
(Internet) and how many graphics and sound
files displayed on web page

University of South Alabama - CIS 250
3
Planning Your Web Site

Begin with an outline on paper
 Test on several different browsers – some
features may not be displayed the same on all
 IE
 Netscape
 What does your server support?
 FrontPage extensions (support for feedback
pages, hit counts, etc.)
University of South Alabama - CIS 250
4
Common HTML commands
“<“ and “>” characters mark begin and end of
tag
 “/” indicates feature is being turned off


In every web doc:




<html> </html>
<head> </head>
<title> </title>
bar
begin/end of HTML cmds
begin/end of intro portion
name of page to appear in title
Not all commands require a closing tag
University of South Alabama - CIS 250
5
Basic Web Design Pointers
Keep it simple – simple design, no background
picture or simple pattern (watermark). Light
backgrounds with dark text are easier to view.
 Be consistent – common “look and feel” from
one page to another.
 Similar fonts and formats in related docs for
continuity
 View source code (HTML) of other sites you
like to incorporate into your pages.

University of South Alabama - CIS 250
6
Developing your Web Site






First, develop a general outline of what you
want your site to look like.
What is the site about?
Should be a collection of related pages –
some common overall theme or focus.
What is your target audience?
You want the viewer to “visit” longer.
Remember – a large number of graphics can
take a long time to load.
University of South Alabama - CIS 250
7
Organizing Your Site


A site map visually organizes how your site will be
navigated.
Also, think about organizing file and directory
structures (e.g. all photos/images into one folder).
Home Page
About Me
My Family
Links
My Dog
Photos
Resume
Pictures
University of South Alabama - CIS 250
8
Design Stage

Add text and images just as you do in other
applications such as MS Word.
 Pages are saved in HTML format
 Give the page a meaningful name
 Home page should usually be index.html (may
be home.html; depending on host provider)
University of South Alabama - CIS 250
9
Posting Your Site

Upload to host provider
 Usually via File Transfer Protocol (FTP)
 Depends on provider
 You’re still not done…
University of South Alabama - CIS 250
10
FrontPage 2002

Many of the same screen elements as MS
Word and other Office applications
 Title bars, menu bars, standard toolbars
 Additional screen elements
 Page title
 Views bar (page, folders, reports,
navigation…)
 Working area
University of South Alabama - CIS 250
11
Views






Page View – used when creating, editing and
formatting the content of your pages
Folders View – manage/manipulate files related to
your site
Reports View – generate reports relating to your site
Navigation View – control/view structure of site
Hyperlinks View – map of hyperlinks included in site
Tasks – tasks associated with creating and
maintaining site
University of South Alabama - CIS 250
12
Creating your Web Site

Template or blank web
 Can modify any template to custom needs
 FrontPage creates site folders and default
pages for you (home page is index.html)
 In order to link pages easily, all must be part of
a site (i.e. create site first, then pages)
 Some components will not work unless a site
is created first.
University of South Alabama - CIS 250
13
Templates

Pre-designed sites which contain common
pages for specific types of web sites
 May select empty web
 Common templates: corporate, customer
support, personal, project, discussion, team,
etc
University of South Alabama - CIS 250
14
Creating Web Pages

Each page should have a main focus/purpose
 Add text just as in Word and other MS apps
 Type directly into doc, cut and paste, or
import from another file
 Add clip art and photos to add interest
 Tools: spell checker, find and replace
University of South Alabama - CIS 250
15
Formatting Web Pages





Use themes to add a pre-designed layout with default
colors, font specifications, banners, etc.
 Apply to selected pages or to entire site
Link bars – hyperlinks to other web pages in site
 User-defined or controlled by FP navigation
structure
Add pictures – same as in Word and other apps
 Can resize, change position
Graphics lines – separate sections of page and group
pieces of information
Saving embedded objects – saves images to images
folder
University of South Alabama - CIS 250
16
Adding Links

Types of hyperlinks




Internal hyperlink – link to other pages within your
web site; allows visitor to navigate your site
Bookmark – internal hyperlink to a spot on the
same page used to redirect the viewer
 Two step process (create bookmark then
hyperlink)
External hyperlink – link to another site on the web
(external to yours)
Mail to: links – link used to evoke default email
client
University of South Alabama - CIS 250
17
Other components
Marquee – scrolling area of text or animated
message, usually used to welcome visitors to
your site
 Time/date stamp – automatically log when
page was last updated
 Included Content – displays content of a
referenced document or file
 Other – search engines, hit counters, applets,
plug-ins, etc.

University of South Alabama - CIS 250
18
Previewing, Printing, and
Publishing

Preview or open in browser
 Print from Normal view
 Publishing prepares pages and files for
posting to Web
 Floppy disk or to web server
University of South Alabama - CIS 250
19
How to make an annoying web
site







Use very small fonts
Make one word many different colors
Overuse italics and boldface
Misspell words
Use too many graphics
Use large graphics
Use annoying background colors
University of South Alabama - CIS 250
20
Annoying web site pointers
(cont)





Use background pictures that are not
transparent and place text on top
Include broken links and/or too many links
Overuse animated gifs
Overuse bullets
Include annoying MIDI files (music)
University of South Alabama - CIS 250
21
Pointers for good web page
design





Create an outline of your site. All pages
should be related with a common look and
theme.
Keep your site focused; each page should
have one distinct theme; related themes
should be linked from other pages.
Look at other web pages for ideas.
Know which tools are supported by your web
host.
Know your target audience.
University of South Alabama - CIS 250
22
CIS 250
Advanced Computer Applications
Web Publishing