Web Page Design and Implementation
Course Description
Students will learn to design and construct effective web sites as both a graphic designer and technical builder. They will learn how to analyze information and apply graphic design techniques to real-world scenarios with an understanding of functionality, usability and aesthetics.
Students will gain a solid foundation in current markup languages and applications, modern layout and style, and industry trends in order to develop web sites that are standards compliant, accessible to those with disabilities, and forward compatible.
Course goals for each student include choosing and registering a personal domain name that will be used throughout their time in the web design program. Using a commercial ISP to host their personal website and email accounts. Students will administer and maintain the website, and offer assignments for grading on the Internet. They will set up a blog using WordPress, implement and tweak a design template of their choosing. They will be designing and building a portfolio site using standards-compliant XHTML and CSS, making class presentations and writing web content.
Grading:
30% Attendance/Lab
10% Participation
40% Homework Assignments
20% Final Project
Required text: Web Designer’s Reference, An Integrated Approach to Web Design with XHTML and CSS. Author: Craig Grannell, Publisher: Friends of Ed.
Class Outline
Class 1: Intro, handout and review in detail course description; choosing a URL and purchasing at domain registry, recommend Kionic.com (using student email address so they can track); review basic vocabulary; send out to buy textbook.
Homework: Choose and purchase url and service with ISP.
Class 2: Make sure every student is set up with url and ISP. Help with set up. Introduce them to the c-panel admin interface. Set up email accts. Introduce students to Dreamweaver interface, and create site under construction or homepage. Go over dos and don’ts about personal information, false, plagiaristic, slanderous info on web. Begin going over designing using Illustrator and Photoshop.
Homework: Begin to design an aesthetic that will be used for the whole site using Photoshop/Illustrator. Design logos. Write copy (or use greek text).
Class 3: Site Architecture: Begin to introduce the concept of site architecture, and ideas about diagramming flowcharts. Continue to teach about Dreamweaver interface, introduce XHTML and CSS. Slice and begin to build a page that was designed in Photoshop/Illustrator.
Homework: Complete implementation of page designed for homework.
Class 4: Review class homework and point out improvements. Class critique. Go over best practices for navigation design. Give demo using includes.
Homework: Create site architecture, and begin to design/write copy/collect artwork for other pages on the site, using Photoshop/Illustrator.
Class 5 Introduction to blogs. Install Wordpress, show design templates (themes), demo tweaking the template artwork. Teach blog best practices. Teach and describe in depth RSS feeds and their purposes. More XHTML/CSS.
Homework: Install Wordpress, choose and implement WordPress theme. Write a post. Write and implement a static (non-blog) resume page on their site. (discuss robots.txt and meta robots/noindex)
Class 6: More XHTML/CSS. (Midterm evaluations for Monday classes).
Homework: TBD. Consider a 2-week project if no lectures/demos next week.)
Class 7: Class trip or visiting lecturer.
Class 8: Creating Forms and implementing form validation scripts. (Midterm evaluation for Saturday classes.)
Homework: Design and implement a form (contact us page, or survey page).
Class 9: Javascript: create a javascript slideshow demo. Introduce the final project so students can being thinking, designing, researching and building.
Homework: Design and implement a javascript slideshow.
Class 10: SEO basics: title, description, keywords, sitemap, duplicate content, etc.
Homework: Review and update site for SEO.
Class 11: Design for mobile devices, and ADA design implementation
Homework: design/create/optimize site for mobile devices and people with disabilities.
Class 12: Flash Introduction. Animation, timeline, library/symbols, reuse of objects.
Homework: Create an animated swf file and bring it into a page.
Class 13: Flash Continued: Interactivity, and loading swf objects. Introduction to Actionscripting.
Homework: Create a Flash object that has interactivity and function (e.g., Flash navigation system).
Class 14: Final Project construction and advisement
Class 15: Class Critique of students’ final project