Saucon Valley School District Planned Course of Study

Transcription

1 Course Title Grade Level: Credits: 0.5 Content Area / Dept. Business / Technology Education Length of Course: Quarter Author(s): Gemma Cody Course Description: is an introductory course designed for students who have never designed a webpage or worked with Dreamweaver. In you will learn technology that is in great demand today in the business world. Most companies now have web pages and there is a shortage of web page designers. As a student in this course, you will learn the most important topics of HTML and XHTML. You will begin with an introduction to developing a Web page and a Web site, moving on to working with cascading style sheets and much more. Course Rationale: The purpose of this course is to teach basic web page design skills. Students will create their own web page. Students will learn how to create effective, informative web pages using Dream Weaver. This course will also give students exposure to using HTML and XHTML to create web pages and to investigate the use of the Internet in business. Summer Rev Page 1 of 1

2 Table of Contents Course Description...Page 1 Course Rationale...Page 1 Curriculum Map...Page 3 Unit 1 - Developing a Web Page...Page 4 Unit 2 Introduction to Dreamweaver and Creating a Web Site...Page 6 Unit 3 Developing a Web and Formatting Text Using HTML and CSS Styles using Dreamweaver...Page 8 Unit 4 Using and Managing Images...Page 11 Unit 5 Creating Links and Navigation Bars...Page 13 Unit 6 Using CSS to Lay Out Pages...Page 15 Unit 7 Creating Your Own Web Page...Page 17 Appendix PA Academic Standards...Appendix A NETS Educational Technology Standards...Appendix A Supplementary Resources...Appendix B My Web Page Criteria...Appendix C Summer Rev Page 2 of 2

3 Curriculum Map (Year Long Course) # of Weeks Topics and Blocks to complete Quarter 1 9 weeks 1. Developing a Web Page (7) 2. Introduction to Dreamweaver and Creating a Web Site (6) 3. Developing a Web Page and Formatting Text Using HTML and CSS Styles using DreamWeaver (8) 4. Using and Managing Images (5) 5. Creating Links and Navigation Bars (6) 6. Using CSS to Lay Out Pages (6) 7. Creating Your Own Web Page (7) Summer Rev Page 3 of 3

4 Unit 1: Developing a Web Page Unit Description Essential Questions & Enduring Understandings This unit presents an introduction to HTML and the Web. Students will learn the history of the Web, learn HTML standards, and create a basic Web page. Students will also work with HTML elements, including head, body, blockquote, inline and empty elements to develop the Web page. How has the Internet developed since its creation? How can a Web site be created and used to communicate and share information with others? What standards and specifications need to be followed in order to create an effective Web site? Academic Standards PA C, D, E NETS 1.A, 3.A, 3.B Key Unit Vocabulary HTML, WWW, XHTML, Web browser, Web server, styles, deprecated, element, blockquote, empty element, body element, head element, link, inline element, local area network, tag Learning Objectives The student will Learn the history of the Web and HTML Describe HTML standards and specifications Create the basic structure of an HTML file Insert HTML comment and heading tags Work with block-level elements Create ordered, unordered, and defintion lists Work with inline elements Understand the div and span elements Add attributes to HTML elements Format page content using the style attribute Mark empty elements with one-sided tags Add an inline image to a web page Work with character sets and codes Create your own web page for a business or school activity of your choice. Assessment Opportunities Review Questions Unit 1 Practice: Review Assignment 1 Apply: Cases 1, 3 Enrichment: Case 4 Formative Assessment: Unit 1 Study Guide Assess: Unit 1 Assessment Application Objective See My Web Page Criteria/Rubric Summer Rev Page 4 of 4

5 Sequence of Teaching and Learning # of Blocks Lesson Topic Lesson Activities 0.5 Exploring the History of the World Wide Web - PowerPoint / notes 0.5 Introducing HTML - Tutorial 1: Developing a Web Page - Demo_html.htm - Cases Creating an HTML Document 1.0 Working with Blocklevel Elements and Making Lists - Tutorial 1: Developing a Web Page - Demo_html.htm - Tutorial 1: Developing a Web Page - Demo_html.htm - Cases Using Element Attributes, Empty Elements, and Inline Images 2.0 Create your own Web Site - Tutorial 1: Developing a Web Page - Demo_html.htm - Cases 1-3 Create your own personal/school/business website. Include: title, heading, heading tags, inline and empty elements, images, lists, address element Resources for this Unit: Course text See Appendix B for Supplementary Resources Summer Rev Page 5 of 5

