CT121 Web Design I: Dreamweaver Homework

Transcription

1 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

2

3 November-December Schedule Week TOPICS Readings Homework #8 Banner Design Lab Read Unit G: Assignment: Fri Plan a Banner Create banner for 10/26 Create a Banner with PowerPoint Friends of the Medford Create a Banner with MSWord Public Library. Unit G Questions and Key Terms Due: 10/29 Start of class #9 Unit G: Using Forms to Control Input Assignment: Mon Plan a form Work on Edits for the 10/29 Create a text field Friends of the Medford Add radio buttons Public Library Add check boxes Create a pull-down menu Add a comment box Add a push button Connect a form s back end #9 LAB: Unit G Assignment: Wed 10/31 Independent Challenge 1 & 2 Independent Challenge 1 & 2 Work on Edits for the Friends of the Medford Public Library #9 Fri 11/2 #10 Mon 11/5 #10 Wed 11/7 #10 Fri 11/9 #11 Mon 11/12 #11 Wed 11/14 #11 Fri 11/16 #12 Mon Final Presentation for the Friends of the Medford Public Library 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 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 2 in Adobe Dreamweaver CS5 Revealed Watch YouTube Video at Read class handout for final Project site requirements Read chapter 3 in Adobe Dreamweaver CS5 Revealed Veterans Day No school Read chapter 4 in Adobe Dreamweaver CS5 Revealed 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 Assignment: Chapter 4 Questions and Key Words Due: 10/24 start of class Assignment: Study HTML and DW Chapters 1-3 Assignment: Chapter 4

4 Week TOPICS Readings Homework 11/19 Dreamweaver Chapters 1-3 Questions and Key Words Due: 11/26 start of class #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 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 12/15 Test Dreamweaver Chapters /18 Final Presentation Thanksgiving Break No school Read chapter 5 in Adobe Dreamweaver CS5 Revealed 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 5 Questions and Key Words Due: 11/28 start of class Assignment: 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: iii

5 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 Chapter 4: Adding Images Chapter 5: Working with Links and Navigation Chapter 6: Positioning Objects with CSS and Tables Chapter 8: Using Styles and Style Sheets for Design Chapter 9: Collecting Data with Forms Sample of a Storyboard iv

6 v

7 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?

8 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

9 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

10 File Panel Document Window Application Bar/Menu Bar Insert Panel Document Toolbar Browser Navigation Toolbar Live View Standard Toolbar 2

11 Style Rendering Toolbar Related Files Toolbar Related Files Coding Toolbar Property Inspector Properties Pane Status Bar Tag Selector 3

12 Panel Panel Groups Dock View Design View Code View Duel Screen Layout Workspace Switcher 4

13 Home Page Hyperlink/Link Image Banner Menu Bar Image Map Navigation Structure Rich Media Content 5

14 Wireframe Parent Page Child Page Local Site Folder Files Panel Publish Web Server ISP 6

15 FTP Deliverables Scope creep IP Address Domain Name URL Remote site Remote Server 7

16 Assets Asset Folder Home Page 8

17 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?

18 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 10 Developing a Web Page

19 Head content Meta tags Keywords Description Body background color CSS layout block Default font color Chapter 2 11 Developing a Web Page

20 Default link color POWDER XML Hexadecimal RGB value Clean HTML code Tags Cascading Style Sheets Font-family Chapter 2 12 Developing a Web Page

21 Line break Broken links Point of contact Navigation bar URL External links History Panel Code Inspector Chapter 2 13 Developing a Web Page

22 JavaScript Rollover Chapter 2 14 Developing a Web Page

23 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

24 Unordered Lists Bullet Bulleted Lists Ordered Lists External Style Sheet Embedded Styles Inline Styles Class type Chapter 3 16 Working with Text and Cascading Style Sheets

25 ID type Tag type Compound Selector Declaration Sans-serif Serif Related Files Chapter 3 17 Working with Text and Cascading Style Sheets

26 Code hints Chapter 3 18 Working with Text and Cascading Style Sheets

27 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

28 JPG or JPEG PNG Opacity Assets panel Image Placeholder Aligning Borders Background Images Chapter 4 20 Adding Images

29 Tiled Image Non-web-safe colors Thumbnail image Favicon No right-click script Chapter 4 21 Adding Images

30 Chapter 4 22 Adding Images

31 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?

32 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 24 Positioning Objects with CSS and Tables

33 Opacity Assets panel Image Placeholder Aligning Named Anchors Target Spry Menu Bar Widget Chapter 6 25 Positioning Objects with CSS and Tables

