Dreamweaver Tutorial

1. Dreamweaver Tutorial Principles of Internet Marketing MKT 380 Copyright Judy Strauss 2003

2. About the Colors in Tutorial • Black is for actionable instructions • Red indicates names of menu items or files • Purple is for notes that help you understand but do not require action • When you see instructions such as File > Open, this means you click on the File menu item and then go to Open.

3. A Couple of Tips First • Spacebar only makes one space no matter how many times you hit it. • To make more in HTML, we used &nbsp one time for each space. • To make more spaces in Dreamweaver use Ctrl+Shift+Spacebar • Enter key skips a line (double space). To single space use Shift+Enter. Note that the formatting will continue to next line when you do this.

4. Let’s Go • Create a new folder in C:/380/yourname called dreamweaver_exercise • Everything will be in that folder or it won’t work when you test the pages • Open Macromedia > Dreamweaver MX

5. Dreamweaver Settings • Set rulers as pixels: View > Rulers > show and View > Rulers > pixels (both show and pixels are checked) • Set proportional font as Verdana 10 pt. Edit > preferences and highlight Fonts • Be sure yours looks like below

6. Exploring Dreamweaver • Click on Common tab and look for: • Design and code views (press all 3 buttons and see what happens) Note the familiar HTML code – this is how you can edit it – in code view

7. Locate Context Sensitive Property Inspector at Bottom • This is where you will enter links and make text, tables and other things do what you want them to

8. You’ll Make This Using Dreamweaver-look familiar?  Three HTML pages and one graphic

9. Page 1: Line Test(Line Break; Nonbreaking Spaces) • Note the html commands at bottom of each slide as a reference. If you want to see them in Dreamweaver, click on code view button • Type the example to the right in the Untitled Document window, pressing Shift after the “Line test” line and Shift+Enter after each additional line. Begin the indented line with three repetitions of Ctrl+Shift+Spacebar. • Click on code view and identify the html for break and nonbreaking space HTML: <br> &nbsp

10. Save and Test Locally • Save the file in the dreamweaver_exercise folderas line.htm • Press the F12key to preview the document in your browser. We will link to this file later. Close the IE window • A little easier in WYSIWYG, eh?

11. Page 2: Font(face and size) • Create a new untitled page using File  New. In the window, select Basic Page, HTML and hit the Create button. • TypeACME Video Enterprises on the new page. • Highlight the text and note how the Property Inspector is ready for text editing (go to next slide…) HTML: <b><font face=Arial size=+3>

12. Page 2: Fontcontinued… (face and size) • With text highlighted,go to Property Inspector, change the font to Arial, Helvetica, sans serifby using drop down window. • Change the font size to Size: +3. Note that +3 is a relative font size indicating three steps up from the base font or approximately 24 point. • Click on the boldface icon HTML: <b><font face=Arial size=+3>

13. Save and Test Locally • Save the file in the dreamweaver_exercise folderas font.htm. • Press the F12 key to preview the document in IE. • Close the IE window

14. Page 3: index.htmCreate a Table • Create a new page File  New. Then Basic Page, HTML and hit Create. • Choose Insert  Table and complete the pop-up form as below Note: you can also insert a table from menu bar (look for icon right under “common” tab) HTML: <table width=75% cellpadding=5 cellspacing=1 borders=0>

15. Page 3: index.htm • Note what you just did: The table has two rows and two columns. The width of the table is 75 percent of the user’s monitor. The table will have no borders. Cellpadding and cellspacing are set to 5 and 1, respectively, to create a better design.

16. Page 3: index.htmCenter the Table • With your cursor inside the table, click the <table> tag at the bottom of the Untitled Document window. Note: This selects the entire table. When cursor is in the table note how property inspector changes to include table commands you might want to change. • Set Align: Center in the property inspector pop-up form shown below:

17. Page 3: index.htmMerge Columns in the First Row • Click and drag to highlight the entire first row of the table (not column). • Then choose Modify TableMergeCells(you can also right-click to bring up these options). The two cells should merge into one. HTML: <td colspan=2>

