Read Dreamweaver CS4.indd text version

Exam Preparation for

Web Communication using

y nl O n y tio op ua C al ot Ev N o D

Adobe® Dreamweaver CS4

CS4

Web Communication using Adobe® Dreamweaver CS4

y nl O n y tio op ua C al ot Ev N o D

2

Web Communication using Adobe® Dreamweaver CS4

Web Communication using Adobe® Dreamweaver CS4 ISBN: 978-1-55332-267-2 Developer: Jonathan Jacobsen Publishing Team: Sue Wong, Bob Garnett, Kelly Hegedus, Kevin Yulo CCI Learning Solutions Inc. grants you the right to print as many copies as you need of all or a portion of the Exam Preparation for Web Communication using Dreamweaver CS4, providing that you always include the page(s) containing copyright information and that you distribute such copies for educational purposes only. No other copying, reproduction, transmission, or translation, in any form or by any means, electronic, mechanical, magnetic, optical, chemical, manual or otherwise without the written permission of CCI Learning Solutions Inc. The information in this guide is distributed on an "as is" basis, without warranty. While every precaution has been taken in the preparation of this guide, neither the author nor CCI Learning Solutions Inc. shall have any liability to any person or entity with respect to any liability, loss, or damage caused or alleged to be caused directly or indirectly by the instructions contained in this courseware or by the computer software and hardware products described therein. CCI Learning Solutions Inc. would like to acknowledge the financial support of the Government of Canada through the Book Publishing Industry Development Program for our publishing activities. Product #: 3642-1 © 2009 CCI Learning Solutions Inc. All rights reserved.

CS4

About this Guide

This exam preparation guide will help you prepare to take the Adobe Certified Associate Web Communication using Adobe® Dreamweaver CS4 exam. It is intended for the student who has recently completed a web design or development course, or who is self-taught, and wants to ensure they have knowledge and skills in all the areas covered by the exam.

Using the Guide

The guide covers all of the topics included in the Web Communication using Adobe® Dreamweaver CS4 exam. It's been designed so that you can review, from front to back, refreshing your memory on all topics, or just those areas you want to focus on most. Within each objective group you will find notes on the topic, brief instructions for accessing relevant features in Dreamweaver, and tasks allowing you to practice your skills. It assumes you have prior knowledge in web design or development, either through courses or your own experience.

Practice Tasks Files

Refer to the practice tasks Dreamweaver CS4.zip file which contains all the files needed for working through the practice tasks.

y nl O n y tio op ua C al ot Ev N o D

About the Certification Taking the Exam

An Adobe Certified Associate certification in Web Communication using Dreamweaver CS4 indicates that an an individual can plan, design, build and maintain web pages and sites using Dreamweaver CS4. The certification is one of a series of Adobe Certified Associate certifications in web and graphic design. The other two exams in the series are: · Rich Media Communication using Adobe Flash CS4 · Visual Communication using Adobe Photoshop CS4 Certification is a means of demonstrating to employers, clients and others that you have the knowledge and skills to help them communicate effectively using digital media. The Web Communication using Adobe® Dreamweaver CS4 exams are conducted on a computer and test both knowledge and skill. Knowledge is tested through multiple choice and similar questions, while skill is tested by having the examinee demonstrate tasks within the Dreamweaver application. The exam includes 41 questions and allows a maximum of 50 minutes to complete it. When taking the exam, be sure to read each question clearly and think about your answer carefully.

3

CS4

Exam Objectives

The following topics are covered by the Adobe Certified Associate Web Communication using Dreamweaver CS4 exam.

Web Communication using Adobe® Dreamweaver CS4

4.

4.1 4.2 4.3

Adding Content by using Dreamweaver CS4

Define a Dreamweaver site. Create, title, name, and save a web page. Follow a flowchart and storyboards to create web pages and a site map (site index) that maintain the planned website hierarchy. Add text to a web page. Insert images and apply alternative text on a web page. Link web content, using hyperlinks, email links, and named anchors. Insert rich media, such as video, sound, and animation in Flash format. Insert navigation bars, rollover images, and buttons created in Adobe Fireworks on a web page. Build image maps.

1.

1.1 1.2 1.3

Setting Project Requirements

Identify the purpose, audience, and audience needs for a website. Identify web page content that is relevant to the website purpose and appropriate for the target audience. Demonstrate knowledge of standard copyright rules (related terms, obtaining permission, and citing copyrighted material). Demonstrate knowledge of website accessibility standards that address the needs of people with visual and motor impairments. Make website development decisions based on your analysis and interpretation of design specifications. Understand project management tasks and responsibilities.

4.4 4.5 4.6 4.7 4.8 4.9

1.4

1.5 1.6

4.10 Import and display a Microsoft Word or Microsoft Excel document to a web page. 4.11 Import a Microsoft Word or Microsoft Excel document to a web page. 4.12 Create forms.

2.

2.1

Planning Site Design and Page Layout

Demonstrate general and Dreamweaver-specific knowledge of best practices for designing a website, such as maintaining consistency, separating content from design, using standard fonts, web-safe colors, and utilizing visual hierarchy. Produce website designs that work equally well on various operating systems and browser versions/configurations. Demonstrate knowledge of page layout design concepts and principles.

y nl O n y tio op ua C al ot Ev N o D

5.

5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 Create web page templates. 5.9

Organizing Content by using Dreamweaver CS4

2.2 2.3 2.4 2.5

Set and modify document properties. Organize web page layout with absolutely-positioned div tags and CSS styles. Modify text and text properties. Modify images and image properties. Modify Flash movies on a web page.

Organize content by using tables.

Identify basic principles of website usability, readability, and accessibility.

Demonstrate knowledge of flowcharts, storyboards, and wireframes 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.

Use basic HTML tags to set up an HTML document, format text, add links, create tables, and build ordered and unordered lists.

3.

Understanding the Adobe Dreamweaver CS4 Interface

Add head content to make a web page visible to search engines.

5.10 Use CSS to implement a reusable design. 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. 6.1 6.2 6.3 6.4 6.5 6.6

6.

Evaluating and Maintaining a Site by using Dreamweaver CS4

Conduct basic technical tests. Identify techniques for basic usability tests. Identify methods for collecting site feedback. Present web pages to others (such as team members and clients) for feedback and evaluation. Manage assets, links, and files for a site. Publish and update site files to a remote server.

4

Web Communication using Adobe® Dreamweaver CS4

CS4

Setting Project Requirements

1.1

Identify the purpose, audience, and audience needs for a website.

It is important to define the purpose of a website at the start of a development project. A clear and succinct, written statement of purpose should indicate why the site is being developed, what it will accomplish, and how users will benefit from it. Determining a website's audience is another important task in a website development project. Knowing who the site is targeted towards and what their needs are will guide content preparation, site architecture, and design.

1.3

Demonstrate knowledge of standard copyright rules (related terms, obtaining permission, and citing copyrighted material).

One approach to defining the audience is to work with the client or site owner to understand who their current customers, members or users are. From this, or even if the site is targeted at a different audience, preparation of user profiles is a useful exercise. A user profile is a brief description of either an intended group of users or of a specific, though fictional, individual user. A user profile may include demographic information, such as age, gender, education and occupation, online experience and activity levels, information seeking behaviors, and user needs. A user profile humanizes the project and provides a clear image of a person or group of people to guide the subsequent stages of the project. A companion to the user profile is the user scenario, which describes how a user may interact with the site. These descriptions provide an early-stage walk-through of the site, detailing aspects of navigation and interaction with site features and pages.

Copyright is a legal concept that protects the rights of content creators, such as authors and illustrators, to determine how, where and when their content is used. Copyright can be applied to a wide range of content, including text, photographs, illustrations, paintings, drawings, sculptures, and other works of art and design. Copyright is part of the broader legal concept of intellectual property, which includes trademarks and patents. The specific rights included in copyright are determined by national laws, so vary somewhat from country to country. Some jurisdictions allow limited use of copyrighted materials by others, such as copying a small portion of a work for personal use, while other jurisdictions ensure the copyright holder has final say in all uses. Copyright lasts for varying periods of time, such as the life of the creator plus 50 years after their death. Note that copyright may be assigned from the content creator to another person or organization. For example, an author may write text for a corporation and assign copyright of that work to the corporation. As a web designer, you may wish to include content in your site for which you do not own the copyright. In such cases, you must seek written permission from the copyright holder to do so, which could involve payment for the use of their content. In most cases, the copyright holder will require that you indicate in your material that portions of it are copyrighted by another person or organization. To include content in your site without having to seek permission, you could: · Use content you created, or that was created by and is owned by your organization. · Use content others created but gave or sold to you. · Seek copyright-free content, such as a CD or DVD of royaltyfree images. · Seek content with a license, such as a Creative Commons license, that explicitly grants permission to reproduce and even alter the content. The website you create and all of its content can also be copyrighted by you, or your organization. Placing the copyright symbol ©, the year of copyright and the copyright holder somewhere on the site, such as in a page footer, is a common way of indicating to users that the material they are viewing is copyrighted and may not be used without permission. e.g., © 2009 ABC Corp.

1.2

Identify web page content that is relevant to the website purpose and appropriate for the target audience.

The content to be included in a website depends directly on the site's purpose and audience. Content should be selected or created to fulfill the site's goals and purpose and to meet the needs of the audience. Content that does not fit the criteria should be left out. Content includes text, photographs, logos, illustrations, movies, music--everything that transforms a blank screen into a web page.

The format or media type of the content should be considered as well. For example, the use of graphics, video, audio and other rich media will be appropriate for some sites and less suitable for others. If the site under development is a redesign of an existing site, creating a content inventory of the existing site can be useful. The content inventory gives a sense of the scope of the content in the existing site, and helps to migrate it into the new site. Using a spreadsheet, you can list all of the pages in the existing site by name, type, location in the site architecture, file name (or URL), and also list the page's destination in the new architecture of the new site.

y nl O n y tio op ua C al ot Ev N o D

