Continued from Step 8

HTML Builders – Dreamweaver.

There is still a place for software like Dreamweaver, even with the many CMS packages widely in use.

HTML (Hypertext Markup Language) is the code at the source of every web page and is what your web browser uses to interpret and display the information on the page.

When you are working with CMS, there generally isn't a need to see the underlying HTML code, most content can be compiled as if you were using MS Word, through the CMS WYSIWYG editor.

But sometimes CMS doesn't do what we need it to do and we have to go back to a regular HTML editor like Dreamweaver.

There are other software options too. The most commonplace a few years back was Microsoft FrontPage (replaced by MS Expression) and there are quite a few free packages around also. (Search for “coffee cup HTML editor” or “Firefox HTML editor plugin”)

Dreamweaver is what I would term a full-featured program, it has all of the bells and whistles that you could ever require as a web designer. As such, it is not for the absolute novice. You'll need some concept of coding pages, building links and publishing to the web, to get your way around Dreamweaver.

The product is made by Adobe and comes with pretty good support including an extensive online library of documentation and instructional videos.

It's fairly expensive too, so be sure that it's something you're going to have the time and patience to learn before you take the plunge. At the time of writing this there is a 30 day free trial period and you can download and activate the software from www.adobe.com It is compatible with Windows and Mac computers, you'll need a good chunk of disk space and plenty of memory for it to run smoothly.

Learning Dreamweaver can take a while. In more rudimentary designs you can get output from Dreamweaver fairly quickly, but it can also be used to develop extensive web based projects in ASP, PHP, DHTML etc, so learning its full range of features can take some time.

The main hurdle you'll face with Dreamweaver is in your approach to laying out the pages. HTML supports “tables” as structures for placing content into rows and columns. Tables can be created for simple formatting but can also be nested for more elaborate layouts/designs. Think about using tables to display data in MS Word and other spreadsheets, it's the same basic concept. But Dreamweaver also using something called Cascading Style Sheets (CSS). This is code that is written off the web page to determine how elements on the page are displayed. The benefit of writing the code off the page is that it can be shared between many pages, making changes to multiple page layouts much simpler, and also, it reduces the code on the page hence improves page load speed (marginally). Since the code is off the page it is also considered favorable for search engine optimization, which I'll cover in an upcoming section. Of course you can use a combination of tabular layouts and CSS in your designs, but more recently, designers have begun to favor pure CSS.

With Tabular designs it's more of a visual system. You can see the table, the rows the columns the border, and you can see the content placed within a table. You can drag table borders to stretch/shrink the layout and pretty much everything you do will be visually displayed on the page as you're working. In theory, there's no reason to work inside of raw HTML code when working with tables, you can work in Dreamwevers Design mode where everything is displayed as it would be in the web browser.

With CSS, there's a little more math involved and a little more learning. Some people take to it very quickly, whilst other people struggle to grasp its many and varied rules of implementation.

For example, positioning an image in a table is as simple as placing your cursor within the table where you want the image to appear, then dragging and dropping the image into place. With CSS, you would position the image by using software instructions (code) that tells the browser where to place the image in relation either to other elements on the page or an absolute page position. Then you might create space around the image so that text is displayed properly, which requires more CSS code. Once learned, it is definitely a superior and more versatile way to construct your pages, but it takes a while for most people to grasp.

It's worthy of note that if you choose to work with CMS software like Joomla or WordPress, you may also encounter CSS files when making changes to colors and layouts. So these are good skills to learn if you have the time and inclination.