ITD 210 EXAM 1 STUDY GUIDE

Transcription

1 ITD 210 EXAM 1 STUDY GUIDE FINAL EXAM: ADOBE WEB COMMUNICATION USING DREAMWEAVER CS3 OBJECTIVES Domain 1.0 Setting Project Requirements 1.1 Identify the purpose, audience, and audience needs for a website. 1.2 Identify web page content that is relevant to the website purpose and appropriate for the target audience. 1.3 Demonstrate knowledge of standard copyright rules (related terms, obtaining permission, and citing copyrighted material). 1.4 Demonstrate knowledge of website accessibility standards that address the needs of people with visual and motor impairments. 1.5 Make website development decisions based on your analysis and interpretation of design specifications. 1.6 Understand project management tasks and responsibilities. Domain 2.0 Planning Site Design and Page Layout 2.1 Demonstrate knowledge of best practices for designing a website, such as maintaining consistency, separating content from design, using standard fonts and web-safe colors. 2.2 Produce website designs that work equally well on various operating systems and browser versions/configurations. 2.3 Demonstrate knowledge of page layout design concepts and principles. 2.4 Identify basic principles of website usability, readability, and accessibility. 2.5 Demonstrate knowledge of flowcharts and storyboards to create web pages and a site map (site index) that maintain the planned website hierarchy. 2.6 Communicate with others (such as peers and clients) about design and content plans. Domain 3.0 Understanding the Adobe Dreamweaver CS3 Interface 3.1 Identify elements of the Dreamweaver interface. 3.2 Use the Insert bar. 3.3 Use the Property inspector. 3.4 Use the Assets panel. 3.5 Use the Files panel. Domain 4.0 Adding Content 4.1 Define a Dreamweaver site. 4.2 Create, title, name, and save a web page. 4.3 Follow a flowchart and storyboards to create web pages and a site map (site index) thatmaintain the planned website hierarchy. 4.4 Add text to a web page. ITD 210 Exam 1 Study Guide Page 1

2 4.5 Insert images and apply alternative text on a web page. 4.6 Link web content, using hyperlinks, links, and named anchors. 4.7 Insert rich media, such as video, sound, and animation in Flash format. 4.8 Insert navigation bars, rollover images, and buttons created in Fireworks on a web page. 4.9 Build image maps Import tabular data to a web page Import a Microsoft Word or Microsoft Excel document to a web page Create forms. Domain 5.0 Organizing content 5.1 Set and modify document properties. 5.2 Organize content by using tables. 5.3 Organize web page layout with absolutely-positioned div tags and CSS styles. 5.4 Modify text and text properties. 5.5 Modify images and image properties. 5.6 Modify Flash movies on a web page. 5.7 Create web page templates. 5.8 Use basic HTML tags to set up an HTML document, format text, add links, create tables, and build ordered and unordered lists. 5.9 Add head content to make a web page visible to search engines Use CSS to implement a reusable design. Domain 6.0 Evaluating and Maintaining a Site 6.1 Conduct basic technical tests. 6.2 Identify techniques for basic usability tests. 6.3 Present web pages to others (such as team members and clients) for feedback and evaluation. 6.4 Identify methods for collecting site feedback. 6.5 Manage assets, links, and files for a site. 6.6 Publish and update site files to a remote server. ITD 210 Exam 1 Study Guide Page 2

3 ADOBE DREAMWEVER CS3 REVEALED TEXTBOOK CHAPTER 1 GETTING STARTED WITH DREAMWEAVER Introduction Web site, XHTML, HTML, Files panel, home page, site map, navigation structure. 1. Getting Started with Dreamweaver workspace, panels, property inspector, files panel, document window, menu bar, Insert bar, Toolbars, Status bar, Tag selector, panel groups, views, design views, code view, code/design view, debugging, Multipl e Document Interface 2. View a web page and use Help home page, links, hyperlinks, banners, navigation bars, image map, Flash button objects, Dreamweaver help 3. Plan and define a web site Phases: 1) plan site 2) set up basic structure 3) create pages 4) test pages 5) modify pages 6) publish site 7) maintain site. See Checklist page Parent page, child pages, root folder, site definition, Files panel, FTP, web server, IP addresses, domain names, local site, remote server, remote site. 4. Add a folder and pages and set the home page Assets, set home page, File panel for file management, default images folder 5. Create and view a site map Site map, check out pages, tree structure, XML site map, Site map options, Site map layout (file names or page titles), Expand button in Files panel, CHAPTER 2 DEVELOPING A WEB PAGE Introduction Page layout, white space, multimedia elements, KISS principle, intuitive navigation structure, consistent theme; Use Dreamweaver tools: code inspector, history panel, meta keywords, meta description, and page properties. 1. Create head content and set page properties Head content, meta tags, PICS rating, meta keywords, meta description, body section, background color, default font, default link colors, unvisited links, visited links, accessibility, Section 508, design appropriate content for target audience, Hexadecimal values for web colors 2. Create, import, and format text format text using Property inspector, font combination, default base font, HTML tags vs. CSS, choose appropriate file names, import and link info from Microsoft Office files, Clean Up Word HTML comman d, text properties, sans serif fonts, serif fonts, ransom note effect, 3. Add links to a Web page broken links, point of contact for a web page, 4 types of links: 1) absolute 2) relative 3) mailto 4) anchor; n avigation bar, browser for file icon, compass icon to link, view linked pages in site map 4. Use the History panel and edit code History panel, step, task, undo steps, Code inspector, Javascript function, rollover special effect, Reference panel (Reference books inside of Dreamweaver), date object, 5. Modify and test Web pages Test, test, test. Test local site. Test using different browsers and screen sizes. Test web page in a mobile device (simulator). Use smart design principles. Choose a window resolution. ITD 210 Exam 1 Study Guide Page 3

