Introduction to Macromedia Dreamweaver MX

Transcription

1 Introduction to Macromedia Dreamweaver MX Macromedia Dreamweaver MX is a comprehensive tool for developing and maintaining web pages. This document will take you through the basics of starting Dreamweaver MX, defining a site, creating a new page, typing and modifying text, inserting images, using tables, previewing the page, and putting the page on the Unix web server. Starting Dreamweaver MX Start Dreamweaver MX by going to Start, Programs, Macromedia, Dreamweaver MX Look at the Dreamweaver workspace. Notice the workspace is arranged with a large window on the left for composing the page, and panels on the right that are "docked" together. Panels can be either expanded or collapsed by clicking on the expander arrow. You can also drag the panels around by mousing over the grey bar area of the panel untilthe cursor changes into the 4 headed arrow and then holding the mouse button down as you drag the panel somewhere else on the screen. If you want more work area, you can close the panel docking area by clicking on the expander arrow between the document window and the docking area. You can open it back up by clicking it again.

2 The Properties Window The Properties Window is a very important element in Dreamweaver. It changes depending on what you have selected on the page. The Properties Window allows you to change the properties of whatever you have selected. For instance, if you have text selected, it allows you to format the text, including making a link. Defining the Site The first thing you must do before you start designing pages is define a site. You may have more than one site defined in Dreamweaver and you may pick which one you want to work with when you enter Dreamweaver. 1. Go to Site, New Site, Advanced Tab as shown below: Defining the Local Info The Local Info tells Dreamweaver the name of the site and where you will store the files locally (on your machine). 2. In the example below, the name of the site is Greenhaven Spa. 3. Next you must choose a location to store your local files for this site. For the Local Root Folder, click on the folder

3 icon 4. In the following example, we have navigated to the Desktop and created a folder called Greenhaven Spa. You could also store the files in a folder on your C: drive, or on the network, on your N: drive. 5. If you are creating a new site, it helps to define a Default Images Folder. It not only helps you organize your site files, but it makes it easier for Dreamweaver to manage your files. The following image shows the Images folder being created under the Greenhaven Spa folder on the Desktop. Defining the Remote Information

4 The Remote Information tells Dreamweaver how to connect to the web server where you will publish your pages. 6. Click on the Remote Info Category For the Access: select FTP. For the FTP Host: type in unix.uncg.edu For the Host Directory: If you are setting up a site for a department, you would type the following for the host path: /afs/uncg.edu/html/xxx Where xxx is the three letter department code. For example, for the History department it would be /afs/uncg.edu/html/his If you are setting up a personal site, you would type the following for the host path: /afs/uncg.edu/user/?/username/public_html Where? is the first letter of your username For example, if your username is jldoe, then the path would be /afs/uncg.edu/j/jldoe/public_html NOTE: You must have already set up your personal web space on your Unix account FIRST before you can set up your Dreamweaver site. See the document at to learn how to set up your personal space. For the Login: Type in your username. For the Password: Type in your Unix password. If you do not know your Unix password go to and reset it. Click the Test button to test your connection to the FTP Host and Host Directory. If your test is successful, you will be able to upload and download files. If the test is not successful, re-check your information. If you are trying to connect to a departmental web directory, you may not have rights to do so. Fill out the form located at to request access to a departmental directory. 7. Click OK on the Site Definition Screen as shown in the next image:

5 Selecting the Site Notice the Site Window on the right side of the screen: If you only have one site defined, that site is already chosen. If you have more than one site defined, you can click the down arrow beside the current site to choose another site. Creating a New Page 1. To create a new page, go to the Site Window and choose File, New File.

6 2. Give the file a name and then double click the file to open it. Your main page for your site should be named index.html. Setting Page Properties Before you start creating the page, you can set some page properties. This is where you give the page a title, and set some other attibutes of the page, such as background color, and the color of text and links. Title The title of the page is important. Dreamweaver uses "Untitled Document" as the default title for a page. The title is used for document identification and is displayed in a browser's title bar and as the bookmark name. 1. Go to Modify, Page Properties, Title, and type in a title for your page. The following example uses Greenhaven Spa as the title.

