Dreamweaver ~ A Quick Tour ~

The Welcome Screen The first time you launch Dreamweaver, you’ll see the Welcome screen. This page (which changes based on what you’ve recently done in Dreamweaver) is your starting point for both creating and modifying pages and sites. If you close all your open Dreamweaver windows, the Welcome screen reappears

The Welcome Screen Open a Recent Item This section contains a list of the ten most recently opened items in Dreamweaver Create New If you want to create a new page or site, this is the column for you. Choosing one of these options creates a new HTML, Coldfusion, PHP, ASP, XSLT, CSS, JavaScript, or XML file. You can calso create a new Dreamweaver site. Create from Samples If you’re just learning about building Web sites, these are the choices for you. This section contains sample documents, each of which contains many beautiful laid-out pages ready for your content. Clicking any one of these open up the New Document dialog again, but with a different category chosen.

Getting Started Choosing this option gives you, as it says, a quick tour of Dreamweaver’s functionality. You’ll see a short online tutorial on Adobe’s Web site New Features This opens the online new features documentation using your default Browser Resources You can follow this link to find additional resources on Adobe’s site. Don’t show Again Adobe knows that while some people love the welcome screen, other people don’t. Here, your can choose to never see the Welcome screen again The Welcome Screen

The Document Window In your Dreamweaver “Welcome Screen” window, choose HTML, under “Create New.” You will see a new page, ready for you to design. This is where it begins!

The Insert Bar Directly under the menu bar is what’s called the Insert Bar. The Insert Bar is used to insert content and object into your page. It has seven different tabs, and you get different tools on each tab.

Common: This set of object contains most commonly used objects, such as links and Images Layout: This tab include tables, divs, and frames: all objects that let you describe you you want to lay out your page Forms: The Forms set includes form elements such as text fields, buttons, and check boxes. Data: If you’re someday going to work with external data such as databases, that wen you’ll use the Data set The Insert Bar

Spry: New to Dreamweaver, Spry is a JavaScript library for designers and developers that allows them to add rich page functionality using Ajax widgets, such as menus, form validation, and tabbed panels, The spry tab allows you to insert Spry widgets onto your pages, with no coding required. Text: The text tab doesn’t actually contain objects to insert on the page; instead, it lets you style text that’s already on the page. It’s better, though, to just use the Property Inspector (see later) to do this instead.

The Insert Bar Favorites: This starts off empty, but you can modify it to contain just what you’d like it to have. To do this, choose the Favorites set, and then right-click (or Control-click, for Macs). You’ll be presented with a dialog that allows you to add your most commonly used objects

The Document Toolbar Underneath the Insert Bar, and below any document tabs you have open, you’ll find the Document toolbar. It consists of three parts: View mode buttons: These let you choose between Design, Code, and Split views of your document. The page title: Every page needs a descriptive title, and here’s where you’ll change yours. Miscellaneous buttons: These contain everything from a “preview in browser” button, to a button to validate content, to a button to show additional visual aids inside Dreamweaver itself.

The Property Inspector At the bottom of the screen is the Property Inspector. Based on what is selected in the document window, different options appear in this inspector: that is, if you’ve selected some text, you’ll see text options, while if you’ve selected an image, image options appear. The Property Inspector can be used to both view and modify the displayed options. The many uses of the property Inspector will be covered later. In the lower-right corner of the inspector is an expand/collapse triangle. Depending on its current state, this either expands or collapses the inspector. This lets you choose whether you want to display the extra information shown in the bottom half.

Starting Your First Site! Just as in HTML, you will need to create a local root folder. This folder will contain all of the files and folders that make up the site. For example, let’s say that you are building a company site that has two section in it, one for product information (called products), and the other for information about the company (called companyinfo). Each of the two sections gets its own folder. These folders are located inside the local root folder (which in this example we’re calling MyCompany). Because each sections shares some of the same graphic images, there is also an images folder in the local root folder. With one exception, each of the Web pages that you build for the site will go into either the products or companyinfo folder. The exception is the main site page (the one that people see when they load your site in their browsers). That’s called the index page, and it usually just goes in the local root folder.

Building Your First Page Using the New Document dialog The New Document dialog gives you a bit more flexibility than the Welcome screen when creating new documents. Like the Welcome screen, you can create several different types of new documents, plus it allows you to choose the doctype of the new document.

To create a new page from the New Document dialog: 1.Choose File > New, or press Ctrl-N (Cmd-N). The New document dialog appears - set to the Blank page tab 2.Click to choose one of the tabs in the leftmost column. The second column changes to show the available items for the tab you selected. The name of these column also changes to match the name of the tab. 3.Click the item you want in the second column. Dreamweaver has a preview image of the item you selected available, with a description below 4.Click Create.

