Andrew Moreton’s

Dreamweaver 8 Notes

www.andrewmoreton.co.uk
These notes are © Andrew Moreton 2005
Screenshots and tradenames © Adobe Systems Incorporated 2005
The World Wide Web

The WWW, HTML and the W3C

The World Wide Web is the collection of documents that can be accessed over the internet using the HyperText Transfer
Protocol. Although the web is changing, most of the documents on it are created using HyperText Markup Language (HTML),
along with some other associated technologies like CSS (Cascading Style Sheets) and Flash.
The body responsible for the development of the Web and the technologies that make it up is called the World Wide Web
consortium. (w3.org)

Different browsers

Different browsers display pages in different ways. If you don’t want any nasty surprises you need to test your pages in all the
browsers that you think people visiting your web site might be using.
You can download just about any browser, ever, from http://browsers.evolt.org/

HTML & CSS

The two most fundamental technologies to grasp before learning Dreamweaver are HTML and CSS.
HTML is a markup language. This means that ordinary text is structured by adding tags that explain what the information means
in the context of the document.
For instance wrapping an <h1> tag around a text, like so, <h1>The World Wide Web</h1> tells a browser that the
words enclosed within the tag are a first level heading.
CSS is a simple styling language which can be used with HTML to format and layout web pages.
Simple guides to HTML and CSS can be found at:
http://www.htmldog.com/guides/htmlbeginner/ (HTML)
http://www.htmldog.com/guides/cssbeginner/ (CSS)

Introduction to Dreamweaver – Page 

The Dreamweaver interface

1
2

All windows and panels can be found under Window menu, with the exception of the Toolbars (View>Toolbars>)
1. The Insert Bar – adds items to your page. Note the pop-up menu on the left of the bar. This allows access to different
sets of icons.
All Insert Bar items can also be found under the Insert menu.
2. Document Tabs – view and move between open documents. Right clicking on a Document Tab brings up a list of useful
options.
. Toolbars – There are several toolbars associated with each open document – they can be turned on and off via
View>Toolbars>...:
(a) the Style Rendering toolbar – switches between different rendering styles
(b) The Document toolbar – buttons for switching between Dreamweaver view modes, titling documents, view options,
previewing and site management functions.
(c) the Standard Toolbar – opening, closing, saving etc.
. Code View – directly modify or create code.
5. Design View – use a WYSIWYG interface to design a page.
6. Status Bar – various – the tag selector, zoom and pan tools, window sizes, page weight.
7. Properties Inspector – amends and sets attributes of selected objects
8. Panels

Page  – Introduction to Dreamweaver

Beginning a web site with Dreamweaver 8

Plan your site

Work out how your site is going to fit together, how people will find what they want, what the site is for, before you start work
in Dreamweaver.You’ll be pleased you did.

Set up a site folder

Once you’ve worked how your site is going to work, what it’s going to look like etc, you have to create a new folder which will
contain all the site’s assets.You can create this folder where you like.
Tell Dreamweaver about the site folder by going to Sites>New Site... The Site Definition dialogue box has two buttons
at the top, Basic and Advanced. Click on the Advanced button.

1
3
2

Here you’ll be asked where your site folder is located and what you want to refer to it as. 1) Site Name - your label for the site.
2) Local root folder – where your site folder is located. 3) If you know your site upload details you can fill them in under the
Remote info section.
To edit these details later go to Sites>Manage Sites...

Find out default page and server details

You’ll need to find out what the default page name is for the server that’s going to be putting out your site. Typical names are
index.htm and home.htm but it could be anything so check with your network administrator.

Introduction to Dreamweaver – Page 

Creating & saving new pages

New pages

Create new pages using File > New. From there you can choose between a large number of preset page and file types or
from templates you have set up for your site.

If you want just a basic blank page choose Basic Page from the Category list and HTML from the Basic Page: list and
click Create

Title and save

Once you’ve made a new page, and before you add any content, give the page a title and then save it.
The title of a page can be added in the Document toolbar. The Title should explain the main content of the page.

Legitimate filenames

1. Filenames should have NEVER have spaces in them.

2. Use only numbers, letters, hyphens and underscores
3. Always include a suffix ie .htm., or .html

Page  – Introduction to Dreamweaver

File & link management

The File Panel