7 Background Color or Image You may set the background color, or use an image as the background. If you choose to use an image, make sure it is one that will not overpower your text. The following example shows a background image being selected off a floppy diskette in the A: drive: Text and Link Colors 4. Under the Page Properties you may also choose text and link colors. The default text color is black, the default link and active link color is blue. The default visited link color is magenta. 5. When you are finished setting the page properties click OK. Inserting an Image onto the Page 1. Go to Insert, Image, and browse to where your image is stored. In the following example a file called tulips.jpg is being inserted onto the page. 2. With the image still selected, look at the Properties Window. 3. You can choose to change the alignment on the page. In the following exmaple, Centering and Align Middle has been chosen:

8 Entering Text Text is entered by simply typing it in. Note that pressing Enter puts in a blank line while pressing Shift-Enter puts in a line break and takes you to the next line without putting in a blank line. Changing Text Dreamweaver is like Word in that you can select text and make changes to how it is formatted. When you select text you can go to the Properties Window to make changes to it. In the following example, selected text has been changed to Verdana, size 2, Bold. Using Tables Tables allow you more control over how your text and images appear on the page. Tables are laid out in rows and columns, and cells. You can use a table to arrange images and text. To insert a table, choose Insert, Table. Specify how many Rows and Columns you want. You can always change this later by selecting the table and going to the Properties Window.. In the following example, the number of Rows has been set to 2 and the number of Columns has been set to 2. Cell Padding has been set to 2, which means a small amount of padding will be put in around the contents of each cell. The width has been set to 75% of the available screen. The border has been set to 0, which means table dividers will not be visible.

9 To populate the table, click in a cell. In the following example, an image has been inserted into the first table cell. Lists You may have both Ordered Lists (1, 2, 3) or Unordered Lists (bulleted items) To put in a list, Click the Button for a List. The following example shows the button being clicked for an Unordered List. Type in the first item and press Enter. You will get a new bullet. Type in each item and press Enter after each one. Creating a Link to another URL To create a link on your page, type in the text you want to be the link, and then select the text. Go to the Properties Window and type the URL (for example: in the Link box and press Enter. The link will be created. Linking to Another Page in your Site Once you have more than one page in your site, you will want to link them. There are several ways you can make a link to another page in your site. You can type the filename in the Link box ( for example, greenhaven.html) OR Click on the Point to File button and draw a line to the file under the Site Window (see image below)

10 OR Click on the file folder icon next to the Link window to browse to the folder where the files are saved and choose the file. Pre-viewing the Page in a Browser Press F12 to view the page in the browser. The browser that is used depends on how the Preferences are set. To change the browser, go to Edit, Preferences, Preview in Browser. Pre-viewing the page lets you see what the page will look like in the browser once you put it on the web server. Close the browser by clicking on the X box at the top right. Saving the File Save the file by going to File, Save. Viewing the Site Files To see the files that are in your site, click on the Expand/Collapse button on the Site Window as in the next image: Connecting to the Web Server To put the files on the web server you must first connect to the server. 1. Click on the connector button to make the connection to the web server. 2. Once you are connected to the server, click on the Show Site Files or Expand/Collapse button to show the site

11 files. This will change your screen so that you have only the files listed. On the left side of the screen are the remote files (on the web server), and on the right side of the screen are the local files (on your machine). Below is an example of this: Putting the Files on the Server 1. To put the files on the server, click on the Site folder on the right side of the screen and click the blue UP ARROW to put the files on the server. See the next image: 2. Answer Yes when asked if you want to put the whole site. 3. Answer yes when asked if you want to include dependent files. Dependent files are images. Viewing the Site on the Server with a Browser To view the site on the server, start Internet Explorer or Netscape. Go to the URL for your site. If your site is a departmental site: The URL will be Where xxx is the three letter department code. For example, If your site is a personal site: The URL will be For example,

12 Closing Files and Exiting Dreamweaver To finish up, go back to your Dreamweaver window and choose File, Close. At this point you could choose to open another site if you had one. Choose File, Exit to get out of Dreamweaver.