Hi I am trying to learn css but can't seem to keep the code in my head. It has been sugested not to use dreamweaver to create code as it creates non semantic code, can anyone recommend another editor to help me with producing style sheets. Any help on this matter would be greatly appreciated.

don't go for those type of programs if your new to web design.

 

Download notepad 2 or use the editors BUT in code view don't use the design view. Learn css from books and websites. w3schools is the best place for all web languages and its what I use.

 

Good luck

For creating stylesheets you can try any of the plethora of CSS editors.

 

I've been demoing Stylizer lately and I think it's pretty nifty (but with a few bugs). There are tons of others (Rapid CSS, Style Master, etc) so go for the free trial offers if you can.

 

Note that these are not Dreamweaver substitutes per se and are for CSS only - you'll need to have your HTML (divs and content) laid out correctly to use them, but it's a decent option for discovering new ways to manipulate your CSS (a lot of them will list all of the options available for a particular parameter, so you can try new things).

you'll need to have your HTML (divs and content) laid out correctly to use them,

So if I understand correctly I would make my design in photoshop then slice it up and assemble the pieces using divs in dreamweaver?? if this in not the case how do I set about creating my layout?

Sorry if this sounds stupid but as you have probably gathered I just cant seem to get a handle on this.

I think I need a break down of steps.

So if I understand correctly I would make my design in photoshop then slice it up and assemble the pieces using divs in dreamweaver?? if this in not the case how do I set about creating my layout?

Sorry if this sounds stupid but as you have probably gathered I just cant seem to get a handle on this.

I think I need a break down of steps.

 

Pretty much, yeah. To use a CSS editor all you need is an HTML file with your divs and it will build the accompanying stylesheet. The HTML for this could look pretty simple:

<div id="wrapper">

<div id="header">
<img src="images/headerimage.jpg">
</div>

<div id="navmenu">
<ul>
<li>Menu Item #1</li>
<li>Menu Item #2</li>
<li>Menu Item #3</li>
</ul>
</div>

<div id="content">
<p>Your content goes here...</p>
</div>

</div>

 

That's really, really basic but all you'd need to get started with a CSS editor.

 

But... if you're still at the stage where some/all of this doesn't make much sense, I'd definitely reccommend learning to hand code first. There is no substitute for this type of learning; semantically-correct editors can come along further down the road.

Pretty much, yeah. To use a CSS editor all you need is an HTML file with your divs and it will build the accompanying stylesheet. The HTML for this could look pretty simple:

<div id="wrapper">

<div id="header">
<img src="images/headerimage.jpg">
</div>

<div id="navmenu">
<ul>
<li>Menu Item #1</li>
<li>Menu Item #2</li>
<li>Menu Item #3</li>
</ul>
</div>

<div id="content">
<p>Your content goes here...</p>
</div>

</div>

 

That's really, really basic but all you'd need to get started with a CSS editor.

 

But... if you're still at the stage where some/all of this doesn't make much sense, I'd definitely reccommend learning to hand code first. There is no substitute for this type of learning; semantically-correct editors can come along further down the road.

 

Yes but that is my problem "I just cant seem to keep the code in my head" which is why I was looking for another solution..mmmm It all seems fine when I am reading a book or viewing a tutorial then as soon as I am faced with a blank screen my mind becomes a blank.

Yes but that is my problem "I just cant seem to keep the code in my head" which is why I was looking for another solution..mmmm It all seems fine when I am reading a book or viewing a tutorial then as soon as I am faced with a blank screen my mind becomes a blank.

 

In that case you will need more than a CSS editor (your original query).

 

It takes time to learn but you will get the hang of it. The more you write the code for yourself (not with Dreamweaver) and make the same mistakes , you'll learn over time. Tutorials are great and one of the best ways to learn IMHO.

 

As an amateur wanna-be web designer, I used Microsoft FrontPage for yeeeears. I made the argument at the time that it wasn't holding me back; it was "just easier". Of course, as soon as I took the training wheels off and stopped using it, my knowledge just blossomed.

1. Design your layout in photoshop (if this is the way you want to do it)

 

2. Slice up your images

 

3. Open notepad, or notepad2 or any code editor with syntax highlighting (makes different bits of the code different colours for ease of reading) and flesh out the HTML elements of your design, by hand-coding them. You can do this in Dreamweaver's code view, but this will give you the temptation to cheat and use design view. WYSIWYG just isn't the way! My personal favourite is Homesite+ which was last seen bundled with Dreamweaver 8. But I use it as a project manager/syntax highlighter, I don't use the design tools.

 

4. Once you've got your HTML in place, start on the CSS. A really great way to do this is using the Web Developers toolbar for firefox/flock which allows you to edit the page's css and view the changes on the fly. Then you can copy and paste your css into a text file and link it to your page.

 

5. Voila...!

 

- Eris

1. Design your layout in photoshop (if this is the way you want to do it)

 

2. Slice up your images

 

3. Open notepad, or notepad2 or any code editor with syntax highlighting (makes different bits of the code different colours for ease of reading) and flesh out the HTML elements of your design, by hand-coding them. You can do this in Dreamweaver's code view, but this will give you the temptation to cheat and use design view. WYSIWYG just isn't the way! My personal favourite is Homesite+ which was last seen bundled with Dreamweaver 8. But I use it as a project manager/syntax highlighter, I don't use the design tools.

 

4. Once you've got your HTML in place, start on the CSS. A really great way to do this is using the Web Developers toolbar for firefox/flock which allows you to edit the page's css and view the changes on the fly. Then you can copy and paste your css into a text file and link it to your page.

 

5. Voila...!

 

- Eris

Thanks Eris that kinda made sense.

Download notepad 2 or use the editors BUT in code view don't use the design view. Learn css from books and websites. refer this site for basic and advanced css www.cssdog.com

 

 

Regards,

Dharma

 

 

 

 

 

 

 

 

 

 

 

 

 

Hi I am trying to learn css but can't seem to keep the code in my head. It has been sugested not to use dreamweaver to create code as it creates non semantic code, can anyone recommend another editor to help me with producing style sheets. Any help on this matter would be greatly appreciated.

Think of a webpage as a person!

 

There's two main parts to each wepage, the HTML and the CSS. People might argue that there's other elements such as Javascript and PHP and whathaveyou... but those are irrelevant for the moment.

 

HTML is the bones of your person. HTML lays out the structure, or the "skeleton" of your site. It's important to get this as correct as possible before you even start worrying about CSS. You don't want to end up with the equivalent of a deformed person with three heads, for legs, and eighteen ribcages, right?

 

Next comes the CSS. Think of this as the aesthetics of your person webpage. CSS can give your webpage the equivalent of pretty blonde hair, big blue eyes, and gorgeous clothes. There is so much you can do with CSS, and it's easy to spend hours playing around working out what looks best. (Think of it as a wardrobe! XD)

 

I hope that makes sense...

That's quite a nice analogy you've got going Rachael!

Thanks. Let's continue it!

 

All your content belongs in the <body> of your person webpage, and all your styling (CSS) belongs in the <head> of your person webpage.

 

As for the doctype (which you shouldn't leave out), that's the hat.

I am using Notepad ++ just for the HTML and the markup of my templates and usually for my CSS coding to, but sometimes Dreamweaver is really easy when making your stylesheets it has a good auto-completion tool.

Notepad ++

 

I think ErisDS meant something like this, Firebug is the perfect tool to screen your code and search for that one ting thats wrong

Firebug (Firefox add on)