You are on page 1of 25

Center for Teaching, Research & Learning Social Science Research Lab American University, Washington, D.C. http://www.american.

edu/provost/ctrl/ 202-885-3862

Introduction to Dreamweaver
This tutorial is an introduction to Adobe Dreamweaver, one of the premiere and more well-known web design programs on the market. One of the key advantages of Dreamweaver is that it allows the user to design websites without any prior knowledge of HTML, a markup language used to create websites. In this respect, Dreamweaver is an excellent WYSIWYG (What You See Is What You Get) editor and allows for easy accessibility to web design.

Dreamweaver is available for both PC and Mac OS, but be aware that the interface and commands are slightly different for Mac users. This tutorial will review Dreamweaver on Windows.

Course Objective
This course is designed to give a basic understanding Adobe Dreamweaver. You will develop some starter skills for building and customizing a website. Finally, you will learn how to publish your website online using the web space provided by American University.

Course Review
1) 2) 3) 4) 5) Before You Get Started Getting Started Adding Content to Your Website Modifying Your Content Publishing Your Website

Before You Get Started


It is important to have an idea of what your website will look like before you begin constructing it on Dreamweaver. This will make designing your pages much easier. Know what sort of information you want to include and the best way to convey your ideas to your site visitor. Remember, simpler tends to be better! Organize your website so that visitors can navigate it easily. Here are a few tips to consider as you learn how to design your webpage with this tutorial: 1

Wrap text. A common problem is when text creeps too close to images. Put spaces between long paragraphs so it will be easier to read on the screen. Adjust the margins so that the page isnt too wide. Avoid underlining words if theyre not links. This could confuse the visitor. It is also a good idea to explain to the visitor what they are linking to. Avoid too much white space (white space is the space between elements of design such as images, paragraphs, text, headers, etc.). Just enough is easy on the eyes, but too much makes the website look disconnected. Include a balanced amount of texts and images. Try not to be overbearing with too much of either. Dont distract your visitors with blinking or scrolling text, animated GIFs, or auto-loading sound, or image backgrounds.

Useful terms
Below are a few important terms to know about the web: Internet Browser A program used to access the internet. For example, Microsoft Internet Explorer, Mozilla Firefox, Apple Safari are internet browsers. Website A visual representation of text, images, and multimedia designed to collect and convey information about a topic. Each website can contain multiple web pages which act to separate different parts of the website. HTML This is a markup language (code) used for creating websites. Knowing this language is not a requirement for using Dreamweaver, but having a basic understanding is helpful for general web design. Domain Name This is an address you can buy that directs people to your website. For example, http://www.american.edu is the domain name that directs people to the American University website. Web Host Simply put, this is the organization or company that physically holds the pages and files for your website and puts them online. American University offers free web hosting for all of its students, though you cannot use it to host a domain name you may have bought.

Getting Started
When you open Dreamweaver, you should see a welcome screen that looks like this:

There are a couple of ways to create a new page. Under the Create New column, select HTML. You can also go to the File menu at the top of the window and select New. Select Blank Page, HTML, None (to the layout for now), and then Create.

You should now have a blank page screen that looks something like this:

If it does not look exactly like this, perhaps the display view is on a different setting. There are three ways that Dreamweaver can display your work. 1) Code view displays your work in HTML code. As you add elements to your webpage, Dreamweaver automatically translates them to HTML. 2) Split view displays the HTML code above the design view (as shown above). If you have no experience with HTML or feel uncomfortable using it, you do not necessarily need to refer to either split view or code view as you design your page. However, this view will allow you get a better sense of HTML while you work. 3) Design view This view displays the page as it will appear live on the web. You will find the view options in the Display Bar near the top of the window:

Another important view is the way your website will look live on the web. The button with the picture of a globe is the Preview in Browser button. This allows you to see what your website will look like on the internet as you are working on it. 4

You can preview your website in any of the internet browsers installed on your computer. This is helpful, because your website might look a little bit different on different browsers because of the way browsers are coded. While it may not be an issue during this tutorial, it is a good idea to check your site in different browsers to make sure everything looks ok. In the white text box labeled Title: you can write a title for your webpage that appears on the top of the browser window.

Saving your home page:


To save your home page, you will need to create a folder on your computer where you will save all the files for your website. This folder is called a local root folder (the main folder for your web site that runs from the local directory on your computer). That way, when you add content to your page, the assets are there in one place and ready for you to use. American University provides a folder in your G:/ drive called www (you can learn how to access this folder in the Launching your website section). You can store all of your files in this folder, or you can 5

