Dreamweaver CS3 - Course Notes - Western...

Dreamweaver CS3

- Course Notes –

Vivi Tryphonopoulos

Vivi Tryphonopoulos Customized Software Solutions

www.css-softwaresolutions.com

[email protected]

(519) 657-1941

Slide

Number Topic

2 3

4

5

Dreamweaver Overview Dreamweaver Versions

Intro to the Web

Web Page Creation Process

6 7

8

9

10

11

12

13

14

15

16

Starting with Dreamweaver Dreamweaver Screen

Dreamweaver Windows

Show/Hide Panels

Getting Help

Website Structure

Creating a New Site

Create a New Page

Open a Web Page

Switching between Open Webpages

Opening an Existing Site

17

18

19

20

21

22

23

24

25

26

Formatting and Styling Text Entering Text

View Layouts: Code and Design

To Preview a webpage in a Browser

Page Title Property

Paragraph Formatting: left, right, center

Formatting text: size, color, fonts

Adding a Horizontal Ruler

Indenting Paragraphs

Changing the Background Color

Meta Tags for Search Engines

27

28

29

30

31

32

33

34

Working with Images and Graphics Graphics

Inserting an Image

Download time of page

Image Attributes: size, alignment, borders

Resize image

Align Image with text

Add space around image

Alternative text

35 Creating Lists

36 37

38

39

40

41

42

Creating Links Hyperlink to a Page within your website

Hyperlink to another website

Hyperlink to an e-mail address

Creating an image hyperlink

Creating an Image map

Links within a Web Page

43

44

45

46

47

48

Tables Inserting a Table

Inserting and Deleting Rows/Columns

Table Properties

Cell Properties

Merging and Splitting Cells

49

50,51

52

Web Publishing

Publishing from Dreamweaver

Secure Shell

Where to Get Help

1

1

Introduction to Dreamweaver CS3

Instructor: Vivi TryphonopoulosCustomized Software Solutions


ITS Training Lab1393 Western Road

London, Ontario, Canada, N6A 3K7Tel: (519) 661-2151Fax: (519) 661-3486

Vivi Tryphonopoulos, H.Bsc., MSc. Customized Software Solutionswww.css-softwaresolutions.comvivi@[email protected](519) 657-1941

2

Dreamweaver Overview

File

managing Create website, new file, open files/website etc.

Text

formattingEntering, editing, color, font attributes edit and format text

Graphics Inserting images, customizing

Structured

ListsCreating lists ie. Bullets, numbering, indenting

Creating

LinksFor text, images, e-mail links, bookmarks, hotspots

Tables Creating, adding and deleting rows/columns, splitting and merging cells, editing tables/cell properties

Publish web

pagesUploading to server using Secure Shell

2

3

Dreamweaver versions

Dreamweaver is a web page editor & site management tool

� WYSIWYG interface – much easier to work with

� Create and edit pages

� Organize your pages

� Link them easier�

�Dreamweaver 4 (older)

�Dreamweaver MX

�Dreamweaver MX for 2004

�Dreamweaver 8

�Dreamweaver CS3 (in lab)

�Dreamweaver CS4 (just came out)

�More powerful, more features

�Style Sheet access improvements

4

Intro to the Web

Web Page� HTML - Hyper Text Markup

Language

� Computer instructions used to create web pages

Web Site

� Collection of web pages created and maintained by an organization/individual

Web Server

� a computer that stores web pages and makes them available for people to see on the Internet

Web Browser

� program that allows you to view the Internet Ie. MS Internet Explorer, Netscape

3

5

Web Page Creation Process

Planning &Design

Implementation

Publish

Maintenance

Stages of creating a Web Page

Gather information, plan layout, identify links, colors

Build website with DreamweaverTest out in IE, Firefox, NetscapeBackup

Upload to server - Internet ready

Making changes – Always BACKUP!!

6

Starting with Dreamweaver CS3From Desktop

1. Click on Dreamweaver logo icon

To start program

1. Click on Start button on status bar

2. Select Programs> Adobe Design Premium CS3> Adobe Dreamweaver CS3

DW 8 Bug Fixes

1. Go to site, download fix to your computer system and install. It will automatically update your system

� http://www.adobe.com/support/dreamweaver/downloads_updaters.html

4

7

Dreamweaver Screen

Panels provides you with commands/properties/characteristics of the current object or

task you are busy with

� can move them around on the screen (click and drag)

� most common floating panels:

Property Inspector and Panel Headings

Document

WindowArea where you build

Your webpage (add

text, images and other

elements)

8

Dreamweaver Windows/Panels

