IMPORTANT Filenames. Whenever you save a file that will be used on a website, you must take care to use a filename that will work well on the Web. Such filenames should contain only letters, no special characters and no spaces. They must also end with the appropriate filename extension. In this case .html or .htm

1

Lesson One: Tutor Demonstration:
Looking at Dreamweaver.
 Become familiar with the Menu Bar, and work environment.
Click on the triangles to open and close the panels.
Open panels Design, Advanced Layout and Files plus the Properties Inspector.
Use the handle to expand and collapse the panels right and left across your screen.

Student Task:Set up your work space panels and inspectors.
Q: How do I set up my work space panels and inspectors?
A: Go to Window on the Menu Bar. Take a look at the drop down list. It will look something like this:
 Click on them to open them on the Right hand side of your screen.
Click on the triangles to open and close the panels.
Open panels Design, Advanced Layout and Files plus the Properties Inspector.
Use the handle to expand and collapse the panels right and left across your screen.
You will see them come into action when you have created your first page.

You can set rulers along the edge of your workspace and add a background grid too, View>Rulers>Show (repeat this action, specifying pixels) and View>Grid>Grid Settings, allows you to change the colour of the gird, snap to grid, grid spacing in pixels, inches or centimeters and choose it to be made from lines or dots.


Tutor Demonstration: Show how to make a simple three page site.

Student Task: Copy a simple three page site.
Q: How do I create my first page?
A: Go to File>New on the Menu Bar. A grey box appears titled New Document. Select General, Basic Page, HTML and then click Create.

Q: How do I set rulers?
A: View>Rulers>Show
A: View>Rulers>Pixels

Q. How do I set a background grid?
A: View>Grid>Grid Settings, allows you to change the colour of the gird, snap to grid, grid spacing in pixels, inches or centimeters and choose it to be made from lines or dots.

Q: How do I title my page?
A: To help you tell one page from another you should title your page. Go to Modify on the Menu Bar and select Page Properties. This box sets up the underlying formatting for each individual page but right now we are just going to title it. Call it 'Home', press OK.

Q: What should I put in my page?
A: Start by inserting a layer. Go to Insert on the Menu Bar. Choose Layer from the dropdown menu. A layer will appear in the top left corner of your workspace.

Q: How big should I make my first layer?
A: 800 pixels wide X 600 pixels high. Go to View on the Menu Bar. Choose Rulers>Show>Pixels. You should have rulers along the top and left hand edge of your workspace to help you.

Q: What shall I put in my layer?
A: Today we are putting in some text links.
Click on the layer to select it, you will see small black square handles around its edges. You can move your layer around the workspace by click and dragging the white handle. To insert content, click inside the layer rectangle, it will now appear as a linear rectangle, with the cursor pulsing in the top left corner.
Type the names of your three pages, eg.
Home | page one | page two |
using a space and the perpendicular line and another space to divide them. We will turn these into hyperlinks in a moment. See Q: How do I link my pages?
Now save your page.

Q: How do I save my page?
A: Go to File>Save As on the Menu Bar. Enter the word index.html in the name box. This will be your home page and as such must always be given the name index.html or index.htm for it to function on the internet. You will only have one page named index.html or index.htm per site. Click Save.

Q: How should I name and save my page?
A: Go to File>Save As on the Menu Bar. Use only lower case letters, fill gaps with underscore like this:
page_one and make sure .htm or .html is added at the end. Dreamweaver should add it automatically.
NB. this is different from giving your page a title, which we have already done.

Q: How do I create my second page?
In order that your second page has the same layout as index.html and so maintains consistency of site design, save a copy of index.html. To do this, with index.html (Untitled/welcome) open, go to File>SaveAs on the Menu bar. Save it at page_one.html. You should now have two windows open, with your two pages on.

We now have two independent pages. To make a third page, repeat the process of copying a page, this time you could copy page_one, saving it as page_two. You have now created three pages: index.html, page_one.html and page_two.html.

To make these into a working linked mini-site we need to link the pages.
Q: How do I link my pages?
A: The simplest form of link is a text hyperlink.
With index.html open in your work space place your cursor next to the word Home and draw it across the word, highlighting the text, thereby selecting it.
Now look in the properties inspector, and find the box labelled Link. Click in and type in the name of the file you want this text to link to when clicked. In this case it is the file index.html.
Repeat this by highlighting the words page one, and linking to page_one.html, and then again to page two and linking to page_two.html.
Now save your pages. File>SaveAll.

Q: How do I know if my site links work?
A: To test your site you need to Preview it in a Browser. Once you have saved your page or pages, go to File<Preview in Browser<and choose from the browsers listed on your menu. FireFox or Internet Explorer IE, should be available. You could also just press the button F12.
The file you had open in your workspace will be visible in your Browser window and you can try out your newly made links to the other pages.

THIS IS THE END OF LESSON ONE

Home Work:
Start planning and gathering the content for your website.
Student task:
Sketch a plan for your Homepage
on a sheet of A4 paper, turned landscape.
Divide it into zones. One for site logo, one for navigation, one for short description of your site and one for an image or images.
Your design can be as regimented or fluid as you choose to make it.
Content comprises:
Name of website
Colour scheme
Text
Images

Health & Safety Briefing
You will be taken through the health and safety procedures at CSV Media Clubhouse prior to commencing the first lesson

You will then switch on your PC, log on with user name and password, creating your personal folder.
To make your personal folder:
Click on the big green start button at bottom left of the screen.
Click on Webstudents on angela's students.
Go to File>New>Folder.
The new folder is waiting for you to name it.
Highlight the text next to the new folder and name it:
your name

Go to the Start area again, and navigate to
All Programs> Macromedia>
MacromediaDreamweaver MX icon
or your desktop icon.
Click on it and the program will launch.
Close or ignore the white welcome screen and the program is ready to use.

The user interface, or "What does this button do?"

 

Creating a Home Page
Title   File name
Home
=
 index.html
page one
=
 page_one.html
page two
=
 page_two.html
Panels and inspectors are the tools that let you edit and design your page and manage your files.
Remember:
Each page has a Title and a File name.

The Title is there to help you to identify the page more informally, and is the wording which is shown along the top of the grey browser frame when the page is viewed on the internet. You can use spaces in this.

The File Name is the identity of the page which is needed by the computer to build it successfully into a web site. You cannot use spaces, or characters. You can use underscore and fullstops (periods).

Summary of Lesson One:
You have learned to:
set up work space panels, rulers, grid and inspectors;
create, title and save pages;
insert a layer;
insert text hyperlinks
and preview a mini-site in the Browser.

 

 




Back to top

User name: web
Password: student98
Store in: U:/your name


you can download a trial copy of Dreamweaver 8 from
http://www.macromedia.com/software/dreamweaver/

Web Design course at CSV Media, Ipswich