create a separate folder to work from and then transfer your files later to the www folder when you are ready to launch your website. After you create a folder to save your files, return to Dreamweaver and: 1. Go to the File menu. 2. Select Save As 3. If your website has more than one page for your website, make sure that your homepage is saved with the name index.html. You can save other pages on your site with any name you choose (preferably with no spaces), but the homepage must be saved as index.html. 4. Make sure the Save as type: is set to All Documents or HTML Documents. 5. Click the Save button. 6. After you save the first time, you can use the save tab in the File Menu. Remember to save your work often!

Defining a Site
It is important to define your site after you create it so that Dreamweaver can resolve links, check related files, and help manage your assets. Basically, its a way for Dreamweaver to cleanly manage your files. To do this, click on Site on the menu bar, then New Site. You will see a window that looks like this:

When you define your site, know what you want to name your site and what you want the URL of your site to be. Click Next and fill in the rest of the information that relates to your site. Your entries may depend on the network youre working with, so do not hesitate to ask if you dont know how to properly define the site. Some general responses to the following questions that Dreamweaver will ask are: You dont want to work with server technology. It is recommended to edit copies on your local machine. Connect to your remote server by local/network. Know which folder you want to store your files in (perhaps www).

Adding another page to your website:


If you do intend on having more than one page for your website, you can create one by going to the File menu, select New, and New Document window appears. This is the same window that appeared when you first created a new page.

Blank Page > HTML > <none>>Create Remember to save your new page too!

Adding Content to Your Website


For the most part, adding text to a website is like using a word process (like Microsoft Word). To add text to your page, have your window on Design View and begin typing:

If you are on Split view like the example above, you can see that as you type in the design window, the code above it is updated too. When you press the Enter/Return key on your keyboard to move to a new line, you may note that it appears to be double-spacing your text. This is called paragraph formatting, the default format on Dreamweaver. If you want the next line of text to be directly under the first, without any space between your lines, use the Shift key on your keyboard while you press Enter/Return. This is known as a break rule.

You can change the formatting of a single paragraph by highlighting the paragraph and clicking the formatting change you want in the Format menu at the top of the screen.

The Properties Manager will change based on whatever youre working on/adding to a page at any given time. Since we are adding text at the moment, you will notice that the Properties Manager below has formatting options such as Bold, Italics, numbered lists, and indenting.

For formatting options like font, text size, or color, click on the CSS button on the left:

A side-note about CSS: Dreamweaver uses CSS (Cascading Style Sheets). Simply put, in this case, CSS affects the entire website. If you Center the text on a page and make all the text red here, all of the text on the page will be centered and red. CSS will not be covered extensively in this tutorial.

Page Properties
Speaking of editing the whole page, click on the Page Properties button in the Properties Manager. Here is where we can change the appearance of text, margins, links, and more on the page.

You can use this window to set a background color or picture for the page (Solid colors are recommended as printed or picture backgrounds can be quite distracting and make reading text more difficult). When choosing colors for the background and text, make sure that the text really stands out from the background (i.e. darks on lights). Click the Apply button to see how it looks, or the OK button to go back to editing the page.

Adding Images
Adding images to your website is a great way to supplement your text information. Before you do, here are few rules about using images on websites: 1. The only types of images that will display on web pages are those in .jpg, .jpeg, .gif, and .png format. You will need to convert the image to one of these formats if it is not already saved that way. 2. If you take someone elses image from somewhere else on the web without their permission, you are plagiarizing their content and/or breaking copyright law. Some images are free for public use (and labeled as such) so feel free to use those. But in general, always ask for permission and attribute work to

10

the creator when possible. If you have any questions about fair use and copyright laws, consult the library. 3. Do not just link to where a picture is stored on someone elses website. They may delete it on their site, move it to a different address, or take action against you when they discover visitors to your site are taking bandwidth for their site. Get their permission, save a copy of the image on your own website, and link it to there. 4. Keep your images small. Visitors to your website will have to wait for your images to load if they are too large, and that can be very annoying. Resize them to at least 800 x 600 pixels or fewer (you can do this on MS Paint or Adobe Photoshop). Some extra guidelines: Keep the titles of your image files short and easy to remember. This will make them easier to find later. Keep all of the images in your file in one location. Its a good idea to create an images subdirectory where you save the rest of your website files.

