GRA 1751 Web Design One (Graphic Interface Design One) Course handout revised by Sam Grant 01 /06

Transcription

1 GRA 1751 Web Design One (Graphic Interface Design One) Course handout revised by Sam Grant 01 /06 This course will teach students in the Design Technology program the basics of Web Page Design and Internet Architecture. It will introduce students to the design process and how it functions. Students will learn how to create for the World Wide Web with a standard web creation application (Dreamweaver), design and add several elements for other graphic creation programs (Fireworks) and combine those elements in an attractive and functional manner. This course will also expand students concepts of the practices and procedures for planning Web sites. Pre-requisites: Introduction to Internet Communication and Electronic PhotoShop. Special Fee: $30. (4 credits; 2 hour lecture, 4 hour lab, 6 clock hours/96 hours in total; 20 points.) Competencies: 1. The student will demonstrate an understanding of the history of the Internet by answering questions on a questionnaire. 2. The student will demonstrate an understanding of the structure of the Internet by correctly identifying the creation process form and function of several web sites. 3. The student will demonstrate non-linear thinking in design by creating a navigational chart of several real websites. 4. The student will demonstrate an understanding of web design processes by identifying the key team players and all stages of designing a website. 5. The student will demonstrate an understanding of information architecture and interface design by studying the creative work of other web designers and writing a report on the results. 6. The student will demonstrate an understanding of site creation procedures by creating 3 basic page designs in a web creation application. 7. The student will demonstrate an understanding of site creation procedures by placing text and images onto a web page using a web creation application. 8. The student will demonstrate an understanding of site creation procedures by placing hyperlinks and imagemaps onto a web page using a web creation application. 9. The student will demonstrate an understanding of site creation procedures by placing tables and layers onto a web page using a web creation application. 10. The student will demonstrate an understanding of site creation procedures by placing tags and form elements onto a web page using a web creation application. 11. The student will demonstrate understanding of the function of digital data collection by creating a submittal form in a web creation application.

2 12. The student will demonstrate understanding of the function of the World Wide Web Consortium (W3C) by researching its role in the development of new WWW technologies 13. The student will demonstrate understanding of the basics of animation by creating graphic rollovers in a graphics application. 14. The student will demonstrate understanding of the website link behaviors by designing a functional navigational system for a website using a graphics creation application. 15. Students will use checklists, questionnaires, and brief descriptive exercises, to create an overall site plan--which serves as one of the course projects. Students will then use this plan to create an actual website for the final project. TEXT The textbooks to be used for this course are: Web Design Workshop Robin Williams Peachpit Press ISBN and Dreamweaver MX H.O.T. (Hands On Training) Garo Green Peachpit Press / lynda.com books ISBN X SUPPLIES The following supplies will be required for this course: 1. One loose-leaf binder 2. Loose-leaf filler paper 3. Ball point pens. 4. Highlighter pen: Any color 5. USB Flash Drive (Minimum 64mb) 6. Assorted color markers, pens or pencils. 7. Layout paper/pad, 24 lb., 8 1/2-by-11 inches preferred. 8. One CD-R or CD-RW disc Note: Some of these supplies may have been purchased in an earlier course and may not need to be purchased again. CLASS ATTENDANCE GRADE Students are expected to attend every class regularly and to arrive on time for each class. Excessive absences and tardiness will affect the student s final grade average. It is the student s responsibility to make up class work and notes when absent or late for class. The attendance grade will be expressed as a percentage of the number of hours the class meets during the semester and will constitute one-quarter of the student s final grade.

