Creating a Web Site with Macromedia Dreamweaver

This tutorial will teach you how to:

1. Create a new web site using Macromedia Dreamweaver 8
2. Create a new webpage using the Dreamweaver editor
3. Create numbered (ordered) and bulleted (unordered) lists
4. Edit web pages using headings and formatting tools
5. Add links to other pages
6. Upload your site

Creating a New Website

1. Start Macromedia Dreamweaver using the icon in your Applications folder or on your Dock.
2. Under the Site menu, choose New Site... to start the Site Definition wizard.

3. On the first page of the wizard, type the name of your website in the text box under the question What would you like to name your site?

Enter one of the following addresses in the What is the HTTP Address (URL) of your site? text box:
If you publish to Minerva, type "http://minerva.union.edu/username" OR
if you publish to CHET, type "http://www.union.edu/PUBLIC/YOUR_DEPT/username"
Substitute your username for "username" and abbreviation of your department for "YOUR_DEPT". It is the address where your web pages will be available on internet. Click the Next button once you have done this.

4. Click the radio button next to No, I do not want to use a server technology. on the following screen, and click the Next button.

5. On the third screen, click the radio button next to Edit local copies on my machine, then upload to server when ready. Click the folder icon next to the Where on your computer do you want to store your files? checkbox, and locate the folder to which you wish to save all your website files. If you don't select any, the Dreamweaver creates new one according to the name of your site. Click the Next button when you are ready to continue.

6. On the fourth screen there is the How do you connect to your remote server? drop-down menu. If you publish to Minerva, select WebDAV and then follow steps a-e.
   If you publish to CHET server, select FTP and then follow steps i-vi.

For Minerva server (WebDAV)



1. Several inputs boxes appear. Type
   https://webdav.union.edu/web/username
   in the What is the URL of your WebDAV server? text box. Again, substitute your username for "username". Make sure that you fill in https, not http.
2. Type your e-mail username in the What is your WebDAV Login?
3. Type your password in the What is your WebDAV Password? text box.
4. Verify that all the information you have entered is correct, and click the Test Connection. If everything is correct, the confirmation dialog box appear. Just click OK.
5. Click Next button to start working on your website.

For CHET server (FTP)



1. In the What is the hostname or FTP address of your Web server? text box, type the address of the CHET server: ftp://chet.union.edu.
2. Type /www/union/PUBLIC/YOUR_DEPT/username/sub_directory in the What folder on the server do you want to store your files in? text box.
Substitute abbreviation of your department for "YOUR_DEPT", your username for "username" and your particular sub-directory for "sub_directory".
3. Type your e-mail username in the What is your FTP Login? text box.
4. Type your server password in the What is your FTP Password? text box.
5. Verify that all the information you have entered is correct, and click the Test Connection. If everything is correct, the confirmation dialog box appear. Just click OK.
6. Click Next button to start working on your website.

Creating a New Web Page

1. Under the File menu, choose New to open a blank web page.

When you create a new web page, you will see the Dreamweaver interface with a large, blank editor window. The interface is divided up into a variety of subsections that simplify the editing process.

There are three different views from which the user can choose while editing a page. The buttons to select each view are available on a toolbar above the editor window. The Design button is a WYSIWYG (What You See Is What You Get) editor with an interface that resembles a word processor. The display that you see in the Design window is very similar to the display that you will see when viewing the final page from a web browser.

The Code button displays the HTML code that describes the web page you are creating. Only use this display mode if you are familiar with HTML and CSS coding. Making a mistake in this area could cause your page to not display properly.

The Split button divides the display into two panes. One pane displays the page in Design mode, and the other pane displays the page in Code mode.

Choose the editing mode that best suits your preferences and abilities with web page design.

Naming a New Web Page

After uploading, your web pages will be available on the address (URL) http://minerva.union.edu/username (where "username" is your username). If you name your first page as index.htm or index.html, it will load automatically after typing the address in the internet browser. If you name it in another way, you will have to provide the whole address and the name of the page (for example, http://minerva.union.edu/username/firstpage.htm). Hence, it is a good practice to name your first page index.htm.

Entering Text in the Dreamweaver Editor

Editing text in Dreamweaver is not very different from editing text in a word processor. Web pages, however, attempt to simplify the formatting process by defining a hierarchy of headers ranging from Header 1 (the largest, boldest, most noticeable text) to Header 6 (the smallest, least invasive text). These headers can be used for labeling various sub-sections of your page, but for typing large amounts of text and paragraphs, there is also a Normal text setting.

To set the text heading value:

1. Place the cursor in the document where you wish to add the text.
2. In the lower-left corner of the window, locate the Format menu. Click on it, and choose your heading value from the drop-down menu that appears.

3. Type the text that you wish to use that style. When you are finished, hit the [Return] key.
4. After hitting the [Return] key, your style will automatically revert to Normal text. Repeat this every time you wish to use a different style.

To save the page after you've made changes to it, under the File menu, choose Save. You will know if your current document needs to be saved because an asterisk will appear next to its name on its title bar.

When using the headers isn't enough for achieving the style you want, you can use the formatting toolbar. All these options have the same functions as they do in word processors, and the same results can be achieved by simply highlighting the text you wish to format, and choosing the desired formatting options from the toolbar.

Creating a List

There are two types of lists you can create in Dreamweaver: ordered (numbered, lettered, etc.) and unordered (bulleted). You can choose to create either type of list by using the list buttons on the toolbar.

