- Worldstart's Tech Tips Newsletter - http://www.worldstart.com -
A Beginner’s Guide to Dreamweaver
Posted By On February 23, 2007 @ 1:47 PM In Multimedia | Comments Disabled
A Beginner’s Guide to Dreamweaver
What is Macromedia Dreamweaver?
Dreamweaver is a WYSIWYG (what you see is what you get) Web editor. It’s called that essentially, because everything you see while creating your Web page will appear exactly the same on the Web. In other words, you won’t have to fool with messy HTML codes, which can be much more complicated. This software will allow you to quickly code and design your page by dropping, dragging and inserting objects and properties. Dreamweaver is similar to other WYSIWYG editors, such as FrontPage, but it gives you (the Web designer) much more freedom.
You can download a trial copy of Macromedia Dreamweaver from www.macromedia.com. You can also buy the software from Amazon.com or any physical store where software is sold, such as CompUSA.
Keep reading to find out how to get started building a simple Web page, from scratch, using Dreamweaver.
Start things off with a blank template. Choose HTML under the Create New column.
You should see a screen that resembles the picture above. I would suggest only working in the design mode. You will know if you’re working in the design mode if the Design tab toward the top of the screen is pressed (as it is above). If you press Split, it will show you the design and the HTML code on top of each other, which can be confusing. If you press Code, it will only show you the HTML code.
So, let’s start building your page. Say you want a basic three column Web site that resembles something like this:
Here’s how to build it.
First, let’s choose our background color. To do this, you need to make sure the Properties window at the bottom of your screen is open. If yours isn’t, click the downward pointing arrow, as shown above in step 1. Once that pops up, you’ll want to click the Page Properties button (step 2). Now, the page properties window should show up in the middle of the screen. As shown in step 3 above, locate the words Background image with a square and a text field next to it. Click the arrow in the bottom right hand corner of this box. You should see another, smaller window appear with a wide array of colors. Here, you may choose any of these preselected colors for your background.
You might decide you want to create your own custom color as well. To do so, click the second button to the right of the words System Color Picker. You will see another color window appear, like the one in the bottom right corner of the image above. Simply move the cross hatch on the color grid to choose a shade of your liking. When you have one selected, click the Add to Custom Colors button and then hit OK.
You will need to hit Apply and OK on the Page Properties window as well.
Now, before you can add any pictures or text to your page, you need to set up the basic structure of your Web page. Many Web pages use a two column structure or a three column structure (sometimes more!) I’m going to show you how to work with a basic two column structure, which seems to work well for most Web pages.
To create tables, you must get to the Table window. There are two ways to get there. One is by going to Insert, Table on the toolbar (like in the first screenshot above). The second is by clicking the Table button (like in the second screenshot).
Both ways will bring up a window that looks like the one in the bottom right hand corner of the screenshot. To create a two column table with a header, enter the number 1 in both the Rows text areas and the number 2 in the Columns form fields under Table Size. This tells the software how many cell blocks wide and long to make your table.
Next, you’ll want to set the Table Width in pixels. 200px (px is an abbreviation for pixels) is a bit small, so I suggest changing this value to 600, which is commonly used. Underneath the Header section, select Top. Lastly, enter in the title of your Web site next to Caption (under Accessibility) and you can also add a summary of your page if you would like.
Your tables should resemble mine, as pictured above. The dotted lines will not appear on the Internet when you publish your page, so don’t worry. They are simply there to guide you.
The area in between the dotted lines are where you will place your content. This area is also called a cell block.
You will probably want to change the size of your header to make it stand out. You can do this by highlighting the words with your cursor, clicking the arrow next to Size in the Properties window at the bottom of your screen. Then, select a size from the drop down menu. I recommend choosing a number above 12.
Once you’ve clicked the number or font size you want, it should immediately change on the editing screen.
Next, you will probably want to make one of the cells of your tables narrower than the other. The narrow side would be for links and navigation, while the wider side would accompany your site’s content. You can do this by, first, placing your cursor inside the cell. Next, find the letter W with a text area next to it in the Properties window at the bottom of your screen. Here you will type in the width that you want your cell block to be. Since we chose to make our tables 600 pixels in width, 200 pixels would be a good balance for the left table.
Now, for the fun part! You can start decorating your page by adding pictures and text. First, I will show you how to add a picture.
To add an image to your Web page, select Insert, Image in the toolbar at the top of the page. This should bring forth the Select Image Source window. You will need to find the picture you want amongst your files, highlight it with the cursor and click the OK button.
If your image did not end up where you wanted it to be, simply drag and drop it into the correct space. You can do this by clicking the image and while still holding down your mouse, slide the arrow to the desired space and release.
Once your image is in the correct frame, you may also want to change its position. To center the image, use the Align Center button, as circled in the picture above. Make sure you’ve selected the image before doing this by clicking it once with your mouse.
Now, how about adding some text to your page? First, you’ll need to make a little bit of space below the image. You can do this by clicking in the space right next to the picture and hitting the Enter button. Now that your cursor shows up below the image, start typing away!
You can use any of the buttons circled in red in the Properties window to edit the look of your text. The thick B is for bold, the I is for italics and the other buttons align your text to the right, left, center or justified. It’s all very similar to using Microsoft Word or a comparable program. Simply highlight the text you want to modify to do this.
Now, it’s time to add links. You can use the linking tool to link to other Web pages, other sections of your Web page or even your e-mail address. To do this, start by typing what you want your links to say (this means, what you want your visitors to see. Not necessarily the URL).
Drag the cursor over the first word or phrase that you want to make into a link. Then, in the Properties window at the bottom of the page, find the word Link with a wide text area next to it (step 2 in the picture above). Type the Web address to the page of your choice in this area. You should see a line appear underneath the word or phrase you highlighted earlier and it should also change to a shade of blue.
The final step of creating your Web page is to put the final touches down. This means, changing the colors and fonts on the page to suit your liking. You can do this by clicking the Page Properties button once again in the Properties window. By using the Appearances tab, you can change the font of the entire page at once by choosing one from the drop down menu next to Page Font. You can also change the color of your text and add a background image if you wish.
You may also want to change the colors of your links. To do this, click the Links tab on the left hand side of your Page Properties window. This works basically the same as choosing the background colors for your Web page. Click the arrow in the corner of the box next to the words Link color and choose your preferred color from the color grid. Repeat this process for Visited links, Rollover links and Active links.
Voila! Your Web page is now complete. Now, all you have to do is publish this to your Web host and you’re good to go. Yes!
~ Kimberly Lawson
Article printed from Worldstart's Tech Tips Newsletter: http://www.worldstart.com
URL to article: http://www.worldstart.com/a-beginners-guide-to-dreamweaver/