Dreamweaver_8_Notes

8/7/2019 Dreamweaver_8_Notes

1/19

Andrew Moretons

Dreamweaver 8 Notes

www.andrewmoreton.co.uk


2/19


3/19Introduction to Dreamweaver Page

The World Wide Web

The WWW, HTML and the WC

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 dont 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 tag around a text, like so, The World Wide Web tells a browser that the

words enclosed within the tag are a rst 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)


4/19Page Introduction to Dreamweaver

The Dreamweaver interface

All windows and panels can be found under Window menu, with the exception of the Toolbars (View>Toolbars>)

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.

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.

Design View use a WYSIWYG interface to design a page.Status Bar various the tag selector, zoom and pan tools, window sizes, page weight.

Properties Inspector amends and sets attributes of selected objects

Panels

1.

2.

.

.

5.6.

7.

8.

21

5

6

7

8

21

5

6

7

8


5/19Introduction to Dreamweaver Page 5

Beginning a web site with Dreamweaver 8

Plan your site

Work out how your site is going to t together, how people will nd what they want, what the site is for, before you start work

in Dreamweaver. Youll be pleased you did.

Set up a site folder

Once youve worked how your site is going to work, what its going to look like etc, you have to create a new folder which will

contain all the sites assets. You can create this folder where you like.

Tell Dreamweaver about the site folder by going to Sites>New Site... The Site Denition dialogue box has two buttons

at the top, Basic and Advanced. Click on the Advanced button.

Here youll 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 ll them in under the

Remote info section.

To edit these details later go to Sites>Manage Sites...

Find out default page and server details

Youll need to nd out what the default page name is for the server thats 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.

1

2

1

2


6/19Page 6 Introduction to Dreamweaver

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 le 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

clickCreate

Title and save

Once youve 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 lenames

Filenames should have NEVER have spaces in them.

Use only numbers, letters, hyphens and underscores

Always include a sufx ie .htm., or .html

1.

2.

3.



File & link management

The File Panel

Dreamweaver makes sure that the links between your documents stay good, even when

you move les 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 Windows Explorer or the Finder.

Renaming Files

Deleting Files,

Moving Files

Creating Folders

Moving Folders

Deleting Folders

Updating Links

When you do any of the above things, Dreamweaver will ask if you want to update

references to the les that youve altered or moved. Unless youve very good reason, always

choose Update.

1.

2.

3.

4.

5.

6.



Structuring text with HTML

Its 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 Inspectors 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.

Unordered Lists (bullets)

Ordered Lists (numbrs)

Indent and outdent buttons

(will nest lists)

1.

2.

3.


9/19Introduction to Dreamweaver Page

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.



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

lling in the full url that you want to link to, nally pressing Enter, to conrm 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:

Clicking on the Browse for le icon and browsing for the le you want to link to

Linking with point to le

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.

Place your cursor in the page at the point that you want to link to.

Go to Insert>Named Anchor

Give it a name

Link to the anchor by using a # in front of the name you gave it ie

#named_anchor

1.

2.

3.

1.

2.

3.

4.



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 at 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 les panel or by using Insert>Image

Images and accessibility

Its very important that you provide alternative text descriptions which can be used by browsers that cant, or dont want to,

display images.

Add Alternative text by selecting an image and then adding text to the Alt eld 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 ll in its alt attribute.

Adding Rollover ImagesRollover 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 youll need two identically sized images.

Add a Rollover images using Insert>Rollover Image



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 exibility and control of page appearance, from layout to setting

specic 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

Open Styles panel (Window>CSS Styles)

Click Attach Style Sheet button

a) Browsing for a CSS le

b) Adding the URL of a CSS le

Editing an exisiting style sheet

Stylesheets can be edited directly in code view, alternatively


Select the style you want to edit

Click Edit Style Sheet button

Applying styles

Place cursor in paragraph to be formatted

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

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:

Basic Tag Selectors that use structural markup as a basis for formatting ie p,h1,strong,ul and other familiar HTML

elements

Selectors for links ie a:link,a:visited,a:hover and a:active

.class selectors for repeated formatting, ie .intropara,.newsitem,.saleitem

Grouped selectors which will group several selectors in to a single statement ie p, ul, table

1.

2.

3.

4.

1.

2.

3.

1.

2.

3.

1.

2.

3.

4.

5.



Adding new styles to an existing style sheet

Add new styles to an external style sheets by


Click New CSS Style button

Choose or name your selector

Use the Dene 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


Click New CSS Style button

Choose or name your selector

Use the Dene In pop-up and radio button to create a new stylesheet

Name and save it

1.

2.

3.

4.

1.

2.

3.

4.

5.



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 specic 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

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

Use the mouse to move the borders of tables and rows and columns

Merge cells or split them using the Properties Inspector

1.

2.

3.



Templates

Dreamweavers Templates (.dwt les) 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 pages unique content like new stories, images or catalogue numbers. These areas

are called Editable Regions.When a modication needs to be made to a websites design, such as adding an extra button to a

navigation area or updating copyright information, you can make changes quickly by changing the .dwt les directly. The pages

that are linked to the template les 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 les unless you are sure what you are doing.

Creating Editable Regions

Select area you want to make editable

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

Name the Editable Region

1.

2.

3.



Creating new documents from templates

Its 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

Open a .dwt le

Make your alterations

Save the le

When asked to whether to update pages click OK.

1.

2.

3.

4.



Metadata

Adding metadata

Add information to help search engines identify your page by adding metadata - especially keywords and descriptions to your site.

Go to Insert>HTML>Head Tags>Keywords or Insert>HTML>Head Tags>Description

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

1.

2.



Publishing your site with FTP

Youll need to know your FTP (File Transfer Protocal) details:

ftp host

user name

password

To upload the site for rst time

Go to Site>Manage Sites

Choose your site

ClickEdit

Select Remote Info from the Categories list

Fill in the details for your site

ClickOK

1.

2.

3.

1.

2.

3.

4.

5.


19/19

Expand the Files panel

Click Connect

Select your local site folder and click Put

Updating your site with Synchonize

Make changes, close and save open les

Expand Files panel

Select your local site folder

Go to Sites>Synchronize Site Wide...

6.

7.

8.

1.

2.

3.

4.

Documents

Dreamweaver_8_Notes