Introduction
Dreamweaver is one of the most widely used tools for writing web pages. It was developed by Macromedia, the same company that developed the Flash system for animating web pages. Macromedia was purchased by Adobe, the developers of Acrobat and Photoshop in December, 2005.
There are plenty of good alternatives to Dreamweaver for serious web design work -- and lots of bad alternatives too! I personally prefer to work with a good programmer’s editor, such as vim, to develop my web pages. But a programmer’s editor only substitutes for one part of an Integrated Development Environment (IDE) such as Dreamweaver, so I have to use separate programs to do a lot of the housekeeping operations that are built into Dreamweaver.
Dreamweaver (and all the other components of Macromedia’s “Studio” suite of programs, including Flash) is available on all the computers in our Lab. This web page will guide you through the process of setting up Dreamweaver so that it is tailored to doing projects for this course.
If your really want to master Dreamweaver, there are lots of Dreamweaver books and online tutorials available, and I don’t claim to have surveyed them well enough to make any serious recommendations. But I have looked at Rachel Andrew’s Build Your Own Standards Compliant Website Using Dreamweaver 8 published by Sitepoint and can recommend it. You can get a copy for about $27 from most bookstores, or directly from Sitepoint, where you can download sample chapters if you want to look at (most) of the book before deciding whether to buy it.
Setting Up
Open your template.xhtml file in Dreamweaver.
Start Dreamweaver by clicking the green Dreamweaver icon on the desktop. It’s a big program, so be patient while you wait for it to load. The big green “splash screen” that comes up in the center has a checkbox at the bottom that says “Don’t show again.” I suggest that you check that box simply because we will generally work from the menus that offer the same choices. You should also see a set of panels down the right side of thw window called CSS, Application, Tag Inspector, and Files.
The Files panel should be open. If not, click on it to open it up to show the full panel with three tabs: Files, Assets, and Snippets. Use the Files tab to navigate to your “My Web Pages” folder, which will appear under “C:\Documents and Settings\*\My Documents”. You will have to substitute your account name (with “.TREE” after it) for the asterisk. Double-click on the template.xhtml file there to open it for editing. Part of the setup process will be to convert this file into a Dreamweaver template, and you will be making some changes to it before doing that.
Change some Dreamweaver preferences.
From the Edit menu at the top, select Preferences, the bottom item. This opens up a big panel with lots of items, a few of which need to be changed. Select the fourth item, Code Formatting, and make sure the following settings are in place: Indent (checked) with 2 spaces. Tab size: a number no larger than 4 (I prefer 2). Default tag case: <lowercase>. Default attribute case: lowercase="value". Centering: Use DIV tag.
Next, select “File Types / Editors” and change the External code editor to gvim.exe. You will have to use the Browse button to locate the current version of this program. At the time this web page was written, the current version was in C:\Program Files\vim\vim63.
Now go down to the New Document preferences. Change the Default extension to .xhtml. Make the Default Document Type (DTD) XHTML 1.1. Make the Default encoding Unicode (UTF-8).
In the Preview in Browser panel, make sure Firefox is set as the primary browser and Internet Explorer as the secondary browser. If there is a third browser already listed, it may be set up incorrectly: delete it (with the big minus button) and add Opera, which is in C:\ProgramFiles\Opera\opera.exe.
In the Validate panel, turn off the checkbox for HTML 4.0 and turn on the one for XHTML 1.0 strict.
Exit the preferences panel and be patient while everything is saved.
Set up your development directory.
To make sure you are setting up your Dreamweaver site correctly, make the following changes to your “My Web Pages” directory: (1) Add three subdirectories to “My Web Pages,” and name them css, scripts, and images. (You can do this by right-clicking on My Web Pages in Dreamweaver.) Be sure to use lowercase names for these directories (see note below). Then edit your template file and create a stylesheet and a Javascript program as follows:
-
Edit your template.xhtml file.
First, copy template.xhtml to template.xhtml.save. You are about to modify it, and it’s a good idea to keep a copy of the original so you can get it back in case you make a mistake.
To edit a file, you must be in either “code view” or “split view.” There are buttons underneath the tab with the filename on it for switching views. The keyboard shortcut is Ctrl-`. (That’s a backquote, located in the upper-left corner of the keyboard.)
Change your template.xhtml file as follows: Add a link tag to the head node of the document with the following attributes and values:
Attribute Value rel stylesheet type text/css media screen href css/screen.css Now add a script tag to the head node with the following attributes and values:
Attribute Value type text/javascript src scripts/template.js Note that the link node may be a single self-closing tag, but the script node must have a separate closing tag to be compatible with Internet Explorer. The script node itself is empty.
Check your typing to make sure that what you typed is what you got.
For example, Dreamweaver automatically types closing tags for you as soon as you type “</” so be sure you didn’t repeat some of the characters it typed for you. Check that the quotes surrounding the attribute values are in the right places and that there is at least one whitespace character separating the attributes from each other.
Be careful about capitalization.
Windows does not distinguish between upper and lower case letters in file and directory names, but other operating systems, such as Unix, Linux, Solaris, and some parts of OS-X (Macintosh) do distinguish between them. To be sure your web site will not “break” when copied to one of these other systems (such as the one where I will be testing your projects!) be sure to be consistent about the case of directory and filenames wherever they appear. for example, except for the “My Web Pages” directory name, all files and directories you will be working with while setting up your site will have all lowercase names. Be sure the values of the href and src attributes in your link and script tags have all lowercase letters.
Add two div nodes to your template, one surrounding the existing h1 node, and the other one following that. Put an h2 node inside the second div, with a content of “Template Content”. Add an id attribute to the first div tag with a value of “heading”, and put an id in the second div with a value of “content”.
Save your template.xhtml file.
-
From the File menu, select New (or just type Ctrl-N), and a dialog box with two tabs will open up. From the General tab’s General category, pick a Basic page of type CSS. When that page opens up, add the following CSS rule under the comment line that will already be there:
html, body { background-color: #000; color: #fff; }
Pay attention to what is happening as you type this rule. Once you type the each colon, Dreamweaver will show you a color picker so you can pick the colors you want. The two values I showed above are black for the background and white for the foreground, but you can pick any two distinct colors you like so long as one is dark and the other is light. And don’t use white for the background; the idea is to be able to see easily that you have changed the default style for the page, and white is the default background color. (Yes, it would make more sense if the foreground color property name was “foreground-color” rather than “color” -- but it isn’t.)
Save your new stylesheet in your css directory with the name screen.css.
-
Create another Basic page as you did for the stylesheet, but make this one a Javascript file. Add this one line below the comment at the top of the file:
alert("hello");
You may be creative about what goes inside the quotes, but be sure the rest of the spelling and all of the punctuation are exactly as shown. Save the file as template.js in your scripts directory.
At this point, looking at template.xhtml in “split” or “design” view (the third alternative to code and split views) should show the colors you picked in your stylesheet and the bottom line should show a little “php” icon instead of the file’s modification date, but the Javascript program doesn’t do anything yet. Be sure that Dreamweaver now renders your template file in all its colorful glory before proceeding!
Set up a Dreamweaver site.
For this course, you will do your initial coding and testing in your “My Web Pages” directory, and then do a final test in the web server’s document root, C:\htdocs. At this point, you will set up a Dreamweaver “site” so that Dreamweaver can make development and final testing easier. Setting up the site is also a prerequisite for converting your template.xhtml into a Dreamweaver template.
The process has several steps:
-
Set up Local Info
Use the menu item to bring up the Site Definition panel. There are Basic and Advanced tabs. The Basic tab does not give enough options for setting everything up,so switch to the Advanced tab.
In the category give a name to your web site. You can use any name you like. If you were using Dreamweaver to manage several different web sites, you would give each one a descriptive name so you could keep track of them. For this course a good name might be “CS-081.” Use http://localhost/ as the URL for the site. (This way you will be able to access your site from any computer in the lab.) For the Local root folder, give the pathname to your My Web Pages directory. Click the “Links relative to Document” radio button, which will make it easy to move your web site to different places relative to the web server’s document root.
Be sure to check the “case-sensitive link checking” option. This feature is critical for making sure your web pages will work when I test them on a Unix computer. To take advantabe of this feature, you will have to tell Dreamweaver to perform a link check before submitting each assignment.
The Enable cache option can be checked, although the performance benefit of using a cache probably won’t be evident for the projects in this course.
If you click OK to close the Site Definition panel, you should now see that the Files palette has a drop-down item for your site. Whatever name you gave to it should appear, and when you select it, you should see the files and folders in your My Web Pages with green icons instead of yellow ones. A second drop-down list gives you a choice of Local, Testing, or Remote view of your site, but only the Local view is ready so far.
-
Set up the Testing Server
Bring up the Site Definition panel again using the menu item and selecting the Edit option. Select the category.
Leave the Server model set to None, and Change the Access choice to Local/Network. Doing this will open up a checkbox to “Refresh testing file list automatically,” which should be checked. For the URL prefix enter http://localhost/~youraccount. You are telling Dreamweaver to use that URL to get a browser to bring up the web pages under your My Web Pages directory. This works because we set up the Apache servers on all the lab computers to use the tilde (~) convention for getting to users’ personal web sites. Be sure to substitute your own account name in the URL, and remember that the tilde convention works only on the computer that you are actively logged into.
At this point you can close the Site Definition panel, and get Dreamweaver to display your web page in the browsers you set up earlier. First, verify that the Files palette now lets you look at your web site using the Testing server view; the folder colors will be red instead of green.
If you set up your primary and secondary browsers correctly, you should be able to select your template.xhtml (click in the code, on the design view, or select the file in either the Local or Testing view of the Files palette) and press F12 to bring up the page in Firefox and to click Shift-F12 to bring it up in Internet Explorer. You can also right-click on the file name in the Local or Testing view, and select Opera from the . In all cases, your JavaScript code should run and display the message you entered inside the quotation marks. The style you set up should display correctly, and the PHP code that displays the bottom of the page should be replaced with the actual date.
-
Set up Remote Info
Now set up Dreamweaver so you can make sure your pages work correctly outside of your My Web Pages folder. Bring up the Site Definition panel for your site again. This time select the Remote Info category. Access should again be Local/Network, and Remote folder should be C:\htdocs. Check the “Refresh …,” “Maintain …, ” and Automatically … options, and leave the Enable … option unchecked.
With this setup, each time you save a file under My Web Pages, it will automatically be copied to C:\htdocs\. If you would rather do the copying manually for some reason, you can uncheck the third item on this panel. There are big arrows in the Files panel that you can click to copy all or part of your site ’ to C:\htdocs\ from My Web Pages or ’ to go the other way. Manual transfers are useful when you have a site where the remote computer is ... remote ... rather than on the same computer as you are working on.
-
Set a Templates option if it is available.
While the Site Definition panel is still open, look to see if there is a Template item at the bottom of the list of categories on the left side of the panel. If it is there, select it and make sure the Template Updating checkbox is checked. This category was added in an update to Dreamweaver and might not appear in the version you are working with.
Click OK on the setup panel and then Done on the Manage Sites panel.
-
Test your remote server setup and validate your code.
You may need to do the initial copying of your site to C:\htdocs explicitly even if you have selected the automatic copying option. Click on the site in the Files palette, and click on the big up arrow icon. You will be asked whether you want to save the entire site: click yes. This will create the subdirectories and copy all your files.
Remember, C:\htdocs is shared by everyone who uses one of the computers in the lab. When you first log into a machine, it would be a good idea to remove anything in that directory that someone else might have left there and to copy your entire site over to get it initialized.
Switch to Firefox and type the following URL into the location (Ctrl-L) bar: http://computer.cs.qc.edu/template.xhtml -- substitute the actual name of the computer your are working on for the word “computer” in that URL. The alert box should come up, your page should then load with your styled background color, and the date should appear in place of the PHP code at the bottom. If not, fix whatever is wrong!
The template file I provided has two links at the bottom for validating your XHTML and CSS code using the validator programs provided by the World Wide Web Consortium (w3.org). There are also two validation icons in the status bar at the bottom of your Firefox window. Both should be green circles with white checkmarks in them. If not, click on the Tidy icon, which is normally a yellow triangle when it is not a green circle. The problems with your code will be indicated there; fix your code before proceeding.
Click the XHTML and CSS links at the bottom of your web page, and the W3C validators will make more refined checks of your code and style sheets. Both should indicate no errors or warnings.
The W3C validators will find your web pages only if you have used an actual computer name to open the web page. If the URL is http://localhost/… the validators will not be able to access the pages to validate them.
-
Check for broken links.
Your web site could pass all tests so far and still not work when I test it on babbage, which uses case sensitive file and directory names as mentioned above. When you set up your site, one of the options you should have turned on was to do case-sensitive link checks. To perform this test, go to . (Or right click on any file or directory in the Files palette and select Entire Site from the menu item.
If it is not already visible, a panel will show up below the editing window. There should be an empty white section and below that a line that ends with “2 OK, 0 Broken, 2 External.” If it doesn’t say “0 Broken” there will be a line in the white section for each broken link. The the right end of those lines will be a file browser button that you can use to browse to the correct file. But because this is Windows, Dreamweaver will report capitalization errors here, but you won’t be able to fix them by browsing to the “correct” file. So you have to go back to the code for your template.xhtml file and fix the capitalization there.
That panel with the link check results takes up valuable space, which you can recover by clicking the little down arrow above it to hide it.
-
Create a Dreamweaver Template for new documents.
Now that you have verified that your site structure has been set up correctly and that your template.xhtml file is properly linked to a stylesheet and a client-side script correctly, you can proceed with confidence to creating a Template that Dreamweaver can use to start new web pages for you. We haven’t done anything with images yet, but we can fix that later if necessary.
Be sure you are editing your template.xhtml file. Select the “” menu item, which will bring up a dialog box. There should be a place for you to put in a Description, where you should type something meaningful, like “CS-081 Standard Template.” If there is no name in the “Save as” field in the bottom part of the dialog box, put in “template” (no quotes). Click Save, and when it asks you whether to update links, click OK.
After some rumination on Dreamweaver’s part, you should see a new directory named Templates in the Local and Testing views of your site, and if you open it up, you should see a file named template.dwt. If it isn’t already open for editing, double-click on template.dwt and make the following changes: Find the text that says, “<!-- TemplateBeginEditable name="head" -->” and move it to a separate line above your link tag. Fix up indentation, and your head node should look like this:
<head> <!-- TemplateBeginEditable name="doctitle" --> <title>CS-081 Course Template</title> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name="head" --> <link rel="stylesheet" type="text/css" media="screen" href="../css/screen.css" /> <script type="text/javascript" src="../scripts/template.js"></script> <!-- TemplateEndEditable --> </head>You also need to create an editable region for the body of your new documents by inserting a pair of comment lines to surround that node in your document. Select everything between the opening and closing body tags (not including the tags themselves), and use the Insert->Template Objects->Editable Region menu item to do this. Use “body” as the name of the region. Your code formatting will probably be messed up horribly. After adding the comment lines and fixing indentation, your body node should look like this:
<body> <!-- TemplateBeginEditable name="body" --> <div id="header"> <h1>CS-081 Course Template</h1> </div> <div id="content"> <h2>Template Content</h2> </div> <div id="footer"> <hr /> <p> <a href="http://validator.w3.org/check?uri=referer"> XHTML</a> - <a href="http://jigsaw.w3.org/css-validator/check/referer"> CSS</a> </p> <p><em>Last updated <?php echo gmdate("Y-m-d", filemtime($_SERVER['SCRIPT_FILENAME'])); ?></em> </p> </div> <!-- TemplateEndEditable --> </body>Save your template.dwt file (type Ctrl-S). There should be no warning messages, but you might get a message about the fact that your remote site is being updated.
-
Use your new template to create your site index file.
Now select the menu item, and select the Templates tab from the dialog box that comes up. Your new template should be the only one listed. The DTD should already be set to XHTML 1.1, and the Description should match the one you typed when you originally created the template.
Uncheck the “Update page …” option. This will take the dreamweaver template comments out of your new web page, making the code much easier to work with.
Click Create and you should get a new web page with the name Untitled.xhtml opened in Dreamweaver’s editing pane. Change the tile and h1 nodes to the name for your web site. Use something descriptive, personalized, and clever here, such as “My CS-081 Web Site”
Save your new web page with the filename index.xhtml in your My Web Pages directory. With the file selected (click on it in the editing pane), press F12, and it should come up, with color, in Firefox after displaying your “hello” alert.
Use the Put File(s) button (the up arrow oin the Files palette) if necessary to save you index.xhtml file in C:\htdocs\. Switch to Firefox, and go to http://computer.cs.qc.edu with the correct name substituted for “computer” and making sure there is nothing after the computer name. Apache should deliver your index.xhtml file to the browser.
-
Final clean up: convert tabs to spaces.
With index.xhtmlopen for editing, select the “” menu item. When the Vim window opens, just type “:retab” (without quotes) followed by the Enter key. Type Ctrl-X to save the file and exit Vim. Make sure the file still has the correct indentation, then select the “” menu item. Verify that all the whitespace in the file consits of dots and that there are no tab characters, which will show up as » characters.
Repeat the final clean up procedure for your template.dwt file, and your Dreamweaver set up is complete! Be sure to log off so that your work gets copied back to the server.