Dreamweaver is a Web page design program that lets you type text and add media elements directly into a page, much as you would with a word processing program like Microsoft Word. Dreamweaver converts your text and graphical page design into the HTML code read by a Web browser.
Site Management and Defining a Site
A basic web site is a collection of files living under a single folder, including HTML pages, images, audio files, movies, Flash documents, and possibly others. This folder is called the “document root.” It’s very important to place all web-ready files into the document root before attempting to make them part of your web pages. It’s also important to make sure that the document root contains only the files that actually comprise the web site, and nothing more (extra/unused files are called “orphans” and do nothing but take up disk space and make things more cluttered than they need to be).
Good housekeeping is essential, and needs to be considered before you even begin working on a web site. We strongly recommend creating a folder structure something like this:
So for a site called Mixed Nuts, you might have a folder structure that looks like this:
The source folder is where you’ll put the raw materials you’re working with – uncompressed audio or video, Photoshop files etc. It’s also a good idea to keep these materials organized in separate subfolders, such as images, video or audio.This material will not be uploaded to your web server, but it’s convenient to keep it close by and all under one roof. Good housekeeping is essential to a successful Web project.
The site folder is where you’ll keep your final HTMLpages, compressed video, and so on that will go onto the Web server. Only files that you want on the public to see on the Web sever will be in this folder. Into the site folder go all of the files that actually make up your web site, and nothing more. All media files under “site” should be compressed and sized appropriately.
You may want to create subfolders inside of the site folder named for sections of your site. For example, you may want to have separate folders for products, services, and brochures. In some cases, you may want separate folders for different types of media, such as images, video or audio.
You’ll need to know what filetypes are acceptable for use on the web. Here’s a handy cheat sheet to cover most cases:
Sticking to this system will have a big payoff down the road. All of the bits and pieces will be easier to find, and your site won’t swell in size or complexity as time goes on.
When working for the web, there are some folder and filenaming conventions that will make sure you have clean URLs and that sites don’t break when moved from one web server to another. These are not hard and fast rules, but you’ll probably avoid some grief down the road if you remember these three rules when naming files and folders that comprise your site:
- All files must have an appropriate 3- or 4-letter extension (e.g. .jpg or .html)
- All filenames should be in lowercase
- Do not use spaces or special characters in filenames. Use a hyphen or an underscore in place of spaces.
Once your basic folder layout has been created, launch Dreamweaver.
What you see on your screen as you create a Web page in Dreamweaver also will be very close to what the page will look like when viewed in a Web browser, making the design of your page more intuitive.
When you open the Dreamweaver program, you should see a screen that looks something like this:
The layout may appear somewhat different depending on whether you’re using Windows, Mac OS 9, or Mac OS X. The screenshots here show Mac OS X, but the principles and functionality remain constant across platforms.
If you don’t see the Properties panel (shown above at the bottom), in the Dreamweaver menu at the top select Window…Properties. You also can deselect any other toolbars or palettes that are checked in the Window menu to remove them from your screen, thus reducing clutter. Alternatively, select Window…Hide Panels to get rid of all the toolbars and other panels.
The main section of the screen is a blank canvas on which you create your Web page by typing in text, applying formatting, and laying out page designs.
The Properties panel is used to automate the process of formatting and aligning text and adding hyperlinks.
Dreamweaver helps you do more than just create and edit Web pages — it also vastly simplifies the process of managing web sites. For example, if you ever rename a page or folder on your site, Dreamweaver will automatically update links to that page or folder on all your other HTML pages so the links aren’t broken. Dreamweaver also will help keep a site on your Web server in sync with a copy of that site you may have on your hard drive.
Dreamweaver includes tools to help keep files and links synchronized and working, but you do need to tell the program a bit about your setup.
In order to accomplish this, you need to tell Dreamweaver a few things about your site’s configuration, a process called “defining” a site. This is the first thing you should do when starting work on a new site.
Defining a Site
Now that the skeleton of your site exists on your computer (or on a storage device like a Firewire drive), it’s time to tell Dreamweaver about it – a process called defining a site. To do this, in the Dreamweaver menu at the top select Site…Manage Sites…
In the panel that appears, select New…
You’ll now see a panel with two tabs at the top, labeled Basic and Advanced. The Basic tab offers a wizard that will take you through the process of setting up a site. The Advanced mode assumes you can enter information into fields without being prompted.
The Advanced mode isn’t really any harder to use, and it’s a lot faster to fill out, so click on the Advanced tab.
Give your site an intuitive name that will help distinguish it from other sites you may have defined on the same computer. For example, you might call this site Mixed Nuts.
Next, click the folder icon to the right of the Local Root Folder field and navigate to and select the site root you set up earlier, which in our example is:
The Default Images Folder is where Dreamweaver will first look for images to be included in your site. If you haven’t already, create an images subfolder inside of the site folder, then use this dialog to navigate to and select that folder.
The HTTP Address is where the final site will live on your server on the Internet. Paste or type in the full address, if you know what it is. If not, leave it blank for now.
Next, select the Remote Info entry in the list at the left.
This is where you tell Dreamweaver how to transfer finished Web pages from your computer to your Web server. You’ll either be accessing the remote files via File Transfer Protocol (FTP), such as if you’re working from home, or over a network (LAN), such as if you’re working on a network connected to the Web server.
If you don’t know this information already, ask your systems administrator. If you’re working with a commercial ISP, you should find documentation on their Web site about how to access their FTP server. The information needed is quite minimal: server name, login or user name, password, and an optional “host” or starting directory.
(You also can leave these entries blank for now, build your Web site on your computer and then fill in the Remote Info fields later when you’re ready to upload your site to the live Web server)
Although the advanced tab of the Define Sites panel has many more options, this is enough information to get started with Web page creation.
Opening a Site
Now that your site has been defined, you can return to it at any time to work on it by selecting it in Dreamweaver. To do this, in the Files panel to the right, click just below the word Files and select your site from the list (if you don’t see the Files panel, in the menu at the top click on Window and check the Files entry).
And if you’ve created and defined multiple sites on you computer, you can easily toggle between them by selecting them in the list in the Files panel.
(Note: if you’re going to be working on your site using more than one computer, such as in a lab with shared computer workstations, you’ll have to go through this process of defning your site on each individual computer you use)
Creating a Page
To create a Web page, begin by simply typing into the blank untitled document on the main Dreamweaver screen whatever text you want displayed in a Web browser – just as you would create a document in a word processing program like Word.
As you enter text and other elements on the page, Dreamweaver will automatically construct the appropriate HTML code in the background so it displays properly on a Web browser
Try typing some words into the Dreamweaver screen, such as:
To see the HTML code that Dreamweaver has created behind the scenes, click on the Show Code View icon in the far upper left corner (circled below). Or in the menu at the top select View…Code.
Now save the page by selecting in the menu at the top File…Save (or use the Cmd-S (Mac) or Ctrl-S (Windows) hotkeys, which work in all applications, all operating systems). In the box that appears, navigate to the drive and folder where you want your file stored (such as the site folder you defined for Dreamweaver to store your Web files). You’ll use this same folder (and subfolders within it) to store all of your HTML files, images, audio, and video. That way you can move all the files in this folder to a Web server later.
Give your Web page a name (index.html is the preferred name for the main or home page of a Web site), make sure the name ends in .html, and click on Save.
Previewing Your Document
Dreamweaver gives you a pretty good idea of how your page is going to look in a Web browser, but remember that Dreamweaver is not a browser. To see how your page really looks, in the menu at the top select File…Preview in Browser and then select a browser from the ones listed (Firefox, Safari, Internet Explorer, etc.). The hotkey for preview in the system’s main browser is F12, a good hotkey to remember, as you’ll be using it frequently.
Your document then will be launched in the browser you selected so you can see how it looks in a real browser.
Your simple test document will probably look the same in Dreamweaver and in the browser, but as documents and layouts become more complex, differences become more apparent.
A complex page also will display differently in different browser (Explorer, Netscape, Safari) and on different operating systems.
So you should test your pages in a variety of browsers on both Mac OS and Windows before going live!
You can easily change the format of text you’ve written by highlighting it with your mouse and then using the options in the Properties panel.
For example, in the Properties panel you can click the:
- Format arrow on the left (initially displaying Paragraph or None) for use with headings or subheadings on a page that you want in different font sizes. Heading 1 is a very large font size, while Heading 6 is a very tiny font size.
- Font Size arrow in the middle – initially displaying None – to increase or decrease the size of text (such as a paragraph of text, rather than a heading or subheading). You can pick a size either by selecting the xx-small through xx-large options, or by setting a font size from 9 to 36.
- Font style arrow to the left and initially displaying Default Font – to pick a particular font for your text, such as Arial, Times New Roman, Courier, etc. (each individual font style also has alternate entries for similar fonts – such as Arial, Helvetica, sans-sarif. This is for instances where a browser is not set up to display the font style you selected. The browser then will go to the next font entry – such as from Arial to Helvetica – until it finds a font it can display)
- B button on the right to make your selection boldface.
- I button on the right to display the selection in italics. Note that bold and italic text can also be set via the familiar Cmd-B and Cmd-I (Mac) or Ctrl-B and Ctrl-I (Windows) shortcuts you’re accustomed to using in other word processing programs.
- Text color box to change the color of the highlighted text by picking a new color from the color pallette. The text color box is the tiny gray box to the right of the Size arrow.
- Align Center button (the second button in the row of four buttons just to the right of the bold and italics buttons) to center the text on the page.
- Text Indent button (just below the centering button on the right) to indent a block of text to the right.
- Ordered List and Unordered List buttons (just to the left of the indent buttons) to create numbered or bulleted lists of text.
You use the Properties panel to add hyperlinks to a Web page.
First highlight the words you want to appear as the link on a Web page.
Then type (or, preferably, paste) the Web address to which you want those words to link in the Link field of the Properties panel.
In the Link field you can either:
- Type or paste in a full Web address (URL), beginning with http://, to point to any page on the Web
- Type or paste in the name of a file you’ve created that’s in the same folder as this file (or, if the file is in a subfolder, type in the name of that subfolder and then the file you want to link to, such as subfolder/otherfile.html, which would link to a file called otherfile.html that is in a folder called subfolder).
- Click the folder icon to the right of the Link field and navigate to the destination file you want to link to (before you do this, be sure you’ve named and saved the page you’re currently working on, so Dreamweaver will know where this page is relative to the one you want to link to).
Then press the Enter key on your keyboard.
You’ll see the words you selected are now highlighted in blue and underlined – like a hyperlink that appears on a Web page.
You also should set some basic properties for your page. The most important page property is the document Title, which is the name of the page the displayed in the blue bar at the top of a browser, the name used by a search engine if it indexes your page, and the name of a bookmark if someone bookmarks your page on their browser.
You type in the name of a page directly from within DreamWeaver by using the Title field at the top of the document window (shown here as Untitled Document).
The default name of “Untitled Document” is useless to Web surfers and search engines. So be sure to give every page on your site a unique title! Doing so will also win you big points with your local webmaster.
Other page properties can be set by going to menu at the top and selecting Modify…Page Properties, or in the Property panel by clicking on the button labeled Page Properties… (you also can use the Cmd-J (Mac) / Ctrl-J (Windows) shortcuts).
You’ll get a properties panel similar to this:
This panel again can be used to type in the document title.
You also can set margins on the page so your text and other elements do not butt up against the edge of the page. You set margins by typing a number into the margin fields – the higher the number the bigger the margin.
The Left Margin field only adds a margin on the left of the page and the Top Margin field only adds a margin to the top of the page. The Margin Width field will add a margin on both the left and right sides of a page. And the Margin Height field will add a margin to the top and bottom of the page.
Changing Background and Other Colors
You can change the background color of your page as well as the color of the text and the hyperlinks.
Again, in the menu at the top select Modify…Page Properties (or use the Cmd-J shortcut). You’ll get a panel like this:
You can change the Background color of the page by clicking on the box and selecting a color from the color pallet.
Or you can use a Background Image as the background for your page if you have an image stored as a jpg or gif file that you can link to.
You also can change the color of the Text on the page by clicking on the box and selecting a color from the color pallet.
And you can change the color of the Links displayed on a page and the color of the Visited Links (links the user has already clicked on). To do this, in the Category section on the left, click on the entry for Links, and then make your color selections for the types of links.
Note: Do NOT use the Tracing Image option until you’re more familiar with DreamWeaver nuances – this is NOT the same as the background image option.
Unlike word processing documents, which embed images into the document itself, Web pages display images by pointing to a location in the file system outside the document where the image resides.
This makes it possible to use the same image file hundreds of times throughout a Web site without duplicating the file. A webmaster will generally create a folder called “graphics” or “images” on the web server as a central location for storing images.
To insert an image into your page, click in the spot on your page where you want the image to appear.
Then in the menu at the top to select Insert…Image.
You’ll be prompted to type in some alternative text, which should be words that describe the image you’re about to insert on your page. This will help a vision-impaired person using a screen reader know what the image on the page is about.
You’ll then get a panel that looks something like this (different under Windows or Mac OS 9 of course):
This panel lets you select the source file that’s the image to be displayed on your page.
You can use the From: box to navigate through your file system to the location of the image file you want to insert.
Or you can type or paste the folder path and file name into the URL field manually (again, it’s wise to keep your graphics in a subfolder labeled “graphics” or “images” so they can easily be used site-wide).
Click Choose (or OK) and the image will appear in your Dreamweaver document at the place you specified.
Note that when you click on the image, information about the image will appear in different fields in the Properties panel. You can use these fields to make adjustments to your image.
The dimensions of the image (W and H measured in pixels), are displayed, for example. You could adjust the size of the area in which the image is displayed on the page by changing these dimension numbers. But that’s not recommended because a browser will still load the full image and then resize it on the page, slowing down the loading of the page. Instead you should resize the image itself in a program like Photoshop.
You can use other fields in the Properties panel for a selected image to change the way text near your image is displayed on the page.
For example, you can use the Align field to make text you type after an image wrap around it in different ways. If you want the image to be displayed to the right of your text, select right. If you want the image to be displayed to the left of the text, select left.
You also can type numbers into the V Space box to create vertical white space above and below your image so your text doesn’t butt up against the image (the higher the number you type in, the bigger the buffer of white space).
Or you can type numbers into the H Space box to create horizontal white space to the left and right of your image (the higher the number the bigger the buffer of white space).
You also can type a URL or a folder/file path into the Link field to turn your image into a link to another Web page.
Inserting Rollover Images
You can insert a rollover image on a Web page so that when the page is displayed in a Web browser, the image will change to another image when the mouse cursor hovers over it.
First you need to use a program like Photoshop to create two images of the same size – the image that will be displayed on a Web page in a browser, and the second image that will be displayed when a mouse cursor rolls over it.
To insert the rollover image into your page, click in the spot on your page where you want the images to appear.
Then in the menu at the top select Insert…Image Objects…Rollover Image.
You’ll get a panel that lets you select the two images you want displayed on your page.
Original Image: type in the name of the main image you want displayed on the Web page.
Rollover Image: type in the name of the other image you want displayed when someone rolls over the first image with their mouse cursor.
You also should type in some alternative text, which are words that describe the images you’re about to insert on your page. This will help a vision-impaired person using a screen reader know what the images on the page are about.
You also can type a URL or a folder/file path into the Link field to turn your rollover image into a link to another Web page.
Click Choose (or OK) and the images will be inserted into your Dreamweaver document at the place you specified.
To see the rollover, save the page and then preview the page in a Web browser.
Inserting Image Maps
You can convert an image you’ve inserted onto a Web page into an interactive map with “hot spots” that, when clicked on, will open up other Web pages.
Thus you might take a graphic file that is a map, insert it on a Web page, and then use the hot spots to call up other pages with information on the different locations on the map.
To convert an image to an image map with hot spots, first insert the image onto a Web page and then click on it to select it.
In the Properties panel, look on the lower left for the area labeled Map, where you’ll see light blue icons for the three tools you can use to select areas of a image and create hot spots.
The tools are:
- a rectangle, for drawing rectangular shaped hot spots
- a circle for drawing circular hot spots
- a polygon, for drawing custom shaped hot spots.
Click on one of the three tools and then click on the area on your image where you want your hot spot to appear.
With the rectangle and circle tools, hold down your mouse and then drag your cursor to create a rectangle or square of the size you want.
With the polygon tool, click repeatedly around the area you want as a hot spot until the lines you create connect to each other.
When you’ve created a hot spot on an image, Dreamweaver will display it in a shaded color.
Click on the hot spot, and in the Property panel you type a URL or a folder/file path into the Link field to specify the page the hot spot will link to. Then when someone clicks on that hot spot, their Web browser will open up the new Web page you specified in the Link field.
You also should type in some alternative text, which are words that describe the hot spot you’ve created on the image. This will help a vision-impaired person using a screen reader know what the hot spot on the image map is about.
Create other hot spots on your image using the same procedure.
When you’re done, click on the small arrow icon in the lower left to return to the Property panel for making general edits of your image.
To see the image map and its hot spots, save the page and then preview the page in a Web browser.
Tables for Page Layout
You can change the layout of your Web page by dividing it into vertical or horizontal sections. This allows you to display your text in one section, navigational links to other pages in another section, and pictures, video or audio clips in another section.
Note: Many pages on the Internet are laid out via tables. Although tables are the easiest way to do this, they’re no longer considered the best way. Modern Web design principles reserve tables for tabular data but prefer a technology called Cascading Style Sheets for page layout. However, CSS is a complex topic. We’ll stick to good old tables for the sake of this tutorial.
You can add a table in the middle of a page, or you can display your entire page as a table, which would break the entire page up into columns and rows.
To add a table, position your mouse cursor in a blank area where you want the table to be inserted. Then in the menu at the top select Insert…Table.
You’ll get a panel that looks like this:
Here you can set the various properties for the table, including the number of rows and columns, the width of the table (how much of the screen it will fill up) and the thickness of the borders between the columns and rows.
Setting Table Properties
The basic settings are:
- Rows – to set the number of horizontal sections into which you want to divide your page
- Columns – to set the number of vertical sections into which you want to divide your page
- Width – to determine how much of your Web page should be taken up by the table. This is defined either as a percentage of the screen or as a set number of pixels.
- Border – to add a black line defining the borders between the segments of your table. You also can set the thickness of the border. You do this by typing in a number, with 0 being no border, 1 being the thinnest border and so on.
- Cell Padding – to determine how much blank area or padding you want around the inside edge within each segment of a table (called a cell) This creates blank space around the text or other elements that are inside each segment or cell of the table. You do this by typing in a number, with 0 being no padding, 1 being a very small amount of padding, and so on.
- Cell Spacing – to determine how much blank space you want to insert between each segment or cell. You do this by typing in a number, with 0 being no space, 1 being a very small amount of space, and so on.
Note: Cell padding and cell spacing sound a bit similar, but their difference becomes more apparent once you start experimenting with them. Try creating a table with the border set to 1 and put some dummy text in each cell, then experiment with altering the cell padding and cell spacing attributes. And be sure to preview the table in a browser to see the full effect of changing cell spacing and padding.
For example, if you want a table that will:
- Split your screen into four sections
- Fill up about 4/5 of the entire screen
- Not have any lines defining the borders between the four segments
- Create a some blank space around the edges of each segment to space out the text or other elements in one segment from what you enter into another segment
You would enter these values:
- Rows: 2
- Columns: 2
- Width: 80 Percent
- Border: 0
- Cell Padding: 5
- Cell Spacing: 5
Then click on OK and a table will be added to your Web page.
Now you can type text or insert pictures or other elements into each of the table segments or cells to fill in your basic page layout. You add these elements to a table cell or segment just as you would if you were entering them on a blank HTML page.
Changing Table Properties
Once you’ve set up a table you can still change its properties by selecting the entire table.
Do this by clicking on the edge of the table (your cursor will change to a cross with arrows when you’re at the edge of the table), and information about it will appear in different fields in the Properties panel (the Properties panel also will now be labeled Table ld. Alternately you can select the entire table by clicking in a cell and then pressing Cmd-A (Mac) or Ctrl-A (Windows), or by going to the menu at the top and selecting Modify…Table…Select Table, you’ll get a properties panel that lets you set propertes for the entire table, such as number of rows and columns, cellpadding and cellspacing, and borderwidth.
Now you can use these fields to make adjustments to your table, such as the number of rows and columns, cell padding and cell spacing and border width.
Changing Table Colors
You also can set colors for the entire table. Click on the box next to Bg Color to add a background color to your entire table from the color pallette. Alternatively you can use the Bg Image field to type in the file name for an image you want as the background for your page if you have an image stored as a jpg or gif file that you can link to. Or, if you’ve created a border around your table segments, you can click on Brdr Color to add a color to the border.
Changing Table Dimensions
You also can change the dimensions of your table by clicking on any of the borders, both inside and outside the table, and dragging them up or down or to the right or left.
Thus you can make the table larger by clicking on the tiny black box on the bottom right edge of the table and dragging it down or to the right.
You can make the right column much smaller than the left column by clicking on the border between the columns and dragging it to the right.
And you could make the bottom row much larger than the top row by clicking on the border between the rows and dragging it upward.
Changing Cell Properties
You also can change some of the properties of individual cells, groups of cells or entire rows or columns, such as the background color.
Do this by clicking on a cell in the table and information about the cell will appear in different fields in the Properties panel (the Properties panel also will now be labeled Cell). To change the properties for a group of cells or an entire row or column, click on a cell and drag your cursor to the other cells to highlight them (the Properties panel will now be labeled Row, Column or Cell depending on which cells you highlighted).
Use the Bg field to change the background color for the highlighted cell or cells. Click on the box with the tiny arrow and select a color from the color pallette.
Or use the Bg field to select a background image as the background for the highlighted cell or cells. In the white box type in the folder/file path to your image.
Or use the Brdr field to change the color of the border around the highlighted cell or cells
Use the Horz field to align the text and other contents of a highlighted cell or cells horizontally (flush left, flush right or centered within the cell).
Use the Vert field to align the contents of a highlighted cell or cells vertically (top, middle or bottom of within the cell).
You can change the height or width of a selected cell or cells. But a change in one cell will affect adjoining cells.
For example, if you change the width of a cell, that will also be applied to the width of all other cells in the same column. Or if you change the height of a cell, that will change the height of all the other cells in the same row. So you can’t have cells in the same column, each of which has a different width. And you can’t have cells in the same row, each of which has a different height.
To alter the width, select the W field and change the number in the box (which then will be applied to all the cells in the same column).
To alter the height, select the H field and change the number in the box (which then will be applied to all the cells in the same row).
Merging or Splitting Cells
You can split a cell in two or merge two cells into one.
To split a cell in two, highlight the cell and in the Properties box just below the word Cell click on the split cell icon on the right.
To merge two cells, highlight both cells with your cursor and in the Properties box just below the word Cell click on the merge cells icon on the left.
Uploading to Web Server
How this happens is completely dependent on the way you’re connected to your hosting provider. For example, if you’re working within an organization, you may simply save your work to a special folder, where it will be picked up automatically and placed online after editorial review. Or you may be asked to use a full-fledged content management system (CMS) to post your content.
If you have an account with a “standard” ISP and are posting content yourself, you’ll probably need to upload your content to the server via FTP (File Transfer Protcol). You can do this from any Windows or Unix command line via the standard “ftp” command (not covered here).
More likely, you’ll use a graphical FTP client that lets you upload and download files via drag and drop. There are hundreds of graphical FTP clients available for Mac OS 9, Mach OS X, Windows, Linux, and other operating systems. We’ll demonstrate here with Transmit for OS X, but the basic principles are the same in every FTP client. Other popular clients are CuteFTP for Windows and Fetch for Mac OS 9.
Before you begin you’ll need four pieces of information from your hosting provider:
FTP server address
http document location
Let’s pretend we’ve been told to use journalism.berkeley.edu as the server, “student” as the username, “tester” as the password, and “public_html” as the document location.
All FTP clients have an initial login screen, which will look something like this. Fill in the fields with the info for the server you’re connecting to:
Once you’ve connected, you’ll see the folder structure on the remote FTP server, which will also be your Web server. If you haven’t already, navigate to your Web “root” folder (document location).
Once connected, you’ll want to save a bookmark for your FTP site so you can get back to the site later without having to remember all of the login data.
Depending on the FTP client you’re using, you may see only the files on the remote host, or you may see two panes, one with files on your hard drive and one with files on the server. Most likely you’ll be able to control whether you see one pane or two. If you see only one pane, use Explorer (Windows) or the Finder (Mac) to navigate to the files you want to upload, then simply drag and drop your files or folders into place. If you have two panes, navigate through both to display both the source and destination locations, then drag your content up to the server.
Once the upload is complete, view your Web site wherever your provider told you it would be available, e.g. http://www.myprovider.com/~myname/.
This is the end of the Dreamweaver tutorial.
This content may not be republished in print or digital form without express written permission from KDMC. Please see our Content Redistribution Policy at kdmc.berkeley.edu/license.