Beginning Web Publishing Community Information ToolkitCommunity Information Toolkit Video # 2Video #...
-
date post
23-Jan-2016 -
Category
Documents
-
view
217 -
download
0
Transcript of Beginning Web Publishing Community Information ToolkitCommunity Information Toolkit Video # 2Video #...
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!