Getting started with dreamweaver


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

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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 /><br />Twitter account to receive the most current tutorials: <br /><br />eLearning blog with Blackboard version 9.1 LMS tutorials: <br /><br />20<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.