Web Design - Weekly Agenda >

Home Syllabus Outline Competencies ESLR Activities Resources Students Instructor

Activities Inline Frames Frames Image Swap Number Systems Adding Sound Working with color CSS Flash		REVIEW Material: Computer Basics presentation. Windows Basics presentation. Windows Quiz - take the self-assessment Review your Windows skills with the PC/Mac-Task Performance Guide and/or try the Windows Basics Pre-Assessment document. Introduction to The Internet and World Wide Web Seven Steps to Better Searching Browser Skills Pre-assessment WEB DESIGN Careers The Dreamweaver CS3 Interface ADDIE - a common design model: Thumbnails & Storyboards (class handout ) Examples of a set of thumbnails and a storyboard thumbnail/storyboard template The 4 Principles of Design: PARC Web Site File Management Graphic Definitions (class handout ) Photoshop Basics (class handout ) Use the "How to... create graphics of uniform size" to assist you in preparing both the thumbnail graphics and their large counterparts. Quiz files from 1st semester: - you are responsible for this knowledge... - it will be included in your year-end written final Internet Quiz Browser Quiz Search Quiz Acrynym Quiz Dreamweaver Interface Quiz Property Inspector Quiz ^ 1 - Inline Frames <iframe></iframe> An iframe element creates an inline frame (HTML container) within the natural flow of a document's content. The frame is a rectangular space into which you may load any other HTML document or graphic. If you assign a value to the "name" attribute of an iframe element, you may supply that name as the value of a "target" attribute of the anchor tag <a>, thus directing the document to open within the targeted frame. Inline Frame exercise iFrame screenshot ADDIE info (The Design Process) ADDIE Site assignment ^ 2 - Frames <frame></frame> The frame element defines properties of an individual window space that is some fractional portion of the entire browser window. A frame element must be defined within the context of a "frameset" element <frameset></frameset>. A browser treats a frame as a separate browser window within the browser application's window. As such, each frame window can load its own content (HTML file), independent of other frames. Dreamweaver Lesson 9 - Frames Frames lesson instructions Frames exercise Frames assignment: Vacation Site ^ 3 - Image Swap Unlike the standard rollover behavior, the "swap image" JavaScript behavior allows you to rollover one image resulting in the swapping of a different image in a different location on the page. This technique is ideal for setting up photo galleries and similar types of page content - where the visitor rolls over a thumbnail image resulting in the display of a larger version of the thumbnail in a nearby location. Image Swap example Image Swap Lesson Image Swap Exercise: Create a single HTML page on a subject of your choice, incorporating an image swap. You must use at least 4 graphics. The page design is your choice - make it interesting if you want a grade better than a C. Prepare your graphics in Photoshop - compress your graphics using "Save for web..." Use the document below to help to create large graphics and thumbnails of uniform size. Photoshop technique: How to create graphics of uniform size ^ 4 - Number Systems - Binary and Hexadecimal Binary (base-2 numbering system) Computers only understand two conditions: on and off - either the electrical switch is on (and electrons can flow) or the electrical switch is turned off (and the electrons can't flow). Computers can throw a lot of switches VERY quickly. The condition of any switch is called a bit (short for binary digit) - it is the smallest piece of datum a computer can read. To represent this two-state system we use a base-2 numbering system (it only uses two values; 0 and 1) Hexadecimal (base-16 numbering system) In the world of computers it's more convenient for humans to represent very large numbers with only a few symbols. The hexadecimal numbering system refers to a base-16 number system, which consists of 16 unique symbols: the numbers 0 to 9 and the letters A thru F. This system is useful because it can represent every byte (8 bits) as two consecutive hexadecimal digits. It is easier for humans to read hexadecimal numbers than binary numbers. You may have noticed that hexadecimal numbers are used in HTML documents when referencing colors (each color in the RGB color model is represented as a two-digit hexadecimal number. In the example: 3366FF the first two digits assign a degree of red, the next two digits reference green and the last two digit hexadecimal number refers to the amount of blue to be added to the mix. Number Systems Number Systems Exercise ^ 5 - Adding Sound (audio) Linked sound: Native audio files (ex: wave files) are huge and must first be compressed before publishing them to the Web. Most sound delivered via the web has been compressed using one of the following two compression schemes: .mp3 (MPEG - Motion Picture Expert's Group, layer 3) .wma (Windows Media Audio - a Microsoft format) Generally, files compressed with either of these compression schemes are simply referred to as MP3's. Their behavior is essentially identical. The "linked sound" method of adding audio to your pages simply provides the visitor with the option to click on a link and have the audio file open in their local media player. The visitor then controls the sound using their player. Here are two examples of linked sound... Beethoven's Symphony #9 New Stories (Highway Blues) Embedded sound: This method, as the name implies, embeds the sound into the page as a background sound; the sound file begins playing when the page is loaded into the browser, and will stop playing when the page is closed. In addition, this procedure places a plugin object on the page in the location of the insertion point. To give the visitor controls on the page, size the object as desired. If you wish to hide the controls from the visitor, set the width and height to 1 x 1, or insert the tag attribute hidden="True" Click here for an example of embedded sound To add an embedded sound follow these steps: Locate your insertion point where you want the plugin controls to appear Select Insert / Media / Plugin Locate the sound file of choice (you may need to change Files of type: to "All Files") Use the Properties Inspector to size the object Audio Exercise ^ 6 - Working with color COLOR MODELS: CYMK / RGB / Indexed / Web-safe CMYK - Cyan-Magenta-Yellow-Black. CYMK is "reflective" color - it is experienced as a result of light reflecting off of a solid surface (such as a piece of paper). This color model is used for hardcopy print. RGB - Red-Green-Blue. RGB is "projected" color - it is experienced as a result of light projected from a monitor screen directly to your eye. This color model is used for delivering content to a monitor screen (this would include web content). Both color models have the capability of delivering full color to its targeted medium (print or screen). Indexed color - The indexed color mode is simply a limited selection of RGB colors, often referred to as a "palette," of up to 256 (8-bit) colors. Web-safe color - Web-safe colors (or Browser-safe colors) are a collection of 216 colors that are guaranteed common between all browsers and operating systems. Use web-safe colors if you want to be sure that your color scheme looks the same on all computers throughout the world! In Photoshop, to limit your color selection to web-safe colors, check the box in the lower left corner of the "Color Picker" dialog box. When assigning colors using hexadecimal values, restrict your color assignments to web-safe colors by combining only the following 2-digit numbers: 00 33 66 99 CC FF Any combination of these values will result in a web-safe color. For example #339999 or #FF0000 For an online color chart of web-safe colors, visit the following URL: http://www.web-source.net/216_color_chart.htm and scroll to the middle of the page. COLOR Quiz ^ 7 - CSS (Cascading Style Sheets) Cascading Style Sheets is a technology for formatting HTML documents; both text formatting and layout (positioning). There are three types of style sheets that "cascade" in their order of inheritance (inheriting or over-riding assigned styles): External - used to control multiple (attached) pages Internal - used to control a single HTML page Inline - used to control a single HTML element Inline styles will over-ride any matching intermal or external styles, and internal styles will over-ride any matching external styles. External styles will over-ride any default browser styles. A CSS "class" applies a set of chosen properties to a class name of your choice (lowercase, no spaces). You can then used the HTML "class=" attribute to apply the class to an HTML tag. CSS page layout (positioning) uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to position content on a web page. The basic building block of a CSS layout is the div tag—an HTML tag that in most cases acts as a container for text, images, and other page elements. When you create a CSS layout, you place div tags on the page, add content to them, and position them in various places. Unlike table cells, which are restricted to existing somewhere within the rows and columns of a table, div tags can appear anywhere on a web page. You can position div tags absolutely (by specifying x and y coordinates), or relatively (by specifying their distance from other page elements). CSS - General Info CSS Quiz CSS Tutorial (an online tutorial resource) Dreamweaver Reference #10 (Dreamweaver and CSS) CSS Lesson _______________________ 1) Copy the "CSS Lesson" folder from the Shared Folder to your own local My Documents folder. 2) Open Dreamweaver & create a site definition as follows: Site name: CSS Lesson Local folder: My Documents\CSS Lesson Lesson Objective: Using the Dreamweaver Reference document provided above (#10 in the series), your objective is to format the three pages provided with examples of all three style sheets. NOTE: place YOUR NAME in the title of each of the three pages provided! 3) Open external.html and create an external style sheet using your first name as the file name (refer to Dreamweaver Reference #10 document for instructions on how to do this). Apply formatting of your choice for the <h1>, <body> and <p> tags: 4) Open internal.html and attach (link) this file to your external style sheet (see Dreamweaver Reference #10). Apply an internal (embedded) style that changes the format for all <h1> tags to something different from what was assigned in the external sheet. 5) Open inline.html and attach this file to your external style sheet. Create an inline style that changes only the 3rd occurence of the <h1> tag to something different than previously assigned (see Dreamweaver Reference #10). 6) Add simple navigation to the top of each page; linking all three pages together for easy access when viewing in the browser. 7) Lesson Evaluation: Call me to your workstation once you are sure you are finished and I will check your work. __________________________________ CSS Exercise - try this hand-coding activity! CSS Site Assignment ^ 8 - Flash Flass CS3 Interface Object Hierarchy Animation Basics Assignment: Motion Graphics Advertisement Button Basics Assignment: Flash Final ActionScript 2.0 reference ^ 9 - ^ 10 - ^ 11 - ^ 12 - ^ 13 - ^ 14 - ^ 15 - ^ 16 - ^ 17 - ^ 18 - ^ 19 - ^ 20 - ^ 21 - ^ 22 - ^