Web Development Workflow

Step 1: Create your objectives.

Consider what you are trying to achieve with your website. For example, do you plan to supply information, sell products, advertise services or some combination of these goals?

Step 2: Define your market and website features.

Determine your target market. Research competitors and websites you admire. Define all the features you need to meet your objectives.

You may want to use: Design Extender site import tools

Step 3: Determine the tools you require to achieve your objectives.

Consider what you are trying to achieve with your website. For example, do you plan to supply information, sell products, advertise services or some combination of these goals?

You may want to learn more about: Dreamweaver extensions | Pre-built web apps

Step 4: Set up PHP.

If your web pages will need to interact with a database, submit forms or send email, you will need to write server-side code. There are various languages you can use to write server-side code but WebAssist recommends PHP as it is a popular open source language.

You may want to read this tutorial: Setting up a testing server for Windows | Mac

Step 5: Install MySQL.

Databases are a standard way of organizing and storing information you want to display on your website, as well as a way to save information users input on your website. If you need a database-driven website, WebAssist recommends installing MySQL because it is a popular open source solution that works well with PHP.

You may want to read this tutorial: Setting up a testing server for Windows | Mac

Step 6: Create your database.

It is important to architect your database properly. Educate yourself on creating relational tables and discover tools to interface with your database.

You may want our free eCommerce MySQL database.

Step 7: Define your site in Dreamweaver.

Once Dreamweaver is installed and you are ready to create your site, you should define your site, which essentially helps you create all of your main website settings. As part of this process, you should create a directory that you will save your web pages to in the web root directory on your computer (C:\xampp\htdocs on Windows; username/Applications/Mamp on Mac)

You may want to see these tutorials:
Define your site in CS4.
Define your site in CS5.

Step 8: Learn about templates and includes.

A Dreamweaver template (DWT) and/or include files are an effective way to store code that will be leveraged on multiple pages in your site. It is useful to plan for use of DWTs and/or include files early in the process so you can architect your site in the most effective manner.

You may want to read this tutorial: Creating & applying Dreamweaver templates
You may be interested in our free Dreamweaver templates or Design Extender's theming and plugin tools.

Step 9: Install and activate your WebAssist extensions.

WebAssist offers many Dreamweaver extensions that will assist you in achieving the functionality you want in your site. An extension gives you a user interface to make selections in, then writes the code for you. Extensions are useful for inexperienced website creators that do not know how to write complex code, as well as for web developers who want to expedite the process of writing code. In this step, you should purchase, download, install and activate your desired WebAssist extensions.

You may want to watch our video on downloading, installing and activating your extensions.
You may want to read these tutorials: Installing WebAssist extensions and Understanding WebAssist Activation

Step 10: Review WebAssist tutorials and samples.

The free tutorials and samples that come with your WebAssist extensions are useful in learning about the tools and discovering techniques to accomplish your objectives. Once you have reviewed these, you will be able to gauge next steps and create a timeline that lines up with your skill level.

View tutorials and other support resources.

Step 1: Develop a timeline.

Review this checklist and gain an understanding of the amount of time you can expect to complete your website. Consider how you will manage the process, particularly if clients or employees are involved.

View a printable version of this web development workflow guide.

Step 2: Register your domain name.

It is important to register your domain name (i.e. www.webassist.com) early so that you obtain exclusive rights to it. You can check availability of the domain name you want at www.1and1.com.

You may want to read this tutorial: Registering a domain

Step 3: Purchase and set up your hosting account.

For your website to be visible on the internet, your files will eventually need to be "hosted" on a web server. WebAssist recommends www.1and1.com for web hosting services.

You may want to read this tutorial: How to sign up for hosting

Step 4: Determine your online payment solution

If you choose to provide a seamless / local checkout for your customers, you typically need a SSL (secure socket layer) certificate, which your hosting provider will offer. You may or may not need a merchant account, depending on the payment gateway provider you choose. Use this tutorial to get educated on different checkout workflows and decide what is best for your website:
Tutorial on Online Payment Solutions

You may also want to view this tutorial: Secure Socket Layer (SSL) and eCart sites
You may be interested in purchasing a SSL certificate.

