In part one of this series, I discussed the basics of WYSIWYG (What You See Is What You Get) HTML editors and how to get started with Dreamweaver, which I believe is one of the best HTML editors on the market. For a look at the first article in this series, click here. This week’s lesson focuses on making your Web site interact with its visitors. We’ll start with hyperlinks.
To make a portion of text link to another Web page or Web site, highlight the text that you want to become a link, and choose Modify | Hyperlink | Make Link. You could also hit [Ctrl]L after the text has been highlighted. However, an even easier way is to use the toolbar displayed in Figure A. After highlighting the link, just type in the name of the HTML document or Web site to which you wish to link, or click on the little folder next to the Link field to navigate to another HTML document.
|Use this toolbar to make the text you highlighted a link.|
Let’s say that upon clicking a link in the Web browser, you want that Web site to open in a new browser window, leaving the original page in the background. To accomplish this, choose the Modify | Hyperlink | Target Frame | _blank option (it’s even easier to choose _blank from the target pull-down menu next to the Link field in the toolbar). This technique proves to be very useful if you are creating a Web page for a company that links to another company’s Web site. By using the _blank target frame, you can ensure that your company’s Web site is still in an open browser window in case the person viewing the Web page wants to go back to it later. (The power of suggestion really works!)
Now we’ll move on to what you’ve probably all been waiting for—an easy way to put tables on your Web page.
- Place your cursor where you want to insert the table.
- Go to Insert | Table. A window will pop up asking for table information such as the number of rows, columns, and so on.
- Simply choose how many rows and columns you want and how big you want the border to be (if you don’t want a table border, then choose 0 for the border option).
- Abracadabra—it’s done!
Put whatever information you want in the various rows and columns. If you want one column larger, just place the cursor over the line, click, and drag until the dimensions satisfy you. Don’t worry if you have chosen a table border of 0 and it still appears that there are lines for borders. These lines only appear so that you can see into which cells you are putting the information. These lines will not appear in the final product (sometimes what you see isn’t always what you get with WYSIWYG editors).
Inserting an image in Dreamweaver is just as easy as inserting a link. Place the cursor wherever it is that you want the image to appear. Choose Insert | Image. Find the image you wish to insert, select it, and the image should appear on the screen.
Notice that now your toolbar has changed slightly. You now have information such as how high and wide the image is and the source (src). You can turn your image into a hyperlink as well by using the Link field on the toolbar. Just name the Web page or Web site in this field, and your image will also double as a link.
Also note the Align and Alt options in the toolbar. Dreamweaver is set up so that the image will automatically align to the default of the browser (usually left). If you wish to change this, just make a selection from the Align option’s pull-down menu.
Whatever you type in the Alt field will appear in a little yellow pop-up box when the mouse is hovering over the image (in most browsers). This might come in handy if you do decide to make your image a link. You could put something to the effect of “Click here to go to my favorite Web site!” in the Alt field to let the viewer know that clicking on the image will take them to another site.
Checking out the code
Now that you can handle the basic operations of Web design in Dreamweaver, you can begin to understand how powerful a tool it can be.
But let’s say that you are in this situation. You are trucking along, designing your Web page, and you want to do something that you know how to do in HTML code, but can’t remember where the option is in Dreamweaver. In this situation, you can edit the actual code, and be on your merry way.
There is a little symbol at the bottom of the Dreamweaver window that will make another window appear where you can edit the HTML code of the document. Make whatever code fixes you want here, and click the small X in the right-hand corner of this new window. The changes are automatically made.
|Click here to display the HTML code.|
This option also comes in handy if you are trying to learn HTML and are using Dreamweaver as an HTML dictionary. Let’s say you want to know how to code a table in HTML. Open up a new document in Dreamweaver. Insert a table, and then check the code. This way, you get to see the code that makes up that table. It is a great way to learn HTML.
What you see isn’t always what you get
Always check out what your Web page is going to look like in the browser until you are completely satisfied with it. As I have stated in the past—what you see isn’t always what you get with these WYSIWYG editors.
You can check out what the HTML document is going to look like by choosing the File | Preview In Browser option (or by hitting F12, my personal choice). This way, you will know exactly what your Web page will look like when it’s up and running.
That’s all for this lesson. Join me next week when I will wrap up this series with a few more tips about Dreamweaver and show you how to make some cool layouts with tables within tables.
Tune in next week for the final entry in this three-part series, where Jason finishes up with hints on Web page layout and goodies to make your site stand out. If you'd like to offer your take on this article, please post a comment below or send us an e-mail.