Dreamweaver makes sure that the links between your documents stay good, even when
you move files from one folder to another, rename them etc.
Remember, though, that if you want Dreamweaver to keep track of these things any of the
following tasks should be performed using the File Panel, otherwise links may get broken.
Use the File panel in the same way as Window’s Explorer or the Finder.
1. Renaming Files
2. Deleting Files,
3. Moving Files
4. Creating Folders
5. Moving Folders
6. Deleting Folders

Updating Links

When you do any of the above things, Dreamweaver will ask if you want to update
references to the files that you’ve altered or moved. Unless you’ve very good reason, always
choose Update.

Introduction to Dreamweaver – Page 

Structuring text with HTML
It’s important to structure your text with HTML.
This lets browsers, both visual and non-visual know that some headings are more important than others, that some blocks of
text have been quoted from another source, that other blocks of text are paragraphs or lists.
Well structured HTML will work effectively across all browsers and will make your pages more accessible.

Headings

Place your cursor in the block of text that you want to format and use the Properties Inspector’s Format pop-up menu to
choose the heading.

Paragraphs

As above but choose Paragraph

Lists

HTML has two kind of lists, Ordered Lists, generally displayed as a numbered list and Unordered lists where items are displayed
preceeded by bullet points.
Create Lists by highlight text you want formating as a list and choosing one of the List icons from the Properties Inspector.
1. Unordered Lists (bullets)
2. Ordered Lists (numbrs)
3. Indent and outdent buttons
(will nest lists)

Page  – Introduction to Dreamweaver

More text...

Importing text

Bring copy in by: Copying and pasting, or typing directly into Dreamweaver. Copying and pasting from Microsoft applications will
preserve most basic formatting.
When copying plain text be sure to paste text into Design view rather than Code view. Pasting into Code view disregards any
line breaks there may have been in your original text.

Special characters

When you need more unusual characters like &, ©, or > use Insert>HTML>Special Characters.

Introduction to Dreamweaver – Page 

Hyperlinks

Creating links to other Sites (absolute links)

Link to external sites and pages by selecting the text (or image) in the Design view and going to the Properties Inspector and
filling in the full url that you want to link to, finally pressing Enter, to confirm the link.

Creating links between your pages (relative links)

Link between web pages and other documents on your site by selecting the text (or image) in the Design view and then either:
1. Clicking on the Browse for file icon and browsing for the file you want to link to
2. Linking with point to file
3. Choosing Insert>Hyperlink

Creating internal links (anchors)

Links between one section of a web page to another are called Named Anchors. Before you do this check that Dreamweaver
will show named anchors in the design view by going to Preferences>Invisible Elements and making sure that the
Named Anchor item has a checked box against it.
1. Place your cursor in the page at the point that you want to link to.
2. Go to Insert>Named Anchor
3. Give it a name
4. Link to the anchor by using a # in front of the name you gave it ie
#named_anchor

Page 10 – Introduction to Dreamweaver

Images

Preparing images

Images need to be saved in either the JPEG or GIF format.

As a rule of thumb GIF is more suitable for images with a very limited number of flat colours.
JPEG is more appropriate for photographic images.
Make sure you save your images at exactly the dimensions you intend using them.

Inserting Images

You can add images by dragging and dropping from the files panel or by using Insert>Image

Images and accessibility

It’s very important that you provide alternative text descriptions which can be used by browsers that can’t, or don’t want to,
display images.

Add Alternative text by selecting an image and then adding text to the Alt field in the Properties Inspector.
Compel yourself to add alt attributes by setting Preferences>Accessibility Settings to checked. This makes sure
that everytime you add an image Dreamweaver will prompt you to fill in it’s alt attribute.

Adding Rollover Images

Rollover images are used mostly to create interactive buttons. A rollover is an image that, when viewed in a browser, changes
when the pointer moves across it.
Before you can add a Rollover to a web page you’ll need two identically sized images.
Add a Rollover images using Insert>Rollover Image

Introduction to Dreamweaver – Page 11

Adding style with CSS
Cascading Style Sheets (CSS) are a collection of formatting rules that control the rendering
of content on a web page.
CSS styles give a lot of flexibility and control of page appearance, from layout to setting
specific fonts and styles.
Ideally style sheet rules are stored in external CSS documents that HTML pages link to for
their formatting information although style rules can be embedded in individual pages.

Linking to an external style sheet

Link to external style sheets by

1. Open Styles panel (Window>CSS Styles)
2. Click Attach Style Sheet button
3. a) Browsing for a CSS file
4. b) Adding the URL of a CSS file

Editing an exisiting style sheet

Stylesheets can be edited directly in code view, alternatively