Document window� The actual working environment where you are

entering text, images to build your web page

Site Panel

� folder that you are currently working on

� Gives filenames, path directory etc.

Property Panel

� Characteristics of objects/text that you have inserted ie. Size, color, text font etc.

5

9

� The side panels always stay on

� To activate the Property Inspector/ Site windowFrom the menu bar, select Window > Properties

From the menu bar, select Window > Files

� To hide/show panelsPress <F4> key to make panels appear and disappear.

To close a panel simply click the of the panel, and select “Close panel”

Drag panel

Show / Hide Panels

10

Getting Help� Opens in a new window for easy access

� access help by subject, keyword index, search function

� Tutorials available

� Can print help information

To start help1. From menu bar select Help > Dreamweaver Help

2. Select help by subject, keyword index or search.

3. To exit from help, click on the “x” button on the browser window.

4. To minimize the Help window so that it is available at all times when needed.

6

11

Website Structure

•All webpages pertaining to a website are stored in a folder on your computer

•Dreamweaver calls this folder a “site” •First webpage is usually called “index.htm”•Once you transfer your files to a server into a folder called “travel” , the URL address is:

www.uwo.ca/travel

•To view another webpage within the site, the URL address would be: www.uwo.ca/travel/aboutus.htm

Travel website

C:/My Documents/My Webs/travel

C:/My Documents/My Webs/travel

12

Creating a New Site -You must identify the folder where your website will

be stored

1. From the menu, select Site >Manage Sites

2. A Site definition dialog box pops up.

3. Click on the New button and select Site …wait until new box opens

� Site Name field: type a name

� Local Root field: Click ggon the folder icon and point to the directory where your files will be stored. And click on “Select” [If you need to create a folder you can do so by clicking on the new folder icon.]

� Cache field: check it on

4. Click OK to create the new site. The site window points to the directory indicated in the Local Root field.

7

13

Create a New Page

� Opens a new blank page and then you add text, images and other elements

1. To Create a New Page• From menu bar, select File >New and then from dialog box,

select “Basic Page” . An untitled document window appears. (the page name and filename are untitled until you save the page). You can now enter text etc.

To Save your file,• Select File > Save (or Save As) (v8�.html)

• Type in the name of the filename and make sure the folder is the right one.

14

Open a Web Page� You can open any HTML file (.htm or .html) no matter what it

was created in ie Frontpage

� Makes the assumption that you have a site window open

1. From menu bar, select File >Open2. The Open dialog box appears.3. Select the folder containing the web page, and then the

filename4. Click Open. File opens in the Document window

Or1. From the site window2. Double-click on the file you wish to open.

8

15

Switching between Open Webpages

� You can open as many webpages as you would like using File >Open command

To switch between files:� Click on the “tab” at the top of Document window that indicates the file you would like to open

or

� The files appear at the bottom of the drop down list

� From the menu, select Window

16

Opening an Existing Site

Open an existing folder where your webpages are stored so that you can work on them

From the site panel, click on the drop-

down box and Select the sitenameassociated with the web folder you wish to work on.

� If you do not see the site name then you need to go through the same instructions as “Creating a new site”

9

17

Entering Text

Paragraph break

� Leaves a blank line between lines (<p> HTML tag)

� Press <Enter>

Line break

� no space between lines (<br> HTML tag)

� Press <Shift><Enter>

� Automatic line wrapping

� The width of your paragraph depends on the width of the Web browser window (unless text is entered into a table feature)

18

View Layouts

Design View: - shows the WYSIWYG view

Code/Design View: - combo of both views

Code View: – shows your HTML code

10

19

To Preview a webpage in a Browser� You can see how your page will appear online by

previewing it in a web browser. It assumes that you have a browser or browsers installed on your computer.

1. From the menu, select File >Preview in Browser

2. Click the Web browser you want to preview the file in.

3. Your web browser launches and opens the current page (notice how the browser has a temporary filename for viewing in the browser)

Shorcut: Click on the Preview Icon or press <F12> key

Preview icon

20

Page Title property� Associates a general description of what webpage is all about

� Displays title on first line (title bar) when page is opened in browser window ,and when printed

� Equivalent to the <title> text </title> tag

1. In the Title field, type a name for your webpage and press <return>

2. The title appears in the title bar of the Document window as well as in the browser window.

11

21

Paragraph Formatting

� Known as text alignment

� Options: Center, left, right

1. Hi-light text or place cursor in the paragraph.

2. Click appropriate text alignment icon in Property

Inspector.

22

Formatting textControl:

a) Headers ie. H1, H2, H3, H4, H5, H6

