How to Create a Website with Dreamweaver - SiteBuilder.wsSiteBuilder.ws

Overview

So you want to learn how to create a website with Dreamweaver? Well, if you are a web designer, or web developer it’s probably the best way to create a website. But if you are a business owner, entrepreneur or hobbyist, then you should definitely consider the article How to Create a Website with WordPress as an faster, cheaper and better alternative or 5 Reasons You Should NOT Create a Website with Dreamweaver.

This process of building a website actually requires more that Dreamweaver, and that’s a big reason I’m writing this article. You see, my goal is to help you decide what would be the best way for you to create a website. So I’ll share the web design process with you, then you can decide for yourself.

how to create a website with dreamweaver

Process of How to Create a Website with Dreamweaver

Alright, so like I said, there’s a lot to the web design process, so I’ll just outline the main steps.

Sketch Out Layout – I usually just look at some website layouts that I like, along with my goals and objectives, then I do a quick sketch of the homepage and interior page layouts.
Design Mock-Up in Photoshop – Also known as a design comp, this is a graphic representation of your website done in layers that includes the header, navigation bars, graphic elements, backgrounds, specific layout and placement, and all other visual elements. The end result is a PSD file called a comp or mock-up.
PSD-to-HTML Conversion – Also known as the production stage, this is where you map out the graphical elements for use within the html. In other words you slice and export the images from the PSD file(s). During this process you usually create the HTML and CSS in Dreamweaver based on the slices created in Photoshop. The end result is usually the homepage and an interior page with working navigation bars.
Build Your Dreamweaver Template(s) – Using Dreamweaver templates is usually the most efficient way to build and update your web pages and because of the PSD-to-HTML conversion, you already have the starting point. I will usually turn the interior page into a template, since it is the basis of many pages. For more complicated websites there are often multiple interior page layouts. Dreamweaver templates are made up of fixed and editable regions. This fixed areas are non editable are usually element that you wish to have on each page like the header, navigation bars, call-to-action, etc.
Web Pages Creation – Next you can create the individual web pages. The web pages are based on the Dreamweaver template(s) and the content is inserted into the editable regions. Typically the contents of the web pages is text, photos, videos and links. But of course there are other elements like forms, Flash or scripts like jQuery that get inserted into these pages as well.
Create Homepage – This could be done in step #5 as well. Often times there are elements like a featured area that utilizes a jQuery script (formerly Flash) to display content in an aesthetic way. Additionally, text and photos are placed according to the original comp designed in Photoshop.
Setup Navigation - Depending on how you setup your website, you may have an navigation bar that is setup as an “included” file inserted in both your home page and your template(s). That way, you just need to modify the navigation file, and it will update all across all of your web pages.
Publish Your Content – You will need web hosting that provides FTP access.Once your web pages have been created, you can publish your content to a web server to make it available on the Internet.
Test Web Pages – Once you’ve built and published your website it is important to surf through your web pages and ensure that everything is working correctly.

So, in a nutshell those are the major steps required to create a website using Dreamweaver. Of course, the exact steps vary based on your experience, preference, timing and resources.

Skills Needed

Photoshop – Intermediate to advanced skill level to create, slice and export graphic imagery.
HTML / CSS – Intermediate to advanced skill level to create the html, css and forms necessary.
Dreamweaver – Intermediate to advanced skill level to create Dreamweaver templates, content insertion, photo insertion, link building, navigation setup and publishing.
jQuery – Intermediate to advanced skills to implement necessary scripts for menus, featured sliders and miscellaneous website functionality.

Do You Know How to Create a Website with Dreamweaver?

As you see, Dreamweaver is really just a small part of creating a website. Most business owners or entrepreneurs are fooled into thinking they can learn Dreamweaver quickly and end up creating a website that actually looks good, let alone has the functionality that an effective website has.

Typically websites are built by a team of specialist who focus on their respective areas. It’s rare that an individual has all the skills necessary, Photoshop, Dreamweaver, HTML/CSS, jQuery, coding, etc. My advice is to leave Dreamweaver to the web designers or aspiring web designers. There is a better way for business owners to create their own websites. Don’t kill yourself when you can leverage some amazing tools and have a professional grade website at a fraction of the time and cost.

Author Scott Barnes (67 Posts)

The man behind SiteBuilder.ws His goal is to help you build, manage and promote your online business by leveraging Social Media and the proper web design. He provides training, consulting, resources and coaching to help your business reach its full online potential! Be sure to connect with Scott Barnes+