1

WEB  DESIGN  Cheat  Sheet  1  First  steps:  Identify  what  resources  you  have  and  determine  the  kind  of  web  site  you  are  to  setup    

1. Domain  and  Hosting  services:    a. Do  you  have  a  domain  name  registered?  

i. One  can  register  a  domain  name  from  an  Internet  Service  Provider  (ISP).    Example  of  ISP:  hostmonster.com,  bluehost.com,  godaddy.com.    

b. What  hosting  services  do  you  have?  Hosting  service  can  be  bought  from  most  ISPs  that  offer  domain  name  registration.  You  can  buy  a  complete  service  that  comprise  of  domain  name  and  hosting  from  the  same  ISP.        

i. If  you  are  using  an  institutional  service  or  account  you  will  need  to  know  how  to  activate  your  account  and  obtain  your  domain  name  and  user  information  like  username  and  password.        

 c. After  the  activation  of  web  hosting  account  and  domain  name  

registration  you  will  have  a  unique  URL:  http://www.domain_name.com  d. You  can  then  logged  on  to  your  server  account  using  your  URL  using  an  

FTP  (File  Transfer  Protocol  client)  FileZilla.  That  gave  us  access  to  our  public_html  or  www  or  htdocs  folder  that  is  our  remote  root  folder  for  our  web  site.      

e. Below  is  the  FileZilla  interface.  FileZilla  is  the  FTP  (File  Transfer  Protocol)  client  we  are  using  to  connect  to  our  server  account  and  will  use  to  transfer  our  web  site  files  to  the  Internet  for  user  access.    

                                         

2

f.    Local  site  =  your  computer             Remote  site=  web  server    

 2.  Local  site  files  are  files  on  your  computer  and  Remote  site  files  are  files  on  the  

server.    3. FileZilla  is  an  open  source  FTP  client  downloadable  for  free  from  the  Internet  at  

this  URL:  http://filezilla-­‐project.org/download.php?type=client  4. To  use  an  FTP  system  to  log  on  to  a  hosting  account  on  a  server  requires  the  

following  details:    a. Host:  www.domain_name.com  b. Usersername:  Usesername  c. Passoword:    your  password  

   

5. After  using  FTP  to  transfer  your  files  online,  you  will  need  to  clear  the  Quickconnect  bar  and  history  to  ensure  your  hosting  remains  secure  especially  if  you  are  working  on  a  public  computer.  If  you  are  working  on  your  private  personal  computer,  you  can  leave  leave  the  connection  history  intact.    

a. To  clear  the  Quickconnect  Bar  and  History  do  the  following:    b. Click  on  the  Quickconnect  twirl  down  tool  >  choose  >Clear  Qucikconnect  

bar  

3

c. Click  it  again  and  choose  >  Clear  History  d. After  that  Exit  FTP  clicking  on  the    

     Fresh  Tool        Disconnection  Tool                                Quickconnect  Tool          

     

1. Dreamweaver  Workspace  interface:  

   This  image  is  taken  from  the  Dreamweaver  virtual  help  resources  online.  Understanding  the  Dreamweaver  user  interface  and  knowing  how  to  use  the  various  tools  is  very  important.    Some  of  the  key  areas  of  the  interface  are  the:    

2. Panels  a. CSS  Cascading  Style  Sheet  –  allows  the  user  to  access  the  details  of  

existing  sheet  and  check  the  rules  or  create  or  edit  them.  It  has  an  All  and  Current  tabs  used  for  displaying  and  inspecting  All  the  CSS  and  those  currently  selected  in  the  document  area  using  the  cursor.    

b. Files  –  Gives  the  designer  access  to  all  the  files  being  used  in  the  design  of  a  web  site.  It  helps  the  designer  to  keep  track  of  all  the  files  used  in  the  design  of  the  web  site.    

4

c. Properties  -­‐  Can  be  used  to  inspect  the  properties  of  various  objects  or  text  selected  in  a  document.    

3. Workspace  Layout  –  Windows  on  the  Application  bar  allow  you  to  access  the  workspace  layout  tool  to  either  reset  you  workspace  or  switch  to  a  specific  workspace  layout.      

4. Window  –  This  tool  on  the  Application  bar  allows  the  user  to  open  various  panels  that  may  not  be  seen  in  the  workspace  for  instance  the  files  and  CSS  panel.      

