Beginning Web Beginning Web PublishingPublishing

• Community Community Information Information ToolkitToolkit

• Video # 2Video # 2

AgendaAgenda• Overview of HTMLOverview of HTML

– Basic conceptsBasic concepts

• HTML Authoring ToolsHTML Authoring Tools• Working with Digital ImagesWorking with Digital Images

– Formats; ways to use imagesFormats; ways to use images

– Using Scanners and Digital CamerasUsing Scanners and Digital Cameras

• Image EditorsImage Editors• Principles of Good Web DesignPrinciples of Good Web Design

Before We Begin: A Word Before We Begin: A Word About CopyrightAbout Copyright

• Most content on the Web is copyrightedMost content on the Web is copyrighted

• The copyrightThe copyright symbolsymbol ©© is is notnot required required

• It is generally It is generally notnot acceptable to republish acceptable to republish text and images from Web sites -- nor text and images from Web sites -- nor from books, magazines, etc.from books, magazines, etc.

– Even if your use is non-profitEven if your use is non-profit

• Civil and criminal penalties applyCivil and criminal penalties apply

• Get permission, or don’t do it!Get permission, or don’t do it!

http://lcweb.loc.gov/copyrighthttp://lcweb.loc.gov/copyright

Basic Web ServerBasic Web Server

Static HTML PagesStatic HTML Pages

CGI ScriptsCGI Scripts

Animated Animated GIFsGIFs

JavaJavaActive Server Active Server

PagesPages

JavaScriptJavaScript

ShockwaveShockwave

Streaming Streaming MediaMedia

Basic HTML: Your Primary Basic HTML: Your Primary Publishing MediumPublishing Medium

• HTML is a rich presentation languageHTML is a rich presentation language

• HTML, along with inline graphics, HTML, along with inline graphics, offers many ways to control how offers many ways to control how your content appearsyour content appears

• HTML can be:HTML can be:– Written on any platformWritten on any platform

– ...Using a wide variety of authoring tools...Using a wide variety of authoring tools

– Delivered by any Web serverDelivered by any Web server

What Makes a Web Document?What Makes a Web Document?• The basic document language for the The basic document language for the

Web is HTML -- HyperText Markup Web is HTML -- HyperText Markup LanguageLanguage

• HTML editing is analogous to using HTML editing is analogous to using word processors such as MS-Word, word processors such as MS-Word, except:except:– You’re designing for a Web browser You’re designing for a Web browser

window, not the printed pagewindow, not the printed page

– The codes, or The codes, or tags, tags, are visible to the are visible to the authorauthor

HTML: Text and “Tags” Reside HTML: Text and “Tags” Reside in the Same Filein the Same File

<title><title>Community InformationCommunity Information</title></title>

......

<h1><h1>Welcome to SmallvilleWelcome to Smallville</h1></h1>

<p><p>Smallville is a picturesque town on Smallville is a picturesque town on the banks of the Au Sable Riverthe banks of the Au Sable River

</p></p>

The Browser The Browser Interprets Your Interprets Your HTML Tags ...HTML Tags ...

<title><title>Basic Web SampleBasic Web Sample</title></title>

<h1><h1>A Sample HTML DocumentA Sample HTML Document</h1></h1>

HTTP: HyperText HTTP: HyperText Transfer ProtocolTransfer Protocol

user.isp.comuser.isp.com

HTMLHTMLdocu-docu-mentment

HTTPHTTPsessionsession

Web ServerWeb Server User’s Web User’s Web BrowserBrowser

The InternetThe Internet

www.smallville.mi.uswww.smallville.mi.us

DefinitionsDefinitions• Web browser: software used to "surf" the WebWeb browser: software used to "surf" the Web

– Netscape Navigator, Microsoft Internet Explorer, Netscape Navigator, Microsoft Internet Explorer, Web TV browser, OperaWeb TV browser, Opera