b) Text color ie. Blue, green, red,…..

c) Text size ie. 8pt, 10 pt, 12 pt,…n or 8 px, 10 px……

d) Font type ie. New Times, Verdana,…

e) Special effects ie. Bold, italics, underline, superscript, subscript etc

f) Hilight Text ie. Add a color background to selected text

Commands found in Property Inspector. Hilight text and click on feature.

Headers

Text Color

Text SizeFont typeSpecial Effects

12

23

Adding a Horizontal Ruler� Acts as a separator to separate sections

� Note that a colored line will not be seen by Netscape browser

To adjust line color, length of line, alignment, shading:1. Click on line and from Property Inspector apply desired

effects.

2. To remove line, select line and press <Del>

To add a horizontal ruler:1. Position cursor where you want to insert line.

2. From menu select Insert > HTML >Horizontal Rule

3. A line spans the width of the web page.

24

Indenting Paragraphs

� Can indent/outdent a paragraph to make it stand out.

1. Hi-light text or place cursor in the paragraph.

2. Click indent or outdent icon in Property

Inspector as many times to indent text over.

13

25

Changing the Background Color

� For variety, you can change the background color of your Web page

To set a Background color

1. From menu, click onModify > Page Properties

2. Click on Background fieldto open color menu. Select color and click OK.

To set a Background image

1. From menu, click onModify > Page Properties

2. Click on Browse button beside the Background Image fieldand select the file. Click OK.

26

Meta TagsHelp influence how webpages are ranked by search engines

Must specifyDescription: A sentence description for the webpage

“Welcome to Travel Land! We’ve got the prices in town!”

Keywords: Keywords that other people may use during a search function

“travel, Ontario, cruises, holiday, packages, air, trips”

1. From the menu,

• select Insert > HTML >Head Tags >Description

• or select Insert > HTML > Head Tags > Keywords

2. Enter the descriptive sentence or the keywords

14

27

Graphics� Enhances the appearance of a web page

� Images can be obtained from scanner, digital camera, clipart, images from internet

� Common image formats

� .gif – clipart

� .jpg –photo

� Lower download times by using smaller graphics

� Download button

� Graphic sites

� http://dgl.microsoft.com

� www.coolarchive.com

� www.mediabuilder.com

� On-line stock photo companies ($$$)

� www.bigstockphoto.com

� www.istockphoto.com

28

Inserting an Image� A graphic must be stored as a .jpg or .gif

� All images must be in your website folder

1. Place cursor in location where image is to be inserted.

2. From menu, select Insert>Image and locate image file in the popup dialog box. Click OK.

3. It will prompt you with another dialog box to enter the “ALT” Field

To Delete image, select image and press <Del> key

15

29

Download time of page

� On status bar

Total size of page appears in Kilobytes

(includes text and images)

Estimated download time

•To view/change speed

From menu select Edit>Preferences>Status bar

Set Magnification

For working in DW

Choose %

Window Size

Setting monitor resolution

Choose size

30

Image Attributes� Once image is inserted, click on it and then you can

control attributes through Property Inspector panel

Sizealignment

Space around image Alternative text

Border

Sharpen,contrast,crop

16

31

Resize Image

Click on image and handles appear around image.

1. Position mouse over one of the handles.

2. Hold [Shift] key down and drag the image to the size (keeps ratio aspect).

Or

1. Click on image and handles appear around image.

2. In the Property Inspector, enter values for Height and Width.

� Enlargening image too large may distort picture

� 2 methods of resizing: dragging or Property Inspector

32

Align Image with Text

1. Click on image to select it. Note: the image must appear at the beginning of the text that you want to align with the image.

2. On Property Inspector, click on Align field and select the alignment option.

• Allows you to wrap text around image so that you can fit more

information on screen. (left or right)

• If image is aligned center, then image is on line by itself.

17

33

Add Space Around Image� Distinguishes the text and images – adds white space

� Add spacing on both sides of image (horizontally or vertically)

� you cannot increase amount of space on only 1 side

1. Click on image to select it.

2. In Property Inspector, enter the desired amount of

� Vertical space (in V space field)

� Horizontal space (in H space field)

3. Click OK.

34

Alternative Text� Displays text associated with the image

� if using a text only browser

� may display while graphic is loading

� when mouse passes over the graphic

� follows “Barrier Free Guidelines”

www. http://www.uwo.ca/IP/barrierfree/

1. Click on the image.

2. In the Property Inspector, type text phrase in “Alt” field.

3. Press Enter

18

35

Creating Lists

1. Type the list and then hilight the text.

