• Dreamweaver is user-friendly, intuitive authoring tool for creating Web pages
• Dreamweaver is compatible with HTML code written by hand or by other editors...
• Dreamweaver permits those who know HTML to view and edit the HTML
• Dreamweaver supports many advanced features of HTML 4.0, cascading Style Sheets, Dynamic HTML and Javascript
• Dreamweaver supports many useful site management features

To Launch Dreamweaver from Windows

1. Choose "Macromedia Dreamweaver" from the Start menu.
2. This automatically opens a new blank page.

1. Choose "Dreamweaver" from the Launcher.
2. This automatically opens a new blank page.  

Document Window

 

 

 

When first launching Dreamweaver, the Document window displays a blank page - Untitled Document and some palettes. Unwanted palettes can be closed by clicking the close button. (The Close area is different depending on whether you are on a PC or a Mac; On a PC the close button is the small button with an X in the upper right corner. On a Mac, the close box is the little square on the left of each palette. The Document window generally displays documents approximately the way it will appear in a web browser. This is where you "assemble" your pages by typing and inserting graphics. Notice the ruler at the top of the window in pixels, and the Status bar at the bottom.

 

The left side of the Status Bar (at the bottom of the window) displays nearby HTML tags providing a convenient way to select a specific HTML object on the screen, e.g. thereby providing a way to select the nearest table cell, or the possibly the nearest row, or even the entire table. On the right side of the Status Bar is the preset page size currently in effect, the size of the current document and its estimated transfer speed. In the lower right corner you will find a mini-version of the Launcher containing useful resources such as a way to display the HTML codes generated for the current page.

Tips for Experienced Users On Setting Personal Preferences: From the Menus select EDIT > PREFERENCE to select personal preferences to customize your environment. Screen Size: It is often convenient to design HTML pages for a certain screen size, so select EDIT > PREFERENCES > STATUS BAR and select the correct preset for your environment. For the campus, public computers screen resolution is set to 800 wide by 600 high screen resolution. Default Font: Your preferred FONT size and Font Face can also be changed to the default here Line Breaks: The type of line breaks used at the end of each line of HTML can create problems when editing with a text editor on another platform, so Dreamweaver allows you to specify the type of line breaks to suite your platform preferences. [When an HTML file formatted with Macintosh line breaks (cr) is opened in Notepad for Windows, the line breaks are ignored making the file difficult to read since Windows requires a <cr/lf> combination at the end of each line. Or, when an HTML file formatted for Windows is opened on a Mac in Simple Text. The linefeed character is appears as boxes because the Mac uses only the carriage return.] Regardless of which line breaks are used, the Dreamweaver HTML Source window (cf. WINDOW > HTML SOURCE) displays the code correctly.

 

 

Properties palette:

The Property palette appears floating above the Document Window below the menu in the above figure, and is without doubt the most useful of many Dreamweaver palettes and one you will undoubtedly want to keep displayed on the desktop while working on a page. (Adobe PageMill users have worked with something very similar) The Properties palette allows you to inspect and modify many settings, including those for text, tables, alignment, and images. The specific fields displayed on the Properties palette change depending on what type of element is selected. Pictured above is the Property palette displaying default text properties of the page.

Objects Palette The Objects Palette is opened by clicking on Window > Objects. The Objects Palette is a collection of shortcuts for more advanced operations. Novices will have little need for this Palette since most items can be inserted using the Insert menu in the menu bar. Frankly, I recommend not keeping this palette open. You will need the screen free for editing. Experienced users will notice that the Objects palette provides access to other categories of Objects besides the General Objects. Simply change the pull down menu from Common Objects to one of the other category of Objects. (E.g. when designing a form select Forms Objects, and when working with Frames, choose Frames Objects.)

---

Give your new page a Title by clicking on  Modify  >  Page Properties...and type a descriptive Title. Descriptive titles are to be preferred (e.g. "Mary Smith's Home Page" is a good page title, even though the file name is "index.html"). The title of an HTML document is not displayed in the page area itself, but appears in the browser's Bookmarks or Favorites list and is also used by many search engines.

TIP: Rather than reformat documents done in Word, Macromedia recommends that Microsoft Word documents be converted to HTML in Word. Dreamweaver will supposedly "import" this HTML. Choose File > Import > Word HTML . In the selection window, find the Word HTML file you want to open, and double-click on it. The file opens in the background and the Clean Up Word HTML window appears.

Line Breaks:

Press the Return key only to conclude one paragraph and start a new paragraph (inserting a blank line in between). If you do not want a blank line associated with a new paragraph, you can insert a soft break, by pressing <Shift-Enter> The line is terminated and the next line begins directly underneath without introducing the blank line that accompanies paragraph breaks. This will eliminate the unwanted vertical spacing but note, that a "soft-break" does not identify a new paragraph so any paragraph styles (e.g. indent paragraph) will be automatically applied to the text both before and after the line break

Typeface Usage:

You will notice that the Properties palette specifies not individual fonts but groups of font faces to cover the popular fonts used by visitors to your web pages. Use the options provided in the FONT field of the Text Properties palette rather than selecting a specific font; if this font (e.g. Times New Roman) happens not to be installed, the browser will look for the next font in the group (e.g. Times), or will substitute a Serif Font. To create certain effects with text labels, banner designs, or to make sure an unusual font selection looks the same on every browser, people use graphics editors like Macromedia Fireworks or Adobe Photoshop but text is much simpler and faster loading than using graphics.

 

Text Properties:

 

 

 

Text is always more difficult to read on a computer screen than on paper. If you expect people to print out a copy of your document you should use black text on a white background so that a printed copy will be legible. A black, text size 3, variable width font is sufficient for the average reader and should be used for the bulk of your document. However HTML sets Font Sizes using a rather odd system. Most changes to text size are done relative to the default font size normally set to 3.

The approach taken in Dreamweaver in its use of relative font sizes, not specific point sizes, is to allow the user to set the size of the default font in their browsers as best suits their needs. The Default font size is the one that they will see when you choose Default or size 3 in the Property palette or Text > Size submenu. Sizes 1 and 2 will appear smaller than the default font size; sizes 4 through 7 will appear larger. [To make your text appear in a specific point size every time, you must use CSS style sheets, and is a topic best left to experienced users]

 

To summarize, when you wish to change text size, there are two methods:either choose Text > Format and select a paragraph or heading tag, or choose a relative size from the Properties palette.

1. Using Text > Format:
   1. Place the insertion point in the paragraph, or select some of the text in the paragraph.
   2. Using the Text > Format submenu or the Format pop-up menu in the Property palette, choose an option: Choose a paragraph format (for example, Heading 1, Heading 2, Preformatted Text, and so on). The HTML tag associated with the selected style (for example, H1 for Heading 1, H2 for Heading 2, PRE for Preformatted text, and so on) is applied to the entire paragraph. Choose None to remove a paragraph format.
2. Choose a size (1 through 7) from the Property palette or from the Text > Size submenu. To increase or decrease the size of selected text, choose a relative size (+ or -1 to + or -7) from the Property palette or from either the Text > Size Increase or Text > Size Decrease menu.

Creating Lists:

HTML makes it easy to create ordered lists (each list item set off by numbers or letters), unordered lists (preceded by bullets), and a third type of list called definition lists that is the format of this paragraph (this last type can be used whenever some words appearing at the left margin alternate regularly with single indented paragraphs of text). You can create lists as you type text into a document, or you can highlight existing text and apply the list format.

When typing a NEW list:

Position your cursor on the line where you want to add a list of new items. Click the Bulleted List button or the Numbered List button in the Property palette, or choose
Text  >  List and select the type of list you want -- Unordered List, Ordered List, or Definition List.

 

Begin typing the following list, pressing Enter (PC) or Return (Mac) to begin each new list item. When finished with the list, press Enter twice.

• select a section of text you want to turn into a list. Each line ending in a paragraph tag will be turned into a separate list item.
• Click the Bulleted or Numbered List button in the Property palette, or choose
  Text > Format and select the type of list you want.

Before continuing with the next section, please save your page....so you can then use FILE > Preview In Browser ... to view how your work looks in a browser!

Believe it or not, saving your pages properly is the most critical part of making any Web page. If you follow these rules exactly, you should not have any difficulty saving pages. If you do not follow these rules exactly, there is a good chance that your links will break and your images will disappear when you upload the pages, even if they appear to work properly on your disk!

The most important rules of saving:

• Type a name for the file in the box at the bottom of the window. This file name (which appears only on your disk) should short, must NOT have spaces or symbols (such as ' " / % , &) and MUST end with ".html". If this page is to be your Personal Home Page, name it "index.html".

Good filenames:	index.html(especially important if this page will be your "home page"), friends.html, resume.html, etc.
Bad filenames:	My Page, My page.html, writing/major.html

• Click Save.

• Click the "Save" button that looks like a floppy disk toward the left of the button bar.
• Choose your Network Directory's WWW folder.
  • Click the "Desktop" button on the right side of the of the window.
  • In the list on the left, select your network directory by double-clicking on it, and then click on your WWW folder.
• Type a name for the file in the box at the bottom of the window. This file name (which appears only on your disk) must NOT have spaces or symbols (such as ' " / % , &) and MUST end with ".html". Good filenames: index.html, first_job.html Bad filenames: My Page, My page.html, writing/major.html
• Click OK.

1. Open Dreamweaver.
2. Choose "Open" from the File Menu.
3. A dialog box will pop up. Use the standard windows browse tools to locate, select it, and click Open
   
4. After clicking  the "Choose file" button, locate an existing HTML file in the browse window whether it is located in your network WWW directory, or the computer's hard drive. Click once on it, and click Open to open it in Dreamweaver.

Make sure the Properties Palette is open (WINDOW > PROPERTIES). Practice examining the properties of various portions of the page and experiment with changing them:

• select text before clicking on the Bold, Italic, Size, of Font properties buttons on the Properties tool bar (pause the cursor over an icon to discover the icon's associated specific function)
• bullet lists and numbered lists are created using the list icons
• the two icons to the right of the second row of icons on the Properties palette window allow you to increase and decrease indentation level of an entire paragraph
• text alignment (Left, Centered, Right) is handled using the three alignment icon on the right side of the tool bar

• text color is changed by first selecting the text, and changing the color selection using the small box colored black by default next to the font size

Heading 1 Heading 2 Heading 3 Heading

• linking to external web pages (links to other web pages not in your WWW folder)
• linking to pages in the same folder
• linking to another location in the same document

• Dreamweaver makes it easy to set a link to another web site - all you need is the URL. In this exercise, you create a link to Macromedia's site(URL: http://www.macromedia.com).
• select the words on your page you want to turn into a link....
• If the Property palette is not already open, choose Window > Properties
• In the Link text box of the Property palette, enter the URL to which you want to link, in this illustration I'm linking to Macromedia.

• Select the text you want to turn into a link by clicking the mouse to the left of the text, holding the button down, and dragging the mouse to the right over the text that will serve as the visible part of the link.
• Choose Window > Properties to open the Property palette, if it is not already open
• Click on the Folder icon to the right of the Link text box. The Select File window opens. Use the Folder icon to browse to another page within a site to set a link.
• Browse to find the file to which you want to link and click on the HTML File you wish to be the target of the link.
  
• In the "Relative To" pop-up menu at the bottom of the window, choose Document. Then double-click on the name of the file to select it. The filename and path appear in the Link text box of the Property palette, and the link is set. If you linked text, the text changes to the link color (blue is the default, but you can change the link color in the Page Properties dialog box). Note: If you link an image and want to get rid of the colored border that appears around the image, click on the image to select it and then set the Border to 0 in the Property palette. Dreamweaver automatically sets the Border to 0 when you link an image.

• To place an anchor on a page and link to it from another part of the same page:
• Click on a position in your document you want to serve as the target of a link. Select Insert > Named Anchor. The Named Anchor dialog box appears.
• Type a name representing this location on the page. You can call the location anything you like, but try to choose something associated with this location, and that you will remember when you want to create a link to this location.
• Click OK. The anchor - represented in Dreamweaver by a small icon that looks like an anchor - is inserted. When the page is displayed in a browser, the anchor will not be visible. (If you're distracted by the anchor icons or don't want them cluttering your design in Dreamweaver, you can turn this feature off in Preferences.)

• Select the words that will become the clickable part of the link.
• If the Property palette is not open, choose Window > Properties.
• Click in the Link text box of the Property palette, and type the name you are assigning to this anchor.
• To set a link to a named anchor, select the words that will serve as the link, and type the # sign, followed by the name you gave the anchor, in the Link text box of the Property palette. [There is a neat way to do this using Dreamweaver's graphical interface. After selecting the words that will be links, open the Properties palette ( WINDOW  >  PROPERTIES ). Immediately to the right of input box labeled "Link" is a circular icon. Position your mouse on this icon, press the mouse button and drag until your mouse hovers over the Anchor that will serve as the target for this link. Release the mouse button to create the link. (Pausing at the top or bottom of the Document Window, should initiate a scroll up or down. When you release the mouse on an anchor, Dreamweaver copies the name of this anchor, preceded by the "#" character that always precedes names of internal links, into the Link).

1. Choose "Preview in Browser" from the File Menu. If it asks if you want to save the changes, click "Yes." Your page will open in a browser.
2. Click on the link you want to test. Click the "Back" button to return to the page you are working on.

1. Select the words
2. If the Property palette is not already open, choose Window > Properties.
3. In the Link text box of the Property palette, type
   mailto: followed by your email address.

1. Choose Modify > Page Properties to display the Page Properties palette
2. Click the small box to the right of the word Background to open the Dreamweaver Color Palette. The colors in the predefined Color Palette are browser-safe. These are the 216 colors supported by both popular browsers. If you select from this list, this minimizes the risk of having colors shift when this page is viewed on different browsers. The eye dropper can be used to select a web safe color from any color on the screen. (N.B. The painter's palette icon provides access to a wider palette - but use of these colors is discouraged because results are unpredictable). Indicate a default color for the text in your document as well as colors for links, active links, and visited links by clicking on their respective color swatches.
3. If you have an image in your WWW folder suitable for use as a background, click on the button next to the Background Image box and select the image file. If the image is smaller than the browser window, the image is tiled (repeating the pattern at regular intervals) to fill the space. If a graphic is chosen as a background, this overrides a color selection.

1. Choose Commands > Set Color Schemes
2. Select a Background color as well as a combination of text colors.
3. Click O.K.

1. To change the color of specific words (Note: this will not work for links):
   1. Highlight the word.
   2. Click the arrow next to the colored square on the text formatting button bar.
   3. Choose a color and click "OK" if necessary.

• the image has a purpose on the page
• the image is small (less than 10K is good)
• Images may be used as buttons or illustrations

• GIF (Graphic Interchange Format) files, which have the extension .gif, is most commonly used for images that look good with less than 256 colors and is best suited for artwork, cartoons, and images with large areas of flat color.
• JPEG (Joint Photographic Experts Group) files, which are used for photographic images containing millions of colors, and have the extension .jpg or .jpeg
• PNG (Portable Network Graphics) files are gaining popularity and support in recent browsers.

1. Scan or save the image in your WWW directory in right format
2. Insert the image on the page.

1. Open a browser window (Navigator).
2. Locate an image on the Web. You can find many collections of free web graphics available for use on your page...

1. You should have already saved your web page before importing images because the location of the HTML document determines the path-name for your image relative to the web page's location.
2. Position the cursor where you'd like the image to be.
3. From the menu, choose Insert > Image
4. Browse to your WWW directory and select the image file, and click "Select" (or "Open" in Mac OS 9) in the dialog box that appears.
5. Click to the right of the image you have inserted on the page, and press Return to continue working on the next line. You can click on Preview Images to see thumb nail versions of graphics files and indicate that the image location is to be described Relative To: Document

• the Alt field provides clues to the image for visually impaired users who may be using a screen reader or who have the images turned off in their browser because of a slow modem.
• an image can be resized by typing a new Width and Height values (in inches or pixels) or by adjusting the images borders manually using the selection handles. Changes do not affect the actual image size
• adjust an image's alignment by selecting the image in the Document Window, and either

1. Select Text > Align > Center, or
2. Click the Align Center button in the Properties palette.

Since HTML is not a full page description language, tables offer a useful way of doing precision web page layout. They are especially useful when you want to arrange images or text side by side on a page, or create columns like those in a newspaper or magazine. You can create a wide range of designs for controlling the positioning of images on a page.

1. Click once in the Document window where you want the table to appear in your page.
2. Choose Insert > Table .
3. The Insert Table dialog box appears, allowing you to specify the number of columns, rows, the Cell Padding (the number of pixels between the border of a cell boundary and text), and Cell Spacing (the number of pixels between each table cell), Width of Table (in pixels or percentages of the browser window), and the Border field (set the Border width to "0" if you are using the table cells to serve as a grid to position text and graphics on the page, but don't want the cell borders to show. A setting of "1" displays the border around each cell (looking like a spreadsheet table); "0" if you don't want a border.
4. Setting Table Width: If you choose a percentage of the browser window, the table will adjust to your viewer's window size. This works well if you want your table to fill a certain percentage of the screen, no matter the size of your viewer's browser window or monitor. If you want better design control, however, you'll want to use a fixed-width table to ensure that the elements you arrange in the table cells do not shift around when the table adjusts. You can change these options later in the Property palette.
5. Click to place your cursor in any cell of the table and enter text and use the Property palette to format the text just as you would any other text on a page. You can also insert images, multimedia files, and even other tables in any table cell.
6. Press the Tab key to move to the next cell. etc
7. Click anywhere on the outside border of the table (tip: if you have difficult selecting the border of the table, click in side the table, and then select the entire table by clicking on "<table>" on the left side of the status bar. Simply click on to select it and reveal the table options (attributes) in the Property palette. You can use the Property palette to change a table's attributes.

• Type text into the table.
• Paste text copied from another document. Use the Paste as Text command to preserve paragraph markers. See Adding text and inserting objects. Table cells automatically expand as you type.
• Press Tab to move to the next cell or press Shift+Tab to move to the previous cell.
• Pressing Tab in the last cell of a table automatically adds another row to the table. You can also use the arrow keys to move between cells.

• Click in the cell in which you want to add an image.
• Click the Insert Image button in the Common panel of the Object palette, or choose Insert > Image.
• In the Select Image Source dialog box, select an image file.

Adding and removing a table's rows or columns: Use the commands in the Modify > Table submenu or right click inside the table and choose Table from the popup menu, to add and remove rows and columns from a table. To add rows or columns: Click in a cell where you want the new row or column to appear. Do one of the following: To add a row, choose Modify > Table > Insert Row, or choose Table > Insert Row from the context menu. To add a column, choose Modify > Table > Insert Column, or choose Table > Insert Column from the context menu. To add both rows and columns, choose Modify > Table > Insert Rows or Columns, or choose Table > Insert Rows or Columns from the context menu. In the dialog box that appears, enter the number of rows or columns you want to add, and specify whether the new rows or columns should appear before or after the selected row or column. Click OK. To delete a row or column: Click in a cell within the row or column you want to delete. Choose one of the following options: To delete a row, choose Modify > Table > Delete Row, or choose Table > Delete Row from the context menu that appears when you right click in Windows or hold the mouse button down on a Mac.   To delete a column, choose Modify > Table > Delete Column, or choose Table > Delete Column from the context menu.   To add or delete rows or columns from the bottom and right of a table: Select the entire table. (Click the table's upper left corner, or click once in the table and choose Modify > Table > Select Table.) In the Property palette, do one of the following: Increase the row or column value to add rows. Decrease the row or column value to delete rows. Dreamweaver adds and removes rows from the bottom of the table, and it adds and removes columns to the right. Dreamweaver does not warn you if you are deleting rows and columns that contain data.

1. Select the table.
2. Choose Window > Properties to open the Property palette.
3. Click the expander arrow in the lower right corner to see all properties and to select table layout options:
   • In the Rows and Cols fields, specify the number of rows and columns in the table.
   • In the W and H fields, specify the width and height of the table as a number of pixels or as a percentage of the browser window. You usually don't need to set the height of a table. Use the Align field to specify how a table aligns with other elements in the same paragraph, such as text or images. Left aligns the table to the left of other elements, right aligns the table to the right of other elements, and Center centers the table. You can left-align, right-align, or center the table relative to the other elements. You can also choose the browser's default alignment.
   • In the V Space and H Space fields, specify the number of pixels of white space to leave above, below, and on both sides of the table.
   • Use the Clear Row Heights and Clear Column Widths buttons to delete all table row height and column width values from the table.
   • Use the Convert Table Widths to Pixels button to convert the table width from a percentage of the browser window to its current width in pixels.
   • Use the Convert Table Widths to Percent button to convert the current table width from pixels to a percentage of the browser window.

At the bottom of the expanded Properties palette dialog box the "Table Background" is abbreviated Bg on the bottom row

• Click the rectangle to the right of these words.
• A palette will appear; select a color by clicking on it.
• Select OK.

• the CellPad field changes the number of pixels between a cell's contents and the cell boundary (or wall).
• the CellSpace field designates the width in pixels of the borders between cells. When cell spacing and cell padding are not assigned specific values, Netscape Navigator, Microsoft Internet Explorer, and Dreamweaver all display the table as if cell spacing were set to 2 and cell padding were set to 1.
• If you are using the table for page layout, and want the cell borders to be invisible specify a border value of 0. To view cell and table boundaries when the border is set to 0, choose View > Table Borders. Use the Light Brdr and Dark Brdr fields to select border colors that have a highlight and shadow effect, respectively, giving the border a three-dimensional appearance. (To return to the default gray shades, remove the color values and leave the fields blank.) Use the Brdr field to select a border color for the entire table. Use the Bg options to select the background image or background color for the table.

Generally the first thing you would do, even before putting hand to Dreamweaver is create a folder that will contain your web pages. This folder, know in Dreamweaver as the Site folder, will hold your web site while you locate an Internet Service Provider (ISP) , and until you transfer this folder to the ISP. While you are working on campus, web files placed directly in your WWW folder located in your network directory is immediately accessible from the Word Wide Web. Your network directory is listed as your "H:" drive in Windows and as a network folder on the desktop labeled with your username on a Mac. Verify that your network directory has a WWW folder. If you want to store all your images in an Image folder, take a minute to create a new folder in the WWW folder called "Images".

The new site definition screen appears.

• select "Local Info" in the category window
• type the name of the new site in the Site Name area. (Make it descriptive)
• click the folder to the right of the words Local Root Folder.
• navigate to your desktop, (Windows users can click on the "Up One Level" icon until it turns grey - indicating you are on your desktop...Mac users can click the double arrows at the top of the window and select Desktop). Now navigate to your WWW folder within your network directory. This is the web site you will be using for all web pages. Every web page must be saved here. In Windows you open the WWW folder, and then click the Select button, and on a Mac you select but don't open the WWW dfolder and click the Choose button.
• select Enable Cache which will allow your pages to load faster.
• click OK

Congratulations on having set up your first Dreamweaver site. Next you will create some web pages, add some text, and some graphics, and link the pages together. The Site is empty at this point.