Getting Started > Web development workflow

Web development workflow

The Web development workflow starts with the process of defining a site's strategy or goals, progresses to design (where you work out the look and feel of a prospective site), and moves into the production or development phase (where the site is built and pages are coded); the site is tested for functionality and to see if it meets its defined objectives, and then the site is published. Many developers 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 Web sites, the Using Dreamweaver documentation is divided into broad sections that model this standard approach to Web development—site planning, design, development, testing, and publishing and maintenance.

 
Site Planning

Planning and organizing your site carefully from the start can save you time later on. Organizing your site includes much more than determining where the files will go: site planning often involves examining site requirements, audience profiles, and site goals. Additionally, you should consider technical requirements such as user access, and browser, plugin or download restrictions.

Once you've organized your information and determined an operating structure, you begin creating your site.

	Determine what strategy to employ and user issues to consider as you plan your site. See Planning overview.
	Use Dreamweaver's site map to set up your site's organizational structure. In Dreamweaver's Site window you can easily add, delete, and rename files and folders to change the organization as you need. See Site management and collaboration overview.

If you work on a Web Development team, you may also be interested in these topics:

	Set up systems that will prevent team members from overwriting files; see Setting up the Check In/Check Out system.
	Use Design Notes to communicate with Web team members; see Saving file information in Design Notes.

 
Designing Web pages

Most 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.

	Create HTML documents in Dreamweaver, easily add page title, or background color. See Document setup overview.
	Dreamweaver's Layout view and layout tools let you quickly design Web pages by drawing and then rearranging the page structure. See Layout overview.
	Use Dreamweaver's Objects panel to design and quickly add tables, create frame documents, design forms, and work with layers. See Tables overview, Frames overview, Layers overview, and Forms overview.

 
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.

	The Assets panel lets you easily organize the assets in a site; you can then drag most assets directly from the Assets panel into a Dreamweaver document. See Asset management overview.
	Type directly in a Dreamweaver document, or import text from other documents, then format the text using Dreamweaver's Property inspector, or HTML Styles panel. You can also easily create your own Cascading Style Sheets. See Formatting text overview.
	Insert images, including rollover images, image maps, and Fireworks sliced images. Use alignment tools to position images in a page. See Dreamweaver and Fireworks overview, Images overview and Dreamweaver and Fireworks overview.
	Insert other types of media in a Web page, such as Flash, Shockwave, and QuickTime movies, sound, and applets. SeeInserting media overview.
	Add content in the Dreamweaver code editor: Use Dreamweaver's Code view or Code inspector to write your own HTML or JavaScript code. See Editing HTML overview.
	With Dreamweaver you can create standard HTML links, including anchor links and e-mail links, or easily set up graphical navigation systems, such as jump menus and navigation bars. SeeLinking and navigation overview.
	Dreamweaver templates and library files let you easily apply reusable content in your site. You can create new pages from the template, then add or change content in the editable areas. SeeTemplates and libraries overview.

 
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, validate form data without contacting the server—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 timelines to create animations that do not require plugins, 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. SeeLayers overview.
	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. See Behaviors overview.
	Debug custom JavaScript code. See JavaScript Debugger overview.
	Use forms to allow your site visitors to enter data directly on the Web page. See Forms overview.