2. In the Property Inspector, click one of the Ordered List icons

3. Highlight text that you want to change to list format.

To change the preferences (a,b,c) (i,ii,iii) place cursor to beginning of item list or highlight the entire list.

� Select menu Text >List> Properties. In the dialog box select the

List Type and New Style fields.

� Bullet lists

� Numbered lists

� Picture lists (select small images)

36

Creating LinksYou can create a link:

� To another web page within your site

� To another website http://www.uwo.ca

� To an e-mail address mailto:[email protected]

� Create multilinks within an image

� Within a web page (setting bookmarks,anchors)

19

37

Hyperlink to a page within your website

1. Select the text that you want to turn into a hyperlink.

2. In the Property Inspector, click on the folder.

3. Select proper path directory and then highlight the file to link toand then click Select.

4. Notice that the text is now a hyperlink.

38

Hyperlink to a another website


2. In the Property Inspector, click on the folder.

3. In the URL: field, type in the web address of the site :

http://www.uwo.ca

4. Click Select button.


You can type URL address directly

20

39

Hyperlink to an e-mail address


2. From the menu, select

Insert > E-mail Link

3. In the E-mail field, type in the e-mail address of the person you wish to link to:

[email protected]

4. Click OK button.


40

Creating an Image Hyperlink

1. Select the image that you want to turn into a hyperlink.

2. In the Property Inspector, by the Link field, click on the folder.

3. Select proper path directory and then highlight the file to link toand then click Select.

4. Notice that the image is now a hyperlink.

21

41

Creating an Image Map

1. Select the image

2. In the Property Inspector, type a descriptive name in the Map field.

3. Click on a drawing tool. Draw an area on the image using the tool.

4. In the Property inspector, Click on the folder beside the Link field, and proceed to indicate the file that the link will be associated with this hotspot.

42

Links – Within a Web Page� To link to another spot within a web page

� Useful when a page is very long and you want to jump to different sections of the webpage

(1) Create the anchor

� Click at the location on the page where you want to jump to.

� From menu, click on Insert > Named Anchor.

� At pop-up box, type a descriptive name for the anchor. Click OK

� An anchor icon appears in the Document window at that point.

(2) Create the link to the anchor

� Select text where you want to set up a link to jump to the anchor.

� In the Link field , type “#anchorname” and press return.

22

43

Tables� Organize content into columns and

rows by inserting tables

�Control web page layout and customize effects

�Easier to design web page for a 640x480 resolution and spaced out

44

Inserting a TableTo Insert a Table

1. Click at point where you want table to appear

2. From menu select Insert >Table

3. In the Insert Table dialog box, enter # of rows and columns.

To delete a table

1. Highlight entire table

2. Click on Table>Delete Cells or press the <Del> key

23

45

Table – Insert and Delete Rows/Columns

To Insert a row/column1. Click on a cell directly below where you want to insert a row or

column.

2. From the menu� select Modify>Table > Insert Rows or Insert Columns

� click on desired features

3. An empty row(s) or column(s) appear.

Shortcut: Click on cell, and right-click on mouse.

Select Table and then pick appropriate feature to insert.

To Delete a row/column1. Click on a cell within the column or row you want to delete.

2. From the menu, � select Modify > table > Delete Row or Delete Column.

Shortcut: Click on cell, and right-click on mouse.

Select Table and then pick appropriate feature to delete.

46

Table propertiesYou can control:

� Layout – center, left, right, justify

� Width – size of table (pixels, percent)

� Cell Padding – the space around the contents of each cell

� Cell Spacing – the space between each cell in a table

� Borders - size (value 0 = invisible), color

1. Click anywhere on table

2. Right-click and select Table >Select Table

3. Property Inspector reflects table properties. Then set property values accordingly.

Height field in older versions of DW

24

47

Cell propertiesYou can control: (applied to one cell or a group of cells)

1. Horizontal alignment – text is center, left, right

2. Vertical alignment – text is aligned at top,middle,bottom

3. Width & Height of cell – as pixels, percent

4. Cell border – color (note: Table border must be >0)

5. Background color - color of a cell or set of cells

1. Select cell(s) you wish to change its property

2. In Property Inspector (expand box), and select desire feature you wish applied.

1/2 3 5 4

48

Table – Merging & Splitting Cells

� Provides a more flexible table layout for presentation

purposes

Merging cells�Highlight the cell(s) that you wish to merge.

�On Property inspector, click on Merge icon.

Splitting cells�Highlight the cell that you wish to split.

�On Property inspector, click on Split icon. A pop up box asks whether you are splitting into rows or columns and how many.