3 MIDTERM GRADE A Midterm will be given. If you do not take the midterm (or test) on the assigned date, you will be given a make-up test and will lose 10 percent of your grade. If you are going to be absent and excused, you will be given a make-up test prior to the test date, and will not lose 10 percent of your grade. The midterm, combined with the projects (see Project Grades) will constitute one half of your final grade depending on whether a final exam is given. PROJECT GRADES Projects will have an assigned due date to be completed. If they are not handed in on time the student will lose 10 points off the grade. The projects will be graded on their neatness, completeness and accuracy of following instructions, and how well you completed the project objectives. FINAL EXAM The final exam will be given on the assigned date and is up to the instructor wether it is given. The average grade of all the projects and the midterm will be the determining factor. If you do not take the final exam on the required date you must make special arrangements with the instructor to take a make-up final exam which will be longer in length and you will lose 20 percent. The exam consist of the creation of a website with a set of predetermined functions and an oral presentation derived from the two textbooks and lectures given in class. The Final Exam grade will constitute one quarter of your grade. GRA 1751 is a basic web page creation course and is open to students who have met the necessary pre-requisites. A Special Fee applies. (4 credits; 2 hour lecture, 2 hour lab, 96 clock hours; 20 points.) Enough time is scheduled to complete the assigned projects during the regular hours of the course. GRADING SCALE The grading scale for all elements of this course is as follows: A = B = C = D = F = below 62. SAFETY Please observe the following safety guidelines: 1. Note evacuation routes and procedures posted by doors inside the lab. 2. A fire alarm consists of a triple horn/buzzer effect. When a fire alarm is sounded, please exit orderly and quickly. 3. Please enter and exit only through designated doorways. All other entrances are emergency exits only and an alarm will sound if they are opened. 4. A first aid case is located in room 3133 for minor injuries. 5. Retract the blade of the cutter when not in use. 6. Never eat, drink, or smoke in the lab. 7. Never touch any cabling without supervision.

4 8. Never cover the computer s ventilation holes with books, papers, etc. 9. Never expose diskettes to extreme temperatures or magnetic fields. Never touch the magnetic media with your hands. 10. Do not bring computer games or other programs to the lab. Do not boot the computer with a system diskette or disable the computer s virus checkers. 11. Do not attempt to Trash other students work on the server. Please be respectful of your fellow students. PERIODICALS 1. Wired, monthly magazine. 2. Interactive Magazine, bi-monthly magazine. 3. Computer Arts, monthly magazine. 4. Step by Step Electronic Design, monthly magazine. RESOURCES URL s that are of assistance in the completion of this course RECOMMENDED READING The Art and Science of Web Design Jeffrey Veen New Riders Effective Web Design, 2nd Edition Ann Navarro Sybex Dreamweaver MX : Training from the Source Khristine Annwn Page Macromedia Press Macromedia Dreamweaver MX : Visual Quickstart Guide J. Tarin Towers Peachpit Press Fireworks MX Fundamentals Abigail Rudner New Riders SEE YOU IN CLASS!

5 A Prelude to Web Design A Visual Glossary It s a Horizontal World Plan That Site Design is not the first step Functionality Organizing Your Content Workflow The Process Testing Maintenance Tips Idea Source Real World Examples The HTML Basics Tag Review The Science of HTML The MX Team The Macromedia Website Tour Integrating 2 WYSIWYG HTML editors Starting Dreamweaver MX The DW Workspace Tour Opening a web page in DW Creating and Saving Getting Help Previewing in Browser Creating A Site File in Dreamweaver MX Planning a website Creating a site folder Defining a site Adding folders Setting a home page Adding new pages Using Design Notes The Site Map view Developing a page layout in Dreamweaver MX Planning a page layout Creating HEAD content Setting Properties Formatting Text in Dreamweaver MX Creating and formatting text Importing text Text properties List properties Editing in Code and Design views Inserting Images, Links and Image Maps in Dreamweaver MX Gifs and JPEGs Creating hyperlinks to other pages and sites Creating Anchors links Web Design One Rough Course Summary Mid-Project: 3 page website AND Midterm Exam - Multiple Choice Starting Fireworks MX Tour of Fireworks MX environment Creating a Fireworks MX document Importing a image into FW Creating an image into FW Editing a bitmap image in FW Editing a vector image in FW Adding Special Effects Creating and Editing Frames in FW Adding text in FW Optimizing a graphic in FW Exporting a graphic from FW Javascript in Fireworks MX Creating Rollovers in FW Creating Hotspots and Slices in FW Creating Tables in Dreamweaver MX Rows and Colums Inserting and aligning Splitting and merging cells Formatting cell content Inserting and deleting rows Animation in Fireworks MX Planning an animation Animation from scratch with Frames Managing Frames Customizing your animation Optimizing your animation Exporting animation Templates and Library Items in Dreamweaver MX Designing and Saving Templates Creating pages based on Templates Modifying a template Saving items to the Library Editing the library items Inserting a library item into a page Intro to Frames in Dreamweaver MX Introduction to Cascading Style Sheets Uploading your Site with FTP in Dreamweaver MX Final testing in Local site Finding and registering with an ISP server Setting up FTP server access Uploading a site Adding and replacing pages on server Present Final 12 page website in Browser