Dreamweaver 8 Notes

Defining A Dreamweaver Site

THIS IS ONE OF THE MOST IMPORTANT ASPECT OF WEB PAGE CREATION IN DREAMWEAVER

Site planning and design

In Dreamweaver, the term site can refer either to a website or to a local storage location for the documents belonging to a website. Organizing your files in a site enables you to use Dreamweaver with FTP to upload your site to the web server, automatically track and maintain your links, manage files, and share files.

A Dreamweaver site consists of as many parts, depending on your environment and the type of website you are developing the most important are the local folder and when you are ready to publish your site to the internet the remote folder:

Dreamweaver 8 Interface

(click on the interface image for a larger version that you can printout) Dreamweaver Interface

The Insert Bar contains buttons for inserting various types of "objects," such as images, tables, and layers, into a document. Each object is a piece of HTML code that allows you to set various attributes as you insert it. For example, you can insert an image by clicking the Image icon in the Insert bar. If you prefer, you can insert objects using the Insert menu instead of the Insert bar.

The Document toolbar contains buttons and pop-up menus that provide different views of the Document window (such as Design view and Code view), various viewing options, and some common operations such as previewing in a browser.

The Document window displays the current document as you create and edit it. You can choose any of the following views:

To toggle quickly between the two views, press Control + tilde (~).

The Property inspector lets you view and change a variety of properties for the selected object or text. Each kind of object has different properties. It is context sensitive eg it will show you different properties depending on what is selected.

The Tag selector in the status bar at the bottom of the Document window shows the hierarchy of tags surrounding the current selection in Design view. Click any tag in the hierarchy to select that tag and all its contents.

Panel groups are sets of related panels grouped together under one heading. To expand a panel group, click the expander arrow at the left of the group's name; to undock a panel group, drag the gripper at the left edge of the group's title bar.

The Site panel allows you to manage the files and folders that make up your site. It also provides a view of all the files on your local disk, much like Windows Explorer.

Defining a site

With Dreamweaver open (Start--All programs--Macromedia--Macromedia Dreamweaver 8)

-Choose Site > New Site...

What would you like to name your site?
- Enter myfirstsite (or a meaningful name of your choice) in the site name box. You can leave the http address blank for the mean time as you may not know the http address yet.

-Click Next>

Manage Sites window
Click Image for larger view

 

Note: Dreamweaver will create your new site folder for you. Simply enter the name.

Do you want to work with a server technology such as ColdFusion, ASP.NET, ASP, JSP, or PHP?
-For us select the No radio button as we will not be using any of these technologies in this class.

-Click Next>

 

1

How do you want to work with your files during development?
-Select the Edit local copies on my machine... radio button.

Where on your computer do you want to store your files?
-You can enter a path and folder name manually or use the browse button to select an existing folder or to create a new one on any of your drives .

Always double check this step

-Click Next>

1

 

How do you connect to your remote server?

-For now, choose None.

-Click Next>

Note : When you are ready to publish your site, get the connection information from your hosting company. Edit the site by opening the Manage Site dialog, select this site, then click the Edit button. Change the setting in this screen from None to FTP and you will be able to enter the server address, login, and password to connect to your remote server.

 

1

This screen summarizes your site definition parameters.

1

-Click Done

Your new site appears in your Files panel and is your currently selected Dreamweaver site.

1

Creating a new document

-Choose File > New

The New Document window will open.

-Select Basic page from the Category list.

-Select HTML from the Basic page list.

-Click Create

New Doc dialog
Click image for larger view

A new document will open, but it is not yet saved. For Dreamweaver to manage your files and assets, the file must be saved in the site.

So click File > Save and name it appropriately

Inserting & Formatting Text

Adding text to a document

There are a number of ways to add text to a Dreamweaver document. You can type text directly in the Dreamweaver document window, or you can cut and paste or import text from other documents.

To add text to your document, do one of the following:

Adding space between characters

HTML only allows for one space between characters; to add additional space in a document you must insert a non-breaking space.