• Web server: hardware and software that deliver Web server: hardware and software that deliver Web pages on demandWeb pages on demand

• Web "page": a single HTML document as Web "page": a single HTML document as displayed by a Web browserdisplayed by a Web browser– One page may consist of multiple files on serverOne page may consist of multiple files on server

• URL: "Uniform Resource Locator" = the URL: "Uniform Resource Locator" = the address of a Web server or a Web pageaddress of a Web server or a Web page

Common File TypesCommon File Types• Most basic Web site has only two file Most basic Web site has only two file

types:types:– HTML, for HTML documentsHTML, for HTML documents– GIF: Graphics Interchange FormatGIF: Graphics Interchange Format

• For photographs, logos, diagrams, charts referred to in For photographs, logos, diagrams, charts referred to in your HTML documentsyour HTML documents

• Many additional formats are usedMany additional formats are used– JPEG: Image format well-suited to JPEG: Image format well-suited to

photographsphotographs– Innumerable special formatsInnumerable special formats

Your Jobs as a Web AuthorYour Jobs as a Web Author• Prepare HTML filesPrepare HTML files

– By hand or by using “authoring tools” By hand or by using “authoring tools”

• Prepare image filesPrepare image files– Scanned images, or created with Scanned images, or created with

“drawing” programs“drawing” programs

• Organize files into a coherent siteOrganize files into a coherent site

• Place files on serverPlace files on server

• Check to make sure everything worksCheck to make sure everything works

““Manual” HTML EditingManual” HTML Editing• Any word processor will work just fineAny word processor will work just fine

• ““Flat file editors” are good for Flat file editors” are good for manual HTML constructionmanual HTML construction– Windows WordPad is a good choiceWindows WordPad is a good choice

– On Mac, BBedit is popularOn Mac, BBedit is popular

• Strategy:Strategy:– Create and edit files on local hard diskCreate and edit files on local hard disk

– Review progress using browserReview progress using browser

– When satisfied, move files to serverWhen satisfied, move files to server

Using a Text Editor -- Using a Text Editor -- “Blank Slate” Approach“Blank Slate” Approach

<h1>Editing</h1>Type text and tags into your favorite text editor…

Windows Wordpad Windows Wordpad Is Popular for Is Popular for

"Hand" Editing "Hand" Editing HTMLHTML

Wordpad Wordpad WindowWindow

Netscape Browser WindowNetscape Browser Window

When Manually Editing, Hop When Manually Editing, Hop Between Wordpad and BrowserBetween Wordpad and Browser

Using the Windows Taskbar to return to WordPadUsing the Windows Taskbar to return to WordPad

HTML OverviewHTML Overview

Basic HTML Document StructureBasic HTML Document Structure

<html><html>

<head><head>

<title><title>The Historical Society The Historical Society of YourTown, Michiganof YourTown, Michigan

</title></title>

</head></head>

<body><body>

This is an HTML document This is an HTML document about our historical about our historical society.society.

</body></body>

</html></html>

The <HEAD> tag The <HEAD> tag marks “front marks “front

matter” such as the matter” such as the document (page) document (page)

title.title.

The <BODY> The <BODY> holds the text of holds the text of

the page the page

