Dreamweaver cs4
- 1. Introduction to Dreamweaver N.Ruba Assistant Professor Dept. of Computer Applications Bon Secours College for Women Thanjavur
- 2. Introduction to Dreamweaver Adobe Dreamweaver is a software application that allows you to create and develop Web sites. Dreamweaver is considered WYSIWYG (What You See Is What You Get), meaning that when you format your Web page, you see the results of the formatting instead of the mark-ups that are used for formatting. HTML is not WYSIWYG, whereas Microsoft Word is WYSIWYG. However, Dreamweaver allows you to hand code HTML as well. Dreamweaver also supports CSS and JavaScript as well as other languages including ASP and PHP. Dreamweaver makes it easy to upload your entire Web site to a Web server. You can also preview your site locally. Dreamweaver also lets you create templates for your Web site that you can use again and again by modifying certain unrestricted areas within the template. Then if you want to change one particular part of your Web site (the logo changes, a main link changes), you only have to modify the template for the changes to propagate throughout your Web site. Dreamweaver is fairly complex software. In this lab we will be getting a basic introduction to this software package.
- 3. Using Dreamweaver Dreamweaver is a web authoring program that uses a WYSIWYG “what you see is what you get” interface. The HTML code is being created and is accessible to you if you want to play with it. 1. Start Dreamweaver. You should see a startup screen. Dreamweaver lets you publish your Web site by easily uploading your Web site to a Web server. Right now we won’t be worrying about that. For now, you will be creating and viewing your site locally (which means the site will be located on your computer).
- 4. Create a New Site 2. From the Site menu, choose HTML under Create New. Making your first Web Page 3. You should now see a blank Web page in the Document Window. 4. Under the File Menu (top left of Dreamweaver work area), choose Save. 5. In the Save As box, find your Web site folder and save your file as index.html 6. Click Save. Congratulations! You’ve created your first Web page using Dreamweaver. Unfortunately, it’s pretty boring at the moment.
- 5. RULES OF THUMB for naming web files • Do not use spaces or special characters, such as those found above the number keys on the keyboard, in your file names. You can use dashes and underscores. (e.g., my_page.html) • Always use a 3- or 4-character file extension for every file you use on the Web. In the case of a regular Web page, always use .htm or .html. • Be very specific about capitalizing because most Web servers are case-sensitive.
- 6. Give your Web Page a Title In the document toolbar, find the Title box. 7. On the document toolbar (across top of Dreamweaver work area), locate the Title field. 8. Type in a title for your page. Feel free to be creative (but not indecent). 9. The title doesn’t show up on the page, but will appear in tabs and across the top of browsers
- 7. Adding Some Content Add Content to the Page 10. If you’ve got Split selected (right above the work area but below the top menus), you should have a split screen – the left half will be your html code and the right half will be a blank document window. You can always elect to click on the code button to just view code, or the design button to just see what your design will look like. For now, work on the right side in the document window. In this right document window, type in a good head title. This one will be the head title at the top of your Web page. If you can’t think of anything, you can always use, “Aardvark Adoption Society of Delaware”. 11. Add a subtitle below it. Again, it can be anything you want. If you’d prefer, it could be, “We speak for Aardvarks who can’t speak for themselves.” 12. If you still have split screen, notice how Dreamweaver automatically puts html tags around the text we’ve typed in. It’s not what we want – we’ll change that shortly. 13. Now that you’ve got a good title, add some content. Logically, it should go with the title. Type one or two lines now for now. We’ll add more later. If you like, I’ve included some content on my web site about Aardvark adoption that you can use. If you copy and paste the content, again, notice that Dreamweaver automatically puts html tags around the text we’ve copied and pasted. We will be changing most of those tags below.
- 8. Now let’s format the content 14. In the document window, highlight the header title. 15. In the Property Inspector (usually at the bottom), click on the Format drop down arrow, and choose Heading 1. Note: If you do not see the Property Inspector, in the menu across the top choose Window >> Properties. 16. In the document window, highlight “We speak for aardvarks…”. 17. From the Format menu on the Property Inspector, choose Heading 2. Note: When formatting your text, keep in mind that text sizes in HTML are relative sizes. This means that, when your page is viewed in a browser, the text size will depend on the default text size settings on each user’s computer. Relative sizes give users the ability to adjust the text size to suit their individual needs. This option is especially important for people with visual impairments, but it means that the appearance of your pages may vary from computer to computer.
- 9. Playing with Font Properties 18. Highlight the Subtitle (We speak for Aardvarks…). 19. Make sure the CSS is selected in the properties pane Change the font size to 24. . 20. You’ll get a window telling you to create a New CSS Rule. Under Selector Type choose Tag (redefines an HTML element) 21. Hit OK (If you still have your code window pane open on the left, you can see the style added in the head section of your html code). 22. With “We speak for Aardvarks…” still highlighted, click the Bold icon ( ) in the Property Inspector. The selected word appears bold. 23. Click the gray square to the right of the Size popup menu in the Property Inspector. A grid of colored squares appears, and the cursor changes to an eye dropper. 24. Click the eyedropper on the desired color. The field to the right of the color swatch reflects the code Web browsers need to correctly display the color you’ve chosen. (Note – if the CSS pop- up box appears again, just select Tag again) 25. Click anywhere on the page to deselect the text. The previously selected text appears in the new color.
- 10. Alignment 26. With “We Speak for Aardvarks…” selected on the page, click on Align Center button on the Property Inspector. The subtitle (h2) should now be centered on your page. 27. Select the head title (“Aardvark Adoption Society of Delaware) and choose Align Center. You’ll get the New CSS Rule pop-up window. Make sure Tag is selected (the tag should be h1) and click OK. You should now have 2 rules in the head section of your html code. Feel free to play with color and size of h1 as well.
- 11. Creating Lists 28. First we need to add a list. 29. Type in a title for your list and then type in a list of items. Make sure there are at least 3 items in your list. Make sure you hit return after each item. (Feel free to use a list from the aardvark content if you can’t think of your own. I used the list titled “Specifically, we need…” 30. Highlight the list title and choose Heading 3 from the Format menu on the Property Inspector (Make sure HTML is selected, not CSS). 31. Highlight the list items and click the Unordered List button on the Property Inspector. 32. The items appear as a bulleted list. 33. Now type in another List title and another list of items, or use the one within the content on the web page. (I used the one titled, “Please note the following rules”). 34. Highlight the title and select Heading 3 (Note: if using copied code, you may need to put the title on a separate line by hitting the enter button) 35. Highlight the rest of the items and click the Ordered List button on the Property inspector (next to the ordered list button). The items should now appear in a numbered list 36. Save your work. Get into the habit of saving your work regularly
- 12. Thank you