This action might not be possible to undo. Are you sure you want to continue?
Principles of Internet Marketing MKT 380
Copyright Judy Strauss 2003
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.
A Couple of Tips First
1. Spacebar only makes one space no matter how many times you hit it.
To make more in HTML, we used   one time for each space. To make more spaces in Dreamweaver use Ctrl+Shift+Spacebar
2. 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.
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 .
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 .
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 .
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 .
You¶ll Make This Using Dreamweaver-look familiar? Three HTML pages and one graphic .
Page 1: Line Test (Line Break. Click on code view and identify the html for break and nonbreaking space HTML: <br>   . 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. Begin the indented line with three repetitions of Ctrl+Shift+Spacebar. pressing Shift after the ³Line test´ line and Shift+Enter after each additional line.
eh? .Save and Test Locally Save the file in the dreamweaver_exercise folder as line. Close the IE window A little easier in WYSIWYG. We will link to this file later.htm Press the F12 key to preview the document in your browser.
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> . HTML and hit the Create button. select Basic Page. In the window.Page 2: Font (face and size) Create a new untitled page using File New. Type ACME Video Enterprises on the new page.
sans serif by using drop down window.Page 2: Font continued« (face and size) With text highlighted. Click on the boldface icon HTML: <b><font face=Arial size=+3> . Change the font size to Size: +3. go to Property Inspector. change the font to Arial. Note that +3 is a relative font size indicating three steps up from the base font or approximately 24 point. Helvetica.
Press the F12 key to preview the document in IE.Save and Test Locally Save the file in the dreamweaver_exercise folder as font. Close the IE window .htm.
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> .htm Create a Table Create a new page File New. Then Basic Page.Page 3: index. HTML and hit Create.
Cellpadding and cellspacing are set to 5 and 1. to create a better design. . respectively.Page 3: index. The width of the table is 75 percent of the user¶s monitor.htm Note what you just did: The table has two rows and two columns. The table will have no borders.
Note: This selects the entire table.Page 3: index. click the <table> tag at the bottom of the Untitled Document window. 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: .htm Center the Table With your cursor inside the table.
Then choose Modify Table Merge Cells (you can also right-click to bring up these options).Page 3: index.htm Merge Columns in the First Row Click and drag to highlight the entire first row of the table (not column). The two cells should merge into one. HTML: <td colspan=2> .
htm Add the text Type the text as below. . I will call the two columns beneath the page heading the content columns.Page 3: index. 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.
and Background Color Align page heading with cell bottom. Note: 2 Bg boxes. Width. and contents with top of the column for best layout design (similar to newspapers). Top is for background image 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 Note: you might Have to hit arrow To expand inspector box HTML: <td align = left valign=bottom bgcolor=#99ccff> .htm Set Cell Alignment.Page 3: index.
Page 3: index. 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% .htm Format two content cells Click in the leftmost content cell.
Page 3: index. Change font face to Arial. HTML: <font face=Arial size=+3> .htm Font Face/Size Highlight ACME Video Enterprises and complete the property inspector pop-up form shown below. sans serif. Helvetica. Highlight text in each content cell and change the font face to Arial. sans serif Change the font size to Size: +3. Helvetica.
htm in the dreamweaver_exercise file where the line.Page 3: index. Test by hitting f12 .htm are.htm and font.htm Save and Test locally Save the file as index.
Open line.htm and font.Untitled Pages Suck Open index. Save Test with f12 to see the window titles change .htm and type a title for each of them.htm in Dreamweaver and get rid of ³untitled´ by typing Home Page in the title window.
htm´> .Linking the Pages Open index.htm and change the text in the leftmost content cell to match the text below HTML: <a href=´line.
Click OK. In the Property Inspector.htm (they should both be in the same dreamweaver_exercise folder).Linking the Pages Highlight Line test.htm´> . Repeat the procedure for Font test this time browsing for font.htm. This is relative linking Save the file and test the links locally in IE HTML: <a href=´line. click the little yellow folder to the right of the Link field to browse for line.
Graphics! Create a graphic for Acme as you did in the HTML exercise ± instructions repeated on following slides and adapted to Dreamweaver. .Finally.
Make an Image Visit http://www. set it at ³Stationary´ so it is not animated In step 5 enter Acme Click on Make 3D Text Continued« . Pick a cool font.3dtextmaker. and set the dimensions at ³size not constrained´ In step 4.com/ and make a logo for good old Acme Video Enterprises. color.
highlighting Save picture as« Save it in the dreamweaver_exercise folder AND change the name to acme. .gif.Save Image Save your new image by right clicking the mouse. It is very important to keep all files in the same folder.
Position the cursor in front of Video Enterprises and choose Insert Image. Click OK The graphic should now appear as part of the page heading. Navigate to the graphic that you created Before you click OK note that you can link this image to an html page as well in this box just by typing the URL or file name. hold Shift while dragging). Use the handles to resize it as necessary²click and drag (to move proportionately. .Insert Image Delete the word ACME from the heading of your page in order to replace it with the logo.
This tells IE to bring in image and display with page. all files in one folder without any additional folders).. .A Word About Images What you have done is inserted an html hyperlink to the image file.g. 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.
Note: Normally you would do at least both Keyword and Description tags. Just for fun.Add Metatags Note: keyword meta-tags help a search engine to index the page. click on code view and look over the html for this page ± it will look mighty familiar. . Then enter Video. ACME as the keywords. Click OK. Choose Insert Head Tags Keywords.
Congratulations! You¶ve just finished creating a site with professional elements in Dreamweaver. try the Dreamweaver tutorial or start on your Web site . Now.