6 Unit 2: Introduction to Dreamweaver and Creating a Web Site Unit Description Essential Questions & Enduring Understandings This unit presents an introduction to Dreamweaver and helps students to become familiar with its workspace, views and panels. Students will learn how to plan, define, manage, save, and open a Web site. Students will also learn how to insert images and add new pages to an existing Web site. How has the Internet developed since its creation? How can a Web site be created and used to communicate and share information with others? What standards and specifications need to be followed in order to create an effective Web site? How can Dreamweaver be used as an effective tool to create Web sites? What are the advantages of using Dreamweaver instead of a text editing program? Academic Standards PA C, D, E NETS 1.A, 3.A Key Unit Vocabulary Dreamweaver, Insert Panel, Properties Inspector, Workspace, Code view, Design view, Tag selector, Toolbars, Storyboard, Assets, Domain name, IP address, Root folder, Cache, Home Page Learning Objectives The student will Define Web design software and understand how Dreamweaver can be used to create Web pages and Web sites Identify the Dreamweaver workspace features, such as Properties Inspector, Insert panel, and Tag selector Plan, define, save, and view a Web site Copy and insert pictures into a Web site Add new pages to a Web site Assessment Opportunities Review: Concepts Review A Practice: Skills Review A Apply: Independent Challenge A 1-3 Review: Concepts Review B Practice: Skills Review B Apply: Independent Challenge B 1-4 Enrichment: Visual Worksho Create your own web site for a business or Real Life Independent Challenge school activity of your choice. See My Web Page Criteria/Rubric Unit Assessment Formative Assessment: Unit 2 Study Guide Assess: Unit 2 Assessment Application Objective Summer Rev Page 6 of 6

7 Sequence of Teaching and Learning # of Lesson Topic Lesson Activities Blocks 1.0 Introduction to Dreamweaver - PowerPoint / notes: Viewing the Dreamweaver workspace and working with views and panels - Concept Review A - Skills Review A 1.0 Planning and Defining a Web Site 1.0 Web Site Management 1.0 Adding Images to a Web Site 1.0 Adding New Pages to a Web Site 1.0 Create your own Web Site - PowerPoint / notes: Creating a Web Site - Demo Lesson: Creating a Web Site: The Striped Umbrella - Concept Review B - Skills Review B - Demo Lesson: Creating a Web Site - Demo Lesson: Creating a Web Site - Demo Lesson: Creating a Web Site - Visual Workshop - Real Life Independent Challenge A - Independent Challenge 4 - Create your own personal/school/business website. Include: title, heading, heading tags, inline and empty elements, images, lists, address element Resources for this Unit: Course text See Appendix B for Supplementary Resources Summer Rev Page 7 of 7

8 Unit 3: Developing a Web Page and Formatting Text Using HTML and CSS Styles using Dreamweaver Unit Description Essential Questions & Enduring Understandings In this unit, students will begin to develop their Web sites incorporating different colors, font types and sizes, and images. They will also learn how to use HTML and CSS to format their Web site, making it attractive and easy to read. How has the Internet developed since its creation? How can a Web site be created and used to communicate and share information with others? What standards and specifications need to be followed in order to create an effective Web site? How can Dreamweaver be used as an effective tool to create Web sites? What are the advantages of using Dreamweaver instead of a text editing program? Academic Standards PA C, E NETS 3.A, 3.B Key Unit Vocabulary Head section, Style, Body section, Property Inspector, CSS styles, CSS rules, Embedded Style Sheet, Inline Styles, External Style Sheet, Declaration, Ordered list, Unordered list Learning Objectives The student will Assessment Opportunities Plan the page layout considering white space, Review: Concepts Review C themes, CSS, templates, and tables Practice: Skills Review C Create the head content and establish Web Apply: Independent Challenge C 1-3 page properties for a Web site Enrichment: Visual Workshop Create and format text on a Web page using HTML and styles Add text and image links in order to navigate through the pages in a Web site. Import, edit and format text using HTML and Review: Concepts Review D style attributes Practice: Skills Review D Understand, create, apply, and attach a Apply: Independent Challenge D 1-3 Cascading Style Sheet Enrichment: Visual Workshop Create your own web site for a business or Real Life Independent Challenge C D school activity of your choice. See My Web Page Criteria/Rubric Unit Assessment Formative Assessment: Unit 3 Study Guide Assess: Unit 3 Assessment Application Summer Rev Page 8 of 8

