Taking Fireworks Template and Applying it to Dreamweaver

Transcription

1 Taking Fireworks Template and Applying it to Dreamweaver Part 1: Define a New Site in Dreamweaver The first step to creating a site in Dreamweaver CS4 is to Define a New Site. The object is to recreate the environment of your remote server (where you will ultimately host or make your site live for the world to see) on your computer (where you will actually work on your site). To define a site in Dreamweaver CS4: Open Dreamweaver CS4 Click on Dreamweaver Site under the Create New Section of the screen that is displayed.

2 In the Site Definition screen that shows up, give your site a name. In this case I have given it the name BusinessSite. Click the Next button.

3 Select that you do not want to use any server technology. Click Next. Select that you want to edit local copies on your machine and upload to server when ready. Select (or create and select) the folder where you want to save your files. Click Next.

4 Select None from the How do you connect to the remote server drop down. Click Next. Review your site definition settings. Click Done. You will see the new site defined in the Files Panel. All the files you create will be stored here and can be easily accessed from here. Also all links to pages and images etc. will be relative to the folder defined in the site.

5 Part 2: Create a Template in Dreamweaver Creating a template in Dreamweaver CS4 will form the basis of your website. It will give your site a consistent look and make it easy to manage. Using the layout you designed in Fireworks as a basis we will recreate it in Dreamweaver as html files. From the Dreamweaver Menu select File > New Select Blank Template > Template Type: HTML Template > Layout: none You will get a blank document. Save it [ File> Save].

6 You will get a message that the template does not have any editable regions. This is ok. Give it a name. I have given it the name template. If you look in your Files panel you will see that your template has been saved as template.dwt within a new folder entitled Templates

7 Part 3: Design your Template in Dreamweaver We will now design the template in Dreamweaver CS4. The layout we designed in Fireworks CS4 is shown below: We will need to recreate this layout in Dreamweaver. Some portions will need to remain images e.g. gradient backgrounds, rounded edges, special fonts like those used in the menu and the logo. These images have already been created, sliced and exported from Fireworks as web optimized images and are available for use within the images folder. To design the layout within the template file: Select Insert > Layout Objects > Div Tag

8 In the screen that opens up type the name header against ID. We are creating the header area with the gradient background and the logo. Click the New CSS Rule button.

9 In the New CSS Rule screen that appears, #header will already be typed in. Select the New Style Sheet File from the Rule Definition drop down menu. Click OK.

10 Give the stylesheet name styles. Click Save.

11 Part 4: Design the CSS Style Sheet Now it is time to specify the styles for your header div tag. In the screen that opens. Select Background. Browse the header background image.

12 Select Box. For the Width, type 100 and select % from the drop down. For the Height type 94 and select px from the drop down. Click ok. You will come back to the Insert Div tag screen. Click OK. In your template page you will see the header div displayed with the background image and the height/width specified in the css style sheet.

13 You will see that there is a white margin around the header div. This is because html pages have a default margin/ padding. To remove this we will give new properties to the body tag within the css stylesheet. To do this: Bring up the CSS Styles panel [Window > CSS Styles] Click the New CSS Rule icon at the bottom. Choose the following: - Selector type: Tag - Selector Name: body - Rule Definition: styles.css

14 Click OK

15 In the CSS Rule Definition screen that opens, select Box and type 0 for both Padding and Margin. Click OK. You will see that the header is now sticking to the top, left and right of the screen in template.dwt. The default margin and padding has been removed.

16 Part 5: Insert Images Now it is time to insert the logo image into the header div using Dreamweaver CS4. Select and delete the default text that is inserted by Dreamweaver when creating a div Content for id header Goes Here. Insert > Image > browse and select the logo image. In the screen that appears, enter alternate text describing the image. e.g. BusinessSite Logo. Click OK. You will see the logo image appearing within the header div. We have now completed the header portion of the template.