Step 5: Research legal requirements.

It is important to solicit legal advice regarding copyrighting your work and providing legal documents (such as Terms of Services) for your customers on your website.

Step 1: Create wireframes and compositions.

Creating flow charts, wireframes and compositions of your website are ways of laying out the information that will be presented on your website. Most web designers use Fireworks or Photoshop to create their compositions. When working with clients, compositions are a way for web designers to display the look and feel of the future website prior to building it.

Step 2: Slice and optimize your graphics.

In Photoshop and Fireworks, you can easily slice the graphics in your compositions and optimize them for your website. Most people save the optimized graphics to an image directory within the website directory.

You may want to view these tutorials: CSS Designer Starter Kit for Fireworks or Photoshop

Step 3: Produce your template with HTML and CSS.

You can use Dreamweaver's Design view, Code view and/or Live view to create HTML files and Cascading Style Sheets, which work together to display your layout in a web browser. As a general rule, HTML should handle your structure (headers, paragraphs, links, etc.) while CSS should handle your presentation (fonts, positions, backgrounds, etc.). Most web developers create a HTML page that once validated and tested, becomes the template for their site.

You may be interested in Design Extender's CSS and site-building tools.
You may want to watch our video on using your own custom DWT with Design Extender's Site Building Tools.

Step 4: Create specialized style sheets.

You can also create print style sheets to handle settings for people printing your web pages and diagnostic style sheets to help you debug issues on your website.

You may be interested in Design Extender's CSS tools.

Step 5: Create your navigation.

Your navigation should always be simple and intuitive but the larger and more complex your website, the more important it becomes to understand common practices, web standards and useful techniques.

You may be interested in Design Extender's menu tools.
You may want to view these tutorials: CSS Menus Starter Kit for Fireworks or Photoshop

Step 6: Validate your HTML and CSS.

For the sake of browser compatibility, search engine optimization and website performance, you should validate your code and ensure it meets current web standards guidelines before moving to the next step. It is also a good idea to view the web page in all the web browsers you expect your target market to use.
The World Wide Web Consortium (W3C)

Step 7: Create a DWT with editable regions, or a theme-based site.

Once your HTML and CSS are well solidified, you can create a Dreamweaver Template (.dwt file). Add editable regions in any area that will be customized on a per-page basis. For example, the body of the page will most likely be different on every page and thus, should be an editable region, while the logo will not change and does not need to be in an editable region. You can also consider moving from a DWT-based site to a theme-based site for more manageable updates and publishing to your server.

You may be interested in Design Extender's site-building tools or theming tools.
You may want to read this tutorial: Creating & applying Dreamweaver templates
You may want to watch our video on using your own custom DWT with Design Extender's Site Building Tools.

Step 8: Produce pages in site.

In Dreamweaver, create a page, based off of your template or theme, for every page in your website.

You may be interested in Design Extender's site-building tools.

Step 9: Add meta-tags and apply SEO techniques.

You will want to add titles and meta-tags to all of your pages. While this is just one portion of optimizing your website for search engines, it is best to educate yourself on search engine optimization (SEO) and use effective meta-tag techniques.

You may want to read this tutorial: The Basics of SEO

Step 10: Add textual content.

At this point, you can add all textual content to your website. Educate yourself on how to write for the web to send your message as effectively as possible for your site visitors and SEO purposes.

You may want to read this tutorial: Writing effectively for the Web

Step 11: Populate your database with content.

If you are creating a database-driven website and you architected your database in an earlier stage of the project, you can begin populating it with the data you will be displaying. For example, if you are selling products, you can begin entering your product names, descriptions and prices. As you populate your database, you may need to add more columns or more tables.

You may be interested in Design Extender's CMS tools or creating your own CMS with Data Bridge.
You may want to watch our video on How to Create a Content Management System.

Step 12: Add share buttons and social media features.

Add social media share buttons, Facebook like and commenting features or Facebook activity pods to your template or your individual pages.

You may be interested in Design Extender's social media tools.
You may want to watch our video on How to Create a Content Management System.

Step 1: Establish a database connection.