5

CS4

To avoid exposing yourself or your employer or clients to copyright infringement accusations and lawsuits, it's important to know whether the content you are adding to a website is your content, or whether you have clear permission to use that content. If in doubt, check or don't use that content.

Web Communication using Adobe® Dreamweaver CS4

The deliverables would be the project plan, site architecture, and graphic design, then all of the web pages, images and other media that form the site, as well as the results of usability testing and other feedback gathered during the site development process. The human resources involved in the project might include a project manager, a writer, a graphic designer, and a web page developer. The budget might include the cost of the human resources, software, and website hosting. In project management, after establishing the goals, scope, deliverables, tasks, resources and schedule, the project manager monitors the progress of tasks, reallocates tasks and resources as necessary to keep the project on schedule, discusses issues that arise from the tasks and if necessary, adjusts the project scope, tasks, deliverables and schedule. The project manager works with other stakeholders in the project, including clients and employers, as well as the resources working on the project.

1.4

Demonstrate knowledge of website accessibility standards that address the needs of people with visual and motor impairments.

Accessibility refers to the ability for users with visual, auditory, motor and other impairments to navigate your site and access content. The ability to enlarge the type, view text instead of graphics, view the page in high contrast, have a screen reader read the text, or navigate with the keyboard rather than the mouse, are key aspects of making a website more accessible and ensures it can reach the greatest possible audience. Throughout this guide, we mention best practices for maximizing usability and accessibility, and features in Dreamweaver that assist you to do so.

1.5

Make website development decisions based on your analysis and interpretation of design specifications.

Practice Task

A web designer must follow the design specifications provided or developed to help ensure consistency across pages within the site and to ensure the branding and communication elements in the site match that used elsewhere by the client, or expected by the client.

1.6

Understand project management tasks and responsibilities.

Project management is the process of managing activities and resources to complete a series of tasks that achieve the goals and objectives of a particular project. A project can often be described using the following terms: Goal or Objectives ­ The purpose of the project. Scope ­ A more specific definition of the project, including limits on what is included and what is not. Deliverables ­ Project results or outcomes. Tasks ­ Activities that move the project towards the completion.

Resources ­ People who will work on the project, such as by completing tasks. Schedule ­ Timeline for completion of individual tasks and the overall project. Budget ­ Fees and expenses associated with the project.

Website Development

In website development, an example of a project would be the development of a new website for a business. The scope might be defined as a site with up to 50 pages reflecting the products, services and other important information about the business. At a broad level, tasks would include definition of the site's purpose and audience, content selection or creation, preparation of a graphic design and site architecture, development of page layouts, creation of all the individual pages and graphics, testing, revisions, and publication of the site to a server.

y nl O n y tio op ua C al ot Ev N o D

While a website has been provided with this guide for practice purposes, use the following criteria to help you determine how you might set up a site of this type. Write up a statement of purpose for the site, as well as user profiles and user scenarios. ­ The website is for a small group of investors who will be analyzing and trading blue chip stocks on one of the larger stock markets. ­ The audience will range in age from 20 to 50. ­ Each user must register with a valid login and credit card information to be part of this trading site. ­ The first page should introduce the company and their purpose, with a note that all blue chip stocks will be very inexpensive to buy but can be risky ventures. ­ There needs to be a page that addresses the requirements of being a member of this site, such as investors must purchase a minimum of 1000 shares per stock, transaction fees, administration fees, etc. ­ There eventually will be a list of member names that should link or relate to the stocks and the completed transactions for each member. ­ There will be information for each stock and its company which should include profile, history, and product type. Write up a statement of purpose for this project with a scope definition, a set of deliverables, a list of tasks, a list of resources, a project schedule, and optionally a budget.

6

Web Communication using Adobe® Dreamweaver CS4 Fonts

CS4

Fonts are used to display text in a web browser. Your web pages tell the browser what font to use for text, but doesn't actually provide the font information. Font information is stored in files installed on users' computers. While every computer may have different fonts installed, in general, those with the same operating system will have the same or at least a similar common set of fonts installed. For example, a common sans-serif font on Windows is Arial, while a similar font on Macintosh systems is Helvetica.

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.

Separating Content from Design

When we say that a website's text, images and other content is separate from its design, we mean that minimal formatting information has been applied to the content, and that formatting information is stored elsewhere, separate from the content. This separation is often achieved through the use of Cascading Style Sheets, where content in web pages is marked up with HTML tags that indicate what the content is about, rather than how to present it.

Styles in a stylesheet tell the browser how to display the content in different situations, such as a computer screen versus a printout. One of the main benefits of this approach is that the content can be fairly easily re-displayed with a different design or in a different format. This might include a presentation by a screen reader, or in a printable form, or on a smaller screen.

To design your page to display content in more or less the same style using the fonts available to the browser, switch to the CSS view in the Property Inspector where you can specify a font collectionyou specify a font collection. For example, rather than just specifying Arial, you specify "Arial, Helvetica, sans-serif" in the Font Collection field in the Property Inspector. When the user's browser is displaying the page, it will first try to use Arial, if that font is unavailable, then Helvetica, and last, whatever sans-serif font is available to it.

y nl O n y tio op ua C al ot Ev N o D

Web-safe Colors

When the first web browsers were developed, most computers could only display 256 different colors on the screen at any one time. A palette of about 212 colors was developed that appeared the same in different browsers on different operating systems. The colors in this palette are referred to as web-safe colors.

Using a limited number of fonts improves readability. For example, using a sans-serif font for headings and a serif font for body text provides some visual interest on the page, without confusing the user.

Contemporary computers are able to display millions of colors at once, so the use of web-safe colors is now less important. However, if there is a color in the web-safe palette that fits your design, it's still safest to use it over another color. For example, in Dreamweaver, the Color Cube that appears when you set the color of text or table backgrounds displays web-safe colors. However, you can select other colors by clicking the Color Wheel button in the upper-right corner of the Dreamweaver color picker. Colors are specified in 6 digit hexadecimal values preceded by a # symbol (e.g., #FFFF00). If you need to display some text in a particular font, rather than relying on the user to have it installed, you could create an image with the text in it, styled in the desired font. 7

CS4

Website hierachy

A site architecture or site map may be illustrated by a chart, with boxes indicating pages and lines showing relationships between pages. Flowcharts define a process from beginning to end. They show both a business process (e.g., buying an item online) as well as a user's experience (e.g., all the steps and pages a user goes through to purchase the item).

Web Communication using Adobe® Dreamweaver CS4

Usability refers to the ease with which users can find information and access features on your website, and depends on many factors, ranging from site architecture to page layout and design. Readability refers to the ease with which users can read text and depends on both the language used as well as the styling of the text (e.g., font face, size and color). Accessibility refers to the ability for users with visual, auditory, motor and other impairments to navigate your site and access content.

2.2

Produce website designs that work equally well on various operating systems and browser versions/configurations.

2.5

Web browsers evolve at a rapid rate, with new versions of the most widely-used browsers appearing every year or so. While standards, such as those related to HTML, aim to ensure that any web page can be viewed in any browser on any operating system, different browsers interpret the standards in different ways, so pages do not always appear exactly the same in different browsers, or different versions of the same browser. Dreamweaver includes a tool to check for issues in your pages and design as they will appear in different browsers. In addition to using this tool, review your site manually in different browsers, focusing on the current and next most recent version of the most popular browsers, such as Safari, Firefox and Internet Explorer. It's also a good idea to do this on multiple operating systems, such as Linux, Mac OS and Windows. You can stay ahead of your users by downloading and using beta versions of browsers as they are released. Beta versions are versions that are close to completion, typically with all the main new features in place, but potentially with errors. While they may not work perfectly, they give you an early and valuable indication of problems users may encounter in accessing your site in a new version of a browser.

Demonstrate knowledge of flowcharts and storyboards to create web pages and a site map (site index) that maintain the planned website hierarchy.

Site Architecture

A site architecture is the logical organization of content in a website. A well organized site makes it easy for users to find information, interact with the site, navigate from one area to another, and is a key aspect of usability. It's best to approach site architecture development from the perspective of intended users of the site. Ask yourself how your users think about the topic covered by your site, whether it's a business or other organization, a sport, a hobby, or any other subject. Sites developed from a visitor's perspective, rather than the creator's, are ones that visitors return to. A site architecture usually involves a hierarchy of topics and pages, as content is organized into broad areas, then smaller areas within those. It's generally most efficient to plan the site architecture before starting any development work, as so much of page creation is dependent on the architecture. A general process for developing a site architecture involves: · Listing all the topics you will include in the site. · Organizing the topics into broad content areas, and if appropriate, breaking them down into subtopics. · Drawing a site map that shows visually the content areas and topics within each, with links to illustrate navigation between areas. A simple site map resembles an organizational chart. Boxes represent pages and lines connect them together to show relationships between pages. Usually the content is organized in a hierarchy. The lines do not necessarily represent site navigation (although the two may overlap), but instead show semantic relationships. Boxes can vary in size and shape to provide additional information, such as the importance of the content on the page, whether the page contains static content or interacts with a database, and so on.

2.3

Demonstrate knowledge of page layout design concepts and principles.

A key principle of usability is to organize content in a meaningful and coherent way on a page. For example, the most important content on a page should be given a position at or near the top of the page, or a prominent heading, or other visual indicators of its importance. Less important content should be positioned lower on the page or to the side. If all the content on a page seems to be equally important, it might be appropriate to move some of that content to new pages.

The placement of content on pages should remain relatively consistent from page to page within a site, or within main areas of a site. While each page will be different the overall layout should not change drastically across pages. Consistency in content placement helps users to quickly scan each new page they navigate to, and is an important aspect of usability. Use of the same or similar graphics, colors and fonts also helps users know where they are.

2.4

Identify basic principles of website usability, readability, and accessibility.

Usability, readability and accessibility are three related concepts that together help make your website available to the widest possible audience.

