Web Publishing with Dreamweaver 8 (for Windows)

You may print this page if you feel the need.  But we will be updating it as needed; so the online copy will always be most up-to-date.

Setting up the our workspace

[ back to top ]

Getting your toolbar to display in tabs:

  1. Open a new page
    1. File > New... (choose Basic Page, HTML and click "Create")
  2. Click the (now available) "Common" menu and select "Show as Tabs"

Add the Standard toolbar to your document window(s):

  1. View > Toolbars > Standard

Remember:

  1. F4 hides (or un-hides) all the panels.
  2. The "Window" menu has panel-shortcuts.
  3. F12 previews your document in your default browser or File > Preview in Browser > [pick browser]
Toolbars

[ back to top ]
  • The "Common" toolbar
    • This is where you find the tools you use most: links, tables, images, etc.
  • The "Document" toolbar
    • Code views, document "Title", Preview in browser, etc.
  • The "Properties" panel
    Note: This panel varies, depending on what you have selected (where your cursor is).
  • The "Files" panel
    • This is where your files are displayed; you may display local or remote files.
  • Rulers and Guides
    • You may drag guides out of each ruler, to assist you in lining page elements up.  To get rid of a guide, just drag it back to the closest ruler.
    • Put your cursor between a guide and a ruler and hold down the Ctrl key to see how far the guide is from that ruler; this works between guides too.
  • The Status Bar (at the bottom of your document window(s): Shows the tag(s) for the content you have selected (where your cursor is).  Shows the document size and download time.
    • Note: To change the connection speed used to calculate download time: Edit > Preferences > Status Bar (below the big box, select your connection speed).
  • Right click anywhere in the document window and choose "Page Properties..." (last entry on the list)
    • This allows you to change all manner of  default settings for the document (color, font, etc.).
Defining a Site

[ back to top ]

It is important to define a local "site" or work-folder, because the most common way to use Dreamweaver is to edit local copies of your web pages, then upload them to a server.

You have to do this for each web site you maintain with Dreamweaver; but you only have to set up each site one time.

To define a new site:

  1. Site > New Site...
  2. Name the site (I recommend naming it the same as your directory on the web server that you publish to)
    Add the HTTP (URL) of your site.
    • I have made directories for you on our "public" server like:
      http://public.csusm.edu/[your-user-name]
      So, I'd name my site "garrett" and type: http://public.csusm.edu/garrett for my URL.
  3. For this class, keep "No" selected, when prompted if you want to use server technology.
  4. For this class, keep "Edit local copies..."
    Choose the folder on your computer where you'd like to store the files.
    • For this class, I recommend your H: drive.
      Click the folder icon to "browse" for H: drive.
      Create a new folder on your H: drive, then "Select" it.
  5. For this class, we will connect to the remote server via "FTP" (the remote server is the web server)
    Hostname: sm.csusm.edu
    Folder: /public/[your-user-name]
    FTP login: [your-user-name]
    FTP password: Please leave this blank and do not "Save" it.
    Secure FTP: Check this box
    Don't "Test Connection" at this time.
  6. For this class, keep "No" selected, when prompted if you want to use check in and check out.

To create a new (sub) folder in your local site:

  1. Right click in the "Files" panel (on the right side of your screen) and select "New Folder."
  2. Your cursor is automatically queued to replace the default "untitled" name; type the name for your folder.

To connect to your remote site:

  1. In the right-hand panel "Files" click the left-most icon, that looks like to plugs to "Connects to remote host."
  2. Enter your password, when prompted (do not save it).
    Note: You will see the icon in the Files panel now shows the plugs connected and the dot next to them is green.

To upload your file(s):

Once you are connected to the remote host (the web server), you can upload a file or files.

  1. Select the file or files you wish to upload
    Hint: Use click + Shift and click + Ctrl to select or deselect multiple files.
  2. Select the "Site" folder, at the top of the Files panel, to upload the entire site.
  3. Click the blue, upward turned arrow to upload your selection.
    Note: If you have files on a remote host that you want to download to your local folder, you would display the remote host, and use the green, downward turned arrow, to download your selecions.

Note: Files and folders that you save into your local site should not contain spaces or special characters.  Allowed characters are: period, dash, and underscore.

Exercise: Define a local site for a folder on your H: drive (create the folder on your H: drive if needed) and connect to your remote site.

Adding Text and Images

[ back to top ]

Formatting Text:

  1. Select the text you'd like to format and select the style from the "Properties" panel (bottom)
    • List items can also be indented by placing your cursor anywhere in the line and hitting the "Tab" key.  And holding down  Shift + Tab will un-indent a selected line.

Inserting images:

Where do images come from?  You can either create images using an image editing application, a digital camera, or you might get completed files from a graphic designer (or the web).

To capture images from existing web pages:

  1. Open a web browser and find the image you want
  2. Right click the image and select "Save Picture As..." (if you're using Internet Explorer) or "Save Image As..." (if you're using Netscape/Firefox, etc.). 
  3. Save the image to your local disk (I like to save directly to my local site folder, defined in the Site Definition process.) using the popup window that opens.

Exercise: Save an image from the web to your local site.

To insert an image in your local site into a document:

  • Click, hold and drag the image from your "Files" panel to your document window.
  • Or you may: Insert > Image (and choose the image) to insert it where your cursor is.
  • Or you may click the image shortcut on the "Common" toolbar (and choose the image) to insert it where your cursor is.
    Note: All these options will prompt you to add Alternate (Alt) text; remember that Alt text is required for all images.  There is no need to add a "Long description."

Note: How download time is affected by the addition of images.  Dreamweaver tells you, in the the Status Bar, how long the page you are editing will take to download (56kbs is the default).  See the Toolbars section (The Status Bar subsection) for more info on download speed.

Exercise: Open three new, Basic HTML pages; add some text to each and save them in your local site.  Insert an image (that you just saved to your local site) into one of your web pages.  Be sure to add Alt text.

Links

[ back to top ]

There are several types of links that we will cover today: internal (to a file within your own site), external (to a file outside your site), named anchor (to a specific place/anchor inside a page), and email (spawns a new email to to the address defined).

Create an internal link:

  1. Select the content to become the link (text or image).
  2. Use the "Point to a File" or the "Browse for File" icon (in the "Properties" panel, next to "Link") to choose the file to link to.

Create an external link:

  1. Select the content to become the link (text or image).
  2. Type (or paste) the fully justified URL of the file you want to link to, in the field next to "Link" (in the "Properties" panel).

Create a named anchor link:

  • Create the specific place to be linked to:
    1. Place your cursor where you want your link to jump to.
    2. On the "Common" toolbar, click the named anchor icon (it looks like an anchor).
    3. Name the anchor.
      Note: You'll see a yellow, anchor icon where your cursor was (you can drag it to a different place in your document, later, if you like).
  • Create the link to your newly created anchor:
    1. Select the content to become the link (text or image).
    2. Type the pound sign (#) and the name of the anchor you want to link to, in the field next to "Link" (in the "Properties" panel).  E.g.: #Chapter2
      Note: You may also use the "Point to a File" icon to point to your anchor icon.

Create an email link:

  1. Select the content to become the link (text or image).
    • Either click the "Email Link" icon (on the "Common" toolbar).
    • Or type "mailto:" (without the quote marks) and the full email address of the person you want to be emailed, in the field next to "Link" (in the "Properties" panel).  E.g.: mailto:garrett@csusm.edu

Exercise: Create an internal, an external, and an email link on a page of yours.

Tables

[ back to top ]

Inserting a table:

  • Insert > Table (and choosing the table: rows/columns, width, border, header, and accessibility) inserts it where your cursor is.
  • Clicking the shortcut on the "Common" toolbar (and choosing the table details, as above) inserts it where your cursor is.

Inserting Rows or Columns:

  1. Right click on the row or column next to where you'd like to insert and select Table > Insert Rows or Columns (and choose whether to insert Rows/Columns, how many, and where to insert them).

Merging cells:

  1. Select the cells to merge.
  2. Right click on the selected area and select Table > Merge Cells (or Ctrl + Alt + M).

To split a cell: Right click in the cell to split and select Table > Split Cell...  (or Ctrl + Alt + S).

To delete a row or column: Select the row/column and hit either "Backspace" or "Delete."

To change column/row sizes: Select the column(s)/row(s) and type in the width (W) height (H) in the "Properties" panel.  E.g.: Select all three columns and type 33% in the W field.  You may also drag the cell border(s) to resize them.
Note: Typing numbers without a "%" will change width/height values in pixels.
Note: The numbers above each column and the table change to give you table information.

Note: You may insert any content in table cells (even other tables).  You may change background (Bg) color for selected cells (using the "Properties" panel).

Exercise: Create a table on one of your pages and experiment with its properties.

Templates

[ back to top ]

Creating and using the Dreamweaver template feature can save you time when creating multiple pages that have the same look.  Sites that use this feature, can be easily modified, since changes to the template effect each page that uses the template.  Sites can use more than one template, as needed.

To create a template HTML page:

  1. Open a new document.
  2. From the "General" tab, select Template page, HTML template and click "Create."
  3. Add content to your document that you wish to appear on all pages that use this template.
  4. Add editable regions where specific content may be added to pages that use this template.
    1. Insert > Template Objects > Editable Region (or Ctrl + Alt + V)
    2. Name the region appropriate to its function.
  5. Save the template to your site (you may add a description).

Note: Dreamweaver creates a "Templates" folder in your local site, containing all template files you save.

To create a new blank page based on a template:

  1. Open a new document.
  2. From the "Templates" tab, select your local site and the template you want to use and click "Create."

Note: If you have started your site without templates and then create one that you'd like to use: Modify > Templates > Apply Template to Page allows you to do just that.

Exercise: Create a new, HTML template page with at least one Editable Region and save it.  Apply it to an existing page.

Please fill out the evaluation for this course.

[ Designing for the Web ] [ Front Page 2003 ] [ Dreamweaver 8 ]
[ More Advanced Front Page 2003 ] [ Introduction to Photoshop CS3 ]

This page http://www.csusm.edu/garrett/electures/WebPublishingWithDreamweaverSp07/index.html
maintained by Garrett Collins (garrett@csusm.edu)
for IITS, User Support Services

Last updated Wednesday, April 16, 2008 07:45:02 AM