You must create a database connection in Dreamweaver prior to creating any sort of database-driven functionality.

You may be interested in Data Bridge's database tools.
You may want to read this tutorial: Creating a PHP database connection in Dreamweaver.

Step 2: Create recordsets on your database-driven pages.

A recordset is a set of data that results from a query to your database. You must create recordsets before you can begin using dynamic, database-driven data on your pages.

You may be interested in Data Bridge.

Step 3: Create bindings and repeat regions.

Bindings essentially bind data from your recordset onto your page. For example, if your recordset retrieves information from your product table, you may want to bind the product name to a certain area of the page. Repeat regions wrap around a set of data in order to repeat the same set of information for every record returned. For example, you may want to repeat the product name down the page for every product in your product table.

Step 4: Create properly validated forms.

Website forms may include: contact forms, checkout forms, newsletter subscription forms, user registration forms, search forms and many more.

You may be interested in Data Bridge's form tools.
You may want to read this tutorial: Add server validation to your web forms.

Step 5: Create emails from your website.

Website emails may include: order receipts, registration confirmations, webmaster notifications and many more.

You may be interested in Data Bridge's email tools or in PowerMessenger.
You may want to read these tutorials: Customizing eCart email receipts or Customizing form elements in your form-generated emails.

Step 6: Create Google maps.

Many people include simple Google maps on their website to display their corporate office, while others need complex database-driven maps to show off retail locations or houses for sale.

You may be interested in Design Extender's mapping tools.
You may want to watch our video on Adding a Google map to your website.
You may want to read this tutorial: Create a Google map and driving directions.

Step 7: Create catalog pages.

If your website offers products, you will want to create a search page, a page to display results and a page to show the details once a result is clicked on. Other types of websites use the search-results-details metaphor also, such as real estate sites, forums, intranets and many more.

You may be interested in Data Bridge or PowerStore.
You may want to read this tutorial eCommerce Series Overview.

Step 8: Create a user registration system.

A user registration system typically consists of registration, login, retrieve password and profile pages. Some user registration systems may also include order history, wishlists and other complex pages.

You may be interested in Data Bridge's user authentication tools or PowerStore.
You may want to read this tutorial: Double opt in registration.

Step 9: Create a content management system.

A content management system allows a webmaster, copywriter or designated person to edit portions of a website without editing the actual web pages or the database. A CMS may be as simple as a few pages on an intranet or may be a complex entity that requires the full web development process from start to finish.

You may be interested in Design Extender's CMS tools.
You may want to watch our video on How to Create a Content Management System.

Step 10: Create reporting systems.

If you need to display and/or consolidate data, such as product sales, customers or inventory, you will likely want to create a reporting system, complete with data tables and graphical charts.

You may be interested in Data Bridge's Flash chart tools or PowerStore.

Step 11: Create eCommerce pages.

If you are selling goods on your website, you will need to add commerce buttons to your product pages, as well as add a shopping cart and checkout pages. If you completed the step of setting up your merchant account and payment gateway in an earlier stage, you can now integrate your payment gateway with your website.

You may be interested in eCart, Free tools or PowerStore.
You may want to read this tutorial eCommerce Series Overview.

Step 12: Add digital download and upload functionality.

If you are offering digital goods in the form of download, or you are allowing users to upload files, you will want to add your digital download / upload functionality.

You may be interested in Data Bridge's digital file tools.
You may want to read this tutorial: Creating a Digital Download Center.

Step 13: Create site maps.

Once your pages are completed, you should create a html site map that search engines can crawl and users can browse, as well as a xml site map to submit to search engines.

You may want to read this tutorial: HTML and XML site maps for SEO.

Step 1: Upload your site to the live server.

With Dreamweaver, FTP tools or a method specified by your hosting provider, you can transfer your local files to the live server.

Step 2: Update your database connection file on the live server.

Your local database connection settings will likely differ from your live database connection settings; make sure to update your connection file when transferring your files.

Step 3: Test your live website.

Because servers can vary, it is important to re-test your website once it is live.

Step 4: Submit your website to search engines.

There are many search engines and directories you may want to submit your website to. This can improve your search engine ranking and allow people to find your site more easily.