Titling Your Page The first thing you should do with your new page is to add a title. The title is the text that appears in the title bar of Web browser windows at the top of the window. You’ll enter this text in the Dreamweaver document window. Click in the Title field at the top of the page’s document window

Adding Text to Your Page The blinking insertion point is where you begin to add your text. Click on your page and you should see the insertion point blink. To format the text: You can use the Insert Bar - click the Text tab or you can use the Property Inspector - at the bottom of your page. Apply any formatting you want -just as you would if you were using a word processor.

Adding Images To add an image to your page: 1.In your document, click where you want the image to appear. 2.On the Common tab of the Insert Bar, click the Image button. You can also use the menu at the top of your page and choose Insert and scroll down to Image. 3.The Select Image Source dialog appears 4.Navigate to the image file you want, and select it. Dreamweaver shows you a preview of the iamge in the Select Image Source dialog

Using Page Properties The Appearance category of the Page Properties dialog has the following options: Page font: specifies the default font family your Web pages will use. Dreamweaver uses the font family you specify unless the font is overridden by a CSS style sheet. You can also set the font to be bold or italic Size: sets the default font size. Dreamweaver uses this font size unless the size is overridden by a CSS style sheet. You can choose an absolute size (such as 9, 10, 12, and so forth) or relative sizes, (such as small, medium, large, x-large, and so on). Choosing an absolute size allows you to pick any of the measurement units (pixels, points, inches, cm, mm, picas, ems, exs, and %)

Text Color: lets you set the default color for text. Click the color well to bring up a color picker to help you set the color Background color: lets you set the default color for the page background. Click the color well to bring up a color picker to help you set the color. Background image: allows you to set an image that will appear behind all the text and images on the page. Click the Browse button to bring up the Select Image source dialog, navigate to the image, then click OK (Choose). If you set a background image, it overrides the background colour.

Repeat: sets how the background image will be displayed if it doesn’t fill the whole page. You can choose repeat to tile the image horizontally and vertically; repeat-x to tile the image horizontally; repeat-y to tile the image vertically; or no-repeat to display the image only once. Margins: allows you to set the Left, Right, Top, and Bottom margins of the page. You can use any of the measurement systems as units, as you an with text size.

Links You will find the following options in the Links category - unsurprisingly all affecting how links are Displayed Link font:specifies the default font family your Web pages use to display links. Dreamweaver uses the font family you specify unless the font is overridden by a CSS style sheet. You can also set the fond to be fold or italic Size: sets the default font size for link text. Dreamweaver uses this font size unless the size is overridden by a CSS style sheet. You can choose an absolute size or a relative size. Choosing an absolute size allows you to pick any of the measurement units (pixels, points, inches, cm, mm, picas, ems, exs, and %).

Link color: sets the color to apply to link text. Click the color well to bring up a color picker to help you set the color. Visited links: sets the color to apply to visited link text. Click the color well to bring up a color picker to help you set the color. Rollover links: sets the color to apply to link text when you place the mouse cursor over the text. Click the color well to bring up a color picker to help you set the color.

Active links: sets the color to apply to link when you click the text. Click the color well to bring up a color picker to help you set the color Underline style: sets the way links are underlined. Your choices are Always underline. Never underline. Show underline only on rollover, and Hide underline on rollover

Headings Heading font: specifies the default font family used for headings. Dreamweaver uses the font family you specify unless the font is overridden by a CSS style sheet. You can also set the font to be bold or italic. Heading 1 through Heading 6: allows you to set size and color options for each heading size. The size pop-up menus allow you to set absolute sizes 9sized with numbers, such as 9, 12, 18, and so on) or relative sizes (such as small,medium, or large), and for absolute sizes, you can choose from any of the available measurement units. Click The color well to bring up a color picker to help you set the heading color

Tracing Image Some people prefer to design their pages in a graphics tools such as Adobe Photoshop or Adobe Fireworks. They can then export that image and bring it into Dreamweaver as a background image. It isn’t a background image for the page; rather, it is a guide that you can use as a reference to re-create the same look in Dreamweaver. This guide is called a tracing image. The tracing image only appears in Dreamweaver; it doesn’t show up when you preview the page in a browser.

Tracing image: has a Browse button that, when click, brings up the Select Image Source dialog. Navigate to the image, then click OK (Choose). Transparency: is a slider that controls the opacity of the tracing image. You can set the image from zero to 100% opacity.