Site Structure and Content

In this chapter, you start to add some content to your pages. You can add text, images, hyperlinks, and other things.

Importing Text

1. Open the File menu and select Import, then Word Document.
   
2. In the Open dialog, browse to the location of the document and click Open.
   
3. Dreamweaver loads the contents of the document into the current page.

OR

You can add your contents directly to Dreamweaver by switching over to Design view in the site panel. You can format text with the help of property inspector as shown in Figure-3.1.

Figure-3.1

Adding Characters

1. Place the cursor where you want to insert the special character.
   
2. Open the Insert menu and select HTML, and then Special Characters.
   
3. From the Special Characters submenu, select Other.
   

In the Insert Other Character dialog, click the character you want to insert and then click OK as shown in the Figure-3.2.

Figure-3.2

Inserting Graphics

To insert Graphics, Go to Design view. Open the Assets panel and make sure that the image icon is selected as shown in the Figure-3.3.

Figure-3.3

Select the image you want to insert, drag it onto the Design view of the file and drop it. Use handle to resize the image proportions. An alternative way to adjust the image is using the Tag Editor Dialog box. Select the image and then choose Modify --> Edit Tag as shown in given Figure-3.4.

Figure-3.4

The tag Editor advises you as to browser compatibility.

You can also insert your picture from Insert menu. Go to Insert --> image. This time you will use the Property inspector to align the image to the right, and then resize the image till you are satisfied with it.

Save your work and preview it in the browser.

How to add Rollover Effect

From the menu bar, Select Insert --> Image Objects --> Rollover Image. This brings up the insert Rollover Image Dialog box. Enter the values shown in Figure-3.5 into the fields in this dialog box. Use the Browse buttons provided to enter the values of the original Image, Rollover Image and when clicked fields.

Figure-3.5

Notice that the file names of all your images files do not contain spaces. When you have done all that, click Ok.

Inserting and Formatting Tables

Tables let you precisely control the position of elements in your web pages. To design a page using a table, you insert the table first, adjusting it as necessary to define the layout of the page. Then you insert text, images, and other elements into the individual table cells. On the Insert bar, click the Table button. The Insert Table dialog opens.

Figure-3.6

Enter the specifications you want in the table and Use the Header section to specify the location of the header contents in your table. If you think the table looks a little too cramped, you can adjust its size by clicking on any inner cell-border and drag it to the position you want. You can also enlarge the whole table by selecting <table> in the tag selector.

You can Choose Commands --> Format Table to format the table as shown in the Figure-3.7.

Figure-3.7

Here you can select a predefined format for your table, or even design you own formatting. Select colors and select which rows you want those colors to appear in. In addition, you can adjust the Align attribute and Border size here.