Understanding HTML and CSS code is a good thing

When I was doing some Dreamweaver tuition recently, I was asked about implementing a CSS dropdown menu. I recommended this excellent CSS Menu from Craig Erskine which is itself a derivation of the original Suckerfish Dropdown menus on A list Apart.

However, whilst the implementation of a CSS dropdown menu is not inherently difficult, it is not always easy to understand or edit if you are used to working in WYSIWYG mode [or Design View in Dreamweaver terms]. This highlights the importance of understanding HTML and CSS code at all stages of website design. A CSS dropdown menu cannot be edited without editing the page code and you will learn more by doing so. When you need to fix a CSS problem or a HTML problem later in the process, Design View or WYSIWYG mode will often not be the best way of doing this. You really have to make an attempt to understand what is going on ‘under the hood’.

Above: Dreamweaver has several ways of viewing an HTML document but Code View is often overlooked by beginners.

Understanding the code is not too difficult if you spend some time on it. HTML is a relatively simple mark-up language and CSS has a simple syntax. However, it is sometimes difficult to persuade Dreamweaver students that understanding the code is a good thing. I don’t know why but I think it is partly because students bring their experience of editing documents in Microsoft Word [or other WYSIWYG document editor] into their Dreamweaver learning. Unfortunately, this leads to some common misconceptions and ignorance of the code is one of these.

I was lucky because my first experience of websites was to follow a tutorial on an ISP’s website where editing the code was the only way to do it [I’m talking 1998 here]. It took ages for me to create a simple page but the tutorial was a great start. Even though I tend to dip in and out of Design View and Code View when using Dreamweaver, I always appreciate the fact that I started my web career with HTML code.

So, if you are new to web design or web page editing, have a look at the code and try to understand what you see. It will be well worth it….