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 ppi – 800 x 600 pixels = 780 x 460 actual Alternative window sizes 640 x ppi 640 x 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 Example With resolution = 100 ppi 640 pixels x 480 pixels at 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

Monitor window size standard Download time – connection speeds File size - <100 Kb, should load in 20 seconds

Technology Issues ConnectionSpeedSeconds Modem56 Kb/sec15 DSL*256 Kb/sec+< 1 Satellite700 Kb/sec< 1 Cable Modem1.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 Kb ___________________ Maximum Kb

Technology Issues Graphics.gif files –256 colors Images.jpg files – Millions of colors

Technology Issues Safe Text Font Families Arial Geneva Helvetica Times New Roman Verdana

Technology Issues HTML Coding – NOT!!! Colorado State University-Pueblo Chemistry Department Home Page

Constraints CSU-Pueblo Guidelines and Web Aids pueblo.edu/its/WebDev/index.asp Include your name and date, contact info Copyright considerations ADA access: The Web Accessibility Initiative A-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 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

Microsoft FrontPage 2003 And now, on to Publishing a Web Page With