Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting started with dreamweaver

1,811 views

Published on

This tutorial will show you how to build a 3 page website using Dreamweaver CS5. The tutorial shows you how to add a navigation menu, image, and YouTube video to your site. The presentation also contains links to virus-free HTML files that you can use to help you create your own site.

Published in: Design, Technology
  • Be the first to comment

Getting started with dreamweaver

  1. 1. Getting Started<br />First Steps to Using Dreamweaver<br />1<br />
  2. 2. Open Dreamweaver<br />Open Dreamweaver and then click the “HTML” option under the “Create New” colum<br />2<br />
  3. 3. Set up the Stage<br />New documents often open in “Design” view by default<br />Locate the toolbar in the upper left-hand corner of the Dreamweaver production stage and click “Split”<br />The Split view allows you to see your coding and the results of your coding at the same time<br />3<br />
  4. 4. Add a Title<br />Now, give your document a title<br />Next, save your document. I called my document testDoc.htm<br />4<br />
  5. 5. Preview Your Coding<br />Notice that the HTML coding I added on the “Code” side of the screen rendered as text without coding on the “Design” side of the screen?<br />“Design” Screen<br />“Code” Screen<br />5<br />
  6. 6. Next Steps<br />Your next steps are to figure out what additional pages and content you want to add to your site<br />Consider adding images, a navigation menu, and perhaps an embedded video<br />6<br />
  7. 7. Adding an Image<br />Next, I am going to add an image to my very basic website<br />The best option is to add a two-row, one-column table<br />First, click “Insert” then click table (image 1)<br />Now, configure the table parameters as shown in image 2<br />Click “OK”<br />1.<br />2.<br />7<br />
  8. 8. Inserting the Image<br />Now, click “Insert” on the tool bar again but this time click “Image”<br />Navigate to an image you want to upload<br />Click “OK”<br />1.<br />2.<br />8<br />
  9. 9. Inserting the Image<br />Next, add an “Alternate Text” name. This is important for when you actually launch your site in the future.<br />Notice how Dreamweaver adds coding for you?<br />1.<br />2.<br />9<br />
  10. 10. Inserting Videos<br />There are multiple ways to add video to your web pages<br />Let’s keep it simple and use a YouTube video<br />From the YouTube video page, click “Share” then “Embed”<br />Next, highlight the entire “Embed Code” and copy it to your computer’s clipboard<br />10<br />
  11. 11. Embedding the Video<br />Now, open the HTML document for your video page<br />Add the <div></div> tags<br />Add the code style=“” tag to the first <div> tag. Make sure the code looks exactly how you see it in the image<br />Finally, paste the <iframe> code that you copied from YouTube<br />Save the HTML document<br />11<br />
  12. 12. Embedded Video<br />Once the <iframe></iframe> code from YouTube is in place, your Dreamweaver authoring canvas should look like the image below<br />12<br />
  13. 13. Add the Menu<br />Now we need to add a navigation menu to out pages<br />Open the “testDoc.htm” document again<br />From the tool bar, click “File” and “Save As…”<br />Name the file “index.htm”<br />13<br />
  14. 14. Create the Menu<br />The new index.htm file will become the website’s Home Page. The web standard is to name the HTML document for a Home Page as “index.htm”<br />Now, add a title to the document called “Home Page”<br />Add titles to the remaining two pages using the <h3></h3> tag<br />14<br />
  15. 15. Create the Menu<br />Now, we need to build the menu body<br />Create a table again but insert it above the page title (HINT: Use the image to help you with the coding)<br />15<br />
  16. 16. Create the Menu<br />Add the titles for each of your web pages<br />Make sure to center the text by adding the “text-align:center” tag<br />Now we need to add the URLs to the new navigation bar<br />16<br />
  17. 17. Activating the Menu<br />Add the <a href=“”></a> tags to each of the navigation link titles<br />Notice how the titles now change to blue with an underline?<br />17<br />
  18. 18. Paste the Menu<br />Finally, copy the nav menu table<br />Paste in onto the remaining two HTML pages<br />Make sure to paste it after the opening <body> tag and before the page title <h3>Title</h3><br />Save all of the HTML pages<br />18<br />
  19. 19. Conclusion<br />You now have the beginnings to a basic website!<br />Add more images and videos to enliven your website<br />Consider purchasing a URL and webhosting plan to launch your site<br />Explore CSS coding to make your site robust<br />19<br />
  20. 20. Resources<br />HTML documents and Images from this tutorial:<br />Download<br />eLearning Website with more tutorials: <br />http://www.elearning-pathways.com<br />Twitter account to receive the most current tutorials: <br />http://twitter.com/trainingguy<br />eLearning blog with Blackboard version 9.1 LMS tutorials: <br />http://www.elearning-pathways.com/blog<br />20<br />

×