Dreamweaver CS3 Tutorial

Adobe Dreamweaver CS3 Layout

Main Areas in Fireworks: • The Insert bar contains various objects that can be inserted into a document. Each object is a HTML code with various attributes that can be applied. For example, clicking on the Image button in the Insert bar will let you insert an image and apply different image settings into the document. • The Document toolbar contains buttons that let you view the document in different views and buttons that contains common operations such as previewing the page in an Internet Browser. • The Document window displays the contents of the document. It can be switched between three views: code, split, and design view using the buttons in the Document toolbar. • The Panel groups are sets of panels grouped together that can be expanded or collapsed. • The Files panel lets you browse and manage your file and folders on your computer or on a remote server. • The Property inspector lets you view and edit the properties for the select object or text. For example, when you click on an image in the Document window, the settings for the image will appear in the Property inspector to let you view or change the settings. • The Tag selector shows the HTML tag the selected item is enclosed in and lets you select the contents of the tag by clicking on the tag in the tag selector.

Step 1: Setting up a New Site 1. Create a folder in which you will store all your project files. Create an 'images' folder within this ‘project’ folder and transfer all the sliced images to this folder. 2. Open Dreamweaver 3. Define a new site [Site > New Site > 'Advanced' tab] 4. Fill in your Site Name in the box provided for 'Site Name'. 5. Use the yellow folder icon next to the 'Local Root Folder' box to browse for the project folder you have just created. 6. You should be able to see the 'images' folder in your Files panel [Site > Files].

Step 2: Creating a New Template If most of the pages in your web site have the same look and feel it is advisable to create a Dreamweaver template. The advantages of creating a Dreamweaver template include:
• •

All pages will look consistent When you want to make changes that effect the layout of the entire site you can simply make the changes to the template and update all the pages automatically

The Dreamweaver template file has a .dwt extension and will get saved in a folder entitled "Templates". To create a Dreamweaver template follow these steps: 1. File > New 2. Page Type > HTML template 3. Layout - select from one of the pre-built layout options and customize it or select <none> and create your own from scratch

4. Save it as template.dwt. It will get saved in a new "Templates" folder inside your project folder. 5. Set your margins. Modify > Page Properties (Set Left/ Right/ Top/ Bottom margins = 0)

Step 3: Setting up the Page Layout 1. Title Bar: Insert > Table (with 2 columns > 1 row > 780 pixels > cell padding = 0 > cell spacing = 0 > border = 0) 2. Select Table (right click in the table > Table > Select Table). In the Properties Panel set Align = Centre. 3. Click in the 1st cell > Insert Image > browse to images folder > select logo.gif > type alt tag = logo. 4. Add a Search Box: You can adjust the width of the 2 cells. Click inside the 2nd cell. In the properties panel set Align = right. 5. Add a form with form field [ Insert > Form. Then click inside the form outline that will display and Insert > Text field]. Give the Text field the ID ‘Search’, it doesn’t need a label. 6. Add a form button to the form beside the form text field [Click inside the form outline and Insert > Button]. Give the Button the Value ‘Search’, and an ID ‘Search’, it doesn’t need a label. 7. Menu Bar: Click outside the table. Insert another table (1 row/ 1 column/ 780 pixels/ cell padding = 5/ spacing = 0 / border = 0) 8. To set the background colour of the table, in the properties panel, click on the box with the little triangle next to "Bg color" and use the eyedropper tool to pick a colour. 9. Click inside the table. Enter the Menu buttons text [Home | About | Products | Contact ] 10. Insert spacer: Create another table (1 row/ 1 column/ 780 pixels/ cell padding = 0/ spacing = 0 / border = 0). Insert a transparent spacer image (1x1 pixel). The table will collapse to 1 pixel height. Select the image and align centre. Since we want it to be white we won't put a background colour. This will be a white line. 11. Insert Line under Menu: Create another table (1 row/ 1 column/ 780 pixels/ cell padding = 0/ spacing = 0 / border = 0). Use the eyedropper tool to pick a background colour. Insert the spacer image. Select the image and align centre. The table will collapse to 1 pixel height. It will be a coloured line. 12. Content Area: Insert another table (1 row/ 2 columns/ 780 pixels/ cell padding = 5/ spacing = 0 / border = 0). Select table and align = centre in properties panel. 13. Click inside the first column in the table. Insert > Template Objects > Editable Region > name it ‘content’. Add another editable region to the second column, name it ‘content2’. 14. Footer Line: Insert another table (cell padding = 0). Give it a background colour and insert the spacer image. 15. Footer: Insert another table (cell space = 5 px) 16. Click inside the table. Align = centre in properties panel. 17. Type in footer text (copyright 2007 site name) and format it (size and colour)

Step 4: Creating CSS Stylesheet CSS Styles help in consistency and maintenance. It is a good idea to centralize the text styles as much as possible in order to maintain consistency and easy updating. To create an internal stylesheet: 1. In the CSS window [Window > CSS Styles], select the New CSS Rule icon

If you want to create a custom style which can be applied to any tag: 1. Select the selector type "class" 2. Name it with a "." at the beginning like .heading 3. Define in: styles.css (or the name of your css file)

If you want to redefine the look of an existing html tag: 1. Select the selector type "Tag" 2. Select the Tag from the drop down menu e.g. "h1" 3. Define in: styles.css (or the name of your css file)

Select: 1. New CSS Rule > Tag = H1 > Select a colour and size = 20, and font = Arial, Helvetica, Sans-Serif and weight= bold 2. New CSS Rule > Tag = body > Size = 12 and font = Arial, Helvetica, SansSerif 3. Add any additional stylesheets you would like.

To create an external stylesheet: 1. File > New 2. Page Type > CSS 3. Save the file in the project folder. You can name it 'styles' or any appropriate title. It will get saved as a .css file.

Once you have created the css file you will need to attach it to the dreamweaver template file you have created. You can do this from the CSS Styles panel [Window > CSS Styles]. Click the icon (attach style sheet), select the css file and click OK.

Step 5: Setting up Individual Website Pages 1. Home Page: Create new html page [File > New > Page from Template > Project > template > Create] and save it as "index.html". 2. Content: Type in the textual content into one of the editable regions on the main body of the page. Select the heading text and select 'Heading 1' from the 'Format' dropdown in the Properties Panel. This will style the heading as per the H1 css style created earlier. 3. Insert image: Insert the 2nd image into the other editable region and give it an alt tag. 4. Click image. Set align = centre in the properties panel. 5. Type 'Home page' in the document title (at the top of the document window). 6. Type in the keywords for the page [Insert > HTML > Head Tags > Keywords] 7. Type in the description for the page [Insert > HTML > Head Tags > Description] 8. Additional Pages: Make copies of the index.html file (from within the 'Files' panel - if not visible on the left go to Window > Files) and rename them to about.html, products.html and contact.html. 9. Put the appropriate headings, content text, title, keyword and description tags, and images into these 3 new pages. Step 6: Linking and Previewing the Pages 1. 2. 3. 4. 5. Go into template.dwt to link the pages from the menu. Select the text "Home" Click on the folder icon next to the Link field in the properties panel. Browse to index.html and select it. You will see an underline appear below “Home” and it changes to a blue colour. 6. Click anywhere within “Home” and click the <a> tag that is visible at the bottom of the document window. 7. Change the colour and font properties, notice the style name that is created as you will need to apply the same style to the other 3 menu items. 8. Link and apply the same style to the other menu items. 9. Save the template and the pages will be updated automatically. 10. Right click on index.htm > Click preview in Browser > Select Internet Explorer or Firefox > View your site in the browser > check to see if all the links are working.