Getting Started with Dreamweaver MX 2004

Creating Web pages is made simple with Dreamweaver. Instead of hand-writing code in the computer language HTML, Dreamweaver writes it for you! This WYSIWYG application allows you to point and click your way to an outstanding Web site.

This handout introduces the workspace and basic features of Dreamweaver. It covers formatting text, inserting images, using layers to control page display, linking to other pages, and provides a foundation in Web site management.

Before You Begin

The Internet is a network of computers and cables that transmit data electronically.

The World Wide Web provides a Graphical User Interface, or GUI, for some of the data being transmitted on the Internet. Browsers are the applications that know how to display the data being transmitted via the World Wide Web. Two examples of browsers are Netscape and Internet Explorer. Programmers tell browsers what to display using a language called HTML. HTML stands for Hypertext Markup Language.

When you want to create a Web page, you first create it on your local computer. Your computer is sometimes connected to the Internet. In order to share your Web page with others or “make it live” you must transfer the files to a server. A server is different than your computer because it has a dedicated connection to the Internet, which makes it easy for other computers to find. When you save a Web page on your computer you need to use the file extension .html to let the computer know that it is a Web page.

If you want your page to be the default page that the browser displays you should name it index.html . This is because Web page locations, or URLs (uniform resource locator) always end in a folder/directory name or a file name. The browser will automatically generate a list, or index, of the files in a directory. If the user types in a URL ending in the directory name he will see the list that was generated by the browser. In order to prevent the user from seeing this list, you can provide your own version of an index, named index.html.

A Web page is an html file. A Web site consists of multiple Web pages that are somehow related. The pages in a Web site are usually found in the same folder/directory and are connected by links.

Dreamweaver is a WYSIWYG program, which means what you see is what you get. Dreamweaver writes the HTML for you. Although Dreamweaver is a WYSIWYG program, you should always test in different versions of different browsers on different platforms.

Exploring the Dreamweaver Interface

---

Dreamweaver opens with a main document window and several panels that are docked along the top, right, and bottom of the screen. The main document window is where you will build your Web pages.

One of the panels along the right-hand side of the screen is the Files panel. This panel keeps track of all the files in your site; Web pages, images, and more.

This panel can be expanded for additional functionality by clicking on the Expand/Collapse Button.

The two panels that are used most often are the Insert Panel, located below the Menu Bar, and the Properties Panel, located below the Document Window.

Insert Panel

The Insert Panel allows you to insert various objects such as images, anchors, and e-mail links. These objects are arranged by group. The Common group is shown by default.

Properties Panel

The Properties Panel allows you to control the properties of the currently selected object or text. The Properties will change depending on the type of item that is selected in the Document Window.

Create a new folder

This is where you will store your Web page and all the files with which you build it. This can be on your Desktop, in your My Documents folder, or wherever you like. This will become your Local Root Folder.

The Local Root Folder will be Dreamweaver's starting place when it looks for a file. Dreamweaver will create a path based on where the file is in relation to the Root Folder.

Define a new site

1. Launch Dreamweaver.

2. The Dreamweaver splash screen opens and provides a list of options.

3. Under Create New choose Dreamweaver Site.

4. In the Site Definition dialog box, enter the name of your site. This name is used to help you keep track of your site locally and will not be published to the Web. Click Next.

5. Choose "No, I do not want to use a server technology", unless you know otherwise. Click Next.

6. Choose "Edit local copies on my machine, then upload to server when ready."

7. Click the folder icon below the question, "Where on your computer do you want to store your files?" Navigate to your newly created Root Folder. Click Select, then click Next.

8. If you know your server name and connection information you can enter it now. If not, choose None from the drop down list. Click Next.

9. Review the information and click Done. Dreamweaver scans any files in your Local Root Folder to help it keep track of your actions as you work.

10. In the Dreamweaver splash screen, click HTML under Create New. You should now have a blank document open and your site information should appear in the Files Panel on the right side of the screen.

Create and format text

1. In the Document Window type Your Name's Homepage and select (highlight) the text you have just typed.

2. In the Properties Panel click the center alignment button to center the text.

Headings

Next to the word Format there is a drop down list that allows you to choose the Heading size for selected text. Headings 1 through 6 cause these formatting changes:

• Make text bold
• Change the text size

Heading 1 is the largest and Heading 6 is the smallest.

1. Choose Heading 1. The text is quite large and takes up a good deal of the page.

