DreamWeaver Basics

DreamWeaver Basics for Bb Learn

Dreamweaver Basics for Bb Learn

Important Note: In the old Vista system, DreamWeaver was a complex, but effective tool for creating content. In Blackboard, it is still possible to use DreamWeaver, but it is no longer the recommended method of content creation, because Blackboard's internal editor is much better than Vista's, and because Blackboard doesn't handle externally created files as well as Vista did.


Making a web page isn't as bad as it used to be. In the early days (the late '90s), if you wanted to create a web page you had to write it using HTML (HyperText Markup Language) code. This is a programming language that handles the way content is formatted on the web, much like early word processors used to do with control codes for italics, underlining, bold, color, font style and size. For an example of HTML code, go to any web page in your browser and choose View Source. Yikes! Nowadays, a quick and dirty solution is to take a Microsoft Word document and choose Save As HTML, but Word creates really messy code. Although this is ok in a pinch, the files will be bigger and slower to load and they will usually only look good in Internet Explorer. Using an HTML editor like Dreamweaver is a better choice if you need to build standard, clean, and complex web pages. You can still look at the source code if you want to, but you can also work in "design view" and let the program write the code. Because the editor is WYSIWYG (what you see is what you get), your content in design view looks (mostly) the way it will when you view it through a browser. Much more civilized.

Files and Folders

When you use Microsoft Word, images are embedded in the document and it is all saved as a single file. With a web page, the text is in the .htm file, but the graphic elements are located in separate files. This is because, in the early days of the web, data transfer rates were so slow that the images, which are large, took a long time to load. Therefore, the text of the page was designed to load immediately, giving you something to read while waiting for the images to be drawn. The .htm file has pointers to the image files, which are usually found in an images subfolder. Today things load so much faster that most people wouldn't notice, but the internal architecture of a web page has not changed much.

Naming Conventions

Naming files and folders can get you into trouble. Stick to simple alphanumeric filenames to avoid problems and make the path easier to remember. 1) No "funny" characters (!@#$%^&*();:) in your filenames, 2) It is best to avoid CAPITAL letters, 3) Use_underscore_instead_of_spaces_between_words, 4) HTML files end with the three letter extension .htm and image files end in .gif, .jpg, or .png and that should be the only dot in the filename. 5) All of your web files must be in a single folder for best results (but within that folder, you can create subfolders for organization). 6) By convention, the main page in a folder should be named "index.htm." This will allow the page to be loaded automatically without its name being specified. Just be careful not to overwrite one index file with a different one. This is a quick way to blow away your website! Typically, images are located in an "images" folder at the same level as the .htm page that points to them, or at the top level of the site.

Note: If there is no file named index.htm then a user who types the path to the folder will be presented with a list of the contents of that folder.

Part 1a - Gathering information from Bb Learn

With Dreamweaver, you can directly connect to and edit HTML files in Blackboard's Content Collection without going into Bb Learn through a web browser. To establish this connection between Dreamweaver and your Bb Learn course for the first time, you will need to gather some information.

1. Go to http://bblearn.nau.edu and log in with your NAU username and password.

2. In the My Courses box, select the course you want to connect to Dreamweaver.

3. In the Control Panel area on the lower left, click on the Content Collection to expand it, and select the first item in the list, which should be the class name.

4. In the upper right, click on the yellow button that says Set Up Shared Location (on a Mac) or Set Up Web Folder (on Windows)

5. Copy the Current Web Address information, but ignore the rest of the instructions.

Part 1b - Setting up Dreamweaver

1. Open the Dreamweaver application by double-clicking its icon. Dreamweaver icon

2. In the Site menu, choose New Site... and click the Advanced tab. In the left sidebar, select the Local Info category. Click on the folder icon to the right of the Local Root Folder textbox and browse to the place on your computer where you want to keep a local copy of your course content.

3. Next select the Remote Info category. From the Access pull-down menu, choose WebDAV. Paste the Current Web Address info you copied from Bb Learn into the URL textbox. Enter your NAU username and password. Click the Test button to see if you can make a connection to the server. If it works, you're all set. You can get back to the setup information in the Site/Manage Sites... menu.

4. In Dreamweaver's Window menu, select Files and a new window appears on the right. Use the Get files Get Files button to download current copies of all files from Bb Learn to your local folder. Whenever you make a change to a local file or folder, just highlight it in the list and click the Put files Put Files button to upload it to Bb Learn. To visually compare what is on your local machine with what is on the remote site, click the Expand Expand button. To update your list, click the Refresh Refresh button.

Files window

Really Important Note: Be careful! When you use get files Get and put files Put, you must always start with the most current version of your content or you will accidentally overwrite your latest work. If the most current version of the project is on your local machine, you should start by doing a Put to the server. If the most current version is on the server, you should start by doing a Get of the file(s) you will be editing. If in doubt, Get from the server since this is the published version. Also, be very careful about what folder or file is selected when you initiate a Get or Put, because that's what you'll be getting or putting.

Part 1c - Setting Up Dreamweaver's User Interface

1. From the View menu, select Code and Design, also called the Split View Split view, which lets you simultaneously see the HTML code in the upper window and the page design in the lower window.

2. Finally, from the Window menu, select Properties so that the formatting toolbar appears at the bottom of the screen.

properties toolbar

Tip: Viewing the HTML source code of a nicely put together web page is a good way to learn new tricks. In your browser, select View Source. You can also copy and paste the source code into a blank Dreamweaver document and look at it in Design view.

Part 2 - Text

1. Type a title for your web page. (Example: "Welcome to My Web Page!") Highlight the text and then, in the Properties toolbar at the bottom of the screen, choose Format Heading 1. Use the Headings rather than adjusting text properties individually. For example, titles can be H1, subtitles can be H2, etc.

2. To change the page title that appears in the web page's window bar, edit the name in the title box title in the upper toolbar.

3. You can use the alignment buttons in the Properties toolbar to center center your text. You can also align text to the left left or right right.

4. Within paragraphs, use bold to make it bold, or italic to italicize it. Additional formatting options are under the Text/Style menu.

5. To change the color of the text, choose the text color text color box from the Properties toolbar.

6. You can indent indent or outdent outdent (is that a word?) your text.

7. To add a horizontal divider, select Insert/HTML/Horizontal Rule.

8. To make a list, click for either a bullet list bullet list or a numbered list numbered list, following each item with a "Return", or simply highlight a list of items you have already typed and click the desired list button.

Part 3 - Tables

1. Tables should be used for the presentation of data but not for page layout because this creates difficulties for screen readers.

2. To make a table, put the cursor where you want the table to appear and select Insert/Table. Specify how many rows and columns you will need. If you're not sure, you can change it later.

3. Adjust Border Thickness, Padding, Spacing as desired. Note that a border thickness of 0 will make the table invisible.

4. Use a Header row and/or column when labels are necessary. Proper headers are also important for screen readers for the visually disabled because they distinguish the labels from the table data. This is something Dreamweaver does well and Word doesn't do.

5. Use the Caption and Summary boxes to describe the content of the table for the visually disabled.


Part 4 - HyperText Links

A hypertext link is a piece of clickable text. When you click on it, you will jump to someplace else. Where? It could be a "mail-to" link that opens your e-mail program, or an "http" (hyper-text transfer protocol) link that takes you to another web page, an ftp (file transfer protocol) link that starts a file download, or a local link to another web page at your site. It could even be an anchor, which jumps you to a different part of the same page.

1. To make a link to a page, highlight the text that will become the link and then type the web address into the Link textbox link in the Properties toolbar. If you want the link to open a new window, set the Target to " _blank" target using the pulldown menu. By convention, use the "open in a new window" option when you link to pages outside your site.

2. If you want to link to another page within your website, click the link target point to file icon and drag the arrow to the file you want in the Files window, or click the folder icon folder icon to browse to file.

3. A "mailto:" link, when clicked, opens a new message in your email client and addresses the message to the recipient. Highlight the text that will become the link and type "mailto:email@address" in the Link textbox. This link will send me a message. Click to see how it works.

4. Sometimes, you may want to use a Named Anchor link to create a link to a different location on the same page. This is especially useful on long pages to reduce the amount of scrolling. Making an anchor requires two steps:

a) First, position the cursor where you want the user to "land," and select Insert/Named Anchor from the menu. An anchor anchor icon will appear. You will be prompted to give the anchor a name (Note: Names are CaSe SeNsitive).