17 Part 6: Creating the Menu Let us now work on the menu area. To do this, let us create a new div called menu with the accompanying css rule. We first need to point the cursor immediately after the header div. We can do this in 2 ways: 1. The first way is in the design view: Select the header div by clicking anywhere inside the header area and clicking on the div#header tag that appears at the bottom of the screen. The header tag area will get highlighted. Click the right arrow key of your keyboard to move the cursor immediately after the header div. 2. The second way is in the Code View: Click on the Code View button. Find the code for the header div and place your cursor right after the closing div </div> tag. Once you have place your cursor in the right spot, insert a div named menu. Insert Layout Objects > Div Tag ID: menu

18 o o o o o Click New CSS Rule button Selector Type: ID Selector Name: #menu Rule Definition: styles.css Click OK. In the CSS Rule Definition for #menu screen give the following properties: Background> Background- image: images/menu-bg.jpg o Box > Width: 100% o o Box > Height: 32px Click OK Insert Div Tag screen > Click OK. You will see the menu area with the background image and width/ height specified appearing in template.dwt. Delete the default content inserted within the menu div and insert the 4 menu images Home, About Us, Services, Contact Us. The menu div is now complete. We will link the menu images later after we create all the required html pages.

19 Part 7: Content Now let us create the content area and a space for the submenu area on the left. We will create a div for these 2 areas combined called middle and then individual divs for the submenu area called submenu and the content area called content within the larger middle div. The middle div: Place the cursor after the menu div Insert > Layout objects > Div Tag > ID: middle Click the New CSS Rule button > Click OK CSS Rule Definition for # middle: o Box > Width: 100% o Click OK Insert Div Tag screen > Click OK The submenu div: Delete the default text in the middle div Content for id middle Goes Here Make sure your cursor is still within the middle div tag. Insert a div called submenu In the Rule definition for #submenu specify the following: o Box > Width: 25% o Box > Float: left The content div Position the cursor after the submenu div. Make sure your cursor is still within the middle div tag. Insert a div called content In the Rule definition for #content specify the following: o Box > Width: 75% o Box > Float: left

20 The submenu and content divs will appear side by side. We will work on the submenu area later. The content in the content area will differ from page to page so we will make this a Dreamweaver Editable Region in the next step. You will notice that the default font used is Times New Roman which does not look very nice on the web. We can change this default font by editing the redefined body tag within our styles.css stylesheet. Open the CSS Panel [Window > CSS Styles] Select the body style and right click > Select Edit

21 In the CSS Rule Definition for body screen select Type and specify the font-family Arial, Helvetica, sans serif and the font-size 14 px. Click OK. You will see that the fonts change for all the text on th page. The footer div

22 Now let us complete the basic layout by creating the footer area as well. Make sure your cursor is right after the middle div Create a new div called footer Give the #footer style rule the following properties: o Box > Width: 100% o o o o o o Box > Height: 33 px Box > Clear: both Block > Text align: Right Background> Background-image: footer-bg.jpg Type > Color: #FFF Click OK In the document window you will see the footer area with the background image and other properties specified in the stylesheet. Replace the default footer div text Content for id footer Goes Here with 2009 Company Name. All Rights Reserved. Your basic layout template is ready. Save your template and styles.css stylesheet. [File > Save All]

23 Part 8: Insert Editable Regions Now it is time to insert editable regions into the Dreamweaver template. Since the content area will differ from page to page we will make this area an editable region. Select and delete Content for id content Goes Here from within the content div. While the cursor is still within the content div: Insert > Template Objects > Editable Region

24 Give the New Editable Region a name like content The editable region will be hightlighted within the template

25 Part 9: Template Based Web Pages Now that our Dreamweaver template is ready in we can create the pages of our website easily. Let us begin with the Home Page. The home page file is usually named index.html. Your remote hosting server will recognize this file as the home page and display it when your domain name is called up. To create a page from the template: File > New Page From Template > BusinessSite > template Click the Create button Save the file, naming it index.html

26 Type in your home page content into the content editable region. Replace the default text Untitled Document in the title area with appropriate text for your page title e.g. BusinessSite Home Page. This is what will appear in the top blue bar of your browser.

27 Once you are done, you can view how your page will look in a browser. To do this go to File> Preview in Browser > Choose the browser you want.

