Creating Learning Objects with Macromedia Dreamweaver MX
by Alex Cuthbert and Frances Himes September 2002
Copyright 2002 Macromedia, Inc. All rights reserved. The information contained in this document represents the current view of Macromedia on the issue discussed as of the date of publication. Because Macromedia must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Macromedia, and Macromedia cannot guarantee the accuracy of any information presented after the date of publication. This white paper is for information purposes only. MACROMEDIA MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. Macromedia may have patents, patent applications, trademark, copyright or other intellectual property rights covering the subject matter of this document. Except as expressly provided in any written license agreement from Macromedia, the furnishing of this document does not give you any license to these patents, trademarks, copyrights or other intellectual property. Dreamweaver MX, Flash MX, ColdFusion MX, Studio MX, and Sitespring are either trademarks or registered trademarks of Macromedia, Inc. in the United States and/or other countries. The names of actual companies and products mentioned herein may be the trademarks of their respective owners. Macromedia, Inc. 600 Townsend Street San Francisco, CA 94103 4152522000
Creating Learning Objects With Dreamweaver MX

Contents

Recent Developments in Learning Objects Design... 1 Defining Learning Objects...2 Separating Content From Context...2 Ensuring Interoperability...3 Designing Learning Objects... 4 Define Learning Objectives...5 Create LOs With Macromedia Dreamweaver MX: Fostering Collaborative Learning (A Development Scenario)...5 Digital Assets Package...6 Identifying Learning Objectives...6 Managing Learning Object Development With Macromedia Dreamweaver MX....6 Using Macromedia Dreamweaver MX to Support Work Flow for Curriculum Design Teams....10 Using Macromedia Dreamweaver MX Assets to Build Learning Objects..11 Curriculum Design Specialists....11 Interface Design Specialists...12 Flash Specialists...12 Database Specialists....12 Managing the Presentation Logic of Learning Objects..14 Activity Sequences....14 Image Placeholders (Fireworks Integration)...14 Cascading Style Sheets...15 Templates...17 Asset Management....18 Libraries....19 Managing the Database Logic of Learning Objects (ColdFusion Integration)..19 Accessing Databases....20 Inserting Data Into a Database...21 Displaying Records....23 Creating a ColdFusion Component...23 Using Server Behaviors...24 Additional Development Considerations...26 Conclusion..... 27 Macromedia Learning Objects Development Center...27

September 2002

Page iii
This white paper presents a model for using Macromedia Dreamweaver MX to design Learning Objects and configure those objects to create rich learning experiences. The authors use a development scenario, following a design team as it creates a series of Learning Objects. This approach illustrates how Macromedia Dreamweaver MX, and other products in the MX Studio, can be used to manage, distribute, and coordinate Learning Object design. To better demonstrate the development steps discussed in this paper, a set of digital assets is included.
Recent Developments in Learning Objects Design
Driven by the evolution of web-based learning environments, a shared vision is emerging for an economy where both interactive and individualized instruction can be assembled from reusable, sharable Learning Objects. Instructional designers, online training companies, and curriculum publishers all have a stake in making this vision a reality. In the past, curriculum designers and publishers created proprietary learning materials for one specific use, such as providing supplementary material for a textbook. Constructed at great expense and rarely reused, these materials often followed a linear approach. The learning experience was static in nature, with computer-based material secondary to the printed text. Curriculum content and presentation methods were closely interwoven and often built using proprietary software architectures. Similarly, assessment items were stored in custom database formats that made it difficult to aggregate student data across products. Communication between applications was problematic. The emergence of the web--along with the recent acceptance of standards for defining and describing learning objects--changes both the methods of development and model for distribution. The result of the convergence of the web and wireless makes it possible to deliver customized Learning Objects (LOs) through network devices and web services. New forms of technology, including the Macromedia Flash Communication Server Studio MX, streaming video, instant chat, and synchronization and conferencing tools, have advanced interactive learning both on- and off-line.

Page 1

Defining Learning Objects
Just what constitutes a Learning Object (LO) is determined by a variety of factors, including the designers assessment strategy and learning model. Standards committees, such as the Institute of Electrical and Electronics Engineers (IEEE) Learning Technology Standards Committee (LTSC)i, have created a roadmap for defining attributes for LOs. From a business perspective, defining the properties of LOs is central to the vision of an instructional object economy in which vendors provide high-quality experiences that can be shared and reused across platforms and devices. A number of LO definitions have been offered by groups and individuals involved in exploring innovative eLearning applications. There is debate about the granularity of a Learning Object, which is also known by a number of other names (shareable content object, knowledge object, reusable Learning Object, nugget, etc.). The LTSC describes LOs as any entitydigital or non-digitalthat can be used, re-used, or referenced in technology-supported learning. In its simplest form, an LO might be thought of as a small unit of instruction (smaller than a course, unit, or section) that teaches a focused concept. For the purposes of this paper, an LO as defined by Tanya Heins and Frances Himesiii consists of three fundamental elements:
instructionally sound content with a focused learning objective, learner-centered rich media environments that enable the learner to practice, learn, and receive assessment, and metadata or keywords that describe the LOs attributes, and mechanisms for communicating with management systems or other web applications.
Learning Objects contribute to the scalability and reuse of content and media assets within an organization. Instead of designing complete courses, curriculum design teams can now build reusable LOs, and multiple LOs can be configured to present different topics. But, in order to enhance learning and cost-effective practices, curriculum design teams must learn to design, build, and connect objects using a well-defined set of learning objectives.
Separating Content From Context
Focusing on learning objectives helps separate content and context. In addition, focusing on learning objectives facilitates the sharing, reuse, and continuous improvement of curriculum materials. The process of defining learning objectives has the immediate impact of making the goals and interactions of LOs visible to the curriculum designers, instructors, and learners. Further, by separating presentation, logic, and data (or instructional content), it becomes possible to share presentation methods, as well as content, across development groups, institutions, and companies.

Designing Learning Objects
There are a wide range of strategies and techniques for designing LOs. In this paper, learning objectives are used to guide the design process, and to help coordinate the technical and pedagogical issues associated with designing LOs. The LO development process typically consists of overlapping stages including pre-assessment, analysis and design, development, implementation, and evaluation. Understanding the process of constructing LOs is a first step in defining and describing LOs at different levels of granularity. Thinking about the characteristics and uses of LOs improves the quality of learning interactions by highlighting learning processes that frequently become obscured while developing the details of user interfaces. Further, the descriptors for LOs, referred to as metadata, have the potential to facilitate the sharing and reuse of LOsviii.

Page 4