18. Page 3: index.htmAdd the text • Type the text as below. Note the spelling error and how the font returns to default Verdana. Dreamweaver doesn’t spell check automatically (use Text > Check Spelling) • I will call the merged cell at the top the page heading. I will call the two columns beneath the page heading the content columns.

19. Note: you might Have to hit arrow To expand inspector box Page 3: index.htmSet Cell Alignment, Width, and Background Color Note: 2 Bg boxes. Top is for back- ground image • Align page heading with cell bottom, and contents with top of the column for best layout design (similar to newspapers). • Click in Page Heading Cell (Acme…) to work on cell • Complete the property inspector • type color code #99ccff hit enter (or click on Bg arrow and locate the color) • horizontal alignment Horz: Left • vertical alignment Vert: Bottom HTML: <td align = left valign=bottom bgcolor=#99ccff>

20. Page 3: index.htmFormat two content cells • Click in the leftmost content cell. • Set the horizontal alignment Horz: Left • Set width W: 30% • Set the vertical alignment Vert: Top • Set the background color Bg: #ccffff • Repeat the same formatting for the rightmost content cell but set the width W: 70%

21. Page 3: index.htmFont Face/Size • HighlightACME Video Enterprises and complete the property inspector pop-up form shown below. • Change font face to Arial, Helvetica, sans serif • Change the font size to Size: +3. • Highlight text in each content cell and change the font face to Arial, Helvetica, sans serif. HTML: <font face=Arial size=+3>

22. Page 3: index.htmSave and Test locally • Save the file as index.htm in the dreamweaver_exercise file where the line.htm and font.htm are. • Test by hitting f12

23. Untitled Pages Suck • Open index.htm in Dreamweaver and get rid of “untitled” by typing Home Page in the title window. • Open line.htm and font.htm and type a title for each of them, Save • Test with f12 to see the window titles change

24. Linking the Pages • Open index.htm and change the text in the leftmost content cell to match the text below HTML: <a href=”line.htm”>

25. Linking the Pages • Highlight Line test. • In the Property Inspector, click the little yellow folder to the right of the Link field to browse for line.htm. Click OK. • Repeat the procedure for Font test this time browsing for font.htm (they should both be in the same dreamweaver_exercise folder). • This is relative linking • Save the file and test the links locally in IE HTML: <a href=”line.htm”>

26. Finally, Graphics! Create a graphic for Acme as you did in the HTML exercise – instructions repeated on following slides and adapted to Dreamweaver.

27. Make an Image • Visit http://www.3dtextmaker.com/ and make a logo for good old Acme Video Enterprises. • Pick a cool font, color, and set the dimensions at “size not constrained” • In step 4, set it at “Stationary” so it is not animated • In step 5 enter Acme • Click on Make 3D Text • Continued…

28. Save Image • Save your new image by right clicking the mouse, highlighting Save picture as… • Save it in the dreamweaver_exercise folder AND change the name to acme.gif. It is very important to keep all files in the same folder.

29. Insert Image • Delete the word ACME from the heading of your page in order to replace it with the logo. • Position the cursor in front of Video Enterprises and choose Insert  Image. • Navigate to the graphic that you created • Before you click OKnote that you can link this image to an html page as well in this box just by typing the URL or file name. Click OK • The graphic should now appear as part of the page heading. Use the handles to resize it as necessary—click and drag (to move proportionately, hold Shift while dragging).

30. A Word About Images • What you have done is inserted an html hyperlink to the image file. This tells IE to bring in image and display with page. • This image will not show online unless: • You send both html file and image file to server • You follow the parallel structure rule (when you insert the file it is in the same file structure on local computer as on server (e.g., all files in one folder without any additional folders).

31. Add Metatags • Note: keyword meta-tags help a search engine to index the page. • ChooseInsertHead TagsKeywords. Then enter Video, ACME as the keywords. Click OK. • Note: Normally you would do at least both Keyword and Description tags. • Just for fun, click on code view and look over the html for this page – it will look mighty familiar.

32. Congratulations! You’ve just finished creating a site with professional elements in Dreamweaver. Now, try the Dreamweaver tutorial or start on your Web site