9 Objective Sequence of Teaching and Learning # of Lesson Topic Lesson Activities Block s 1.5 Planning the Page Layout, Using the History Panel, Viewing HTML Code, and Testing Web Pages 1.0 Creating the Head content and setting Web page properties 1.5 Creating and Formatting text and Adding links to Web Pages 2.0 Importing and setting text properties - PowerPoint / notes: Developing a Web Site - Concept Review C - Skills Review C - Demo Lesson: Developing a Web Site: The Striped Umbrella - Demo Lesson: Creating a Web Site: The Striped Umbrella - Visual Workshop - PowerPoint / notes: Formatting Text Using HTML and CSS Styles - Concept Review D - Skills Review D 1.0 Creating, applying, and attaching a Cascading Style Sheet 1.0 Create your own Web Site - Demo Lesson: Formatting Text Using HTML and CSS Styles: The Striped Umbrella - Visual Workshop - Real Life Independent Challenge C / D - Create your own personal/school/business website. Include: title, heading, heading tags, inline and empty elements, images, lists, address element Resources for this Unit: Course text See Appendix B for Supplementary Resources Summer Rev Page 9 of 9

10 Unit 4: Using and Managing Images Unit Description Essential Questions & Enduring Understandings In this unit, students will learn how to incorporate different types of images into the Web site for enhancement, educational, and information purposes. Students will learn how and when to use the different types of image formats. Students will also learn how to create or find images and to effectively manage them using the Assets panel. How has the Internet developed since its creation? How can a Web site be created and used to communicate and share information with others? What standards and specifications need to be followed in order to create an effective Web site? How can Dreamweaver be used as an effective tool to create Web sites? What are the advantages of using Dreamweaver instead of a text editing program? Academic Standards PA C, E NETS 3.A, 3.B Key Unit Vocabulary Asset panel, JPEG, GIF, PNG, Border, Alternate Text, download time, Background image, Images Learning Objectives The student will Assessment Opportunities Insert, format, align, and enhance an image to Review: Concepts Review E improve the effectiveness of a Web site. Practice: Skills Review E Create images using an image-editing or Apply: Independent Challenge E 1-3 drawing program and learn to differentiate Enrichment: Visual Workshop between different file formats. Explore the advantages of disadvantages of the different ways in accumulate images, including creation, original photography, clip art and the Internet. Create your own web site for a business or See My Web Page Criteria/Rubric school activity of your choice. Independent Challenge E-4 Unit Assessment Formative Assessment: Unit 4 Study Guide Assess: Unit 4 Assessment Application Objective Sequence of Teaching and Learning # of Lesson Topic Lesson Activities Summer Rev Page 10 of 10

11 Blocks 1.0 Inserting, Aligning, and Enhancing an Image 1.0 Using alternate text and setting the Accessibility preferences 1.0 Using the Assets panel and Managing Images 1.0 Creating and finding images and learning image formats 1.0 Create your own Web Site - PowerPoint / notes: Using and Managing Images - Concept Review E - Skills Review E - Demo Lesson: Using and Managing Images: The Striped Umbrella - Demo Lesson: Using and Managing Images: The Striped Umbrella - Demo Lesson: Using and Managing Images: The Striped Umbrella - Visual Workshop - Independent Challenge 4 - Create your own personal/school/business website. Include: title, heading, heading tags, inline and empty elements, images, lists, address element Resources for this Unit: Course text See Appendix B for Supplementary Resources Summer Rev Page 11 of 11

