Dreamweaver Template Tutorial - How to create a website from a template

Transcription

1 Dreamweaver Template Tutorial - How to create a website from a template In this tutorial you will create a website using Dreamweaver s premade templates. You are going to learn how to style them using CSS. You should do this tutorial is you created a banner and button combination. Preparatory Step 1. Inside your folder create a new folder and name it template_layout. 2. Inside the layout folder create a new folder and name it images.. Copy or move the banner and buttons you created inside this folder. 4. Open Dreamweaver. Go to Site>New Site and create a new site named template_layout yourname. 5. Click the folder icon to set the root folder. Select the template_layout folder. 6. Click the folder icon to set the images folder. Select the images folder inside the template_layout folder. 7. Click OK. Then Done. Step One: Select the Template 1. Choose File > New. 2. Scroll down the layout list looking at various layouts. Some have fixed columns while others have fluid columns. There are still some that are a combination of both. You can view them in the preview window. Choose a 2 column elastic, right sidebar, header and footer layout.. Set the Layout CSS option to Create New File, since your web will have more than one page using the style settings. 4. Click Create, name the style sheet style and press Save. 5. Save the file as index.html inside your template_layout folder and title it Template Layout Home Page. 1

2 Step Two: Edit the CSS Styles for the Body 1. On the CSS Styles Panel make sure ALL is selected. 2. Double-click Body to open the CSS style settings for the body.. Choose the Background Category. 4. Click the color selector next to background color and choose a background for the body of your website. You can click apply to see if the color is a good choice. 5. Once you have decided on a color, click OK. 6. Choose File > Save ALL. 7. Press F12 to preview your site. 8. Your image will vary depending on the color you chose. 2

3 Step Three: Edit the CSS Styles for the Header 1. In Design View click on the box that contains the header. You will know you have it selected when its contents are highlighted. 2. Look at the Property Inspector. Notice that in the Div ID box it shows header. In the Class box it shows twocolelsrthdr.. On the CSS Styles panel double-click twocolelsrthdr #header to display the CSS Styles dialog box. 4. Select a background color that you like. 5. Once you have decided on a color, click OK. 6. Choose File > Save ALL. 7. Press F12 to preview your site. 8. Your image will vary depending on the color you chose.

4 Step Four: Edit the CSS Styles for the sidebar1 Content 1. In Design View click on the box that contains the sidebar1. You will know you have it selected when its contents are highlighted. 2. On the CSS Styles panel double-click twocolelsrthdr #sidebar1 to display the CSS Styles dialog box.. Select a background color that you like. 4. Once you have decided on a color, click OK. 5. Choose File > Save ALL. 6. Press F12 to preview your site. 7. Your image will vary depending on the color you chose. 4

5 Step Five: Edit the CSS Styles maincontent and footer. 1. To edit the main content double-click twocolelsrthdr #maincontent 2. To edit the footer content double-click twocolelsrthdr #footer. Play with the the settings until you find something you like. 4. Choose File > Save ALL. 5. Press F12 to preview your site. 6. Your image will vary depending on the color you chose. Step Six: Insert Your Banner in the Header. Because you are going to create image map links you have to insert the banner image instead of using CSS to set it as a background image. 1. Delete the word Header from the header area. 2. Select Insert > Image.. Navigate to your image folder and select your banner. 4. Click OK. 5. You will need to adjust the banner to fit into the space provided. 6. Now Save All and press F12 to view your page to see if your banner displays correctly. 5

6 Step Seven: Edit the CSS Styles for the Headings in the Sidebars. 1. Select the heading in sidebar1. 2. On the CSS Styles panel and click on the New CSS Rule icon.. Verify the Selector Type: Compound 4. Verify Selector Name:.twoColElsRtHdr #container #sidebar1 h 5. Verify Define in: style.css 6. Click OK. 7. Select your font, size, color you want (you can get the stripe in the back by selecting a background color). 8. Play with the the settings until you find something you like. 9. Choose File > Save ALL. 10. Press F12 to preview your site. 11. Your image will vary depending on the color you chose. 6

7 Step Eight: Edit the CSS Styles for the Headings in the MainContent. 1. Select the heading in Main Content. 2. On the CSS Styles panel and click on the New CSS Rule icon.. Drop down the Selector Type: Compound 4. Verify Selector Name:.twoColElsRtHdr #container #maincontent h1 5. Verify Define in: style.css 6. Click OK 7. Select your font, size, color you want (you can get the stripe in the back by selecting a background color). 8. Play with the the settings until you find something you like. 9. Choose File > Save ALL. 10. Press F12 to preview your site. 11. Your image will vary depending on the color you chose. 7