Adding an image is relatively simple. 1. Save the image in a folder where the rest of your website is stored. 2. In the Common tab (at the top, below the Menu), select the Insert Image button select Insert on the menu bar and select Image. . You can also

3. After clicking the Insert Image button, a window will pop up that asks you to find the image you want to add. Find it on your computer and click OK. 4. Then you should see another window that looks like this:

11

Alternate text is the yellow-colored text that appears when you hover your mouse over an image on the webpage. It gives a simple description of what the picture shows for people whose computers cannot display images or for sight-impaired people using screen-readers. For example, for the picture of a wolf displayed below, one could write Wolf looking at camera for the alternate text. This is mostly an accessibility function. It is a good idea to write something here, even if it is just the name of the website where the image came from. The Long description will also display a web address in the alternate text. This website is generally where someone can get more information about the image. If you took the image from another website, this is a good place to credit that. Once you have entered information in these fields, click the OK button. Your image will appear on the page:

12

When you click on the image, you can manually resize how bit it appears on the page. Note that when you click on the picture, the Properties Manager below the page also changed. You can customize your image with the tools in the Properties Manager.

Adding a Link
You can create links on your page that will transfer you to another page on your website or an outside page on the internet. There are a couple of ways to do this. One way: 1. Highlight the text you want to link to another page as shown in the example below. 2. In the Property Manger, type in the full URL of the website you want to link to in the Link box.

13

You can also link to another page of your own website by clicking on the little folder icon and finding the other webpage file on your computer. To the right of the Link box, there is also another box labeled Target. This basically controls how you want the link to work. By default, it will open the link in the same browser window, but if you set this box to _parent it will open the link in a new window when someone clicks on it. The benefit of this is so the visitor will still have your homepage open in another window rather than having to go back to it. Another way: 1. Highlight the text you want to link. 2. Click on the Hyperlink button in the Common tab (looks like a chain-link, at the top):

14