You can set a preference to automatically add non-breaking spaces in a document. To set this preference, choose Edit - Preferences and in the General category make sure Allow Multiple Consecutive Spaces is checked.

To insert a non-breaking space, do one of the following:

Adding paragraph spacing

Dreamweaver works similarly to many word processing application: you press Enter to create a new paragraph. Web browsers automatically insert a blank double line of space between paragraphs. You can add a single line of space between paragraphs by inserting a line break or soft return.

To add a paragraph return:

To add a line break, do one of the following:

Setting and changing fonts and styles

Use options in the Property inspector or the Text menu to set or change font characteristics for selected text. You can set the font type, style (such as bold or italic), and size.

When you use the Property inspector to apply bold or italic style, Dreamweaver automatically applies the <strong> or <em> tag, respectively.

HTML font sizes are relative, not specific, point sizes. Users set the point size of the default font for their browsers; this is the font size that they will see when you select Default or 3 in the Property inspector or Text - Size submenu. Sizes 1 and 2 will appear smaller than the default font size; sizes 4 through 7 will appear larger.

To set or change font characteristics:

  1. Select the text. If no text is selected, the change applies to subsequent text you type.
  2. Choose from the following options:

Formatting paragraphs

Use the Format pop-up menu in the Property inspector or the Text - Paragraph Format submenu to apply the standard paragraph and heading tags.

When you apply a heading tag to a paragraph, Dreamweaver automatically adds the next line of text as a standard paragraph. To change this setting, choose Edit - Preferences, then in the General category, under Editing Options make sure Switch to Plain Paragraph after Heading is unchecked.

To apply a paragraph or heading tag:

  1. Place the insertion point in the paragraph, or select some of the text in the paragraph.
  2. Using the Text - Paragraph Format submenu or the Format pop-up menu in the Property inspector, choose an option:

Aligning text

You align text on the page using the Property inspector or the Text - Align submenu. You can center any element on a page using the Text - Align - Center command.

To align text:

  1. Select the text you want to align or simply insert the pointer at the beginning of the text.
  2. Click an alignment option (Left, Right, or Center) in the Property inspector, or choose Text > Align and choose an alignment command.

Note: You can align and center complete blocks of text; you cannot align or center part of a heading or part of a paragraph.

Indenting text

Using the Indent command applies the blockquote HTML tag to a paragraph of text, indenting text on both sides of the page.

To indent text and remove indentation:

  1. Place the insertion point in the paragraph you want to indent.
  2. Click the Indent or Outdent button in the Property inspector, choose Text - Indent or Outdent, or choose List - Indent or Outdent from the context menu.

Note: You can apply multiple indents to a paragraph. Each time you choose this command the text indents further from both sides of the document.

Changing the text colour

You can change the color of selected text so that the new color overrides the text color set in Page Properties. (If no text color has been set in Page Properties, the default text color is black.)

To change the color of text:

  1. Select the text.
  2. Choose from the following options:

Creating bulleted and numbered lists

You can create numbered (ordered) lists, bulleted (unordered) lists, and definition lists from existing text or from new text as you type in the Document window. Definition lists do not use leading characters like bullet points or numbers and are often used in glossaries or descriptions. Lists can also be nested. Nested lists are lists that contain other lists. For example, you might want an ordered or bulleted.

To create a new list:

  1. In the Dreamweaver document, place the insertion point where you want to add a list, then do one of the following:
  2. Type the list item text, then press Enter to create another list item.
  3. To complete the list, press Enter twice.

To create a list using existing text:

  1. Select a series of paragraphs to make into a list. Click the Bulleted or Numbered List button in the Property inspector, or choose Text > List and select the type of list desired-Unordered List, Ordered List, or Definition List.

To create a nested list:

  1. Select the list items you want to nest.
  2. Click the Indent button in the Property inspector, or choose Text - Indent. Dreamweaver indents the text and creates a separate list with the original list's HTML attributes.
  3. Apply a new list type or style to the indented text by following the same procedure used above.

