Web Design I: Dreamweaver Homework
advertisement
CT121 Web Design I: Dreamweaver Homework This packet includes the mandatory assignments for each Chapter that is covered in the required course textbook. All assignments must be completed on the date indicated on the syllabus and must be passed in at the beginning of class. NO LATE ASSIGNMENTS WILL BE ACCEPTED. Students must include their full name in legible writing on the first page of each Unit’s assignment and must be stapled. Professor Passanisi Benjamin Franklin Institute of Technology 41 Berkeley Street • Boston • MA • 02116 November-December Schedule Week #8 Fri 10/26 TOPICS Banner Design Lab Plan a Banner Create a Banner with PowerPoint Create a Banner with MSWord #9 Mon 10/29 Unit G: Using Forms to Control Input Plan a form Create a text field Add radio buttons Add check boxes Create a pull-down menu Add a comment box Add a push button Connect a form’s back end LAB: Unit G Independent Challenge 1 & 2 #9 Wed 10/31 Readings Read Unit G: #9 Fri 11/2 Final Presentation for the Friends of the Medford Public Library #10 Mon 11/5 Chapter 1: Getting Started with Dreamweaver Explore the Dreamweaver Workspace View a Web Page and Use Help Plan and Define a Website Add a Folder and Pages Chapter 2: Developing a Web Page Create Head Content & Set Page Properties Create, Import, and Format Text Add Links to Web Pages Use the History Panel and Edit Code Modify and Test Web Pages LAB Chapter 1 Project Builder 1 & 2 Chapter 2 Project Builder 1 & 2 #10 Wed 11/7 #10 Fri 11/9 #11 Mon 11/12 #11 Wed 11/14 #11 Fri 11/16 #12 Mon Read Chapter 2 in Adobe Dreamweaver CS5 Revealed Watch YouTube Video at http://youtu.be/iqqWT2LDvEo Read class handout for final Project site requirements Read chapter 3 in Adobe Dreamweaver CS5 Revealed Homework Assignment: Create banner for Friends of the Medford Public Library. Unit G Questions and Key Terms Due: 10/29 Start of class Assignment: Work on Edits for the Friends of the Medford Public Library Assignment: Independent Challenge 1 & 2 Work on Edits for the Friends of the Medford Public Library Due 11/2 Assignment: Chapter 1: Question and Keywords Due: 11/5 start of class Assignment: Chapter 2: Questions and Key Words Due: 11/7 start of class Assignment: Storyboard for Final project.. MUST BE DONE IN MSWORD Due: 11/9 Assignment: Chapter 3: Questions and Key Words Due: 11/14 start of class Veterans’ Day – No school Chapter 3: Working with Text and Images Create Unordered and Ordered lists Create, Apply, & Edit CSS Add Rules & Attach CSS Using Coding Tools to View and Edit Rules LAB Chapter 3 Project Builder 1 & 2 TEST HTML Code writing and ii Read chapter 4 in Adobe Dreamweaver CS5 Revealed Assignment: Chapter 4 Questions and Key Words Due: 10/24 start of class Assignment: Study HTML and DW Chapters 1-3 Assignment: Chapter 4 Week 11/19 #12 Wed 11/21 #13 Mon 11/26 #13 Wed 11/28 #13 Fri 11/30 #14 Mon 12/3 #14 Wed 12/5 #14 Fri 12/7 #15 Mon 12/10 #15 Wed 12/12 12/15 12/18 TOPICS Dreamweaver Chapters 1-3 Readings Homework Questions and Key Words Due: 11/26 start of class Thanksgiving Break – No school Chapter 4: Adding Images Insert and Align Images Enhance an Image and Use Alternate Text Insert a background Image and Perform Site Maintenance Adding Graphic Enhancements Chapter 5: Working with Links and Navigation Create External and Internal Links Create Internal Links to Named Anchors Create, Modify, and Copy a Navigation Bar Create an Image Map Manage Website Links LAB Chapter 4 Project Builder 1 & 2 Chapter 5 Project Builder 1 & 2 Chapter 6: Positioning Objects with CSS and Tables Create a Page Using CSS Layouts Add Content to CSS Layout Blocks Edit Content in CSS Layout Blocks Create a Table Resize, Split, and Merge Cells Insert and Align Images in Table Cells Insert Text and Format Cell Content Chapter 8: Using Style and Style sheets for Design Create and Use Embedded Styles Modify Embedded Styles Work With Conflicting Styles Using Coding tools to View and Edit Styles LAB Chapter 6 Project Builder 1 & 2 Chapter 8 Project Builder 1 & 2 Chapter 9: Collecting Data with Forms Plan and Create a Form Edit and Format a Form Work with Form Objects Test and Process a Form LAB Chapter 9 Project Builder 1 & 2 Test Dreamweaver Chapters 1-9 Final Presentation iii Read chapter 5 in Adobe Dreamweaver CS5 Revealed Assignment: Chapter 5 Questions and Key Words Due: 11/28 start of class Assignment: Read chapter 6 in Adobe Dreamweaver CS5 Revealed Read chapter 8 in Adobe Dreamweaver CS5 Revealed Read chapter 9 in Adobe Dreamweaver CS5 Revealed Assignment: Chapter 6 Questions and Key Words Due: 12/3 start of class Assignment: Chapter 8 Questions and Key Words Due: 12/5 start of class Assignment: Chapter 9 Questions and Key Words Due: 12/10 start of class Assignment: Packet Table of Contents Chapter 1: Getting Started with Dreamweaver ...................................................................... 1 Chapter 2: Developing a Web Page ........................................................................................ 9 Chapter 3: Working with Text and Cascading Style Sheets ....................................................15 Chapter 4: Adding Images .....................................................................................................19 Chapter 5: Working with Links and Navigation .....................................................................23 Chapter 6: Positioning Objects with CSS and Tables ..............................................................27 Chapter 8: Using Styles and Style Sheets for Design ..............................................................33 Chapter 9: Collecting Data with Forms ..................................................................................37 Sample of a Storyboard ........................................................................................................45 iv v CT121 DW:Chapter 1 Name: ______________________________________________________________________________ Chapter 1: Getting Started with Dreamweaver Questions 1. What is Dreamweaver? 2. What are the two additional toolbars in Dreamweaver that do not appear by default? 3. What are the three working views in Dreamweaver? 4. When would you use a dual-screen layout in Dreamweaver? 5. What are the different workspace layouts in Dreamweaver? 6. What does the Live View button do? 7. What are the basic visual elements on a Web page? 8. What is Adobe Community Help and how do you find it? 9. What are the different phases of a Website development project? 10. Why is it important that for each Website project be contained in it’s own Site folder? 11. List All the different steps involved in testing completed Web Pages. 12. What happens when you publish a Web page? 13. Why do you create a local site folder? 14. What is another name for the asset folder? 15. What is the difference between a menu bar and a navigation structure? 16. Why should you perform file-maintenance, such as renaming files and folders in a website in the Files panel rather than in Windows Explorer? 17. List the steps to create a new folder in Dreamweaver: 18. How do you fix a broken link for an asset? 19. Besides the <title> tag set how do you add a page title using Dreamweaver? 20. What are the tools that allow you to show the properties of a selected page element? 21. You display panels using the ___________menu. a) Window c) Panel b) Edit d) View 22. The tool that allows you to sow the properties of a selected page element is called the__________. a) Tool inspector c) Insert panel b) Element inspector d) Property inspector 23. Most information on a Web page is presented in the form of: a) Text c) Links b) Images d) Video 24. The view that is best for designing and creating a Web page is a) Code view c) A combination of both Code and Design views b) Design view d) Any of the above 2 25. On a Windows computer, which of the following is one of the Dreamweaver, then describe when you would use each view. a) History c) Application b) Design d) Files Chapter 1: Vocabulary Dreamweaver ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Website ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ XHTML ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ HTML ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Web Browser ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ File Panel ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Document Window ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ 2 File Panel ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Document Window ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Application Bar/Menu Bar ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Insert Panel ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Document Toolbar ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Browser Navigation Toolbar ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Live View ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Standard Toolbar ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ 2 Style Rendering Toolbar ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Related Files Toolbar ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Related Files ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Coding Toolbar ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Property Inspector ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Properties Pane ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Status Bar ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Tag Selector ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ 3 Panel ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Panel Groups ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Dock ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ View ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Design View ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Code View ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Duel Screen Layout ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Workspace Switcher ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ 4 Home Page ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Hyperlink/Link ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Image ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Banner ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Menu Bar ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Image Map ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Navigation Structure ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Rich Media Content ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ 5 Wireframe ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Parent Page ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Child Page ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Local Site Folder ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Files Panel ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Publish ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Web Server ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ISP ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ 6 FTP ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Deliverables ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Scope creep ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ IP Address ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Domain Name ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ URL ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Remote site ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Remote Server ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ 7 Assets ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Asset Folder ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Home Page ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ 8 CT121 DW: Chapter 2 Name: ______________________________________________________________________________ Chapter 2: Developing a Web Page Questions: 1. Why should you use white space effectively when developing a web page? 2. What are the four guidelines for laying out a Web page? 3. What are the two distinctive sections of a web page? 4. What is a web-safe color palette? 5. Who is accredited with developing the first web-safe color palette and what year was it created? 6. Why include meta tags keywords in a website design? 7. What does POWDER stand for? 8. What are hexadecimal RGB values? 9. Why use multiple fonts when defining a font-family? 10. What are the two ways to change the size of text using the Properties Inspector? 11. How do you apply a line break in Dreamweaver? 12. How do you choose filenames for a web page? 13. What is the navigation bar? 14. Who are the WCAG and what do they do? 15. How do you prevent data loss in Dreamweaver? 16. Where can you find all the URLs listing all external links in Dreamweaver? 17. What do you call each task that is listed in the History Panel? 18. What is the default number of recorded steps in the History Panel? 19. Why insert comments into the code in Dreamweaver? 20. Why test a web page using different browsers and screen sizes? Vocabulary White Space ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Templates ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 2 Passanisi 2012 10 Developing a Web Page Head content ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Meta tags ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Keywords ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Description ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Body ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ background color ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ CSS layout block ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Default font color ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 2 Passanisi 2012 11 Developing a Web Page Default link color ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ POWDER ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ XML ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Hexadecimal RGB value ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Clean HTML code ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Tags ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Cascading Style Sheets ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Font-family ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 2 Passanisi 2012 12 Developing a Web Page Line break ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Broken links ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Point of contact ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Navigation bar ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ URL ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ External links ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ History Panel ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Code Inspector ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 2 Passanisi 2012 13 Developing a Web Page JavaScript ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Rollover ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 2 Passanisi 2012 14 Developing a Web Page CT121 DW: Chapter 3 Name: ______________________________________________________________________________ Chapter 3: Working with Text and Cascading Style Sheets Questions 1. What are the three types of list that can be created in Dreamweaver? 2. What is another name for an ordered list? 3. What is a definition list? 4. What is Coding for the Semantic Web? 5. Where is the CSS styles Panel in Dreamweaver? 6. What is the difference between a selector and a declaration? 7. What is the difference between an ID tag and a Tag type? 8. What is the difference between Sans-serif and Serif? 9. What is the style rendering toolbar? 10. In Dreamweaver what are some of the differences between embedded style sheets and external style sheets? Vocabulary Cascading Style Sheets ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Unordered Lists ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Bullet ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Bulleted Lists ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Ordered Lists ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ External Style Sheet ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Embedded Styles ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Inline Styles ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Class type ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 3 Passanisi 2012 16 Working with Text and Cascading Style Sheets ID type ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Tag type ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Compound ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Selector ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Declaration ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Sans-serif ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Serif ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Related Files ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 3 Passanisi 2012 17 Working with Text and Cascading Style Sheets Code hints ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 3 Passanisi 2012 18 Working with Text and Cascading Style Sheets CT121 DW: Chapter 4 Name: ______________________________________________________________________________ Chapter 4: Adding Images Questions: 1. What are the three types of list that can be created in Dreamweaver? 2. What are the advantages and disadvantages of using a GIF file? 3. What are the advantages and disadvantages of using a JPG file? 4. What are the advantages and disadvantages of using a PNG file? 5. What are the 9 category buttons that the Assets panel contains? 6. What is alternative text? 7. Why add a background image to a web page? 8. How do you remove non-web-safe colors from a website? 9. How do you prevent visitors from downloading a picture from your website? Vocabulary: Graphics ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ GIF ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ JPG or JPEG ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ PNG ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Opacity ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Assets panel ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Image Placeholder ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Aligning ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Borders ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Background Images Chapter 4 Passanisi 2012 20 Adding Images ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Tiled Image ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Non-web-safe colors ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Thumbnail image ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Favicon ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ No right-click script ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 4 Passanisi 2012 21 Adding Images Chapter 4 Passanisi 2012 22 Adding Images CT121 DW: Chapter 5 Name: ______________________________________________________________________________ Chapter 5: Working with Links and Navigation Questions: 1. What are the two important parts of a navigation link? 2. Label the diagram below: src=”images/home_botton.jpg A. B. 3. What are is the difference between a relative path and a root-relative path 4. What does the term case-sensitive” mean? Provide examples from the book. 5. What are the links called in a Spry Menu Bar? 6. What does Dreamweaver automatically add to a web page upon inserting the Spry Menu Bar? 7. What does the Spry Assets folder contain? 8. Why add a background image to a web page? 9. How do you remove non-web-safe colors from a website? 10. What are the two ways to create images maps in Dreamweaver? 11. What is the Check Links Sitewide feature in Dreamweaver? 12. Why should you test your Website against the Wireframe? Vocabulary: Social Networking ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Online Communities ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Internal Links ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ External Links ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Path ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Absolute Path ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ URL ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Relative Path ________________________________________________________________________________ Chapter 6 Passanisi 2012 24 Positioning Objects with CSS and Tables ________________________________________________________________________________ ________________________________________________________________________________ Opacity ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Assets panel ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Image Placeholder ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Aligning ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Named Anchors ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Target ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Spry Menu Bar ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Widget ________________________________________________________________________________ Chapter 6 Passanisi 2012 25 Positioning Objects with CSS and Tables ________________________________________________________________________________ ________________________________________________________________________________ Spry Framework ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Image Map ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Hotspot ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Orphaned files ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Breadcrumbs tail ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Site map ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 6 Passanisi 2012 26 Positioning Objects with CSS and Tables CT121 DW: Chapter 7 Name: ______________________________________________________________________________ Chapter 6: Positioning Objects with CSS and Tables Questions: 1. What are the advantages for using CSS page layouts and div tags when creating a web page? 2. What are the advantages for using tables when creating a web page? 3. What are the advantages of using div tags instead of tables when creating a web page? 4. What are the advantages of using tables instead of div tags when creating a web page? 5. What is the difference between a fixed layout and a liquid layout? 6. What other languages can you use to create information containers on a web page? 7. What is the code used to create a comment in Dreamweaver? 8. What steps should you include when mapping out a table for a web page? 9. How do you make a table more accessible to a visually disabled viewer? 10. Why is it important to set a table and cell width when using tables for your web page layout? How will this effect smartphones and tablets? 11. Why is it important to understand the HTML Table tags when using Dreamweaver? 12. How does cell padding and cell spacing help with placing images into a table? Vocabulary: CSS page Layouts ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Div tags ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Tables ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Cells ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Rows ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Columns ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Behaviors ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 6 Passanisi 2012 28 Positioning Objects with CSS and Tables AP div tag ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ AP element ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Fixed Layout ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Liquid Layout ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Tracing image ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ XSL ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ XSLT/Extensible Stylesheet Language Transformations ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Browser Compatibility Check (BCC) ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 6 Passanisi 2012 29 Positioning Objects with CSS and Tables CSS Layout Box Model ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Parent Container ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Child Container ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Nested Table ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Cell Padding ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Cell Wall ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Cell Spacing ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ WYSIWYG ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 6 Passanisi 2012 30 Positioning Objects with CSS and Tables Table headers ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Split ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Merge ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Delimiter ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Delimiter files ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Importing ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Exporting ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Inheritance ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 6 Passanisi 2012 31 Positioning Objects with CSS and Tables Nested tag ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 6 Passanisi 2012 32 Positioning Objects with CSS and Tables CT121 DW: Chapter 8 Name: ______________________________________________________________________________ Chapter 8: Using Styles and Style Sheets for Design Questions: 1. List the three types of formatting that can be used to apply styles to a Web page or Web site: 2. List three advantages of formatting with CSS: 3. How do you apply a formatting rule that is used only on a single page in a Web site? 4. Where do you apply inline styles? 5. What is the naming convention that is used when naming a class style or a custom style. 6. What are the two modes in the CSS Styles panel and what does each one do? 7. What is the extension used in naming an external style sheet? 8. How do you attach an External Style sheet to a page or template? 9. What are Media-Dependent Style sheets? 10. What are the three sources that style sheets can originate from? 11. Style sheets are processed by one of the three order of precedence. List each order of precedence below with their respected method: Vocabulary: External Style Sheet ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Global CSS rule ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Embedded Styles ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Inline Style ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 8 Passanisi 2012 34 Working with Form Objects Class Style/Custom Style ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ All Rules pane ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Properties pane ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Summary for Selection pane ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Rules Pane ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Media-dependent Style sheets ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Cascading ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Pseudo Class Styles ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 8 Passanisi 2012 35 Working with Form Objects Chapter 8 Passanisi 2012 36 Working with Form Objects CT121 DW: Chapter 9 Name: ______________________________________________________________________________ Chapter 9: Collecting Data with Forms Questions: What is the first step in creating a form in Dreamweaver? When collecting information from a visitor how do you place the importance of each field in its order of appearance on the web page? What are the two methods used to process the information collected in a form? List the most common types of server-side applications used to process forms below: What is the difference between using the POST method and the Get method when processing a form? What do CGI Scripts do to a form? Why would you use a table to lay out a form? What are form objects and what do they do? List as many of them as you can find in Chapter 9 below. Why use hidden fields in a form? How would you secure the information on a form to insure the information collected is only seen by it’s intended recipient? Why are forms considered an excellent example of dynamic content? Vocabulary: Form objects ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Form Labels ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Server-side Scripting ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 9 Passanisi 2012 38 Collecting Data with Forms Common Gateway Interface (CGI) ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Cold Fusion ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Java Server Page (JSP) ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Active Server Page (ASP) ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Client-side Scripting ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ JavaScript (Jscript) ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Action Properties ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Method Property ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 9 Passanisi 2012 39 Collecting Data with Forms GET Method ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ POST Method ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Form name property ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Target Property ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Fieldset ________________________________________________________________________________ ` ________________________________________________________________________________ ________________________________________________________________________________ Form Elements ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Form controls ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Form inputs/Form fields ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 9 Passanisi 2012 40 Collecting Data with Forms Text Fields ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Text area field ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Check boxes ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Radio buttons ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Radio Group ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Menu/List ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Hidden fields ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Image fields ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 9 Passanisi 2012 41 Collecting Data with Forms File Field ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Submit button ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Reset button ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Custom button ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Jump Menus ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Label tag ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Secure Socket Layer ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Hypertext Transfer Protocol Security (HTTPS) ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 9 Passanisi 2012 42 Collecting Data with Forms Jump menus ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Dynamic Content ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Testing server ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Live View ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Static content ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Spry data set ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Spry widget ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Spry framework ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 9 Passanisi 2012 43 Collecting Data with Forms Spry Validation Field Widgets ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 9 Passanisi 2012 44 Collecting Data with Forms CT121 DW: Chapter 10 Name: ______________________________________________________________________________ Chapter 10: Positioning Object with AP DIVS Questions: 1. List two things that AP divs tags let you control: 2. What program allows a Web Developer add behaviors to an AP divs tag? 3. What are the three tools that can control the appearance of an AP divs tag? 4. What are the four attributes that control the placement of AP elements? 5. How does the Overflow settings affect AP elements in Dreamweaver? 6. List 2 things the AP Elements panel does: Vocabulary: CSS Layout blocks ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ div tags ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ AP div tag ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Behaviors ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ ActionScript ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ AP Elements ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Fold line ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Clip Property ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Vis property ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 10 Passanisi 2012 46 Positioning Objects with AP Divs Inherit ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Overflow Property ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Absolute Positioning ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Left property (L) ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Top property (T) ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Width Property ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Height Property ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Z-index property ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 10 Passanisi 2012 47 Positioning Objects with AP Divs AP Elements Panel ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Nested AP elements ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 10 Passanisi 2012 48 Positioning Objects with AP Divs CT121 DW: Chapter 11 Name: ______________________________________________________________________________ Chapter 11: Adding Media and Interactivity with Flash and Spry Questions: 1. List at least six (6) types of media objects that can be added to a website to create a much richer user experience. 2. Why should a Web Designer be concern with creating low-bandwidth animations? 3. What does the Sever Behavior panel do in Dreamweaver? 4. What is the difference between a progressive video download and a streaming video download? 5. The file extension for a Flash video file is? a) vid c) .swf b) .fla d) .flv 6. The panel that is used to add JavaScript functions to a page element is? a) The Behaviors panel c) The JavaScript Panel b) The Server Behaviors panel d) The Functions panel 7. Which event will trigger an action when a mouse is placed over a page element? a) onMouseOut c) onLoad b) onMouseOver d) onClick 8. When you add a Spry effect to a page element, which folder is automatically created? a) SpryAssets folder c) SpryEffects foler b) Spry folder d) Effects folder Vocabulary: Plug-in/add-on ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Media Objects ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Low-bandwidth ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Vector-based graphics ________________________________________________________________________________ ________________________________________________________________________________ Rich content ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Flash button ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Rollover image ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Swap Image Behavior ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 11 Passanisi 2012 50 Adding Media & Interactivity with Flash & Spry Swap Image Restore ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Behaviors ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Asynchronous JavaScript and XML ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Spry Framework for AJAX ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Spry widgets ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Spry effects ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Flash Video Files ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Progressive video download ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 11 Passanisi 2012 51 Adding Media & Interactivity with Flash & Spry Streaming video download ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Buffer ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Audio Visual Interleave (AVI) ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Motion Picture Experts Group (MPEG) ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 11 Passanisi 2012 52 Adding Media & Interactivity with Flash & Spry CT121 DW: Chapter 12 Name: ______________________________________________________________________________ Chapter 12: Creating and Using Templates Questions: 1. List three advantages of using templates when creating webpages: 2. Why would you use an Edible Optional Regions in a template? 3. List two websites where you can find free and for sale templates that can be used in Web development 4. Why would you need to create nested templates? 5. An area in a template where users can add or change content is called? a) A locked region c) An Optional region b) An editable region d) A hidden region 6. The name of the folder that is created when a template is first saved is called a) Templates c) TemplatePages b) TemplateAssets d) Temp 7. Which type of region must every template contain? a) Repeating region c) Optional region b) Editable region d) Repeatable table Vocabulary: Template ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Locked regions ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Optional region ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Editable region ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Editable optional region ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Nested templates ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Chapter 12 Passanisi 2012 54 Creating and Using Templates CT121 DW: Chapter 13 Name: ______________________________________________________________________________ Chapter 13: Working with Library Items and Snippets Questions: Why use Library items? How do you edit a library item? How do you make Library Items editable on a page? Why use Code Snippets? Where do you find Code Snippets? Vocabulary: Library item ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Code Snippets ________________________________________________________________________________ ________________________________________________________________________________ ________________________________________________________________________________ Student Name Today’s Date CT121: Web Design I Passanisi Site Namw Home Page Index.htm Site Name Goes Here Logo goes here Home Page Biography Related Course Work [Type a quote from the document or the summary of an interesting point. You can position the text box anywhere in the document. Use the Drawing Tools tab to change the formatting of the pull quote text box.] ePortfolio Contact Picture will go here Designed by: Student Name CT121: Web Design I Fall 2012 Benjamin Franklin Institute of Technology This will be an external link to BFIT.org Student ePortfolio Site Home page with introduction of student This will be an email link to the student’s email address Site name ePortfolio Page eportfolio.htm Site Name Goes Here Logo goes here Home Page Biography Related Course Work ePortfolio Contact ePortfolio Here is a sample of my work HTML Site Samples Paradise Mountain Family Resort Class lab utilizing HTML 4.0, XHTML, CSS2, Forms, and tables. Metro Water Class Assignment utilizing HTML 4.0, XHTML, CSS2, Forms, and tables. Star Vacations Class Assignment utilizing HTML 4.0, XHTML, CSS2, Forms, and tables. Friends of the Medford Public Library HTML Midterm Project site redesign utilizing HTML 4.0, XHTML, CSS2, Forms, and tables. Dreamweaver site Samples The Striped Umbrella Class Lab utilizing Dreamweaver 5 Carolyne’s Creations Project Designed by:Builder StudentUsing NameCS5 Dreamweaver Email link to the This will be an external link to TripSmart Project Builder Using CS5 Dreamweaver CT121: Web Design I Fall 2012 BFIT.org student’s email address Benjamin Franklin Institute of Technology Student’s Last name 57 Site name Related Course Work Page course.htm Site Name Goes Here Logo goes here Home Page Biography Related Course Work ePortfolio Contact Related Course Work Computer Technology – Applied Technology Program (AS) CT111 CT121 CT122 CT134 CT145 CT211 CT212 CT217 CT218 CT221 CT245 CT271 CT273 Computer Concepts Web Design I: HTML and Dreamweaver Web Design II: Adobe Flash Introduction to Operating Systems Survey of Computer Programming Languages Website Management PC Maintenance & Management CompTIA A+ Certification Preparation Database Management Systems Enterprise Database Management Introduction to Mobile Application Development Using Android Introduction to Networking Routing Basics Computer Concepts This course presents a comprehensive look at computer architecture, including the system unit, memory, input/output and storage devices. Personal computers are utilized in a laboratory setting to provide students with hands-on exposure to hardware components. Students are introduced to the M/S Windows Operating System and how the hardware and software work together. An in-depth look at the motherboard, memory management and storage devices is included. Other topics include the application of M/S Word and Excel to prepare lab reports, an introduction to the Internet and an understanding of information literacy through the use of various Internet search engines. The course concludes with a discussion of computer ethics and social issues. (back to top) Web Design I: HTML and Dreamweaver Students learn how to design and develop Web sites using HTML and Dreamweaver. Students will create Web pages utilizing forms, frames, cascading work sheets, links and images. Students will reinforce the skills learned in this course through the design, development and publishing of their own website. (back to top) This will be an external link to BFIT.org Student’s Last name Designed by: Student Name CT121: Web Design I Fall 2012 Benjamin Franklin Institute of Technology 58 Email link to the student’s email address Student’s Last name 59
