Clarke Steinback Ph.D. Web Page Design APCG 360 Fall 2006 Samples

2006 Fall ->Web Page Design ->Samples Basic HTML    Basic Lists    Font Tag    Image Tag    Tables    Design with Tables    Windows    Styles - Implementation    Styles - Font Properties    Styles - Basics    Styles - Cascading Styles    Styles - Anchor Tags (Links)    Mouseovers - Basic Images    Mouseovers - Images    CSS Tutorials    HTML Forms    Basic HTML Top of Page Sample 1 Basic HTML - Headings, Horizontal Rules Sample 2 Basic HTML - Centering, tag attributes Sample 3 Basic HTML - BODY attributes Sample 4 Basic HTML - Preformatted text Sample 5 Basic HTML - bold, big, blink, italic,... Basic Lists Top of Page List 1 Basic unordered list List 2 Basic ordered list List 3 Nested lists List 4 Nested lists List 5 Nested lists List 6 Nested lists List 7 Definition lists Font Tag Top of Page Font Tag Basic Font Tag Image Tag Top of Page Image Tag Basic Image Tag Tables Top of Page Basic Tables Basic HTML - Tables Table Fitting Sample of fitting images together in a table Design with Tables Top of Page Final Page Design goal Logo Only Basic table to hold the logo Logo Only w/o Margins Better page for logo - remove margins Adding Curve Graphics Start navigation and content areas - just the curve graphics Add Content Area Add basic content area Add Navigation Area Add start of navigation area Navigation Only Separate table for navigation only Add Navigation Add navigation to overall page - looks done, but wait.... Add More Content Add more content - creates a problem Fix Extra Black Lines Add repeating background image to navigation table to fix some of extra black lines Borders to the Rescue Use borders to see where the problem resides Fix More Extra black Lines Add repeating background image to curve table data to resolve Final Page Turn off borders and final page Note that the final page differs slightly from the original target page, just to show you can create the page with slightly different coding. Windows Top of Page Basic Pop-Up Window Javascript Pop-Up Window - basics Pop-Up with focus Javascript Pop-Up Window with Focus Styles - Implementation Top of Page Inline Simple inline style example Embedded Simple embedded style example External Simple external file style example Styles - Font Properties Top of Page Font and Text Style font and text properties Styles - Basics Top of Page Styles Basic Style - embedded style commands Style Class 1 Basic Style - class definition and examples Style Class 2 Basic Style - class definition and mixed examples Style Class 3 Basic Style - class definition and mixed examples Style Class 4 Basic Style - class definition and mixed examples Styles - Cascading Styles Top of Page Cascading 1 Global and inline, margins, backgrounds Cascading 2 Global and inline, margins, backgrounds Cascading 3 Global and inline, margins, backgrounds Cascading 4 Global and inline, margins, backgrounds Cascading 5 Global and inline, margins, backgrounds Styles - Anchor Tags (Links) Top of Page Link Styles Samples of anchor tag (link) styles Mouseovers - Basic Images Top of Page Change Image Mouseover an image calling Javascript function to change image Swap Images Mouseover function to swap images Swap Images Use a mouseover function call with parameter to set the status line Swap Images Mouseover functions removing annoying line in Mozilla/Netscape Mouseovers - Images Top of Page Multiple Images Mouseover functions with multiple links and images Multiple Images Mouseover functions with multiple links and images Multiple Images Mouseover multiple links and images Change with Names Mouseover multiple links and images with object names Change with Objects Mouseover object names and eval experssion More Mouseover More mouseover samples More Mouseover More mouseover samples CSS Tutorials Top of Page Two Column Two columns column with color Liquid Layouts Liquid Layouts with CSS Various Layouts Various CSS layouts to consider CSS Tutorials W3Schools CSS Tutorials Changing Visability Show/Hide elements dynamically on in a page CSS Rollovers CSS Fast mouse rollover effects CSS Buttons CSS Inline Buttons CSS Effects Various layout and menu effects implemented in CSS HTML Forms Top of Page Forms HTML Forms Text Input Samples HTML Forms - Text Input Samples Textarea Samples HTML Forms - Textarea Samples Select Sample 1 HTML Forms - Simple Selection 1 Select Sample 2 HTML Forms - Simple Selection 2 Select Sample 3 HTML Forms - Simple Selection 3 Radio Buttons HTML Forms - Radio Button Example 1 Radio Buttons HTML Forms - Radio Button Example 2 Checkbox Example HTML Forms - Checkbox Example Form Examples W3Schools Form Examples 2006 Fall Video Game Design Web Page Design Assignments Calendar Gradebook Syllabus Samples Portfolio Video Game Project

Web Page Design | Assignments | Calendar | Gradebook | Syllabus | Samples 2006 Fall | Video Game Design | Web Page Design | Portfolio | Video Game Project CSU, Chico: Home | Admissions | Bookstore | Catalog | Schedule | Library | Help Applied Computer Graphics Program Department of Computer Science California State University, Chico Chico, CA 95929-0410 530.898.5418 ranger@ecst.csuchico.edu This page and its contents © 2006 Clarke Steinback Maintained by .  Developed by Diverse Network Associates, Inc. .