Web Authoring - unit 59 |
updated 13th September 2012
Live sites at www.totton.org
Dreamweaver CS5.5 supported by Photoshop CS5.5, Flash CS5.5
Sessions held in the Multimedia
Department, Totton College, Southampton UK.
Download free fully-working 30 Day trial versions from Adobe (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
Edexcel recommended Web sites
Edexcel recommended Books
Pass | Merit | Distinction criteria
Introductions and first Web page
- Set up your site in Dreamweaver CS5 (or Dreamweaver CS3)
- Create first Web page using page properties (Ctrl-J), the toolbox and properties inspector. Your home page should be saved as index.htm and will likely be xhtml (extensible hypertext markup language).
- View source code in Dreamweaver using the 'Split' button at the top left of your window
or in a browser - tweaking the code you are creating with Dreamweaver can be helpful when resolving problems and becomes essential if you want to embed YouTube videos, advertising banners or jQuery enhancements.
- Creating more pages, saving them with simple names with no spaces. Adding links.
your Web site in a browser by pressing F12 or choosing File > Preview in Browser > Firefox or click and choose a browser from the little globe symbol to the left of the title box:
- You can add additional browsers by choosing File > Preview in Browser > Edit Browser List...
Add images and rollovers: Learning Objectives
- Add images to your site from USB stick, disc, digital photography, or from the Web.
- Simple editing with Adobe Photoshop and optimising for the Web using graphic file formats jpeg, gif ('jif') & png ('ping!').
(buttons work the same way).
History of the internet & WWW. Image maps,
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
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.
Simple animation within Dreamweaver using DHTML to move layers around or to create simple image slideshows.
No Session, you may wish to use the time at home to plan your site or a
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.
Snow day 2nd Dec 2010
Paper prototyping your Web site
with Flash animation
a natural partner (and perhaps rival) to Dreamweaver.
Flash enhanced sites and online
tutorials. Flash animator's victim
Animated gifs, adding
interest and enhancements
Animating a .gif using Adobe Imageready. Adding
.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.
Library Items and Frames
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 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.
engines, META tags, uploading your sites
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:
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.
Favicons, browser issues, working on your project site
Favicons - the 16x16 pixel images in the address bar and bookmarked favourites list.
MicroSoft guide, favicon.co.uk and Photoshop plug-in from iconfactory.com Issues with Browser compatibility.
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
little on html - hypertext mark-up language - coding.
working on your site
revision, especially making interesting rollover effect links quickly.
Half Term no session
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
Add ads, working on your site
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
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.
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: email@example.com
Setting up a site, index page, adding additional pages, links
Adding additional pages, images, image optimisation handouts
rollover images, making a .gif button in Photoshop
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