34 Spry Framework Image Map Hotspot Orphaned files Breadcrumbs tail Site map Chapter 6 26 Positioning Objects with CSS and Tables

35 CT121 DW: Chapter 7 Name: Questions: Chapter 6: Positioning Objects with CSS and Tables 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?

36 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 28 Positioning Objects with CSS and Tables

37 AP div tag AP element Fixed Layout Liquid Layout Tracing image XSL XSLT/Extensible Stylesheet Language Transformations Browser Compatibility Check (BCC) Chapter 6 29 Positioning Objects with CSS and Tables

38 CSS Layout Box Model Parent Container Child Container Nested Table Cell Padding Cell Wall Cell Spacing WYSIWYG Chapter 6 30 Positioning Objects with CSS and Tables

39 Table headers Split Merge Delimiter Delimiter files Importing Exporting Inheritance Chapter 6 31 Positioning Objects with CSS and Tables

40 Nested tag Chapter 6 32 Positioning Objects with CSS and Tables

41 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?

42 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 34 Working with Form Objects

43 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 35 Working with Form Objects

44 Chapter 8 36 Working with Form Objects

45 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?

46 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 38 Collecting Data with Forms

47 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 39 Collecting Data with Forms

48 GET Method POST Method Form name property Target Property Fieldset ` Form Elements Form controls Form inputs/form fields Chapter 9 40 Collecting Data with Forms

49 Text Fields Text area field Check boxes Radio buttons Radio Group Menu/List Hidden fields Image fields Chapter 9 41 Collecting Data with Forms

50 File Field Submit button Reset button Custom button Jump Menus Label tag Secure Socket Layer Hypertext Transfer Protocol Security (HTTPS) Chapter 9 42 Collecting Data with Forms

51 Jump menus Dynamic Content Testing server Live View Static content Spry data set Spry widget Spry framework Chapter 9 43 Collecting Data with Forms

52 Spry Validation Field Widgets Chapter 9 44 Collecting Data with Forms

53 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

54 div tags AP div tag Behaviors ActionScript AP Elements Fold line Clip Property Vis property Chapter Positioning Objects with AP Divs

55 Inherit Overflow Property Absolute Positioning Left property (L) Top property (T) Width Property Height Property Z-index property Chapter Positioning Objects with AP Divs

56 AP Elements Panel Nested AP elements Chapter Positioning Objects with AP Divs

57 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 b).fla c).swf d).flv 6. The panel that is used to add JavaScript functions to a page element is? a) The Behaviors panel b) The Server Behaviors panel c) The JavaScript Panel d) The Functions panel 7. Which event will trigger an action when a mouse is placed over a page element? a) onmouseout b) onmouseover c) onload d) onclick 8. When you add a Spry effect to a page element, which folder is automatically created? a) SpryAssets folder b) Spry folder c) SpryEffects foler d) Effects folder

58 Vocabulary: Plug-in/add-on Media Objects Low-bandwidth Vector-based graphics Rich content Flash button Rollover image Swap Image Behavior Chapter Adding Media & Interactivity with Flash & Spry

59 Swap Image Restore Behaviors Asynchronous JavaScript and XML Spry Framework for AJAX Spry widgets Spry effects Flash Video Files Progressive video download Chapter Adding Media & Interactivity with Flash & Spry

60 Streaming video download Buffer Audio Visual Interleave (AVI) Motion Picture Experts Group (MPEG) Chapter Adding Media & Interactivity with Flash & Spry

61 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 b) An editable region c) An Optional region d) A hidden region 6. The name of the folder that is created when a template is first saved is called a) Templates b) TemplateAssets 7. Which type of region must every template contain? a) Repeating region b) Editable region Vocabulary: Template c) TemplatePages d) Temp c) Optional region d) Repeatable table Locked regions

62 Optional region Editable region Editable optional region Nested templates Chapter Creating and Using Templates

63 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

64 Student Name Today s Date CT121: Web Design I Passanisi Site Namw Home Page Index.htm Logo goes here Site Name Goes Here Home Page Biography Related Course Work eportfolio Contact [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.] 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 This will be an link to the student s address Student eportfolio Site Home page with introduction of student

65 Site name eportfolio Page eportfolio.htm Logo goes here Site Name 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 This will be an external link to BFIT.org Designed by: Student Name CT121: Web Design I Fall 2012 Benjamin Franklin Institute of Technology link to the student s address Student s Last name 57

66 Site name Related Course Work Page course.htm Logo goes here Site Name 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 Designed by: Student Name CT121: Web Design I Fall 2012 Benjamin Franklin Institute of Technology link to the student s address Student s Last name 58

67 Student s Last name 59