cis 250 advanced computer applications web publishing
TRANSCRIPT
CIS 250Advanced Computer Applications
Web Publishing
University of South Alabama - CIS 250 2
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 appearanceWeb 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 3
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 4
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 IENetscape
What does your server support?FrontPage extensions (support for feedback
pages, hit counts, etc.)
University of South Alabama - CIS 250 5
Common HTML commands
“<“ and “>” characters mark begin and end of tag
“/” indicates feature is being turned off In every web doc:
<html></html> begin/end of HTML cmds <head> </head> begin/end of intro portion <title> </title> name of page to appear in title
bar
Not all commands require a closing tag
University of South Alabama - CIS 250 6
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 7
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 8
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 Links Photos
My Family Pictures
Resume
My Dog
University of South Alabama - CIS 250 9
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 10
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 11
FrontPage 2002
Many of the same screen elements as MS Word and other Office applicationsTitle bars, menu bars, standard toolbars
Additional screen elementsPage titleViews bar (page, folders, reports,
navigation…)Working area
University of South Alabama - CIS 250 12
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 13
Creating your Web Site
Template or blank webCan 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 14
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 15
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 16
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 17
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 viewerTwo 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 18
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 19
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 20
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 21
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 22
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.
CIS 250Advanced Computer Applications
Web Publishing