Prerequisite: CGA 101, or written permission of instructor.

Transcription

1 Salem Community College Course Syllabus Course Title: Web Page Design Course Code: CGA 140 Lecture Hours: 2 Lab Hours: 2 Credits: 3 Course Description: Web Page Design will introduce the student to basic HTML, XHTML & CSS code, text editors, Web authoring software, and browsers for use in designing page layouts for the World Wide Web on a Macintosh operating system. TextEdit (text editor) will be used to create very simple pages with HTML, XHTML & CSS code, manipulate fonts, colors, tables, divs & links. Additionally, Adobe Dreamweaver will be utilized to build web pages. Plans for organizing a site, discovery of what constitutes good and bad design, and web definitions will be introduced. A working knowledge of Adobe Photoshop is a must since this program will be used for all image manipulation and editing associated with making web pages. Place in College Curriculum: This course is required for the Associate in Science with an option in Computer Graphic Art program, the Associate in Fine Arts with an option in Digital Media program, or may be taken as an open elective. Prerequisite: CGA 101, or written permission of instructor. Date of Last Revision: October 2011

2 Course Outline I. Web Overview A. Terminology B. Browsers C. Web authoring II. Design A. Comparing web sites 1. Bad design 2. Good design B. Print vs. Web C. Good Design Guidelines III. The Basics Using HTML & CSS A. Making a Web Page B. Organizing, Naming & Saving C. HTML, XHTML & CSS D. Text Editors 1. Page code 2. Text code 3. Backgrounds, color code E. Adding images F. Adding tables G. Linking for navigation H. Browser display I. CSS style rules J. Adjusting HTML & CSS code IV. Dreamweaver A. Accessing the program B. Defining a site C. Using panels D. Accessing drop-down menus E. Saving & exiting the program F. Planning a site G. Creating templates H. Building a site V. Create Web Sites A. HTML & CSS B. Dreamweaver VI. Printing A. Text Edit B. Browsers C. Dreamweaver VII. Publishing Web Pages A. Free web hosting

3 B. Using FTP client C. Using Dreamweaver VIII. Search Engine Optimization (SEO) A. Titles and H1 tags B. Site maps C. Google Webmaster tools IX. Content Management Systems (CMS) A. Free CMS sites B. Through Dreamweaver C. Browser interface X. Web site critique A. Sign up for a Blog B. Locate 3 sites with good design C. Locate 3 sites with bad design D. Analyze aspects of all 6 and post to Blog

4 Course Performance Objective #1: Following lectures on web design, students will discuss the key components that comprise good page layout design. 1. visit a variety of web sites to discover components of good and bad web design. 2. discuss how web design has evolved since the 1990s to the present. 3. explain the differences between good design and bad design. 4. analyze and discuss the basic design principles of proximity, alignment, repetition, and contrast. Course Performance Objective #2: The student will demonstrate an ability to create web pages using HTML and CSS code with a Text Editor. The finished web pages will be viewed online, printed and included in the class portfolio notebook. 1. begin and end an HTML document using basic code. 2. add a heading and title to the HTML document and display the results in a browser. 3. format text in the HTML document changing the size, font, and color and will display the results in a browser. 4. prepare images in Photoshop to save for web as either GIF, PNG or JPEGs for display on the web page. 5. insert images on the web page, wrap text around the images, align the images, and use images as backgrounds in the HTML document, then display the results in a browser. 6. demonstrate using tables in the HTML document to organize text in the page layout and display the results in a browser. 7. demonstrate using divs in the HTML document to organize text in the page layout and display the results in a browser. 8. demonstrate using links in the HTML document to navigate from one page to the next using a browser. 9. print completed pages from the web browser. 10. print the TextEdit code for the index page. Course Performance Objective #3: Utilizing Dreamweaver, the student will define a site, build web pages and style the pages for display in a web browser. Finished pages will be included in the class portfolio notebook. 1. define a web site in Dreamweaver. 2. complete tutorials that cover page layout basics. 3. complete tutorials on tables. 4. complete tutorials on typography. 5. complete the tutorial using style sheets. 6. complete the tutorial on templates. 7. complete the tutorial on image map links. 8. complete the tutorial on divs. 9. complete the tutorial on spry objects. 10. print finished pages from the web browser. Course Performance Objective #4: Utilizing HTML, CSS and Dreamweaver, students will create 3 separate web sites with multiple pages using good rules of design and layout.

