WEB DESIGN 1 HBT 3131 HBT 3131 Web Design 1 Credit: 0.5 Computer or Practical Arts/Technology Grade: 10, 11, 12 Term: 1 Semester ACP Credit: MGD141* Books: Shelley Cashman HTML 4.1 Concepts and Techniques, Adobe Dreamweaver CS3 Classroom in a Book, Adobe Flash CS3 Professional Classroom in a Book, and Adobe Fireworks CS3 Classroom in a Book. Resource List: www.htmlgoodies.com Non-Designer s Web Book, 3 rd Edition, by Robin Williams, John Tollett Color & design: http://poynterextra.org/cp/ Web pages are not just for big companies or the rich and famous. In this course, students will learn to apply HTML coding and the skills of planning, producing, and maintaining a Web site. In addition, students will use graphics, text, and individual creativity to enhance Web page designs. Skills from this course assist in entrance to the graphics design/technology industry and are also valuable in other careers. Prerequisite: Computer Applications, Computer Technology, or teacher approval. Upon successful completion of this course, students will incorporate the reading, writing, and mathematics state standards stated below; incorporate occupational standards of communication, organization, technology, thinking skills, work qualifications; and demonstrate proficiency in the 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, 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 APS Bus&Tech HS Pacing Guide Revised 11/28/07 1
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 TS3.0 - Demonstrates the ability to use reasoning Pacing Guide 1 World Wide Web Essential Question: What are the vocabulary and the basic history of the internet and the World Wide Web? Internet WWW Browsers ISP Modem URL W3C 2 Design Principles/Layout/Page Design C Contrast A Alignment R Repetition P Proximity S Spelling File Formats Usability Accessibility W3C Compliance 3 HTML Code Students will be able to identify basic vocabulary. Students will be able to identify commonly used acronyms. Students will be able to describe the basic history of the internet. Essential Question: What are the basic design elements that students will need to develop an effective web page. Students will be able to identify and implement the core elements of design. Students will be able to identify file formats and suffixes. Essential Question: What are the basic building blocks to create APS Bus&Tech HS Pacing Guide Revised 11/28/07 2
Introduce tag syntax and basic tags: html, head, title, body, paragraph, headings, bold, italics, underline, superscript, subscript, teletype, comment H a web page? Students will be able to create a basic web page readable by a browser. Students will be able to identify the basic tags that make up a web page. 4 HTML Code break, paragraph, preformatted, blockquote, list Essential Question: What are the basic building blocks to create a web page? Students will be able to use different tags to create different effects. Students will be able to trouble shoot code problems. Students will be able to develop different pages for different purposes. 5 HTML Code horizontal rule, font, color, alignment, characters, cascading style sheets Essential Question: What are the basic building blocks to create a web page? Students will be able to use different tags to create different effects. Students will be able to trouble shoot code problems. Students will be able to develop different pages for different purposes. APS Bus&Tech HS Pacing Guide Revised 11/28/07 3
6 Image Formats, Image HTML Codes & backgrounds Image Formats JPEG PNG GIF Image Manipulation 7 Copyright Law Essential Question: What are the basic building blocks to create a web page? Students will be able to use different image formats for a variety of purposes. Students will be able to manipulate according to the needs of the web page. Students will be able to ascertain the appropriate use of images for a purpose. Essential Question: What is the importance of Copyright Law for publishing on the internet? Students will be able to identify copyright violations. Students will have an understanding of fair use. Students will be able to understand the process and importance of gaining permission for use of copyrighted material. APS Bus&Tech HS Pacing Guide Revised 11/28/07 4
8 Color 9 Links Color codes Web safe colors Review CRAPS Link to another web page Anchors, specific anchor E-mail Changing of link color Essential Question: What are the basics of color and texture usage on web pages? Students will be able to identify complementary and contrasting colors. Essential Question: What are the basic codes to create hyperlinks and email links? Students will be able to create the code for hyperlinks. Students will be able to create the code for email links. 10 Graphics Save and export Manipulate text and images Canvas modifications 11 Table tags & attributes (advanced topic) Planning Mapping Simple Table Organizing Essential Question: How can graphics be used to enhance a web page? Students will be able to manipulate and export graphics for a web page. Students will be able to make modifications in order to enhance the graphics. Essential Question: How can tables be used to create a professional looking layout that will be compatible with older browsers. APS Bus&Tech HS Pacing Guide Revised 11/28/07 5
Adding border Setting the width Centering a table Wrapping text around a table Combining tables Changing the background Controlling the space Understand how to create a table. Apply border, width background, cellpadding, cellspacing, rowspan, and colspan effect to a table. Create vertical and horizontal sections within a table. Understand how to write tables that display quickly in the browser. 12 Dreamweaver The Basics Site Set-up Organize Site Define Local Site Saving File Specifying Background Color Specifying Default Font Color Specifying Link Colors Placing Text on a Page Changing Font Properties Adding Horizontal Rules Special Characters E-mail Links Adding Date Automatically Adding Flash Text Essential Question: What is the difference between writing HTML code and using software which creates the code? Students will be able to set up a site using a software package that is automated. Students will be able to demonstrate the use of drag and drop as a way to develop web pages. APS Bus&Tech HS Pacing Guide Revised 11/28/07 6
13 Dreamweaver Essential Question: What are the basic components of a web design software package? Working with Graphics Placing Graphics on the Page Wrapping Text Around Images Aligning Images and Text Adding Flash Objects Adding Flash Animations 14 Dreamweaver Creating Links Creating Hypertext Links Targeting a Link Creating Image Maps Linking to Named Anchors 15 Dreamweaver Elements of Page Design Using Tracing Images Using Tables for Page Design Designing in Layout Mode Cell Formatting Creating Tables in Standard View Importing Data from Spreadsheets Copying and Pasting Table Cells Selecting Table Elements Students will be able to create web pages with more advanced components. Students will be able to identify graphics and components and use them effectively. Essential Question: What are the basic components of a web design software package? Students will be able to create web pages with more advanced components. Students will be able to identify graphics and components and use them effectively. Essential Question: What are more advanced elements to increase the versatility of a web site? Students will be able to create and use tables as a design element. Students will be able to import data. Students will be able to copy and paste a variety of information into tables. APS Bus&Tech HS Pacing Guide Revised 11/28/07 7
16 Dreamweaver Essential Question: What are more advanced elements to increase the versatility of a web site? Adding User Interactivity Defining a Behavior Creating Rollover Buttons Using Insert Rollover Image Adding Rollovers to Existing Images Understanding Events Adding Several Actions to an Object Students will be able to create and insert rollover buttons and images. Students will be able to apply various functions to a variety of objects to enhance interactivity. 17 Publishing a Site 18-19 Final Project Define Site FTP Connect and Upload Create a website for an organization or club Essential Question: What does it mean to finish and finalize a web site? Students will be able to define a site. Students will be able to connect and upload a site to the World Wide Web. Students will be able to describe updating web sites. Essential Question: Can students apply all the elements to create an effective web site? Students will be able to create an effective web site. Students will be able to describe the differences between and effective web site and a poor web site. APS Bus&Tech HS Pacing Guide Revised 11/28/07 8