ISM 206 Web Design and Development Spring 2006

Transcription

1 ISM 206 Web Design and Development Spring 2006 Instructor: Janice Knapp Office: 474 Bryan Building Voice Mail: Fax: Office Hours: M, W, F: 12:00-12:50 a.m. M, W: 3:15 4:00 p.m. And by Appointment Class Times: Monday, Wednesday & Friday: 1:00 1:50 p.m. Class Locations: Monday & Wednesdays: Bryan 202 Friday: Bryan 221(lab) Catalog Description: Students learn skills needed to design effective web pages by studying the best practices in site design and using leading-edge design and development tools and techniques. Course Objectives: This course is designed for students interested in learning how to design, develop and maintain a web site. Students will learn such web design and development steps as defining the purpose; researching and gathering information; creating a web structure; layout design with text, hyperlinks, images and tables; organizing page content and layouts; and creating dynamic pages; and adding rich media to the web site. Macromedia s DreamWeaver MX 2004 will be our primary site development tool used to create web sites. Other areas of focus will include design considerations as well as hyperlink and multimedia analysis. Additional applications such as Macromedia s Flash and Fireworks may be utilized time permitting. Students will refine skills by learning web design and development technologies through a series course assignments and projects focused on web project planning, layout, usability, learning different design styles, adding popup windows, forms, and CSS. As part of a final project, students are expected to design and develop a fully functional web site to add to their portfolios. Upon completion of the class, students will be able to: 1. plan a web design project: 2. design content and presentation of web sites 3. use design tools and strategies: 4. build web sites using Macromedia s Dreamweaver MX craft web page designs with CSS 6. design and develop interactive web sites 7. use special effects in web sites Required Textbook: 1. "New Perspectives on Macromedia Dreamweaver MX 2004, Comprehensive, by Kelly Hart and Mitch Geller, Course Technology Publishing, ISBN: Web Style Guide: Basic Design Principles for Creating Web Sites, Second Edition, by Patrick J. Lynch, Sarah Horton, Yale University Press, 2002, ISBN: Mid Term and Final Exams: We will have one mid term and one final exam. Each exam is administered in two parts. The first part of the exam is in class and close booked. The second part of the exam is open book and hands-on and is given in the computer 1

2 lab. Attendance on the date of exams is MANDATORY. No make up examinations are offered unless a written verifiable legitimate excuse for the absence is presented to the instructor. Final Project: You will work on a final web site design and development project for this course. This project is based on a real life case that requires the students to plan, design and develop a fully functional web site. Students are will be required to present their web site design and development final project to the class at the end of the semester. More details about the final project and the specifics of the presentation will be given during the course. Projects and Projects: This course is what is called a project intensive course. It means that assignments projects constitute a major portion of the requirements for this course. You are required to complete a number of assignments that I will provide you. More details will be forthcoming during the course of the semester. Each assignment or project is due at the beginning of the class on the scheduled due date. Students may not skip class to work on assignments. Excuses about the network, printers, or overcrowding in the labs, etc., will not be accepted. Please do not procrastinate on the assignments. The practice of meeting commitments is a fundamental obligation with meaningful consequences in a real work setting. There are no extra credit assignments. Instructional Methods: This course will be delivered by mixing lectures with hands-on computer exercises. In most classes a conceptual/theoretical lecture will be given on a selected topic related to databases. In some classes, the lecture is followed by hands-on exercises. To enhance learning both elementary and advanced web design issues, techniques and concepts covered in this course, we will rely on the textbooks, class lectures, class discussions, in-class exercises, and lab exercises. Homework assignments and class projects challenge the student to apply the knowledge learned in class. Relationship to other ISOM courses: It is the philosophy of the ISOM department to help students develop an appropriate background and critical skills needed to function effectively in a global, technology-driven environment. Knowledge of web site design and development concepts are an integral part of achieving this goal. To succeed in this course, students must utilize the problem solving and critical reasoning skills that they have acquired as part of their education here at UNCG. The course, in turn, provides web site design and implementation skills as well as other problem solving skills that students can use to succeed in their future academic and professional careers. Attendance Policy: Each student is responsible for all the information and announcements that are made in class. Poor performance in this course is directly related to poor attendance. Students are expected to conduct themselves in a professional manner. A professional shows up for scheduled meetings prepared and on time. Any student missing the first two classes without notifying me will be administratively dropped from the course. Oral and Written Communication Content: Information Systems involves a dynamic environment with constant attention to changes. Active study and discussions enhance the classroom learning. Students are encouraged and expected to come to class prepared to ask questions and to answer a few. Effective written communication is stressed through the required assignments. Furthermore, exams may include an essay question component. Ethical Perspectives: The ultimate goal of a database project is to be able to more effectively manage information in decision-making. The importance of ethical decisions will be addressed in many of the topics covered throughout the course. Global Perspectives: Globalization is a primary objective of the Bryan Business School. However, the discussion of globalization is beyond the scope of this course. 2

