Macromedia Dreamweaver 8 Getting Started -Basic Web Page Tutorial
Window Elements While Dreamweaver can look very intimidating when it is first launched it is an easy program. Dreamweaver know that your files must be organized and will help you save the files into the folder you use. The illustration below highlights the main areas you will be using when creating web pages. In the Panels groups, the panels can be expanded or collapsed by clicking the expander arrow to the left of the panel name. The main panel is the Files panel on far right.
If you do not see these areas on your screen, or if you want to display other panels you previously closed, go to the Window menu and select the appropriate options to bring them back on the screen. Example: Window, Insert, Properties and Files should all have check marks beside them. Defining Your Site The very first thing you should do is define a site to organize your web pages. Doing so lets you set up, or define, all of the settings necessary for publishing so the process will ultimately be as easy as clicking one button. But you must realize that when you create web pages, you will be working with two sets of files - the local files (used for editing, works-in-progress, and publishing) and the remote files (already published and available web pages). Student Tips: Even if you have already started a web page you must do this each time you sit down at a new or different campus
computer, otherwise Dreamweaver will not be able to publish your pages. 1. Select Site, Manage Sites. (See example below) 2. A Manage Sites window appears, click on New, Site. (See example below)
At the Site Definition window you will need to click on the Advanced tab to see screen as examples below.

Defining Your Local Site

Example of Site Definition of Local Information Page above, follow steps below. 1. On the Local Info page fill out the Site Name by putting in your web site name here. This will not show up on the web page, it is only used for reference on this program. If it is for a departmental page put your department name here. 2. The Local Root Folder will be your folder for your publishing files. We suggest creating a folder on the network in your Private or Public folder. Click on the yellow folder to find the path to your folder. At Dickinson each student has their own folders which are found on the Y drive or it is called Resserv. 3. The HTTP Address will be the web address that will bring up your web page. An example of a web address for a student would be: http://users.dickinson.edu/~smitht
Defining Your Remote Site
Example of Site Definition of Remote Information Page above, follow these steps for on campus and for PC computers. 1. Click on the Remote Info under the Category menu and a Remote Info window appears. Under Access choose Local/Network. 2. The Remote Folder will be W:/ for personal web pages. Click on the folder; navigate to the My Computer for the W drive. For Mac computers click on Go, Connect to Server, type smb://users.dickinson.edu/websites$/~username and click Go. A SMB/CIFS System Authentication dialog box appears. Type in your Active Directory/Network/Gateway password and click OK. This will be the place to navigate to. 3. Your site has been defined, so just click OK.
Example of Site Definition of Remote Info Page below for off campus and Mac computers. 1. Change the FTP Host to: users.dickinson.edu 2. Change the Host Directory to: /~username *Be sure to use the slash under the backspace key on the pc keyboard or delete key on a Mac. 3. Change the Login to: username 4. Put your Active Directory/Network/Gateway password in the Password area and click on the Test button. (See example below)
You should get a Successful Connection dialog box. Click OK (see example below)
First Things First Before you even begin typing the content of a web page, get into the following habit: From the File menu, select Save, after you have created a new page and before you start to edit it. Make sure to save the file in the folder you specified as the Local Root Folder when you initially defined the site. In the Save As dialog box, enter a name for the file. If this page is your home page (see next section), make sure to name it index.htm or index.html. (Web pages can have either.htm or.html as their file extension.) Other pages can be named whatever you wanted following the rules below. Rules for filenames: Avoid using long file names; keep them short Do not use spaces; you may use a hyphen or underscore to simulate separate words Use letters or numbers, but no special characters Stick to lowercase letters; files on the web server are case-sensitive After the file has been saved, give the page a Title. At the top of the Document window, type in the Title box, then press Enter. Titles are displayed in a web browser's title bar only and will not actually appear as text within the page. Creating a Home Page A home page is a special web page - it's the page that automatically appears whenever someone browses to your web site. In order for the home page to automatically load, when it is created, it must be saved with a special name, index.htm or index.html. All other web pages you create can be saved with whatever name you like. Remember lowercase and no special characters! Adding Text Simply begin typing the text you want to add to the page. Press Enter only at the end of paragraphs, otherwise, let the text word wrap. Whenever you press Enter, a double-space will appear between the paragraphs of text. If you, instead, want only a single space, press Shift-Enter instead. This is called a line break, as opposed to a paragraph break. You may add typical formatting, such as Bold or Italics by clicking the appropriate buttons on the Property Inspector. If you want to change text alignment (left, center, or right), just click the desired button on the Property Inspector. Headings There are six pre-defined heading sizes, 1 through 6, which are web page standards. Heading 1 is the largest and heading 6 is the smallest.