Define Learning Objectives
Recent developments in standards for defining LOs separate technical requirements from educational and relational dimensions, such as defining the learning objectivesx that play such a central role in the specification and construction of Learning Objects. The IEEEs Learning Object Metadata (LOM) standard has become an industry standardxi for defining characteristics that describe specific properties of an object, such as its language and technical requirements. Learning objectives define the pedagogical uses of LOs. These objectives range from the descriptions of learning processes targeted by LOs to the expected outcomes of curriculum units. Most curriculum design teams do not instantly generate learning objectives. Rather, these groups draw on a variety of perspectives, standards, and frameworks to identify high-level objectives. Through a process of iterative refinement, more specific learning objectives are developed to connect LOs to standards. By separating presentation and content from the methods used to record student work, Macromedia Dreamweaver MX makes it possible for design teams to think about learning objectives before making implementation decisions. This process is related to the development process used for many business applications where the goal is to efficiently complete transactions or generate performance measures, as opposed to meeting learning objectives. For example, a task analysis is performed to determine tasks that need to be supported by a specific application. From this analysis, application design teams create functional requirements that describe how tasks are supported by the functions. In contrast, learning applications specify learning objectives first, and then determine types of interactions that contribute to the accomplishment of those objectives. Functional requirements are then detailed and refined. The LO applications lifecycle differs from that of business applications, however, in that it is further differentiated by the process of continuous improvement guided by learning objectives.

Managing Learning Object Development With Macromedia Dreamweaver MX
LO development is a multi-step process requiring different supports for distinct stages of the process. The following steps provide an outline of a typical development process:

Page 6

Identify the desired learning outcomes; Define objectives that will enable learners to develop these skills; Define leaning interactions (online learning interactions that will foster these skills); Build LOs to model these learning interactions, providing formats that support a variety of learner differences and learning preferences and styles; Test LOs with pilot group to check learning outcomes against objectives; Adjust learning behaviors and interactions within each LO as needed to accommodate wide range of learning styles; Launch the LO, then track use of and learning from LOs; Evaluate, modify, and refine LOs.
Steps 1-2: Define Learning Outcomes and Objectives
Learning objectives drive much of the design process. Macromedia Dreamweaver MX provides tools for managing these objectives and linking them to LOs. Initially, design teams use Dreamweaver MX Design Notes to specify learning objectives at the page or object level. These learning objectives become part of the metadata that defines the LO. The objectives will eventually be exported as XML metadata once the objects reach the production stage. Available options are described under the Insert->Head Tags menu in Dreamweaver MX. To attach Design Notes to individual objects on a webpage, select the object (by right-clicking for Windows or control-clicking for Macintosh), then choose Design Notes from the objects context menu. The Design Notes dialog box appears and you can enter notes about the learning objectives for the object.

Page 7

Figure 2: Design Notes dialog box in Dreamweaver MX with status and Notes fields.
To enable the use of Design Notes, set the checkboxes for Maintain Design Notes and Upload Design Notes for Sharing under the Design Notes category when you create or edit your site specification in Dreamweaver MX. You can share Design Notes between Flash and Macromedia Dreamweaver MX (see the documentation for details). Since Dreamweaver MX is flexible in terms of the level at which you choose to describe learning goals, members of your design team should agree on a convention for specifying those goals.

View Narratives On Collaboration

Elicit Students' Ideas

Prompt For Synthesis Of Ideas
Figure 3: Schematic of the three Learning Objects aggregated into a curriculum unit.

Page 9

This revised unit introduces situations and challenges that learners would encounter in a typical project-based course requiring group work. The unit also provides valuable feedback for the curriculum designers in terms of the learners conceptions of collaboration. These perspectives shape how the students work with peers and engage with course materials.
Steps 7-8: Launch and Package Learning Objects, Evaluate, Modify, Refine
Content packaging involves defining metadata for the LOs and creating sharable content objects. Macromedia Dreamweaver MX streamlines these processes through the SCORM RTI (Shareable Content Object Reference Model Runtime Interface) Extension for Dreamweaver MX, discussed earlier. The Manifest Maker extension, available at http://www.macromedia.com/exchange/dreamweaver, can be used to easily create a SCORM-compatible XML manifest that includes course-level metadata, a table of contents, and a resource list identifying all support files and supporting content metadata created during the development of the LO. The Macromedia MX website contains a rich set of resources on SCORM compliance and content packaging. The methods described in this paper for defining learning objectives position curriculum design teams to package LOs and to specify metadata as their products move into production.
Using Macromedia Dreamweaver MX to Support Work Flow for Curriculum Design Teams
Macromedia Dreamweaver MX can help curriculum design teams distribute tasks to specialists in the areas of curriculum design, database management, movie production, and user interface design. The integrated design environment of Dreamweaver MX combines coding, layout, testing, and annotation tools. These tools make it possible for curriculum design teams to share assets among members of the team. In addition, the Dreamweaver MX tools facilitate the reuse of presentation and server logic strategies across projects. What does it mean to manage the elements within LOs? One way to think about LOs is to consider the digital assets that make up an LO (e.g., the database tables, Flash interactions, navigation templates, and curriculum content). From this perspective, managing these assets involves coordinating the contributions of the people working on those digital builds. A curriculum design team consists of a partnership between groupings of one or more: content experts, such as educational researchers, teachers, and scientists or professionals in a specific field and technology professionals, including the Database Specialists who build the database management systems, the Flash Specialists who build the movie segments, and

Page 10

interface experts who design the page layout and navigation system, and ensure that the LOs meet Section 508 of the U.S. Rehabilitation Act and its amendments which mandates that electronic and information technology be made accessible to persons with disabilities. These groupings are created to help sort out the different tasks and the expertise needed by the persons involved in completing them. Of course, people do not necessarily fall into just one group and these groups are not exhaustive (e.g., most curriculum design teams have quality assurance and testing groups).
Curriculum Designers Flash Specialists Interface Designers Database Specialists
Figure 4: Subset of specialists involved in an exemplary curriculum development team.
Once the required tasks and capabilities have been identified, the first step in distributing tasks and coordinating the efforts of the design team is to separate the presentation of material from the actual content. Macromedia Dreamweaver MX makes this possible through the use of templates, libraries, and ColdFusion Components (CFCs). These tools can be used to manage the efforts and products of the different members of a curriculum design team.
Using Macromedia Dreamweaver MX Assets to Build Learning Objects
Macromedia Dreamweaver MX ships with a suite of asset management tools ranging from cascading style sheets (CSS) to code snippets and templates. With these tools, curriculum design teams can work simultaneously on different aspects of an LO. For example, separating resources and media types into different categories makes it possible for specialists with different skills to focus on improving the quality of resources aligned with their area of expertise. By examining the roles of each group of specialists and the products anticipated from each group, it is easier to understand how the products need to be produced and integrated.
Curriculum Design Specialists
Curriculum design specialists create the content and the framework for learning interactions. They develop learning objectives, they script media assets, and they iteratively test and refine the solutions. Curriculum design specialists manage the connection between the LOs and learning objectives. Through Design Notes, Macromedia Dreamweaver MX creates a visible history of the curriculum design process, providing materials for specifying XML metadata once an LO reaches the production stage.

