Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

Dreamweaver  101    First  step:  For  your  first  time  out,  create  a  folder  on  your  desktop  to  contain  all  of  your  DW  pages  and  assets  (images,  audio  files,  etc.).  Name  it.  For  demonstration,  I’ll  name  mine  dw_magic.  

   

Here’s  the  desktop  icon  for  Dreamweaver  CS5:      Click  it  open.      From  the  top  menu  options,  choose  Site  and  New  Site    

   I’ll  fill  in  the  site’s  name  (what  might  appear  in  the  title  bar,  perhaps)  and  browse  to  locate  the  desktop  file  that  will  store  all  the  material.  This  is  similar  to  setting  your  scratch  disks  in  Final  Cut  Pro.  Click  SAVE.    

   

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

On  the  WELCOME  screen  (IF  ONE  SHOWS  UP  ON  YOUR  COMPUTER),  choose  HTML  under  Create  New.    

   If  you  did  NOT  get  a  WELCOME  screen,  you  need  to  go  to  FILE  >  NEW    

   Then  you  will  see…    

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

   Choose  the  defaults,  which  should  be  BLANK  PAGE,  HTML,  <none>.  CREATE.      Both  ways  will  open  up  to  your  workspace,  which  should  look  like  this  (or  very  similar  –  the  computer  labs  might  open  up  a  space  that’s  design  only  at  first):    

   

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

You  have  menu  and  tool  options  at  the  top,  panels  on  the  right  that  address  other  options  (such  as  creating  CSS).  At  the  bottom,  there  are  different  property/tool  panels  that  will  appear  according  to  what  you’re  doing  at  the  time.  At  the  left,  there  are  various  services.  The  main  workspace  is  divided  into  two  areas  (and  the  juxtaposition  can  change  according  to  what  you  need  to  see):  code  on  the  left…    

   Look  familiar?    …  and  your  design  space  on  the  right.    

These  three  buttons  control  what  you  see.    What  I’ve  just  shown  you,  above,  is  the  “split”  option.    You  need  to  SAVE  your  page  at  this  point.  If  this  is  your  HOME  page,  save  it  as  index.html.  (The  .html  will  be  entered  automatically.)    

 SAVE.  

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

Click  in  the  design  space  and  write  something.  You  will  see  what  you’ve  written  appear  in  the  code  as  well  as  in  the  design.    

   If  you  highlight  “something!!!”  you  will  see  that  you  can  format  it  using  the  bottom  panel.  Here  I’ve  used  the  “B”  button  to  bold  it.  You’ll  see  that  the  <strong>  tag  shows  up  both  under  the  coding  area  (so  that  I  will  be  able  to  see  it  even  if  the  coding  panel  is  closed)  and  in  the  code  itself.    

   Format  will  get  you  the  paragraph  and  heading  options  (again;  look  familiar?):    

   I  can  do  more  by  clicking  the  Page  Properties  button,  however:    

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

   For  now,  because  I  don’t  want  to  set  up  a  CSS  style  for  this  particular  exercise,  I  have  it  clicked  (left  side)  on  Appearance  (HTML).  Here  I  can  change  text  color,  background  color,  link  colors,  margin  sizes,  and  background  image.  Go  ahead  and  try  things.  Note  that  you  can  see  what  you’ve  done  before  saving  if  you  click  APPLY.  When  you’re  pleased,  choose  OK.  You  can  always  go  back  and  change  things.    

     

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

