211 Multimedia Web Design Lesson 5/6 Dreamweaver Practice

Starter Have a go at these recap games: 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: ict.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? (

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?