Web Authoring - unit 57      
Totton College logo

Last updated 20th November 2008

Live sites at www.totton.org

Dreamweaver CS3 supported by Photoshop CS3, Flash CS3

Sessions held in the Mac Room 164 of the Multimedia Department, Totton College, Southampton UK.

Download free fully-working 30 Day trial versions from Macromedia (click the 'try' link)

Free open source Web design software for Windows, Mac and Linux is available at http://www.nvu.com

Edexcel BTEC ND course qualification document

Unit abstract
Web authors produce the interfaces which more than a billion people worldwide use
in increasingly sophisticated ways.

Some of the applications for Websites include advertising, sales, education, gaming,
communicating, news, sound and vision, research and sharing, to name but a few.

People are developing new ways of communicating through instant messaging,
voiceover internet protocol (VoIP) and Web logs (blogs).

Shopping habits have also changed with savvy users making use of
online product reviews, ratings, price comparison tools

and online auctions to make sure they get the best deals.

The internet is no longer limited to the desktop: millions of users access web pages
through mobile devices (mobile phones, personal digital assistants (PDAs), digital television, etc).

Businesses make significant use of web-accessible material on their intranet sites.

Most medium to large organisations have their own website development and
management teams. The exciting thing is that the internet is still a developing,
evolving medium with plenty of scope for individual expression, innovation and creativity.

This unit provides knowledge, skills, understanding and practical experience for
learners in authoring for the worldwide Web. It will provide learners with core
knowledge and skills appropriate to a wide range of jobs classified under the broad
title of Web authoring including Web page design, Website publishing, testing and
planning, and search engine optimisation.

Learners will develop an understanding of the concepts and terminology related to
Web authoring. They will also learn the basics of website design and the tools and
features of Web authoring software.

Learners will touch on other important issues such as accessibility, security, reliability,
availability, speed and viruses. The unit will also help learners identify the personal
development required to pursue a career in Web development.

Learning outcomes
On completion of this unit a learner should:

1 Understand hypertext markup language (HTML)

Web page: Web page construction; text; fonts; colour; images; tables; hyperlinks;
language and terminology; metadata; css

HTML: nature of HTML and XHTML (extensible hypertext markup language);
features of HTML and XHTML; how to use HTML and XHTML

2 Be able to use Website design and production software

Language and terminology: authoring; sites; uploading; File Transfer Protocol (FTP)
Workspace: view; title bar; tab bar; menus

Panels: common; layout; text; tables; frames; forms; templates; characters;
media; head; script; applications; design; code; application; files; answers;
properties

Tools and features: drag and drop; linking; integration and import of different
media formats; browser compatibility; ease of use; standard colour palettes;
interactivity; site management; built-in FTP; built in libraries; templates; HTML
editor; frames; navigation bars; frame content; forms; single line; multiple line;
check boxes; radio buttons; list menus; buttons; validation and testing; editing
code; style sheets; custom styles; cascading styles; external and internal styles;
find and replace; layers; creating; naming; modifying; order; nesting; animation;
keyframes; objects and properties; visibility; behaviours

Site management: purposes and uses of site management; site maps; local and
remote sites; connections; copying; synchronisation

3 Be able to produce a media rich Website to a specification

Components of production: client’s requirements; audience considerations;
generation of ideas; conceptualisation; visualisation; information architecture;
storyboarding; resourcing

Planning: importance of planning; time management; deadlines

Production: adhering to schedule; teamwork and management of resources;
liaison with client

Professionalism: meeting deadlines; client negotiation; quality management;
teamworking; liaison with client; working to the client’s brief; presentations

4 Be able to publish, test and review own Website

Sources of information: self-evaluation; documentation, eg notes, sketches, story
boards, production logs; comments from others, eg audience, peers, tutors, client

Production process: pre-production, eg planning, preparation; production, eg
time management, project management, monitoring work in progress, technical
competencies, creative ability, own work, teamwork

Accessibility: alt text; use of tables; shortcut keys; skip keys; colours and contrast;
use of validation tools

