m




Principles of Internet Marketing

MKT 380

Copyright Judy Strauss 2003

 p
 




j îlack is for actionable instructions
j Red indicates names of menu items or
files
j Purple is for notes that help you
understand but do not require action
j When you see instructions such as File >
Open, this means you click on the File
menu item and then go to Open.
 p


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


j Create a new 
 in C:/380/yourname
called dreamweaver_exercise
j Everything will be in that folder or it
won¶t work when you test the pages
j Open Macromedia > Dreamweaver MX
 m




j Set rulers as pixels: View > Rulers >
show and View > Rulers > pixels (both
show and pixels are checked)
j Set proportional font as Verdana ˜0 pt.
Edit > preferences and highlight Fonts
j îe sure yours looks like below
  
m



j Click on Common tab and look for:
j 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
 Ô




 





 


j This is where you will enter links and
make text, tables and other things do
what you want them to
 ^

 
m




 !j



"Ô
#

  
 
$%Ô


&Ô

'(


)
j 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
j Type the example to the right in the
£

  window, pressing
Shift after the ³Line test´ line and
Shift+Enter after each additional line.
îegin the indented line with three
repetitions of Ctrl+Shift+Spacebar.
j Click on code view and identify the
html for break and nonbreaking space
"Ô%* +, 
 
#
 Ô

j Save the file in the

folder as

 
j Press the J
key to preview the
document in your browser. We will link to
this file later. Close the IE window
j p little easier in WYSIWYG, eh?
 
-%

&
#.
)
/ Create a new untitled page using File j
New. In the window, select îasic Page,
HTML and hit the Create button.
/ Type p

 
 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=prial size=+3>
 
-%


 
#0&
#.
)
/ With text highlighted, go to ? 
  change the font to p





 by using drop down
window.
/ Change the font size to —
 . Note
that +3 is a relative font size indicating
three steps up from the base font or
approximately 24 point.
/ Click on the !
 icon
HTML: <b><font face=prial size=+3>
 
#
 Ô

j Save the file in the

folder as
font.htm.
j Press the J
key
to preview the document
in IE.
j Close the IE window
 
1%#




 

j Create a new page File j New. Then
îasic Page, HTML and hit Create.
j Choose Insert j Table and complete the
pop-up form as below
(

%



 


  &




  #
7

8  )

"Ô%*  
# 2345
##24
2$

#
26+
 
1%#


j 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 ˜, respectively, to create a better
design.
 
1%#





 

j With your cursor

 the table, click the
!!
" tag at the bottom of the £


 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.
j Set p

#  in the property inspector
pop-up form shown below:
 
1%#






  9

j Click and drag to highlight the entire first
  of the table (not column).
j Then choose

j $!
 j
#


 (you can also right-click to bring up

these options). The two cells should
merge into one.

"Ô%* #
2-+
 
1%#


p##


j 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)
j I will call the merged cell at the top the # 
#. I
will call the two columns beneath the page
heading the  
.
 
1%#




p
 :;# :#
#


j plign page heading with cell bottom, and contents with top of the (

%-





column for best layout design (similar to newspapers). 
 
j Click in Page Heading Cell (pcme«) to work on cell 
#

j Complete the  
  (

%

j type color code #99ccff hit enter "

  

(or click on îg arrow and locate the color) 

#


j horizontal alignment Horz: Left

j vertical alignment Vert: îottom

"Ô%* #2
 2

 

2<==+
 
1%#



  


 

j Click in the leftmost content cell.
j Set the horizontal alignment Horz: Left
j Set width W: 30%
j Set the vertical alignment Vert: Top
j Set the background color îg: #ccffff
j Repeat the same formatting for the
rightmost content cell but set the width
W: 70%
 
1%#



 
>.

j Highlight p

 
 and
complete the property inspector pop-up form
shown below.

j Change font face to prial, Helvetica, sans serif

j Change the font size to Size: +3.
j Highlight text in  content cell and change
the font face to prial, Helvetica, sans serif.
"Ô%*
 
2p .
2?1+
 
1%#



#
 

j Save the file as index.htm in the
dreamweaver_exercise file where the
line.htm and font.htm are.
j Test by hitting f˜2
   
#

j Open index.htm in Dreamweaver and get rid of
³untitled´ by typing Home Page in the title
window.
j Open line.htm and
font.htm and type a title
for each of them, Save
j Test with f˜2 to
see the window titles
change
 Ô


j Open index.htm and change the text in
the leftmost content cell to match the text
below

"Ô%*
28

8+

 Ô


j Highlight Line test.
j In the Property Inspector, click the little yellow
folder to the right of the Link field to browse for
line.htm. Click OK.
j Repeat the procedure for Font test this time
browsing for font.htm (they should both be in
the same dreamweaver_exercise folder).
j This is relative linking
j Save the file and test the links locally in IE

"Ô%*
28

8+

 :  @
Create a graphic for pcme as you did in the
HTML exercise ± instructions repeated
on following slides and adapted to
Dreamweaver.
 


j Visit http://www.3dtextmaker.com/ and make a
logo for good old pcme Video Enterprises.
j Pick a cool font, color, and set the dimensions
at ³size not constrained´
j In step 4, set it at ³Stationary´ so it is not
animated
j In step 5 enter pcme
j Click on Make 3D Text
j Continued«
 


j Save your new image by right clicking the
mouse, highlighting Save picture as«
j Save it in the dreamweaver_exercise
folder pND change the name to acme.gif.
It is very important to keep all files in the
same folder.
 


j Delete the word pCME from the heading of
your page in order to replace it with the logo.
j Position the cursor in front of Video
Enterprises and choose Insert j Image.
j Navigate to the graphic that you created
j îefore 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. Click OK
j 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).
 p;
#p
 

j What you have done is inserted an html
hyperlink  the image file. This tells IE to bring
in image and display with page.
j This image will not show online unless:
j You send both html file and image file to server
j 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).
 p##
 
j Note: keyword meta-tags help a search engine
to index the page.
j Choose  j $# j % Then
enter 
 p
as the keywords Click &%.
j Note: Normally you would do at least both
Keyword and Description tags.
j Just for fun, click on code view and look over
the html for this page ± it will look mighty
familiar.
Congratulations! You¶ve just
finished creating a site with
professional elements in
Dreamweaver.

Now, try the Dreamweaver

tutorial or start on your Web site