5. Application  Toolbar  –  It  is  key  to  accessing  the  various  tools  in  Dreamweaver.        Defining  a  Site  in  Dreamweaver.  Performing  this  task  in  Dreamweaver  before  beginning  the  designing  of  a  site  is  absolutely  important.  This  task  is  important  if  you  want  to  work  hassle  free  in  Dreamweaver.  To  define  a  site  you  will  have  to  follow  these  steps.      

1. Create  a  Root  folder  some  where  on  your  computer,  for  instance,  My  Documents  on  a  PC  or  Documents  on  a  Mac.  Do  not  forget  to  give  it  a  name.    

2. Next  power  up  the  Dreamweaver  software  and  click  Site  in  the  Application  Bar  a. Choose  New  Site  and  fill  in  the  dialog  box  that  pops  up.    

Advance  Setting                    Site  Name     Local  Site  Folder    

   

b.  Type  in  the  site  name  in  the  Site  Name  field  and  for  the  Local  Site  Folder,  click  on  the  folder  icon  to  set  the  folder  you  created  as  the  Root  folder  (Local  Site  Folder).  You  can  either  proceed  to  save  and  complete  the  process  or  you  can  click  on  the  Advance  Settings  option  and  define  a  default  Images  folder  as  illustrated  in  this  picture.    

               

5

 Advance  Setting                      

   c. This  completes  the  site  definition  process  and  your  Root  Folder  appears  

in  the  Files  Panel  in  Dreamweaver.  If  you  have  files  (html,  css  or  images)    in  the  Root  folder  and  the  Images  Folder  those  will  appear  in  the  files  panel.  A  CSS  file  will  also  appear  in  the  CSS  Panel    as  illustrates  in  the  images.    

 Files  Panel         CSS  Panel  

   

d. These  two  panels  are  very  important  in  the  to  the  management  of  files  in  the  web  design  process.  After  a  site  has  been  defined  in  Dreamweaver.  You  should  always  ensure  that  all  file  management  is  done  in  the  Files  Panels,  especially  the  name  of  files.      

i. To  rename  a  file  right  click  >  choose  edit  to  change  a  name  or  Cntrl  click  on  both  PC  and  MC  to  edit  the  name  of  a  file.    

e. File  naming  convention  is  simple:    i. Use  lower  cases  all  the  time,  for  instance,  index.html,  about.html  

6

ii. No  spaces  between  the  names,  use  underscore  or  dashes  e.g.  contact_us.html,  my-­‐resume.html  

iii. Do  not  use  other  symbols  like  ~,  *,?  ,  >  etc.      HTML  AND  CSS  FILES  

1. All  most  all  web  pages  have  two  sets  of  formatting  that  organize  the  content  on  the  pages  and  give  the  page  its  layout.  The  content  on  a  web  page  is  organized  with  HTML  (Hypertext  Markup  Language)  tags,  and  its  layout  is  managed  with  CSS  (Cascading  Style  Sheet)  rules.  

2. HMTL  tags  come  in  pairs  eg.  <>tag  name  </>.  There  are  numerous  tags.  The  most  commonly  used  ones  are:  <p>  </p>  and  <h1></h1>  (h1  to  h6),  <head></head>,  <body></body>,  <html></html>.    

3. In  most  web  authoring  tools  including  Dreamweaver,  the  most  common  and  easy  file  to  create  is  an  HTML  file.    

 4. A  basic  HTML  file  has  the  following  format:  

a. xHTML  or  HTML4  <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transitional.dtd">  <html  xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta  http-­‐equiv="Content-­‐Type"  content="text/html;  charset=UTF-­‐8"  />    <title>Untitled  Document</title>    </head>    <body>    </body>    </html>  

b. HTML  5  <!DOCTYPE  HTML>    <html>    <head>    <meta  charset="UTF-­‐8">    <title>Untitled  Document</title>    </head>      <body>    </body>    </html>    

5. DOCTYPE    a. xHTML  or  HTML  4  

i.  <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transitional.dtd">    

b. HTML  5  i. <!DOCTYPE  HTML>  

7

c. It  makes  sure  a  browser  sees  an  HTML  page  correctly.    6. HTML  Tag  for  xHTML  or  HTML  4  and  HTML  5  

a. xHTML  or  HTML  4  :    <html  xmlns="http://www.w3.org/1999/xhtml"></html>  