Search engine optimisation: meta tags; search engine ranking algorithms; links to
established sites; preventing Web pages being spidered; avoiding errors, eg
machine-unreadable menus, broken links, poor navigation structure

Testing: uploading to server (FTP); broken hyperlinks; speed; security; browser
compatibility; W3C standards-compliance; usability; accessibility

Finished product: compared with original intentions; fitness for purpose;
appropriateness to audience; technical qualities; aesthetic qualities; content; style

Edexcel recommended Web sites:

Edexcel recommended Books: (NB we are using CS3, a newer version than 8)

  • Andrew R — The CSS Anthology: 101 Essential Tips, Tricks and Hacks (SitePoint Pty Ltd, 2004)
  • Bruce B — Sams Teach Yourself Macromedia Dreamweaver 8 in 24 Hours (Sams Publishing, 2005)
  • Budd A et al — CSS Mastery: Advanced Web Standards Solutions (Friends of Ed, 2006)
  • Krug S — Don’t Make Me Think! A Common Sense Approach to Web Usability (New Riders, 2005)
  • Lloyd I — Build Your Own Website the Right Way Using HTML & CSS (SitePoint Pty Ltd, 2006)
  • Niederst J — Learning Web Design: A Beginner’s Guide to HTML, Graphics and Beyond (O’Reilly, 2003)
  • Warner J — Dreamweaver 8 for Dummies (Hungry Minds Inc, 2005)


Introductions and first Web page
Introduction. Setting up your site. Create first Web page using page properties, the toolbox and properties inspector. index.htm page. Setting typefaces, font size, style and colour. (If using MX 2004, 8 or CS3 you can make Dreamweaver use html font sizes of 1-7 by changing preferences>general and unchecking the box for 'use CSS instead of html tags'). Adding a second page and links. Previewing your Web site in a browser by pressing F12. View source code in Dreamweaver or the browser - a peek at the html code you are creating with Dreamweaver.

Personalise your site with images
Adding your own pictures from disc, by scanning or digital photography. Editing images with Adobe Photoshop or Imageready. Optimising graphic file formats: jpeg, gif and .png.

History of the internet & WWW. Image maps, Rollovers in Dreamweaver
History of the Internet and Sir Tim Berners-Lee, inventor of the WWW - wikipedia entry. An article on Web 2.0  More on graphics, Image map hot spots to create links on specific areas of a picture, creating simple Rollovers and buttons. Dreamweaver writes the JavaScript.

Improving layout control
Introduction to using layers to structure your page layout using the power of CSS. Using tables to improve layout. Table spacing and padding. Download this transparent spacer.gif to help control table cell width and height.

Spell checking. Designing for your readers using the Window Size pop-up to prepare your site at a suitable size (800 x 600 or 640 x 480 pixels recommended). Rulers and tracing images.

Dynamic HTML
Simple animation within Dreamweaver using DHTML to move layers around or to create simple image slideshows.

Half Term  
No Session, you may wish to use the time at home to plan your site or a simple animation.

Experiment with Flash animation
Investigate Flash, a natural partner (and perhaps rival) to Dreamweaver.
Flash enhanced sites and online tutorials for those who would like to know more. Flash animator's victim

Animated gifs, adding interest and enhancements
Animating a .gif using Adobe Imageready. Adding sound, QuickTime movies, Flash .swf and Shockwave .dcr animation elements. Web video formats. Hosting video online - these files can be huge and take up all your web space and bandwidth, so it can be worth getting them hosted on one of these free services.

Photoshop Web Gallery
Creating a Web gallery from a folder of images quickly using Photoshop CS.

Templates, Library Items and Frames
Templates and Assets such as Library items help ensure consistency throughout your site and allow faster site-wide modifications. Frames may help navigation but we look at some consequential problems and some alternatives to framesets.

CSS - Cascading Style Sheets
Using external Cascading Style Sheets in 8 to master text, control background images and remove underscores from links. Dreamweaver links for CSS including Zen Garden. Free CSS for Dreamweaver MX chapter from the Quickstart guide as an Acrobat pdf file.

