pageSUMMARY

A list of available website building articles and a summary of what each one covers.

Building a Website Using Dreamweaver

Website Building Articles

Set up a Site

How to create a Dreamweaver Site file, set up a local testing server and a remote FTP server for your website.

Create a Template

How to create a template document in Dreamweaver - and the best way to view it to make workflow more efficient.

WordPressDESIGN

This website focuses primarily on creating a 'static' website rather than a content managed website. However, I still use Dreamweaver when working with dynamic sites - and WordPress is my CMS of choice.

WordPress is by far the most used content management system on the planet - and if you want to dip your toe into creating database-driven websites, this is the one I'd suggest you use. In order to side-step overly complex coding, I use Toolset plugins to help me create complex functionality without worrying about how to code. I highly recommend you check them out if you want to move to WordPress development and you're concerned about PHP coding.

Find out more about Toolset here.

Create a CSS File

How and why to create a CSS (Cascading Style Sheet) document in Dreamweaver. CSS files dictate the way everything appears on a website.

Link to a CSS File

How to link a CSS document to a Dreamweaver page.

HTML Basics

A very brief introduction to HTML tags, META tags, Head Content and the code that controls editable template regions.

Set Page Margins & Background

Create the first two CSS styles - the Body and HTML styles. Set up a text sizing protocol.

Create Site Structure

How to create a website wrapper, header, menu, body content and footer DIV tags for a new website.

Create a Three Column Layout

How to create three columns across a fixed width website using Float Left.

Style Headings and Paragraph Tags

How to Style H1, H2, H3 and P tags using a CSS document and the dialogue box settings in Dreamweaver.

Style Website Links

Discover Pseudo Classes and learn to alter the way a hyperlink appears by default.

Create Breadcrumb Links

Why to use breadcrumbs links and how to style them.

Style Round Cornered DIVs #01

Slice up a Photoshop file precisely to extract the rounded corners which will be used as background images applied to H3 tags and an OL tag.

Style Round Cornered DIVs #02

Use images for the top, tile and bottom of a panel like this one and fix their positions using CSS.

Create Navigation Tabs

After selecting the most appropriate menu system (taking usability and context into account), create each navigational tab separately.

Adding a Footer

Create and style the footer content. Add a website hyperlink.

Create Editable Regions

Decide what areas you'd like to edit site-wide and create Editable Regions. These areas will be editable on site pages, but areas outside them will remain unalterable.

Name the Categories and Navigation Buttons

Name the main categories and link the top tabs to the directories containing the default index.html pages for each one.

Create a Page from a Dreamweaver Template

Once your template is complete, create a 'new page from template'. This page is only editable where there are editable regions defined.

Create a Library Item

Prepare the top navigation bar as if for the Home Page and create a Library Item from it. Duplicate and alter it for each of the other main categories.

Creating More Pages - Best Practice

Take care of all essential links, headlines, title tags etc before starting on the content of the page. You can refine them later.

Building a Website

Go to Home Page | Go to next article

Feedback required!