Inserting special characters

Certain special characters are represented in HTML by a name or a number, referred to as an entity. HTML includes entity names for characters such as the copyright symbol (©) the ampersand (&), and the registered-trademark symbol (®). Each entity has both a name (such as —) and a numeric equivalent (such as —).

Note: HTML uses the angle brackets <> in its code, but you may need to express the special characters for greater than or less than without Dreamweaver interpreting them as code. In this case, use > for greater than (>) and &it; for less than (<).

You can insert several special characters (in the form of HTML entities) by choosing the Characters category in the Insert bar. To insert a special character into a document:

In the Document window, place the insertion point where you want to insert a special character and do one of the following.

Note: There are many other special characters available; to select one of them, choose Insert - Characters - More or select the Insert More Characters icon in the Insert bar, select a character, then click OK.

HyperLinks

To 'link' to another document in the same or different site, or instantly jump to a specific location in the current document, use hypertext links.

Text links on a page are usually displayed in a color and are underlined.

Graphic links may have a colored border around them.

An HTML link consists of two parts:

To create a link to a document within your site:

Linking to documents ont with your web site

Using Images as Links

Using a graphic as the source of a link is not much different than using text.

Targets

Normally, when you activate a link, the target page opens in the same browser window you are currently in, overwriting your page with the link page.

Targets other than _blank only work when your page has frames defined.

Hotspots

You can define hotspots in an image to act as links.

For example, you might have an image that is the map of a state, with several cities labeled on the image. You could create a hotspot for each label so the user could view additional information about each city by clicking the city name.

An image that has hotspots defined in it is called an image map.

Anchors

In addition to linking to external documents or Web pages, you may want to link to some spot in the current page.

To create a named anchor:

Tables

Create and modify a table in Standard view

Standard view is the typical Dreamweaver design view. To create a table in Standard view, you use the Insert Table command. Dreamweaver creates a table based on options you select in the Insert Table dialog box. You can easily modify the initial table structure to create more complex design by merging and splitting cells, and by inserting rows and columns.

You use the table cells to control the placement of text and images in a web page.

Insert a table

In the Document window, place the insertion point in the document, then do one of the following:

1

Adding and removing rows and columns

To add and remove rows and columns, use the commands in the Modify - Table submenu. or right click within a cell and choose the table menu which appears

Note: Pressing Tab in the last cell of a table automatically adds another row to the table.

To add rows or columns:

  1. Click in a cell and do one of the following:
  2. If you chose Insert Rows or Columns, enter the necessary information in the dialog box, then click OK.

To delete a row or column:

  1. Click in a cell within the row or column you want to delete and do one of the folllowing:

Note: Alternatively, you can select a complete row or column and then choose Edit > Clear or press Delete; the entire row or column is removed from the table.

To add or delete rows or columns using the Property inspector:

Select the entire table and in the Property Inspector, and increase or decrease the Rows value to add or delete rows. Dreamweaver adds and removes rows at the bottom of the table.

Or increase or decrease the Cols value to add or delete columns. Dreamweaver adds and removes columns at the right side of the table.

Note: Dreamweaver does not warn you if you are deleting rows and columns that contain data.

Splitting and merging cells

Use the Property inspector or the commands in the Modify - Table submenu to split or merge cells. You can merge any number of adjacent cells-as long as the entire selection is a line or a rectangle of cells-to produce a single cell that spans several columns or rows. You can split a cell into any number of rows or columns, regardless of whether it was previously merged. Dreamweaver automatically restructures the table (adding any necessary COLSPAN or ROWSPAN attributes) to create the specified arrangement.

To merge two or more cells in a table:

  1. Select the cells. The selected cells must be contiguous and in the shape of a rectangle.
  2. Choose Modify - Table - Merge Cells, or click the Merge Cells button in the Property inspector. The contents of the individual cells are placed in the resulting merged cell. The properties of the first cell selected are applied to the merged cell.

To split a cell: