Transcript 8.2 Teacher resource 5
Using Dreamweaver
Dreamweaver has 2 screens that do different things
•
The Document window
•
where you create your WebPages
•
The Site window
•
where you manage your website resources, layout and files
Slide 1
Document toolbar and menus toolbar
The Document window
Insert bar Property inspector Time indicator: gives an approximation of download time of the page
Slide 2
The Site window
The Site panel view lets you see your entire site and all its resources It has several ways of looking at your site 1.
as a ‘Site Map’ – a hierarchy map.
2. as lists of files,
• •
It allows you to: open files, to rename files, to add new folders or files to a site, or to refresh the view of a site after changes have been made. determine which files have been updated since the last time they were transferred Slide 3
Create the Files
• Go to the T drive > RS open your tutor groups folder • Create a new folder Using your initials and surname • In this folder create another folder called “images” • These are the folders you will save all website work
Slide 4
Set up the folder for your site – choose the Site window
Select Site and
New Site
1.
2.
Give your site a name 3.
Select
No
Click Next Click Next
Slide 5
Finishing the setting up your website files
4.
Click Next 5.
Select None Click on the folder and
Select
your Form Group’s File on the T drive.
Select the folder you just created.
Click Next 6.
Click Done
Slide 6
Start creating a webpage – return to the untitled document screen Slide 7
Use the
Insert Bar table icon
to insert a base table for the page layout.
Cell padding adjusts the space between the edge of the cell and the text.
Select the required numbers of Rows and Columns.
Select the width of the table: if this is not entered, the table will adjust according to the items in the cells and the window size of the browser.
Border sets the width of the boarder – if you choose “0” then it will not show in the final webpage Cell spacing adjusts the width of the space between the cells.
Slide 8
This base table is indicated by
dotted lines.
This table will
not display
in the webpage This example has 2 rows and 3 columns.
Each cell is used to contain an object: text, image, menu, etc.
This base table indicated by
double lines because a boarder width of 1 was selected.
This table
will display
in the final webpage. The property inspector bar shows the properties of a selected item and is used to bar to change it’s format
Slide 9
1. Enter main title.
2. Use drop down
Format
menu to on the Property Inspector bar select
Heading 1
.
4. Centre the text if you wish.
Add further text as required in relevant cells.
Don’t format
the text at this stage.
Slide 10
Putting in Links and Images Insert an image
by clicking the image button on the insert bar and find the file on the T drive in the resources folder Enter the text for the
hyper links
Pressing
Return
at the end of a line produces a new paragraph.
If the
image
is outside your website files you will be asked to save it - save it in your
image file Slide 11
Save your new home page – keep the file names in lowercase and simple using files names that that are short and give some idea what the page is about. They should all end in h Your first page is the
home page
“
index
” and you must
all
do this.
it is a convention to called it the The sub pages should have file names that indicate what they are.
When you save you will save into the file you created in the previous lessons.
You will be asked to save images you inserted into your webpage into this file as well. You should create an images file to store them which will help organise your site Create the the other WebPages for your site ready to put the hyper links in to link up your pages To create a new page click on
File
and select
New
document to open a new web
Slide 12
Now you have created the web pages you can link them to your home page 1. Highlight required text.
2. Either:
a) Click in the Link box
on the properties inspector bar and type the required URL (if you can remember it) and it must be exactly right including the extension
b) Or easier
- click on the folder and find the file select it and click OK
Slide 13
Click in the part of the table you want to change.
Use the Properties inspector to change what you want E.g. here the background colour has been changed Click on the edge of the table and a heavy black line appears and the property inspector changes Change the table width so it will display across the whole screen when in a browser by selecting 100 %
Slide 14
Apply your formatting by using style sheets.
Make sure these are in users’ folders before you start.
1. Use
View
,
HTML
to view the HTML coding.
2. Add the reference to the style sheet in the head section.
3. Save and preview.
4. Edit the style sheet as appropriate.
Slide 15
Style sheet one
Slide 16
Style sheet two
Slide 17
Style sheet three
Slide 18
Style sheet four
Slide 19