Dreamweaver is a Web page design program that lets you type text and add media elements directly into a page, much as you would with a word processing program like Microsoft Word. Dreamweaver converts your text and graphical page design into the HTML code read by a Web browser. What you see on your screen as you create a Web page in Dreamweaver also will be very close to what the page will look like when viewed in a Web browser, making the design of your page more intuitive.The layout may appear somewhat different depending on whether you're using Windows, Mac OS 9, or Mac OS X. The screenshots here show Mac OS X, but the principles and functionality remain constant across platforms.If you don?t see the Properties panel (shown above at the bottom), in the Dreamweaver menu at the top select Window...Properties. You also can deselect any other toolbars or palettes that are checked in the Window menu to remove them from your screen, thus reducing clutter. Alternatively, select Window...Hide Panels to get rid of all the toolbars and other panels. The main section of the screen is a blank canvas on which you create your Web page by typing in text, applying formatting, and laying out page designs.The Properties panel is used to automate the process of formatting and aligning text and adding hyperlinks.Dreamweaver helps you do more than just create and edit Web pages -- it also vastly simplifies the process of managing web sites. For example, if you ever rename a page or folder on your site, Dreamweaver will automatically update links to that page or folder on all your other HTML pages so the links aren't broken. Dreamweaver also will help keep a site on your Web server in sync with a copy of that site you may have on your hard drive. In order to accomplish this, you need to tell Dreamweaver a few things about your site's configuration, a process called "defining" a site. This is the first thing you should do when starting work on a new site. Getting OrganizedBefore defining a site, you'll need to create a folder on your computer (or on a portable storage device such as a Firewire drive) where all of the final HTML pages, graphics, audio, and video components of your site will reside. You'll also want to keep close at hand the raw materials you use to create the pages and media for your site. Let's say you want to create a Web site called "Mixed Nuts" in a folder on your Desktop.Minimize Dreamweaver and create a new folder on your Desktop named:Mixed Nuts SiteThen inside this folder, create two subfolders, one called site and another called source. The source folder is where you'll put the raw materials you're working with - uncompressed audio or video, Photoshop files etc. It's also a good idea to keep these materials organized in separate subfolders, such as images, video or audio. This material will not be uploaded to your web server, but it's convenient to keep it close by and all under one roof. Good housekeeping is essential to a successful Web project. The site folder is where you'll keep your final HTML pages, compressed video, and so on that will go onto the Web serverc. Only files that you want on the public to see on the Web sever will be in this folder.You may want to create subfolders inside of the site folder named for sections of your site. For example, you may want to have separate folders for products, services, and brochures. In some cases, you may want separate folders for different types of media, such as images, video or audio. The nature of your site will dictate the most logical folder structure. So for the Mixed Nuts site, you might have a folder structure that looks like this: Give your site an intuitive name that will help distinguish it from other sites you may have defined on the same computer. For example, you might call this site Mixed Nuts.Next, click the folder icon to the right of the Local Root Folder field and navigate to and select the site root you set up earlier, which in our example is:Desktop:Mixed Nuts:site The Default Images Folder is where Dreamweaver will first look for images to be included in your site. If you haven't already, create an images subfolder inside of the site folder, then use this dialog to navigate to and select that folder. The HTTP Address is where the final site will live on your server on the Internet. Paste or type in the full address, if you know what it is. If not, leave it blank for now.Next, select the Remote Info entry in the list at the left. This is where you tell Dreamweaver how to transfer finished Web pages from your computer to your Web server. You'll either be accessing the remote files via File Transfer Protocol (FTP), such as if you're working from home, or over a network (LAN), such as if you're working on a network connected to the Web server. If you don't know this information already, ask your systems administrator. If you're working with a commercial ISP, you should find documentation on their Web site about how to access their FTP server. The information needed is quite minimal: server name, login or user name, password, and an optional "host" or starting directory. (You also can leave these entries blank for now, build your Web site on your computer and then fill in the Remote Info fields later when you're ready to upload your site to the live Web server)Although the advanced tab of the Define Sites panel has many more options, this is enough information to get started with Web page creation. Opening a SiteNow that your site has been defined, you can return to it at any time to work on it by selecting it in Dreamweaver. To do this, in the Dreamweaver menu at the top select Site...Open Site...Mixed Nuts (or whatever name you've given to your site). And if you've created and defined multiple sites on you computer, you can easily toggle between them using the Site...Open Site menu.(Note: if you're going to be working on your site using more than one computer, such as in a lab with shared computer workstations, you'll have to go through this process of defning your site on each individual computer you use)To create a Web page, begin by simply typing into the blank untitled document on the main Dreamweaver screen whatever text you want displayed in a Web browser ? just as you would create a document in a word processing program like Word. As you enter text and other elements on the page, Dreamweaver will automatically construct the appropriate HTML code in the background so it displays properly on a Web browserTry typing some words into the Dreamweaver screen, such as:To see the HTML code that Dreamweaver has created behind the scenes, click on the Show Code View icon in the far upper left corner (circled below). Or in the menu at the top select View...Code.Now save the page by selecting in the menu at the top File...Save (or use the Cmd-S (Mac) or Ctrl-S (Windows) hotkeys, which work in all applications, all operating systems). In the box that appears, navigate to the drive and folder where you want your file stored (such as the site folder you defined for Dreamweaver to store your Web files). You'll use this same folder (and subfolders within it) to store all of your HTML files, images, audio, and video. That way you can move all the files in this folder to a Web server later.Give your Web page a name (index.html is the preferred name for the main or home page of a Web site), make sure the name ends in .html, and click on Save.Previewing Your DocumentDreamweaver gives you a pretty good idea of how your page is going to look in a Web browser, but remember that Dreamweaver is not a browser. To see how your page really looks, in the menu at the top select File...Preview in Browser...Internet Explorer (the hotkey for preview in the system's main browser is F12, a good hotkey to remember, as you'll be using it frequently). Your document then will be launched in Internet Explorer so you can see how it looks in a real browser. Your simple test document will probably look the same in Dreamweaver and in the browser, but as documents and layouts become more complex, differences become more apparent.A complex page also will display differently in different browser (Explorer, Netscape, Safari) and on different operating systems.So you should test your pages in a variety of browsers on both Mac OS and Windows before going live!You can easily change the format of text you've written by highlighting it with your mouse and then using the options in the Properties panel. For example, in the Properties panel you can click the:B button on the right to make your selection boldface. I button on the right to display the selection in italics. Note that bold and italic text can also be set via the familiar Cmd-B and Cmd-I (Mac) or Ctrl-B and Ctrl-I (Windows) shortcuts you're accustomed to using in other word processing programs. Font style arrow in the middle - labeled with a large A and initially displaying Default Font - to pick a particular font for your text, such as Arial, Times New Roman, Courier, etc. (each individual font style also has alternate entries for similar fonts - such as Arial, Helvetica, sans-sarif. This is for instances where a browser is not set up to display the font style you selected. The browser then will go to the next font entry - such as from Arial to Helvetica - until it finds a font it can display) Format arrow on the left (initially displaying Paragraph or None) for use with headings or subheadings on a page that you want in different font sizes. Heading 1 is a very large font size, while Heading 6 is a very tiny font size. Size arrow in the middle - initially displaying None - to increase or decrease the size of text (such as a paragraph of text, rather than a heading or subheading). You can pick a size either by selecting 1 though 7 for basic sizes (with 7 being very large and 1 being very small), or by selecting +7 through ?7 for a wider selection of text sizes (with +7 being very large and ?7 being very small). Text color box to change the color of the highlighted text by picking a new color from the color pallette. The text color box is the tiny gray box just to the right of the Size arrow. Align Center button (the third button in from the far right) to center the text on the page. Text Indent button (just below the centering button on the far right) to indent a block of text to the right. Ordered List and Unordered List buttons (just to the left of the indent buttons on the far right) to create numbered or bulleted lists of text. You use the Properties panel to add hyperlinks to a Web page. First highlight the words you want to appear as the link on a Web page.Then type (or, preferably, paste) the Web address to which you want those words to link in the Link field of the Properties panel.In the Link field you can either:Type or paste in a full Web address (URL), beginning with http://, to point to any page on the Web Type or paste in the name of a file you've created that's in the same folder as this file (or, if the file is in a subfolder, type in the name of that subfolder and then the file you want to link to, such as subfolder/otherfile.html, which would link to a file called otherfile.html that is in a folder called subfolder). Click the folder icon to the right of the Link field and navigate to the destination file you want to link to (before you do this, be sure you?ve named and saved the page you?re currently working on, so Dreamweaver will know where this page is relative to the one you want to link to). Then press the Enter key on your keyboard.You'll see the words you selected are now highlighted in blue and underlined - like a hyperlink that appears on a Web page.
