DRAFT. Web Design 2 HBT 3133

Transcription

1 Web Design 2 HBT 3133 HBT 3133 Web Design 2 Credit: 0.5 Computer or Practical Arts/Technology Grade: 10, 11, 12 Term: 1 Semester Students are introduced to intermediate design principles using Dreamweaver, Fireworks, and Photoshop with an emphasis on Flash to create a dynamic Web site. Throughout the semester, students work on individual and collaborative in-class and online activities, presentations, and individual projects. By the end of the course, students will be able to create intermediate to advanced Web sites, which include the following HTML elements: tables, layers, frames, image maps, rollovers, forms, graphics, animated gifs, sound, and Java scripting. Prerequisite: Web Design 1 or teacher approval. Upon successful completion of this course, students will demonstrate proficiency in Academic standards of reading, writing, and mathematics; Occupational standards of communication, organization, technology, thinking skills, work qualifications; and Content standards specific to this course as detailed in the pacing guide below. Academic Standards RW1.0 - Students read and understand a variety of materials. RW2.0 - Students write and speak for a variety of purposes and audiences. RW3.0 - Students write and speak using conventional grammar, usage, sentence structure, punctuation, capitalization, and spelling. RW4.0 - Students apply thinking skills to their reading, writing, speaking, listening and viewing. MA5.0 - Students use a variety of tools and techniques to measure, apply the results in problem-solving situations, and communicate the reasoning used in solving these problems Occupational Standards ORG2.0 - Demonstrates the ability to work effectively and efficiently COM1.0 - Demonstrates the ability to receive and relay information clearly and effectively TECH5.0 - Demonstrates the ability to work with a variety of technologies and equipment TS3.0 - Demonstrates the ability to use reasoning APS Bus&Tech HS Pacing Guide Revised 11/28/07 1

2 Pacing Guide 1 Topic: Review and course set-up Pre-assessment Course expectations Set up page to use as a front page for the course o Use Dreamweaver to create a page. Types of graphics and the application for each. Review Web 1 graphics basics. Essential Question: What are basic understandings of students coming from several different sections of Web Design 1? Pre-test of Dreamweaver, Graphics basics, and Interactive web design components. Web Page for course All projects for the course will run through this introduction page. 2 Topic: Graphics Programs (Fireworks Photoshop) Text-to-path and text-to-shapes Autoshapes Selection and sub-selection tools Filters and Layers Introduce first major project (About 3 weeks of connecting graphics knowledge. Project will be added to throughout the first Quarter. First part will be graphic heavy. A very detailed description) 3 Topic: Graphics Programs (Fireworks Photoshop) Canvas modifications Colors and design (Advanced) Lasso Tools Design a personal logo for the first project. Text use and modifications (Serif & Sans-serif) Exporting for specific needs Essential Question: What ways can a student use graphics to enhance web sites? What techniques can be used to fit the designer s needs? Basic webpage for first project. Graphics assignments tied to topics. Essential Question: What are the more advanced techniques that can be added to graphics to enhance a website? Logo for first project Small graphic projects to reinforce topics Site-map for the first project Quiz on graphics tools for software used. APS Bus&Tech HS Pacing Guide Revised 11/28/07 2

3 4 Topic: Graphics Programs (Fireworks Photoshop) Advanced and interactive. Background o Color choice o Enhancing not distracting o Self created o Text graphics interplay for backgrounds Rollovers Masking Animated GIF graphics Assemble main graphic components for the first project Essential Question: How can animation and advanced graphics make web sites attractive and are appealing to a broad audience? Backgrounds completed for site Rollover images & Animations Masking image Completeness of graphics for first project 5 Topic: Graphics Programs (Fireworks Photoshop) Advanced and interactive. Slices Hotspots Buttons Animations Batch Processing graphics Complete basics for first project for assessment. 6 Topic: Using web design and site management software to create a cohesive and complete web site. File structures Set-up uploading capabilities Meta-tags and Alt. Text for graphics. (Accessibility issues to come later.) Page titles and File names (Standards and expectations) Refine Project #1 with these things in mind Essential Question: How can animation and advanced graphics make web sites attractive and are appealing to a broad audience? Slicing large graphics project Inserting exported graphics into a web page Hotspots assessment Team with different links Graphics post-assessment Essential Question: What is the best and most efficient way to keep web pages and web sites? How do students set up his/her site to a set of standards that can be followed for an extended amount of time? File structure and name review of project # 1 Formative assessment of student knowledge of Dreamweaver or alternative design software. NVU is an example of a piece of software that is available at no cost to students for home use that has a similar look and feel to Dreamweaver. The site address is: APS Bus&Tech HS Pacing Guide Revised 11/28/07 3