3 Technology Applications: Technological advances in databases are addressed throughout the course. Demographic Diversity Perspectives: This course will not specifically address the issue of demographic diversity. Political, Social, Legal, Regulatory, and Environmental Perspectives: The political, social, legal and regulatory issues surrounding the ownership and use of data, and the users rights as they pertain to the database environment will be discussed Ethical Issues and the Honor Code Policies: University students are expected to conduct themselves in accordance with the highest standards of academic honesty. Academic misconduct for which a student is subject to penalty includes all forms of cheating, such illicit possession of examinations or examination materials, forgery, or plagiarism. Students will NOT make, borrow, or "share" copies of their lab assignments or files with other students. Plagiarism is defined as "presenting as one s own work that work which is, in whole or in part, the work of another person or persons without giving proper credit to the appropriate source." This includes submitting work done by another, as one s own work. It is understood that what you turn in to me for grade represents your own effort. Plagiarism will be immediately punished with a grade of zero for the assignment in question. Further disciplinary action will be pursued as I deem appropriate. Helping one another is allowed, but copying is cheating. This practice is against the UNCG Honor Code and defeats the purpose of this course. No credit will be received for shared work, and other penalties may be imposed. Inclement Weather: Rarely, UNCG closes for inclement weather. The radio and TV stations will have the closing notification by 6:30 am. You may also call for a message related to weather closings. These messages are updated hourly. Grading: Grades for the course are based on tests and lab assignments. The course grade will be calculated using the following weights: Deliverable Points Assignments and Other Projects 300 points (30%) Exams (2) 400 points (40%) Final Project 300 points (30%) Total 1000 points (100%) The final grade is determined using the following scale: : A : A : B : B : B : C : C : C : D : D Below 650 : F Special Dates: Jan. 16 Mar. 15 Apr. 14 May 2 Martin Luther King Day, No class Last Day to Drop Without Academic Penalty Spring Holiday Last Day of class 3

4 Tentative Course Outline* ** Week Of: Topic Readings and Deliverables Week 1 1/9 Introduction to class Understanding the Internet and web site issues Introduction to Dreamweaver MX 2004 NP: Tutorial 1: Sections 1.1, 1.2 WSG: Chapter 1 Down load Student Files for Tutorial 1-7. Week 2 1/16 Week 3 1/23 Week 4 1/30 Week 5 2/6 Week 6 2/13 Week 7 2/20 Introduction to Site Design Process Planning and Designing a Successful Web Site. Adding and Formatting Text, Interface design Adding and Formatting Text, Site design Organizing Page Content and Layout, Site design Adding Shared Site Elements. Page design Adding Shared Site Elements Page design NP: Tutorial 2: Sections 2.3 WSG: Chapter 1 NP: Tutorial 3: Sections 3.1, 3.2 WSG: Chapter 2: Assignment 1 Due (Jan. 27) NP: Tutorial 3: Sections 3.3 WSG: Chapter 3 NP: Tutorial 4: Sections 4.1, 4.2, and 4.3. WSG: Chapter 3 Assignment 2 Due (Feb. 10) NP: Tutorial 5: Sections 5.1, 5.2. WSG: Chapter 4: NP: Tutorial 5: Sections 5.3 WSG: Chapter 4: Page design Week 8 2/27 Mid Term Assignment 3 Due (Feb. 27) Mid Term written: Mar. 1 Mid Term lab: Mar. 3 Week 9 3/13 Week 10 3/20 Week 11 3/27 Week 12 4/3 Week 13 4/10 Week 14 4/17 Week 15 & 16 4/24 5/1 Creating Dynamic Pages Typography Creating Dynamic Pages. Typography Adding Rich Media to a Web Site Editorial style Adding Rich Media to a Web Site. Graphics Adding Rich Media to a Web Site, Multimedia Prepare for Final Project Presentations of Final Projects (Spring Break Mar. 6 10) NP: Tutorial 6: Sections 6.1, 6.2. WSG: Chapter 5: One page proposal for final project due (Mar. 17) NP: Tutorial 6: Section 6.3. WSG: Chapter 5: Typography NP: Tutorial 7: Section 7.1. WSG: Chapter 6: Assignment 4 Due (Mar. 31) NP: Tutorial 7: Section 7.2. WSG: Chapter 7: NP: Tutorial 7: Section 7.3, and Appendix A WSG: Chapter 8 Assignment 5 Due (Apr. 14) 4