2. Choose Heading 2 or Heading 3. Click to the right of the text to deselect it.

Spacing

Spacing works a little differently in Dreamweaver than in a standard word processing application. To add extra spaces between words you cannot simply press the space bar. Instead you must insert a non-breaking space, or nbsp, found in the Text group of the Insert Panel.

1. In the Document Window, click between your name and the word Homepage to relocate the insertion point.

2. Press the spacebar a few times and notice that no spaces are inserted.

3. Select the Text group from the Insert Panel.

4. From the Characters drop down list at the right end of the Insert Panel, choose Non-breaking Space.

5. Click the nbsp button a few more times to add additional spaces.

6. Use the backspace key on your keyboard to remove each space one by one.

Carriage Returns

To add a blank line in between lines of text you may simply press the Enter/Return key on your keyboard. This will create a new paragraph using the <p> tag and will allow for a different text format. This method also leaves some space between the previous paragraph and the next paragraph.

1. Position the insertion point at the end of the line of text and press Enter on your keyboard.

2. Notice that your cursor is now located on the line below your text. Type the text, "Please read on to learn more about me."

3. Select the text that you just entered and choose a different heading size from the Properties Panel. Notice that the heading size of your first line of text remains the same.

4. Position the insertion point at the beginning of the second paragraph. Press the backspace key to move the text up to the first line.

5. Notice that the text you just entered was converted to the heading size of the first paragraph.

6. From the Characters drop down list in the Text group of the Insert Panel, click the Line Break button or press Shift + Enter on your keyboard. Notice that your text goes immediately to the line below, with no additional space added between the two lines.

7. Highlight the second line of text and change the heading size in the Properties Panel. Notice that both lines of text change.

8. From the Edit Menu choose Undo Text Format, or press Ctrl + Z.

9. Position the insertion point at the beginning of the second line of text and press the backspace key on your keyboard. All of your text should now be on the first line.

10. Press Enter on your keyboard to move the sentence into a new paragraph.

11. Readjust the formatting of each paragraph as you like.

Also notice the standard formatting tools that are included on the right side of the Properties Inspector (while your cursor is within text). The buttons for indent, out dent, bulleted list, numbered list, and alignment all work very much like in a word processing application.

Save your document

1. Under File choose Save.

2. Navigate to your Root Folder and save your document as index.html.

Page Backgrounds

Background color

To quickly add some color you can assign a background color to the page. This information is communicated in the HTML code itself, not as a separate image, so it loads very quickly.

1. Click the Page Properties button in the Properties Panel.

2. The Page Properties dialog box will appear.

3. Select a background color by clicking the box to the right of the word Background, called the color picker, or by typing in the 6-digit code for that color. (This is the hexadecimal color code that browsers use to identify colors.) Click Apply to see if you like the color. When you are satisfied with your color choice click OK.

TIP : If you click the Color Picker and want to exit without choosing a new color, press Escape . Clicking somewhere else within Dreamweaver will pick whatever color the browser is currently over.

Background Images

Background images are separate image files that can be applied to specific pages or entire sites. The browser must upload this file in addition to the HTML file. Keep background image files small to reduce the download time for your users. The background image will tile both down and across your page, so even a small image can fill up the entire page.

1. In the Properties Panel click the Page Properties button.

2. Click Browse next to "Background image" and navigate to the desired image (which should be stored in your root folder). Click OK.

3. In the Page Properties dialog box click Apply to try out the image, or click OK to apply the image.

3. If the image you would like to use is located outside of your root folder, Dreamweaver will prompt you to place a copy there. You should click Yes and save the file in your root folder with the same name.

Page Titles

The title of a Web page will appear in the title bar of the browser. It will also appear when the user makes your page a bookmark or favorite, so make it intuitive and descriptive. The page title is not the same as the file name.

1. Locate the Title box just in the toolbar at the top of the Document Window and type Welcome to Your Name's Homepage!

2. Press Enter to confirm the page title.

3. From the File Menu choose Save or press Ctrl + S on your keyboard.

Testing in the Browser

Although Dreamweaver is a WYSIWYG application, your page may not appear exactly the same when displayed in the browser. It is important to test your page in the browser before publishing it to the Web. Certain fonts and colors may appear differently than you were expecting, animations and links will be active, and several other details could need some correcting.

Dreamweaver's Preview in Browser feature will create a temporary version of your file and load it in the browser. This file will be stored locally and will keep you from having to save your page before viewing it in the browser.

