Folder Templates for Photoshop

							Macromedia
Dreamweaver MX
Design Professional


WORKING WITH TEXT
              And Graphics
     Working with Text
     and Graphics
          Create Unordered and Ordered lists
          Cascading Style Sheets
          Insert and align Graphics
          Image enhancements
          Background images and
          site maintenance

Getting Started with Dreamweaver   Unit C      2
     Text as Lists

       Breaks up text
       Increases readability
     3 Types of Lists:
       Unordered
       Ordered
       Definitions

Getting Started with Dreamweaver   Unit C   3
     Cascading Style Sheets
       Save you time
       Ensure consistency
     2 Types of style sheets:
       Internal style sheets
       External style sheets
           (for applying to multiple pages)




Getting Started with Dreamweaver     Unit C   4
     Graphics
       Not too many!
       Not too few!
       Store in Assets folder
     3 Web graphic file formats:
       GIF
       JPEG
       PNG
Getting Started with Dreamweaver   Unit C   5
     Lists

           Unordered bulleted
           Ordered numbered
           Definition term + indented paragraph
           This slide is an example of an unordered list.
           What characteristics of this list improve readability?
           What other formatting might improve its readability?




Getting Started with Dreamweaver     Unit C                         6
     Create a List

     1.     Select paragraphs of text to be
            included in list
     2.     Click List button in Property
            Inspector
            This slide is an example of an ordered list.
            What characteristics of this list improve readability?
            What other formatting might improve its readability?



Getting Started with Dreamweaver     Unit C                          7
     Property Inspector




          unordered                                       ordered




                                   List Item properties

Getting Started with Dreamweaver      Unit C                        8
     List HTML
unordered list
“square” bullets

line items


close
line item

 </ul>
 close <ul>
Getting Started with Dreamweaver   (not shown)
                                      Unit C     9
     Cascading Style Sheets
   selector
   declaration




    property

     value


Getting Started with Dreamweaver   Unit C   10
     Internal CSSs
      save you some time…
      Change a property here…               Internal style sheet


                                            <selector>text</selector>

           …all text using that             <selector>text</selector>
           selector is updated              <selector>text</selector>
                                            <selector>text</selector>
                                            <selector>text</selector>




Getting Started with Dreamweaver   Unit C                               11
     External CSSs
     save you time…
      Change a property here…


                external
                (.css)



         …every page using the style sheet   .html
                  is automatically updated

Getting Started with Dreamweaver   Unit C            12
     Cascading…
        external              All styles are applied, but the property
                                              closest to the text wins!
                internal
                                          1. external style sheet
                                          2. internal style sheet

                                          3. inline     (These property values
                                                        override style sheets)

 <inline formatting>Affected                    Text</inline formatting>


Getting Started with Dreamweaver       Unit C                              13
       Create a Style Selector
List changes
According to
“Type”


“class” properties
can override any
selector properties

Standard HTML
tags get a new look


4 link states:
link
visited
hover
active
                           external            internal

 Getting Started with Dreamweaver     Unit C              14
      Declare a Style

.bullets

font properties




 Getting Started with Dreamweaver   Unit C   15
     Apply a Style


select text
then apply
a style…




      …to apply HTML style                  …to apply class style
                                            or CSS selector
Getting Started with Dreamweaver   Unit C                           16
     Apply an
     external style sheet


         Click to
         apply an
         external style
         sheet to this
         page




Getting Started with Dreamweaver   Unit C   17
     Insert and
     Align Graphics

           File formats
           Assets panel
           Image alignment




Getting Started with Dreamweaver   Unit C   18
     Graphic file formats

           GIF “giff” (not “jiff”)
           JPEG “jay-peg”
           PNG “ping”




Getting Started with Dreamweaver     Unit C   19
     GIF

           256 solid colors
           1 transparent color per image
           Animate gif files




Getting Started with Dreamweaver   Unit C   20
     JPEG

           16.7 million colors gradients and shadows
           No transparency
           No animation
           Lossy everytime you save a jpeg, the file becomes
                           smaller and loses quality




Getting Started with Dreamweaver        Unit C                 21
    PNG
           16.7 million colors gradients and shadows
           256 transparent colors per image
           Lossless




Getting Started with Dreamweaver   Unit C              22
     Assets Panel
    Stores & categorizes items you may re-use in
       several HTML pages:
          Images
          Colors
          URLs links
          Flash
          Shockwave
          Movies
          Scripts
          Templates
          Library

Getting Started with Dreamweaver   Unit C          23
     Assets Panel
  favorites

  thumbnail



 categories




Getting Started with Dreamweaver   Unit C   24
     Adding a graphic from the
     Site or Assets panel




           drag it!




Getting Started with Dreamweaver   Unit C   25
     Adding a graphic to the
     Assets panel


           Proofreading
           Window size
           Links


Getting Started with Dreamweaver   Unit C   26
     Aligning Images




         image alignment                    Text and image
                                            Alignment (<div>)



Getting Started with Dreamweaver   Unit C                       27
     Enhance Images

           Borders
           Space
           Alternate Text
           Modify the image and image size
           using an image editing program


Getting Started with Dreamweaver   Unit C    28
     Borders




                                   Border thickness



Getting Started with Dreamweaver        Unit C        29
     Space               horizontal and vertical



                                                   Vertical
                                                   space




             Horizontal
             spce

Getting Started with Dreamweaver      Unit C                  30
     Resizing Graphics
           Don’t resize graphics within a page
             – Smaller: file size unnecessarily large
             – Larger: image loses quality
           Reset Size matches height and width to source




Getting Started with Dreamweaver   Unit C                  31
     Background Images

           File size: small
           Image size: small for tiling
           Image size: large use style for white space, no tile
                                       and move with scroll

           Affects Readability



Getting Started with Dreamweaver   Unit C                         32
     Insert a
     Background Image


     select
     an image




Getting Started with Dreamweaver   Unit C   33
     Background Image
     using Styles



image
tiling

 follow?

 positioning




Getting Started with Dreamweaver   Unit C   34
     Remove non-Web-safe
     colors from Web site
     Web-safe
     color values
     include 3 pairs…




            …not safe!



Getting Started with Dreamweaver   Unit C   35
     Unit C Summary
           Create lists
           Create, apply and edit
           Cascading Style Sheets
           Insert and Align Graphics
           Add links
           Enhance images
           Add Background Image
           Remove unused images & non-Web
           colors

Getting Started with Dreamweaver   Unit C   36