1. Place your cursor in the document where you wish to add the new list.
2. Click the list button that corresponds to the list you wish to add.
3. Type the text you wish to add as a list item.
4. When you are finished with a list item, press [Return] to start the next list item.
5. After you have added the last list item, press [Return] twice to go back to editing Normal text.

You are not limited to the default ordering or bullet styles when creating a list. It is possible to change the ordering method or choose a different symbol to use as a bullet.

1. While editing a list, click the List Items... button on the formatting toolbar.

2. Choose a type of item marker from the Style drop-down menu. If you wish to change the type of list you are editing, choose a new option from the List Type drop-down menu.
3. Click OK to return to the editor.

Adding Hyperlinks

Hyperlinks - also called "links" - allow you to view additional pages on your website, or elsewhere on the Internet. You can also make a hyperlink that allows you to send an e-mail to a specific address.

1. Highlight the text and/or images that you wish to turn into a hyperlink.

If you are linking to another page on your website...

2. Click the folder icon next to the Link text box on the formatting toolbar. In the browse window that appears, locate the page to which you want to link, and select it.

If you are linking to a page elsewhere on the Internet...

2. Type the full URL (i.e. http://www.someothersite.com) in the Link text box on the formatting toolbar.

If you are linking to an e-mail address...

2. Type mailto: followed by the target e-mail address (i.e. mailto:somebody@someothersite.com) in the Link text box on the formatting toolbar.
3. Once you have filled in the link box appropriately, hit the [Return] key to create the link.

 Previewing Pages in a Browser

1. Click the Preview button at the top of the editor window.
2. From the drop-down menu that appears, choose your preferred browser from the list.
3. A new browser window will appear that will display your web page in its current form.

By default, not all of your installed web browsers may show on the list. If you wish to add a new browser, click the Edit Browser List... option on the Preview menu, navigate to your Applications folder on your hard drive, and choose the browser that you wish to add. From that point on, it will appear in the list of available browsers.

Open an Existing Website

1. Start Macromedia Dreamweaver.
2. Under the Site menu, choose Open Site....
3. Using the Open Site dialog box that appears, locate the folder with the name of the site that you wish to open, and click on it.
4. Click the Open button. The web site will be opened, and all the files it contains will be available for use.

Formatting your Web Page

Macromedia Dreamweaver includes a large number of formatting options that you can use to change the appearance of your page when automatic styles and headers are not enough. Most of these options are borrowed from word processors, and they all function similarly.

Each of these functions can be found and applied using the toolbar at the bottom of the screen.

 Bold

1. Highlight the text that you wish to bold.
2. Click the Bold icon on the formatting toolbar.

 Italics

1. Highlight the text that you wish to italicize.
2. Click the Italics icon on the formatting toolbar.

 Alignment

1. Position your cursor inside the paragraph for which you want to set the alignment.
2. Click the appropriate alignment icon on the formatting toolbar - Align Left, Center, Align Right, or Justify.

 Text Color

1. Highlight the text of which you want to change the color.
2. Click on the colored Font Color box.  It does not have a label, but it is to the right of the Size menu on the formatting toolbar.
3. Choose the new text color from the list that appears. The menu will close, and you can return to editing your web page.

 Text Size

1. Highlight the text of which you want to change the font size.
2. Click the arrow next to the Size menu on the formatting toolbar.
3. From the drop-down menu that appears, choose the relative font size that you wish to apply to the highlighted text.

 Indentation

1. Position your cursor inside the paragraph that you wish to indent.
2. Click either the Decrease Indent or Increase Indent icons on the formatting toolbar.

Background Color

1. Under the Modify menu, choose Page Properties... to display the Page Properties dialog box.

2. Click on the colored Background box. Choose the new text color from the list that appears.
3. You will return to the Page Properties window once you click on a color. Click OK to return to the editor.

Link Colors

1. Under the Modify menu, choose Page Properties... to display the Page Properties dialog box.

2. Click on the colored Links box. Choose the new link color from the link that appears. You will return to the Page Properties window once you click on a color.
3. Do the same for the Visited Links box and the Active Links box.

The Links menu chooses the color for hyperlinks when a user has not yet clicked on that link. The Visited Links menu chooses the color for hyperlinks after the user has already visited the page or document to which it points. The Active Links menu chooses the color for hyperlinks as they are being clicked.

1. Click OK to return to the editor.

Page Title

The page title appears at the very top of your browser window when visiting a web page. It is a good idea to include a unique, descriptive page title on every page to make it easier for your site to be found using search engines.

The Title text box on the top portion of the editor window will allow you to change the title of the page on which you are currently working. Click inside the box to activate it, and type the name of your page in it. Press [Return] to return to editing your page.

Uploading the Website

If you have designed your website completely in Dreamweaver, it is possible to upload it to the server with Dreamweaver as well.

1. Under the Window menu, click Files to see a list of all the files currently in use by your website.

2. On the top of the Site window, click the Connect button to connect to the upload server.
3. On the left side of the Site window, highlight all the files that you wish to upload. If this is your first time uploading to the server, you will want to highlight all the files.

4. Once you have all the necessary files selected, click the Upload icon on the top of the window.

If, at any point, you need to retrieve a file that you have already uploaded, follow these same steps again, highlighting the files on the right side of the window and clicking the Download icon on the top of the window.