Split iconMerge icon

25

49

Web Publishing

Once your pages are ready, you must upload (transfer) the pages to your server with

Secure Shell Clienthttp://www.uwo.ca/its/sitelicense/ssh/

Or

can transfer directly from within Dreamweaver

50

Publishing from Dreamweaver 8

1. Define your local site� From the site window, click on the drop-down

box and click on Manage sites

� From pop-up window, hilight the site you wish to transfer, and click on “Edit”

2. Define the Remote Site� In the Category Pane, select Remote Info

� On right hand side, click on drop down list in Access field, and select FTP

� In the following fields, enter the text beside it:� FTP Host: panther.uwo.ca

� Host directory: /web/www/its/courses/micro1

� Login: micro1

� Password: enter password

� Click OK

26

51

Publishing - continued

3) Connect to Remote Site� From site Window, select the site you wish to copy

Click on the Connect icon in the Site Window title bar.

� Dreamweaver attempts to connect to the remote site

� Then expand the view to see both the remote (server) side and local computer files

4) To upload (from local folder to Remote Site)

� Hilight the file(s) and click on the Put (upload) icon in the Title Bar

52

Where to get Help� ITS Help Desk 661-3800

� ITS Web Publishing

(www.uwo.ca/its)

� UWO Web Resource Centre

http://www.uwo.ca/IP/

� World Wide Web Consortium

http://www.w3.org

� Teach Yourself Dreamweaver MX Visually

-Visual Books by Mike Woolridge

� SAMS Teach Yourself HTML 4 in 24 Hours

Dreamweaver CS3 Course

- Exercises -

(all data files for exercises

are found on your Student Disk)

Vivi Tryphonopoulos Customized Software Solutions


[email protected]

657-1941

Exercise 1: Review concepts: • Creating a New Site

• Accessing an Existing Site, Removing a Site Name

1) Start up Dreamweaver.

You will be setting up a new website called “oplibrary” for which you have no files created yet. You

will also be setting up 3 more websites (session1, session2, session3) for which the folders were

copied from you disk and copied into the directory C:\Documents and Settings\pclab\My

Documents\My Webs\. In this exercise, you are using Manage Sites in order to tell Dreamweaver

what the site name and location of the files for that site. SO LET’S START.

2) You will be creating a new site called “oplibrary”(which does NOT exist) Remember what you are

doing is creating a folder called “oplibrary” and associating the name “oplibrary” to it.

• From the Document window menu bar, select Site >Manage Sites

• A Site box dialog box appears.

• Click on the New button and select “Site”. Wait for another popupbox.

• Enter the following information:

o Site Name: enter “oplibrary”

o Local Root: click on the folder icon, and locate the path directory

“ c:\Documents and Settings\pclab\My Documents\My Webs\” (Make sure that this

path directory is noted in the “Select” Field…

o Click on the “Create New Folder” button and a new folder is created.. Type in the name

“oplibrary” and press return to complete text entry. Notice that this folder name is now in

the Select Field at the top of your window. (This tells Dreamweaver that you have selected

this folder to be where all the webpages will be stored in).

o Now press the “Select” button.

o You are returned to the “Site Definition dialog box”. Check the entry in the Local Root

box to make sure that it is pointing to

c:\Documents and Settings\pclab\My Documents\My Webs\oplibrary”

o Then click OK to complete the Site Management steps. You are now returned to the box

where you make sure oplibary is highlighted and click Done. Your File Panel is now

pointing to the oplibrary folder which is empty for now. You have now completed the

process of creating the website structure.

3) Now proceed to create site names for the following directories but note that this time the folders are

there so you do not need to create the folder, simply point to the directory as listed in the table.

So for example, follow the same steps as above in Step 2, but point to the path director as indicated

below. But remember the folders session 1, session2, and session3 exist and have files.

Site Name Local Root

session1 c:\Documents and Settings\pclab\My Documents\My Webs\ session1



4) If you have time, try removing the site name”oplibrary” from the Site list by using the following step.

• From the Document window menu bar, select Site >Manage Sites. A pop-up box appears.

• Highlight “oplibary” and then click on the “Remove” button and when prompted for “Delete the

selected site”, select the “Yes” button. Remember this disassociates the site name from the folder,

AND DOES NOT permanently delete the files in that folder. The folder/files stays on your hard disk.

Exercise 2: Review concepts: • Opening a site name “oplibrary”

• Creating a new page, and saving it

• Text Formatting; headers, color, size, alignment

• View modes: Code view, Design view, browsers