Image Placeholders (Fireworks Integration)
Image placeholders reserve a region of the screen for an image that has yet to be created. This feature, accessible through the Insert menu in Macromedia Dreamweaver MX, allows interface designers to create layouts while interface components are still under development. Fireworks recognizes the image placeholders in Dreamweaver MX, and will automatically update Dreamweaver MX pages once an image is completed. Similarly, placeholders can be created for Flash movies. When a Flash movie is edited, Dreamweaver MX launches Flash. The movie will then need to be saved in Flash format (SWF) to see the corresponding changes in Dreamweaver MX. This integration between applications is another strength of the MX product line in terms of facilitating design and development.

Page 14

Cascading Style Sheets
Cascading style sheets control the look-and-feel of pages by defining the font and face elements for text items and other HTML attributes. Maintaining a consistent look-and-feel is critical for all applications. For LOs in particular, familiar navigation models make procedural aspects easier for learners. Cascading style sheets use the same hierarchical XML structure used to specify metadata for LOs. For style sheets, however, these descriptors define the formatting of page elements through specification of characteristics of a font.
Figure 8: Example of name-value pairs for a cascading style sheet (CSS). (See the file learnStyleSheet.css in the digital assets shipped with this white paper.)
Macromedia Dreamweaver MX facilitates the process of maintaining a consistent look-and-feel across an application by bundling page elements into libraries and templates (which are affected by style sheets). While cascading style sheets (CSS) can be attached as internal or external resources, most design teams use external resources to share style sheets and update elements across an entire project. The need for consistent navigation and a uniform look-and-feel leads to the creation of style sheets and templates. Style sheet specifications are stored in files that typically end in.css. These files appear in the Site Panel in Macromedia Dreamweaver MX along with the other files associated with that site. Interface design specialists build style sheets and make them accessible to other team members through the CSS Styles panel in the Design Window:

Page 15

Figure 9: Cascading style sheet (CSS) styles for the LearnGroup site.
Interface design specialists create style sheets after the content is developed. To see how content is developed and how templates and style sheets are then applied, look the file learning_objects/LearnGroup/design pieces/preSurvey (contentOnly).cfm and compare that with the final product in learning_objects/LearnGroup/preSurvey.cfm. In Figure 9, by selecting the icon with a plus (+) symbol in the row at the lower right of the panel, the user can attach the style sheet LearnStyle.css to the current page. This icon brings up a dialog for locating the CSS file. The styles defined in the CSS file that you select will appear in the CSS Styles panel. These styles can then be applied to text in the Macromedia Dreamweaver MX workspace by selecting the text and double-clicking on the CSS style:

Figure 10: CSS Style dialog box with the Type category selected. (This dialog box appears when a style is applied to a page element.)

Page 16

Templates
Webpages can be saved as simple HTML pages or as templates. Templates in Macromedia Dreamweaver MX are collections of interface components and behaviors. Templates are used to maintain a consistent look-and-feel across an instructional unit, while allowing regions of the webpage to be edited.
Figure 11: Macromedia Dreamweaver MX navigation template with one main editable region used throughout. (See the templates/navigationTemplate.dwt file in the digital assets shipped with this white paper.)
Templates help separate the media content from the presentation logic. With templates, interactions in a LO can be abstracted in a way that makes it possible to apply those interactions to a variety of content materials. Within the Fostering Collaborative Learning unit that our design team is developing, templates can be created at different levels of granularity. For example, a navigation template can be created for use across all the pages in the instructional unit. For pages that presented different perspectives on collaboration, designers created a uniform layout for presenting the videos. Designing page elements at different levels of granularity helps curriculum design teams not only to share resources, but to divide tasks effectively. Templates make it possible for one subgroup of team members to focus on the layout and presentation of the material and another subgroup to develop subject-matter questions and guidance independent of the presentation logic. For example, the graphic design specialists created a layout for grouping the movies. To see how this graphical output looked before it was converted to a template, check out the digital assets designpieces/ template(from designer).html. The layout specialists took the graphic designers output and integrated it with the navigation template to create the layout that appears in Figure 12.

Page 17

Figure 12: Design View in Macromedia Dreamweaver MX of the narratives on the advantages of collaboration. (See the file viewVideos.cfm in the digital assets shipped with this paper for the final product with the actual titles and sizes of the segments.)

