1. Web and Multimedia Development Copyright © Genetic Computer School 2007WM 3 - 1 LESSON OVERVIEW  Use of Tables  Creating Tables  Try It – 1  Creating Rollover Images  Try It – 2  Creating Templates  Try It – 3  Creating Editable Regions in Your Template  Try – It 4  Creating New Page from Templates  Try It – 5  Cascading Style Sheet  Try It - 6

2. Web and Multimedia Development Copyright © Genetic Computer School 2007WM 3 - 2 Use of Tables  Tables allow you to organize text (and later, graphics) in columns on a page. Dreamweaver allows you to use tables the same way you use them in word processing programs - to organize information in rows and columns.  You can also use tables to place blocks of text side by side

3. Web and Multimedia Development Copyright © Genetic Computer School 2007WM 3 - 3 Creating Tables  To insert a table, click on Insert > Table on your menu bar or press Ctrl+Alt+T.

4. Web and Multimedia Development Copyright © Genetic Computer School 2007WM 3 - 4 Try It – 1  Create a new page.  Change title to “Worldlinks Travel Pte Ltd.”  Save your file as “worldlinks.htm”.  Press Ctrl+Alt+T to insert table of 2 rows and 2 columns. In the Insert Table dialog box, set the width of the table to 600 pixel, border to 0, cellpadding to 0, and cellspacing to 0.  Select the cells in the first column and on the Property inspector, change the width of the cell to 124 and vertical alignment to TOP.  Select the two cells in the first row and click on the Merge Cell button on the property inspector.  Place your cursor in the first cell and click Insert > Image menu. Select “logo.gif” file form your hard drive and click OK.  Chang the alignment of the image to “Center” by using Property Inspector.  Select the first cell in the second row and change the background color to light yellow color.  Insert one more row at the end of your table. To do this, place your cursor in the last cell of the last row and press TAB key from your keyboard.  In the last cell, type in the copyright information about the page and set the font size to 1.  Place your cursor in the first cell of the middle row and insert a table of 5 rows and 1 column. Set table border to 0, cellpadding to 2 and cellspacing to 0.

5. Web and Multimedia Development Copyright © Genetic Computer School 2007WM 3 - 5 Creating Rollover Images  In the Document window, place the insertion point where you want the rollover to appear.  Insert the rollover by using one of these methods:  In the Objects panel's Common category, click the Insert Rollover Image icon.  In the Objects panel's Common category, drag the Insert Rollover Image icon to the desired location in the Document window.  Choose Insert > Interactive Images >Rollover Image.  The Insert Rollover Image dialog box appears.  In the Image Name field, type a name for the rollover image.  In the Original Image field, click Browse and select the image or type the path of the image you want displayed when the page loads.  In the Rollover Image field, click Browse and select the image or type the path of the image you want displayed when the pointer rolls over the original image.  If you want the images preloaded in the browser's cache so they load faster, select the Preload Images option.  In the When Clicked Go to URL field, click Browse and select the file, or type the path to the file you want to open when a user clicks the rollover image.  Click OK to close the Insert Rollover Image dialog box.

6. Web and Multimedia Development Copyright © Genetic Computer School 2007WM 3 - 6 Try It – 2  Create two graphic buttons (one for on state and one for out state).  Click Insert > Interactive Images > Rollover Image to open Insert Rollover Image dialog box.  Set the attributes as shown in the figure.  Repeat the above steps to insert other rollover buttons.

7. Web and Multimedia Development Copyright © Genetic Computer School 2007WM 3 - 7 Creating Templates  Choose File > Open and select a document.  When the document opens, choose File > Save as Template.  In the dialog box that appears, select a site from the pop-up menu, then enter a name for the template in the Save As box.  Click Save.

8. Web and Multimedia Development Copyright © Genetic Computer School 2007WM 3 - 8 Try It – 3  Open “worldlinks.htm” that we created in Try It – 2 if it is not opened in your editor. We will be using that page as main template for the whole site.  Click on File > Save as Template… menu to open Save as Template dialog box.  Type in the name “maintemplate” in the Save As box and click on Save button close the dialog box.

9. Web and Multimedia Development Copyright © Genetic Computer School 2007WM 3 - 9 Creating Editable Regions in Your Template  To mark regions of the template as editable, open the template and use the editable regions commands on the Modify > Templates submenu.

10. Web and Multimedia Development Copyright © Genetic Computer School 2007WM 3 - 10 Try – It 4  Place the insertion point in the place where you want to mark editable region and select  Modify > Templates > New Editable Region submenu to open New Editable Region dialog box.  The editable region that we are defining is going to be main content area in all of our web pages. Hence we name it “Main” and click “OK”.

11. Web and Multimedia Development Copyright © Genetic Computer School 2007WM 3 - 11 Creating New Page from Templates  Click File > New from Template… menu to open Select Template dialog box.  At this moment we have only template named “maintemplate” so double click on it to select. Now the new file is ready for editing. The template name will appear on the top right corner of your editor window.

12. Web and Multimedia Development Copyright © Genetic Computer School 2007WM 3 - 12 Try – It 5  Place your insertion point in the Main editable region and insert table or 1 row and 1 column. Make sure that table border is set to 0, cellpadding to 5, cellspacing to 0.  Place you insertion point in the new table and insert a picture and make it left aligned so that all the text will align on the right side of the picture.  Type in the content and save it as “flavours.htm”.  Test your works in the browser by pressing F12 key from your keyboard.

13. Web and Multimedia Development Copyright © Genetic Computer School 2007WM 3 - 13 Cascading Style Sheet  Three types of CSS style sheets are available in Dreamweaver:  Custom CSS styles  HTML tag styles  CSS selector styles

14. Web and Multimedia Development Copyright © Genetic Computer School 2007WM 3 - 14 Try – It 6  Click on Windows > CSS Styles or press Shift + F11 from your keyboard to activate CSS Styles panel.  Click on the Option button on the top right corner of the panel and choose New Style option.  On the New Style dialog box, type in the style name as “small” after the dot. Make sure that you have selected Make Custom Style option and click OK to save your style sheet in the new style sheet file. (Save it as “worldlinks.css”).  In the Style Definition dialog box, set the select the Type category and set the font to “Arial, Helvetica, sans-serif”, set the size to 9 points and click OK to complete. Then you will see “small” style in your CSS Styles panel.  Select the tag on your status bar and click on “small” in your CSS Style pannel to apply “small” style to the text inside the tag.