Search engines, META tags, uploading your sites
 Help search engines with META tags to boost the numbers who find your site... Add links to your own site at wikipedia.org or when leaving comments at an online forum. Making informed decisions about how many of your target audience can access a feature. Domain Names. Submit to Web directories.

Uploading and testing your site so far to your own site or the group site:

Imageready rollovers, Accessibility Issues,
 Imageready rollovers, The semantic Web and CSS - separating content from style. This is a big step towards improving usability for people using alternative browsers and devices such as phones and Palm PDAs. Always use Alt text, which along with proper use of the <h1>Headline tag</h1> will also help with search engine ranking. Most sites improve for ALL users once the needs of some users are considered. BBC Accessibility info. Testing your site with online tools such as WebXACT (previously Bobby). Lynx text only browser. Lynx user guide. Access keys.

Christmas Holidays:

icon Navigation Bars
Graphics for this exercise can be obtained here. Make your navigation bars as Library items (in assets) to make it easy to add or subtract buttons on several pages at once. Example from Stone Arts Ltd. Google Toolbar for Firefox on Mac.

Favicons, browser issues, working on your project site
Favicons - the 16x16 pixel images in the address bar and bookmarked favourites list.

Select Image:  then    using FavIcon from Pics

MicroSoft guide, favicon.co.uk and Photoshop plug-in from iconfactory.com Issues with Browser compatibility.


icon ©, working on your project site
Copyright © facts. Roger Dean's copyright warning. Using Photoshop to add a text layer with reduced opacity to your images to deter online theft and adding a digimarc from the bottom of the filters menu. On Windows you can get the © symbol by holding down Alt and typing 0169 on the numeric keypad, or Alt g on a Mac. Individual review and assistance with project development.  no right click

icon Passwords
Password protect part of your site, for 'members only' or to develop your clients' sites: http://www.javascriptkit.com/script/cutindex6.shtml  iframes

icon html
A little on html - hypertext mark-up language - coding.

working on your site
CSS revision, especially making interesting rollover effect links quickly.

 

Half Term  no session


Add ads, working on your site

Advertising to cover costs or make profits. Tradedoubler and Amazon. Add a hitcounter or get traffic information for free from statcounter.  For pointers about responsible advertising, try this from Jakob Nielsen. Individual project assistance will be available.   clickbank

HTML formatted email. working on your site
Sending an email with images, logos and html layout, useful for product announcements, newsletters and special offers.

working on your site & folder
Work on and then hand in your written documentation, annotated code print outs and screen captures in an A4 ringbinder marked with your name, e-mail address and phone number. Web site to be either uploaded to a live site or submitted on a CD, preferably both. Viewing and printing the source files from a browser, annotating the code. Individual assistance will be given.


Index of 2007 evening class sites

free online shopping cart systems :
www.oscommerce.org .php and MySQL system which can be run on Macs, Linux and Windows
www.comersus.com .asp system for Windows IIS servers and can be administered from Macs, Linux and Windows. Advanced features require purchase of a range of options.

recommended paid-for e-commerce solution :
http://www.easywebstore.co.uk good telephone support, cheap, £30 set up, £20 per month thereafter, no long contract. Flexible interface, well integrated with online merchant payment systems such as paypal or the better alternatives such as nochex and protx. No limit on web space or traffic.

alternatives include actinic.com, 1and1.com, ecommercetemplates.com and ekmpowershop.com

 

Looking for follow on courses? Totton College Services to Business also run many relevant courses, call 023 80 874 874 or email: info@servicestobusiness.com

Recommended booklist

 

Induction project

25 Sep 08 - Setting up a site, index page, adding additional pages, links

2 Oct 08 - Adding additional pages, images, image optimisation handouts

9 Oct 08 - rollover images, making a .gif button in Photoshop

16 Oct 08 - layout using tables

 

External links are of course subject to change.
Jednet cannot be held responsible for other people's sites.
If any of these links are broken or lead to unsuitable content please contact jednet@mac.com

jednet home page