5 * This course outline is tentative and deviations from this outline may become necessary. We will make every attempt to follow this outline. ** NP: refers to New Perspectives on Macromedia Dreamweaver MX 2004, Comprehensive, text book. WSG: refers to Web Style Guide: Basic Design Principles for Creating Web Sites. Tutorial 1: Introducing Dreamweaver MX 2004 This tutorial introduces the Internet and the terminology associated with it. It then explains some of the issues that designers consider when the design Web sites. Finally, it introduces Dreamweaver and has the students explore the various parts of the Dreamweaver program window. Tutorial 2: Planning and Designing a Successful Web Site In this tutorial, students learn how to plan a cohesive Web site. Students learn how to identify the target audience by conducting market research and creating end-user scenarios. Next they learn how to design the information architecture, create a flow chart of the site, and design the navigation system. Then, they learn some of the concepts behind creating an aesthetically pleasing site that will appeal to the target audience. Next students put their plan into action by setting up the new Catalyst Web site, creating a site definition, and adding Web pages that map to their site design. Then they review the HTML tags that Dreamweaver created when they created and formatted their pages, and apply page properties to those pages. Finally, they preview the site in a browser, and upload the site to the remote server. Tutorial 3: Adding and Formatting Text In this tutorial, students learn how to add text to a Web page and then format it. They learn how to apply direct formatting and how apply built-in styles, and how to create and apply new styles. They learn the difference between HTML and CSS styles. They also examine the HTML code behind HTML tags for text and hyperlinks and the code behind a CSS style sheet. Finally, they upload their modified site to the remote server. Tutorial 4: Organizing Page Content and Layout In this tutorial, students learn how to add graphics and tables to their Web site. First, they insert graphics and format them. Then they learn how to create an image map with hotspots. Next, they learn how to create rollovers. The students then learn how to create and modify tables in Standard mode and in Layout mode. They also learn how to use tables in Layout mode to help them lay out a page. Finally, they upload their modified site to the remote server. Tutorial 5: Adding Shared Site Elements In this tutorial, students learn how to insert and modify a navigation bar. Then they learn how to create a Web page that uses frames and how to adjust the frame properties. Next students learn how to add content to frames and how to target hyperlinks to open in a specific frame. Finally, they examine the HTML code behind frames and upload their modified site to the remote server. Tutorial 6: Creating Dynamic Pages In this tutorial, students learn how to add layers and behaviors to their Web site. First they learn how to draw a layer. Next they learn how to create nested layers and how to reorder layers by changing the z-index number. They also learn how to align layers. Next they learn how to convert layers to tables. In the last session, they learn how to assign a behavior to a hotspot. Then they upload the revised site to the remote server. Tutorial 7: Adding Rich Media to a Web Site In this tutorial, students learn how to add media to their Web site. First they learn how insert a Flash movie; then how to add Flash text and Flash buttons. Next, they learn how to add a Shockwave movie to a page. Then, they learn how about adding sound to a site and how to insert sound into a page using Flash and how to link to 5

6 an MP3 file. Finally, they learn about adding video to a site and they add a RealMedia video to a page. Then they upload the revised site to the remote server. Appendix A: Introduction to Fireworks MX 2004 Chapter 1: Design Process Chapter 2: Interface design Chapter 3: Site design Chapter 4: Page design Chapter 5: Typography Chapter 6: Editorial style Chapter 7: Graphics Chapter 8: Multimedia 6

7 * This syllabus is subject to change upon request of the instructor * 7