4 CHAPTER 3 WORKING WITH TEXT AND IMAGES Introduction Format text as lists so easier to scan a web page. Cascading Style Sheets (CSS) replace many deprecated XHTML tags and attributes. Use images to enhance a page. Use Dreamweaver tools: Assets panel, CSS Styles panel, Properties inspector. 1. Create unordered and ordered lists Unordered list (bulleted list), bullet, Ordered list (numbered lists), format lists, list properties, definition lists. 2. Create, apply, and edit Cascading Style Sheets External style sheets, Embedded styles (internal in head section), Inline styles (internal in body section). Class styles (begin with period), HTML style used to customize a style for an existing XHTML tag. Advantages of using style sheets. CSS rules include selector and declaration. Declaration includes the property and the value. New rule button, edit rule, CSS rule definition dialog box. Apply a style sheet. 3. Add styles and attach Cascading Style Sheets External style sheets are a powerful tool. Attach (link) an external style sheet (.css file extension). 4. Insert and align graphics Graphic file formats (gif, jpeg, png). Opacity, transparency, licensing restrictions, browser support of png, Adobe Bridge, Assets panel and Category buttons, view thumbnails, align image. Use gripper to undock. Use Favorites in Assets panel. Graphics versus images. 5. Enhance an image and use alternate text Enhance an image. Resize using an external image editor such as Photoshop or Fireworks, borders, alternate text for accessibility, screen reader device, W3C Priority 1 checkpoints. Add border, add horizontal space. Adjust brightness/contrast. Integrate Photoshop with Dreamweaver. 6. Insert a background image and perform site maintenance Background image, tiled image, manage images, Websafe colors, HTML body tag: bgcolor attribute, background attribute. Manage image files, Accessibility use high contrast color for text readability. CHAPTER 4 WORKING WITH LINKS Introduction A web site is powerful because of the links that connect pages and to other web sites. Differentiate between internal and external links. Use Dreamweaver tools common toolbar, named anchor, navigation bar, image map buttons in Properties Inspector. 1. Create external and internal links Absolute page, URL, relative path, root relative path, document relative path. External link, link target, view internal and external links in site map, internal link. 2. Create internal links to names anchors Named anchor, target (spot on web page), internal links to named anchors. Insert named anchor, create link to named anchor,. 3. Insert rollovers with Flash text Vector based graphics, Flash text, Flash player. 4. Create, modify and copy a navigation bar Navigation bar using images, element, States: 1) up image (not under mouse pointer) 2) Down image (click image) 3) Over while down image (clicked and image under mouse pointer). Rollovers, images as links. See page 4 25 for Navigation bar settings. 5. Create an image map Image map, hotspot tools 1) Rectangular hotspot tool 2) Oval hotspot tool 3) Polygon hotspot tool. Advantages to using an image map. 6. Manage Web site links Prevent orphaned files. Navigation design issues. Leave bread crumbs trail. Check Links Sitewide under Site menu. ITD 210 Exam 1 Study Guide Page 4

5 CHAPTER 5 USING HTML TABLES TO LAY OUT A PAGE Introduction A simple method to layout a web page is to use a table. Tables are placeholders made up of small boxes called cells arranged in rows and columns. Plan your layout on paper before you create your table. Dreamweaver tools used are Table properties, Cell properties and Row properties. 1. Create a table Table mode versus layout mode. Border, cell padding versus cell spacing, cell walls, table headers, expanded tables mode, WYSIWYG, table properties, set table and cell widths, view table in layout mode. 2. Resize, split, and merge cells Nested tables are a table within another table. Resize and reset table width and height. HTML table tags are table, tr, th, and td. Split and merge table cells. 3. Insert and align images in table cells Use align attribute of <img> tag versus aligning images and text in table cells. 4. Insert text and format cell content Insert text in table. Format cell content. Format cells. Use visual aids to check layout. CHAPTER 7 USING STYLES AND STYLE SHEETS FOR DESIGN Introduction Use an external style sheet (.css file) to separate your content from your formatting for a web page. Embedded CSS have style rules located in the head section of a web page using the <style> tag. Use the Dreamweaver CSS Styles panel and CSS rule dialog box. 1. Create and use embedded styles Embedded styles versus inline styles. Class style (also called 2. Custom style) starts with a period. Modify embedded styles Current mode versus All mode for CSS Styles panel. Redefining (customizing) HTML tags. 3. Work with external CSS style sheets Attach an external style sheet (.css file) using the Link tag. Advantages of external style sheets. 4. Work with conflicting styles Inline styles (property inspector) override embedded styles; Embedded styles override External styles. 5. Use coding tools to view and edit styles See Coding toolbar on page Use code hints. Convert embedded to external styles. Collapse and expand code ITD 210 Exam 1 Study Guide Page 5