I. Introduction to Dreamweaver MX
Dreamweaver MX is a program that allows you to quickly and easily create and manage static and dynamic websites. This documentation walks you through creating a simple web page with links and graphics. The first thing you need to do is download the files that will be referred to in this documentation.
A. Installing Dreamweaver MX
If you do not already have Dreamweaver, a 30-day trial can be downloaded and installed from the Macromedia's website: http://www.macromedia.com/software/dreamweaver/trial/
II. Basic features of Dreamweaver MX
A. Document Window
This is your workspace. You may view this window in: Code, Design, or Code and Design modes. The Code mode allows you to edit your web page in HTML; the Design mode allows you to visually edit your web page; and the Code and Design mode allows you to do both. These options can be accessed via the View menu
B. Insert Panel
This window contains shortcut icons that perform the same function as items in the Insert menu. From here, you can insert objects such as graphics, tables, layers, and Flash movies.
C. Properties Panel
The Properties window allows you to apply a format to text, weblinks, graphics, tables, layers, and other objects. Items in this window can also be accessed via the Modify menu.
D. Other Panels
Dreamweaver MX also includes includes various other panels:
1. Design panel
CSS and HTML styles can be applied and edited through this panel.
2. Code panel
Includes the HTML Tag Inspector and a searchable O'Reilly reference guide for HTML tags.
3. Application panel
This panel is used to insert dynamic data into the webpage.
4. Files panel
Site files and assets are managed through this panel.
III. Getting started with Dreamweaver MX
A. Defining a site
Before creating and saving a new web page, you must define a site. This specifies where your files will be stored locally and where they will be uploaded remotely.
1. From the Menu Bar: Select Site > New Site. A Site Definition box will appear.
2. Under the Local Info category, fill in the following information:
Site Name: My Website
Local Root Folder: drive and directory where you extracted the zip file (perhaps C:\My Documents)
HTTP Address: http://web.csuchico.edu/~login (login is your Wildcat login)
3. Select the Remote Info category and change Access to “FTP." Fill in the following information:
FTP Host: unix.csuchico.edu
Host Directory:public_html (login is your Wildcat login)
Login: your Wildcat login
Password: your Wildcat/portal password
B. Page Properties
The title, background, text and link colors can be set on your webpage using the Page Properties window. This is accessable from the Modify menu > Page Properites
1. Title
The title of the page is the text that will appear at the top of a browser window when your page is loaded. The title and the file name ARE NOT the same thing. You can write anything in the title: My first website, My Dreamweaver page, etc.
2. Background
You have the option of using an image as a background or a solid color background. Use the browse option to load an image or the color picker to pick a color.
3. Text and link colors
To set the default text and link colors, click on the color selection square to the right of the item. A color palette will appear; drag your mouse over the desired color and click on it. All text and links will appear in the colors specified here, unless otherwise modified from the Properties window. This will be covered in the next section
C. Text
1. Inserting Text
Inserting text into Dreamweaver is like using a word processing program. To insert text, type into the Document window. There should already be a blinking cursor, specifying where the text will begin. Since this text has not been modified, it should be set to the default color and size. For an example, type in "Welcome to my webpage."
2. Formatting Text
Text is formatted through the Properties Window. Any text that is to be modified needs to be highlighted first.
a. Highlight "Welcome to my webpage."
b. Using the Properties window change Format to “Heading 1." Heading 1 is the largest heading size; “Heading 2” is the second largest, followed by “Heading 3”, etc.
c. The dropdown menu to the right of Format allows you to change the font of the selected text to whatever you want.
d. Text size can be changed under the size dropdown menu.
e. To change the color of the selected text, click on the color selector to the right of size.
f. The other buttons on the Properties window provide features similar to what is available in Word, such as Bold, Italics, alignment, and bulleting. Center the heading by clicking on the center alignment button.
D. Web Links
Start by typing anything into the document window. For example: "Click here to visit Student Computing!" Highlight the words and then type in the link (in this case, the link for Student Computing would be http://www.csuchico.edu/stcp) into the link field of the Properties window. This will create a web link to the Student Computing webpage.
E. E-mail Links
E-mail links are made the same way a weblink is. To set an e-mail link, highlight whatever text you would like to link. Then type in 'mailto:' followed by the e-mai laddress in the link field in the Properties window.
D. Images
1. Inserting an image
In order to insert images to your webpage you will need to use the Insert panel. To add an image, you need to have an image available on your computer or on disk. For our purposes we will use a picture named wombat.jpg that is saved in the same folder as our webpage file. Always keep in mind the directory structure when dealing with image files!
Click on the tree icon in the Insert panel. This will bring up a window that will allow you to browse your computer to find an image. Click OK to insert the image.
2. Modifying an image
Image properties can be modified by using the Properties window.
You can distort the image by changing the W(idth) and H(eight) sizes.
The Align option refers to how the text flows around the image. If you want text to be displayed on the left or right side of the image, select left or right. By default text appears to the bottom right of the image.
III. Publishing your webpage
A. Put
To publish your webpage go to Site > Put or click the green and blue arrows on the Document window menu bar and choose Put.
Your files will begin to upload to the server.