y nl O n y tio op ua C al ot Ev N o D

8

Web Communication using Adobe® Dreamweaver CS4 Flowcharts

Flowcharts define a process from beginning to end. They show both a business process (e.g., buying an item online) as well as a user's experience (e.g., all the steps and pages a user goes through to purchase the item). All but the simplest websites will be developed with multiple paths through them, resulting in multiple flowcharts--at least one for each main business process or user activity in the site. An individual flowchart may show a single path, or may show branches at key decision points. Error paths show what happens when something goes wrong, such as missing information in a form submitted by a user.

CS4

Storyboards

Storyboards combine the pathways of flowcharts with the simple visual designs of wireframes. A storyboard illustrates a path through a site using not just simple boxes, but wireframes or even more advanced graphic mockups of pages. Web designers and developers follow the instructions given to them in flowcharts, wireframes and storyboards in designing pages, interaction with them, and navigation between them.

2.6

Communicate with others (such as peers and clients) about design and content plans.

It is important to communicate with all those involved in a website development project at many stages in the project. Communication may start with a client interview or formal survey to understand their needs and objectives. As the project progresses and the statement of purpose, audience definition and other planning materials are developed, the client should be consulted and approval sought before proceeding to the next stage. As they are completed, other planning documents such as the site architecture, flowcharts, wireframes, color palette and other graphic design elements, and screen mockups, should also be shared and approved. Communication can be done electronically using e-mail and online meetings with shared screens, or in person when a hands-on review or discussion is required. Detailed notes should be taken in all meetings and shared with all involved to minimize misunderstandings. Good communication helps ensure the project proceeds on schedule, that everyone involved has the information they require to contribute to it, and that there are no surprises at the end.

y nl O n y tio op ua C al ot Ev N o D

Practice Task

Wireframes

Wireframes illustrate placement of content on pages, communicating initial design ideas. They are so called because they are typically drawn from single lines. Wireframes do not convey the graphic design or color scheme of the site; only the approximate placement and scope of content on each page. A site design will include a wireframe for each page, or at least each type of page in the site. In some cases, several wireframes will be required for a single page to illustrate its content in different states (e.g.; a page when a user is logged in versus not logged in).

Using the Blue Chip Website included, list the colors and fonts you will use, or that are in use. Check your wireframes and storyboards to ensure your page layout is consistent from page to page. ­ List the web browsers, versions and operating systems you will test your site with. ­ Evaluate the consistency of page layout across the site. ­ Determine if the current pages on the site meet usability, readability and accessibility standards. ­ Create flowcharts, wireframes and storyboards for this website, as appropriate.

9

CS4

Web Communication using Adobe® Dreamweaver CS4

Understanding Adobe Dreamweaver CS4

1 1

Insert Bar

2 2

View Buttons

3

Document Window

3

4

Property Inspector

y nl O n y tio op ua C al ot Ev N o D

5

5

Files and Assets Panel

4

3.1

Identify elements of the Dreamweaver interface.

You use the Insert bar to insert content into pages. It has different tabs for different types of content.

The main workspace in Dreamweaver is the Document window and its surrounding panels. The Document window is a blank web page, to which you add content. Tabs across the top of the Document window enable you to have multiple web pages open at once, and to quickly switch between them.

In the Document toolbar, above the Document window, buttons enable you to switch between Design, Code and Split views of your page, to enter a Title for your page, and to access features such as previewing your page in a web browser and checking cross-browser compatibility. Use Document views to view your page in different ways: · Design view displays your page as it will appear in a web browser. · Code view displays the HTML that represents your page. · Split view shows both. The Menu bar (File, Edit, View, etc.) at the top of the Dreamweaver window provides access to most commands and features.

The upper portion of the screen shows the HTML tags applicable to the text entered in the window below these tags. At the left is the Tools bar containing those tools you use to add or manipulate items on web pages. At the right is the Insert, the CSS Styles, AP Elements, Files and Assets panels. Below the Design window is the Property Inspector where you can. Change attributes of text, graphics and other page elements. The information and settings shown in the Property inspector vary depending on the selected element.

10

Web Communication using Adobe® Dreamweaver CS4

CS4

3.3

Use the Property inspector.

3.2

Use the Insert bar.

Use the Insert Panel or Bar, just below the Menu Bar, to insert content into pages. Click the Category button to display the different categories for various types of content.

The Property inspector enables you to change attributes of text, graphics and other page elements. The information and settings shown in the Property inspector vary depending on the element selected. For example, when text is selected, the settings in the Property inspector include Paragraph Alignment and Format, Style, Font Collection, Size, Color, List attributes and Link. The following screens show the Property inspector in HTML and CSS view.

· The Common category contains buttons for the most frequently added types of content, including links, tables, images, and other media. · The Layout category includes buttons to lay out elements for the page such as tables, banners, or sprys. · The Forms category is used to design forms and add different kinds of fields to them. · The Data category includes buttons to create or store a database of content that can be static or dynamic. · The Spry category includes buttons to create or build items (e.g., panels), or rich media content (e.g., animation effects such as fade). · The InContext Editing category includes features to make changes to the web pages using a web browser. · The Text category contains common text formatting options, most of which are also available through the Property inspector. · The Favorites category is a place to add the buttons you access most frequently. The two options at the bottom of the Categories menu enable you to display all buttons in color as well as turn off any text labels to show buttons only. You can also turn the Insert panel into a horizontal bar by dragging the Insert tab to the top of the document window; alternatively you can change it to a panel by dragging the gripper on the Insert bar to the location for your panels.

y nl O n y tio op ua C al ot Ev N o D

3.4

Use the Assets panel.

The Files panel has three tabs: Files, Assets and Snippets. The Assets tab lists all of the images, colors, links, and other elements on all the pages in your site. Having a list of assets in one place helps you be consistent in formatting different pages. For example, rather than using the Property inspector to format the color of text on different pages, you can select the color from the Assets panel, ensuring the same color is used in different places. You can also quickly select images to insert on other pages, rather than browsing the folders on your computer every time you want to insert the same image.

Practice Task

Open a web page in Dreamweaver, such as one of the ones included with this guide. Move the mouse cursor over each button on each tab of the Insert bar and read the tool tip that appears, to familiarize yourself with each button.

11

CS4

3.5

Use the Files panel.

Web Communication using Adobe® Dreamweaver CS4

This nested hierarchy of folders helps keep related content together and well organized. The files and folder structure you create for your local site will be replicated on the remote server. You will therefore have a local root folder and a remote root folder.

The Files panel lists the websites you have defined in Dreamweaver and provides a browsable view of all the files and folders within the site.

Define a New Site

Much like in Windows Explorer, you open folders and open web pages for editing in the Document window by double-clicking on them. You can also use the Get File(s), Put File(s), and Synchronize buttons to work with them on the remote server. Use the Local, Remote, Testing server and Map views to see your site in different ways. Define a new site in Dreamweaver by selecting Site > New Site. In the new site wizard, provide a name for the site and, if you have one, a domain name. On the following screens of the wizard, select options appropriate to the type of site you are building and your working environment. For a simple website with primarily static content, you would not choose a server technology such as ColdFusion, ASP, JSP or PHP (these are used for sites that provide more interactivity). To work on your site on your local computer and later upload it to the remote server, you would choose the recommended "Edit local copies on my machine, then upload to server when ready" option. Select a folder on your computer in which to store your site. If you have access to the web server to which you will publish your site, you can select one of the publishing options. FTP (File Transfer Protocol) is a very common method of publishing files to the remote server. If you don't have access to the remote server, you can skip this step and configure it later. When site definition is complete, the site will appear in the Files panel, ready for creation of files and folders for organizing them.

y nl O n y tio op ua C al ot Ev N o D

4.2

Practice Task

Open the Blue Chip home page in Dreamweaver, and then locate the following interface elements: the Document window, Document tabs, Document toolbar, Menu bar, Insert bar, Property inspector, Results panel, Files panel, and Assets panel. ­ Place the cursor in different paragraphs and notice the settings that appear in the Property inspector. Select an image or other object and notice how the Property inspector changes and the settings that appear. ­ View the assets that appear in the Assets panel.

Adding Content by using Dreamweaver CS4

4.1

Define a Dreamweaver site.

By defining a site within Dreamweaver, rather than just editing files that are on your computer, you can take advantage of the features in Dreamweaver that prevent broken links, check browser compatibility, create site maps, and other site level tasks.

In developing a new website, you will typically start by creating and testing it on your own computer. When you are done, you will publish it to a web server, which may be a computer on your organization's network (or intranet) or may be a computer accessible on the public Internet. The version of your site on your computer is called the local site, while the version on the web server is called the remote site. Dreamweaver allows you to manage both sites, to publish from one to the other, and to keep files on both synchronized. Every site you create has a root folder. This is the top-most folder and will contain all the files, such as web pages and images that form your site. These files may all reside in the root folder, but more commonly are organized into subfolders under the root folder. 12

Create, title, name, and save a web page.

A web page is one of the basic containers for website content. Text, images, video clips and other content are served to a user when their browser requests a page from the server hosting the site. You create pages according to the requirements of your site architecture. You create a new page by selecting File > New. Select Blank Page > HTML and no layout options for a basic, blank web page. Give your page a title by entering a name for it in the Title field at the top of the Document window. Every page in your site should have a unique and descriptive title, as this is one of the ways in which users know what the page is about. The Title is also read by screen readers so is important for accessibility.

Web Communication using Adobe® Dreamweaver CS4

CS4

Some web designers use the Title both to describe the page's content (e.g., "Widgets") as well as to indicate the page's position in the site hierarchy (e.g., "ABC Corp.: Products: Widgets" or "Widgets ­ ABC Corp"). If you choose to include additional information in the title, it's a good idea to keep the total length fairly short and to place the most significant elements first, as this is what appears first in browser windows and tabs. Choose File > Save to save a page within the site. Give your page a meaningful file name, and avoid using spaces and other characters other than letters and numbers; use underscores instead of spaces, or use capital letters to mark the start of a new word (e.g., Home_ Page or HomePage). Simple web pages usually have a .htm or .html extension at the end. By convention, the primary page in a folder is often named index.html. However, you can really use any name you like. Note that a page's title and file name are not the same thing. The file name is used only by you, your computer and your web server to manage files. The title is seen by users and informs them about the content of the page.

