Unit 12: Web Authoring

NQF Level 2: BTEC First
Guided learning hours: 60

Live sites at www.totton.org

Unit abstract

Whatever the size of a business, whether a huge international business like News International
or a family-run hotel in the Scottish Highlands, it is more than likely to have a website.

Websites are now the accepted way for businesses to communicate with their clients and
customers – to advertise their existence, tell people what they have to offer, and to sell their
products and services. There is, consequently, a growing need for those with the skills to
construct and maintain these sites.

This unit will develop initial skills in web authoring techniques. Learners will develop an
understanding of the worldwide web and the appropriate skills to produce web pages. Learners
will be able to undertake simple tasks relating to the design and implementation of web pages.
They will learn about authoring techniques, how to compile websites and how to publish their
material on the worldwide web.


Learning outcomes
On completion of this unit a learner should:

1 Know about web authoring
World wide web; internet service providers (URL, domain name, top level domain, domain
name registration, hosting)
Software: HTML text editor eg Notepad; visual editor eg WYSIWYG web editor
HTML: font size; font colour; background; paragraph, line break; hyperlinks eg image,
page, website; page name eg index.htm for homepage

2 Be able to develop a plan for a website
Plan: purpose, audience, legal and ethical considerations
Structure: site structure eg home page, linked content pages; page layout eg consistency,
heading style, body style, colours, backgrounds
Content: text; imported content eg text, images, animation, video, sounds, music

3 Be able to use web authoring software to produce a website
File types: eg htm, html, gif, jpeg, wav, mov, mpeg
Page structure: head; body; metatags (author, keywords, description)
Layout: background; repeated content eg copyright, trademark, logo, head, subhead, body;
template; style sheets
Tables: dimensions; table alignment; cells (border, padding, colour, cell alignment)
Import content: eg text; images, animated gif, flash, video, sound
Text: font; alignment; emphasis; size; heading styles; colour
Lists: eg unordered, ordered
Images: resolution; size; alignment (horizontal and vertical); still; alternative text
Hyperlinks: page links; www; email; anchors (text and image); link colours

4 Be able to review own web authoring work
Finished product: compared with original intentions; suitability for intended audience;
technical qualities; aesthetic qualities
Production process: technical competencies; creative abilities; time management; teamwork
(if appropriate)
Sources of information: self-evaluation; comments from others eg audience, peers, tutors,
client; documentation eg notes, minutes of meeting, production diaries


This unit introduces learners to the worldwide web and to the software required to author
websites. Their explorations should begin with research into the variety of sites and information
on the worldwide web. Learners should be encouraged to use libraries, archives and electronic
sources for research. They should be looking at a wide range of websites and understanding
how these sites are constructed.

Learners could produce a report on their findings, maybe
capturing some images to support this exploration. Their introduction to the concept of web
authoring software may need to take place in classroom situations with individual exercises
being undertaken by learners. They should be allowed to experiment with software to produce
simple web pages that could later be turned into more sophisticated material.

Learners should plan and produce their own pages for a website. This website might be
produced for an intranet rather than launching it on an internet site. Learners should be allowed
to develop appropriate pages from a basic home page right through to more complicated pages
such as forms or animated pages.

Learners should be encouraged to evaluate their own work and the work of their team, where
appropriate. They should use appropriate language and terminology when producing their
evaluation. They should look at the technical qualities of the web authoring work and how it
works in relation to their initial ideas.

Last updated 16th October 2008

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)



dw 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.

dw 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.

dw 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.

dw 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.

dw 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.


dw 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

dw 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.

dw 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.

dw 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.

dw 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:

dw 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.

dw 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.

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

 


Half Term  no session



dw 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

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

dw 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

 

 

Recommended booklist

 

 

Induction project

25 Sep 08 - Print Production introduction to InDesign CS3

2 Oct 08 - Print Production Magazine Cover using InDesign CS3, Gutenberg video, wood & metal type

9 Oct 08 - Setting up a site, index page, adding additional pages, links

16 Oct 08 - Images, Rollover images, making a .gif button in Photoshop

23 Oct 08 - image optimisation handouts, Layout using tables


 

© Jednet 2000-2015. 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

ND First unit information

Unit 12 Web Authoring is on page 121 of BF017268_FD_in_Media_L2_Issue_3.pdf © Edexcel Limited 2008

http://www.edexcel.org.uk/quals/first/media-pa/btec-fd-sep-2006/btec-fd-media/