<cfquery name="insertPreSurvey" datasource="LearnGroup(MYSQL)" username="scripts" password="learnword"> INSERT INTO preSurvey (myName,myGender,groupPositive,groupNegative,projectExperience, projectDescription,groupAdvantages,groupChallenges,createMenu, createTasks) VALUES ("#Form.myName#","#Form.myGender#","#Form.groupPositive#", "#Form.groupNegative#","#Form.projectExperience#", "#Form.projectDescription#","#Form.groupAdvantages#", "#Form.groupChallenges#","#Form.createMenu#","#Form.createTasks#") </cfquery>
The cfquery tag has a number of different attributes including a name field, the data source configured with the ColdFusion adminstrator, and the username and password for accessing the database. The code between the cfquery tags is Standard Query Language (SQL) for inserting values into a table. The values of the fields entered into the forms are passed as part of the query (e.g., #Form.myName#).

Page 21

Our development scenario has open-ended, text-based responses that do not require a specific format. If there were more stringent requirements in terms of data typing, ColdFusion form tags would have been used to verify compliance with field type formats. Using ColdFusion form tags moves the task of checking field types from the client to the server, further separating the server logic from the presentation logic. In our scenario, the form fields from preSurvey.cfm form are inserted into the database table preSurvey. Our curriculum designers wanted a way to match up learners pre- and post-surveys for assessment purposes. An authentication system would have allowed the database specialists to access a user ID unique to each user. Configuring an authentication system is a multistep process even with ColdFusion. Once the learning interactions reach the production stage, a more secure authentication system would be deployed. This multi-stage process is common in software development and supported by the flexibility of Macromedia Dreamweaver MX and ColdFusion. For our example, however, a less formal approach is used. The preSurvey table has an automatically incremented field called the preSurveyID. The following code retrieves the unique ID for the recently entered pre-survey data for each learner:
<cfquery name="getSurveyID" datasource="LearnGroup(MYSQL)" username="scripts" password="learnword"> SELECT LAST_INSERT_ID() as lastid </cfquery>
Specifically, the LAST_INSERT_ID() statement returns the value of the autoincremented preSurveyID field for the last INSERT operation. Concurrency issues are a common problem in database transactions. What if multiple entries are submitted at nearly the same time? How can we be sure that we get the correct ID? To ensure that we are getting the preSurveyID for the transaction associated with our INSERT operation, the entire set of code is surrounded by a cftransaction tag. (See the ColdFusion documentation for details on this markup tag.) Once we have the preSurveyID value for our insert operation, this value is then stored in a session variable so that it will be accessible to the other scripts as the learner progresses through the unit.

<!--- save preSurveyID for tracking user ---> <cflock timeout=20 scope="Session" type="Exclusive"> <cfset Session.preSurveyID = #getSurveyID.lastid#> </cflock>
Session variables are a powerful tool for passing information between scripts and are more secure than passing name-value pairs on the command line. (Note that the # symbol is used to reference variables in ColdFusion markup language for tags such as cfset and cfoutput.) Later, the submitPostSurvey.cfm script accesses this session variable and stores it in the postSurvey table along with the learners post survey responses, making it possible to link pre- and postsurvey responses for specific individuals.

Page 22

From the learners standpoint, the application accepts pre-survey responses and then provides redirection to the page with the narratives.

Displaying Records

The instructor needs to access the responses to the pre- and post-surveys. Ideally, responses to these surveys should be paired for each learner. The result of this requirement is the viewAllSurveys.cfm script in the digital assets. To work with a content source, such as the preSurvey and postSurvey tables, the Bindings panel is used to create the data source and specify a new record set. A record set is the result of a database query (referred to as a data set for ASP.NET data sources). Once a record is set in the Bindings panel, the record set fields can be inserted into a webpage as part of the cfoutput tag. (See the Macromedia Dreamweaver MX documentation for details.) It would be nice to imagine that curriculum design teams have everything figured out in advance. In reality, even displaying something as simple as two sets of survey data can involve several iterations of design. Macromedia Dreamweaver MX makes this process easier for both the database design specialists and the interface specialists by providing tools for encapsulating functionality and reusing resources. In our development scenario, the database specialists went ahead and built code to list the pre- and post-survey responses independently. They designed a ColdFusion component (CFC) that accepted a table name and displayed the results. This approach worked well because of the parallel structure between the pre- and post-tables. Eventually, when the curriculum designers realized they needed to pair pre- and post-surveys, the database specialists simply edited the code in the original ColdFusion component to display the paired data from both tables. Macromedia Dreamweaver MX facilitates this process of redesigning and deploying server logic. With Dreamweaver MX, there are only a few steps required to build and modify a ColdFusion Component that will pair the data from the pre- and post-tables.

Creating a ColdFusion Component
A ColdFusion component (CFC) is a reusable software unit written in ColdFusion markup language. Components are used to encapsulate application and business logic. With CFCs, a designer can improve, modify, and extend a component with minimal impact on the rest of an application. Since changes to the components can be made separate from the interface design, this encapsulation further abstracts the server logic from the presentation of the content.

Page 23

To create a ColdFusion component, the designer selects the Window>Components menu item and specifies the components, properties, functions, and arguments for the CFC. For example, our database specialists created a CFC that accepts a parameter specifying the survey table name, making it possible to view the results of the preSurvey table and the postSurvey table using the same component. (Both the ColdFusion and Macromedia Dreamweaver MX documentation cover the steps of working with CFCs in detailxvi.) Creating this ColdFusion component to display the data from a table is simple because of the server behaviors shipped with Macromedia Dreamweaver MX. Server behaviors, described in the next section, distinguish ColdFusion from other approaches, with ColdFusion providing a path for rapid application development.

Using Server Behaviors

Server behaviors are a set of instructions inserted in a dynamic page at design time and executed on the server at runtime. A quick overview of server behaviors is available under the Displaying Database Records section of the Using Macromedia Dreamweaver MX Help system. Options appear under the Insert->Application Objects menu. The viewAllSurveys.cfm script is constructed by assembling several related server behaviors. First, the query to select paired values from the preSurvey and postSurvey tables is created. This ViewSurvey record set is itself a server behavior. On opening the viewAllSurveys.cfm script, the record set will appear in an Application->Server Behavior panel:
Figure 16: Record Sets in the Server Behaviors panel for the ViewAllSurveys.cfm script.
Other behaviors in the panelthose that are pre-designed to page through the results of a record setare shipped with Macromedia Dreamweaver MX. These behaviors include a Record Set Navigation Bar and a Repeated Region containing dynamic data from the record set.

Page 24

In our development scenario, several modifications are made to the server behaviors to work with the survey data set. The Record Set Navigation Bar is configured to display one record at a time. The Repeated Region is edited to display the paired fields for pre- and post-survey responses. Finally, cascading style sheets (CSS), designed by the interface design specialists, are applied to the table headers and rows. The result makes it possible for instructors to compare pre- and post-survey responses.

Page 27

______________________ Alex Cuthbert has worked in educational technology for 16 years. Currently, he is a post-doctoral research engineer with the University of California Web-based Inquiry Science Environment (UC-WISE) project, a learning system for computer science and engineeringxxi. Alex received his Ph.D. in Education in Mathematics, Science & Technology from the University of California at Berkeley where he studied specialization in design teams. He is a founder and business strategist at Educational Connections, Inc., a software design company, based in Berkeley. You can contact Alex at alx@socrates.berkeley.edu Frances Himes is the Associate Vice President of Higher Education at Macromedia, in which position she manages higher education business and contributes to Macromedias eLearning product strategy. Over the course of her career her work has focused on learning object design and development, adaptive eLearning architecture and the development of contextual eLearning environments. She has also developed curriculum for teaching intercultural forms of learning, and teaching and learning with technology. She has served at the University of Arizona, as both the co-author and Project Director for the Virtual Adaptive Learning Architecture Project and as Director of Global Programs, at Western Michigan University, as Director of Research and Development for Information Technology, and at the University of Wisconsin-Eau Claire, as the Associate Director of International Education. You can contact Frances at fhimes@macromedia.com
i For more information on the Institute of Electrical and Electronics Engineers Learning Technology Standards Committee, refer to

http://ltsc.ieee.org

ii For the latest information on the LOM working group, see http://ltsc.ieee.org/wg12/index.html iii For discussion on the architecture of Learning Objects, see the Heins and Himes white paper, available at
http://www.macromedia.com/resources/elearning/whitepapers.html )
http://www.macromedia.com/resources/elearning/whitepapers.html http://www.macromedia.com/resources/elearning/objects/ http://www.adlnet.org/index.cfm?fuseaction=scormabt
v For an overview of enterprise use of Learning Objects, see Empowering Enterprise eLearning by Frances Himes and Ellen Wagner, available at:
vi Further information on the SCORM and the ADL Initiative, along with tools, utilities, and the complete SCORM document, are available at
vii For more information on the SCORM and standardization, see Making a Macromedia Flash MX Learning Object SCORM-Conformant by the ADL Academic Co-Lab staff. The Macromedia white paper is available at:

http://www.macromedia.com/resources/elearning/objects/

Page 28

viii Specifying metadata for Learning Objects in XML and creating web services to access that metadata are the topics of a separate white paper. ix There are nine base categories defined for the Learning Object Metadata (LOMv1.0) Base Schema. See the Learning Technologies Standards Committee website (endnote ii) or the white paper on specifying metadata for Learning Objects. x There are nine base categories defined for the Learning Object Metadata (LOMv1.0) Base Schema. See the Learning Technologies Standards Committee website (endnote ii) or the white paper on specifying metadata for Learning Objects. xi For the latest information on the LOM working group, see http://ltsc.ieee.org/wg12/index.html xii The development scenario, design team, and Learning Objects were created for the purpose of this paper. While the design processes presented here parallel the activities of actual design teams, they are not accounts of the practices of any specific curriculum design group. xiii The hypothetical study, design team, and Learning Objects were created for the purpose of this paper. While the design processes presented here parallel the activities of actual design teams, they are not accounts of the practices of any specific curriculum design group.
xiv The Web-based Science Inquiry Environment (WISE):
http://wise.berkeley.edu http://wise.berkeley.edu
xv The Web-based Science Inquiry Environment (WISE):
xvi To edit a ColdFusion component, you need to have ColdFusion MX running locally with the local root folder set to the same path as the testing server folder (e.g., C:\Interpub\wwwroot\cf_projects\LearnGroup\). To see the ColdFusion components, you need to open a ColdFusion page in Dreamweaver, a process described in detail in the Dreamweaver MX documentation. xvii To see live data in the workspace, select View->Live Data. You can specify parameters for the page using the Live Data Settings Dialog (View->Live Data Settings). The ability to create and test dynamic websites without having to be an experienced programmer means that a wider range of members of the curriculum design team can participate in the creation of dynamic design ideas. xviii Note that with Dreamweaver MX you have the ability to export a documents editable regions as XML and import XML into a template. These features enable a wide range of options for designing systems for specifying not just learning objectives, but other characteristics of documents. xix Note that with Dreamweaver MX you have the ability to export a documents editable regions as XML and import XML into a template. These features enable a wide range of options for designing systems for specifying not just learning objectives, but other characteristics of documents. xx The TechNotes on the Macromedia website provide useful information for development teams. Of particular interest will be the ability to create an SSH tunnel for secure authentication, a protocol used by many design teams in place of FTP. See

WORKING WITH IMAGES______________________________________ 23 Inserting an Image ____________________________________________ 23
To Insert an Image:_________________________________________________ 23
Image Properties ______________________________________________ 24 Aligning Elements _____________________________________________ 25 Resizing Images _______________________________________________ 26
To Resize an Element: ______________________________________________ 26
WORKING WITH TABLES ______________________________________ 27 Inserting a Table ______________________________________________ 27
To Insert a Table: __________________________________________________ 27
Adding Content to a Table Cell __________________________________ 28
To Add Text to a Table: _____________________________________________ 28 To Add an Image to a Table: _________________________________________ 29
Selecting Table Elements _______________________________________ 29
To Select the Entire Table: ___________________________________________ 29 To Select Rows or Columns: _________________________________________ 29 To Select One Or More Cells: ________________________________________ 29 To Select Nonadjacent Cells: _________________________________________ 30
Setting Table Properties ________________________________________ 30
To Specify Table Properties: _________________________________________ 30 To Name the Table: ________________________________________________ 30 To Select Table Layout Options: ______________________________________ 30 To Set Cell Layout: ________________________________________________ 31 To Set Table Borders:_______________________________________________ 31
Copying and Pasting Cells ______________________________________ 31
To Cut Or Copy Cells In A Table: _____________________________________ 31 To Paste Table Cells: _______________________________________________ 32 To Remove Cell Content But Leave The Cells Intact: ______________________ 32 To Copy and Paste the Contents of Cells: _______________________________ 32
Resizing Tables and Cells _______________________________________ 32
To Resize the Table: ________________________________________________ 32 To Change the Size of a Row or Column: _______________________________ 33
Changing Column Widths ______________________________________ 33

To Set the Column Width: ___________________________________________ 33
Clearing Column Widths and Row Heights ________________________ 33
To Change Widths and Heights:_______________________________________ 34
Nesting Tables ________________________________________________ 34
To Nest A Table Within A Table Cell:__________________________________ 34
Splitting and Merging Cells _____________________________________ 34
To Merge Two or More Cells In a Table:________________________________ 35 To Split a Merged Cell: _____________________________________________ 35
ABOUT DOCUMENT LOCATIONS AND PATHS___________________ 35 Absolute Paths ________________________________________________ 35 Document-Relative Paths _______________________________________ 36 Root-Relative Paths____________________________________________ 36 LINKING AND NAVIGATION ___________________________________ 37 Creating Links________________________________________________ 37 Linking to a Document _________________________________________ 38
To create links between documents:____________________________________ 38
Linking to a Named Anchor_____________________________________ 39
To Create a Named Anchor: __________________________________________ 39 To Link to a Named Anchor: _________________________________________ 39
Creating an E-Mail Link _______________________________________ 40
To Create an E-Mail Link Using the Insert E-Mail Link Command:___________ 40 To Create an E-Mail Link Using the Property Inspector:____________________ 40
SITE MANAGEMENT OVERVIEW_______________________________ 40 Associating a Remote Server with a Local Site _____________________ 41
To Associate a Remote Server with an Existing Local Site: _________________ 41
Putting files on a remote server __________________________________ 43
To Put Files on a Remote Server: ______________________________________ 43
Getting Files From a Remote Server______________________________ 44
To Get Files from a Remote Server:____________________________________ 45
Systematic Planning ___________________________________________ 46
The Target Audience _______________________________________________ 47 Goals and Objectives _______________________________________________ 47
Design and Development of the Web Site __________________________ Design Principles ______________________________________________ Site Home Page _______________________________________________ Length and Text Considerations of a Web Page ____________________ Graphics and Graphic Tools ____________________________________ Conclusion ___________________________________________________
References _______________________________________________________ 51
Planning Your Site In Dreamweaver, the term site can refer either to a Web site or to a local storage location for the documents belonging to a Web site. The usual way to set up a site is to create a folder on your local disk that contains all the files for your site, and to create and edit documents within that folder. You then periodically copy those files to a Web server that allows other people to view the site. This approach is better than creating and editing files on the live Web site itself, because it allows you to test changes in the local site before making them publicly viewable, and then to make a set of changes to the live site all at once instead of one at a time. Site Structure Organizing your site carefully from the start can save you time later on. If you start creating documents without thinking about where in your folder hierarchy they should go, you may end up with a huge, unwieldy folder full of files, or with related files scattered through a half-dozen similarly named folders.

Exploring Dreamweaver

The first time you open Dreamweaver in Windows, it will offer you a choice of two workspace layouts: the Dreamweaver MX workspace, and the Dreamweaver 4 Workspace, which lays out the screen elements as floating windows. Note: Dreamweaver MX for the Macintosh allows only the floating window workspace option. Select the Dreamweaver 4 workspace if you have used Dreamweaver 4 and prefer to use a more familiar workspace; otherwise, select the Dreamweaver MX workspace. (Only check the HomeSite/Coder-Style box that appears under the MX selection if you are a Macromedia HomeSite or ColdFusion Studio user.)
The Dreamweaver MX workspace integrates its windows and other elements into one larger application window. There are three interface elements that you are likely to leave open most of the time: Panel Groups, the Document Window, and the Property inspector. The Panel Groups Panel groups are sets of related panels docked together under one heading. Two panel groups, the Document and Insert panels, appear as toolbars at the top of the Dreamweaver window.
The Document Panel Toolbar
The Document toolbar contains buttons and pop-up menus that provide various viewing options and shortcuts to common operations, such as previewing your document in a Web browser and viewing your HTML code.

The Insert Panel Toolbar

The various tabs on the Insert bar lead to more options for objects to insert. If you don't recognize the icons on the panel, let the pointer rest on each one to see a tooltip. You can also set a preference to display text labels along with the Insert panel icons. (Choose Edit > Preferences, then choose General from the category list. Change the Insert Panel option to Icons and Text.) The elements in the Insert bar are grouped under six tabs: Common, Layout, Text, Tables, Frames, Forms, Templates, Characters, Media, Head, Script, and Application. Click on each tab to switch between panels. When you click an element in the Insert panel, a dialog box may appear to request the source file, dimensions, code base, or other attributes for the element. If you would rather never be presented with this dialog box, choose Edit > Preferences, then choose General instead bypass the dialog box on a case-by-case basis, hold down the Control (Windows) or Option (Macintosh) key while you click an object. Dreamweaver inserts a placeholder for the object, or inserts the object using default values.

Additional Panel Groups

Youll see additional panel groups docked to the right side of the main Document window. Commonly-used panels include the Files panel group, which allows you to manage your files and view your local and remote Web site, and the Code panel group. Use

Dreamweavers Window menu to select panels you want to view. To expand any of the panel groups, click the expander arrow at the left of the groups name; to undock a panel group, drag the gripper at the left edge of the groups title bar.

Launcher

The Launcher bar is not displayed in the default workspace that Dreamweaver opens, but it will give you a quick and easy way to open Dreamweaver's palettes and inspectors with a single click. To display the Launcher bar, open the Edit menu and select Preferences. In the window that appears at the left, click Panels. Then check the box next to Icons: Show Icons in Panels and Launcher. You can also select which panels you do and dont want to have on the Launcher, which will appear at the bottom of the Document window. The Property Inspector The Property inspector displays the properties of the currently selected HTML element. These properties correspond to the attributes of the HTML tag or tags associated with the element. For example, when an image is selected, the Property inspector displays the width (W), height (H), source (Src), alternate text (Alt), and other information about the image. When text is selected, the Property inspector displays the paragraph format, font, size, and other information about the text.
To see how the Property inspector changes for each element, try inserting several HTML elements by Control-clicking (Windows) or Option-clicking (Macintosh) various buttons in the Object palette. Select each element in the Document window, then fill in different values for the properties and watch what happens. The Document Window The Document window displays the current document approximately as it will appear in a Web browser. To start creating a Web page in the Document window, start typing or inserting objects. The following picture shows some of the items at the bottom of the Document window that make it easy to accomplish tasks quickly in Dreamweaver.
Viewing HTML Code Viewing the code as you create your pages can be useful to beginning Web developers who want to learn more about HTML. Dreamweaver provides three different ways that you can view the HTML code for the pages you create.
Shows HTML code only for the file you are creating. Shows both Code and Design views. Shows Design view only. To view the HTML code of your page, click the Code or Code and Design button on the Document toolbar. Each generates code in real time as you add, move, and change the properties of elements in the Document window. This allows you to learn the tags, attributes, and legal attribute values for the elements in a Web page. To see how this works, try modifying as many attributes of an image as possible, keeping the Code window open and reviewing the new code as you work.

Dreamweaver does not display the BASEFONT tag (which goes in the HEAD section), although the font size should display properly in a browser. Changing the Color of Text You can change the color of selected text so that the new color overrides the text color set in Page Properties. (If no text color has been set in Page Properties, the default text color is black.)
To Change the Color of Text:
1. Select the text. 2. Choose from the following options: In the Property inspector, choose a color from the palette of browsersafe colors by clicking the color box. Choose Text > Color. The system Color Picker dialog box appears. Select a color and click OK.
To Return Text to the Default Color:
1. In the Property inspector, click the color box to open the palette of browser-safe colors. 2. Click the Erase button. About Web-Safe Colors In HTML, colors are expressed either as hexadecimal values (for example, #FF0000) or as color names (red). The colors that are common to Netscape Navigator and Microsoft Internet Explorer on both Windows and Macintosh systems when running in 256-color mode are called Web-safe. The conventional wisdom is that there are 216 common colors, and that any hexadecimal value that combines the pairs 00, 33, 66, 99, CC, or FF (RGB values 0, 51, 102, 153, 204, and 255, respectively) represents a Web-safe color.
Testing, however, reveals that there are only 212 Web-safe colors. Internet Explorer on Windows does not correctly render the colors #0033FF (0,51,255), #3300FF (51,0,255), #00FF33 (0,255,51), and #33FF00 (51,255,0). All of the color pickers in Dreamweaver use the 212-color Web-safe palette; selecting a color from the palette displays the color's hexadecimal value. While the four colors mentioned previously are not in the Dreamweaver Web-safe palette, you can edit the hexadecimal value in any color field by hand if you want to use them. To choose a color outside the Web-safe range, click the Palette button in the lower right corner of the Dreamweaver color picker to open the system color picker. The system color picker is not limited to Web-safe colors. Aligning Text and Elements Align text on the page using the Property inspector or the Text > Alignment submenu. Center any element on a page using the Text > Alignment > Center command.

To Align Text:

1. Select the text you want to align. 2. In the Property inspector, click an alignment option (Left, Right, or Center), or choose Text > Align and choose an alignment command.

To Center Elements:

1. Select the element (image, plug-in, table, or other page element) you want to center. 2. From the Text menu, select Align > Center. Note: You can align and center complete blocks of text; you cannot align or center only part of a heading or part of a paragraph.

To Select One Or More Cells:
1. Click in a cell, and drag down or across to another cell.
To Select Nonadjacent Cells:
1. Press Control (Windows) or Command (Macintosh) and click in the table to add cells, rows, or columns to the selection. Setting Table Properties The Property inspector displays table properties when a table is selected. You can also use the Format Table command to quickly apply a preset design to a selected table.
To Specify Table Properties:
1. Select the table. 2. In the Property inspector, click the expander arrow in the lower right corner to see all properties.

To ID the Table:

1. In the Table ID field, type an identifier for the table.
To Select Table Layout Options:
In the Rows and Cols fields, specify the number of rows and columns in the table. In the W and H fields, specify the width and height of the table as a number of pixels or as a percentage of the browser window. You usually don't need to set the height of a table. Use the Align field to specify how a table aligns with other elements in the same paragraph, such as text or images. Left aligns the table to the left of other elements, right aligns the table to the right of other elements, and Center centers the table. You can left-align, right-align, or center the table relative to the other elements. You can also choose the browser's default alignment. Use the Clear Row Heights and Clear Column Widths buttons to delete all table row height and column width values from the table. Use the Convert Table Widths to Pixels button to convert the table width from a percentage of the browser window to its current width in pixels. Use the Convert Table Widths to Percent button to convert the current table width from pixels to a percentage of the browser window.

To Set Cell Layout:

In the CellPad field, specify the number of pixels between the cell content and the cell boundary (or wall). In the CellSpace field, specify the number of pixels between each table cell.
When you dont explicitly assign values for cell spacing and cell padding, most browsers display the table as if cell padding were set to 1 and cell spacing were set to 2. To ensure that browsers display the table with no padding or spacing, set Cell Padding and Cell Spacing to 0.

To Set Table Borders:

In the Border field, specify the width of the table border in pixels. Most browsers display the border as a three-dimensional line. If you are using the table for page layout, specify a border value of 0. To view cell and table boundaries when the border is set to 0, choose View > Table Borders. Use the Brdr field to select a border color for the entire table. Use the Bg options to select the background image or background color for the table

Copying and Pasting Cells You can copy and paste multiple table cells at one time, preserving the cell's formatting, or you can copy and paste only the contents of the cell. Cells can be pasted at an insertion point or in place of a selection in an existing table. To paste multiple table cells, the contents of the Clipboard must be compatible with the structure of the table or the selection in the table in which the cells will be pasted.
To Cut or Copy Cells In A Table:
1. Select one or more cells in the table. To be cut or copied, the selected cells must form a rectangle.

To Paste Table Cells:

1. Choose where to paste the cells. To paste cells before or above a particular cell, click in that cell. To create new table with the pasted cells, click wherever you want the table to appear (as long you don't click inside another table).
2. Choose Edit > Paste. If you are pasting entire rows or columns into an existing table, the rows or columns are added to the table. If you are pasting an individual cell, the contents of the selected cell are replaced, as long as the Clipboard contents are compatible with the selected cell. If you are pasting outside a table, the rows, columns, or cells are used to define a new table.
To Remove Cell Content But Leave The Cells Intact:
1. Select one or more cells. 2. Choose Edit > Clear or press Delete. Note: If you select all the cells in a row or column, the row or column not just its contents is removed from the table.
To Copy and Paste the Contents of Cells:
1. Select the text and choose Edit > Copy Text Only. Only the text from the selected cells is copied onto the Clipboard. 2. Click in a single cell or elsewhere in the Document window, and choose Edit > Paste as Text. You can't paste the selection into a selection of multiple cells.
Resizing Tables and Cells You can resize the entire table or individual rows and columns. When you resize the entire table, all of the cells in the table change proportionally.

To Resize the Table:

1. Select the table.
2. Drag one of the selection handles to resize the table along that dimension. Dragging the corner handle resizes both dimensions.

To Link to a Named Anchor:
1. In the Document window, select text or an image to create a link from. 2. In the Link field of the Property inspector, type a number sign (#) and the name of the anchor. For example: To link to an anchor named "top" in the current document, type #top.
To link to an anchor named "top" in a different document in the same folder, type filename.html#top. Creating an E-Mail Link An e-mail link opens a new message window (using the mail program associated with the user's browser) when clicked. In the e-mail message window, the To: field is automatically updated with the address specified in the e-mail link.
To Create an E-Mail Link Using the Insert E-Mail Link Command:
1. In the Document window, position the insertion point where you want the e-mail link to appear, or select the text you want to appear as the e-mail link. Then do one of the following: 2. Choose Insert > Email Link, or, in the Common panel of the Insert toolbar, select Email Link .
In the Text field of the Insert E-Mail Link dialog box, type or edit the text to appear in the document as an e-mail link.
3. In the E-Mail field, type the e-mail address mail should be addressed to. 4. Press OK.
To Create an E-Mail Link Using the Property Inspector:
1. Select text, an image or an image in the Document window. 2. In the Link field of the Property inspector, type mailto: followed by an e-mail address.

Site Management Overview

Dreamweaver helps you organize the files in your local and remote sites. It allows you to easily duplicate the structure of your local site on a remote server, or to duplicate a remote Web site's structure on your local system. The relative links that you create on your local site continue to work after you transfer files to the remote site, because the structure of the two sites is identical. You create a local site in Dreamweaver by creating a local root folder for the site (or by making an existing folder into the local root folder), using the New Site command. You then associate your local site with a remote server using the Define Sites command. When you transfer files between local and remote sites, Dreamweaver maintains parallel file and folder structures between your local and remote sites. If needed folders do not yet exist in the site that the files are being transferred to, Dreamweaver automatically creates
those folders. You can also synchronize the files between your local and remote sites; Dreamweaver copies files in both directions as necessary, and optionally removes unwanted files as appropriate. Dreamweaver includes a number of features for structuring a site and transferring files to and from a remote server. To make collaborative work on a Web site easier, you can check in and check out files on the remote server; others can then see when you're working on a file and know not to edit that file at the same time. (Note, however, that Dreamweaver does not perform version control.) Associating a Remote Server with a Local Site After you've created a local site, use the Define Sites command to add or change associated remote server information and check in/check out preferences.

Dreamweaver saves your password by default. Deselect Save if you prefer to be prompted for a password each time you connect to the remote server. 8. Select appropriate firewall options for your site: Select the Use Firewall option if you are connecting to the remote server from behind a firewall. Some firewalls require use of passive FTP, which lets your local software set up the FTP connection rather than requesting the remote server to set it up. Select the Use Passive FTP option if your firewall configuration requires it. If you're not sure whether to use this option, check with your local firewall administrator. Note: To check to see if your settings are correct, click on the Test button. Dreamweaver will not upload any of your files at this time; it will only test to see if it can connect to the server with the information you have provided. Putting files on a remote server Putting files copies them from the local site to the remote site, generally without changing the file's checked out status. There are two common situations in which you use Put instead of Check In: when you're not in a collaborative environment and you aren't using the Check In/Check Out system, or when you want to put the current version of the file on the server but you're going to keep editing it. If you put a file that didn't previously exist on the remote site, and if you're using the Check In/Check Out system, the file is copied to the remote site and is then checked out to you for continued editing. Note: Do not use special characters (such as , , or ) or punctuation such as colons, slashes, or periods in the names of files you intend to put on a remote server. Many servers change these characters during upload, which causes any links to the files to break.
To Put Files on a Remote Server:
1. If the Site panel is not open, choose Window > Site to open it. 2. At the top of the Site panel, choose the desired site from the current sites list pop-up menu. 3. If you're using FTP to transfer files, you may click Connect to open a connection to the remote server, which allows you to see what's on the remote site before transferring any files. However, clicking Connect is not required; when you click Put, Dreamweaver connects automatically.
4. Select the desired files to upload. (Usually you select these in the Local pane, but you may instead select the corresponding files in the Remote pane if you prefer.) To select non-consecutive files to upload, hold down the CTRL key as you click on each file name. 5. From the Site panel, click the Put button, or choose Put from the context menu or the Site menu. If the file hasn't been saved on your local drive, a dialog box may appear (depending on your preference setting in the Site FTP panel of the Preferences dialog box), allowing you to save the file before putting it on the remote server. To save the file, click Yes; to put the previously saved version on the remote server, click No. If you choose not to save the file, any changes you've made since the last time you saved will not be put onto the remote server. However, the file remains open, so you can still save the changes after putting the file on the server if you wish. 6. To upload dependent files, click Yes; to skip them, click No. (If the remote site already contains copies of the dependent files, click No.) To avoid being asked about dependent files in future uploads, select the Don't Ask Me Again option. Note: To stop the file transfer at any time, click the Cancel button in the Status window. The transfer may not stop immediately. Dreamweaver records all FTP file transfer activity. If an error occurs when you are transferring a file using FTP, the Site FTP log can help you determine the problem. To display the log, choose Window > Results > FTP Log from the Site window (Windows) or Site > FTP Log (Macintosh). Getting Files From a Remote Server Getting files copies them from the remote site to your local site. If you're using the check in/check out system (that is, if Enable File Check In and Check Out is on), the Get command results in a read-only local copy of the file; the file remains available on the remote site for other team members to check out. If Enable File Check In and Check Out is turned off, then getting a file transfers a copy that has both read and write privileges. Note: If you're working in a collaborative environmentthat is, if others are working on the same filesthen turning off Enable File Check In and Check Out is not recommended. In particular, if other people are using the Check In/Check Out system with the site, you should use that system as well. Note that the files that are copied when you click Get are the ones selected in whichever pane of the Site window is currently active. If the Remote pane is active, then the selected

remote files are copied to the local site; if the Local pane is active, then the remote versions of the selected local files are copied to the local site.
To Get Files from a Remote Server:
1. If the Site panel is not open, choose Window > Site to open it. 2. At the top of the Site panel, choose the desired site from the current sites pop-up menu. 3. If you're using FTP to transfer files, click Connect to open a connection to the remote server. If a connection is already open (indicated by the Connect button saying Disconnect instead of Connect), skip this step. If the remote files are visible in the Remote pane from a previous connection, clicking Connect isn't required; when you click Get, Dreamweaver connects automatically. 4. Select the desired files to download. (Usually you select these in the Remote pane, but you may instead select the corresponding files in the Local pane if you prefer.) 5. Click Get, or choose Get from the context menu or the Site menu. 6. To download dependent files, click Yes; to skip them, click No. (If you already have local copies of the dependent files, click No.) To avoid being asked about dependent files in future downloads, select the Don't Ask Me Again option.
Blueprint to Develop a Great Web Site
by Michael F. Ruffini, Delaware State University
I teach courses in designing and developing Web sites. Every semester, many students come to class and think developing a Web site involves merely learning the mechanics of a Web authoring program - not so. Just like building a house, building a great Web site requires a blueprint. No one would ever think about building a house without a blueprint, or without knowing what tools to use to build the house. This article will serve as a blueprint to developing a great Web site. The Web blueprint has two components: Systematic Planning and Design and Development. The Systematic Planning and Design and Development components include the following elements: A. Systematic Planning: Web audience Goals and objectives Sketch out the Web site Select a Web authoring tool
B. Design and Development: Navigation structure Design elements Homepage and page construction Graphics
Both the Systematic Planning and Design and Development elements of the Web blueprint will be discussed using a systems approach. First, we will discuss the systematic planning component of the Web blueprint. Systematic Planning Just as planning is important in building a house, planning is also very important in developing a Web site. Planning can ensure a quality Web site, save time and make the content of the Web site easy to navigate. A systems approach to Web development is an overall plan that gives attention to all the essential elements in designing a Web site. The following questions will guide the systematic planning of your site.

misinterpretations are greatly increased. Therefore, the viewer best comprehends multiple ideas in a series of visuals, which are interpreted one at a time. Emphasis provides a means by which attention can be drawn to the important elements of a visual. Emphasis can be accomplished by using labels, arrows and contrasting color, by changing the size relationship, or by doing anything that draws the eye to the important element in the visual. Balance is a form of equilibrium within a Web page or visual. Visuals on a Web page that are out of balance are disturbing to viewers. There are two types of balance: formal and informal. Formal balance refers to a situation in which the two halves of the visual are symmetrically arranged around the vertical center of the visual. Informal balance refers to an arrangement in which the elements are not symmetrically arranged, but still appear balanced and stable. Informal balance is more difficult to achieve, but can result in more interesting visuals. Unity refers to the strength of the relationship between the elements of a visual. The elements should be tied together into a single meaningful unit. To ensure unity in a visual, place the elements very close together, overlap the elements and use a border or a background shape. Site Home Page The homepage of your Web site is where you meet and greet your site visitors. The top vertical four inches are the most valuable real estate in your Web site. This area should be the densest area in your site. The layout for designing Web pages is different from the layout for print materials. Print layout is viewed as "whole units" of information, whereas Web pages are viewed as "screens of information." When a homepage is designed using print layout, the functionality of the homepage is upside-down. Web pages designed using print layout place a large graphic on the top of the Web page to capture attention. The list of links, text content and minor graphics are below the major graphic. The result is that the navigation links and descriptive information get pushed off the bottom edge of the screen. Web layout is about designing screens of information because readers only see part of the page at any one time. A typical 17" monitor cannot show even a single letter size (8.5 x 11") page. Homepage layout should divide the page into two visual and functional zones. Zone One is the top screen of information because it is the only area sure to be visible to all users without scrolling. Zone One is denser with links, text and graphics. Zone Two has lower priority items and is visible by scrolling. As the reader descends into the Web site, the pages should be less dense with links, visual and functional complexity. This technique will not cause the readers to become distracted, and will allow them to focus on specific Web content. One appropriate design grid for all Web pages does not exist. Consistency is the key to good grid design. Experiment with various arrangements of titles, subtitles, navigation links, buttons, text and graphics. Determine the likely size of your Web page by looking at the widest table that will print on a standard letter-size page, which is 535 pixels. Most

low-resolution version of the full-sized GIF picture on the screen while downloading. This proves beneficial when downloading illustrations and pictures. JPEG images are 24-bit color ("true color") that can display millions of colors. JPEG is preferred when color is needed for detail and gives excellent results in most photographs. JPEG images also support huge compression ratios, which mean faster download speeds. In the development of a Web site, it is important that the Web designer be able to edit graphics and create animations. Two great graphic editing software programs are Microsoft's PhotoDraw and Adobe PhotoShop. Also, Macromedia's Flash is an exceptional program that enables developers to create an array of dazzling effects. In addition, a digital camera and scanner are important tools for capturing and editing graphics. Conclusion Using the Web development blueprint can help teachers and students design and develop a high-quality Web site. This approach to creating a Web site is systematic and can save time. Give the blueprint a try next time you are teaching or developing a Web site. Michael F. Ruffini is an assistant professor of Instructional Technology at Delaware State University. He teaches graduate courses in Web design and multimedia. Ruffini possesses an Ed.D. from Widener University. In addition, he is an adjunct faculty member in the Continuing Education Department at Penn State Great Valley and an IT consultant for school districts and corporations.

References

Lynch, P. J., and S. Horton. 1999. Web Style Guide: Basic Design for Creating Web Sites. New Haven, CT: Yale University Press. http://info.med.yale.edu/caim/manual/. Holzschlag, M. E. 1998. Web by Design, San Francisco, CA: Sybex. Niederst, J., and Koman, R. 2000. Web Design in a Nutshell. Sebastopol, CA: O'Reilly & Associates. Nielsen, J. 2000. Designing Web Usability. Indianapolis: New Riders Publishing