Introduction to Web Page Design

Transcription

1 Title Introduction to Web Page Design Type Consensus Document Map Authors Derek Bishoff, Christopher Shadwell Subject Business Course None Selected Grade(s) 10, 11, 12 Location Curriculum Writing History Notes Attachments Page: 1 of 17

2 September/Week 1 - September/Week 2 September October November December January February March April May June Creating an HTML Document September/Week 1 - January/Week 20 Workplace Readiness Skills September/Week 3 - October/Week 5 Creating Links to Web Pages and Other Files October/Week 6 - October/Week 8 Formatting Page Elements in HTML November/Week 9 - November/Week 11 Adding Graphics and Multimedia November/Week 12 - December/Week 15 Cascading Style Sheets (CSS) December/Week 16 Getting Started With Adobe Dreamweaver January/Week 17 - January/Week 20 Formatting Text, Links, and Images in Dreamweaver Page: 2 of 17

3 Duration: September/Week 1 - September/Week 2 UNIT NAME: Creating an HTML Document Enduring Understandings Essential Questions Knowledge Skills Standards Web pages are tools that can be used for collecting, organizing, creating, and presenting information. Plans: Why would you use a text editor as opposed to a word processor or other program? What are the necessary steps in order to create a basic HTML document? Why is it important to follow the W3C coding standards when creating and marking up Web content? Understand web contents Understand URLs Understand W3C coding standards Understand HTML tag sets Define HTML properties and attributes Differentiate between open and closed tags Plan an HTML document Write an HTML document View web page source code Mark up Web page content with HTML tags Print an HTML document A-Technology Operations and Concepts (09-12) D-Digital Citizenship (09-12) E-Research and Information Literacy (09-12) A-Critical Thinking and Problem Solving (09-12) F-Accountability, Productivity, and Ethics (09-12) C-Career Preparation (09-12) A-Nature of Technology: Creativity and Innovation (09-12) B-Design: Critical Thinking, Problem Solving, and Decision-Making (09-12) Page: 3 of 17

