First off, never rely on the interface that software like Dreamweaver offers. You need to learn to code HTML yourself. And the good news is, it’s not that difficult. HTML is one of the easiest coding languages to learn by a long shot. In fact, you could probably learn the rudimentary aspects of HTML in an afternoon. But don’t get too high on your horse after you learn to code tables and div tags, because now you’ll need to learn a little CSS.
CSS – also known as Cascading Style Sheets – is what makes the HTML look like something other than a Word document. This is actually a lot more complicated than HTML, but the basics of it are easy to understand and can transform your website into something that people will not only notice, but also be impressed by. The basics of CSS will change the size, type and color of your text, and it will set a background image or color for your page. While the more advanced CSS will actually layout your entire page and keep it looking the way it’s supposed to on everyone’s screen. This is the most important aspect of CSS.
When designing a website or webpage, you need to decide on the layout – how the content will be arranged on the screen. This is where it’s very important to learn to code HTML yourself, and have a strong understanding of CSS. Learning to do it yourself will make it so much easier – trust me!
There are a few standard layouts for the overall page. Using CSS, you can have the page centered – which is what most websites do – or you can have it start at the left of the screen and have it spread to the right. Both work well, but regardless of which you choose, you need to understand that viewers have different size monitors set to different resolutions.
A big no-no with web design is to make the page so wide that people have to scroll from left to right. So to prevent this, and to make it so 90% of the people viewing the web don’t have that issue, set the overall width of the page to about 900 – 950 pixels. This will work well with most displays and most layouts, centered or shifted to the left. Once that is decided, you move to the segments of the page.
Typically – almost 99% of the time – a webpage consists of a header, navigation, body, and footer. The header is where the branding image is displayed (the logo), and where important contact information is shown. This part of the website is what everyone sees first – but it shouldn’t be cluttered. The header can span across the entire screen, or it can be confined to a specific width.
The body contains the important information that the website is trying to convey. This body is in fact a series of sections – this is where the layout of your site becomes very important. With HTML and CSS, everything is arranged in rectangles. Because of this, you need to figure out how you want your rectangles arranged. Think of a newspaper, or better yet, look at a newspaper. It may look boring but it should give you a general idea of how to arrange columns. Of course your website won’t have to be boring like that, and if you’re creative with graphics and CSS, can be a very deceptive in its structure.
The footer goes at the bottom and can contain secondary navigation, copyright information, phone numbers to contact, miscellaneous links and whatever else that is of secondary importance.
And then there is the navigation. Website navigation can either be horizontal or vertical. This part of your website could possibly dictate your entire layout. Horizontal navigation can go into the header as basic text links, or underneath the header as a wide navigation bar. Vertical navigation typically stays on the left side of the page in a column. Using CSS and HTML unordered lists, you can design a sharp looking navigation simply and quickly. Of course using a little JavaScript and jQuery can make it look unbelievable, but that’s for another lesson.
When designing all of these portions of the site, it is vital to section them off the proper way and link them to an external style sheet. Always use an external style sheet! There’s really two ways of sectioning everything off: tables and divs. Tables sound nice but are not the way you should layout a website. Always use div tags to wrap your content and position it where it needs to go. Identify the div tags with classes or id’s, work from the outside in, and be mindful of relativity, pixel widths, margins and padding – all of which will affect cross browser compatibility, as well as other display issues.