4.4

Insert images and apply alternative text on a web page.

After text, images are the next most common type of web page content. Images may be photographs, clip art, diagrams, icons, buttons or other graphics. Images are an excellent way of communicating information visually. Many paragraphs of text can often be replaced with a single illustration to explain a concept quickly. Images can also improve the visual appeal of a page, breaking up text or directing the eye to areas of the page. However, too many images on a page can overwhelm users. It's important to find a balance between text and images. The size and position of images communicates information as well. A diagram that clearly explains a key concept may deserve a position at the top of a page, spanning the full width of the page.

4.3

Add text to a web page.

Almost every web page has at least some text on it. Appropriate formatting of text makes the difference between readable, accessible content and unusable content. Careful use of font faces and weights, color and white space will enhance the appeal of the text. You can add text to a page by typing it directly into the page, by copying it from another document and pasting it into a web page, or by importing text from other files, including text files and Microsoft Office documents.

Text is most easily entered in Design view, where you can see the results as you type. Text can be typed directly into the Document window, using Enter to separate paragraphs and Shift-Enter to start a new line within the same paragraph. Text can also be copied from other documents and applications and pasted into a Dreamweaver page. After copying text from a source document or application to the Windows clipboard, select Edit > Paste to paste the text into a web page. This method retains formatting from the source, such as font face, weight, color, etc. Use the Edit > Paste Special command to paste text without formatting.

y nl O n y tio op ua C al ot Ev N o D

You add images by clicking the Image button on the Common tab of the Insert bar, or by choosing Insert > Image, then browsing your computer or network to find and select an image to insert. If the image is outside of the root folder of your site, Dreamweaver will offer to copy the image into this folder. It's a good practice to keep all the images for your site together, such as in a subfolder called images under the root folder. Dreamweaver will also prompt you for Alternate Text for the image. Alternate Text is a key aspect of making your site accessible to those with visual and motor impairments, as it can be read aloud by screen readers. Enter a short but meaningful description for every image you add to a page. For example, enter "Photograph of sailboat" for a picture, or "Link to home page of website" for a button that links to your site's home page. Images added to your site appear on the Assets tab of the Files panel, enabling you to add the same image to multiple pages without having to repeat all of these steps.

13

CS4

Image Formats

The following three image formats are ones that most current web browsers can display. Other formats may be supported, but not universally. GIF Graphics Interchange Format is a lower-resolution format, limited to a maximum of 256 colors, and most suitable for line-art, logos, buttons and other simple graphics. JPEG The Joint Photographic Experts Group format supports millions of colors and compression to reduce file sizes, so is suitable for photographs and other similarly complex graphics. PNG The Portable Network Graphic format also supports millions of colors and is a good alternative to the GIF and JPEG formats. You may have images in other formats, such as TIFF or BMP, that you want to add to a page. You will first need to convert them to one of the above formats, using a graphics program such as Adobe Photoshop.

Web Communication using Adobe® Dreamweaver CS4

You create a Named Anchor by placing the insertion point at the destination, clicking the Named Anchor button on the Insert bar, and giving the anchor a meaningful name.