4 7 Topic: Creating high level web pages using advanced techniques for code and evaluating audience? Introduce the components of Project #2 o A specialized audience o Very detailed information presented on the site. o Requiring interactivity between the designed and the audience. o Design and carry out an audience survey before designing the project site map. Frames Cascading Style Sheets (CSS) More detailed web site plans and file structures Essential Question: What are advanced techniques that can enhance a website and make it more appealing to the general public? The Audience survey Cascading style sheets and how they can be used to change and adapt pages to make the life of the designer easier. Site map for Project #2 Final In process evaluation of project #1 8 Topic: Using forms to enhance and develop interactivity with the audience. Response forms Surveys Form Types CGI use Common Techniques for getting information 9 Topic: Using forms to enhance and develop interactivity with the audience. Response forms Surveys Form Types CGI use Common Techniques for getting information Essential Question: How can a student use forms to create a connection to the audience or the website? Project #1 (Can be used as a final assessment for Quarter #1. Tied to the first page for the course from week #1) Basic Survey Essential Question: How can a student use forms to create a connection to the audience or the website? CGI use and creation Response form and data collection APS Bus&Tech HS Pacing Guide Revised 11/28/07 4

5 10 Topic: Javascript for site interactivity and enhancement. Client-side Javascript Basic Code Pop up windows Alert Boxes Essential Question: How can Javascript aid in the creativity of web sites? How can javascripts be adapted and changed for individual needs and uses? Variables, elements, and arrays All of the following included in a page or pages: If statements o Dialogue Boxes Redirects o Page enhancements o Drop down menus Drop down menus o Redirects Validating Feedback mechanism 11 Topic: Javascript for site interactivity and enhancement. Client-side Javascript Basic Code Pop up windows Alert Boxes Variables, elements, and arrays If statements Redirects Drop down menus Validating Feedback mechanism Essential Question: How can Javascript aid in the creativity of web sites? How can javascripts be adapted and changed for individual needs and uses? All of the following included in a page or pages: o Dialogue Boxes o Page enhancements o Drop down menus o Redirects Introduce Project #2 4 weeks Include Forms and Javascripts Include enhanced graphics and animations Comprehensive site of multiple pages APS Bus&Tech HS Pacing Guide Revised 11/28/07 5

6 12 Topic: Use of layers to add additional resources for site creation. Create a puzzle using layers Use Layers to manipulate content Essential Question: How can a student use layers on a web page to make content placement easier? Layers activity that shows versatility of layers 13 Topic: Webpage accessibility (Required of any group that has to do work for a governmental agency) Website: User Agent Accessibility Guidelines Meta Tags Alt tags Preparing pages for people with disabilities Puzzle created for a page Essential Question: How can webpages be made to be viewed by alternative page readers. Update all previous pages and projects to meet AUUG 2.0 standards. 14 Topic: Advanced internet safety topics. Predators Safe Surfing Scam detection and warnings isafe curriculum 15 Topic: Advanced Flash and animation techniques. Flash advanced techniques o Action script o Buttons o Invisible buttons o Sound o Preloader o Layers and Scene Properties o Mouse Properties Essential Question: What are the current and important issues that students will face on the internet? How can students remain safe and share his/her knowledge with others? Web mentoring page of tips and ways to protect students Designed for elementary or middle school students. Essential Question: What are advanced techniques using Flash animation to enhance a website? Project #2 (Tied to the first page for the course from week #1) Final project Choice and approval APS Bus&Tech HS Pacing Guide Revised 11/28/07 6

7 Introduce Final Project o 4 weeks o Site for an outside source (Business, nonprofit, etc.) o Use of all components from class o Accessibility o Forms o Javascript o Advanced graphics and animation techniques. 16 Topic: Advanced Flash and animation techniques. Flash advanced techniques o Action script o Buttons o Invisible buttons o Sound o Preloader o Layers and Scene Properties o Mouse Properties 17 Topic: Complete final project and use all enhancements from the course to complete the websites done throughout the course. Essential Question: What are advanced techniques using Flash animation to enhance a website? Enhancements to final project and other previous projects. Essential Question: What are the final additions to complete a website that is ready to be published and shared with the world? Final Project Course main page and all connections to that page Summative assessment on software used during the course. APS Bus&Tech HS Pacing Guide Revised 11/28/07 7

8 18 Topic: Current topics in web design. Essential Question: What are the most current topics in web design that will impact society? Possible topics: Palm Pilots Use Phone and PDA webpages (Different format is required) Web databases New accessibility rules FTP Rules and Techniques Domain name searches and choices Final Project (Review with student for feedback and any updates to improve) APS Bus&Tech HS Pacing Guide Revised 11/28/07 8