1. Make sure the cursor is on the line you want to change. On the Property Inspector, drop down the Format options and select the desired size. 2. Type the text for your heading and press Enter. 3. To return to normal text, drop down the Format options on the Property Inspector and select Paragraph. Indenting Text You can add indents as you're typing the paragraph or later. Just remember that indenting works on a paragraph by paragraph basis. If you want to indent the current paragraph, make sure the cursor is somewhere within the paragraph and click the Text Indent button on the Property Inspector. If you want to indent several paragraphs at the same time, simply select all the sequential paragraphs first, then issue the Text Indent command. To remove an indent, make sure the cursor is within the paragraph, click the Text Outdent button on the Property Inspector. Selecting Text and Background Colors 1. From the Modify menu, select Page Properties, select Appearance under Category. (see example below) 2. Select a Text color by clicking on the selection box to the right. A palette of web-safe colors appears. Just click on the color you want. Select a Background color by clicking on the selection box to the right. A palette of web-safe colors appears. Just click on the color you want. Click OK to return to the document.
Inserting Graphics Only two graphics formats are supported on the web are.GIF and.JPG. 1. The place the cursor where you want to insert the graphic. Click the Insert Image button on the Insert Bar. 2. Select the image file that you want to insert. (You save yourself time if you store your images in the same folder as your web page.) Notice at the bottom of the dialog box, that the images location in the URL field is Relative To the Document. 3. If you want to see a preview of the image before you select it, just place a check mark in the Preview Images check box. (Example above) 4. When your choices are complete, click Select to insert the image into the page. Notice the Property Inspector options have changed because you now have the image selected (See above example) 5. On the left side of the Property Inspector, there is a white box where you should enter a name for the image - do not use spaces. This is an internal name and, while not necessary, providing one is a good habit to begin. 6. On the right side of the Property Inspector, click in the Alt text box. Type another name for this graphic. The Alt tag is important to include because some individuals have visual impairments and their web browser will read it the contents of the Alt tag to them. You may use multiple words, spaces and capital letters in this box. 7. Finally, dropped down the Align option to select how text will align with the graphic. If you want text to wrap around the graphic, select either Left or Right. Only these two options can be used to wrap text around the graphic. All of the other selections only it work for single lines of text.

