capter 3

WEBSITE CREATION WORKFLOW

There are many possible approaches to creating a website. In the workflow we present in this documentation, you start by defining a site’s strategy or goals. If you’re developing web applications, you have to set up servers and databases as needed. Then you design the look and feel of the site. When the design is complete, you build the site and code the pages, adding content and interactivity; then you link pages together, and test the site for functionality and to see if it meets its defined objectives. You can include dynamic pages in your site as well. At the end of the cycle, you publish the site on a server. Many evelopers also schedule periodic maintenance to ensure that the site remains current and functional.To make it easier for you to find the information you need as you develop websites, the Using Dreamweaver documentation is divided into broad sections that model this approach to web development—site planning, design, development, testing, and publishing and maintenance.

About laying out web pages

Many web design projects start with storyboards or flowcharts that are turned into sample pages.

Use Dreamweaver to create mock-up sample pages as you work toward a final design. Mock-ups usually show the design layout, site navigation, technical components, themes and color, and graphic images or other media elements, but they don’t contain the final contents of the page.

• The table tools and Layout view in Dreamweaver let you quickly design web pages by drawing and then rearranging the page structure. See Chapter 16, “Presenting Content with Tables,”

• If you want to display multiple documents at once in a web browser, you can lay out documents using frames.

About adding content

Using Dreamweaver, you can easily add a variety of content to web pages. Add assets and design elements, such as text, images, colors, movies, sound, and other forms of media.

• Type directly in a Dreamweaver document, or import text from other documents, then format the text using the Dreamweaver Property inspector, or HTML Styles panel. You can also easily create your own Cascading Style Sheets.

• Use the Assets panel to easily organize the assets in a site; you can then drag most assets directly from the Assets panel into a Dreamweaver document. See “Using the Assets panel”

• Insert images, including rollover images, image maps, and Fireworks sliced images. Use alignment tools to position images in a page. See Chapter 20, “Inserting Images,”

, “Dreamweaver Integration with Other Applications,”

• Insert other types of media in a web page, such as Flash, Shockwave, and QuickTime movies, sound, and applets., “Inserting Media,”

• Be sure to make your content accessible to people with disabilities.

About interactivity and animation

Many web pages are static, containing only text and images. Dreamweaver allows you to go beyond static pages, using interactivity and animation to capture visitors’ interest. You can give visitors feedback as they move and click, demonstrate concepts, animate page elements—in short, you can let visitors see and do more within the page.There are several ways to add interactivity and animation to your pages using Dreamweaver:

• Use behaviors to perform tasks in response to specific events, such as highlighting a button when the visitor passes the pointer over it, validating a form when the visitor clicks the Submit button, or opening a second browser window when the main page is finished loading.

• Use timelines to create animations that do not require plug-ins, ActiveX controls, or Java. Timelines use dynamic HTML to change the position of a layer or the source of an image over time or to call behavior actions automatically after the page has loaded. “Animating Layers,”

About connecting the pages on your site

Individual pages don’t make a site; you need to link your pages together, both by creating HTML links and by reusing content to give pages a common appearance.

· • With Dreamweaver you can create standard HTML links, including anchor links and e-mail links, or eas “Linking and Navigation,” on page 399.

· • Dreamweaver templates and library files let you easily apply reusable content and page designs to your site. You can create new pages based on a Dreamweaver template, then update the layout of those pages automatically when the template changes. Site Assets, Libraries, and Template

About testing and publishing your siteYour site is complete and ready for the world—but before you publish it on a server, you must testthe site. Depending on the size of the project, client specifications, and kinds of browsers that visitors will use, you may need to move your site to a staging server where it can be tested and edited. When corrections have been made, you publish the site where the public can access it. Once the site is published, establish a maintenance cycle to ensure quality, respond to user feedback, and update the site’s information.Use the following Dreamweaver features to test and publish your site:

· • To add new tags in a page or fix your code, use the Dreamweaver Reference panel to look up JavaScript, CSS and HTML code. See “Accessing language references” on page 200.

· • Use the JavaScript Debugger to help you fix JavaScript errors in your code. The debugger lets you set breakpoints in the code, then allows you to view the code as a page is debugged right in Dreamweaver. See “Using the JavaScript debugger”

· • Run browser and plug-in checks, test and fix links in your documents, and run site reports to check HTML files for common mistakes. See Chapter 28, “Testing a Site,”

· • In the Dreamweaver Site panel you’ll find many tools to help you manage your site, transfer files to and from a remote server, set up a Check In/Check Out process to prevent files from being overwritten, and synchronize the files on your local and remote sites. “Planning and Setting Up Your Site,”

About creating dynamic pages

In Dreamweaver, you can define a variety of sources of dynamic content, including recordsets extracted from databases, form parameters, and JavaBeans components. To add the dynamic content to a page, simply drag it onto the page.

You can set your page to display one record or many records at a time, display more than one page of records, add special links to move from one page of records to the next (and back), and create record counters to help users keep track of the records.

· • If you’re unfamiliar with creating web applications in Dreamweaver, learn how to use Dreamweaver to build dynamic pages., “Optimizing the Workspace for Visual Development,”, “The Dreamweaver Workflow for Dynamic Page Design,”

· Define and display dynamic content on your pages., “Storing and Retrieving Data for Your Page,” 2, “Defining Sources of Dynamic Content,” “Adding Dynamic Content to Web Pages,” “Displaying Database Records,”

· • Encapsulate application or business logic using leading-edge technologies such as ColdFusion components and web services. See Chapter 35, “Using ColdFusion Components,”, “Using Web Services,”

· • If you need more flexibility, you can create your own server behaviors and interactive forms., “Adding Custom Server Behaviors,”, “Creating Interactive Forms,”