12 Unit 5: Creating Links and Navigation Bars Unit Description Essential Questions & Enduring Understandings In this unit, students will learn how to create internal and internal links using images, hotspots, navigation bars, and text. Students will learn the importance of creating a storyboard in order to create a well-structured Web site that helps viewers to quickly and easily navigate between pages. How has the Internet developed since its creation? How can a Web site be created and used to communicate and share information with others? What standards and specifications need to be followed in order to create an effective Web site? How can Dreamweaver be used as an effective tool to create Web sites? What are the advantages of using Dreamweaver instead of a text editing program? Academic Standards PA C, E NETS 3.A, 3.B Key Unit Vocabulary Image map, absolute paths, relative paths, link, anchor, target, navigation bar, hotspot, rollover Learning Objectives The student will Assessment Opportunities Understand links and paths and distinguish Review: Concepts Review F between absolute and relative paths to create Practice: Skills Review F internal and external links on a Web site. Apply: Independent Challenge F 1-3 Create and modify a navigation bar with Enrichment: Visual Workshop images to assist viewers in navigating through the Web site. Create an image map with hotspots to assist viewers in navigating through the Web site. Manage Web site links using the Link Checker to locate existing broken, orphaned, and effective links. Create your own web site for a business or Independent Challenge 4 school activity of your choice. See My Web Page Criteria/Rubric Unit Assessment Formative Assessment: Unit 1 Study Guide Assess: Unit 2 Assessment Application Objective Sequence of Teaching and Learning Summer Rev Page 12 of 12

13 # of Lesson Topic Blocks 1.0 Understanding links and paths 1.0 Creating internal and external links 1.0 Creating and modifying a navigation bar with images 1.0 Creating an image map 1.0 Managing Web site links 1.0 Create your own Web Site Lesson Activities - PowerPoint / notes: Creating Links and Navigation Bars - Concept Review F - Skills Review F - Demo Lesson: Creating a Web Site The Striped Umbrella - Demo Lesson: Creating a Web Site The Striped Umbrella - Demo Lesson: Creating a Web Site The Striped Umbrella - Demo Lesson: Creating a Web Site - Visual Workshop - Independent Challenge 4 - Create your own personal/school/business website. Include: title, heading, heading tags, inline and empty elements, images, lists, address element Resources for this Unit: Course text See Appendix B for Supplementary Resources Summer Rev Page 13 of 13

14 Unit 6: Using CSS to Lay Out Pages Unit Description Essential Questions & Enduring Understandings In this unit, students will learn how to positing elements on a Web page using Cascading Style Sheets, the preferred method of page layout. Students will use blocks of content already formatted with CSS styles in Unit 3 to place information on a Web page. Students will use a predefined CSS page layout with div tags to redesign the index page for the Striped Umbrella Web site. How has the Internet developed since its creation? How can a Web site be created and used to communicate and share information with others? What standards and specifications need to be followed in order to create an effective Web site? How can Dreamweaver be used as an effective tool to create Web sites? What are the advantages of using Dreamweaver instead of a text editing program? Academic Standards PA C, E NETS 1.A, 3.A, 3.B Key Unit Vocabulary Cascading Style Sheet, div container, AP element, JavaScript, positioning, AP Elements panel Learning Objectives The student will Assessment Opportunities Understand CSS and why and when it should Review: Concepts Review G be used instead of tables for page layouts. Practice: Skills Review G Create a page using Dreamweaver s predefined Apply: Independent Challenge G 1-3 CSS layout and add and edit content in the Enrichment: Visual Workshop layout blocks defined with div tags. Use div tags to position and size AP elements and content in a Web site Create your own web site for a business or Real Life Independent Challenge school activity of your choice. See My Web Page Criteria/Rubric Unit Assessment Formative Assessment: Unit 6 Study Guide Assess: Unit 6 Assessment Application Objective Learning Objectives The student will Understand CSS and why and when it should be used instead of tables for page layouts. Assessment Opportunities Review: Concepts Review G Practice: Skills Review G Apply: Independent Challenge G 1-3 Enrichment: Visual Workshop Summer Rev Page 14 of 14

15 Create a page using Dreamweaver s predefined CSS layout and add and edit content in the layout blocks defined with div tags. Use div tags to position and size AP elements and content in a Web site Create your own web site for a business or school activity of your choice. Real Life Independent Challenge See My Web Page Criteria/Rubric Unit Assessment Formative Assessment: Unit 6 Study Guide Assess: Unit 6 Assessment Application Objective Resources for this Unit: Course text See Appendix B for Supplementary Resources Summer Rev Page 15 of 15