4 Duration: September/Week 1 - January/Week 20 UNIT NAME: Workplace Readiness Skills Enduring Understandings Essential Questions Knowledge Skills Standards Developing one's personal, professional, and technology knowledge and skills will prepare students to contribute in today's workforce. Why is it important to maintain a positive work ethic and attitude at work and/or in the classroom? When is it appropriate to use telecommunications devices at work and/or in school? Understand the methods used to display effective and appropriate workplace behavior Demonstrate positive work ethic by maintaining punctual and consistent attendance, taking directions willingly, and exhibiting motivation to accomplish the task at hand Demonstrate interpersonal, teamwork, and leadership skills necessary to function in a school and/or business setting Demonstrate maturity by working in a respectful and friendly manner Apply technology as it relates to personal and business decision making A-Critical Thinking and Problem Solving (09-12) C-Collaboration, Teamwork, and Leadership (09-12) D-Cross-Cultural Understanding and Interpersonal Communication (09-12) E-Communication and Media Fluency (09-12) F-Accountability, Productivity, and Ethics (09-12) C-Career Preparation (09-12) A-Technology Operations and Concepts (09-12) B-Creativity and C-Communication and Collaboration (09-12)[State:New D-Digital Citizenship (09-12) E-Research and Information Literacy (09-12) F-Critical Thinking, Problem Solving, and Decision- Making (09-12)[State:New A-Nature of Technology: Creativity and Innovation (09-12) Page: 4 of 17

5 Plans: D-Research and Information Fluency (09-12) E-Communication and Collaboration (09-12)[State:New G-The Designed World (09-12) Page: 5 of 17

6 Duration: September/Week 3 - October/Week 5 UNIT NAME: Creating Links to Web Pages and Other Files Enduring Understandings Essential Questions Knowledge Skills Standards HTML links are the essential building blocks for creating Web pages and navigating the through internet. Why are links useful in web design? How do different types of links differ from one another? Why is it important to follow the W3C coding standards when creating and marking up Web content? Understand the different elements of link tags (anchor tag, attribute, properties, values) Understand how to format Web page links Differentiate between various link types Plan a Website structure Create internal links Create links to other directories Create a text-based navigation bar Create external links Link to external files Create links Create jump links with anchor name points Set a target attribute Add link titles A-Technology Operations and Concepts (09-12) B-Creativity and D-Digital Citizenship (09-12) E-Research and Information Literacy (09-12) F-Critical Thinking, Problem Solving, and Decision- Making (09-12)[State:New B-Design: Critical Thinking, Problem Solving, and Decision-Making (09-12) D-Research and Information Fluency (09-12) F-Resources for a Technological World (09-12) G-The Designed World (09-12) A-Critical Thinking and Problem Solving (09-12) B-Creativity and E-Communication and Media Fluency (09-12) F-Accountability, Productivity, and Ethics (09-12) Page: 6 of 17

7 Plans: C-Career Preparation (09-12) Page: 7 of 17

8 Duration: October/Week 6 - October/Week 8 UNIT NAME: Formatting Page Elements in HTML Enduring Understandings Essential Questions Knowledge Skills Standards Font typefaces and colors are essential for creating an impact on the user s impression of a Web page. Why is it important to follow the W3C coding standards when creating and marking up Web content? Why is it important to be able to format HTML page elements? How is HTML formatting used to create visually appealing Web Pages? Understand HTML Formatting Methods Understand fonts and typefaces Understand hexadecimal color codes Differentiate ordered and unordered lists Align text Format characters Define an address block Control font selection Customize fonts Create ordered and unordered lists Nest and customize lists A-Technology Operations and Concepts (09-12) B-Creativity and E-Research and Information Literacy (09-12) F-Critical Thinking, Problem Solving, and Decision- Making (09-12)[State:New A-Nature of Technology: Creativity and Innovation (09-12) B-Design: Critical Thinking, Problem Solving, and Decision-Making (09-12) D-Research and Information Fluency (09-12) F-Resources for a Technological World (09-12) G-The Designed World (09-12) A-Critical Thinking and Problem Solving (09-12) B-Creativity and E-Communication and Media Fluency (09-12) F-Accountability, Page: 8 of 17

9 Plans: Productivity, and Ethics (09-12) C-Career Preparation (09-12) Page: 9 of 17

10 Duration: November/Week 9 - November/Week 11 UNIT NAME: Adding Graphics and Multimedia Enduring Understandings Essential Questions Knowledge Skills Standards Images and media are valuable Web design tools that are used to draw the users attention and enhance Web content. How can you use HTML tag sets to insert and manipulate images and media? How do you determine which image file format is fits best for your desired outcome? How can Adobe Photoshop be used to aid in Web page design? Plan graphics use Understand optimized image settings Differentiate different image file formats Insert and edit images using HTML tags, properties, and values Change image file formats Optimize images for web use Resize images Insert a background image Use images as links Insert an image map Insert media files such as.mov or.swf Apply basic Adobe Photoshop functions in order to enhance the impact of Web images A-Technology Operations and Concepts (09-12) B-Creativity and C-Communication and Collaboration (09-12)[State:New D-Digital Citizenship (09-12) E-Research and Information Literacy (09-12) F-Critical Thinking, Problem Solving, and Decision- Making (09-12)[State:New A-Nature of Technology: Creativity and Innovation (09-12) B-Design: Critical Thinking, Problem Solving, and Decision-Making (09-12) D-Research and Information Fluency (09-12) F-Resources for a Technological World (09-12) G-The Designed World (09-12) A-Critical Thinking and Problem Solving (09-12) B-Creativity and Page: 10 of 17

11 Plans: E-Communication and Media Fluency (09-12) F-Accountability, Productivity, and Ethics (09-12) C-Career Preparation (09-12) Page: 11 of 17

12 Duration: November/Week 12 - December/Week 15 UNIT NAME: Cascading Style Sheets (CSS) Enduring Understandings Essential Questions Knowledge Skills Standards Cascading Style Sheets (CSS) help to efficiently determine the properties of HTML components across Web pages in a site. How can you create and apply styles more efficiently? What is a Cascading Style Sheet? What elements are necessary to properly format a Cascading Style Sheet and its rules? Define style sheet, rules, selectors, declarations, properties, and values as they relate to Cascading Style Sheets Understand how to create and format a CSS document Recognize the difference between a CSS Rule and a CSS Class Rule Define external vs internal styles sheets Create CSS documents and rules Control text formatting using CSS Set and edit background colors and images using CSS Change link properties with CSS Specify alternate link colors Apply page margins using CSS Apply text alignment using CSS Format lists using CSS Create and apply CSS class rules Create and link external style sheets A-Technology Operations and Concepts (09-12) B-Creativity and E-Research and Information Literacy (09-12) F-Critical Thinking, Problem Solving, and Decision- Making (09-12)[State:New A-Nature of Technology: Creativity and Innovation (09-12) B-Design: Critical Thinking, Problem Solving, and Decision-Making (09-12) D-Research and Information Fluency (09-12) F-Resources for a Technological World (09-12) G-The Designed World (09-12) A-Critical Thinking and Problem Solving (09-12) B-Creativity and E-Communication and Media Fluency (09-12) F-Accountability, Page: 12 of 17

13 Plans: Productivity, and Ethics (09-12) C-Career Preparation (09-12) Page: 13 of 17

14 Duration: December/Week 16 UNIT NAME: Getting Started With Adobe Dreamweaver Enduring Understandings Essential Questions Knowledge Skills Standards Understanding the Adobe Dreamweaver workspace and panels allows you to effectively and efficiently create and edit Web documents. Adobe Dreamweaver can help to provide a deeper understanding of basic HTML coding practices. How can Dreamweaver help to cut down Web design time? What tools and/or functions does Dreamweaver have that help to eliminate syntax errors that may be common when "hand" coding HTML documents? What are the view options provided by Adobe Dreamweaver? Which one works best? Understanding why folder assets should be named Plan the layout of a Webpage View the Dreamweaver Workspace Work with views and panels Using panel groups Dock panel groups Open a web page Define a Website, local root folder, and assets folder, using Adobe Dreamweaver Open and create different document types with Dreamweaver View web page elements View a web page in a browser window Choose a window size Save and closing Dreamweaver files Create a folder for web site management Manage files Add a folder to your web site Use the files panel for file management A-Technology Operations and Concepts (09-12) B-Creativity and C-Communication and Collaboration (09-12)[State:New F-Critical Thinking, Problem Solving, and Decision- Making (09-12)[State:New B-Design: Critical Thinking, Problem Solving, and Decision-Making (09-12) G-The Designed World (09-12) A-Critical Thinking and Problem Solving (09-12) B-Creativity and E-Communication and Media Fluency (09-12) F-Accountability, Productivity, and Ethics (09-12) C-Career Preparation (09-12) Page: 14 of 17

15 Save a web page Plans: Page: 15 of 17

16 Duration: January/Week 17 - January/Week 20 UNIT NAME: Formatting Text, Links, and Images in Dreamweaver Enduring Understandings Essential Questions Knowledge Skills Standards Software that allows you to create Web sites efficiently, while still providing you with the same amount of coding control, is an essential element to creating successful Web projects in a timely manner. How can Dreamweaver help to make formatting text and links more efficient? How do I add and edit text properties and attributes using Adobe Dreamweaver? How do I efficiently create various types of links using Adobe Dreamweaver? How do you insert and edit images using adobe Dreamweaver? Understand the difference between HTML formatting and CSS formatting in Dreamweaver Identify the proper method for inserting and editing images using Adobe Dreamweaver Import text Import a Microsoft Word file into Dreamweaver Set basic text properties Create ordered and unordered list Insert an image using the Insert Panel Align and format an image Enhance an image Resize an image using the property inspector Use alternate text and setting accessibility preferences Insert and control a background image A-Technology Operations and Concepts (09-12) B-Creativity and E-Research and Information Literacy (09-12) A-Nature of Technology: Creativity and Innovation (09-12) B-Design: Critical Thinking, Problem Solving, and Decision-Making (09-12) D-Research and Information Fluency (09-12) F-Resources for a Technological World (09-12) G-The Designed World (09-12) A-Critical Thinking and Problem Solving (09-12) B-Creativity and E-Communication and Media Fluency (09-12) F-Accountability, Productivity, and Ethics (09-12) C-Career Preparation (09-12) Page: 16 of 17

17 Plans: Page: 17 of 17