Technical Skill Module 2: Web Page Creation using an HTML editor

Skill Module Objectives:

  • Be able to use an HTML editor to create HTML documents [assignment #2]
  • Be able to design a multi-page WWW page presentation on a topic relevant to the course [assignment #2]

Completion date:

Introduction

By now all of you have modified a simple web page using Dreamweaver. For example, it includes the ability to easily create several types of menus, buttons, mouse-over effects for images [it automatically writes the javascript for these], as well as other useful features.

Resources Required

You can download a free 30 day trial of Dreamweraver to your home computer: simply google dreamweaver free download, and choose the correct program. The most recent is Dreamweaver CS3--select Mac or Windows version.

Required Skills [some technical -- some academic]

  • Use Dreamweaver or an HTML editor to do the following:
    • Create between 2 and 8 pages/files of information
    • Use background colour[s] and/or background image[s] on pages
    • A simple, unified web page design theme with good overall layout
    • Good overall content that clearly presents the topic
    • Correct and accurate use of conventions (including spelling, grammar, etc.)
    • Information is developed (ideas and content), word choice is effective and appropriate to topic and audience
    • Use of a Table of Contents [or similar feature] with internal/relative links to the separate pages/sections
    • Use bold and centering of text
    • Use of graphic images
    • Use of animation
    • Use of external hypertext links
    • Use of relative links to link content text with references/notes

Resources for this Module

 

Browser Compatibility & Tools

Browser Chart - Macs [from WebMonkey]
http://hotwired.lycos.com/webmonkey/reference/browser_chart/index_mac.html

Browser Chart - Windows [from WebMonkey]
http://hotwired.lycos.com/webmonkey/reference/browser_chart/

Browser Compatibility Tutorial
http://www.netmechanic.com/browser-photo/tutorial.htm

Checking Cross-Browser Compatibility
http://outreach.missouri.edu/webteam/tips/browser_compatibility.html

Cross Browser Compatibility
http://www.thetemplatestore.com/help/cross-browser.asp

Cross-Browser Compatibility, by Henry Beavis
http://www.edevcafe.com/viewdoc.php?eid=197

Cross Browser Compatibility, by Michael Bloch
http://www.tamingthebeast.net/articles/crossbrowercompatibility.htm

Design Guide for Cross-Browser Compatibility [from "Viewable with any Browser]
http://www.anybrowser.org/campaign/abdesign.html

Extreme Cross-Browser Compatibility
http://www.decloak.com/Products/Dreamweaver/NestedTemplates/Browser_Compatibility.aspx

How to Copy and Paste From Netscape Navigator's Page Source to Windows WordPad
http://www.healthnet.org.np/training/www/netscape1/WW203.htm

How to Copy and Paste From Netscape Navigator to Windows WordPad
http://library.albany.edu/internet/wordpad.html

How to Browser Test Your Web Pages, by Jean Kaiser
http://webdesign.about.com/c/ht/00/07/How_Browser_Test_Web0962932993.htm?once=true&

Text Sizing
http://www.thenoodleincident.com/tutorials/box_lesson/font/index.html

Colours on the WWW

The Big Bad Color Test [javascript applet]
http://www.akamaidesign.com/tests/colors.html

Color Codes [from WebMonkey]
http://hotwired.lycos.com/webmonkey/reference/color_codes/

Colorama-Choose a color!
http://www.geocities.com/SiliconValley/2902/colorama.htm

HTML Color Names
http://www.w3schools.com/html/html_colornames.asp

Named Colors and Hexadecimal Values
http://www.lightlink.com/xine/bells/namedcolors.html .

Fonts & Web Design

Elements of Web Design: Fonts and Text
http://www.9rules.com/whitespace/design/elements_of_web_design_fonts_and_text.php

Fonts
http://coolpagehelp.com/index.html?row2col2=fonts.html

Intro to Embedded Fonts [from WebMonkey]
http://hotwired.lycos.com/webmonkey/98/01/index3a.html?tw=design

Tutorial 1 - Web-safe fonts
http://www.designtutor.com/tutorial.htm

Web-Safe Fonts
http://www.i4image.com/resources_wsfont.shtml

Web Safe Fonts for IE and Netscape on Windows PCs and Macs
http://sandwil.beigetower.org/HTMLcourse/safeFonts.htm

Web-Safe Fonts for Your Site
http://designgraphics.org/article20.html

Web Type 101, a Primer, by Daniel Will-Harris
http://www.efuse.com/Design/web_fonts_basics.html

Web Typography Tutorial Overview [from WebMonkey]
http://hotwired.lycos.com/webmonkey/design/fonts/tutorials/tutorial3.html

The World of Fonts
http://webreference.com/dlab/9802/

Graphics Resources -- Clipart & Backgrounds

AAA Backgrounds
http://www.aaa-backgrounds.com/html/mainback.shtml

About.Com Clipart
http://webclipart.about.com/

Absolute Background Textures Archives
[entire collection can be downloaded in one step]
http://www.grsites.com/textures/

Absolute Web Graphics Archives [entire collection can be downloaded in one step]
http://www.grsites.com/webgraphics/

Backgrounds [from About.com]
http://webclipart.about.com/msubmenu19.htm?once=true&

ByDezign [clipart, backgrounds, interfaces]
http://www.graphicsbydezign.com/

Canadian Flag Clipart Gallery
http://canflag.ptbcanadian.com/

Clip Art Warehouse
http://www.clipart.co.uk/index.shtml

Clipart.TheLinks.com
http://www.clipart.thelinks.com/

Clip Art Review
http://www.webplaces.com/html/clipart.htm

Cool Archive
http://www.coolarchive.com/index.cfm

Eos Development - great backgrounds, textures. buttons, bullets, and navigation symbols
http://www.eosdev.com/ForYouFromEos.htm

Image Paradise
http://desktopPublishing.com/cliplist.html

Library Clipart, Symbols & Such
http://www.ssdesign.com/librarypr/toolbox.html

Microsoft Office Clipart
http://office.microsoft.com/clipart/default.aspx?lc=en-us

Multimedia Place [animations, including Canadian flags]
http://www.multimediapalace.com/

Screen Beans [from A Bit Better Corp.]
http://www.bitbetter.com/freebie.htm

HTML Editors

1st Page 2000 [this is the one that will be used in the IT labs at SLAIS]
The zipped installation file is on the CD distributed at the beginning of the term

Faculty Resource Center's 1st Page 2000 Tutorial
http://eastlrc.valencia.cc.fl.us/tutorials/1st_tutorial/index.shtml

Page Spinner [for Macs]
Download program from:
http://www.optima-system.com/pagespinner/

BBEdit [for Macs]
Download full program from:
http://www.barebones.com/products/bbedit/bbedit-demo.html 
[will stop working after 24 uses]

Download BBEdit Lite
http://www.barebones.com/products/bbedit_lite.html [doesn't expire].

HTML Resources & Validators

Alignments: Basic Web Page Layout, by Jennifer Kyrnin
http://html.about.com/library/weekly/aa060101a.htm?once=true&

And the Attributes: More than Just Tags, HTML Attributes Can Improve Your Site, by Jennifer Kyrnin
http://html.about.com/library/weekly/aa052101a.htm?terms=attributes+and+html

The Bare Bones Guide to HTML [available in 18 languages]
http://werbach.com/barebones/

Complete HTML Tutorial List [from Page Resource.com]
http://www.pageresource.com/html/hclist.htm

Controlling Vertical White Space
http://www.dsiegel.com/tips/wonk7/vertical.html

How Do They Do That With HTML?
http://www.tashian.com/htmlguide/

How to Align Tables and Images, by Jennifer Kyrnin
http://html.about.com/library/howto/htalign.htm?once=true&

How to Set Up a Download Link, by Jennifer Kyrnin
http://html.about.com/library/howto/htdownloadlink.htm?once=true&

HTML: An Interactive Tutorial for Beginners
http://www.davesite.com/webstation/html/

HTML Cheat Sheet [from WebMonkey]
http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/index.html

HTML Codes for Special Characters [from WebMonkey]
http://hotwired.lycos.com/webmonkey/reference/special_characters/

HTML Converters, by Jennifer Kyrnin
http://html.about.com/cs/htmlconverters/index.htm?once=true&

HTML Examples
http://www.w3schools.com/html/html_examples.asp

HTML Forms Tutorial - Learn How to Use the <form> Tag, by Jennifer Kyrnin
http://html.about.com/library/weekly/aa070699.htm?once=true&

HTML 4.01 Quick List
http://www.w3schools.com/html/html_quick.asp

HTML 4.01 Reference
http://www.w3schools.com/html/html_reference.asp

HTML Goodies Tutorials & Primers, by Joe Burns [these are some of the best WWW design tutorials for all experience levels out there]
http://www.htmlgoodies.com/tutors/

HTML Station
http://www.december.com/html/

HTML Tutorial
http://www.w3schools.com/html/default.asp

HTML Tutorials [must have Quicktime installed to view free tutorials]
http://www.vtccanada.com/can/titles/html-3.html
http://www.vtccanada.com/can/titles/html-4.html

HTML Validation Service
http://www.stickysauce.com/garage/index.htm

Meta Refresh Tag, by Jennifer Kyrnin
http://html.about.com/library/weekly/aa080300a.htm?once=true&

Meta Tag Generator, by Jennifer Kyrnin
http://html.about.com/library/bl_metagenerator.htm

Meta Tags, by Jennifer Kyrnin
http://html.about.com/cs/metatags/index.htm?once=true&

No More Margins: How to Get Rid of Those Pesky Browser Offsets -- On all Browsers, by Jean Kaiser
http://webdesign.about.com/library/weekly/aa052901a.htm?once=true&PM=n10060601e

Online Web Design Tutorial [from Vanderbilt University]
http://www.vanderbilt.edu/create/tech/index.html

Professional Web Design & HTML Tutorials by Joe Barta
http://www.pagetutor.com/pagetutor/

Your First Style Sheet:CSS for Beginners, by Jennifer Kyrnin
http://html.about.com/library/weekly/aa111000a.htm?once=true&PM=n101113f

Wacky HTML [from Web Developers Journal]
http://webdevelopersjournal.com/WackyHTML.html

Webmonkey HTML Tutorial
http://hotwired.lycos.com/webmonkey/teachingtool/

Web Design - More than Meets the Eye, by Alan Richmond
http://www.wdvl.com/Authoring/Design/MoreThan/Web.html

Web Page Creation [from University of Washington]
http://online.caup.washington.edu/courses/larcwi01/larc440/html_home.htm

Web Page Design for Designers
http://www.wpdfd.com/wpdhome.htm

Web Page Validation
http://www.w3schools.com/site/site_validate.asp

What HTML Can't Do: Part 1: Frequently Asked Questions About HTML, by Jennifer Kyrnin [follow links for subsequent parts]
http://html.about.com/library/weekly/aa020801a.htm?once=true&

W3C HTML Validation Service
http://www.htmlhelp.com/tools/validator/

XHTML 101, by Jennifer Kyrnin
http://webdesign.about.com/c/ec/9.htm

Logo & Banner Creation Sites

Acme Label Maker 
http://www.acme.com/labelmaker/

Banner Backgrounds
http://www.angelfire.com/biz/WLAW/banner1.html

Banner Generator
http://linuxenvy.com/bprentice/Banners/Banners.html

The Button Maker [from Cool Archive]
http://www.coolarchive.com/buttons.cfm

Cool Archive
http://www.coolarchive.com/index.cfm

CoolText.com
http://www.cooltext.com/

Flaming Text Buttons, Logos [very classy looking logos & buttons]
http://www.flamingtext.com/

Flash Buttons
http://www.flashbuttons.com/

Free Buttoms.com [links to lots of button generators]
http://www.freebuttons.com/

Icon-O-Matic
http://www.webgurus.com/matic/iconomatic.html

Pink Ribbon Library of Icons
http://www.geocities.com/SoHo/2703/pink_rib_lib.html

Ribbon-O-Matic
http://www.webgurus.com/matic/ribbon-o-matic.html

3D Text Maker
http://www.3dtextmaker.com/

Microsoft Photo Editor Tutorials

Photo Sources
[Be sure to check on copyright status of any photos you wish to use]

AltaVista Photo and Media Finder
http://www.altavista.com/sites/search/simage

Amazing Picture Machine
http://www.ncrtec.org/picture.htm

Fast Image Search
http://multimedia.alltheweb.com/cgi-bin/advsearch

Google Image Search
http://images.google.com/advanced_image_search?hl=en

Lycos Pictures and Sounds
http://multimedia.lycos.com/

PicSearch
http://www.picsearch.com/

Yahoo Picture Gallery
http://gallery.yahoo.com/

Site Navigation

Creating Web Pages: Quick Guide to Navigation [from the University of Birmingham]
http://www.education.bham.ac.uk/webpages/navigation.htm

Designing Site Navigation
http://www.webreference.com/dlab/9705/

Designing Web Navigation: Five Tips for Planning your Space, by Jennifer Fleming
http://www.ahref.com/guides/design/199808/0831jef.html


Is Navigation Useful?, by Jakob Nielsen
http://www.useit.com/alertbox/20000109.html

Navigating Web Pages: Designing Navigation That Works
http://webdesign.about.com/cs/webnavigation/a/aanavigating.htm

Navigation Bars in Web Pages
http://www.shire.net/learnwebdesign/navigation.htm

Navigation considerations for web pages
http://www.ncsu.edu/it/edu/html_trng/navigate.html

An Open Discussion on Web Navigation, by Keith Instone
http://user-experience.org/uefiles/presentations/KEI-WebNav-20020916.pdf

Seven Steps To Easier Web Navigation, by Constance J. Petersen
http://www.smartisans.com/articles/web_navigation.aspx

Web Page Design for Designers - Navigation
http://www.wpdfd.com/wpdnav.htm

Sources for Sounds on the WWW

Clip Art Review
http://www.webplaces.com/html/sounds.htm

Find Sounds
http://findsounds.com/

Lycos Multimedia Search
http://multimedia.lycos.com/

Sounds of the World's Animals
http://www.georgetown.edu/faculty/ballc/animals/animals.html

Moving Beyond HTML

Cascading Style Sheets [CSS]

Bringing Hyperlinks to Life [sample chapter from: Eric Meyer on CSS: Mastering the Language of Web Design]
http://www.wdvl.com/Authoring/Style/Sheets/Meyer/

Cascading Style Sheets [from WDVL]
http://wdvl.com/Authoring/Style/Sheets/

Cascading Style Sheets - Designing for the Web, by Alan Richmond [online book]
http://www.wdvl.com/Authoring/Style/Sheets/Book.html

Complete CSS Guide [online book]
http://www.westciv.com/style_master/academy/css_tutorial/

CSS (Cascading Style Sheets) Generator
http://www.ahfb2000.com/cssgenerator.php

CSS (Cascading Style Sheets) Generator II [advanced]
http://www.ahfb2000.com/cssgenerator2.php?sub=gen_form

CSS Creator
http://www.csscreator.com/version1/

CSS Examples
http://www.w3schools.com/css/css_examples.asp

CSS Lab
http://www.projectseven.com/tutorials/

CSS Resources [from evolt.org]
http://dir.evolt.org/coding/client-side/css/

CSS Step By Step: How to Add Stylesheets to Your Web Pages
http://webdesign.about.com/library/weekly/aa010702a.htm

CSS Tutorials [from HTML Goodies]
http://www.htmlgoodies.com/beyond/css.html

CSS Tutorials and Articles
http://www.websitetips.com/css/index.shtml#css

Designing CSS Web Pages [web site for book]
http://www.christopherschmitt.com/books/cssbook/

Introduction to Style Sheets
http://www.wdvl.com/Authoring/Style/Sheets/Tutorial.html

Planning and Structuring Content [sample chapter from: Designing CSS Web Pages]
http://www.wdvl.com/Authoring/Style/Sheets/DesCSSWeb/

Toss out your Tables! CSS is the scene!
http://wdvl.internet.com/Authoring/Style/Sheets/Positioning/Toss/

Your First Style Sheet:CSS for Beginners, by Jennifer Kyrnin
http://html.about.com/library/weekly/aa111000a.htm?once=true&PM=n101113f

Javascript

Menus

Advanced META Tag Generator
http://javascript.internet.com/miscellaneous/advanced-meta-tag-generator.html

How To Use HTML Meta Tags
http://searchenginewatch.com/webmasters/article.php/2167931

Meta Builder 2
http://vancouver-webpages.com/META/mk-metas.htm l

Meta Refresh Tag, by Jennifer Kyrnin
http://html.about.com/library/weekly/aa080300a.htm?once=true&

META Tag Generator
http://www.anybrowser.com/MetaTagGenerator.html

Meta Tag Generator, by Jennifer Kyrnin
http://html.about.com/library/bl_metagenerator.htm

META Tag Generator [from SubmitCorner]
http://www.submitcorner.com/Tools/Meta/

Meta
http://html.about.com/cs/metatags/index.htm?once=true&

Meta Tags [from Cozy Cabin]
http://www.cozycabin.com/metatags.html

.

.

.