Web Page Design (Master)

Transcription

1 St. Michael-Albertville High School Teacher: Ben Rusin Web Page Design (Master) September 2014 CEQ: WHAT IS HTML CODING AND HOW IS IT USED TO CREATE WEB SITES? AND HOW CAN IT BE USED TO CREATE WEB SITES? PHOTOSHOP AND HOW CAN IT BE INCORPORATED INTO WEBSITES? FLASH AND HOW CAN IT BE INCORPORATED INTO WEBSITES? What is a network and what are the benefits of using a network? How does the internet work? 1. Discsuss current computing technologies. LT1. I can discuss current computing technologies. CFA: The History of the and Good vs. Bad Textbook: Adobe Dreameweaver CS6 1 of 5

2 1. Networks Web Sites Group Access 2. Presentation 2. Explain what a network is and describe the benefits of using a network. 3. Distinguish between the different types of transmission media. 4. Understand network protocols. 5. Organize files and folders 6. Describe several categories of websites and the purpose of each. 7. Evaluate and cite web pages. 8. Describe IT Careers. LT2. I can explain what a network is and describe the benefits of using a network. LT3. I can distinguish between the different types of transmission media. LT4. I can understand network protocols. LT5. I can organize files and folders LT6. I can describe several categories of websites and the purpose of each. LT7. I can evaluate and cite web pages. LT8. I can describe IT Careers. Key Vocabulary internet intranet web site network web designer web developer protocol What is HTML coding and how is it used? 1. HTML Documents 2. HTML Codes 3. HTML Web Browsers 1. Describe the structure of an HTML document. 2. Create an HTML document using notepad. 3. View an HTML document in a web browser. LT1. I can describe the structure of an HTML document. LT2. I can create an HTML document using notepad. LT3. I can view an HTML CFA: Create website in HTML code Computer/ access for all students Adobe Dreamweaver Software Key Vocabulary: Alignment attribute document tags 2 of 5

3 4. Create headings, colors and horizontal rule in html code. 5. Add images to HTML documents 6. Add links and backgrounds in html code. document in a web browser. LT4. I can create headings, colors and horizontal rule in html code. LT5. I can add images to HTML documents LT6. I can add links and backgrounds in html code. HTML Hyperlink JavaScript multimedia table web browser web site. October 2014 How do you build a website in Dreamweaver? 1. Setting up a New Site 2. Adding Text and Images 3. Styling Your Pages 4. Creating Page Layouts 5. Advanced Page Layout 1. Create a new site. 2. Create a new web page and set page properties. 3. Add text 5. Add hyperlinks 6. Use class styles 7. Create tag selectors 8. Create and apply cascading style sheets 9. Using AP Divs for layout 10. Overlapping boxes 11. Float and image LT1. I can create a new site. LT2. I can create a new web. page and set page properties. LT3. I can add text. LT5. I can add hyperlinks. LT6. I can use class styles. LT7. I can create tag selectors. LT8. I can create and apply cascading style sheets. CFA: Dreamweaver Digital Classroom Lessons 1-6 CFA: Restaurant Web Page Digital Classroom Text Access for all student computers Key Vocabulary: content elements navigation bar 3 of 5

4 12. Float columns for layout LT9. I can use AP Divs for layout. LT10. I can overlap boxes LT11. I can float and image LT12. I can float columns for layout. target audience time stamp usability white space AP Divs float overlap November 2014 How do you build a website in Dreamweaver using intermediate features? 1. Transitions and Web Fonts 2. Tables 3. Flash, Video and Sound 4. Maximizing Site Design 5. Code-editing features 6. Web Forms 7. Interactivity 1. Add CSS3 transitions. 2. Create a table. 3. Merge cells in table. 5. Nestle tables. 6. Customize your workspace. 7. Save favorites. 8. Resize document window. LT1. I can add CSS3 transitions. LT2. I can create a table. LT3. I can merge cells in table. LT4. I can nestle tables. LT5. I can customize your workspace. LT6. I can save favorites. CFA: Dreamweaver Digital Classroom Lessons 7-16 CFA: Interest or Hobby Web Site CSA: Final Web Page FEATUREs Digital Classroom Text Access Adobe Flash CS6 4 of 5

5 8. Mobile Design and Layout 9. Managing Your Website 9. Inset Flash content. 10. Add background music. 11. Use built in snippets. 12. Float image rollovers. 13. Save a logo in the library. 14. Work in code view. 15. Insert comments. 16. Validate code. 17. Design a form. 18. Build a form. 19. Use the spry collapsible panel. 20. Create a mobile site. 21. Use check links. 22. Run a site report. LT7. I can resize document window. LT8. I can insert Flash content. LT9. I can add background music. LT10. I can use built in snippets. LT11. I can create image rollovers. LT12. I can save a logo in the library. LT13. I can work in code view. LT14. I can insert comments. LT15. I can validate code. LT16. I can design a form. LT17. I can build a form. LT18. I can use the spry collapsible panel. LT19. I can create a mobile site. LT20. I can use check links. LT21. I can run a site report. Key Vocabulary PNG GIF hotspot JPG rollover image animation frame layers motion tween symbols embedded video slideshow form 5 of 5