b. HTML  5:  <html></html>  i. All  content  on  a  page  must  be  between  the  open  and  close  tags  of  

the  HTML  on  a  page.  Any  content  outside  of  the  tag  may  not  show  up  on  the  page  and  is  a  recipe  for  disaster.    

7. Some  of  the  content  of  the  HEAD  tags  are  visible  on  a  page,  while  search  engines  and  other  web  crawlers  use  others.        

a. Visible  contents  are  usually:  title  of  a  page  and  favicon.    b. None  visible  content  are  the  author  of  a  page,  link  to  external  sheet,  

Meta  tags  used  by  Search  Engine  Optimization  (SEO),  etc.      8. Body  tags:  all  visible  contents  of  the  page  must  be  between  the  open  and  close  

body  tags.    

9. Some  of  the  most  common  and  often  used  HTML  tags  are  listed  below.    TAG   DESCRIPTION  

<!DOCTYPE>,     Defines  the  document    <html>   Defines  the  root  of  an  HTML  document  <head>   Defines  information  about  the  document  <body>     Defines  the  Document  body  <p>,     Defines  a  paragraph  <h1>  to  <h6>     Defines  HTML  headings  <li>     Defines  a  list  item  <img>     Defines  an  image  <link>     Defines  the  relationship  between  a  document  and  

other  resource.    <a>       Defines  a  hyperlink  <br>   Defines  a  link  break  

 A  comprehensive  list  of  HTML  Tags  can  be  found  on  the  w3c  web  site  at  these  URLs:    

a. HTML  (5)  http://www.w3schools.com/tags/default.asp      

10. What  is  HTML?  a. HTML  consists  of  Tags  and  content  (text,  images,  video,  audio  etc)  –  The  tags  are  

used  to  apply  structure  to  the  content  on  a  web  page.    i. For  instance  <p>Test</p>  is  for  a  paragraph.  The  common  misuse  of  this  

tag  is  to  hit  enter  or  return  on  the  keypad  multiple  times  to  create  space/s.    

ii.  <strong>Text</strong>  Used  for  bold.    iii. <em>Text</em>  Used  for  italics  iv.        Good  HTML  allows  for:    

1. Ease  of  use  –  Loads  up  fast  and  exactly  the  way  it  is  formatted.    2. Accessibility  –  Allow  for  all  kinds  of  use  by  all  users,  especially  

those  who  use  assistive  devices  to  access  and  read  web  pages.    

8

3. Search  Engine  Optimization  –  Can  be  easily  identified  and  displayed  as  part  of  Internet  search.    

4. Repurposing  of  the  content  on  a  web  site  –  for  delivery  on  all  kinds  of  devices.      

b. Why  HTML  5?  It  is  all  about  the  HTML  semantics  -­‐  that  is  making  the  HTML  behind  a  web  site  more  simple  and  meaningful.    

i. It  is  aimed  at  making  HTML  more  meaningful  to  the  designer,  and  especially  to  the  browsers  that  will  use  it  to  display  the  content  on  a  web  site.  

ii. The  goal  in  designing  a  web  site  is  to  make  your  HTML  right  for  browsing.              CASCADING  STYLE  SHEET  (CSS)  

1. What  is  CSS?  Cascading  style  sheet  (CSS)  is  a  way  to  add  styling  elements  to  a  web  page  –  that  is  the  .html  files  of  a  web  site.  It  allows  a  web  designer  to  apply  styling  properties  to  HTML  tags.    For  instance  when  you  define  an  HTLM  tag  the  Heading  <h1>  My  Life</h1>  you  can  use  CSS  to  determine  the  font  type  and  size,  background  color,  the  boarder  around  it  etc.      

2. Most  well  designed  web  pages  get  their  layout  properties  from  CSS  (Cascading  Style  Sheet).  CSS  are  rules  that  are  determined  by  the  designer  based  on  his  or  her  creative  goals  and  the  intended  platform  (PC,  Tablet  or  Cell  phone)  on  which  the  web  site  will  be  viewed.    

3. BOX  model  –  The  box  model  is  important  for  understanding  how  CSS  works  in  relation  to  an  HTML  file.      The  basic  understanding  is  that  all  HTML  elements  are  to  be  considered  as  boxes  that  get  their  properties  from  CSS  rules.  In  CSS,  the  "box  model"  is  used  when  trying  to  understand  how  to  structure  a  web  page.  So  the  CSS  rules  determine  the  nature  of  the  box  or  boxes  that  wrap  around  the  HTML  elements,  Header,  container,  sidebar,  footer  etc.    