b) Go to the location where the person will "take off" and highlight some text. In the Link textbox, type the pound sign (#) followed by the AnchorName. In this example, the anchor will jump you to the top of the page. Note that the browser's back button works within a page too!

Part 5 - Graphics

Small images can be inserted inline with text. Larger images can sit on a line all by themselves. Where it gets tricky is when you want to wrap text around graphics or position something so it stays put relative to a block of text. For that you will need to insert a Layout Object such as a DIV tag (see Part 6 below). Images you will use in your web page are usually included in an images folder associated with that page.

1. Position your cursor where you want the image to appear. Select Insert/Image to add a graphic. Browse for the graphic file, select it, and you will be prompted for Accessibility information.

2. At a minimum, provide some Alternate text. The ALT tag provides a brief text caption for an image which tells blind users what the image represents. If the image requires a more detailed description, you can use the LONGDESC attribute.

alt properties window

3. Click on the left left, center center, or right right positioning tool to position the graphic.

Tip: You can grab a picture from the Internet by right-clicking on it and saving it to your images folder.

Part 6 - Layout and CSS

Dreamweaver icon

Complex page layout requires the use of layout tags like DIV and SPAN and the use of CSS (cascading style sheets). The Dreamweaver icon at right is coded with a div tag, which allows the text to wrap around it. The following code creates the DIV (called "test"), links to the Adobe Dreamweaver web page (opening the page in a new window), displays the Dreamweaver icon, and then closes the DIV.

<div id="test"><a href="http://www.adobe.com/products/dreamweaver" target="_blank"><img src="images/dw_icon.jpg" alt="Dreamweaver icon" width="60" height="60" align="right"/></a>

Part 7 - Preview in Browser

What will it look like when you're done? Click on the preview preview/debug in browser button to see what your page will look like to someone using a web browser, since what you see in Dreamweaver may not be exactly what you get in your browser. Things will also look slightly different depending on which browser you are using. It's a good idea to test your pages on both Macs and Windows computers with several browsers.