Transcript IM 211 Web 5 and 6 PPTx

211 Multimedia Web Design
Lesson 5/6 Dreamweaver Practice
Starter
• Have a go at these recap games:
• www.reviseict.co.uk/games/results.shtml?search
Query=web design
• Scroll to the “Web Design” games.
Objectives
• Develop web authoring skills.
• Understand key web authoring terminology.
• Know how to create a simple webpage using web
authoring tools.
Getting Started: Things to Remember
1. Dreamweaver needs a site do be “defined” (set up) and
everything stored within one folder.
2. Images should be in a sub-folder inside your site.
3. Pages should contain NO spaces in the file names (e.g.
contactpage.html)
4. Files should end in .html (you have to write this yourself).
5. The FIRST page in your site should be called index.html
6. You should use TABLES to layout your page.
DEMO
•
Demonstration of:
•
Creating a folder structure
•
Defining a site
•
Saving as index.html
•
Entering a title
•
Using tables – setting width to 100%, no border
•
This is so it is suitable for different size screens – self adjusting.
•
Setting page properties (link colours, fonts, etc)
•
Adding an image (from within your images folder)
•
Creating another page and linking it (save existing page as another name)
Your First Task
•
HELP VIDEOS: www.teachict.net/software/dreamweaver/dreamweaver.htm
1. Create a folder structure for your site “FirstSite.” Inside it, create an
images folder.
2. In Dreamweaver, define a new site to your folder structure.
3. Create a new page. Set appropriate page properties of your choice.
Include a page title, and save as “index.html”
4. You will create two pages. The first one will be about your favourite film.
The second will be about your favourite song. You will need links between
them. Use the following layout:
MID-LESSON PLENARY: DISCUSSION
•
After making your first mini site in Dreamweaver:
•
What problems did you have?
•
What problems do you think you will have?
•
What did you find easy?
•
What did you find difficult?
•
Let’s look at a site developed in Dreamweaver
• What does it have on every page.
• What is good about it? (think about navigation, font, colours)
• What is not good about it? (www.gr82bgeeky.co.uk/)
TEMPLATES and CSS
•
•
Templates – These allow you to create a layout for your site which you want every
page to look like.
•
You can also ‘lock’ certain parts and make other parts editable.
•
The editable parts are the bits which will change on every page. The locked
parts will be the bits which will be the same.
•
If you change the template – ALL pages based on the template change too.
Cascading Style Sheets (CSS)
•
What if you want to use the same font or style throughout your site?
•
Can you be bothered setting it EVERY time. Then what if you change your mind
and would have to change it on EVERY page!
•
CSS let’s you set up what you want all your styles to be like on every page.
DEMO 2 – Templates and Style
•
Creating a site template (File New  Template  HTML Template)
•
Setting page properties and default title
•
Setting up the layout using Tables.
•
100%, No border, correct alignment in cells.
•
Creating a Style Sheet (attaching to template).
•
Creating some styles (must start with a ‘.’ e.g. .Headings .MainText
.SubHeadings)
•
Using Styles
•
Inserting EDITABLE REGIONS and entering instructions
•
Saving and using the template.
•
Making changes and bouncing the changes throughout.
Task 2 – Creating a site and using CSS
•
•
It is now your turn to create a simple site which will include:
•
A template with editable regions
•
A table for layout
•
A stylesheet with styles for headings and the main body text.
•
Appropriate background and link settings.
•
Rollover buttons
•
Add-ons (Bits that you NEED to know that I haven’t shown you)
Follow the instructions in “Dreamwaver iMedia Guide” You will work through this over
the next two lessons.
Objectives Review
• Develop web authoring skills.
• Understand key web authoring terminology.
• Know how to create a simple webpage using web
authoring tools.
Plenary: Pass the Knowledge
• Going around the room,
• Each pod has to give three things they have
learnt in this unit so far.
• You cannot repeat what another pod has said.
• Can your pod / group rise to the challenge?