Week 21 Vocab and Terminology

Class hours: 9:40am – 2:05pm
Mr. Cronin
Mr. Herr

XHTML/CSS

  • Lists are used to organize content on a web page.  They can be ordered (numeric) or unordered (dots).  Lists in web design have other uses including for website navigation; a list of links.
  • Ordered lists are created with “<ol>” and closed with “</ol>”, with the o standing for ordered.  Unordered lists are created with “<ul>” and closed with “</ul>” with the u standing for unordered.
  • Regardless of ordered, or unordered, individual list items are created with “<li>” and “</li>” with the listed item going in-between.  Each listed item will be its own number, or its own bullet depending on the list that you use.
  • There are 3 valid ways to add styles to a website:
    • Inline Styles – the least preferred method.  In this method styles are placed in the individual tag in an xhtml document.
    • Embedded Styles – better than inline, but not ideal.  In this method the style rules for a document are placed in the head of a web page in “<style>” tags.
    • External Styles (CSS) – the web design best practice.  In this method the styles for an entire website are stored in an external file.  By managing your styles in this method, you can quickly change stylistic decisions for a website ranging from 1 page to infinite pages using a single CSS file.
  • CSS stands for Cascading Style Sheet.  It refers to the external file used to store style rules for a website.
  • Styles have an order for application.  Each is more powerful than the next.  This method of style precedence means that you can make “quick and dirty” style decisions on a page-by-page, or tag-by-tag that the override the external stylesheet.  This is often referred to as “cascading effect” of styles.
  • The <link> tag is used to connect a xhtml document to an external stylesheet.  It is closed and opened in the same tag.  It is created as follows:
    • “<link type=”text/css” rel=”stylesheet” media=”all” href=”locationOfFile” />
  • Style rules are declared in the following way:
    • selector{property:value;}
      • The selector chooses which element you want to style: “p” for paragraph, “img” for image, “h1″ for headings size 1.
      • The property chooses what you want to change: background, color, margin.
      • The value gives the specifics: black, 2em, 20px, center.
  • There are two types of links in web design:  Relative vs. Absolute.
  • Relative Links link to a file in relation to the file you are linking from.  For example:
    • <a href=”home.html” title=”Link to Homepage”>Home</a> creates a relative link to “home.html”.
    • <img src=”images/banner.jpg” alt=”Banner Image” /> creates a relative link to the image “banner.jpg”.
  • Relative links have both advantages and disadvantages:
    • Advantages – slightly faster than absolute links as the web browser does NOT have to access a server to find the page/image.  It simply looks to the files and folders relative to its location.
    • Disadvantages – if you move this file, the files relative to it will not be there anymore.  All of a sudden what was working can become non-functional.
  • Absolute Links link to a specific file and server location.  For example:
    • <a href=”www.cawdvt.org/home.html” title=”Link to Homepage”>Home</a> creates an absolute link to “home.html”.  Notice the inclusion of the domain name at the start of the link.  
    • <img src=”www.cawdvt.org/images/banner.jpg” alt=”Banner Image” /> creates an absolute link to the image “banner.jpg”.  Again notice the domain name. 
  • Absolute Links have both advantages and disadvantages:
    • Advantages – links to specific file on a server.  Even if you move the file with the link around, the link to a specific file on a server means that it will work or “resolve”.
    • Disadvantages – because the browser has to access the server to reload the domain name with each link, it is slightly slower than a relative link.  You should try to use relative links as often as possible to make your website load as fast as possible for users.  Nobody likes a laggy website. 

Flash

  • Importing content in Flash is done by hitting “file->import” or hitting “ctrl+r”.  Examples of digital assets that can be imported into Flash to use include sounds, images, movies, etc.
  • Sounds are used in Flash for animation and multimedia productions, such as background audio for a Flash animation or sound effects for a Flash game.
  • Once a sound is in Flash, you may adjust the “sync” setting to change the way the sound plays.  The “syncs” we will focus on are:
    • event – the sound will play again whenever the playhead hits the frame with the sound.  In a looping animation the sound will play over and over, potentially overlapping on itself.
    • start – the sound will play fully, and only play again after the sound finishes.  This will prevent sound from overlapping, but could mean that your visuals don’t always line up with the audio.
    • stream – the sound plays only on the frames the sound wave appears.  If there are not enough frames for the sound to play fully, the end of the sound will be cropped.
  • The “<object>” code is used to add Flash movies (.swf files) validly into xhtml documents.
 
 
copyright © 2004 - 11 cawd by steven herr. all rights reserved