Type in the full URL (http://www.example.com) of the site you want to link to in the link box, or click on the folder icon to find the webpage file on your computer.

Creating a named anchor on a page


It can be tiresome to scroll up and down the page, especially if the page is very long. A way to resolve this is to create named anchors. The concept is similar to creating a link. When an item is clicked, you will be taken to different spot on the page. In this example, there is a list of contents at the top of the page. When the visitor selects one of those, the page will jump to another section (the related section) of the page. Lets say that you wanted the visitor to jump to another section of a page after they click on one of the titles at the top of the page.

15

To create an anchor, select on the page where you would like to place your anchor. This will be the location where the page jumps to when you click on a link. To insert the anchor, click on Insert in top menu and select Named Anchor. You will then be asked to name your anchor. Keep the name short and do not use spaces.

A little picture of an anchor will appear in your anchored spot.

16

Repeat the same process for all the sections you want anchored. For this example, I would create an anchor for all the sections I listed at the top of the page (2. All About Wolves, 3. Where Wolves Live, etc.). Creating the link to the anchor is easy. Highlight the title you want to link (in this case, An Overview is highlighted). In the Properties Box, you will find the point-to-file button. Hold down the point-to-file button and move your cursor to the anchor you want create the link to. Dont let go of the cursor until you successfully link it to the anchor.

17

Notice that the title of the link is highlighted after the link as been created (see above, An Overview is now highlighted as a link because it was previously linked to its anchor). The same happens after you create the link to All About Wolves. You will be able to test your named anchors when you preview your page on the browser. When you click on the link you created, the page will jump to the section you created the anchor for. The point-to-file button is a handy tool for creating other links, such as links to other pages and files on your website.

18

Adding an email link


If you wanted to add a link that, when clicked, would open the visitors email client (i.e. Outlook, Lotus Notes) and insert your email address into a new message so that they could contact you, you can do this similarly to the way you add a link. 1. Highlight the text you want to link to your email address. To not confuse your visitor, you could write out your email address and highlight that. That way, if your visitor does not use an email client, they can just copy your email address rather than clicking on the link. 2. Click on the Email link button in the Common tab. It looks like an envelope. 3. The text field should display the text you highlighted. Below, in the Email field, type in your contact email address. 4. Click OK.

19

Modifying Your Content


Making your picture a clickable link
You can make an entire picture a clickable link so that when someone clicks on it, it takes them to another page or external website. Click on the image you want to turn into a link. You will use almost the same steps you used to make a hyperlink earlier. As outlined in the example below, there is a text field in the Properties Manager where you can type in a full web address for the picture to link to when someone clicks on it. Remember to type the FULL URL for the website: Correct: http://www.american.edu Incorrect: american.edu If you want the linked website to open in a new window so that the visitor does not have to leave your website, choose _parent in the Target box and the link will open in a new window when someone clicks on it. After you type in the link for the image, remember to save your webpage so that the changes will stay.

Adding a clickable hotspot to your image


Another way to create a link with your image is to create a hotspot so that only one part of the image links to another web page. You can have multiple hotspots so that different parts of the image link to different pages. There are several uses for this function. On the one hand, you could use it to have your visitors find something on the image to click on to access a different page (Its usually not a good idea to leave your visitors guessing, so provide them with some indication that the image is clickable). On the other hand, and on a practical level, you could use this function to create a navigation menu for your website. For this function, though, you would need to create an image ahead of time on a separate program.

A graphic like this is simple to create in Photoshop. Explore some Photoshop tutorials so that you can learn tools to create something similar for website navigation. Hotspots would allow you to make each of those buttons in that picture a link to different pages on your website. 20

Add the image to your website, click on the image, and then click on one of the hotspot buttons in the Property Manger (see below).

For this example, the rectangle button is used since the buttons in the navigation image are rectangular shaped. After that shape is chosen, click and drag the mouse over the part of the image you want to be clickable and releasing the mouse when you covered the entire shape.

In the example above, the Home button has been turned into a hotspot. You will note that when this happened, the Properties box changed again. This will allow you to set the properties of that hotspot. To create the link for that spot, type in the address in the Link box. You can create different hotspots for this image, each linking to a different website:

21

Again, remember to save your work after youve added hotspots to an image on your page.

Launching Your Website


Using American Universitys free webhosting
American University provides free webhosting so that you can launch your web site free of charge. To put your website online, you need someone to host it on a computer server that is particularly designed to put websites online and make sure they stay there. One of the ways to do this is to take advantage of the free space that AU offers you. This space is located in a folder called www in your G:/drive, a free storage space that all students have access to automatically. (If you are a staff or faculty member, you will need to talk to your supervisor or the head of your department before you get access to this). There are two ways to access your G:/drive. The first is by logging into an AU computer connected to the network, like those in computer labs in the library. After logging in, click on My Computer icon on the desktop. Then select your G:/drive:

22

Your G:/ drive will have a folder in it called www. Anything you put in that file will be public on the internet and can be accessed by going to the web address: http://eagle1.american.edu/~yourAUusername/ So, for example, if your AU username was xx1010a and homepage (index.html) was in your www folder. To access, send your visitors to the address: http://eagle1.american.edu/~xx1010a/ Remember that the address above will only work if your homepage is saved as index.html. If it is saved as something else, like home.html, the address would be: http://eagle1.american.edu/~xx1010a/home.html Keep in mind: Anything you put into your www folder is accessible to anybody with an internet connection, even if you dont tell anyone the address. Do not put anything you want to keep private in your www folder.

Another way to access your G:/ Drive


You can still access your G:/ drive and your website files if you dont have access to an AU computer or if you want to use your own computer. You can do this on Americans http://my.american.edu website. 23

After you log in, click on the Technology tab on the right side of the page. Under Personalized Links, click the link to Access my Network Drives.

You will be asked to log in again with your AU user name and password. After youve done so, it will allow you to access to all the network drives you have access to, including your G:/ drive:

You can access different drives by double-clicking on them. If you want to upload or download a file, you can do this by clicking on the File menu.

24

Other Web Hosting Options


If you decide not to host your website on American Universitys servers, there are other options for web site hosting. A couple of reasons why you may want to choose another server are: 1. You do not find the web address suitable for your web site. 2. You lose the web space when you graduate, and everything in your G:/ drive is deleted. Some companies, such as Google, will host your website for free. You can also pay a small annual or monthly fee on a variety of websites for a more customized URL (i.e. http://www.mywebsite.com) and unlimited storage space for your website. Please note that American University and CTRL cannot provide support or provide any sort of guarantee for the quality/safety of these outside companies. CTRL is available to provide you with support for using Dreamweaver to create/manage your site, but we will not be able to walk you through anything related to a company that American University does not have an affiliation.

---------------------------------------------------------------------------------

For any questions regarding Dreamweaver or this documentation, please feel free to contact the SSRL office by email at ssrl@american.edu

25

You might also like