TESTING/PREVIEWING  YOUR  PAGE  IN  A  BROWSER:      Find  the  little  “globe”  in  the  top  tool  bar.  Bring  down  the  menu.  Choose  a  browser  (Firefox  is  good).    

   Back  to  the  work  space…    Background  image:  If  you  bring  one  in  (use  the  Browse  button),  it  will  repeat  itself  (called  “tiling”).  I  will  show  you  how  to  make  it  NOT  repeat  shortly,  but  you  cannot  do  it  in  the  HTML  function.  This  is  what  it  would  look  like:    

   There  are  effects  that  would  work,  depending  on  the  image.  This  isn’t  one  of  them.  

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

 Back  to  the  work  space…    On  the  far  right,  you  should  see  a  panel  with  INSERT  at  the  top.  Open  the  little  pull-­‐down  menu  and  choose  COMMON.  Drag  the  INSERT  label  to  your  top  toolbar.  (This  is  just  how  I  like  to  use  it.  Try  it  for  now.  You  can  also  get  these  options  by  using  the  INSERT  pull-­down  menu  at  the  top  of  the  workspace.)  You  should  see  this:    

   You  will  use  some  of  these  icons  to  perform  basic  things.  We’re  concerned  with  the  image  tool  just  now.  That’s  the  one  with  the  little  tree  in  a  square  box  and  a  small  triangle  next  to  it.  When  you  mouse  over  it,  it  will  colorize.    

 (I  can’t  believe  I  just  used  the  word  “colorize.”  Sigh.  But  that’s  what  it  does.)    Pull  down  the  menu  from  the  triangle  and  you’ll  see  options.  Choose  IMAGE  for  now.    

   Browse  for  your  image:    

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

   CHOOSE.  Because  I  hadn’t  already  saved  my  document  (bad  me),  DW  offers  to  map  the  path  to  get  my  picture.  Click  OK  if  you  get  this.    

   Because  the  image  was  not  in  my  dw-­‐magic  folder  (the  “site”  or  “root”  folder),  DW  offers  to  put  a  copy  there.  Say  YES.  

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

 

   YES.  

   SAVE.  When  it  asks  for  alternate  text,  type  some  in.  Don’t  worry  about  the  long  description.  Click  OK…  

   

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

     Your  image  is  inserted.  Notice  the  code.    If  you  click  on  the  image,  you  get  some  options  for  how  text  will  be  displayed.    

   V  space  =  vertical  padding  H  space  =  horizontal  padding  (10  pixels  is  a  good  standard,  but  vary  as  needed)  Border:  1  will  get  you  something  crisp  but  not  overpowering.  Align:  Here  is  where  you  will  determine  how  the  image  is  displayed  in  relation  to  the  text.  Experiment  with  the  options.    

 “Left,”  for  example,  means  that  the  image  will  be  to  the  left  of  the  text.      THE  ROLLOVER  IMAGE    

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

For  each  rollover,  you  need  TWO  image  files  that  are  EXACTLY  the  SAME  SIZE.  They  will  distort  if  they  do  not  match.    Here  are  the  two  I’ll  use:    

   and          (In  this  case,  let’s  pretend  that  the  map  shows  where  the  lily  was  growing  or  some  other  related  purpose.)    In  your  DW  work  space,  put  your  cursor  where  you  want  the  image  to  appear  (this  can  be  changed  later).    Go  to  the  IMAGE  icon  or  menu.  Choose  ROLLOVER  IMAGE.    

   You’ll  get  a  form  that  looks  like  this  (although  in  the  one  below  I’ve  put  in  my  information):    

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

   Original  image:  This  is  the  image  you’ll  see  when  you  first  come  to  the  page.    Rollover  image:  This  is  the  image  you’ll  see  when  you  mouse  over  the  original  image.  It  can  be  another  picture,  a  map,  some  text,  etc.  Anything,  so  long  as  it  is  an  image  file.  Same  for  the  original  image.    Alternate  text:  This  is  what  will  “pop  up”  on  the  Web  page,  or  what  will  be  read  by  a  mechanical  reader  that  some  visually  challenged  people  have  on  their  computers.    When  clicked…  This  is  where  you  would  put  something  you  want  linked  to  the  image.  In  this  case,  a  click  on  the  image  will  take  you  to  the  Wikipedia  page  on  water  lilies.  On  a  news  site,  it  might  take  you  to  the  news  story.    

In  your  work  space,  it  will  look  as  if  the  image  has  a  screen  over  it.  If  you  click  outside  the  image,  that  will  disappear.    Preview  your  rollover  in  a  browser.  IT  WILL  NOT  WORK  IN  THE  WORK  SPACE.  Any  interactivity  must  be  in  a  browser  to  be  seen.    

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

BACKGROUND  IMAGE,  PART  2:    This  is  how  you  insert  an  image  that  will  NOT  repeat.      

   Notice  that  you  need  APPEARANCE  (CSS).  Browse  for  the  Background  Image  as  before.  In  the  REPEAT  menu,  choose  “no-­‐repeat.”  OK.    

   If  you  wanted  the  image  to  fill  the  entire  space,  you  would  need  (for  optimum  quality)  an  image  that  was  already  sized  to  do  that.  However,  there  are  effects  you  can  use.  In  this  case,  you  could  match  the  background  color:    

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

   And  you  would  get…    

   Because  it  is  a  Background  Image,  you  can  apply  text  over  it…    

Leslie-­‐Jean  Thornton,  Ph.D.          Fall  2010  

   Thus  ends  today’s  demonstration.    Your  assignments  are  online.