a. The  key  to  doing  this  effectively  is  to  understand  that  every  box  has  the  following  structure  and  content:  margins,  borders,  padding,  and  the  actual  content  as  illustrated  in  the  image  below.  This  image  is  taken  from  the  w3c  at  this  URL  http://www.w3schools.com/css/css_boxmodel.asp.  

b. An  illustration  of  the  box  model.    

 

9

“The  box  model  allows  us  to  place  a  border  around  elements  and  space  elements  in  relation  to  other  elements.”1  

a. Box  is  a  Block  element:  Margin,  boarder,  padding  and  content.  b. The  width  of  a  box  is  determined  not  by  the  margin  but  by  the  border  and  

padding  of  the  box.    c. Margins  can  be  used  for  positioning.  

 4. CSS  is  a  collection  of  rules.  There  are  3  ways  of  creating  these  rules:    

i. Inline  style  –  They  are  rules  created  on  an  HTML  file  to  style  the  tags.  They  are  usually  limited  to  that  page  and  override  any  other  existing  form  of  CSS  (overrides  the  embedded  or  external  style  if  they  exist).  

ii. Embedded  style  –  They  are  rules  defined  at  the  top  of  an  HTML  files  with  the  following  tags:      

<style  type="text/css">    Rules    </style>    

On  a  specific  page,  embedded  rules  override  external  rules  if  they  exist.  iii. External  style  –  Can  be  used  for  multiple  pages.  They  are  rules  usually  defined  

in  a  separate  file  named  with  a  .css  file  extension  for  instance,  styles.css.  It  is  considered  the  best  approach  to  defining  CSS  rules  and  for  designing  web  sites.  The  following  CSS  sample  is  the  CSS  external  rules  in  an  external  style  sheet  taken  from  a  Dreamweaver  starter  layout  for  a  three  column  fixed  header  and  footer  design.    

                                         

1 http://www.w3schools.com/css/css_boxmodel.asp

10

           Sample  of  CSS  external  rules  in  a  .css  file  