16 Unit 7: Creating Your Own Web Page (7) Unit Description Essential Questions & Enduring Understandings How has the Internet developed since its creation? How can a Web site be created and used to communicate and share information with others? What standards and specifications need to be followed in order to create an effective Web site? How can Dreamweaver be used as an effective tool to create Web sites? What are the advantages of using Dreamweaver instead of a text editing program? Academic Standards PA C, D, E NETS 1.A, 3.A, 3.B, 4.B Key Unit Vocabulary Dreamweaver, HTML, XHTML, CSS Learning Objectives The student will Create your own web site for a business or school activity of your choice. Assessment Opportunities Real Life Independent Challenge See My Web Page Criteria/Rubric Sequence of Teaching and Learning # of Lesson Topic Lesson Activities Blocks 7.0 Create your own Web Site - Create your own personal/school/business website. Include: title, heading, heading tags, inline and empty elements, images, lists, address element - Students will present the Web pages to the class. Resources for this Unit: Course text See Appendix B for Supplementary Resources Summer Rev Page 16 of 16

17 Appendix A PA Academic Standards: Science and Technology C Apply basic computer operations and concepts. Identify solutions to basic hardware and software problems. Apply knowledge of advanced input devices. Apply knowledge of hardware setup. Describe the process for basic software installation and demonstrate it. Analyze and solve basic operating systems problems. Apply touch keyboarding skills and techniques at expectable speed and accuracy. Demonstrate the ability to perform basic software installation D Utilize computer software to solve specific problems. Identify legal restrictions in the use of software and the output of data. Apply advanced graphic manipulation and desktop publishing techniques. Apply basic multimedia applications. Apply advanced word processing, database and spreadsheet skills. Describe and demonstrate how two or more software applications can be used to produce an output. Select and apply software designed to meet specific needs E Apply basic computer communications systems. Identify and explain various types of on-line services. Identify and explain the function of the parts of a basic network. Describe and apply the components of a web page and their function. Explain and demonstrate file transfer within and out side of a computer network. Identify, describe and complete advanced on-line research E Assess the effectiveness of computer communications systems. Computer based communications system. Transfer files among different computer platforms. Analyze the effectiveness of on-line information resources to meet the needs for collaboration, research, publications, communications and productivity. Apply knowledge of protocol standards to solve connectivity problems. Summer Rev Page 17 of 17

18 NETS Educational Technology Standards Appendix A 1. Basic operations and concepts a. Students demonstrate a sound understanding of the nature and operation of technology systems i. Students describe new and/or advanced technology resources information dissemination options and technology career opportunities. 3. Technology productivity and tools a. Students use technology tools to enhance learning, increase productivity, and promote creativity b. Students use productivity tools to collaborate in constructing technology-enhanced models, prepare publications, and produce other creative works 4. Technology communication tools b. Students use a variety of media and formats to communication information and ideas effectively to multiple audiences. Summer Rev Page 18 of 18

19 Resources: Appendix B Supplementary Resources: Successful Website Goals Why the Heck Do You Have a Website Anyway? Visit this site to learn about Web site goals Time 100: Tim Berners-Lee Learn more about the man who invented the World Wide Web Web Developer s Virtual Library Tutorials and articles are available on all aspects of Web site design, including graphics software, DHTML, and multimedia animation Web Style Guide This is the second edition of an organized in-depth guide to creating successful Web site. Web Results Guide to Web Site Design Guidelines to follow when designing your site. Adobe Development Center This is a good place to start for help with many Adobe products, including Dreamweaver and Flash. Etheos This site has a wealth of free resources for the Web designer, including tutorials, templates, and tips. Generic Website Storyboard A very simple, but helpful storyboard for a generic site. The Webby Awards Visit this site for links to Webby award winning sites and information on entering your own site. CSS Layouts Without Tables This site explains the advantages CSS has over tables. Summer Rev Page 19 of 19

20 Common Fonts to all versions of Windows and Mac equivalents This page contains a chart of fonts common to Windows and Mac operating systems. Follow the links provided to see how the common fonts look in different systems and styles. HTML.net Tutorial on CSS and fonts. HTML Dog This site markets itself as the Best Practice Guide to XHTML and CSS. Includes many tutorials HTML Code Tutorial CSS properties chart that provides an overview of CSS attributes, properties, and possible values. W3C Cascading Style Sheet Home Page This W3C site is the first place to check for updates on CSS CSS Font Properties Tutorial In this CSS tutorial, you will learn how to use CSS to control the style and layout of multiple Web pages all at once. JPEG and Gif Crunchers This is software that will help you optimize your GIFs and JPEGs. Free online service. Summer Rev Page 20 of 20

