Looking for CSS and webpage creation help

[fesworks]

I should really learn some CSS coding for my web pages... I kinda got shunned a couple episodes ago on The Webcomic Beacon for all the tables I use... also for not using "strong" tags instead of the "b" bold tags... I also use Frontpage Express....

Can anyone recommend a new webpage creation program that doesn't feel intimidating? Oh, and also could simulate PHP and CSS server script running? ... or however that stufff works so you can work on it without being online, and uploading and checking on your site if it looks right?

I tried using DreamWeaver before... I got so lost in it. I like the simplicity of Frontpage.... Though I'm sure my code is redundant, bulky, and looks like crap.

Also, I think there are CSS code sites out there... I think I was told a couple of them a while ago, but I'm curious if anyone has any recommendations.

[JM]

A nice Dreamweaver alternative is NVu. A little weird to get used to, but nice and free and nifty.
I haven't used it to it's fullest extent, so I don't know if it'll handle everything you're looking for, but it's easy to unistall if you don't like it. 

http://www.nvu.com/

[tickyhead]

I've always been a fan of the idea that "it's not the program you use, it's how you use it!" I think it's better to get used to the code you're using and know what you're doing, as opposed to having a program do half the work. That way when it breaks, you at least have some idea of how to fix it.

The program I use for most all of my web design stuff is AceHTML, and only because it adds pretty colors to everything you do. (I'm not ashamed to admit that there are plenty of times I make mistakes, and having everything color-coded helps a whole lot) Other than that I use it just like I would use notepad...the only buttons I touch ever are "new," "open," "save," and "close."

As for CSS tutorials, I used to have a bunch of good ones bookmarked...before my HD died. Google is your friend, fes! Never forget it!

Also JM, if I may make a suggestion:
Your signature is all kinds of whacked out. When I click the link it takes me to http://www."http.com//godjillaproductions.deviantart.com", which is just all kinds of wrong. You may want to change the link to http://godjillaproductions.deviantart.com, but that's just a suggestion. Wonderful work on there, by the way.

[Xepher]

First off, let me explain how PHP and CSS work.

PHP is a server-side scripting language. That is, you write a script, and that script runs (like any other program) on the SERVER, and the output of that script gets sent to the visitor's browser through the net. Visitors (or their browsers) never get/see/run the actual PHP code, only the output of that code.

CSS on the other hand, is just an extention to HTML. It's code, but not a script/program that has to be run. Like HTML, it's code that basically describes how to layout/show things. All HTML/CSS gets sent, in full, to the visitor's browser, and it's up to the browser to read/combine all of it, and produce a pretty web page.

The third type of "code" involved in web design (besides server-side script, and formatting/layout code) is JavaScript. Like HTML it gets sent in full to the visitor's browser, but it actually RUNS like a program, actively doing things in the browser.

PHP (or other server-side scripting languages) can be used to generate/send anything to the browser, including images, javascript, and of course html. The xepher.net newsbox, for example, is coded in PHP... on the server side, it does a few nifty things, like checks which sites are in the rotation to have their banners displayed, gets the filenames for the various banners, and keep track of view counts. Then it sends javascript to the browser, which runs it, and that javascript tells the browser to add some HTML and CSS to the page. That html and css describe how the box looks, and what images to use for buttons, and all that normal web design stuff. The javascript ALSO does the fancy stuff, like fading to new images every short bit, and when you click on the buttons, javascript in the browser tells it just to grab the next image, and replace the current one, rather than doing the normal thing of going to a new page or link.


So, long story short, you don't need anything special to view or work with CSS on your own system, so that's good, but there's no real way to simulate PHP. You can setup a full webserver on your desktop, and run things in that, but even then, it's not the same. Especially if the PHP code is using things like database access or other things that wouldn't be available on your desktop. That said, my favorite way to work on web development is directly on the server. In linux it's trival to mount a directory (via SCP) on the local computer. That is, I can have a folder on my desktop that's actually on the server. I can open/read/edit files in there just like they were on my desktop, and the second it's saved, it's already on the server, ready to be viewed/tested. Mac has several similar utilities (being based on unix as well) but I'm not really sure what to use in windows for that. I know there are things... google found me this http://lifehacker.com/software/featured-windows-download/mount-remote-file-systems-with-netdrive-300997.php but it seems like it may or may not work these days. There's some additional suggestions in the comments there.

As for editor programs, I'm with Tickyhead here... WYSIWYG programs like FrontPage or Dreamweaver do make some things easier, but when you really get down to it, it's hard to beat human coding. Syntax highlighting HTML editors (what ticky described as "adds pretty colors") are really the way to go, but can take some getting used to before you really appreciate all their features. Quite a few of them do auto-completion and automatically close tags for you. But yes, coding things by hand does seem slower at times, but as you get better at it, you realize ways to save time/effort and automate stuff. For example, it's a royal pain to make a HUGE table with 100 lines it when you're coding by hand. In FrontPage or something, you just type in how many rows you want, and "poof" it's there. But when I code by hand, I'm usually writing PHP as well... so I just have to make one row, and tell it to loop 100 times. Not an exact example, but you get the point.

Sorry if that sounds like the grumpy-old-man answer, but if you really do want to get better at web design, it's essential to learn to do things by hand, even if you still bring in things like dreamweaver to help with certain tasks. The point is, after you learn the nuts and bolts under the hood, you'll know WHEN to use what tools, and more importantly, when not to!

[griever]

I use http://www.w3schools.com/default.asp as a reference if I forget something.  They cover html, css, and the basics of php.

I also use Dreamweaver, pretty much like Xepher said.  You can do html and css via WYSIWYG but it's so much easier (and faster) to type it out yourself.  As long as you memorize the basic structure of css, everything else is like picking off a buffet (mostly) and plugging those appropriate bits in (things to change the font-color, the size, etc).

And there's nothing wrong with tables, not really.  You're an artist first, webmaster second, and a coder third.  If you're shunned for using tables, you're in good company with thousands of other personal pages out there, probably who use Frontpage.  So my answer to whoever has an issue with your lack of coding expertise is, "Who cares?"  (Okay, that wasn't my FIRST thought but I have the censorship llama glaring at me.)

[sagebrush]

Here's a nice little intro I found: http://www.wpdfd.com/issues/70/css_from_the_ground_up/

A lot of people I know design their site in Photoshop first to figure out the layout and colors.  Then they go back and figure out how to code it later.  If all else fails you can post that image and ask "HOW DO I DO THIS???"

[fesworks]

I also use Dreamweaver, pretty much like Xepher said.  You can do html and css via WYSIWYG but it's so much easier (and faster) to type it out yourself.

You over estimate my remembering abilities I don;t even fully know HTML, asside from the basics... and even then it's, apparently, outdated stuff like the "to the point, and specifically what I need, and shorter to type < b> tag" instead of stupid "< strong>"... peh.. also, I think I heard that "< center>" is also not obsolete.... I use that bastard ALL the time. Next thing you know, "< br>" will be gone or something :/

ANYway, this is all good information, thanks! I'll look these over as I can!

[Paige Forsyth]

Hmmmm... Honestly, I know it's getting said a lot but; Dreamweaver is very good. I would've thought it'd be suitable for you as you said you're not that experienced in this kind of thing. Dreamweaver helps you finish tags and has convenient validation buttons and the likes.

[Miluette]

Almost every one of my sites show up incredibly screwed up in Dreamweaver, even though they're fine. So, I only use it to preview my stuff once I've got my design finished but not uploaded... I suppose it's a lot better for people just getting started with html, since you likely won't run the risk of doing something way complex or weird, but DW has done some pretty messed-up stuff to me and my friends when our sites actually functioned well after uploading.

[Xepher]

The key really is this... if you start from the ground up with dreamweaver, it's great. However, if you try and mix hand-coded stuff with it (or any other WYSIWYG editor) you're gonna have problems. :-)

[Miluette]

Like my wacky unordered list dropdown menu code that I nabbed from someone else! It's totally screwed in DW. But it works fine.
(That code is nuts, and I'd like to find whoever wrote it and asked how they came up with it. e_e!)

[Databits]

Right, I'd also recommend that if you're going with JS of any sort, use a framework like jQuery or Prototype. For two reasons actually. One, it makes writing custom things across browsers a hell of a lot easier (a big issue in JS), and for two there's a crap ton of additions you can get to do multiple things (like the menus Senshuu talked about) with relative ease.

I agree with Xeph though, generally it's a good idea to avoid HTML/CSS editing software as there's been many cases that I can not only write things in a more readable form, but do things that the editor just isn't capable of doing. It's generally a better idea to learn how to do it by hand, even if you still plan on using an editor, as it can really come in handy later when that software fails.

As for testing things on your machine, it's certainly possible to set up your desktop with everything you need. Perl, PHP, Apache 1.3/2.0/2.2, MySQL, etc... all can be set up to run on Windows. But the problem you face there is not so much as setting them up (some things like Apache and MySQL are actually REALLY easy to set up on Windows) but learning how to set up what you need (I.E. creating databases, granting access, etc...)

I just work directly on the server using VIM in most cases for anything (in combination with screen). That way I can make a single connection, open multiple files, and have instant results with little headaches (well that and I've got root access on the machine I do most of my work on, so when I run into a problem I can check logs and diagnose exactly what broke and why).