20
Using Dreamweaver

Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Embed Size (px)

Citation preview

Page 1: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Using Dreamweaver

Page 2: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 2

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

Page 3: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 3

Document toolbar and menus toolbar

Time indicator:gives an approximation of download time of the page

Insert bar

Property inspector

The Document

window

Page 4: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 4

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

The Site window

Page 5: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 5

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

Page 6: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 6

Give your site a name

Set up the folder for your site – choose the Site window

2.

Select Site and New Site

1.

Click Next

Select NoClick Next

3.

Page 7: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 7

4.

5.

6.

Click on the folder and Select your Form Group’s File on the T drive.

Select the folder you just created.

Select None

Finishing the setting up your website files

Click Next

Click Next

Click Done

Page 8: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 8

Start creating a webpage – return to the untitled document screen

Page 9: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 9

Use the Insert Bar table icon to insert a base table for the page layout.

Cell spacing adjusts the width of the space between the cells.

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.

Select the required numbers of Rows and Columns.

Cell padding adjusts the space between the edge of the cell and the text.

Border sets the width of the boarder – if you choose “0” then it will not show in the final webpage

Page 10: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 10

This base table is indicated by dotted lines. This table will not display in the webpageThis 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

Page 11: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 11

1. Enter main title.

4. Centre the text if you wish.

Add further text as required in relevant cells. Don’t format the text at this stage.

2. Use drop down Format menu to on the Property Inspector bar select Heading 1.

Page 12: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 12

Enter the text for the hyper links

Pressing Return at the end of a line produces a new paragraph.

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

If the image is outside your website files you will be asked to save it - save it in your image file

Page 13: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 13

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 it is a convention to called it the “index” and you must all do this.

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 to open a new web document

Page 14: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 14

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

Page 15: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 15

Click in the part of the table you want to change.

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 %

Use the Properties inspector to change what you wantE.g. here the background colour has been changed

Page 16: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 16

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.

Page 17: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 17

Style sheet one

Page 18: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 18

Style sheet two

Page 19: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 19

Style sheet three

Page 20: Using Dreamweaver. Slide 1 Dreamweaver has 2 screens that do different things The Document window where you create your WebPages The Site window where

Slide 20

Style sheet four