1. Click the Preview in Browser button in the toolbar located across the top of the Document Window.

2. From the drop down list, choose the browser that you would like to use to test your page.

Images

Images on the Web are generally one of two types, GIF or JPEG. The GIF format efficiently relays information about drawings because it focuses on areas that are the same color from dot to dot, or pixel to pixel. JPEGS are usually photographs and are better for images in which there are many colors with many variations.

1. Position your cursor at the end of your text and press Enter on your keyboard.

2. Click the Insert Image button in the Common group of the Insert Panel.

TIP: If you move your mouse over a button and leave it still for a moment, a label will appear telling you what the button does.

3. The Select Image Source window pops up.

4. Navigate to the image you wish to insert and click OK. The image will now appear on your page.

5. If the image you would like to use is located outside of your root folder, Dreamweaver will prompt you to place a copy there. You should click Yes and save the file in your root folder with the same name.

6. Save your document.

7. Click the Preview in Browser button in the toolbar at the top of the Document Window to see you page in the browser.

Note that the Properties Panel now reflects the properties of the current selection, an image.

On the right side of the Properties Panel there is a field for Alt, or alternate text. This is text that will be displayed in the event that the viewer cannot properly view the image. This may be due to a visual impairment, and slow modem connection, or a missing file.

8. Position the cursor within the Alt field and enter some text that describes the image. Think of what text you would like to see if you were not able to view the image.

9. Press Enter on the keyboard to confirm the alternate text entry.

You can resize an image in Dreamweaver by clicking and dragging one it its three handles. You can constrain the proportions of the image while resizing it by holding down the Shift key.

TIP: Do not use Dreamweaver for dramatic changes in size. If your image is large and you make it smaller, the user will still have to wait for the large file size download time. If your image is small and you make it bigger, the image will pixilate because there are not enough pixels, or dots of color to fill in the space.

Layers

Draw layers

Layers allow you to to position text and objects on your page according to the distance from the top and left of the window's edge, rather than using spaces, blank lines, and alignment to control positioning.

1. From the File Menu select New.

2. In the New Document dialog box, select HTML and click Create.

3. From the Window Menu choose Layers. The Layers Panel appears in the upper right corner of the screen.

4. In the Layout group of the Insert Panel click the Draw Layer button.

As you move the cursor over the Document Window, the cursor becomes a cross hair.   

5. Use this cross hair. to draw a layer. Begin at the upper left and drag to the lower right.

6. Repeat steps 4 and 5 to draw two more layers.

Your page should look similar to this:

Reposition and resize layers

These layers will be the containers for all content on the page. Everything on the page should now be placed in a layer to create the most consistent display. It is easy to resize a layer after it has been drawn.

1. Click on the layer's border to select the layer. Eight little black handles will appear.

2. Position your mouse over a handle so that it becomes a two-way arrow, then drag the handle in or out to the desired size.

3. To reposition a layer repeat step one, but this time click on the tab in the upper left corner of the layer.

4. Drag the layer by its tab to the desired location.

Or

To reposition a layer repeat step one, then use the arrow keys to move the layer one pixel at a time, or Shift + the arrow keys to move the layer ten pixels at a time.

Also notice that the Properties Panel now displays the layer's properties.

Add text to a layer

1. Click within the layer to position the cursor in the upper left corner of the layer.

2. You can now type and align text within the layer. The same formatting rules apply to text whether it is placed in a layer or straight on the page.

Add an image to a layer

1. Click anywhere in the layer to make it active.

2. Click the Insert Image button from the Common group of the Insert Panel.

3. The Select Image Source window pops up. Navigate to the desired image and click OK. Remember to copy the image to the root folder if it is not already there.

4. Add alternate text in the Alt field of the Properties Panel.

5. Save your file in your root folder with a name other than index. Be sure to use the file extension ".html".

Links

Links are spots on a Web page that can be clicked to go to another Web page. Links can be text or other objects, such as images. The text that serves as the link is usually blue and underlined before it is clicked. This text does not have the be the URL. We will use links to link to pages outside of our site and also to link the pages within our site to each other.

1. In the central layer, type I am learning Dreamweaver at the University of Texas at Austin .

2. Select/highlight the words University of Texas at Austin.

3. In the Properties Panel type the destination URL http://www.utexas.edu (or path/file name) in the Link field and press Enter on your keyboard.

