Dreamweaver MX: Introduction
Table of Contents
Saving and Previewing Your Work
Publish Your Page on the Web Server
About this Document
Dreamweaver is considered the standard hypertext markup language (html) editor among web professionals because it can produce highly functional web documents in a short time. Other web hypertext and software, such as JavaScripts, ActiveX components, Java Applets, and Flash movies, are easily incorporated into web pages with a few clicks. With Dreamweaver, the user can work either directly with html code or in a graphic editing environment that functions like a word processing program (e.g., MS-Word). Although Dreamweaver can accomplish many difficult tasks, such as writing Cascading Style Sheets (CSS), it is relatively easy to use.
Prerequisites: Internet Essentials (or basic knowledge of the Internet), Managing Files on the UNC Server AND word processing experience.
Workspace Overview
When you launch the Dreamweaver MX workspace, the Document windows and various panels and toolbars are all integrated into a single application window. You can close or move Document windows just as you would in any other windows-based Microsoft program. The rest of this section provides brief descriptions of a few of the various workspace elements; for a more detailed discussion see ITS Document Dreamweaver MX: Defining Sites and Advanced Design .
Note : The workspace in Dreamweaver MX is slightly different from that of previous versions. In earlier versions of Dreamweaver, the toolbars were not docked, and they floated on top of the main window. If you prefer this setup, MX has an option to change the view to that of the earlier versions: choose Edit > Preferences and click the Change Workspace button.
The Insert bar holds buttons for easily inserting "objects" like links, tables and graphics into your html document. Once it's inserted into your page, each object can be further modified using the Properties inspector (see below). Along the top is a series of labeled tabs that you can click to insert a particular kind of object.
The Document toolbar displays buttons and menus for viewing the document in different ways and some common commands such as transferring files and previewing your work in a web browser.
The Document window displays your web page in a What-You-See-Is-What-You-Get (WYSIWYG) view - i.e., it shows you basically what your text and images will look like when they are seen in a web browser.
The Property inspector : Everything you insert into a page - including text, graphics, tables, and horizontal lines - is considered an "object" that has certain "properties." When you select any object, the Property inspector displays all the formatting properties associated with that object, including any links. Often the Property inspector will have a small arrow in the lower right corner, indicating that there are further options. If you click on the arrow, you will see them.
The Panel Groups : Panels contain groups of related functions for working with your website, such as style sheets, working with code and managing the files in your site. Again, these topics are covered in more detail in Dreamweaver MX: Defining sites and Advanced Design .
Page Properties
The overall formatting of your webpage is set through the Page Properties dialog box. From the Modify menu choose Page Properties , or right-click on an empty part of your web page and choose Page Properties from the shortcut menu that appears. You can go back and change your settings any time you want.
Title : Every HTML file should have a title. The title shows up in a browser's title bar, bookmarks and in search engine results.
Background Image : This is where you specify the graphic you want as the page background. If the image is small, the browser will automatically tile it to fill the entire window.
Background : Click on the color swatch, and then use the eyedropper to choose the background color of the page. You can also type the name of the color you want in the box (e.g. red), or its hexadecimal representation (e.g. #FF0000). If you specified a background image, that will override the background color; the background color will still show up while the background image loads.
Text : Click this color swatch to set the color of the default text.
Links (Active, Visited) : Set the colors for text or the border of images used as hyperlinks.
Margins (Top, Left, Width, Height) : Change the default margins used by browsers. Internet Explorer uses Left and Top; Netscape uses Width and Height.
Document Encoding : Use the drop down list if you need to change the character set you're using for your page.
Tracing Image, Image Transparency : These options come into play when you're using an image as a layout guide for the page.
Set Color Scheme : Instead of manually setting the background color in conjunction with the color of links, visited and active links, you can choose from a number of pre-set Web-safe combinations. From the Commands menu, choose Set Color Scheme .
Formatting Characters
You can change the appearance, size and color of text using the Property inspector. Either set the text properties you want and then start typing, or select the characters you want to format after they're typed and then modify their properties.
Font : Choose the font face from the list of available fonts.
Size Change : This controls the relative size of the font to its baseline size of 3. Negative numbers make it relatively smaller, and the positive numbers make it relatively bigger.
Color : From the Property inspector, click the color swatch to change the color of the selected text.
Style : Make the selected text bold or italic by clicking the B or I buttons on the Property inspector.
All of the preceding formatting options and many more style options are available from the Text menu.
Formatting Paragraphs
When you work with the Document window, Dreamweaver starts a new paragraph every time the Enter key is pressed. If you just want to start a new line, hold down the Shift key while you press Enter .
Headings are used to visually separate your HTML document into different sections. A heading has a blank line before and after it, is usually bold and is a different size from normal text. There are six heading sizes available from the drop down list beside Format in the Property inspector.
Indent, Outdent : Use the indent button to turn a paragraph into a left-indented block quote. If you decide you don't like that, the outdent button moves the selected text out towards the left margin. You can also use the indent and outdent buttons to adjust the level of items in a list.
Lists : Use the list buttons on the Property inspector to create a bulleted or numbered list.
Alignment : Paragraphs may be left or right aligned, centered, or justified by using the alignment buttons on the Property inspector.
Hyperlinks
In Dreamweaver it's easy to create links to other websites, other pages in your own site, or to specific sections of a particular page. You can assign a hyperlink to text or images. In order to test the link, preview the page in a web browser - links aren't active in the Dreamweaver workspace.
External and Internal Links : Select the text or image you want to be the link, and enter the URL in the Link text box of the Property inspector. You can type the URL directly in the box, browse for the file using the Folder icon to open the Select File dialog box, or use the Point-to-File icon to drag to an existing site or page.
When you're linking to an external web page, you have to include its entire address, i.e. "http://www.website.com/page.html". In this case, it's often easier to open the site in a web browser, copy the URL from the location bar with Ctrl-C , and paste it into the Link box with Ctrl-V . This kind of link is also referred to as an absolute reference.
When you link to another page on your own site, you don't have to specify the entire URL. If all your web pages are in the same folder, you can just enter the name of the page you're linking to in the Link box. If you're linking to files stored in separate folders on your website, then the link should include the folder name, a slash, and the name of the page you want to open, i.e. "images/pic.jpg". This kind of link is also referred to as a relative reference.
Anchors allow you to create a link to a specific point in an html file. Instead of having to scroll down to find the content they want, your users can click on a link to automatically bump them to the appropriate point in the file.
The basic idea is to put an anchor at the spot in the page you want to jump to, and then create a link to that anchor. To insert an anchor, make sure the cursor is blinking in the right spot, and then click the Named Anchor icon on the Common toolbar. Type the name of the anchor in the Named Anchor dialog box. Click OK and an anchor symbol appears in your webpage (if it doesn't show up, go to View->Visual Aids and select Invisible Elements ). You can change the name of the anchor by selecting it and changing its name in the Property inspector. Next select the text in your page that should link to the anchor, and in the link box type a hash mark (#) followed by the anchor name: #first . Alternatively, you can use the Hyperlink icon and choose the appropriate anchor from the list that appears in the Hyperlink dialog box.
If you want to link to an anchor in a different webpage, enter the URL in the Link box, and supply a hash mark followed by the anchor name: page.html#anchor .
To remove a link completely or modify a link, select the link text or graphic, and delete or retype the current link information from the Link box in the Property inspector.
Email links are used to automatically open a preaddressed email window that people can use to type and send an email to the specified recipient (whether or not it actually works depends on how the user's browser is configured). To insert an email link, click the Email Link icon and enter the text that should be linked and the address the email should go to.
Horizontal Line
You can use a horizontal line to visually separate sections of your page. To add a line, click the Horizontal Rule icon on the Common toolbar. You can adjust the line properties at any time by selecting it and modifying the values that appear in the Property inspector. Set its width as either a fixed pixel value or percentage of the browser window; specify its height, alignment and shading here as well.
Images
The majority of web browsers currently read just two types of graphics files, GIF or JPEG; a third format, PNG, is also gaining acceptance. Dreamweaver supports all three formats. You can create images with a program like PaintShop Pro, Microsoft PhotoEditor, or Photoshop. You can also download graphics from the web. (Before you "borrow" a graphic from the web to put on your own page, be sure it is not copyright protected.) To download a graphic, right-click on it in the browser window on a PC or hold the mouse button down on a Mac, and select the option to save it.
Inserting Images : Put your cursor in the spot on your page where you want the image to go. From the Common tab on the Insert bar, click the Insert Image icon. In the Select Image Source dialog box, navigate to the folder where your images are stored, and double-click the image you want to insert. If the image you are inserting is stored in a folder that's not part of the current website, a dialog box will appear that allows you to copy the image to the same folder as the webpage if you want to.
Clicking one time on an image that has been inserted into your web page selects it, and you can modify the image attributes in the Property inspector. You can change an image's height and width in the Property inspector's H and W fields. Enter text in the Alt field that will display as a ToolTip when the user's cursor moves over the image, and that displays in place of the image in text-only browsers. You can adjust margins around the image with the V Space and H Space fields. The Border field can be filled in to draw a border around the image. The image's horizontal position can be changed with the three alignment buttons, and text can be aligned around the image by making a selection from the Align list.
Tables
To insert a table, click the Insert Table icon on the Common toolbar. In the Insert Table dialog box, you can specify the number of rows and columns the table should have, its width as a percentage of the window or as a fixed number of pixels, the thickness of the border, the margin within each cell (Cell Padding), and the distance between cells (Cell Spacing). After you click OK , Dreamweaver inserts a table into your webpage. You can modify the table's properties by clicking directly on the border of the table to select it and altering the values that appear in the Property inspector.
To adjust the horizontal alignment of the table within the webpage, select the entire table and choose Left , Right or Center from the Align drop-down list in the Property inspector. To adjust the alignment of contents within cells, select the appropriate rows or columns in the table and specify the Horizontal or Vertical alignment. To select individual cells, hold down the Ctrl key and click in the desired cells. To select an entire row or column, put the cursor to the left or top of the table; when it changes to an arrow you can click and drag to select multiple rows or columns.
Entering contents into cells of the table works just like anywhere else in the page; you can enter text, images or horizontal lines, etc. You can adjust the background color or specify a background image for cells, and adjust the color of the table border using the Property inspector.
It's possible to split or a cell by selecting it and clicking the Split icon on the Property inspector; enter the number of rows or columns the cell should be split into in the Split Cells dialog box and click OK When more than one cell are selected, the Merge icon is active; clicking it merges the selected cells into one.
Other options for modifying a table, including inserting or deleting rows or columns, are available by right-clicking anywhere in the table, and choosing Table from the shortcut menu that appears.
Signing and Dating Your Work
Use the Date icon on the Common toolbar to automatically insert the date and time. In the Insert Date dialog box, you can specify whether to display the weekday, the format of the date, and the format of the time.
Saving and Previewing Your Work
To save your file, choose Save from the File menu. If this is your main home page, name it index.html; otherwise, it can be anyfile.html. "HTML" stands for "hypertext markup language," the language read by web page browsers.
Since different browsers render HTML differently, it is a good idea to preview your work in the two major browsers - Netscape and Internet Explorer. Dreamweaver offers a shortcut: under the File menu, select Preview in Browser . Dreamweaver will open the browser on your machine and load your page. You can add up to 20 different browsers by selecting Edit browser list . Your primary browser will automatically be assigned the keyboard shortcut F12, and your secondary browser will automatically be assigned Ctrl-F12.
Publish Your Page on the Web Server
Instructions for making your web pages available on the world wide web are detailed in the ITS document Managing Files on the UNC Server .You may get one of the following error messages when you check your newly published page. If so, follow the instructions below to solve the problem:
404 Not Found : Your browser cannot locate the file. You may have typed the URL incorrectly, or you may have a problem with the file name.
Question mark icon : The browser cannot find a graphic file. Make sure your graphic is in the proper folder on the web server.
Broken file icon : The browser does not recognize the graphic file. Check to be sure the files are saved in gif, jpeg, or png format.
Coming Up
In Dreamweaver MX: Defining Sites and Advanced Design you will learn features that allow you to make well-structured, professional web sites. The first part covers tools for creating and managing a website. The second part cover tools for structuring page content: layouts, tables, layers, and frames.
Document Overview
Tags: Dreamweaver , introductionSubjects: Web , Web Design and Programming
Audience: Everyone
This work is licensed under a Creative Commons Attribution 3.0 United States License.