You link to the anchor by selecting text or an image, then clicking the Point to File button and dragging it to the anchor, or by simply typing the hash symbol (#) and the anchor name (e.g. "#anchor") in the Link field in the Property inspector.

E-mail Links

Unlike text or image links, an e-mail link doesn't take a site visitor to another page or site. Instead, it opens a new, pre-addressed e-mail using the e-mail application on their computer. An e-mail link on a web page makes it easy for users to send you a message. After positioning the insertion point in your page, click the Email Link button on the Common tab of the Insert bar. In the dialog, you provide link text, such as "Click here to send us a message" and an e-mail address.

4.5

Link web content, using hyperlinks, e-mail links, and named anchors.

Links connect documents, pages and sites together in an interconnected web. Links enable users to travel quickly and directly from one page to another within your site, and from your site to others. Almost any text, image or other element on a page can have a link attached to it.

Adding Links to Text

You add a link to text by selecting text on the page, then in the Property inspector: · click the Point to File icon next to the Link field and drag it to point to a page in the Files panel; or · click the Browse for File icon next to the Link field and browse your computer for a page within your site; or · type the name of a page in your site (the page doesn't have to exist yet); or · type the full URL to another website, or to pages within that site.

In general the text you select to enable as a link should not be too long--just a few words is enough to be seen on the page by the user.

Adding Links to Images

Adding a link to an image is very similar to adding a link to text. You select the image and use the same linking methods to specify the destination.

Links Within a Page

You may wish to link to a place within a single page from another place in that page. For example, a list of topics at the top of a page may link to headings with paragraphs of text further down the page. You can enable these links by first creating a Named Anchor at the destination spots on the page, and then creating links to those anchors.

y nl O n y tio op ua C al ot Ev N o D

4.6

Flash Buttons

Insert rich media, such as video, sound, and animation in Flash format.

Web pages can display not only text and graphics, but with the help of additional software called plug-ins, sounds, video, animation and other media content.

Flash Animation and Movies

Flash is a multimedia format developed by Adobe for viewing on web pages, and supports animation, video and interaction. Flash files prepared for web viewing have a .swf extension, while Flash video files have a .flv extension. You create Flash animations, movies and videos using software such as Adobe Flash and Adobe Director, then insert them into your web page. Dreamweaver also has some built in Flash elements, such as buttons and text. You add a Flash file to a page by choosing Flash from the Media pop-up menu in the Common tab of the Insert bar. After selecting the Flash file, you set size, position and other parameters in the Property inspector.

Dreamweaver provides a feature to created animated graphic buttons in Flash format, with your choice of style and message. You can use these on any page, for navigation or anywhere you need a button for a user to click.

14

Web Communication using Adobe® Dreamweaver CS4

You add a Flash button to a page by choosing Flash from the Media pop-up menu in the Common tab of the Insert bar. In the dialog, you select a button style and font, enter text to appear on the button, and select a file or enter a URL to link to. Dreamweaver creates the button, saves the Flash file in your site, and adds the button to the page. You change the button's properties in the Property inspector or double-click it to edit it.

CS4

Other Video

Video in formats such as Windows Media and QuickTime can be added to a web page, and are played in the user's browser using additional software called plug-ins. You will need this software installed on your computer to be able to preview the video in pages you design. You add video in formats other than Flash Video by choosing Plugin from the Media menu in the Common tab of the Insert bar. You browse and select the video file, and set size and position attributes using the Property inspector.

Sound

As with the video formats, sound is also played in a browser using plugins. When you add a sound file to a web page, you can choose whether to embed it or link to it. If you embed the sound file, it will play automatically when the browser loads the page. If you simply create a link to the audio file, the user can choose whether to listen. You embed a sound file by choosing Plugin from the Media pop-up menu in the Common tab of the Insert bar, then browsing and selecting the audio file. You link to a sound file by selecting the text or image to use as a link, then clicking the Browse for File button next to the Link field in the Property inspector and selecting the audio file.

y nl O n y tio op ua C al ot Ev N o D

4.7

Headings

Flash Text

Similar to Flash buttons, Flash text is a graphic version of some text, created by Dreamweaver in Flash format. Using Flash for graphical text allows you to style a message using any font on your computer, without worrying about whether the user has that font, and without having to use an external graphics program to create an image. You add a Flash text element to your page by choosing Flash Text from the Media pop-up menu in the Common tab of the Insert bar. In the dialog, you enter text and set display attributes, and optionally specify a link. Dreamweaver creates the Flash text object, saves the Flash text file in your site, and adds the object to the page. You change the object's properties in the Property inspector or double-click it to edit it.

Insert navigation bars, rollover images, and buttons created in Adobe Fireworks on a web page.

Adding titles, headings, menus, lists, breadcrumb trails and other navigational elements to pages in your site helps users know where they are in the site, and how to access other areas. For maximum usability, pages in your site should have: · a title that appears in the browser window's title area; · a heading on the page indicating what the page is about; · a breadcrumb trail that shows where the page sits within the site hierarchy and allows the user to quickly navigate back up the hierarchy; and · a navigation menu that allows the user to quickly navigate to other areas of the site. For a site with only a few pages, the menu may be able to list and link to every page in the site. For sites with a multi-level hierarchy of pages, the menu may only list and link to the top page in each area of the site, or it may list the top areas, but expand when clicked to show pages within an area. You can create rollover images and navigation bars within Dreamweaver, or you can create them in other programs, such as Adobe Fireworks, and import them into Dreamweaver.

Flash Video

Flash video is similar to other video formats, such as Windows Media and QuickTime, with the advantage that most web browsers already have the Flash Player installed, so there's no need for a user to download any additional software to play a Flash video embedded in a web page. If your video is not already in Flash Video format, you convert it to this format using other software. You add a Flash Video file to a web page by choosing Flash Video from the Media pop-up menu in the Common tab of the Insert bar. In the dialog, you select the video file and set display attributes, and optionally specify a link.

You could also create a site index or map page that lists all of the pages on your site, either grouped by area or in alphabetical order, or include a search engine that allows users to find content by entering keywords.

A heading at the top of the page provides a clear indication to the user what page they are on, just like a sign hanging from the ceiling in a department store or grocery store indicates what part of the store a shopper is in. The heading should be short and clear and styled with one of the Headings, such as Heading 1, in the Format field of the Property inspector.

15

CS4

Breadcrumb Trails

A breadcrumb trail gives users an indication of where in the site architecture the page they are viewing sits. e.g., Home > Products > Consumer Products > Widgets Each level in the trail is typically a link to the home page of that area of the site.

Web Communication using Adobe® Dreamweaver CS4

4.8

Build image maps.

With an image map, you can make different areas of an image link to different pages or sites. Using an image map for this purpose is less popular now than using Flash or other technologies, but is still a simple and effective technique. Dreamweaver includes tools to quickly create an image map over an existing image. With an image selected, to create an image map you first give it a name in the Map Name field in the Property inspector, you then use the Rectangle, Circle and Polygon tools in the Property inspector to draw areas (hotspots) on the image. For each area, you provide Alternate Text that describes the area and its link (to improve accessibility) and enter a link or browse and select a page within your site. The linked area appears as an overlay on the original image in the Document window (the original image is not altered in any way).

Rollovers

A rollover is an image that appears when a user moves the cursor over another image. This technique is commonly used to indicate that the user can interact with the image, such as by clicking on it to connect to another page. The second image is often similar in design to the first, but with a different color or appearance (such as a button that appears to be pressed down). You create the two images in a graphics program such as Adobe Photoshop or Illustrator, and then add them to your web page by choosing Rollover Image from the Images pop-up menu in the Common tab of the Insert bar. You choose the initial image and rollover image, provide alternate text for accessibility, and specify a page to link to.

Creating Navigation Bars

A navigation bar is a set of one or more images and links that respond to user action by changing their appearance. The images in a navigation bar have four states: Up The appearance before a user has moved the cursor over the button or clicked it. Over The appearance when a user has moved the cursor over the button but not yet clicked it; used to indicate that a link is present. Down The appearance when a user has clicked the button; used to indicate the page the user is on. Over The appearance when a user has clicked the button to While navigate to the linked page, and has moved the cursor Down over the button again. Used to indicate the page the user is on, and that there is no need to click the button again. To create a navigation bar, you must first create the images in a graphics program such as Adobe Photoshop, then add the images and behaviors to your page by choosing Navigation Bar from the Images pop-up menu in the Common tab of the Insert bar. For each button, you specify a name, images for the four states, a link, and other properties.

Importing Fireworks Menu

If you create navigation buttons or a menu in Adobe Fireworks and export them as optimized images and HTML files, you can then insert those files into a page in Dreamweaver. You insert the HTML code by selecting Insert > Image > Objects > Fireworks HTML. The HTML and its associated images, slices, and JavaScript are inserted into the page.

y nl O n y tio op ua C al ot Ev N o D

4.9

Import tabular data to a web page.

Tables are an ideal way of organizing tabular information-- information that fits into a grid of rows and columns. Historically, tables have also been used to control the layout of elements on a web page. With the development of Cascading Style Sheets, designers now use CSS to control page layout and reserve tables just for displaying tabular information.

Importing and Exporting Tabular Information

Copying and pasting content from programs such as Microsoft Word and Excel is one way to import information, including tables, into Dreamweaver, and importing entire Word or Excel documents is another. You can import tabular information from these programs and others in a third way, by first exporting it to a delimited text file, then importing that file into Dreamweaver and creating a table from it. A delimited text file is a text file in which each row in a table is contained on one row in the text file, and each column in each row is separated by a character such as a comma. e.g., Name, Address, Phone Number Bob, 123 Main St, 555-555-1212 Mary, 456 Main St, 555-555-1313 This is a good method for extracting information from a database to include in a web page, where you don't need to interact with the data--you just want to display it as static information in a page. You import a delimited text file by selecting File > Import > Tabular Data, browsing and selecting the file, and setting some basic table options.

16

Web Communication using Adobe® Dreamweaver CS4

CS4

With the form selected, you set form properties in the Property inspector, including its name and the name of the form processing program on the web server. This program will also determine whether you set the Form Method field to POST or GET.

You export a table from Dreamweaver to a delimited text file by placing the cursor in the table and selecting File > Export > Table.

4.10

Import and display a Microsoft Word or Microsoft Excel document to a web page.

You may have content in Microsoft Word documents or Excel spreadsheets that you want to include in a web page. To do this, the content must be converted to HTML, the formatting language of web pages. Both Dreamweaver and the Microsoft programs can do the conversion for you, in several ways.

Import a Word or Excel Document

Add Fields

With the form created, you can add fields to it. Fields must be placed within the form container on the page. You add fields by selecting the button for the type of field you want to add, such as Text fields or Radio Buttons, on the Insert bar. Depending on the type of field added, you will enter additional information. For example, for a text field, you can set the width of the field and limit the amount of text that can be entered. For radio button or checkbox fields, you list the values that will appear. Some of these options are set when you are adding the field, and others are available in the Property inspector after adding the field to the form.

You can import a Word or Excel document by selecting File > Import and then Word Document or Excel Document. After selecting the document on your computer, Dreamweaver will convert its content to HTML and insert it into your page, as well as create and save any images that were in the source document. The resulting text will have as much formatting from the source as it is possible to represent using HTML. If the formatting or layout does not fit your page design, you will have to adjust the formatting in Dreamweaver.

Copy and Paste Content

When you only want to import part of a Word document or Excel spreadsheet, or when you want to insert content without formatting, copying and pasting text or graphics is a suitable method. After selecting and copying content in the Word or Excel document, you select Edit > Paste Special in Dreamweaver to paste it into the page. In the Paste Special dialog, you can choose to paste the content with no formatting, or with just a bit.

4.11

Create forms.

Forms allow you to gather information from site visitors, such as comments and questions, conduct surveys, and accept orders or memberships online. A form contains fields--one for each piece of information you want to collect. Visually, these fields can be single or multi-line text entry boxes, multiple-choice radio buttons or check boxes, and pop-up, drop-down or scrolling lists. A "submit" button allows the user to send their form information to you. A program on your web server accepts the submitted information and can take different actions, such as saving the information in a database or e-mailing it to you. While you can easily create a form in Dreamweaver, you will need to know the name of the form processing program on your web server before you can publish the form to your server and allow users to submit information.

y nl O n y tio op ua C al ot Ev N o D

Label Style Position Tab Index

You can make your form more accessible to people with disabilities by providing information in the Tag Accessibility > Attributes dialog: Provide a meaningful name for the field. Choose Wrap with label tag to label the field for easier access by screen readers and to provide a larger area in which to click for radio buttons and checkboxes. Choose where to display the label--usually before for text fields and after for radio buttons and checkboxes.

Access Key Enter a letter here to enable access to the field with a keyboard shortcut in a browser (e.g., enter G to enable an Alt­G shortcut). Assign each field a different number in the order in which the fields appear in the form to allow users to tab from one to the other using the keyboard only.

Add Buttons

No form is complete without a button to allow the user to submit information when they have finished entering it. You add a Submit button by clicking Button on the Insert bar.

Create a Form

As it is a container for fields, the form must be created before any fields can be added. Forms are elements on a web page, just like text and graphics, but the form itself is not visible. You add a form to a page by clicking the Form button on the Forms tab of the Insert bar. 17

CS4

Practice Task

In Dreamweaver, define a new site for how you might set up the Blue Chip company. Set the local root folder to the folder on your computer in which you unzipped the practice files available with this guide. Check that the files appear in the Files panel and open one for editing. View the list of assets in the Assets panel. ­ Create a new home page for the site. Give it a title and save it with a unique file name. Then copy the text from the main page in the practice website and paste it into your new home page. ­ Create other pages as per your design for this company. Copy text as necessary from the practice website and paste with or without formatting. ­ Add images to the page using those available in the practice website. ­ Create links to other pages in the site and to other sites from text and images on the page. Create an anchor and link to it from elsewhere on the page. ­ Insert one or more Flash files and videos in other formats. Embed a sound file. Create Flash buttons and text. ­ Add headings, a breadcrumb trail, rollovers, navigation bars and Fireworks menus to it. ­ Insert images and create an image map on it that links to several other pages or sites. ­ Import a delimited text file into a table in the page. ­ Import a Word document and Excel spreadsheet into a web page. Also use the copy and paste method to copy content from Word and Excel, both with and without formatting. ­ Create a member form with the appropriate fields in the page.

Web Communication using Adobe® Dreamweaver CS4

The use of page properties has declined in favor of using Cascading Style Sheets to control design elements across all pages in a site.

5.2

Organize content by using tables.

Tables are an ideal way of organizing tabular information that fits into a grid of rows and columns. You can add a table anywhere on your page, and even nest one table inside another. You start a table by clicking the Table button on the Common tab of the Insert bar, and specifying: · the number of rows and columns in the table; · the table width, either as an absolute width in pixels, or as a percentage of the page width; · the thickness of the border around the table, with 0 hiding the border altogether; · the spacing inside each cell between the cell's content and border (cell padding); · the spacing between cells (cell spacing); · the position of a table header, which describes the content in each row or column (and improves accessibility by allowing screen readers to determine table content more easily); and · other options that improve accessibility, such as a caption for the table, and a summary of its contents. You add content to table cells in the same way as you add it to any other part of a page, by typing or pasting text and by inserting images and other media.

Organizing and Modifying Content

5.1

Set and modify document properties. Adding Rows and Columns

If you need to add more content to a table than you have room for, you can add additional rows and columns by positioning the cursor in the table and selecting Insert > Table Objects and then: · Insert Row Above · Insert Row Below · Insert Column to the Left · Insert Column to the Right You can also select Modify > Table > Insert Rows or Columns and specify the number of each to insert.

Every page in your site can have a set of default attributes, such as the font collection, size and color, a background color and image, the margins around the outside of the page, and the style of links and headings. You set page properties by clicking the Page Properties button in the Property inspector.

y nl O n y tio op ua C al ot Ev N o D

18

Web Communication using Adobe® Dreamweaver CS4 Selecting Rows, Columns and Cells

To change the properties of a table and its rows, columns, and cells, or to resize rows and columns, you first need to select the table, rows, columns or cells. You select an entire table by clicking the upper left corner of the table, or just below the bottom of the table. You select a row by placing the cursor to the left of the row, and clicking. You select multiple rows by clicking and dragging. You select a column in the same way, placing the cursor above the row and clicking when it becomes an arrow, or clicking and dragging to select multiple columns. You select cells by clicking and dragging across them. Border Color

CS4

Just as you can set the border color for an entire table, you can do the same for an individual cell.

Merging and Splitting Cells

You can merge two or more cells into one by selecting them and clicking the Merges selected cells using spans button in the Property inspector. You can split a cell by selecting it and clicking the Splits cell into rows or columns button in the Property inspector. An example use of merged cells is to have a single header overtop of two columns.

Resizing a Table and its Rows and Columns

You can change the size of a table by clicking the bottom or right edge of the table, then dragging one of the resize handles to shrink or grow the table. You can resize a column by selecting it and dragging its right border. You can resize a row by selecting it and dragging its bottom border.

Sorting Table Content

If you have data in a table that would be more readable if it was sorted in a particular order, such as a list of sales figures sorted from least to greatest, you can use Dreamweaver's Sort Table feature to sort the data. With the insertion point in the table, select Commands > Sort Table and choose the column to sort by, whether to sort alphabetically or numerically, and whether to sort in ascending or descending order.

y nl O n y tio op ua C al ot Ev N o D

5.3

Table Alignment

Just like text and images, tables can be aligned to the left or right margins, or centered between them. You change the alignment by selecting the table, then selecting one of the options in the Align field in the Property inspector.

Changing Table Properties

With an entire table selected, you can change properties of the table, including those set when the table was created, as well as specify a background color or image for the table, and the color of cell borders. These properties are available in the Property inspector, as well as four useful buttons for cleaning up formatting: · Clear Column Widths · Clear Row Heights · Convert Table Widths to Pixels · Convert Table Widths to Percent

Note that there is no chronological sort option, so you cannot sort a column of dates in a meaningful way. You also cannot sort data in merged cells. To sort data in ways not supported by Dreamweaver's sort feature, you could export the data to a delimited text file and open it in a program such as Microsoft Excel. You could also copy and paste the table to another program, then import or copy and paste it back into the page in Dreamweaver.

Organize web page layout with absolutelypositioned div tags and CSS styles.

These options are helpful when you have done some resizing and your table is no longer consistently laid out. By selecting these options, you can start fresh with resizing columns and rows.

One of the benefits of Cascading Style Sheets is the increased ability to position content on the page. CSS offers page layout options not available with HTML, even using tables. The main method for positioning content on the page using CSS is the div tag. Typically, this tag acts as a rectangular container for text, images and other page elements. A page may have multiple div tags (divs), and they may be nested inside one another, to position different blocks of content in different places on the page.

Changing Cell Properties

Within a cell or a group of selected cells, you can set the following properties using the Property inspector: Vertical Alignment You can align text to the top, middle or bottom of the cell. Horizontal You can align text to the left, middle or right Alignment of the cell, and prevent it from wrapping to and Wrapping the next line. Background Color Just as you can set a background color and and Image image for an entire table, you can do the same for an individual cell.

19

CS4

Web Communication using Adobe® Dreamweaver CS4

Options available in the Property inspector include: Format Applies a semantic format to the text, such as Paragraph or one of several levels of Heading. Font Collection Applies a list of fonts to the next. A browser attempts to use the first font in the list, if it is installed on the computer, then moves on to the next one. Several pre-created font collections are listed. Size Applies a specific font size or a font size relative to the basefont size. Text Color Applies a web-safe color to the text. You can either select it with the color-picker or enter a color's hexadecimal code (e.g. #FFFF00). Bold Changes text to bold face. Italic Changes text to italic. Left, Center, and Aligns the text within the page or elements on Right Align the page, such as a table cell. Link Creates a hyperlink from the text to the URL you enter. Unordered List Creates a bulleted list. Ordered List Creates a numbered list. Indent and Applies or removes indentation of the text. Outdent Often used for quotations.

A div is positioned on a page either in relation to other elements or divs on the page, or by specifying its position as x- and y-coordinates.

Draw a div

On a blank page, you add a div by selecting the Draw AP Div button in the Layout tab of the Insert bar, then drawing a container on the page. This method of drawing a div positions it absolutely on the page. You can change the position of the div by selecting it, then dragging the handle in the upper-right corner.

Change div properties

Since divs are styles, you edit div properties in the CSS Panel. Divs are usually class styles, so the name should begin with a hash (#).

Add Content to a div

You add content to a div in the same way you add content anywhere on the page, by typing or pasting text and by inserting images and other media.

5.4

Modify text and text properties.

y nl O n y tio op ua C al ot Ev N o D

Alignment Creating Lists

Text can be aligned to the left or right margin, centered between them, or justified, which adds spaces between words so the text stretches fully from the left margin to the right.

Lists are a great way to organize information on a web page. Use the Unordered List (also known as bulleted) or Ordered List (also known as numbered) buttons on the Property inspector to start a new list or to convert selected text to a list. Lists may be nested inside of each other, such as a bulleted list nested within a numbered list. To create a nested list from existing text, select the text and use the Text Indent button on the Property inspector. To remove the indent from text, select the text and use the Text Outdent button on the Property inspector.

Formatting Text

You use the Property inspector to change the appearance of text in your document.

20

Web Communication using Adobe® Dreamweaver CS4 Adding Additional Spaces

You can only insert one space between characters in a web page using the Spacebar. While Cascading Style Sheets offer ways to fine-tune spacing, if you wish to simply add more than one space between characters or words, you must insert a special character: a non-breaking space. You can do this by selecting Insert > HTML > Special Characters > Non-Breaking Space.

CS4

the page are, so the user's browser fits the image into the size you specify. If you make the image smaller, you can use the Resample icon in the Property inspector to remove unneeded pixels, so the image file size is smaller and the image downloads more quickly.

Indenting Text

You can indent an entire paragraph from the left and right margins using the Indent button on the Property inspector. You can reverse the indent with the Text Outdent button. This type of indenting is useful for quotations and other text you want to set off from the main text.

Horizontal Rules

Horizontal rules are lines across the page that can serve to separate different content areas on a page. You insert a horizontal rule by selecting Insert > HTML > Horizontal Rule. With the rule selected, you can specify its width, in pixels or percent, its height in pixels, and its alignment on the page, in the Property inspector.

You crop an image by selecting it and clicking the Crop Tool icon in the Property inspector, then selecting the crop handles that appear around the image and adjusting the box until it surrounds only the area of the image that you want to keep. Press Enter to crop the image, but note that this edits the image file on your computer and the areas you cropped will be permanently removed.

5.5

Modify images and image properties.

You modify an image on a page by selecting the image and viewing and modifying its properties in the Property inspector.

y nl O n y tio op ua C al ot Ev N o D

5.6

You adjust the brightness and contrast of an image by selecting it and clicking the Brightness and Contrast icon in the Property inspector and moving the sliders to increase or decrease brightness and contrast.

Aligning Images

Images can be aligned relative to other images and text on the page. For example, an image can be aligned to the left or right sides of the page by selecting Align Left or Align Right in the Image Alignment field in the Property inspector. Note that this area is just for images. Paragraphs of text have their own alignment buttons. An image inserted at the beginning of a paragraph of text will cause the text to wrap around the image, to the right or left, depending on the image alignment selected. Images can also be aligned vertically by selecting one of Default, Middle, Top or Bottom in the Align field in the Property inspector.

You sharpen an image by selecting it and clicking the Sharpen icon in the Property inspector.

Modify Flash movies on a web page.

Image Editing

Dreamweaver includes tools for simple image editing, such as cropping (eliminating unwanted areas of an image), resizing, resampling (removing pixels from a resized image to reduce the file size), and adjusting sharpness, brightness and contrast to improve visibility. These tools are available in the Property inspector when an image is selected.

Flash is a multimedia format developed by Adobe for viewing on web pages, and supports animation, video and interaction. Flash files prepared for web viewing have a .swf extension, while Flash video files have a .flv extension. You create Flash animations, movies and videos using software such as Adobe Flash and Adobe Director, then insert them into your web page. Dreamweaver also has some built in Flash elements, such as buttons and text. You modify Flash movies by selecting the Flash placeholder object on the page, then modifying the movie's properties in the Property inspector. You preview the Flash movie by clicking the Play button.

You resize an image by selecting it, then dragging the resize handles that appear around the image. Hold down the Shift key while dragging one of the corner handles to keep the same aspect ratio for the image (e.g., to keep it from being stretched vertically or horizontally). When you resize an image this way, the image file on your computer is not changed, but the image size settings in

21

CS4

5.7

Create web page templates.

Web Communication using Adobe® Dreamweaver CS4

5.8

Page templates are pre-created master pages that have some elements already added, and other areas empty, ready for new content. Templates are used as the basis for new pages, to increase consistency of content and layout across pages, and to save time when creating new pages. An example of a page template would be one for the Products pages in a corporate website, where the template already has the company logo and header across the top, a footer, and common navigation elements, but no content in the main area of the page.

Use basic HTML tags to set up an HTML document, format text, add links, create tables, and build ordered and unordered lists.

HTML (HyperText Markup Language) is the language used to format content in such a way that it can be displayed by web browsers. HTML consists of a family of tags that instruct the browser as to what the content is and how to display it. These tags are defined in the HTML Specification maintained by the World Wide Web Consortium (W3C). When you create a page in Dreamweaver, you may work all of the time with the Document window set to Design view, which shows you what your page will look like in a browser. While you design, Dreamweaver writes HTML tags and saves them in the file. You can view this HTML by changing the Document window view to Code view or Split view.

Creating a Page Template

The simplest way to create a new page template is to design a page and save it as a template. When designing the page, add content that will be common to all pages based on the template, and be sure to attach any style sheets you will use as well as set metadata. After creating the page, choose File > Save As Template to save it as a page template, rather than a web page. Template files are saved with a .dwt extension, in a Templates folder under your site's root folder, and are used only within the local site; they are not uploaded to the remote server.

Head and Body Sections

Every web page contains a head section and a body section. The head section is enclosed by <head> and </head> tags, while the body section is enclosed by <body> and </body> tags. Meta tags, which provide additional information about the site, are always placed in the head section, while the actual content that appears on the page is placed in the body section.

Define Editable Regions

Page templates have areas on them that are available for editing in the pages created from them, and areas that are locked and not available for editing. You define editable regions in a template by selecting them, then choosing Editable Region from the Templates pop-up menu on the Common tab of the Insert bar and naming the region. Editable regions include text, images, cells in a table, and other elements on the page. The editable region will be outlined in green in the document. You can replace the contents of the editable region with instructions, such as "Type your text here."

You can remove an editable region by clicking the tab with the region name in the upper left corner of the region, then selecting Modify > Template > Remove Template Markup. All elements on a page that are not marked as editable regions remain locked and uneditable in pages created from the template.

Create a Page from a Template

You choose File > New and select a template from the Templates tab to start a new page based on a template. After editing content in the editable regions, you save the page as a new web page.

Apply a Template to an Existing Page

You can apply a template to an existing page by opening the page, then selecting the template in the Assets panel and dragging it to the Document window. Some clean up may be required.

y nl O n y tio op ua C al ot Ev N o D

Page Formatting Tags Text Formatting Tags Link Tags

Within the head section, you specify a page's background color with the <bgcolor> tag or a background image with the <background> tag. e.g., <body bgcolor="#000000"> <body background="clouds.gif">

The <p> tag creates paragraphs, while the <br> tag creates a new line within a paragraph. e.g., <p>This is a paragraph<br /> with two lines.</p> Headings are tagged with <h1>, <h2>, <h3> and so on to indicate headings of different levels. e.g., <h1>This is a top-level heading.</h1> <h2>This is a subheading.</h2> Bold face is indicated by the <strong> or <b> tag. e.g., <strong>This sentence is in bold face.</strong> Italics are indicated by the <em> or <i> tag. e.g., <em>This sentence is in italics.</em> The font collection, size and color are indicated by the <font> tag. e.g., <font face="Arial, Helvetica, sans-serif" size="1" color="#FF0000">This is small red text.</font>

Edit a Template

You edit a template by opening it from the Files panel, making changes, and choosing File > Save. When you edit a page template, Dreamweaver can automatically apply that change to all the pages created from the template, saving you from having to manually edit each page.

Links to other pages and sites are creating using the anchor tag <a>. e.g., <a href="http://www.ccilearning.com">This is a link</a> <a href="index.html">This is a link</a> The href indicates the site or page to link to. The http in the link indicates that the link is to a web page. E-mail links use a mailto preface. e.g., <a href="mailto:[email protected]">Send us a message</a>

22

Web Communication using Adobe® Dreamweaver CS4 List Tags

Lists are created with either a <ul> tag for an unordered (bulleted) list or a <ol> tag for an ordered (numbered) list. Items in the list are tagged with the <li> tag. e.g., <ul> <li>This is an item.</li> <li>This is another item.</li> <li>This is another item.</li> </ul> <ol> <li>This is item 1.</li> <li>This is item 2.</li> <li>This is item 3.</li> </ol>

CS4

The range of HTML tags that can be used for formatting content is limited, which restricts page design options. CSS address the limitations of HTML formatting with a much greater range of design options. With CSS, you continue to use HTML tags to indicate the meaning of content, but you use styles to format content. Styles are just rules about how a particular type of content should be formatted. For example, a style for a heading on a page might be the font Arial, in a large size, blue in color, with a line underneath, like this:

Heading

There are three types of styles: class A collection of formatting attributes. tag A redefines an existing HTML tag. ID A unique identifier for a style that appears only once in a document. Style sheets are a collection of styles in one file. While styles may be embedded in a web page, they are more efficiently used when they are placed in an external style sheet (which usually has the extension of .css) and referenced in one or more web pages. By defining styles once and using them in many places, you increase visual consistency in a website, and reduce file size and site access times, since a single style sheet only needs to be downloaded once to format many pages. Style sheets enable you to more quickly format page elements, simply by selecting them and applying a style. Style sheets also enable you to reuse content in different ways, such as to format it for printing or for display on a smaller screen like those found on smart phones.

Tables

Tables are created with the <table> tag. Rows in the table are specified with a <tr> tag, and columns, or cells within the row, by the <td> tag. <td> is nested inside <tr> and both are nested inside the <table> tag. The <th> tag marks the table header and is nested inside <tr> tags. e.g., <table> <tr> <th>This is the column 1 heading.</th> <th>This is the column 2 heading </th> </tr> <tr> <td>This is row 1, column 1.</td> <td>This is row 1, column 2.</td> </tr> <tr> <td>This is row 2, column 1.</td> <td>This is row 2, column 2.</td> </tr> </table>

5.9

Add head content to make a web page visible to search engines.

Metadata is data about data. In the case of a web page, it is information about the web page, separate from the actual content of the page. Metadata may be added to the head section of a page to inform others, including search engines and other software, about the content of the page. Metadata that is commonly added to pages includes: Title Keywords A short, descriptive name for the page. Words that succinctly describe the content of the page. Description A longer, textual description of the content of the page. Links Used most often to reference an external style sheet. You add metadata to a page in Dreamweaver by selecting Insert > HTML > Head Tags, then choosing the tag you want from the submenu. Metadata is inserted inside <meta> tags in the <head> section.

5.10

Use CSS to implement a reusable design.

HTML is used both to tag content to indicate meaning as in the case of the <h1> and <p> tags, as well as to indicate formatting as in the case of the <strong> and <em> tags.

y nl O n y tio op ua C al ot Ev N o D

The CSS Panel

You use the CSS Panel to create and manage styles, and attach style sheets to pages.

Create a Style in the Style Panel

You create a new style in the style panel by clicking the New CSS Rule button. You specify the type and name of the style and whether it is to be defined within the document or in an external style sheet, then define the formatting properties of the style. Choose to define it in an external style sheet to create a new style sheet. You can continue to add new styles to the style sheet once it exists.

23

CS4

In naming styles, precede them with a period if the style is a class style and a hash if the style is an ID selector.

Web Communication using Adobe® Dreamweaver CS4

­ Open the page containing a Flash movie from the site included with this guide and view the properties associated with the movie. ­ Create a new web page to use as a template. Add content that will appear on all pages created from the template. Define other areas as editable regions and save the page as a template. ­ Create a new blank web page and switch to Code view. Note that Dreamweaver creates head and body sections for you. Enter HTML tags to create a table, lists and links and to format text. ­ Add keywords and a description that accurately represent each page. ­ Create new styles in an external style sheet for headings, body text, images, tables and other common page elements.

For example, to create a style to use as a caption under a photograph, you could create a new class style called ".caption" and set font collection, size and other properties.

Evaluating and Maintaining a Site by using Dreamweaver CS4

Conduct basic technical tests.

y nl O n y tio op ua C al ot Ev N o D

6.1

Check Spelling Check for Broken Links

Apply a Style

You apply a style by selecting an element on an open page, such as text or an image, then selecting the style from the Style field in the Property inspector.

Technical testing is conducted to find and fix technical problems such as spelling errors, missing files and broken links, and to check whether the pages in the site will display appropriately in different web browsers. Dreamweaver includes tools to help you with all of these tasks.

Apply a Style Sheet to a Document

If you have an existing style sheet, you attach it to an open document by clicking the Attach Style Sheet button in the CSS Panel and selecting the style sheet file. If any of the styles or tags in the document are defined in the style sheet, their appearance will be updated to match the definitions in the style sheet.

You can have Dreamweaver check the spelling of words in your pages against its dictionary by selecting Text > Check Spelling. For words not found, you can choose to change or ignore them, or add them to your personal dictionary.

Practice Task

Open your web page in Dreamweaver and set properties on the page, such as background color and margins. ­ Create a table with multiple rows and columns, and enter some general stock information into the cells. Add and delete additional rows and columns. Sort the table by one of the columns. Change properties of the cells, and merge cells together. ­ Open a web page in Dreamweaver, such as one of the ones included with this guide. Draw divs for several content areas on the page, such as a header and footer, a menu bar, a left column, a right column, and a central content area. ­ Apply formatting options listed in this section as appropriate for each page. Copy text from another document and paste it into the page, with and without formatting. ­ Insert an image into the page and try resizing and cropping the image, then adjusting the brightness and contrast. Align the image to the right of the page so text flows around the left of the image. 24

You can have Dreamweaver scan all the pages in your site for broken links by selecting Site > Check Links Sitewide. Files with broken links are listed in the Link Checker tab of the Results panel. You can double-click on the file in this tab to open it, with the broken link highlighted, then use the Property inspector to correct the link.

Web Communication using Adobe® Dreamweaver CS4

Note that Dreamweaver only checks links to other pages within your site, not links to other sites. You can list all of the links to other sites by choosing External Links from the Show list on the Results panel. You can then check those links manually, or use a web service to scan your site when it has been published to a publicly-accessible web server.

CS4

6.2

Identify techniques for basic usability tests.

Usability testing is conducted to measure how well users interact with the site. It tells you whether users can find information, navigate the site, and utilize its features without difficulty. Usability testing may be conducted one-on-one with a tester or observer and individual users, or it may be conducted by recording a user's activities with software or a camera, for later review. In either case, the user is given a series of tasks, such as to find some information that is known to be in the site, and observe how they perform the tasks. The observer notes how easily and quickly they complete the task, and records their reaction to the site architecture, navigation and page elements. Testing is conducted in rounds, with just a few users per round. After a round of testing, a review is conducted by the design team, changes made to the site, and a subsequent round of testing conducted. After a few rounds, the main issues that prevent users from accessing the site easily have usually been identified and resolved, and the site is ready for publication.

Check for Orphaned Files

Orphaned files are those with no links to them from any other pages in your site. You can view a list of these files by selecting Orphaned Files from the Show list in the Results panel. If these files are no longer part of your site, you could delete them to avoid future confusion.

Check Browser Compatibility

Web browsers evolve at a rapid rate, with new versions of the most widely-used browsers appearing every year or so. While standards, such as those related to HTML, aim to ensure that any web page can be viewed in any browser on any operating system, different browsers interpret the standards in different ways, so pages do not always appear exactly the same in different browsers, or different versions of the same browser. Dreamweaver can scan all the pages in your site and report on issues related to how the page will display in different browsers. Start the process by selecting Check Browser Compatibility from the Check Page pop-up menu at the top of the Document window. Results appear on the Browser Compatibility Check tab of the Results panel, and include: Errors Issues that will cause serious visual problems. Warnings Issues that will cause visual problems, but less serious ones. Informational Unsupported or malformed HTML that will not Messages cause display problems.

You can double-click a file to open it in Split view, with the errors highlighted.

Preview Site in Browsers

In addition to the technical tests listed above, it's always a good idea to review a site manually, viewing pages and clicking links in a browser. From Dreamweaver, you can click the Preview in Browser button on the Document toolbar to launch the site in any web browser you have installed.

y nl O n y tio op ua C al ot Ev N o D

Accessibility Tests

Accessibility testing measures how well users with visual, auditory, motor and other impairments can access the site. In Dreamweaver, you can use the Check Accessibility tool to have Dreamweaver scan your pages for issues that can make the content less accessible. Start the process by selecting Check Accessibility from the Check Page at the top of the Document window. Results appear on the Site Reports tab of the Results panel. You can double-click a file to open it in Split view, with issues highlighted. As with usability testing, you can also conduct one-on-one testing using people with visual, auditory, motor and other impairments and observing any difficulties they have in accessing the site.

6.3

Identify methods for collecting site feedback.

You can gather feedback informally, by interviewing the client and asking questions, or formally through the use of a survey.

6.4

Present web pages to others (such as team members and clients) for feedback and evaluation.

When your site is close to completion and technical errors have been resolved, you may wish to present it to the client and others outside of the project team and gather feedback. You can publish the site to a testing server, which is simply an alternate server to the live one, often not publicly available, and invite stakeholders to access the site there.

6.5

Manage assets, links, and files for a site.

Once your site is built, you will likely need to make ongoing changes to keep it up to date. The Files panel is the starting point for managing your site.

25

CS4

Web Communication using Adobe® Dreamweaver CS4

All of the actions you can perform in the Files panel you can also perform in the expanded map view, including renaming files or opening them for editing by double-clicking on the file.

Viewing Assets

The Assets tab lists all of the following elements on all pages in your site:

Editing, Duplicating, Deleting and Renaming Files

You can double-click on a page in the Files panel to open it for editing in the Document window. You can right-click a file in the Files panel and choose Edit > Rename to give it a new name. Dreamweaver changes all the links on pages in your site to link to the new page name. You can right-click a file in the Files panel and choose Edit > Duplicate to make a copy of that page, then rename and edit the copy to create a new page.

· · · · ·

Images Colors URLs Flash Files Shockwave Files

· · · ·

Movies Scripts Templates Library Items

You can right-click a file in the Files panel and choose Edit > Delete to remove a page. This does not remove links to this page, however, so you will need to find and edit those separately.

You can right-click anywhere in the Files panel and choose New Folder or New File to create a new folder or a new page.

Using the Check In/Check Out System

If you are developing a website with others, you can use Dreamweaver's version control system to manage who is working on any file at one time. In this system, the files are located on a remote server where others can access them. When you want to work on a file, you select it in the Files panel and choose the Check Out File(s) button. This file is marked as checked out and will appear with a check mark next to it for everyone to see. The check mark is green if you are the person who checked out the file, and red if it was someone else. When you are finished editing a file, you check it in so others can access it.

Using the Site Map

Dreamweaver gives you a bird's eye view of your entire site, including the pages and all the links between them with its Site Map view. To view a map of your site, you must first define the site's home page. To do this, right-click the home page in the Files panel and select Set as Home Page. You can view the site map by changing the view in the Files panel to Map view. You can then expand the view by clicking the Expand button in the Files panel. Initially, the site map view shows the top two levels of the site, starting from the home page. You can expand the view by clicking the + and - buttons next to pages.

y nl O n y tio op ua C al ot Ev N o D

Searching Finding and Replacing Text Changing Links

You can apply these elements to any page open in the Document window.

You can search for almost anything you might have added to any page in your site using Dreamweaver's search tools. Select Edit > Find and Replace to start the process, then specify where to search (e.g., the open document or the entire site) and what to search for, such as text or an HTML tag, or code within a tag, such as the name of a particular image.

You can use Dreamweaver's Find and Replace feature to replace text on individual pages and across your entire site, quickly and accurately. Select Edit > Find and Replace to start the process, specifying the text to look for, the text to replace it with, where to look, and other search options.

To change a link on all pages to a new link, choose Site > Change Link Sitewide and enter the old and new link.

26

Web Communication using Adobe® Dreamweaver CS4

CS4

6.6

Publish and update site files to a remote server.

When your site is ready to be seen by its audience, you will publish it from your local computer to a web server, which may be a computer on your organization's network (or intranet) or may be a computer accessible on the public Internet. You can connect to the remote server using a variety of technologies, such as FTP (File Transfer Protocol), SFTP (Secure FTP), and WebDAV. You will need to know the address of the server, the folder on the server in which you will place your site, and account information (username and password). If you did not define remote site information when you first created the site, you can do so by selecting Site > Manage Sites and editing your sites properties. With the remote site information entered, you can use the Put command in the Files panel to upload your site to the remote server. Select your site's root folder and click the Put button to upload the entire site. To verify that all the files are uploaded, you can switch the Files panel view from Local view to Remote view. If you edit several files in the local site and aren't sure which ones they are, you can use the Synchronize feature to upload changed files. To do this you click the Synchronize button on the Files panel, and in the dialog window, choose to synchronize the entire site and set the Direction as "put newer files to remote." To prevent some local files from being uploaded every time you use the Synchronize feature, you can cloak those files. To do this, right-click a folder in the Files panel and choose Cloaking > Cloak. Note that you can only cloak entire folders, not individual files.

y nl O n y tio op ua C al ot Ev N o D

27

Practice Task

Check all the pages in your website for spelling errors and broken links. Check your site for orphaned files and for browser compatibility. Preview the site in a web browser. ­ Use the Check Accessibility tool to check all the pages in a website, such as the one included with this guide. ­ Consider the types of questions you would ask on a survey regarding how easy it is to use this site and how they are enjoying using it. ­ Use the Files panel to copy and rename several files, to create a new folder and move files into it, and to delete a file. View your site in the site map view. View all of the assets in your site. Search for text and HTML tags in your site. Use the replace feature to change some text throughout your site. Change a link in all pages in your site. ­ If you have access to a remote server, configure Dreamweaver to connect to it, define a remote root folder, and publish files to the server.

CS4 Adobe® Certified Associate

Put Your Talents On Display

Demonstrate your expertise in today's most popular web design and multi-media applications from Adobe.

Web Communication using Adobe® Dreamweaver CS4

Give Your Creative Juices A Shot Of Credibility

Landing that first job out of high school or college is daunting. The classic dilemma for entering the workforce with little or no experience is convincing employers you are capable of doing the job. Talented students now have an effective credibilitybuilding tool they can add to their resumes: Adobe® Certified Associate. For those seeking employment that requires demonstrating the ability to use digital media needed to plan, design, build, and maintain effective communications, Adobe Certified Associate is a certification program that validates the skills of job seekers.

Certification Helps Prove Proficiency

In an increasingly competitive work world, employers need more than familiar users of digital communications technology to drive successful business outcomes-- they need proficient users. With certification, hiring managers will know that work similar to the excellent portfolio they just reviewed can be accomplished efficiently.

Adobe offers three areas in which to gain certification for entry-level skills:

Web Communication Using Adobe Dreamweaver CS4

Dreamweaver is the industry leading web development tool, enabling users to efficiently design, develop and maintain standards-based websites and applications. With Dreamweaver, you can go from start to finish, creating and maintaining basic websites to advanced applications that support best practices and the latest technologies.

Pitt Meadows (Head Office) 202 - 19141 Ford Road Pitt Meadows, BC V3Y 2P8 (t) 1-800-668-1669 (t) 1-604-465-1540

y nl O n y tio op ua C al ot Ev N o D

Rich Media Communication Using Adobe Flash CS4

Flash is the industry standard for creating and delivering effective rich interactive content across desktops and devices. Flash enables users to integrate animation, video, text, audio and graphics into engaging user experiences that span a wide variety of digital devices, from desktops to mobile phones. Vancouver 404 - 1152 Mainland Street Vancouver, BC V6B 4X2 Phoenix 14820 Cave Creek Road Suite 1 Phoenix, AZ 85032 (f ) 1-866-760-2354 (w) www.ccilearning.com

What Talents Can Be Displayed Through Adobe Certified Associate?

Employment using digital communications skills is growing worldwide. Whether it's a career in graphic design, web marketing, video production, or more, becoming an Adobe Certified Associate will help give you the inside track to work in these exciting new fields.

Visual Communication Using Adobe Photoshop CS4 Extended

Photoshop is the industry standard for the utmost creative control in image editing and compositing. You can apply filters nondestructively, manage and correct color more easily, convert color images to rich black­and­white with one click, and retouch images with more powerful cloning and healing tools.

28

Information

Dreamweaver CS4.indd

28 pages

Find more like this

Report File (DMCA)

Our content is added by our users. We aim to remove reported files within 1 working day. Please use this link to notify us:

Report this file as copyright or inappropriate

248001


You might also be interested in

BETA
Career Center Manual 2009 - 2010
Career Center Manual 2010-2012
Dreamweaver CS4.indd
New Jersey Undergraduate Academic Catalog | Information | DeVry University