8 Step Nine: Additional Pages By now you should have the idea of how to format each of the different sections. You can do the footer on your own. The Latin text that is there act as a placeholder for the text you will replace it with. Now we will add additional pages and attach the style sheet you created. 1. Select File > New. 2. Make sure you have the same template you chose originally selected.. In the Layout CSS drop down box select Link to Existing File. 4. Click the Link button just below it. 5. In the Attach External Style Sheet dialog box click the Browse button. 6. Select the style.css file. 7. Click OK. 8. Dreamweaver will display the new page with the styles you created. 9. You can save the page and give it a title. 10. You can repeat this process for as many pages as you need. 11. You will create image map links on the header to link the pages together. 8

9 Step Ten: Navigation My three pages are named index.html, photoshop.html and gallery.html. Your names will be different than mine. We are going to create image map links so that when you click on the navigation it goes to the correct page. 1. Make sure you are on your index.html page. 2. Click on your banner and select the image map rectangle on the property inspector.. Use your mouse to drag the rectangle around the word HOME on your banner. 4. When the message box pops up click OK. 5. On the property inspector click the browse folder button to the right of the link box. 6. Navigate to your template layout folder and choose index.html and in the alt box type home. 7. Repeat this process to link the two remaining pages. I will link my Photoshop button to photoshop.html and my gallery button to gallery.html. 8. You should create your footer navigation now too. Type the names of your pages and use the link box on the property inspector to link them. 9

10 Step Eleven: Save Navigation as Library Item and Insert on Other Pages. 1. Click on your banner and change to Split View. 2. Select the code appearing between <div id= header > and <! end #header ==>. On the Assets Panel click the New Library Item button and name it navigation. 4. Go to each of your other pages one at a time. 5. Delete the banner in the header area. 6. Click the Insert button on the assets panel to insert the navigation. 7. You may need to delete a space after the image. 8. You should create a library item for your footer navigation and insert it on the other pages the same way. 9. Save all pages and test your links in a browser. Step Twelve: Adding a Background Image (if you want one) I decided to use a cool pattern I found for my background instead of a color. I saved the image into my images folder and named it bg.jpg. 1. On the CSS Styles Panel double click body to edit the settings. 2. Click on the background category and click the browse button next to background image.. Navigate to your images folder and select your background image. 4. Click OK. Now Save All and press F12 to view your page to see if your banner displays correctly. 10

11 You are to create and publish website ( page minimum) about a hobby you enjoy. The index page should introduce your hobby The 2 nd page should teach someone how to do your hobby. You should research your hobby online. You can create links to useful sites as well as type information and directions you would like to include. The rd page should be samples of your hobby. You can take pictures of yourself doing your hobby or of finished products if you produce things with your hobby. Your final assignment must have: pages linked together with links in both the header and the footer area All pages must be titled and be without spelling errors. You must create and use banner/buttons in Photoshop for your pages. The navigation in the header should work properly. The navigation in your footer should work properly. You should have a contact me link that links to your . Your navigation must be saved to you assets panel as a library item. You must have styles applied to the header. You must have styles applied to the footer. You must have styles applied to the sidebar. You must have styles applied to the main content area. All pages must have a relevant title. All images must have alt text. You must have content on every page. All content should be readable. All links to outside pages should work. The site should be published to your web space. All pages should be working properly. Content Your site should be free of spelling errors, all links should work, all pictures should show. Use the rubric to make sure you have included everything. You will upload all files to your web host when you are complete. 11

12 Project Rubric Requirement Student Check Off (Check off if you completed the requirement) Point Value 1. You created pages that are linked together. 2. Inserted the navigation and banner you created in Photoshop.. The navigation in the header/sidebar works properly. 4. The navigation in the footer works properly. 5. You have a working contact me link to your Your sidebar/header navigation was saved to you assets panel as a library item. 7. You applied styles to the header. 8. You applied styles to the footer. 9. You applied styles to the sidebar. 10. You applied styles to the Main Content Area. 11. All pages have a relevant title. 12. All images have alt text. 1. You have content on every page. 14. All content is readable. 15. All links to outside pages work. 16. Your page is free of spelling errors. 17. The site is published to your web space. 18. All pages are working properly. 19. You have completed this rubric. 20. Your work on this site reflects your best effort. Total Score 60 Teacher Score 12