[[

Notes About HTML TagsNotes About HTML Tags• ““Case” doesn't matterCase” doesn't matter

– <title><title> and and <Title><Title> and and <TITLE><TITLE> and and <tiTLe><tiTLe> are all the sameare all the same

• Spacing in your source document Spacing in your source document doesn't matterdoesn't matter– Include as many carriage returns and extra Include as many carriage returns and extra

spaces in your source document as you wishspaces in your source document as you wish– Web browser looks only at tags to determine Web browser looks only at tags to determine

layout on screenlayout on screen

Paragraphs <P>Paragraphs <P>

<h2><h2>Paragraphs in Paragraphs in HTMLHTML</h2></h2>

<p><p>This is paragraph 1.This is paragraph 1.</p></p>

<p><p>This is paragraph 2.This is paragraph 2.</p></p>

Headings <H1...H6>Headings <H1...H6>

<H1><H1>High SchoolHigh School</H1></H1>

<H2><H2>Middle SchoolMiddle School</H2></H2>

<H3><H3>Elementary SchoolsElementary Schools</H3></H3>

<<H4>H4>Pre-SchoolsPre-Schools</H4></H4>

<H5><H5>Library StorytimesLibrary Storytimes</H5></H5>

<H6><H6>Other Education Other Education

OrganizationsOrganizations</H6></H6>

<CENTER> Tag: Centers Text within <CENTER> Tag: Centers Text within WindowsWindows

<CENTER><CENTER><H1>Welcome to The <H1>Welcome to The Historical Society of YourTown, Historical Society of YourTown, Michigan</H1>Michigan</H1></CENTER></CENTER>

<HR><HR>

<H3>Contact <H3>Contact Information</H3>Information</H3>

<B>The Historical <B>The Historical Society</B>Society</B><BR><BR>

1212 Main Street1212 Main Street<BR><BR>

YourTown, MI 48195YourTown, MI 48195<BR><BR>

<HR> - Horizontal Rule<HR> - Horizontal Rule<BR> - Break ("hard return")<BR> - Break ("hard return")

Each <br> causes

local carriage return, no line feed

Creating Links: Creating Links: The Anchor TagThe Anchor Tag

<A HREF="name and location of document"><A HREF="name and location of document">

Text that appears as a linkText that appears as a link</A></A>

The text or The text or image(s) that the image(s) that the user would click user would click

onon

The The End End

Anchor Anchor TagTag

The The Beginning Beginning

Anchor TagAnchor Tag

All Anchor Tags have three parts...All Anchor Tags have three parts...

<H3>Contact Information</H3><H3>Contact Information</H3>

<B>The Historical Society</B><BR><B>The Historical Society</B><BR>

1212 Main Street<BR>1212 Main Street<BR>

YourTown, MI 48195<BR>YourTown, MI 48195<BR>

<HR><HR>

<A HREF="http://milf.tln.lib.mi.us/mcin/comm.htm">Go to <A HREF="http://milf.tln.lib.mi.us/mcin/comm.htm">Go to the Milford Community Network</a>the Milford Community Network</a>

Creating Links to Other Web SitesCreating Links to Other Web Sites

Background ColorsBackground Colors

<HTML><HTML>

<HEAD><HEAD>

<TITLE>Backgrounds</TITLE><TITLE>Backgrounds</TITLE>

</HEAD></HEAD>

<BODY BGCOLOR="#0000FF"><BODY BGCOLOR="#0000FF">

This page has a blue This page has a blue background.background.

<P><P>

</BODY></BODY>

</HTML></HTML>

Background ImagesBackground Images

<HTML><HTML>

<HEAD><HEAD>

<TITLE>Background <TITLE>Background Images</TITLE>Images</TITLE>

</HEAD></HEAD>

<BODY BACKGROUND="mi.gif"><BODY BACKGROUND="mi.gif">

This page has the state of This page has the state of MichiganMichigan

as a background.as a background.

</BODY></BODY>

</HTML></HTML>

Basic TablesBasic Tables

<TABLE><TABLE> <TR><TR> <TD><TD>AA</TD> </TD>

<TD><TD>BB</TD> </TD> <TD><TD>CC</TD></TD>

</TR></TR> <TR><TR> <TD><TD>DD</TD> </TD>

<TD><TD>EE</TD> </TD> <TD><TD>FF</TD></TD>

</TR></TR></TABLE></TABLE>

Placing an Image into an HTML Placing an Image into an HTML DocumentDocument

<IMG SRC="yahoo.gif” <IMG SRC="yahoo.gif”

ALT=“Yahoo Logo”>ALT=“Yahoo Logo”>

<p><p>

<IMG SRC="yahoo.gif” ALT=“Yahoo Logo”><IMG SRC="yahoo.gif” ALT=“Yahoo Logo”>

<A HREF=“http://www.yahoo.com">Yahoo</A><A HREF=“http://www.yahoo.com">Yahoo</A>

</p></p>

<p><p>

<A HREF="http://www.yahoo.com” <A HREF="http://www.yahoo.com”

ALT=“Yahoo Logo”>ALT=“Yahoo Logo”>

<IMG SRC="yahoo.gif"><IMG SRC="yahoo.gif">

</A> Yahoo</A> Yahoo</p></p>

Organizing Your HTML Files Organizing Your HTML Files on the Serveron the Server

Web ServerWeb Server/home/webdata/home/webdata//

index.htmlindex.htmlpicture1.gifpicture1.gif/topic1//topic1/ index.htmlindex.html picture1.gifpicture1.gif topic1a.htmltopic1a.html topic1a.giftopic1a.gif/topic2//topic2/ ...... www.smallville.mi.uswww.smallville.mi.us

Relative and Absolute References Relative and Absolute References to Same File...to Same File...

/home/webdata/home/webdata///topic1//topic1/ ...... topic1a.htmltopic1a.html

topic1a.giftopic1a.gif

http://www.smallville.mi.us/topic1a.htmlhttp://www.smallville.mi.us/topic1a.html

……includes this includes this absoluteabsolute reference to topic1a.gif image: reference to topic1a.gif image:<img src="http://www.smallville.mi.us/topic1a.gif"><img src="http://www.smallville.mi.us/topic1a.gif">

http://www.smallville.mi.us/topic1a.htmlhttp://www.smallville.mi.us/topic1a.html

……includes this relative reference to topic1a.gif image:includes this relative reference to topic1a.gif image:<img src="topic1a.gif"><img src="topic1a.gif">

Server File Layout Server File Layout Determines Each Page's URLDetermines Each Page's URL

ProtocolProtocol

www.smallville.mi.uswww.smallville.mi.ushttp://http://

Server Server AddressAddress

Path to Path to FileFile

/events/may.html/events/may.html

Those Are the BasicsThose Are the Basics

• With basic tags…With basic tags…

• ……and simple inline imagesand simple inline images

• You can build a very effective Web You can build a very effective Web sitesite

• So start writing Web pages now!So start writing Web pages now!

• You can learn fancier tricks of the You can learn fancier tricks of the trade latertrade later

HTML HTML Authoring ToolsAuthoring Tools

Authoring Tools Authoring Tools

• TranslatorsTranslators– Translate from another format to HTMLTranslate from another format to HTML

– MS Word, WordPerfect, Pagemaker, etcMS Word, WordPerfect, Pagemaker, etc

• HTML EditorsHTML Editors– What You See is What You GetWhat You See is What You Get

– Adobe Pagemill, Netscape Composer, Adobe Pagemill, Netscape Composer, HTML Assistant Pro, MS FrontpageHTML Assistant Pro, MS Frontpage

Tables: Much Easier Tables: Much Easier With an EditorWith an Editor

HTML Forms: Easy with HTML Forms: Easy with Authoring ToolsAuthoring Tools

<FORM><FORM>

<H3><FONT COLOR="#000000">Smallville Softball <H3><FONT COLOR="#000000">Smallville Softball Reservations</FONT></H3>Reservations</FONT></H3>

<P><FONT COLOR="#000000">Which field do you want?</FONT></P><P><FONT COLOR="#000000">Which field do you want?</FONT></P>

<P><FONT COLOR="#000000"><INPUT TYPE="radio" VALUE="radio" <P><FONT COLOR="#000000"><INPUT TYPE="radio" VALUE="radio" NAME="radio253910"NAME="radio253910"

CHECKED="1">Moseley Park<BR>CHECKED="1">Moseley Park<BR>

<INPUT TYPE="radio" VALUE="radio" NAME="radio254583" <INPUT TYPE="radio" VALUE="radio" NAME="radio254583" CHECKED="1">HinesCHECKED="1">Hines

Park<BR>Park<BR>

<INPUT TYPE="radio" VALUE="radio" NAME="radio255700" <INPUT TYPE="radio" VALUE="radio" NAME="radio255700" CHECKED="1">GardinerCHECKED="1">Gardiner

Park</FONT></P>Park</FONT></P>

<P><FONT COLOR="#000000">What date?<P><FONT COLOR="#000000">What date?

<INPUT NAME="name" TYPE="text"<INPUT NAME="name" TYPE="text"

SIZE="25"><BR>SIZE="25"><BR>

What time?<INPUT NAME="name" TYPE="text" SIZE="25"></FONT></FORM>What time?<INPUT NAME="name" TYPE="text" SIZE="25"></FONT></FORM>

FrontPage: Authoring Tool and FrontPage: Authoring Tool and Web Project ManagerWeb Project Manager

• What You See Is What You Get (WYSIWYG) What You See Is What You Get (WYSIWYG) editingediting

• Add pages, links using graphical Add pages, links using graphical commandscommands

• Each new project is called a FrontPage Each new project is called a FrontPage "web""web"

• Multiple "views" of your siteMultiple "views" of your site• Built-in tools for specific applicationsBuilt-in tools for specific applications

– Comment forms, simple discussion forumComment forms, simple discussion forum

Navigation ViewNavigation View

Folder ViewFolder View

Hyperlink View – Visualize Internal LinksHyperlink View – Visualize Internal Links

The FrontPage Editor In The FrontPage Editor In Normal ViewNormal View

The FrontPage Editor The FrontPage Editor in HTML Viewin HTML View

FrontPage: Predefined ThemesFrontPage: Predefined Themes

Pre-Created Templates Pre-Created Templates

Managing Files with Managing Files with Authoring ToolsAuthoring Tools

• Many authoring tools automate the Many authoring tools automate the process of publishing pagesprocess of publishing pages

• ““One-button publishing”One-button publishing”– A little tricky to set upA little tricky to set up

– Webmaster may have to install Webmaster may have to install extensions on serverextensions on server

– Just click "Publish" button when done Just click "Publish" button when done editing a pageediting a page

Manually Moving Files to the Manually Moving Files to the Server: WS-FTP ExampleServer: WS-FTP Example

logo.jpg logo.jpg

Netscape Composer One-Netscape Composer One-Button PublishButton Publish

Site ManagementSite Management• Some authoring tools provide ways to manage Some authoring tools provide ways to manage

an entire an entire sitesite– Beyond editing individual pagesBeyond editing individual pages

• Other advanced features:Other advanced features:– Check link integrityCheck link integrity

• Identify links that point to dead sites or missing filesIdentify links that point to dead sites or missing files

– Validate HTML (make sure tags are valid)Validate HTML (make sure tags are valid)– FrontPage: project management featuresFrontPage: project management features

• Assign tasks to team membersAssign tasks to team members• Set priorities, update statusSet priorities, update status

FrontPage Project FrontPage Project ManagementManagement

• Define tasks to be doneDefine tasks to be done

• Assign to team members, give Assign to team members, give prioritiespriorities

Web Sites That Evaluate Your Web Sites That Evaluate Your Web SiteWeb Site

• Tools to examine your siteTools to examine your site– HTML validityHTML validity

– Link integrityLink integrity

– Speed of page downloadsSpeed of page downloads

– Whether your GIF images are optimizedWhether your GIF images are optimized

• Can offer many of the advantages of Can offer many of the advantages of authoring toolsauthoring tools

• Easy to apply to your entire siteEasy to apply to your entire site

NetMechanic: Check Your Site’s NetMechanic: Check Your Site’s HTML Validity, Links, etc.HTML Validity, Links, etc.

NetMechanic NetMechanic SetupSetup

NetMechanic ResultsNetMechanic Results

Working with Working with Digital Images Digital Images

Digital Image Input ChoicesDigital Image Input Choices

• Digital camerasDigital cameras

• ScannersScanners

• Have photo lab deliver in digital formHave photo lab deliver in digital form– FloppiesFloppies

– Photo CDPhoto CD

– Even directly to the WebEven directly to the Web

ScannersScanners

• From paper to digital documentsFrom paper to digital documents

• Newsletters, pages from books, Newsletters, pages from books, photographs -- even small objects photographs -- even small objects can be scannedcan be scanned

• Three basic kinds of images to scan:Three basic kinds of images to scan:– PhotographsPhotographs

– Line artLine art

– TextText

Types of ScannersTypes of Scanners

• Most applications call for flat-bed Most applications call for flat-bed scannersscanners– Useful for most everyday applicationsUseful for most everyday applications

– Some offer automatic sheet feeders Some offer automatic sheet feeders • Useful for bulk scanning jobsUseful for bulk scanning jobs

• Many other scanners existMany other scanners exist– 35MM slides, negatives35MM slides, negatives

– Book scanners, handheld scannersBook scanners, handheld scanners

Choosing a ScannerChoosing a Scanner• Many brands to choose from: HP, Many brands to choose from: HP,

Visioneer, Canon, Epson, Umax...Visioneer, Canon, Epson, Umax...• Quality varies with priceQuality varies with price

– Probably want to spend at least $300Probably want to spend at least $300– More expensive scanners offer better More expensive scanners offer better

resolution, faster speedresolution, faster speed• You want at least 600 dots per inch optical resolutionYou want at least 600 dots per inch optical resolution

– Look for at least 24 bit colorLook for at least 24 bit color– Check for bed size, speed of scanCheck for bed size, speed of scan

Software Bundled with ScannersSoftware Bundled with Scanners• Image editing software Image editing software

– E.g., Adobe Photodeluxe, Corel E.g., Adobe Photodeluxe, Corel PhotopaintPhotopaint

• Software to perform optical character Software to perform optical character recognition (OCR)recognition (OCR)– E.g., Caere Ominpage, Xerox TextbridgeE.g., Caere Ominpage, Xerox Textbridge

• Related tools: Adobe Acrobat, fax Related tools: Adobe Acrobat, fax software, image file managers, etc.software, image file managers, etc.

Installing Your ScannerInstalling Your Scanner

• Unpack Unpack

• Install the softwareInstall the software

• Connect the scanner to the PCConnect the scanner to the PC– Parallel (printer) portParallel (printer) port

• Often use pass-through to your printerOften use pass-through to your printer

– SCSISCSI• Not all PCs have this (all Macs do)Not all PCs have this (all Macs do)

– USB: new Universal Serial Bus -- auto-USB: new Universal Serial Bus -- auto-installs under Windows 98installs under Windows 98

Installation is Easy under Installation is Easy under Windows 98Windows 98

• Plug scanner into USB portPlug scanner into USB port

• Automatic software installationAutomatic software installation

• Your PC must have a USB port!Your PC must have a USB port!

Steps In ScanningSteps In Scanning

• Position your original on the bedPosition your original on the bed

• Close the cover, power onClose the cover, power on

• Start your softwareStart your software

• Select PreviewSelect Preview

• Use the mouse to select part of page Use the mouse to select part of page to scan…to scan…

• ……or leave to full-page if desiredor leave to full-page if desired

Getting Ready to ScanGetting Ready to Scan

Preview Preview and and

Select Select Area to Area to ScanScan

Setting the Output TypeSetting the Output Type

Setting the ResolutionSetting the Resolution• A relatively low resolution may work wellA relatively low resolution may work well• E.g. 150 dots per inchE.g. 150 dots per inch• Computer monitor screens only offer about Computer monitor screens only offer about

72 dpi72 dpi• You may need higher resolutions if:You may need higher resolutions if:

– Your readers will download and print the fileYour readers will download and print the file– You will manipulate the file with an image editorYou will manipulate the file with an image editor

OCR ResultsOCR Results

Letter from the AFCN Letter from the AFCN PresidentPresidentGreetings all! Greetings all! Well, it's been more Well, it's been more than a month since than a month since our get- together in our get- together in San Jose, and what a San Jose, and what a fine gathering it fine gathering it was. I am also glad was. I am also glad to report I had the to report I had the opportunity for a opportunity for a nice drivenice drive

Scanning TipsScanning Tips

• Scan multicolumn text one column at a Scan multicolumn text one column at a timetime

• Choose the right resolution and screening Choose the right resolution and screening for photographsfor photographs

• Choose a vector format if you’re scanning Choose a vector format if you’re scanning in a logo or graphic to reusein a logo or graphic to reuse

• Use image editor to crop, resize, fine-tuneUse image editor to crop, resize, fine-tune• Watch file sizes on what you serve!Watch file sizes on what you serve!

Image Editing Software Image Editing Software

Working With ImagesWorking With Images• Get a good image editorGet a good image editor

– Paint Shop Pro (shareware)Paint Shop Pro (shareware)

– Adobe Photoshop Adobe Photoshop

– Adobe PhotodeluxeAdobe Photodeluxe• A stripped-down version of PhotoshopA stripped-down version of Photoshop• With many user-friendly features and With many user-friendly features and

effectseffects

– Corel PhotoPaintCorel PhotoPaint

What Image Editors Can DoWhat Image Editors Can Do• Convert among various formatsConvert among various formats• Rotate imagesRotate images• Resize or crop images Resize or crop images

– Standard video monitor is at least 640 X 480 Standard video monitor is at least 640 X 480 pixels pixels

• Adjust contrast, brightness, number of Adjust contrast, brightness, number of colorscolors

• Add text, even combine imagesAdd text, even combine images• Apply a variety of special effectsApply a variety of special effects

Adobe PhotoDeluxe ExampleAdobe PhotoDeluxe Example

PhotoDeluxe EffectsPhotoDeluxe Effects

PhotoDeluxe "Sketch" EffectPhotoDeluxe "Sketch" Effect

Image Size MattersImage Size Matters• Reduce your image to the minimum Reduce your image to the minimum

possible to convey your meaningpossible to convey your meaning– A 100 kilobyte image is too large!!!A 100 kilobyte image is too large!!!

– Reduce size of imageReduce size of image

– Reduce number of colors in imageReduce number of colors in image

– Use a GIF optimizer in image editorUse a GIF optimizer in image editor

• Use thumbnails instead of full-size Use thumbnails instead of full-size imagesimages– Thumbnail is small, points to larger imageThumbnail is small, points to larger image

"Thumbnail" "Thumbnail" ConceptConcept

<a href=“large.jpg”><a href=“large.jpg”>

<img src=“small.jpg”><img src=“small.jpg”>

</a></a>

Thumbs-Plus Software: Thumbs-Plus Software: Automates Web ThumbnailsAutomates Web Thumbnails

Working With ColorsWorking With Colors

• Digital color representation requires Digital color representation requires compromisescompromises

• Video cards, monitors, and software Video cards, monitors, and software each have their own characteristicseach have their own characteristics

• Newest computers have 24 bit colorNewest computers have 24 bit color– Over 16 million colors; known as “true color”Over 16 million colors; known as “true color”

• Older PCs have less capabilityOlder PCs have less capability– As few as 256 colorsAs few as 256 colors

Minimize Number of ColorsMinimize Number of Colors

• Video cards, operating systems, and Video cards, operating systems, and browsers have limits on color handlingbrowsers have limits on color handling

• Minimize the number of different colors Minimize the number of different colors you useyou use

• Use 216 or fewer distinct colors per Use 216 or fewer distinct colors per page:page:– Speeds up page loadingSpeeds up page loading– Ensures better control over final displayEnsures better control over final display

Browser-Friendly PaletteBrowser-Friendly Palette

GIF Features to ExploreGIF Features to Explore• TransparencyTransparency

– Pick a color in your image to render as Pick a color in your image to render as transparenttransparent• E.g. the wall behind a human subjectE.g. the wall behind a human subject

– The picture will blend into the Web pageThe picture will blend into the Web page

• AnimationAnimation– This is how banner ads workThis is how banner ads work– Very easy to set upVery easy to set up

• Many image editors can handle transparency Many image editors can handle transparency and animationand animation

Principles of Principles of Good Web DesignGood Web Design

6/12/98 tmw

Characteristics of a Characteristics of a Good Web SiteGood Web Site

• Well-organizedWell-organized

• Easy to navigateEasy to navigate

• AttractiveAttractive

• UsefulUseful

• Up-to-dateUp-to-date

Steps to a well designed Steps to a well designed Web siteWeb site

• Have a goalHave a goal• Target your audienceTarget your audience• Create a planCreate a plan• Select a Web service providerSelect a Web service provider• Try it outTry it out

– Using different PCs and browsersUsing different PCs and browsers– Over slow dial-up linesOver slow dial-up lines

• Maintain itMaintain it

Few graphics makes it more accessible to everyone.Few graphics makes it more accessible to everyone.

Organized by department.Organized by department.

Organized by audience type.Organized by audience type.

Organized by subject.Organized by subject.

No scrolling necessary to start navigating.No scrolling necessary to start navigating.

Standard tool bars and a brief menu for easy Standard tool bars and a brief menu for easy navigation.navigation.

Avoid backgrounds that wash out your text.Avoid backgrounds that wash out your text.

Imagemaps can provide easy means of navigation.Imagemaps can provide easy means of navigation.

TablesTables

• Standard text, images or links are Standard text, images or links are arranged in tabular format with or arranged in tabular format with or without borderswithout borders

• ProsPros– Allows creator to place items on a pageAllows creator to place items on a page– Looks neatLooks neat

• ConsCons– Can be tricky, but tables are amazingly Can be tricky, but tables are amazingly

useful to the designer.useful to the designer.

Tables provide Web designers with control Tables provide Web designers with control over layout.over layout.

FramesFrames• Divides the browser's window into two or Divides the browser's window into two or

more scrollable areasmore scrollable areas– Useful for site-wide menusUseful for site-wide menus

• ProsPros– Can provide an area that makes updating or Can provide an area that makes updating or

changes very simplechanges very simple– Can help with navigationCan help with navigation

• ConsCons– Used improperly can make a huge mess!Used improperly can make a huge mess!

Frames can be used to provide a static navigation Frames can be used to provide a static navigation window.window.

TipsTips• Emulate a site you like.Emulate a site you like.• Pick a style for the sitePick a style for the site

– Test the style before you build entire siteTest the style before you build entire site

• Keep things simple.Keep things simple.• Provide a search function if possible.Provide a search function if possible.• Test your siteTest your site

– Are pages legible?Are pages legible?– Is site easy to navigate?Is site easy to navigate?– Does site provide the information users would Does site provide the information users would

expect to find?expect to find?

Avoid littering your opening page with Avoid littering your opening page with your awardsyour awards.

Web Design and HTML Web Design and HTML ReferencesReferences

•WebReference.comWebReference.com•WebDeveloper.comWebDeveloper.com•Serverwatch.comServerwatch.com•www.zdnet.comwww.zdnet.com•www.cnet.comwww.cnet.com•… … and many more!and many more!