1) If you “removed” the site “oplibrary” in the last exercise, you must re-create the site name

“oplibrary” by following step 2 in Exercise #1 so that you can attach the site name “oplibrary” to the

folder “oplibrary”.

Otherwise,

Open up the website “oplibrary”. Note that it will be empty.

2) Create a new page and call it “index.html”. (Select File > New > Blank Page and click Create)

Notice that the tab above the document window says “Untitled-1” which represents the filename of

the current document window. Now Save the file as index.html

3) Enter the text as follows (DO NOT APPLY THE ATTRIBUTES UNTIL STEP 8)

Text To Enter Attributes to Apply Rollwood Park Public School - Our Library <Enter>

<Enter> • header H2; font type=Arial;

• color=red (#CC6633); Center heading

Welcome to our library! <Enter>

• header H3; font type=Verdana; color=blue

(#003399)

• center heading

Take a tour of our Library where your children have

access to books, computer lab, and a quiet work space

area for reading, research and group work. <Enter>

• Font type= Times New Roman; Font

size=16 px

• Color=black

Welcome to our library<Shift-Enter>

... Where children, learning and fun<Shift-Enter>

....... are brought together<Enter>

• Font type=Comic Sans;

• Font size=14 px; Color=blue (#0033CC)

• Align text left

Through books, computers and technology<Shift-Enter>

Open your child’s mind <Shift-Enter>

to learning and the future!<Enter>

• Font type=Comic Sans;

• Font size=14 px; Color=blue (#0033CC)

• Align text right

4) Save the file as “index.html” (make sure it is pointing to the same directory as in step (1) above.

5) View the HTML code.

6) Preview the webpage using Preview icon in the Standard toolbar.

7) Assign the page title property “Rollwood Public School – London, Ontario” (assign it to the

“Title” field in the Standard toolbar ). Now preview the file under both browsers again and notice

the first line in the browser window and how it now reflects the title text you entered.

8) Go to the chart above and follow the “Attributes to Apply” instructions.

Save the file as “index.html”

Then Preview file in both Netscape and Internet Explorer browsers.

Close the file.

Exercise 3:

Reviews concepts: • Inserting a graphic (from local hard disk)

• Resizing an image (dragging, right-click and Picture Properties

• Text alignment with image

1) Open the site “session1” (path directory is c:\Documents and Settings\pclab\My Documents\My

Webs\session1 )

Open the file “index.htm”.

2) Place insertion point at beginning of paragraph text “Welcome to our library …Where children….”.

Insert the image “boyreading.gif” from the “Images” folder. (Select Insert >Image)

3) Resize the image to a smaller size by dragging on the handles.

Undo your last resize command, and return the image to what it was before.

4) Resize the image to a size dimension where width=150 height=80 (modify the Property Inspector

value). Note: there is no automatic ratio resizer.

5) Left-Align the text with image so that they are beside each other.

• Click on the image.

• In the Property Inspector, change text alignment to “Left”.

• The paragraph should shift beside the boy image.

6) Place insertion point at beginning of paragraph text “Through books, computers and technology…..”.

7) Now you are going to add a picture of books to this paragraph.

• Select Insert >Image

• Insert the image “books.gif” from the “Images” folder.

8) Resize the image to a smaller size by dragging on the handles.

Undo your last resize command, and return the image to what it was before.

9) Resize the image to a size dimension where width=105 height=100

10) Right-Align the text with image so that they are beside each other.

• Click on the image

• And change Layout Alignment to “Right”.

• The paragraph should shift beside the books image.

11) Save the file as index.html.

12) Preview the file under both browsers.

13) Close the file

Exercise 4:

Reviews concepts: • Inserting images, and resizing review

• Adding horizontal spacing around image

• Text alignment

• Setting borders

• Adding a background to a web page


Webs\ session1)

Open the file “ex4.html”.

2) Place insertion point at beginning of header text “Computer Lab”.

Insert the image “computerlab1.jpg” from the “Images” folder.

Resize it to width=150 height=112.

3) Left-Align the text section “Computer Lab” with image so that they are beside each other.

• Click on the image and change text Alignment to “Left”.

• The paragraph should shift beside the computer lab image. (Notice how the bullets are hidden by

the picture. But the next step will correct this.

4) Add horizontal spacing around computer lab image so that the text is not crunched up against the

image.

• Click on image “computerlab1”

• Set horizontal spacing to a value of “40”.

5) Save the web page as “ourlibrary.html”

6) Click mouse at beginning of header text “Work Space”.

• Insert the image “research1.jpg” from the “Images” folder. And resize it to width=150 and