4. Test your link by clicking the Preview in Browser button in the toolbar at the top of the Document Window. If your link is successful in the browser, use the browser's Back button to return to your page. If it is not successful, correct any mistakes you may have made in the URL and preview your page again.

5. Position the insertion point in the layer on the left side of the page.

6. Type the word Home and select the text.

7. In the Properties Panel, click the folder icon next to the Link box and navigate to the destination file, index.html, then click OK. You now have a link from your new page back to your homepage.

8. Save your file.

Date and Time Stamps

Insert the Date

The creation date and last modified date are usually included at the bottom of Web pages. Dreamweaver can help you include both of these objects.

1. Place the insertion point after the text in the central layer and press Enter twice to make leave a blank line.

2. Type "Created on: ".

3. In the Common group of the Insert Panel, click the Insert Date button.

4. In the Insert Date dialog box, choose the format Dreamweaver will use to display the date and time.

5. Click OK.

6. Click the Line Break button from the Text group of the Insert Panel or press Shift + Enter on your keyboard.

7. Type "Last Modified: ".

8. In the Common group of the Insert Panel, click the Insert Date button.

9. In the Insert Date dialog box, choose the format Dreamweaver will use to display the date and time. This time, check the option for "Update automatically on save". This means that each time you edit this file and save, Dreamweaver will automatically update this date and time.

Your page should now look something like this:

E-mail Links

It is a good idea to include a method by which you can be contacted. Users may want to notify you of an error, provide you with additional content, or ask for your permission to borrow from your content. An easy way to provide this outlet is to create an e-mail link.

1. Place the insertion point after the Last Modified date and click the Line Break button from the Insert Panel or press Shift + Enter.

2. Type "Created by: ".

3. In the Common group of the Insert Panel click the Email Link button.

4. In the Text field type your name (or the text that you wish to serve as the link). In the second text field of the dialog box that appears, enter your e-mail address.

5. Click OK. When the user clicks on the e-mail link, a new e-mail message will open in his default e-mail application with your e-mail address in the To: field.

6. Save the file.

Switching Between Documents

You may have noticed the tabs at the top of the document windows that have the file names listed on them. Use these tabs to easily switch between document windows that are maximized.

1. Click on the index.html tab to bring your homepage to the front.

When your Document Windows are not maximized, you can make a window active by clicking somewhere in the window, or by choosing the document from the Window Menu.

2. On your homepage (index.html) insert a few blank lines and type the following text:

Home | Hobbies

You may wish to substitute the word "hobbies" with the title of your second page.

3. Select the word "Hobbies" and click the folder icon next to the Link field in the Properties Panel.

4. Navigate to the correct page and click OK.

index.html should now look something like this:

5. Save index.html.

Site Maps

A site map lets you see how the pages in your site relate to each other. Think of it as a genealogy chart for your Web site. It will help you manage your pages and see where you may have left out links.

1. Click the Expand/Collapse button in the Files Panel.

2. Click the Site Map icon in the toolbar of the expanded Files Panel and choose Map and Files.

You should see something like this:

3. Click on the plus signs next to the files in the site map to see what each is linked to.

4. Click on the Expand/Collapse button again to return to document editing mode.

Publishing Your Files

Dreamweaver has a built-in FTP Function. FTP stands for File Transfer Protocol and is the standard method for moving files from your computer to a server. Putting your files onto a server allows them to be viewed by anyone with a Web connection.

If you would like to publish your files to a remote server from within Dreamweaver using FTP or one of the other provided methods, you will need to manage your Site.

Setting up a Remote Server Connection

1. In the Files Panel, click the drop down list where your site name appears and choose Manage Sites.

2. Choose your site and click Edit.

3. Click Next until you get to the Sharing Files screen.

4. Choose your connection method from the drop down list under "How do you connect to your remote server?"

5. Fill out the required information and click Test Connection to check for errors. Click Next.

6. Choose "No, do not enable check in and check out." Click Next.

7. Review the information and click Done.

8. Click Done.

Uploading Your Files

1. In the Files Panel click the Connects to Remote Server button. Once you have connected you should have a list of files on the remote server and the Connects to Remote Server button should be lit up green.

2. Click the Expand/Collapse button in the Files Panel.

3. In the toolbar click the Site Files button to display both the local files and the remote files.

4. Select all of the files in the Local Files list that need to be uploaded and click the blue Put arrow to upload them to the remote server.

Congratulations! You have now published your Web site. For future updates, simply save an upload only the files that have been edited.