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