28 Part 10: Formatting Headings Next we will need to format the headings and subheadings within the content. To do this, go back into the Dreamweaver document window and select the heading text. Apply the Heading 1 tag to it by selecting Format > Paragraph format > Heading 1. Similarly for the subheadings, select the subheading text and apply the Heading 2 tag to it [Format > Paragraph format > Heading 2].

29 Styling our Headings and Subheadings Now let us style the Heading 1 and Heading 2 tags to match the look we created in our layout. To do this we will need to create a new style rule for the tags H1 and H2 in our styles.css file. We can do this from the Properties Panel as well by clicking on the Edit Rule button. In the New CSS Rule Screen that opens up select the follwing: Selector Type: Tag Selector Name: h1

30 Rule Definition: styles.css Click OK In the CSS Rule Definition for h1 screen give the following properties: Type > Font-size: 18 px Type > Color: #D6130A Click OK

31 Similarly define the style for the H2 tag. Your page will look like this:

32

33 Part 11: Formatting Images Now we need to insert the image into the content. To align it as designed in our layout follow these steps: Click at the beginning of the 2nd paragraph Insert > Image > browse and select picture.jpg The picture will get inserted at the beginning of the 2nd paragraph. Select the picture and select Right from the Align drop down in the Properties Panel The picture will now align to the right and all the text will wrap around it neatly. If we don t want the text to touch the image we can give some horizontal spacing. To do this, select the image and enter the value 10 next to H Space in the Properties Panel.

34 Preview the page in the browser and save all the files. We have now completed creating our home page.

35 Part 12: Linking Pages Now create the remaining 3 pages and link them up in Dreamweaver CS4. Create the following pages: about-us.html, services.html and contact-us.html the same way you created the index.html page. Insert the appropriate content, images, title tag, headings and subheadings for each. You will see all your pages in your Files Panel [Window > Files]. Linking the pages: When we click on the menu buttons at the top of the page we want the appropriate page to be displayed. Since the menu is in all the pages we have kept this in the template and when we update it here all the pages will be updated. To link the pages from the menu: Open the template file (template.dwt). You can open it from the Files panel you will find it in the Templates folder. To link the Home menu button, select the Home image and link it to index.html within the Properties Panel. Click on the folder icon next to Link, then browse and select index.html. Enter the value 0 into the Border field.

36 Similarly link the About Us, Services and Contact Us menu buttons to the appropriate pages. When you are done, save the template. You will get a message asking if you want to update the template files. Click the Update button. Save your pages in case they we open while the template was updated. Now when you preview your pages (e.g. index.html) in your browser and click on the menu buttons the appropriate pages will open up.

37 Part 13: Forms Let us create a form in the contact us page. To do this: Open contact-us.html Insert > Form > Form You will see a red outline within your page. This is the form tag. All your form fields must be placed within this tag. Insert Form > Text field In the screen that opens up type Name in the label field. Click OK Similarly create a field for as well. Also create a field for Message. This will need to be a text area [Insert > Form > Text Area].

38 Finally create a button [Insert > Form > Button] With this you have created the HTML required for the form. However, to make the form work and send you an you will need to use a php or asp script depending on your web server.

39 Part 14: Form Validation In this Dreamweaver CS4 Form Validation Tutorial we will learn how to validate a form in Dreamweaver CS4. The form we will validate is shown below: Step 1: Select the form tag You can do this by clicking anywhere in the form and selecting the <form> tag when it shows at the bottom of the document window. The entire form will grey out to show that it is selected. Step 2: Open the Behavior Inspector Open the Behavior Inspector (Window > Behaviors)

40 Step 3: Add the Validate Form Behavior Click the Add Behavior icon (+ icon) and select Validate Form

41 Step 4: Specify the validation requirements for each form field In the Validate Form Panel that opens select each field and specify the validation required.

42 In the example below I have given the following validation requirements: name Required, Anything Required, Address phone Required, Number Step 5: Click OK and check in the browser

43 Click OK when you are done with the validations. Save your page and preview in the browser. Test by trying to submit the form without the required values. You should get an error message like the one shown below:

44 Part 15: Tables (Again ) Another way of designing layouts in Dreamweaver CS4 is by using tables. We will use this method to create the submenu area within the template. Open template.dwt Delete Content for id submenu Goes Here from the submenu div With the cursor still within the submenu div insert a table [Insert > Table] with 3 Rows, 1 Column, Width of 201 pixels, border thickness 0, Cell padding 0 and Cell Spacing -0. Click OK. You will see a table appear in the submenu div. Select the table [Right click within the table > Select Table] and align it Center in the Properties Panel. Click within the top row of the table and insert the image submenu-top-bg.jpg Click within the bottom row of the table and insert the image submenu-btm-bg.jpg To give the background image to the middle: Click within the middle row

45 From the Properties panel, select <New CSS Rule> and click the Edit Rule button Create a class style called.sub-bg within styles.css

46 In the CSS Rule Definition screen choose submenu-bg.jpg as the background image and select repeat-y from the Background-repeat options.

47 We also don t want the submenu text within the middle row to stick to the edges so let s give a padding of 10 pixels within the same style. Click OK.

48 Type in the submenu items You can create new pages and create links to them from this submenu area or you can but textual content that will display on all the pages here. Save the template and update all the pages. Preview your pages in the browser and test all the links.

49 Part 16: Testing the Website Now that you have completed the site, thoroughly check it in the browser. Use File > Preview in Browser and select the various browsers. Check the site in at least Internet Explorer and Mozilla Firefox. Sometimes it will look a bit different in different browsers. Check to make sure everything is working fine. Test the menu links to see if the right pages are being called up. You might also decide to make some layout improvements. In this case, the submenu and content area is sticking to the menu area as this does not look good. Also the content is touching the footer area. Let us add some space between the menu and middle div. To do this: Open the CSS styles panel [Window > CSS Styles] Select the #menu style Right click and select Edit style Box > Margin > Bottom : 20 px Similarly edit the #footer style and add a Top margin of 20 px [Box > Margin > Top: 20 px] Save all files to make sure your styles.css file is saved and check your site in the browser. The added space makes it look much better. You might also find that the content is touching the edge of the browser on the right. We can add some space by reducing the width of the middle div to 95% from 100%. Edit the #middle style and change the width to 95%

50 Check your site again in the browser to make sure everything is working fine. We have now completed the site.

51

52 Part 17: Upload your site using Dreamweaver Now you are ready to use Dreamweaver CS4 to upload your site and make it live to the world. Use our itismath.com sites. Click on the Expand to show local and remote sites icon in the Files panel. A new screen will open with your files on the left site. These are the files stored on your local computer. Now click on the Connects to remote host icon.

53 Select FTP from the options

54 Enter your FTP details and click the Test Connection button You will get the message that Dreamweaver connected to your Web server successfully. Click Next

55 Select No, do not enable check in and check out Review your details on the final screen and click Done. You will be taken back to the Expanded Files Panel again. Click the Connects to Remote host icon again. This time Dreamweaver will connect to the remote host and display any files that are on the remote host on the left. To copy the files from your local computer to the remote host, simply select them in the right panel and click the Put Files icon Put all the files on the remote server (you don t need to put the template file). A copy of all the files will be seen on the right panel. When complete check your domain name from your browser e.g Your site will be live to the world Congratulations!

56 Part 18: Validate Contact Form If you are wondering how to validate your contact PHP form in dreamweaver, follow the simple steps below: Open your contacts.html in Dreamweaver CS4, while you see the contact form as below: Click on the Name box as seen above, now look out for Windows in the main menu of your dreamweaver and under that you will find Behaviors, click on that as shown below: Once you click on the Behaviors sub menu, you will be able to see the Behaviors table on the right side of your screen as shown below: Now click on the + sign as circled in red in the above image. Once you click on the + sign you will see a drop down menu, now click on Validate form as shown below:

57 Once you click on Validate Form, you will find a Validate Form screen flashing in the center of your screen as shown below:

58 Here you can define each field, by either checking the required value, for Name you can check the Anything checkbox, for , you can click the address checkbox and for Phone you can click the Number checkbox and if you want all the information compulsorily, you can check the required value check box for all etc., Click the OK button, you re done! That s it, you now know how to validate your contact PHP form in Dreamweaver CS4.