CSS help pages on Adobe :

CSS help pages on Adobe : 

Good example css to download: http://www.adobe.com/devnet/dreamweaver/articles/css_3c_tableless.html download the zip file in the top right corner and then extract the files to your user space or usb pen. 

The files should now be in the css_3c_tableless[1] folder. Open the html file and examine the css at the top right hand side.


More complex resources if you want to find out more

http://www.adobe.com/devnet/dreamweaver/css.html

Info about layout of pages using CSS

http://www.apptools.com/examples/pagelayout101.php

Test website checkpoints:

Test website checkpoints: 

Do links work?

Are there suitable pics?

Is the text suitable for the audience?

Is the layout sensible?

Does it cover 3 online services?

 **Include suggestions for improvement.

Test out your work by putting it on a usb pen and use the test machine, all files used must be in the same folder, and you copy the entire folder to the usb pen.

Self assessment

You will then read their comments and write your own opinions about your work.

Then upload the word file (with both sets of comments) to fronter handin.

Show Mr H or M the website on the test machine.

CSS and GRAPHICS tips

CSS lets you define types of text and other elements on your pages.

This means you can change the CSS file setting and whole pages will automatically change.

You need to create a CSS file. - file, new, css style sheet then choose a starting point.

Then create a html file, then click in properties section on  style, and choose attach style sheet.

Then you can edit the style sheet with your own custom settings, eg Title: you can set the font, the colour, size etc.

This means you can define any element of a page and link it to the CSS.

Right click in the CSS area on the top right, and choose new, then choose, class, then write in the name for the class (eg title) this will appear in the style section once you have done this.

You can then highlight text and then choose the style of text in the style box.

NEXT save the page you have created as Template.  This can then be resaved under different names to give you a copy of your page.  You would want to set up the layout and standard links on this page, so that you don't need to redo this each time.

See this video for ideas :

FINALLY:
Whilst you can do the ebook without using CSS it would take more time and be very fiddly to update the settings across up to 20-30 pages eg. changing font size and colour on every page.


GRAPHICS:
You can use flash buttons for links to other pages, I would recommend that you use this with caution as errors can occur if you don't save the files in the right places.  It introduces complexity = more that can go wrong.

My recommendation is to use Powerpoint word art , then right click and save as picture, then use the picture file for the link.

Cover work for Monday 20/9

P1, Y12:

Using your new/old skills in Dreamweaver design a 2 page (using html) quick guide aimed at Senior citizens to explain 3 online services that they may wish to use.

You should have links between the 2 pages and you will need to use your notes and pics that you have stored on your blog.

You should have the work ready for Wednesdays lesson.

Dreamweaver tutorials:

In Mondays lesson we will be working on our eportfolios, we will be looking at creating the e book, and working out the structure for the ebook.  

In preparation you should look at the tasks below.

If you are new to dreamweaver you should check out the tutorials on:

1. http://www.dida-delivered.org/delivered/gym/index.htm

 Choose Website authoring software from the drop down menu.

Work through the 7 options listed on the left.  In each option work through the tasks and make notes on any difficult tasks, that you may forget, in a word file. 

This is a good site as you can do tutorials without needing the software to be installed.

2. http://www.teach-ict.net/software/dreamweaver/dreamweaver.htm : look here for video tutorials for these you need to have dreamweaver installed to practice.