1. Open Styles panel (Window>CSS Styles)
2. Select the style you want to edit
3. Click Edit Style Sheet button

Applying styles

1. Place cursor in paragraph to be formatted

2. a) Select style from Styles pop-up menu on the Properties Inspector

3. b) OR Right-click (CTRL-Click on Mac) name of style in Styles palette and choose apply.

CSS selectors

CSS applies itself to pages via CSS selectors. There are several kinds of Selectors, amongst them:
1. Basic Tag Selectors that use structural markup as a basis for formatting ie p, h1, strong,ul and other familiar HTML
elements
2. Selectors for links ie a:link, a:visited, a:hover and a:active
3. .class selectors for repeated formatting, ie .intropara, .newsitem, .saleitem
4. Grouped selectors which will group several selectors in to a single statement ie p, ul, table
5.

Page 12 – Introduction to Dreamweaver

Adding new styles to an existing style sheet

Add new styles to an external style sheets by

1. Open Styles panel (Window>CSS Styles)
2. Click New CSS Style button
3. Choose or name your selector
4. Use the Define In pop-up and radio button to determine which style sheet you want to add your style to.

Creating a new style sheet

Creating a new external style sheet by

1. Open Styles panel (Window>CSS Styles)
2. Click New CSS Style button
3. Choose or name your selector
4. Use the Define In pop-up and radio button to create a new stylesheet

5. Name and save it

Introduction to Dreamweaver – Page 13

Tables
Tables can be used to show relationship between data and they can also be used for layout. Using tables for layout involves using
the cells of a table to hold content such as text or images at specific positions on the page.

Adding tables

To create a Table go to Insert > Table. Select how many rows and columns you need then click OK

Editing Tables

Edit tables using these techniques

1. Add rows and columns, alter width and height with the Properties Inspector

2. Use the mouse to move the borders of tables and rows and columns
3. Merge cells or split them using the Properties Inspector

Page 14 – Introduction to Dreamweaver

Templates
Dreamweaver’s Templates (.dwt files) help you retain a consistent design across your site as well as making it easier to update
the design of multiple pages. They contains area of content that you want to appear on multiple pages, for instance banner areas
and navigation.
Templates also contain placeholders for a page’s unique content like new stories, images or catalogue numbers. These areas
are called Editable Regions.When a modification needs to be made to a website’s design, such as adding an extra button to a
navigation area or updating copyright information, you can make changes quickly by changing the .dwt files directly. The pages
that are linked to the template files are automatically updated.

Creating templates

Any HTML page can be saved as a template. Once the design of your page is ready, choose File>Save as Template...
Dreamweaver creates a Templates folder at the top level the site folder. Do not rename or move the Templates folder or any
.dwt files unless you are sure what you are doing.

Creating Editable Regions

1. Select area you want to make editable

2. Go to Insert>Template Objects>Editable Region... OR right-click on the selected area.

3. Name the Editable Region

Introduction to Dreamweaver – Page 15

Creating new documents from templates

It’s very important that you create new documents from templates by using the File>New command and then choosing from
the Templates tab.

Updating template based pages

1. Open a .dwt file

2. Make your alterations
3. Save the file
4. When asked to whether to update pages click OK.

Page 16 – Introduction to Dreamweaver

Metadata

Adding metadata

Add information to help search engines identify your page by adding metadata - especially keywords and descriptions to your site.
1. Go to Insert>HTML>Head Tags>Keywords or Insert>HTML>Head Tags>Description
2. Add your keywords or descriptions.

Editing metadata

To edit Keywords or descriptions go to View>Head Objects. This turns on the Head Objects toolbar.

Clicking on either the Keywords button

or the Description button

invokes either the Keywords or Descriptions modes of the Properties Inspector

Introduction to Dreamweaver – Page 17

Publishing your site with FTP
You’ll need to know your FTP (File Transfer Protocal) details:
1. ftp host
2. user name
3. password

To upload the site for first time

1. Go to Site>Manage Sites
2. Choose your site
3. Click Edit
4. Select Remote Info from the Categories list
5. Fill in the details for your site

Click OK

Page 18 – Introduction to Dreamweaver

6. Expand the Files panel

7. Click Connect

8. Select your local site folder and click Put

Updating your site with Synchonize…

1. Make changes, close and save open files

2. Expand Files panel
3. Select your local site folder
4. Go to Sites>Synchronize Site Wide...

Introduction to Dreamweaver – Page 19