Dreamweaver Design

Whether you're looking to make a simple website for your family reunion or an interactive website about printer ink, Dreamweaver can help you get the job done. Dreamweaver is a web development program created by Adobe Systems. Newer versions of Dreamweaver can handle technologies such as CSS, Javascript, ASP, ColdFusion, and PHP. Dreamweaver was first released late 1997 and is currently at version 10, called CS4 which was released in September of 2008.

Official Dreamweaver Page - The official product page from Adobe.

Creating HTML Pages

Dreamweaver makes it incredibly easy for non-coders to make a good looking HTML website. It offers something that is called a WYSIWYG (What You See Is What You Get) mode which allows people to hide the HTML code and to make changes on what looks to be the website itself. This makes websites very easy to build, especially with things such as tables. While a WYSIWYG editor often generates good HTML, sometimes it gets carried away with itself and makes code that is longer than necessary.

Dreamweaver tutorial - A basic Dreamweaver tutorial that will help get you started.

Page Layouts

One area where Dreamweaver can be a huge benefit is in designing page layouts. Using Dreamweaver's WYSIWYG editor, you can make a page layout much easier than you can by hand. Dreamweaver will allow you to see your code changes live in a preview mode without having to save your file or upload it to a server. In addition dreamweaver allows you to expand, shrink, and move many website elements that would be much more difficult to modify using straight HTML code.

Dreamweaver Layout Video - A video helping to explain how to make Dreamweaver layouts. Tips are provided in the video.

Inserting Text and Picture

In Dreamweaver, inserting text is more like adding text in a word processor rather than a complicated HTML editor. Inserting pictures is even easier. Adding a picture can be done through a button click and can be resized through Dreamweaver's WYSIWYG editor rather than in the code. In addition, Dreamweaver watches to make sure your file paths are always correct, even when rearranging your file structure.

Adding Text in Dreamweaver - A quick tutorial on how to add text in Dreamweaver from the University of Florida.

Dreamweaver Support on Adding Images - How to add images from the Dreamweaver official support page.

Templates and Libraries

Dreamweaver comes prepackaged with a wide variety of templates and libraries that you can use when making a new website. Their templates offer different types of column layouts that you then can use to design your site. By using Dreamweaver's template system, you can use a single template file which is then used to make sitewide changes. Instead of making changes to hundreds of files, updating your site header or navigation is as easy as editing a single page.

Template Guide - A tutorial for creating your own templates in Dreamweaver. More suited towards older versions of Dreamweaver.

Using SSI (Server Side Includes)

Using Server Side Includes is a great way to reduce the maintenance you will have to do while updating your website. By using a server side include, you'll be able to make a single file be the navigation for your entire site. Dreamweaver is able to interpret the SSI code so that your development won't be made any more complicated.

SSI Tutorial - A Dreamweaver tutorial about how to use server side includes.

Using CSS (Cascading Style Sheets)

Dreamweaver really starts becoming beneficial when it comes to cascading style sheets. It's easy to get confused when using CSS, especially as your number of classes and IDs rise. Dreamweaver helps simplify it and is able to tell you exactly what styles are influencing what HTML elements.

CSS Tutorials - A large number of Dreamweaver tutorials, 11 of which are CSS related.

Using CSS with Dreamweaver - A guide with images explaining how to use CSS with Dreamweaver.

Testing, Uploading, and Going Live

Because Dreamweaver allows you to view your site as you're building it, testing is a cinch. Dreamweaver also provides a preview in different web browsers so you can see exactly how it will be live. Once you're ready to upload, Dreamweaver can FTP it to your server for you. Dreamweaver has a smart FTP system that only uploads when changes have been made.

Dreamweaver FTP Tutorial - A 7 part tutorial about setting up your FTP with Dreamweaver.

Popular Searches