Post on 14-Dec-2015
transcript
With Microsoft FrontPage 2003
Publishing a Web Page
Agenda
Parts of a Web Page Getting Started Technology Issues Constraints Design & Layout FrontPage 2003
Parts of a Web Page
Text Images and/or
Graphics Hyperlinks
Layout managed by Tables Line Breaks Frames Layers Lists Style Sheets
Backgrounds, Themes Forms Databases Buttons Animation, Video &
Sound Interactive programming
– Java, Javascript, XML, Applets, Plug-ins, etc.
Web Page Example
Colorado State University-Pueblo
Before you start, ORGANIZE
Purpose/goals Market Content Updating
Technology Constraints Design & layout
Purpose/Goals
Why are you creating the web site? What are your goals in creating your site?
Personal? Professional? Both?
Market
Who is the audience?
Visitor:“What’s the hook?”“What’s in this for me?”
What are their needs?
Content
What do you want to tell them?
What do you want them to do?
Updating
How will you keep your site current?
Technology Issues
Monitor window size standard Download time File size
Technology Issues
Monitor window size standard– 800 x 600 pixels at 72 - 100 ppi
– 800 x 600 pixels = 780 x 460 actual
Alternative window sizes 640 x 480 pixels @ 72 ppi 800 x 600 „ 1024 x 768 „
Technology Issues
Pixel = a “dot” of color
Resolution = pixels per inch (ppi)
Pixels can vary in size,depending on resolution
Technology Issues
ExampleWith resolution = 100 ppi
640 pixels x 480 pixelsat 100 ppi =
6.4 " x 4.8" image or page size=
Image or page size resolution
Low Resolution, big pixels, small image size, quick loading
High Resolution, small pixels, large image size, slow loading
Technology Issues
Technology Issues
Monitor window size standard Download time – connection speeds File size - <100 Kb, should load in 20
seconds
Technology Issues
Connection Speed Seconds
Modem 56 Kb/sec 15
DSL* 256 Kb/sec+ < 1
Satellite 700 Kb/sec < 1
Cable Modem 1.5 Mb/sec < 1
T1 (CSU-Pueblo) 1.6 Mb/sec < 1
Speed vs. Download Time (Bandwidth) File Size 100 Kb
* Digital Subscriber Line
Technology Issues
Monitor window size standard Download time File size - <100 kb, should load in 20
seconds
Technology Issues
Background < 10 Kb Images & graphics
5-25 Kb Text, etc. 35-75 Kb___________________
Maximum 50-100 Kb
Technology Issues
Graphics
.gif files –256 colors
Images
.jpg files – Millions of colors
Technology Issues
SafeTextFontFamilie
s
Arial Geneva Helvetica Times New Roman Verdana
Technology Issues
HTML Coding – NOT!!!<html>
<head><meta http-equiv="Content-Type" content="text/html;
charset=windows-1252"><title>Colorado State University-Pueblo Chemistry
Department Home Page</title><meta name="GENERATOR" content="Microsoft FrontPage 4.0"><meta name="ProgId" content="FrontPage.Editor.Document"><meta http-equiv="Page-Enter"
content="blendTrans(Duration=.5)"><script language="JavaScript">
Constraints
CSU-Pueblo Guidelines and Web Aids
http://www.colostate-pueblo.edu/its/WebDev/index.asp
Include your name and date, contact info Copyright considerations ADA access:
The Web Accessibility InitiativeA-Prompt
Constraints
Talent Release Form
Required for use of people photos
File with ITS
Design & Layout
Site Presentation – Visual and Audible Check out similar others Check out ugly sites, what NOT to do
http://www.websitesthatsuck.com/ Develop Flowchart and Storyboard
Design & Layout Tips
The Web Style Guide Online! by Patrick J. Lynch, Sarah Horton
Design & Layout Tips
White space! Don’t cram information. Avoid long scrolls Informative titles Clear, concise, correct spelling & grammar Uniform navigation throughout Any page entry Test on different browsers
CSU-Pueblo
CSU-Pueblo Logo & Link
Design & Layout
Gather visuals Organize text Identify links Plan a consistent look
fonts, graphics, background Color http://www.pantone.com/allaboutcolor/allaboutcolor.asp?Category=Research
http://www.colormatters.com
Microsoft FrontPage 2003
And now, on toPublishing a Web Page With