1. body  {  2.   font:  100%/1.4  Verdana,  Arial,  Helvetica,  sans-­‐serif;  3.   background:  #42413C;  4.   margin:  0;  5.   padding:  0;  6.   color:  #000;  7. }  8.  9. ul,  ol,  dl  {    10.   padding:  0;  11.   margin:  0;  12. }  13. h1,  h2,  h3,  h4,  h5,  h6,  p  {  14.   margin-­‐top:  0;      15.   padding-­‐right:  15px;  16.   padding-­‐left:  15px;    17. }  18. a  img  {  19.   border:  none;  20. }  21.  22. .container  {  23.   width:  960px;  24.   background:  #FFFFFF;  25.   margin:  0  auto;    26. }  27.  28. header  {  29.   background:  #ADB96E;  30. }  31.  32.  33. .sidebar1  {  34.   float:  left;  35.   width:  180px;  36.   background:  #EADCAE;  37.   padding-­‐bottom:  10px;  38. }  39. .content  {  40.   padding:  10px  0;  41.   width:  600px;  42.   float:  left;  43. }  44. aside  {  45.   float:  left;  46.   width:  180px;  47.   background:  #EADCAE;  48.   padding:  10px  0;  49. }  50.  51. footer  {  

11

52.    

   

     

CREATE  HTML  AND  CSS  FILES  IN  DREAMWEAVER  1. Create  a  basic  HMTL  file  attached  to  a  CSS  file  as  a  basic  design  using  

Dreamweaver’s  Starter  layouts  by  doing  the  following:    a. Process:  In  Dreamweaver  click  on  the  File  option  in  the  Application  Bar  b. Choose  New  >  click  on  Blank  page  c. Page  Type  >  Choose  HTML    d. Layout  >(Choose  a  layout)  

This  image  illustrates  the  dialog  box  that  pops  up  when  we  click  on  File  in  the  Application  bar  and  choose  New.    Blank  Page          Page  Type                                  Layout  out                          DocType      Layout  CSS        Create    

 e. DocType  >  choose  HTML  5  or  XHTML  1.0  Transitional    f. Layout  CSS  >  choose  Create  New  File  g. Click  Create.    h. The  first  File  to  save  is  the  CSS  file.    

i. Give  it  a  name  like  styles.css.  Save  and  make  sure  it  is  saved  into  you  root  folder  on  your  computer.    

ii. Next  Dreamweaver  will  open  your  HTML  page  with  the  layout  you  chose  as  an  untitled  page.  Save  the  page  as  layout.html.    

12

i. Layout  page  is  a  layout  created  with  a  Dreamweaver  starter  layout,  for  instance  1  column,  header  and  footer    

i. Make  sure  there  are  2  separate  files  showing  up  in  your  Files  Panel  in  Dreamweaver  for  example  –  layout.html  and  styles.css  files.  

 CREAT  ADDITIONAL  FOLDERS  

 1. Create  additional  folders  in  the  root  folder  using  Dreamweaver,  for  instance,  

images,  docs,  photos,  video,  audio  etc.    a. Process:  Right  Click  or  Cntrl  Click    the  Root  folder  in  the  files  panel  

>Menu  Pops  up>  Click  New  Folder>  Folder  created>  Name  folder.    

2. Determine  the  width  of  your  container  in  both  designs  by  checking  the  Selector  properties  of  the  container.  You  may  also  want  to  determine  the  width  of  the  main  content  area  and  the  sidebars  if  you  have  any.  

a. To  check  the  width  of  the  container  do  the  following:      i. Click  the  All  tab  in  the  CSS  panel  ii. Click  the  edit  rule  tool  iii. Dialog  Box  pops  up  iv. Click  on  the  box  field  the  details  of  the  container  show  up.  

b.  Can  do  the  same  for  Main  Content  and  sidebars  and  write  the  information  down.    

                                         

13

                               

CREATE  A  GRAPHIC    

1. Create  your  graphic  elements,  especially  the  banner,  logo  or  header  graphic  depending  on  what  you  want  to  call  it.    

a. Graphic  elements  can  be  created  in  an  image  editing  software  like  Photoshop.  To  create  a  banner  or  logo  do  the  following:  

b. Power  up  Click  on  the  File  menu  in  the  Application  Bar.  i. Choose  >New>  Dialog  box  pops  up>  Choose  custom  in  the  preset  

field    ii. Put  in  the  details  of  the  images      iii. Make  sure  unit  of  measurement  is  pixels  iv. Color  mode  is  RGB  v. Background  Color,  white  or  transparent  (You  may  use  Background  

color  or  transparent  unless  you  want  your  banner/header/logo  to  have  a  color  background).  

c. The  width  of  your  container  should  help  you  decide  the  dimensions  of  the  banner,  logo  or  header  graphic.    

   

14

   

PLACING  AN  IMAGE  ON  AN  HTML  PAGE  2. The  banner  or  logo  graphic  of  a  web  site  may  be  placed  in  the  Header  section  of  

the  web  site.  Also  you  can  create  a  graphic  and  set  it  as  the  background  graphic  in  the  CSS  rules  that  determine  how  the  background  of  the  web  site  looks.            

a. There  are  different  ways  of  placing  an  image  on  an  HTML  page.  For  instance  you  can  drag  and  drop  the  image  to  where  you  want  to  place  it,  or  we  can  use  the  Insert  tool  in  the  Application  Bar  to  place  it  on  the  page.    

b. Whichever  option  is  used  may  require  some  tweaking  of  the  CSS  rules  in  the  CSS  files  for  that  HTML  tag  to  ensure  the  image  displays  properly.    

c. To  Drag  and  drop,  click  where  you  want  the  image  to  go  in  the  Design  view  of  the  HTML  page.  

i. Locate  the  image  in  your  Files  Panel,  click  once  and  hold  down  your  mouse,  Drag  the  image  to  where  you  want  the  image  placed.    

d. To  insert  the  image  click  where    you  want  to  place  the  image.    i. Click  on  Insert  in  the  Applications  Bar  ii. Choose  Images  >  A  dialog  box  pops  up  >  Browse  and  look  for  the  

image  to  be  inserted.  Type  in  the  Alternate  text  in  the  Image  Tag  Accessibility  Attributes  dialog  box  and  click  OK.      

Image  Tag  Accessibility  Attributes  dialog  box