5 1. sketch page layouts for all sites before constructing pages. 2. record colors, text and styles to be utilized with CSS. 3. utilize TextEdit to create a multiple web page document with HTML and CSS code. 4. utilize Dreamweaver to create a web site that contains the following components: a. attached style sheet b. divs for content organization c. 5 or more pages that link to a main page d. image map, and anchor links e. image gallery 5. utilize Dreamweaver to create another web site that contains the following components: a. attached style sheet b. template based designs c. 6 or more pages that link to a main page d. , absolute and anchor links e. spry object navigation f. divs for content organization g. tables for information organization 4. utilize Safari, Firefox, Chrome and Internet Explorer web browsers to test display of the completed web page designs. Course Performance Objective #5: Students will publish and display all 3 web sites for class critique. 1. sign up for a free web host online. 2. utilize an FTP client, for example Fetch or Cute FTP, to upload web files. 3. utilize Dreamweaver as an FTP client to upload web files. 4. utilize either Safari or Firefox to display the complete web site for class critique. Course Performance Objective #6: Following lectures on search engine optimization (SEO), students will implement good search engine optimization on web sites created. 1. add relevant page titles throughout the web site. 2. add a searchable H1 tag on each page. 3. create and include a sitemap.xml document in the site root folder. 4. describe steps to set up a Google Webmaster tools account. Course Performance Objective #7: Students will apply an appropriate content management system (CMS) to their finished web site. 1. research free CMS systems online. 2. sign up for a CMS program and implement appropriate page code. 3. test the CMS system in a browser.

6 Course Performance Objective #7: Students will research online to locate web sites that exemplify both good and bad website design. The results will be posted on a personal Blog, available to the instructor. 1. visit and sign up for a personal Blog site. 2. Blog URL to the class instructor. 3. search online for 3 well-designed web sites that follow good design rules learned in class. 4. locate 3 poorly designed web sites online. 5. analyze each site and post that analysis to the personal Blog site, including a URL to each site being reviewed.

7 General Education Requirements: The general education goals covered in Web Page Design are critical thinking & problem solving, communication, quantitative skills, aesthetic perspective and information literacy. See student handbook for additional details. General Outcomes Assessment: A college-wide outcomes assessment program has been put into place to enhance the quality and effectiveness of the curriculum and programs at Salem Community College. As part of this assessment program, the learning outcomes for this course will be assessed. Assessment methods may include tests, quizzes, papers, reports, projects and other instruments. Copies of all outcomes assessments are available in an electronic assessment bank maintained by the Institutional Research and Planning Office. Course Activities: Learning activities include reading and completing class assignments and tutorials, participating in PowerPoint lectures, internet research and critique of web sites, creating web sites with Dreamweaver, CSS and HTML, maintaining a class portfolio notebook, and completing final projects for presentation by both hard copy and live digital images. Course Requirements and Means of Evaluation: Please refer to the instructor s syllabus addendum (to be distributed in class) for specific information regarding the course requirements and means of evaluation. Academic Honesty Policy: Students found to have committed an act of academic dishonesty may be subject to failure in this course, academic probation, and/or suspension from the college. See the Student Handbook for additional details. Attendance Policy: Regular and prompt attendance in all classes is expected of students. Students absent from class for any reason are responsible for making up any missed work. Faculty members establish an attendance policy for each course and it is the student s responsibility to honor and comply with that policy. ADA Statement: If you have a 504 Accommodation Plan, please discuss it with your instructor. If you have any disability but have not documented it with the Disability Support coordinator at Salem Community college, you must do so to be eligible for accommodations. To contact the Disability Support Coordinator, call , visit DON108, or [email protected] to set up an appointment. To find out more information about disability support services at Salem Community College, visit Instructor Information: (See handout) Required Text(s): For textbook information, please see the Salem Community College Bookstore Website. Optional Text(s): None. Supplies: Flash drive with at least 256 MB available, note book, pen/pencil. Additional Costs: As necessitated by the required supplies.