A few people starting out in webdesign have asked for help with websites that they have created in Dreamweaver. It's difficult for people with a bit of experience to help the Dreamweaver users - since there is a good chance that they don't have it installed themselves.
So I thought I'd write a thread which explains some of these issues and the reasons behind then.
Why should I use Dreamweaver?
Dreamweaver at first seems to be the best way to go. Most of us would use Microsoft Word or some other word processor to write a letter. We wouldn't use notepad or wordpad that come with windows - because they are pretty shit. We want to visually see the website we are making, and if this is your first attempt to make a website you can get the software and set off creating your pages.
Everything seems to be going well until you ask for help on a forum and receive a load of flames from people who tell you that you're using the wrong software and should use notepad. It doesn't seem to make any sense that people are saying that to you, you just want to quickly make your site and be done.
Why shouldn't I use Dreamweaver/Frontpage/ProductX
There are lots of reasons peope will suggest without really giving you a real answer, mainly "it's shit" or "it's not the proper way to go". But that doesn't help you. You just want your website done ASAP.
But for this I'd like to give you an example:
The company I work for has their website which contains over 100 pages. This site was created for us by a "Graphic Design Company" and thousands of pounds paid for it. The finished result looks OK, we've got all of our content and images on there, links, and everything appears to be fine.
The problem now, 4 years on, is that the bosses want to change parts of the website and they want me to do it to save money. They only want to change the logo at the top of the page - not too have an entire new website. The problem is though that because we have 100 pages, it requires around 100 html files to be edited. 1 at a time. And if we want to change 2 or 3 things per page, thats now becoming 200 or 300 page edits in various places.
It gets so difficult to manage that you give up - and start again with your website.
Why is this? Why not just use Dreamweaver to update the site? Well we could, but as many of your have found out - Dreamweaver doesn't always do what you click it to do. It may screw the page layout up, or move things about that you don't want.
Enter CSS - Cascading Style Sheets
It all sounds a bit complicated - but it is so much simpler that using Dreamweaver. It just costs you some time and effort to begin with to learn what all of these weird commands are and how it all works.
The basic idea of HTML and CSS is this.
Each of your HTML pages (1,2 5, 10, 100, 1 million of them) reference a single file called style.css. This file contains ALL of the style and layout information for your site. It dictates the colours of the text, backgrounds, if a box floats to the left or to the right, the width and height of a box, the size of text. Everthing.
You'd have these files for example:
index.html
contact.html
games.html
pictures.html
style.css
The HTML files just have pure content and the markup which gives names (class and ID) to various parts of your HTML and helps to identify them.
So to recap - HTML is for content, and CSS is for styles. Mixing them all up together in 1 document makes it hard to make changes later (since you have to edit every page)
Starting out with the basics of CSS
So You could make a header, content and footer section for your site and name them accordingly.
Example of a HTML page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id='header'>Welcome to My site!</div>
<div id='content'>Here is the main content for this page</div>
<div id='footer'>Copyright Me 2007</div>
</body>
</html>
Once each part of your HTML has an id or a class name, you can then use CSS to make each section of your site looks and how it is positioned.
Example of the CSS file
#header {
color: red;
font-size: 36px;
background-color: blue;
}
#content {
color: gray;
font-size: 12px;
border: 1px solid green;
padding-left: 50px;
}
#footer {
text-align: center;
background-color: yellow;
}
Now the layout of the CSS above might seem strange, but the attributes for each #section are simple to read. Color, font size, background colour, padding etc - are all quite obvious.
Since you only have 1 CSS file that is linked to all of your pages - 1 edit to your CSS file will update every single page in an instant. You can also include background images - such as your header logo. 1 Change to the CSS, and your new logo is updated on your entire site.
You could make those 4 lines of code within the <body> </body> tags look simply amazing with images and colors.
HTML and CSS alone doesn't solve the problem of updating your website and copy/pasting code. This is where a PHP can help you, you can then include a header and footer pages into each document so that you never repeat any code - which I might write a guide on later.
Some websites which demonstrate CSS
The most famous of these is the CSS Zen Garden
They have 100's of different styles, some absolutely amazing ones. They look very cool and have lots of graphics. The point of this though, is that the HTML for every single one of these pages is exactly the same apart from 1 line - the CSS file that they link too.
If you open 2 or 3 of the different designs and view the source code - you'll see that the HTML is exactly the same. Without a stylesheet it is extremely boring, white pages, black text, not even a font is used. However when one of the stylesheets is used - the appearance changes massively, so dramatically its hard to believe that it's all be done with just a CSS file.
This also adds another benefit which is that anyone who is using the internet with disabilities (i.e. they are blind and they have some software which reads out of the words in a computer voice to them) can choose to ignore the style and instead just view/hear your content. With a Dreamweaver website, the software would be reading out all of your style information rather than the content.
It also means other devices such as mobile phones can either ignore the style so that it fits onto their screen, or you can even make a stylesheet which works just for mobile devices. You can make a stylesheet for printing which hides stuff that you wouldn't really want printed - like menu links and adverts.
CSS really is the powerfull and flexible way to work. But better than that, people can actually help you. Because its simple and understood by many people - anyone with CSS knowledge can take one look at your website and tell you where you are going wrong or how to do something.
Personally I would much rather help someone who is using CSS - because I'm helping them to help themselves. Trying to fix someones dreamweaver site is annoying to me, because there are better/quicker/easier ways to achieve what they want - and therefore its a waste of my time - because eventually that user will progress to CSS design themselves. No frames, no software applications, or specific code which nobody apart from Dreamweaver or Frontpage understands.
I've used Frontpage and Dreamweaver since they were first launched no the market - it was my gateway to webdesign. But I spent hours and hours and hours clicking around trying to make my site in a way that I wanted - but the software wouldn't let me. As a wannabie web developer I was restricted to what software could and couldn't do. All that time I wasted until I discovered CSS, and I threw out what I thought I knew and started again.
Tips
So I thought I'd write a thread which explains some of these issues and the reasons behind then.
Why should I use Dreamweaver?
Dreamweaver at first seems to be the best way to go. Most of us would use Microsoft Word or some other word processor to write a letter. We wouldn't use notepad or wordpad that come with windows - because they are pretty shit. We want to visually see the website we are making, and if this is your first attempt to make a website you can get the software and set off creating your pages.
Everything seems to be going well until you ask for help on a forum and receive a load of flames from people who tell you that you're using the wrong software and should use notepad. It doesn't seem to make any sense that people are saying that to you, you just want to quickly make your site and be done.
Why shouldn't I use Dreamweaver/Frontpage/ProductX
There are lots of reasons peope will suggest without really giving you a real answer, mainly "it's shit" or "it's not the proper way to go". But that doesn't help you. You just want your website done ASAP.
But for this I'd like to give you an example:
The company I work for has their website which contains over 100 pages. This site was created for us by a "Graphic Design Company" and thousands of pounds paid for it. The finished result looks OK, we've got all of our content and images on there, links, and everything appears to be fine.
The problem now, 4 years on, is that the bosses want to change parts of the website and they want me to do it to save money. They only want to change the logo at the top of the page - not too have an entire new website. The problem is though that because we have 100 pages, it requires around 100 html files to be edited. 1 at a time. And if we want to change 2 or 3 things per page, thats now becoming 200 or 300 page edits in various places.
It gets so difficult to manage that you give up - and start again with your website.
Why is this? Why not just use Dreamweaver to update the site? Well we could, but as many of your have found out - Dreamweaver doesn't always do what you click it to do. It may screw the page layout up, or move things about that you don't want.
Enter CSS - Cascading Style Sheets
It all sounds a bit complicated - but it is so much simpler that using Dreamweaver. It just costs you some time and effort to begin with to learn what all of these weird commands are and how it all works.
The basic idea of HTML and CSS is this.
Each of your HTML pages (1,2 5, 10, 100, 1 million of them) reference a single file called style.css. This file contains ALL of the style and layout information for your site. It dictates the colours of the text, backgrounds, if a box floats to the left or to the right, the width and height of a box, the size of text. Everthing.
You'd have these files for example:
index.html
contact.html
games.html
pictures.html
style.css
The HTML files just have pure content and the markup which gives names (class and ID) to various parts of your HTML and helps to identify them.
So to recap - HTML is for content, and CSS is for styles. Mixing them all up together in 1 document makes it hard to make changes later (since you have to edit every page)
Starting out with the basics of CSS
So You could make a header, content and footer section for your site and name them accordingly.
Example of a HTML page:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<div id='header'>Welcome to My site!</div>
<div id='content'>Here is the main content for this page</div>
<div id='footer'>Copyright Me 2007</div>
</body>
</html>
Once each part of your HTML has an id or a class name, you can then use CSS to make each section of your site looks and how it is positioned.
Example of the CSS file
#header {
color: red;
font-size: 36px;
background-color: blue;
}
#content {
color: gray;
font-size: 12px;
border: 1px solid green;
padding-left: 50px;
}
#footer {
text-align: center;
background-color: yellow;
}
Now the layout of the CSS above might seem strange, but the attributes for each #section are simple to read. Color, font size, background colour, padding etc - are all quite obvious.
Since you only have 1 CSS file that is linked to all of your pages - 1 edit to your CSS file will update every single page in an instant. You can also include background images - such as your header logo. 1 Change to the CSS, and your new logo is updated on your entire site.
You could make those 4 lines of code within the <body> </body> tags look simply amazing with images and colors.
HTML and CSS alone doesn't solve the problem of updating your website and copy/pasting code. This is where a PHP can help you, you can then include a header and footer pages into each document so that you never repeat any code - which I might write a guide on later.
Some websites which demonstrate CSS
The most famous of these is the CSS Zen Garden
They have 100's of different styles, some absolutely amazing ones. They look very cool and have lots of graphics. The point of this though, is that the HTML for every single one of these pages is exactly the same apart from 1 line - the CSS file that they link too.
If you open 2 or 3 of the different designs and view the source code - you'll see that the HTML is exactly the same. Without a stylesheet it is extremely boring, white pages, black text, not even a font is used. However when one of the stylesheets is used - the appearance changes massively, so dramatically its hard to believe that it's all be done with just a CSS file.
This also adds another benefit which is that anyone who is using the internet with disabilities (i.e. they are blind and they have some software which reads out of the words in a computer voice to them) can choose to ignore the style and instead just view/hear your content. With a Dreamweaver website, the software would be reading out all of your style information rather than the content.
It also means other devices such as mobile phones can either ignore the style so that it fits onto their screen, or you can even make a stylesheet which works just for mobile devices. You can make a stylesheet for printing which hides stuff that you wouldn't really want printed - like menu links and adverts.
CSS really is the powerfull and flexible way to work. But better than that, people can actually help you. Because its simple and understood by many people - anyone with CSS knowledge can take one look at your website and tell you where you are going wrong or how to do something.
Personally I would much rather help someone who is using CSS - because I'm helping them to help themselves. Trying to fix someones dreamweaver site is annoying to me, because there are better/quicker/easier ways to achieve what they want - and therefore its a waste of my time - because eventually that user will progress to CSS design themselves. No frames, no software applications, or specific code which nobody apart from Dreamweaver or Frontpage understands.
I've used Frontpage and Dreamweaver since they were first launched no the market - it was my gateway to webdesign. But I spent hours and hours and hours clicking around trying to make my site in a way that I wanted - but the software wouldn't let me. As a wannabie web developer I was restricted to what software could and couldn't do. All that time I wasted until I discovered CSS, and I threw out what I thought I knew and started again.
Tips
- Use Firefox for developing your sites
- Get the WebDeveloper extension which can help you work out why things aren't working as expected
- Check your sites in Internet Explorer, Opera andother browsers/devices to make sure they all look the same (they won't, since IE generally does things differently - and this is why so many webdevs hate its guts).
- Google for CSS design, templates, layouts, tricks. There is so much stuff on the net documented about this compared to Dreamweaver or Frontpage. The help is out there and you can easily teach yourself with some time and patience.
- One step at a time, take it easy and try and soak up what you are doing. Don't copy and paste other peopels stuff because you won't understand what you've done - and you'll probably end up breaking it later and won't be able to fix it
. In particular the CSS reference part is a good resource for beginners and experts alike 
. Maybe wanna add a linkage section to your post / future wiki 
