Learning the Basics – Lesson 1

Learning the Basics – Lesson 1 Objectives Understand the Macromedia Dreamweaver MX graphical user interface. Recognize how Macromedia Flash text differs from regular text. Define a new site. Name, title, and save your documents. Specify preview browsers. Specify background, text, and link colors. Put text on a page and format it. Use the Assets panel to select and apply color to text. Learning the Basics – Lesson 1

The Dreamweaver MX interface The major components of the Dreamweaver MX user interface are: The Document window, where you create and work on your document. The Insert bar, located above the Document window, and the toolbar which contain buttons for common tools and commands. The Property inspector, located across the bottom of the Document window. Its contents change depending on the object that is selected. Various panels located on the right side of the Document window that are used to manipulate different aspects of your page as you build it. Learning the Basics – Lesson 1

An example of the Dreamweaver MX interface This figure shows the Dreamweaver MX user interface. Your interface may look different depending on which panels are turned on or off in your document. Insert bar Toolbar Document window Property inspector Panels Learning the Basics – Lesson 1

Learning the Basics – Lesson 1 Define a new site Before you can begin creating Web pages, you must define a site to hold those pages. You will create a ‘local’ site on your computer’s hard drive to contain the local copies of the Web pages. You begin by creating a main folder for the local site, called the “root” folder. All files and subfolders for the site are contained within the root. You can also create a ‘remote’ site on an Internet server to hold the Web pages published to the Internet. The remote site will contain a ‘mirror copy’ of your local site, including all folders and files. Learning the Basics – Lesson 1

Choose your path reference preference There are three ways you can reference paths in your Web site in Dreamweaver MX. They are: Site-root-relative – Provides the path from the root folder to a document. This is a good choice for a large Web site that may span multiple servers. Absolute – Provides the full URL of the document path, including the protocol, such as http://. Document-relative – Provides a path for the file in relation to the current folder. This is a good choice for local links in most Web sites. Learning the Basics – Lesson 1

Learning the Basics – Lesson 1 Create a new site To create a new site: Click the Site menu, then click Edit Sites. If this is your first Dreamweaver site, you will see the Site Definition wizard appear. If you have existing sites, the Edit Sites dialog box will appear. If so, click the New button. Assign a name to the site to help you identify the purpose or content of the site. Select the Edit local copies on my machine option and then locate the folder to store your local site. Respond to the remaining options and click OK to create the site. Click Done to close the Edit Sites dialog box if open. Learning the Basics – Lesson 1

Specify preview browsers You can specify one or more Web browsers to use to preview your pages as you work on them. To do so: Click the Edit menu, then click Preferences (Windows), or click the Dreamweaver MX menu (Macintosh) and then click Preferences. Click on a browser name in the window on the right and indicate if it is a primary or secondary browser. Add any other browsers that you want to use that are not in the list. Ask your instructor for help if you are unable to add a new browser. Click OK to close the dialog box. Your preview browsers are defined and ready for use. Learning the Basics – Lesson 1

Save, name, and add a title to your documents Any time you create a new document, you should save it immediately, using options on the File menu. When naming an HTML file, keep these things in mind: Use lowercase letters so the names will work on all servers. Don’t use spaces or special characters in your name. Numbers are OK, but do not start a name with a number. You can title each page, and the title will be shown in the Web browser’s title bar. To title a page: Click the View menu, point to Toolbars, then click Document. Enter a descriptive title in the Title text box and then press the Enter or Return key. Learning the Basics – Lesson 1

Specify color for background, text, and links This is the Page Properties box where you can set a background color or image for your page. You can set a color to be used for text and for hyperlinks (Links, Visited and Active). To open this box, click the Modify menu, then click Page Properties. Select background image Set background color Set color for text Set color for hyperlinks Set color for a Visited link Set color for an Active link Learning the Basics – Lesson 1

Add text to your Web pages You can add text to your pages by typing it in or by copying and pasting from some other document. You can use the Property inspector to set the font (type face style), the size of the text, and other style options such as bold and italic. The Property inspector has a drop-down menu of HTML text formats, such as for paragraphs and headings. HTML has six levels of headings. Heading 1 is the largest font size and is used for titles. Heading 6 is the smallest font size. The others decrease in size from Heading 2 to Heading 5. Learning the Basics – Lesson 1

Add other text formatting using the Property inspector The Property inspector can be used to apply different formatting options to your text. You can indent and outdent using the buttons indicated below. You can also format text into lists. You can create an ordered (numbered) list or unordered (bulleted) list. You can also create a definition list by clicking the Text menu, pointing to List, and then clicking Definition List. Unordered list Ordered list Learning the Basics – Lesson 1

Use the Assets panel to save and access color Every color used in your site is listed in the Assets panel. You can save commonly used colors as a Favorite to use in other parts of your site, and you can create custom colors. Learning the Basics – Lesson 1

Change font color using the Assets panel Select the text in your page that you want to change. Select the color from the Assets panel color list and click the Apply button. Learning the Basics – Lesson 1

Add Macromedia Flash text to your page When you add a heading to your page, you can add it as text and format it as a heading, or you can insert it as a graphic. Text formatted as a heading loads quickly, but your formatting options are limited. A graphic takes longer to load, but requires access to a graphics program and time to create the graphic. Flash text can be created using any font you wish and saved as a Flash SWF file. Flash text can be resized directly in the Document window. Learning the Basics – Lesson 1

Adding Flash text to your page Position the insertion point in the Document window. Set any alignment option (such as center) in the Property inspector. Click the Media tab of the Insert bar and then click the Flash Text button to open the Insert Flash Text dialog box. Choose your font style plus other formatting and color options. Enter the text to display in the Text text box, and save the file by giving it a name in the Save As text box. Learning the Basics – Lesson 1

The Insert Flash Text dialog box This figure shows the Insert Flash Text dialog box. Note that you can set a Rollover color for the text here, as well as create the Flash text as a hyperlink with a target URL. Learning the Basics – Lesson 1

Learning the Basics – Lesson 1 Summary In this lesson, you learned: About the Macromedia Dreamweaver MX graphical user interface. To recognize how Macromedia Flash text differs from regular text. To define a new site. How to name, title, and save your documents. To specify preview browsers. To specify background, text, and link colors. How to put text on a page and format it. How to use the Assets panel to select and apply color to text. Learning the Basics – Lesson 1