close ad
 
Important WebAssist Announcement
open ad
View Menu

Web development tutorial

Web Development Workflow

Tutorial created by Anna Robinson, WebAssist

Categories: CSS, Design, Dreamweaver, Javascript, MySQL, PHP, SEO

rating

The web development workflow is a guide intended to educate you on the stages of web development, from planning through to deployment. Since the conception of WebAssist, we have re-designed our website multiple times, as well as produced numerous sites for clients. Through trial and error, we have created a successful workflow that will save you time and money.

Not all steps in the workflow will be applicable to your website. For example, if you are building a static brochure-type website, you can skip steps related to databases and commerce. As you begin the Planning Stage, review all the steps and decide which apply to your site.

arrow downPlanning and software set-up

Planning your objectives is crucial to obtaining the results you desire in the end. In this stage, you will also want to discover and purchase tools that will help you to reach your objectives in the most efficient manner. We recommend taking advantage of a user-friendly HTML editor, such as Dreamweaver, in combination with WebAssist products, to create your website. Setting up the software needed to build your website in this stage will help save you time once you begin development.

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.

arrow downBusiness Set-up

Once you are familiar with the tools you will be using to create your website, you are able to establish a timeline for the remainder of the project.You will save time if you also register your domain, set up your commerce needs and research legal requirements in this stage.

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.

arrow downDesign & Production

Creating compositions for your website allows you (or a client) to get a feel for how the website will look and how a user will navigate it. After comps are complete, you can optimize and slice your graphics, as well as create your HTML and CSS. Alternatively, you can download our free Dreamweaver templates, which will quickly accomplish many of the steps in this stage.

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.

arrow downDevelopment

Now you can add forms, maps, products, a shopping cart, checkout pages and anything else you want to achieve with your website. WebAssist extensions can vastly cut down on the time it will take you to achieve your desired functionality. Most of these tasks are optional, depending on the type of website you are creating.

If you are new to dynamic development, be sure to learn the basics first with our Database Starter Kit.

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.

arrow downQA & Deployment

It is important to test your website before you deploy it. Quality assurance typically includes: testing for broken links, browser compatibility testing, proofreading, performance testing (if you expect large amounts of traffic), security testing (for password-protected pages), transaction testing (for commerce sites), functional testing on dynamic pages and usability testing. Finally, you can deploy your website to the live server - your hosting account - and allow the world to visit your website.

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.

arrow downReviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments
rating
rating

Miguel: 10 Years, 10 Months, 1 Week, 5 Days, 14 Hours, 47 Minutes ago

Great tutorial the only thing i don't like is the 1and1 hosting recommended on this tutorial, i had so much problems with them i would never recommend this hosting provider

rating

Team WebAssist: 10 Years, 10 Months, 1 Week, 5 Days, 14 Hours, 45 Minutes ago

Thanks for the feedback! Who is your hosting provider of choice?

rating

shiela94786: 10 Years, 9 Months, 2 Days, 20 Hours, 8 Minutes ago

Awesome!! I had to learn this all on my own years ago. I would have given my right arm for guidance like this!!!

rating

Anna Robinson: 10 Years, 9 Months, 2 Days, 15 Hours, 56 Minutes ago

Thanks, shiela94786!

rating

Jonas: 5 Years, 4 Months, 3 Weeks, 3 Days, 11 Hours, 56 Minutes ago

Good guide and transparent. To make it even more clearly in the preparation stage, I propose to create a flow chart of the entire website. This can easily be done with open source software like OpenOffice (NeoOffice on the Mac). This gives you an idea of ??site-structure more visually.

rating

Anna Robinson: 10 Years, 4 Months, 3 Weeks, 3 Days, 15 Hours, 54 Minutes ago

Thanks for the feedback, jonas374655. I added flow chart to the wireframes/comp stage as I think the flow chart and wireframes go hand in hand together. If you are working with a client, it probably does make sense to manage it in the prep phase - like if you're writing a specification doc when you define the features. Anyhow, great advice and thanks again for the input!

rating

this_is_me: 10 Years, 4 Months, 3 Weeks, 2 Days, 20 Hours, 28 Minutes ago

Great and straight forward! Thanks for this very comprehensive workflow. Makes a lot of sense. I would also recommend to document the steps we take. After months we might need to look it up if we plan to expand or apply changes.
The only downside (and it has nothing to do with this tutorial) is the recommendation of Design Extender. To be more specific: The Layout Tools. They are sooo outdated, not the least hint of responsive design, html5, css3, fluid grid etc.
So, if DE could get the brush-up going, we could beat any WP, .... page ...

rating

Anna Robinson: 10 Years, 4 Months, 3 Weeks, 2 Days, 15 Hours, 37 Minutes ago

Thanks, this_is_me. Can you clarify what you mean by, "I would also recommend to document the steps we take. After months we might need to look it up if we plan to expand or apply changes." You mean, the post-launch stage?

rating

Rood's Media: 9 Years, 6 Months, 5 Days, 1 Hour, 55 Minutes ago

I am currently using 1and1 hosting and have not had a problem so far. I originally went with a small company after outgrowing my my own server and had nothing but problems. Since I am a Mac guy, I went with the company that advertised the most in Macworld. I think it can be hit and miss with any of these guys.

BPen04141619: 7 Years, 3 Months, 4 Days, 20 Hours, 13 Minutes ago

Great tutorial yes and good steps. But if you plan to develop live on the remote server with your MySQL database, then do not use 1&1 Hosting. They do not allow remote connections to their databases anymore. You have to setup a testing server on your own PC and use localhost and once developed then transfer the database to the live site. They only allow connections directly from the sites application. It was a pain, but I just installed WAMP on my Windows 10 system and it works fine. I really did like developing directly on the live site though, there are some hosts out there that allow it.

: 4 Years, 6 Months, 1 Week, 1 Day, 19 Hours, 53 Minutes ago

Very detailed instructions.

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.