21 How to Position Your Photos and Images Using CSS This short tutorial will show you how to use CSS to position images in relation to text on your Web page or blog. CSS Positioning Detailed tutorial on CSS positioning Free Javascripts.com Hundreds of free JavaScripts organized by category so they are easy to find. Hellertown Revitalization Project: Michael Schlossberg, Borough Business Revitalization Coordinator, Alburtis, Coopersburg, Hellertown & Macungie Greater Lehigh Valley Chamber of Commerce 840 Hamilton Street, Suite 205, Allentown, PA Phone: , Fax: Mike Schlossberg Summer Rev Page 21 of 21

22 Appendix C WEB PAGE DESIGN FINAL PROJECT 1. Create a Web Page using a topic of your choosing personal, school activity, business. Topic must be appropriate for school. Automatic Zero will be given if it is not. You will have a TOTAL of LEAST 3 pages PLUS a CSS when finished. 2. Create a storyboard (either by hand or Microsoft Word or other drawing program). MUST HAND IN. 3. One page will be the Home Page for your Web site. The Home Page should be at least a full page in length giving information about your web site. Include graphics, Horizontal Rules to separate parts of the page, Lists, and Links for your site. 4. You will have AT LEAST FIVE links on your Home Page. a. 2 more informative, more detailed pages b. 3 links to outside relevant websites (for more information) 5. Make the page attractive to look at but do not go overboard. Your page should be professional looking and not too distracting. That will be my judgment call. 6. ALL pages should link back to the home page. 7. ALL outside links should open in NEW windows. 8. You will create a Cascading Style Sheet to be applied to each page in your site. You should have AT LEAST 8 different elements with assigned style attributes. 9. Create an embedded style sheet in each page to override AT LEAST THREE style attributes assigned in the CSS. Summer Rev Page 22 of 22

23 10. Your Web site MUST include ALL of the following elements: a. Business/Activity title b. Comments c. Heading tags d. At least THREE images e. At least TWO linked images (in addition to the 3 listed above) f. At least TWO different types of lists g. Address element h. Horizontal Rules i. Background / Font colors j. Different text decorations, styles, sizes k. At least THREE special characters l. Link each page to one another m. Create ID attributes and anchors tags: i. Should link to locations WITHIN each page ii. Should like to locations throughout the Website n. Include AT LEAST THREE links to outside web sites i. Sites should all open in a new window o. Contact info and link ( address, subject and body) p. Metadata (author, content, keywords, etc) q. Apply a Cascading Style Sheet with at least EIGHT (8) styles Summer Rev Page 23 of 23

24 WEB PAGE DESIGN XHTML FINAL PROJECT RUBRIC REQUIREMENT COMPLETE ( ) POINTS Business/Activity title Comments Heading tags At least THREE images At least TWO linked image / 3 / 2 / 5 / 15 / 10 At least TWO different types of lists / 5 Address element Horizontal Rules Use of Background / Font colors / 15 Use of different text decorations, styles, sizes / 15 At least THREE special characters / 3 / 5 / 2 Link each page to one another easy to navigate/user-friendly Create ID attributes and anchors tags: Should link to locations WITHIN each page Should like to locations throughout the website Include AT LEAST THREE links to outside web sites / 15 / 15 / 10 Sites should all open in a new window Contact info and link ( address, subject and body) Metadata (author, content, keywords, etc) / 5 3 Web Pages (home + 2 informative) / 10 / 5 Cascading Style Sheet / 30 Summer Rev Page 24 of 24

25 Embedded Style Sheet Overall quality of Web Site (professional, eyecatching) Presentation -Clearly presented to audience -prepared, professional, persuasive / 10 / 10 / 10 TOTAL / 200 Create and Save in Web Design Final Project Folder (in your H:Drive) Save ENTIRE FOLDER to Global/Student/GCody/Web Design when complete. Test your pages from that folder (in Global). Show me the entire website with all the links before you print each page. Print the Home Browser page and each Notepad page (home, 2 nd page, 3 rd page, CSS). Turn in your Storyboard with Final project. Summer Rev Page 25 of 25