Adding Links to Other Web Pages You can create links on your page two other web sites or to other pages you've created within your own web site. It's important to verify the accuracy of your links before you publish the page. Always preview your web page in your browser and test each individual link. More on that in the next section Anatomy of a Link A link is either a piece of text or a graphic which, when clicked, will take your reader to another location on the web. This location could be another part of the page or a completely different page on your own web site, or it could be a page located on an entirely different web server. The link itself has two parts: 1) the clickable text or graphic and 2) the location on the web.
To create a link to someone else's web site: 1. Select the text for the link. 2. In the Property Inspector, click in the Link text box and type the URL for the web site, then press Enter. Always start the link with http:// otherwise the link will not work. (See example below using Google)
To create a link to another of your own web pages: 1. Select the text for the link. 2. In the Property Inspector, click the yellow folder icon at the end of the Link text box. 3. In the Select File dialog box, select the web page to which you want to link, then click Select. Note: If the page you just selected hasn't previously been published, you must make sure to publish that page also in order for the link to work.
Adding an Email Link If you want readers to be able to send you feedback or questions on your page, create an email link. 1. Position the cursor where you want the link to appear. 2. From the Insert Bar, click the Email Link button. (Or, if you'd rather use a menu, go to Insert and select Email Link.) 3. In the Text box(example above), enter the text you want to appear as the link on the page 4. In the E-Mail box, enter your full internet email address and Click OK. (smitht@dickinson.edu)
Linking to another location within the same page or named anchors This is a trickier type of link because there are two processes you must perform. First you need to define the anchors, or the locations within the page where you want to jump to when someone selects the link. Once all of the anchors have been defined, then you create the links on the page to go to those anchors. Follow this process for each link: 1. To define an anchor, place the cursor at the beginning of the text you want to jump to. 2. On the Insert Bar, click the Named Anchor button. 3. On the Named Anchor dialog box (example above), type in the name you want for the anchor. It's a good practice to keep the anchor names relatively short, yet easy enough to remember, and do not use spaces and Click OK. 4. You will see a small yellow anchor appear to the left of the text 5. Repeat steps 1 through 4 until all anchors have been defined. 6. Now, define the link. Select the text you want for one of the links. In the Property Inspector, drag the Point to File icon (located to the right of the Link text box) to the associated anchor icon. 7. Repeat step 5 until all links have been defined.

Specifying the color of text links There are 3 colors (in addition to the regular text color) which are associated with links on a web page. There is the initial link color (before anyone clicks it on the page), the visited link color (the color the link becomes once it has been clicked and visited), and the active link color (the color the link becomes as you click and hold the mouse on it). 1. From the Modify menu, select Page Properties, select Link under Category. (example below) 2. Click on the color boxes for any of the desired colors, then make your choice and Click OK
Creating a Graphic Link 1. Select the graphic that you want to link. 2. In the Property Inspector, click in the Link text box, type the link you want, and then press Enter. Previewing Pages Prior to Publishing It's always a good idea to preview any web page before you publishing it on the web server. This way, you can verify that all the links work and you can fix any formatting problems that appear. 1. From the File menu, select Preview In Browser. 2. On the side menu that appears, you will see a web browser listed, such as Internet Explorer. Just click on the browser you want. The browser will open with your page displaying on the screen. 3. Check all of the links by clicking on them to verify they go to the intended locations. When
everything looks good, you can then publish the finished pages. 4. Close the browser window to return to Dreamweaver. Publishing Finished Pages Publishing the finished pages is a snap with Dreamweaver. If you still have the file open: 1. Click the File Management button on the toolbar, and then select Put. (green and blue arrows) 2. If you've not connected to the web server until now, you are asked to put in your password. Enter your Alpha password and press <Enter>. 3. Dreamweaver will ask if you want to include dependent files. (These would be files, such as graphics, also included on the page.) Always click Yes. Another way of publishing pages is from the Files panel: 1. Highlight the file (s) you want to publish. 2. Click the Put button on the "Files" panel toolbar. 3. Dreamweaver will ask if you want to include dependent files. (These would be files, such as graphics, also included on the page.) Click Yes.

Macromedia Dreamweaver 8

Getting Started with Tables Tables: Adjusting Basic Table Elements Tables: Formatting Options Inserting a Table With a Caption
Getting Started with Tables
This document shows how to create tables, add text and images to tables, and select a table or table parts in a Dreamweaver document.
Creating Tables Adding and Formatting Table Text Inserting Images Selecting a Table or Table Parts

Creating Tables

Tables are composed of horizontal rows and vertical columns. When creating tables, you have the option of using the Insert menu or the Table bar in the Common tab. button located on the Insert
1. Place your insertion point where the table should appear. 2. From the Insert menu, select Table. OR From the Insert bar, in the Common tab, click TABLE The Table dialog box appears.
3. In the Rows text box, type the desired number of rows. 4. In the Columns text box, type the desired number of columns. 5. OPTIONAL: To alter the width of the table, a. In the Table width text box, type the desired size. b. From the Table width pull-down list, select the unit of measurement NOTES: The Percent option specifies a percent of the screen the table will take up. Your control over the size is relative because the table will adjust to fit the size of the user's browser. The Pixels option specifies the exact size of the table, giving you more control. 6. OPTIONAL:To add a border around the cells of the table, in the Border thickness text box, type a number. HINT: For no border, type 0 (zero). 7. OPTIONAL: To adjust the cell padding and cell spacing, in the Cell padding and Cell spacing text boxes, type the desired numbers. NOTE: Cell spacing is the space between adjacent cells. Cell padding is the amount of blank space surrounding text or images in a cell. Adjusting either of these options affects the entire table proportionally. 8. Click OK. A blank table appears.

Adding the Table ID

To increase the accessibility of your web page, it is recommended that you add a table ID. The table ID is similar to the alternate text of an image; it identifies the object to devices that read web page content. 1. Select the entire table
2. In the Table Properties pane, in the Table Id text box, type appropriate text by which to identify your table

3. Press [Enter]

Adding and Formatting Table Text
Text is added to a table by typing directly in the table's cells. Once text has been added to a table, it is formatted just as any other text in a document would be.

Adding Table Text

1. With the insertion point in the desired cell, type the appropriate text HINT: To move between table cells, press [Tab]. 2. Repeat as necessary.
Aligning Text within a Cell
You can align text horizontally or vertically within a cell. The horizontal alignment options are left, right, center, and default, which is the alignment of the text when the cell was created. The vertical alignment options are default, top, bottom, middle, and baseline. HINT: Baseline aligns all the text in the row along the imaginary line created by the bottoms of the letters. 1. Place the insertion point in the desired cell. 2. To adjust the horizontal alignment, in the Properties pane, click the appropriate. text alignment button OR From the Horz pull-down list, select the desired option. 3. To adjust the vertical alignment, from the Vert pull-down list, select the desired option.

Inserting Images

Images are inserted into tables just as they are inserted anywhere else in a web page. For more information about images see Working with Images. 1. Place the insertion point where the picture is to appear in the table 2. From the Insert menu, select Image OR From the Insert bar, in the Common tab, click IMAGES The Select Image Source dialog box appears.
3. Using the Look in pull-down list, navigate to and select the appropriate image. 4. Click OK. The image will appear where the insertion point was placed in the table.
Selecting a Table or Table Parts
A table or parts of a table can be selected so that you can edit or delete certain cells, rows, or columns within a table.

Selecting a Cell

1. [Ctrl] + click in the desired cell. The cell is selected.

Selecting a Row

1. Move the insertion point to the left of the row. A dark arrow appears. 2. Click once. The row is selected. 3. OPTIONAL: To select multiple rows, drag the arrow past the rows you wish to select.

Selecting a Column

1. Move the insertion point to the top of the column. A dark arrow appears. 2. Click once. The column is selected 3. OPTIONAL: To select multiple columns, drag the arrow past the columns you wish to select.
Selecting an Entire Table: Quick Menu Option
1. Right click within the table select Table Select Table.
Selecting an Entire Table: Mouse Option
1. Place the pointer over any border of the table. The pointer becomes a 2 headed arrow with two vertical or horizontal lines (depending on which border you have your insertion point over) between the arrows. 2. Click the border. The entire table is selected.
Tables: Adjusting Basic Table Elements
Once you have created basic table elements, you may want to adjust them. This document explains the difference between table and cell properties and shows how to adjust basic table elements.
Comparing Table & Cell Properties Adding Rows and Columns Deleting Rows and Columns Resizing Rows and Columns Merging Cells Splitting Cells Adjusting Cell Spacing and Padding
Comparing Table and Cell Properties

When you adjust tables, you can adjust some properties that affect the entire table and other properties which affect only the cell you are working with. For example, if you want to align the entire table with the center of the page, you would adjust the alignment property of the entire table. If you wanted to align the text in a cell with the center of that cell, you would adjust the alignment property of that individual cell. Because table properties and cell properties are often called the same thing, it is important to pay attention to which property you want to adjust. The following table summarizes some of the key differences: Table Property Alignment Aligns the entire table to the right, center, or left of the page Height Width Adjusts the height of the entire table Adjusts the width of the entire table Cell Property Aligns the text in a cell to the right, center, or left of the cell Adjusts the height of the specified cell Adjust the width of the specified cell

Adding Rows and Columns

You may add a row or column to a table you have already created. This can be accomplished through the Modify menu; however, psressing [Tab] in the last cell of the table will also add a new row. 1. To add a row, place the insertion point in the row below where the new row should appear. To add a column, place the insertion point in the column to the right of where the
new column should appear. NOTES: When you insert a row, it will appear above the selected row. When you insert a column, it will appear to the left of the selected column. 2. From the Modify menu, select Table Insert Row or Insert Column.
Deleting Rows and Columns
When you delete a row or column, all cells and their contents are deleted. 1. Place the insertion point within the row or column to be deleted. 2. From the Modify menu, select the Table Delete Row or Delete Column.
Resizing Rows and Columns
WARNING: If you use the drag option to resize row height or column width, keep in mind that changes made to one column or row will affect every other column and row proportionally. If you do resize cells using the drag option, note that table widths fixed at greater than 600 pixels may cause the following:

On some monitors, users may have to scroll horizontally to view all of your information. Table content may be cut off when printing. Fixed column width for one or more columns may force awkward spacing that is not intended in other columns.
Fixed row height may cause awkward or uneven spacing between rows. It is better to set and maintain a relative height and width by adjusting rows and columns using the Table Properties Pane.

Adjusting Row Height

You can adjust row height either by clicking and dragging the border or by typing a value in the Table Properties pane. It is recommended, to ensure uniform formatting, that the row height be typed rather than dragged. 1. Point to the left of the row you wish to adjust. Your pointer turns into a black arrow. 2. Click to select the row. 3. In the Table Properties pane, in the H text box, type the desired row height. 4. Press [Enter]. The row is adjusted to the specified height.

Adjusting Column Width

You can adjust column width either by clicking and dragging the border or by typing a value in the Table Properties pane. It is recommended, to ensure uniform formatting, that the column width be typed rather than dragged. 1. Point above the column you wish to adjust. Your pointer turns into a black arrow. 2. Click to select the column. 3. In the Table Properties pane, in the W text box, type the desired column width. 4. Press [Enter]. The column is adjusted to the specified width.

Merging Cells

1. Select the cells to be merged. NOTE: To learn how to select cells, see Getting Started with Tables. 2. From the Modify menu, select Table Merge Cell. OR In the Table Properties pane, click MERGE CELLS.

Splitting Cells

1. Select the cell(s) to be split. NOTE: To learn how to select cells, see Getting Started with Tables. 2. From the Modify menu, select Table Split Cell. OR In the Table Properties pane, click SPLIT CELL. The Split Cell dialog box appears. 3. For Split Cell Into, select Rows or Columns. 4. In the Number of Rows or Number of Columns text box, type the desired number. 5. Click OK.
Adjusting Cell Spacing and Padding
Cell spacing is the space between adjacent cells. Cell padding is the amount of blank space surrounding text or images in a cell. Adjusting either of these options affects the entire table. The following graphics are examples of tables that use cell spacing and cell padding: Table with Cell spacing of 10

Cell 1 Cell 3

Cell 2 Cell 4
Table with Cell Padding of 10 Cell 1 Cell 3 Cell 2 Cell 4

Adjusting Cell Spacing

1. Place the insertion point in the table. 2. From the Modify menu, select Table Select Table. OR Right click the cell select Table Select Table. The Table Properties pane appears.

3. In the CellSpace text box, type the desired number. 4. Press [Enter].

Adjusting Cell Padding

1. Place the insertion point in the table. 2. From the Modify menu, select Table Select Table. OR Right click the cell select Table Select Table. The Table Properties pane appears. 3. In the CellPad text box, type the desired number. 4. Press [Enter].
Tables: Formatting Options
In addition to adjusting basic table elements, you can format tables with options such as borders, column/row header cells, and backgrounds.
Borders Using Header Cells Adding Backgrounds

Borders

A border is a group of lines that mark the edges of cells and tables. You can specify the width and color of a border.

Applying Borders

3. For no border, in the Border text box, type 0 (zero) To include a border, in the Border text box, type a number greater than zero. NOTE: The larger the number, the wider the border.

Adjusting Border Color

When choosing a border color, keep in mind that not all browsers support colored borders. Also, the borders may look different when viewed from different browsers and from different versions of the same browser. 1. Place the insertion point in the table. 2. From the Modify menu, select Table Select Table. OR Right click the cell select Table Select Table. The Table Properties pane appears.
3. In the Brdr Color text box, type the hexadecimal value of the desired color. , select the desired color. OR From the Brdr Color pull-down list To learn more about hexadecimal color values, refer to Selecting Colors by Value.

Using Header Cells

A header cell is a cell that labels the row or column it is in. The text within the header cell is bold and centered. Header cells improve the page's accessibility for visionimpaired users. In the table that follows, the header cells are the cells that contain the class name and the weeks. Physics Problem 2 Quiz Week 1 Problem 1 Read Ch 2 Week 2 Read Ch 3 Problems 3 & Read 4 Handout Week 3 Read Ch 4 Problem 6 Reserve Reading
Discussion of Quiz Problem 5 Discussion of Problems 3,4 & 5 Review for Test #1 Test
1. Place the insertion point in the appropriate row or column The Row or Column Properties pane appears.
NOTE: For information on selecting within tables, refer to Getting Started with Tables. 2. Select Header. NOTE: The header option is selected when the Header checkbox is checked.

Adding Backgrounds

A background is an image or a solid color that appears behind text or images in the table. You can apply a background to an individual cell or to the entire table. WARNING: Not all browsers support background images for tables or cells. Also, the backgrounds may look different when viewed from different browsers and from different versions of the same browser.

Adding Cell Background Images
1. Place the insertion point in the appropriate cell. The Cell Properties Pane appears.
2. In the Bg text box, type the location of the desired image. OR To select the image, a. Click BACKGROUND URL OF CELL. The Select Image Source dialog box appears. b. Using the Look in pull-down list, locate and select the appropriate file. c. Click OK.
Adding Table Background Images
3. In the Bg Image text box, type the location of the desired image. OR To select the image, a. Click BROWSE FOR FILE.
b. Using the Look in pull-down list, locate and select the appropriate file. c. Click OK.
Adding Cell Background Colors
2. In the Bg color text box, type the hexadecimal value of the desired color. , select the desired color. OR From the Bg color pull-down list To learn more about hexadecimal color values, refer to Selecting Colors by Value
Adding Table Background Colors
3. In the Bg Color text box, type the hexadecimal value of the desired color. OR From the Bg Color pull-down list , select the desired color. To learn more about hexadecimal color values, refer to Selecting Colors by Value.
Inserting a Table With a Caption
A caption is text that appears above or below a table. The purpose of table captions is similar to the purpose of most picture captions they explain or clarify. A caption is especially useful when a table presents statistics or numerical data. Before inserting your table, you must set your preferences to include table accessibility options. Keep in mind that not all browsers interpret options consistently; the way captions appear may vary depending on the browser and version. 1. From the Insert menu, select Table OR From the Insert bar, on the Common tab, click INSERT TABLE The Insert Table dialog box appears.
2. Complete the Table size and Header sections appropriately. 3. Under the Accessibility section, a. In the Caption text box, type an appropriate caption. b. From the Align caption pull-down list, select the desired alignment for the caption. c. In the Summary text box, type appropriate text to summarize the information displayed in the table. 4. Click OK. The table is inserted with a caption, if specified, above it.