height=112

• Left –align the image with the text.

• Set horizontal spacing to a value of “40”

• Place a border around image of border size=4 (you will not see the border until you preview

in browser – you can try now or wait till step 9)

7) Go back to the other two images and assign a border around them of size=4.

8) File save the web page under “ourlibrary.html” again.

9) Now Preview the webpage using the Preview Tab, and in each of the browsers.

10) Now add a background image to act as a background to the webpage.

• Click Modify>Page Properties and click on the Browse button next to the Background Image

field..

• Locate the file “backyellow.gif” from the Images folder. And click OK.

• Notice how the screen fills with the background image. (Note that if you have images that do

not blend in with the background, then you need to get graphics software and make them

images transparent!)

Save the file as ourlibrary.html.

Exercise 5:

Reviews concepts: • Structured lists (bulleted, numbered, other ones)

• Changing line spacing for structured lists


Webs\session2 )

Open the file “bluespruce.html”.

2) Make the book list into a bullet structured list.

• Highlight the text from “The Frog Princess” to “Drop of Gold”.

• Select the Bullets list icon in the Property Inspector.

3) Next, select the Numbering list icon in the Property Inspector

• Highlight the text from “The Frog Princess” to “Drop of Gold”.

• Select the Numbered list icon in the Property Inspector.

• Notice how the values change to “1, 2, 3….”

4) Change the structured list to “square” bullet. Do this by:

• Placing the cursor in the beginning of the text “The Frog Princess”

• From the menu, select Text > List > Properties

• For the “List type” field, select Bulleted list

• For the “Style” field, select “Square”

• Click Ok

5) Change the structured list to “ordered” list with numbering “a,b,c,d”. Do this by:

• Placing the cursor in the beginning of the text “The Frog Princess”

• From the menu, select Text > List > Properties

• For the “List type” field, select Numbered list

• For the “Style” field, select “Alphabet small (abc)”

• Click Ok

6) Change the structured list so that it uses roman numerals. Follow the same steps as in step 5 but

choose the appropriate Style.

7) Change the line spacing of this structured list from single to double spacing.

1. After the end of each line add two Line Breaks (Shift-Enter, Shift-Enter).

2. Another way is to:

a) Hilight the text “The Frog Princess” to “Drop of Gold”.

b) Click on Property Inspector, and in “Format field” change to “Heading 3” (But notice how

the entire line gets bolded. This is the way it works, unless you use CSS styles)

8) Now Preview the webpage

9) Save the file as “bluespruce.html”. Close the file.

10) If you have time, play around with using “text indent” and “text outdent” to create sublists.

Exercise 6: Reviews concepts: • Adding Links

• To another page, a website address, and e-mail link

• Copy navigational links into other webpages within website.


Webs\ session3)

Open the file “index.html”. This is the homepage that was completed in Exercises 2 and 3.

2) Set the horizontal line width to 60% (click on the line and adjust the value in the Property Inspector.

3) Go after the horizontal line and enter the following text on one line with some spaces in between:

Our Library | Red Maple | Blue Spruce | Thames Valley Board | Home

4) Highlight this line and

• center align it with the page

• change font color to red

• bold the line and set font size to 16 px

5) Create links for the following text:

• Our Library - ourlibrary.html

• Red Maple - redmaple.html

• Blue Spruce – bluespruce.html

• Thames Valley Board – www.tvdsb.on.ca

• Home – index.html

6) Save the web page as “index.html”.

7) Preview the webpage in both browsers. While you are in the browser, observe that as your mouse

passes over any of the links that at the bottom of the screen it references where that link will go to if

selected. Close the browsers.

8) Now set an e-mail link on the text “Send us a message!”

• Highlight the text “Send us a message!”

• From the menu, select Insert >E-mail and then type in your e-mail address in the E-mail

field. (ie. [email protected] or [email protected])

9) Save the file under the name “index.html” and close the web again.

10) Now follow the instructions below to copy the menus you just created into the following

webpages: “ourlibrary.html” “redmaple.html” “bluespruce.html”

Using copy and paste functions by:

• Hilighting the horizontal linet that contains the linked text. Then from the menu select

Edit>Copy

• Open the file ourlibrary.html(no need to close the other files). Position pointer after the

headers and from the menu select Edit>Paste. Now save the file under the same name you

opened it.

• Repeat the above steps to copy the links into the remaining webpages (redmaple.html

and bluespreuce.html)

11) Preview in both browsers and then save all files and close the website.

Exercise 7:

Reviews concepts: • Adding Bookmark Links

