Week #4

• make a link to a digital version of your completed client survey and all of your css layout examples on your homework page and post a link to the homework page to the comments section of this blog post (just to make it easy for me) thank you. We'll talk about them in class


• Quick Lecture on how to structure your files


• Discovery Phase: How to Write A Creative Brief
  three sections:
  
  • what is it, what will it do?
  • style
  • technical specifications
  
  
  
  
  


• here's an example from one of mine

  ======================|Overview|======================
  This estimate includes the details for designing and implementing an elegant and
  beautiful website for the Drawing on Film exhibition including a blog, an interactive
  flash home page module, and multimedia info about the artists and works included in
  the exhibition. The lead designer will be Catherine (Katy) Garnier, a multimedia artist
  with a particular passion for and knowledge of the history of direct film including
  many of the artists in the exhibition. The design will express the spirit of the
  exhibition and be a key communication tool for the drawing center and subsequent
  venues. The site will allow DC staff to maintain the site and upload new content
  through WordPress. Our numbers are based on our hourly rates of $100/hr for
  design and WordPress php coding.
  ===================|Technical Standards|==================
  The web site will conform to current best practices and standards for professional
  quality web sites. It will be optimized for the latest versions of Microsoft Internet
  Explorer, Safari, and Firefox along with the latest version of the Flash plug-in. It will
  also maintain a consistent appearance (to the extent practicable) on both the Mac
  and Windows platforms.



• User Types, Task Analysis, Competitive Analysis


• Now we can talk about someone's users while using this cool web based white board




• Live Text vs. Graphic Text, Foreground vs. Background Image





• PRESENTATION REVIEW:
  
• CSS Beginner Tutorial, CSS Intermediate Tutorial


• The Document Tree


• Selectors




• Type Selectors (also called element or simple selectors)


• Descendant Selectors


• Class and ID Selectors


• Pseudo-classes


• Universal Selector


• Child and Adjacent Sibling Selectors (Advanced)


• Attribute Selectors (Advanced)




• Cascade, Specificity and Inheritance


• Advance CSS Rule practice
  
  1. bare with me, you will be very glad near the end of your semester when you are writing specific rules to make tiny tweaks to your design if you know this stuff backwards and forwards
  
  
  2. Look at this silly example page that we will use
  
  
  3. Now, lets open this example page and use it to get some practice in-- lets try these:
     
     
     
     • make the word "even" red in one rule without also making the words "random" and "bananas"
     
     
     • make the words "stone age village" and only those words be red as simply as possible
     
     
     • make only the second "mushroom" be red as simply as possible
     
     
     • make the word 'animals' blue and nothing else
     
     
     • make the first link on the page have no underline while the second one keeps its underline
     
     
     
  
  
  
  
  
  


• Fun with background images
  
  
  
  • This site has good examples of many things that you can do with a background image.
    
  • lets play with background image position a little
  
  
  • How to do Rounded Corners
    
    • 
      My Bookmarks on corners
    
    
    • Lets try getting this to work in class
    
    
    • shadows on boxes -- we can look at the example on my site where this image gets inserted by this rule

      div.projectsimg {
      float:left;
      width:236px;
      height:79px;
      background-image:url(images/shadow.png);
      background-repeat:no-repeat;
      margin:0px 25px 10px 14px;
      padding:0px 0px 12px 12px;
      background-position:12px 3px;}
      

    
    
    
    
  
  
  
  
  
  



• 
  

  HOMEWORK

  
  
  • create a creative brief for your client and a competitive analysis of 3 - 5 sites that are like your clients site
  
  
  • Pick on part of your Bill of Rights document or your homework page and add rounded corners using one of the techniques we talked about