1) Open the site “session3” (path directory is c:\Documents and Settings\pclab\My Documents \My

Webs\session3 )

Open the file “redmaple_books.html”.

2) You are going to set up bookmarks for books in the bullet structure list.

So for example, to set up the first bookmark for the book “A Bushel of Light”

• Go to the section where the book description (not in the bulleted list) is listed and set your

insertion point at the beginning of the line of text “A Bushel of Light”.

• Then from the menu, select Insert>Named Anchor and a popup window appears.

• In the “Field name” section enter “bushel” (text cannot have spaces)

Now you are ready to create the link to this bookmark.

• Go to the section in the bulleted structure list where the book “Bushel of Light” is listed.

• Highlight the name of the book

• In the Property Inspector, in the Link field, type “#bushel”

Now save your edits under the file “redmaple_books.html”

Preview the webpage, and try out the bookmark link and see if it works.

3) Now you will create a bookmark labelled “Back to Top” which will take you to the top of the page.

4) (The bookmark “ #top” is a default and so there is no need to create the bookmark)

• Go to the end of the “Bushel of Light” paragraph

• Type the text “Back to Top”

• Highlight the text “Back to Top”

• Go to the Property Inspector and set the Link field to enter “#top”

• To try it out, click on the Bushel of Light link and it should take you to that section. Then

click on “Back to Top” link and it should return you to the top of the page.

5) Create bookmarks for the following book titles and test them out to verify that they work:

• Across the Steel River (call bookmark “steelriver”)

• Bed of Badlands (call bookmark “badlands”)

• Also Type the “Back to Top” link after the paragraphs and set it to “#top”.

6) Save the web page as “redmaple_books.html”. .

7) If you have time, set a bookmark in the file “ourlibrary.html” and see if you can link from this file

to that bookmark in “ourlibrary.html”.

8) Next, replace one of the “Back to Top” links with a graphics image “toparrow.gif” and set it as a

link to go to the top of the webpage. Verify that it works, and then replace all text links called ”Back

to Top” with the arrow bookmark image that you just created. Test that these links work.

9) Save the file “ourlibrary_books.html”. Close the webpage again.

Exercise 8:

Reviews concepts: • Creating tables

• Setting links along the top

• Adjusting cell properties, table properties

1) Open the site “traveltables ” (which points to the directory is c:\Documents and Settings\pclab\My

Documents \My Webs\ traveltables)

Open the file “index.html”.

2) Go to the end of the document and insert a table “4 rows by 3 columns”.

Merge cells to create the above layout.

3) Now copy and paste text and images into the appropriate cells of the table as shown in the picture.

4) Set table properties:

• Table size to a width size of 640 pixels in size

• Set table border to 1

5) Assign the following features to the sections listed below:

Part A • Dark blue background with white text

• Insert the image “plane2.gif” from the “images” folder

• left align picture in the cell

Part B • Grey background

• Center links

Part C • Set cell width to 25%

• Left align image of waterfalls

• Set vertical alignment to top and insert an extra <cr> before picture to allow for some

space

Part D • Set cell width to 50%

• Make sure text is centered

• Set cell width to 25%

• Right align image of picture on beach

• Set vertical alignment to top and insert an extra <cr> before picture to allow for some

space.

6) In Part F, add the text “Last Edited: “ and insert today’s date.

7) Save the file as “exercise8.html”

Exercise #8: Website to Modify

based on Instructions

Exercise 9:

Reviews concepts: • Creating tables

• Setting links up on the side

• Adjusting cell properties, table properties

1) Open the site “session3 ” (which points to the directory c:\Documents and Settings\pclab\My

Documents \My Webs\session3 )

Open the file “ex5done.html”.

2) Go to the end of the document and insert a table “3 rows by 2 columns”.

Merge cells to create the above layout.

3) Now copy and paste text and images into the appropriate cells of the table as shown in the picture.

4) Make sure that with the navigation links along the side that you delete the “|” bars as they are no

longer needed.

5) Set table properties:

• Table size to a width size of 640 pixels in size

• Set table border to 1

6) Assign the following features to the sections listed below:

Part A • Dark blue background with white text

• Insert an extra <cr> after the title

Part B • Set background to a yellow

• Set cell width to 115 pixels

• Left align links

• Set vertical cell alignment to top

Part C • Set cell width to (64-115=525 pixels)

7) Now merge Part C and Part D together into one cell.

8) Save the file as exercise9.html.

Exercise #9: Website to modify

based on Instructions

Dreamweaver CS3 - Course Notes - Western...

Documents

Transcript of Dreamweaver CS3 - Course Notes - Western...