Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

What programs do you use to develop/create static websites?

klymr said:
Personally, I'd stick to either Espresso or Coda (strictly based on interface) for learning the basics. Dreamweaver, as mentioned before, is VERY menu heavy and often produces sloppy code. I can't speak for how the code quality is coming from the other two apps as I've never used them.
Click to expand...

I think this is a good point that you bring up.

HTML, as with most coding languages, is actually simple, clean and logical. Unfortunately all the extra/redundant menus and settings in Dreamweaver might make it more complex than it needs to be. But if you stay out of them, and focus ONLY on the code you shouldn't have a problem.

There is actually a great series that I usually recommend to people, but it completely slipped my mind until now!

http://net.tutsplus.com/videos/screencasts/slice-and-dice-that-psd/

and

http://net.tutsplus.com/videos/screencasts/converting-a-design-from-psd-to-html/
 
Switching to Coda from Dreamweaver was one of the best things I've ever done. Dreamweaver is so bloated, slow and tedious to use that I would recommend that you just avoid it altogether. It will just get in the way of your learning.

Today I use and recommend Coda to just about anyone looking for a web development app on the Mac. And for PC...well...why are you using a PC for design in the first place? :p

If you are up for learning HTML/CSS in a fun way, I would recommend you take a look at the Head First series' book on HTML/CSS. It is a very nice and friendly starting book.

Another book, which I highly recommend, is SitePoint's Build Your Own Website The Right Way Using HTML & CSS. This is also a starting book and very easy to follow along.

Lynda.com also has a title called Photoshop CS4 for the Web, which focuses on preparing graphics for the web and slicing designs. I have not seen it but you may want to take a look at it since you seem to be interested in that as well.
 
As an Amazon Associate, MacRumors earns a commission from qualifying purchases made through links in this post.
Cheers guys, some great links there regarding learning HTML/CSS and converting PSD designs to HTML/CSS.

Seems I will tackle learning HTML and CSS first and then look into/explore Dreamweaver/Coda/Espresso as Apps.
 
I just saw this thread and though I would give my input because I didn't see this option mentioned at all.

To be honest, if I were you I would get a copy of Parallels or VmWare Fusion and install Microsoft's Expression Web 3. I know HTML and CSS like the back of my hand and have both Dreamweaver CS4 and Coda installed but neither is better than Expression Web especially for static sites like what you are looking for.

Microsoft's prior attempt, Frontpage, was an absolute joke for professional work. With the Expression suite though, they went after professional designers and knocked the ball out of the park in my opinion when it comes to coding static HTML and CSS.

Sure you can code in a simple text editor, but the features in Expression Web make hand coding, testing, and previewing across various browsers far more productive. Dreamweaver has productivity features too but they just aren't implemented as well or are missing altogether. Plus it is just too bloated to work as efficiently as I would like. Where Dreamweaver excels is in site management, php, and development. Design using HTML and CSS, not so much.

Another reason I would use Expression Web over any of the others is that its design view is far more accurate than any others I've tried. With that being the case, you can code in the split view while seeing the changes in the design view without actually having to preview or refresh or anything else. With Dreamweaver for example, you have to refresh to see the changes and it's just not all that accurate anyway for certain layouts.

In the just announced DW CS5, they did finally allow you to click on elements to see the styling associated with it but it's still not part of the native design view like in Expression Web. Invalid code highlighting isn't as "native" either. In EW, you see are alerted to invalid code as you type but with Dreamweaver it isn't nearly as obvious or intuitive.

There are other little issues that I don't have the time to get to but you get the picture. Don't get me wrong though, Dreamweaver has a TON of features... far more than any other tool for web design but (and especially for static sites) Expression Web has some that it doesn't, all the ones you actually need, and they're implemented better in my opinion. It's sort of like the difference between Apple versus its competitors. ;)

As for the design and slicing, I would use Adobe Fireworks instead of Photoshop. It's ok to use Photoshop, but Fireworks was made specifically for designing web layouts and images, buttons, etc. for the web. You'll get better results and be able to work more efficiently using Fireworks.

There are other little issues as well with Photoshop like how you can't create PNG8 images which is important for IE6 compatibility among other things.

Learn HTML/CSS first by playing around with existing designs in EW3's split view. Once you have that down, learn a bit about wireframing and slicing with Fireworks and you'll be well on your way to creating sites for clients efficiently and effectively.
 
I'm probably going to kick over a hornets nest here but...


I use Dreamweaver every day to create polished, static websites and I have no problem whatsoever with the code it generates. I hand code a lot of my CSS but what's so wrong with getting a headstart by letting the PS -> DW combo knock the tedious stuff out of the way?
 
usclaneyj said:
I'm probably going to kick over a hornets nest here but...


I use Dreamweaver every day to create polished, static websites and I have no problem whatsoever with the code it generates. I hand code a lot of my CSS but what's so wrong with getting a headstart by letting the PS -> DW combo knock the tedious stuff out of the way?
Click to expand...

Nothing wrong with that. I think we're just in agreement that learning the tedious stuff is important when starting out :)
 
usclaneyj said:
I use Dreamweaver every day to create polished, static websites and I have no problem whatsoever with the code it generates. I hand code a lot of my CSS but what's so wrong with getting a headstart by letting the PS -> DW combo knock the tedious stuff out of the way?
Click to expand...

No problem with using DW, really. However, I think one should actually learn HTML/CSS before jumping into DW. Dreamweaver is a hybrid program...both design and code view and it is meant to be used in both aspects to get the most out of it. If you just export slices and html from Photoshop and import to Dreamweaver, you will end up with a bloated and perhaps even invalid code. Same if you just design the entire page with the design view in Dreamweaver. I don't think DW is meant to be used that way.
 
Indeed. I've always felt like DW gets looked at with a high level of disdain. In actuality, it's a very useful program.

I absolutely agree that a solid understanding of fundamental HTML and CSS makes any web job 10x easier. In my experience, using DW + validating your code can not only help you save time and stress during a project, it can also teach you how to problem solve the areas in which DW falls short.
 
What a fantastic thread! Totally loving the input and the professionalism that's being maintained. Too many threads like this always seem to end up as a stupid fight over this vs that.

For me, Web Design and Coding puts food on the table and other gadgets in my hands; it's what I survive on (as well as many others posters in here). EVery bit of advice on here has been spot on in my opinion, so regardless of what program you end up in, you've been given some fantastic direction.

Now, in regards to something new to throw in the equation, a direction I would love to get moving in is designing in the browser. We surf the internet in a browser, not in Photoshop. Why spend so much time designing in Photoshop when we can do a lot of the grunt-work via the browser and CSS (especially CSS3). I honestly hope that this becomes the design norm in the next short while. Therefore, I would propose that you spend your time learning how to hand code, from scratch, and really learn CSS. HTML is pretty simple to learn after a few layouts, and CSS is amazingly powerful. CSS3 is amazingly powerful AND very design oriented (shadows, rotate, gradients etc). I would highly recommend skipping out on any WYSIWYG and just dive head first into coding from scratch. The nice thing about Coda/Espresso/CSS Edit is you could honestly buy all 3 for less than the price of DW, and have money leftover to buy Transmit as well (Transmit 4 is a super slick super fast FTP client).

Sorry, I'm getting a little long-winded and it's way past my bedtime so I'm probably making confusing rambles that are better for another thread, but I wanted to chip in.

Personally, my one-two combo is Coda and CSS Edit. Lightweight, fast loading, Clips (Coda) is SO handy for speedily whipping out a site, CSS Edit X Ray/Preview and live rendering of CSS is just an indispensable tool.

It's bedtime.
 
What I would recommend is to learn html and css properly, then move on to javascript.

A good book I found which is very useful for css (also use it as a reference book) is HTML Dog: The Best Practice Guide to XHTML and CSS.

Furthermore, to give you some inspiration for css check the CSS Zen Garden
(www.csszengarden.com). You can check lots of designs on that site. It truly is beautiful.

EDIT:

By the way guys, thanks for letting me know about Coda. I used dreamweaver, and now that I've tried out Coda it looks so much easier and clean. Simple and straightforward.
 
wheezy said:
What a fantastic thread! Totally loving the input and the professionalism that's being maintained. Too many threads like this always seem to end up as a stupid fight over this vs that.
Click to expand...

I couldn't agree with you more...maybe worthy of a sticky. :cool:
 
Arganos0 said:
By the way guys, thanks for letting me know about Coda. I used dreamweaver, and now that I've tried out Coda it looks so much easier and clean. Simple and straightforward.
Click to expand...

Yep, Coda is amazing. Using it after being a long time Dreamweaver user is an awesome experience and once you switch you'll never look back.

Version 2 is just around the corner...can't...wait.
 
drmacnut said:
Hey bluetooth, here's what I would suggest:

1. Forget creating anything as technically complicated as the iwanexstudio homepage example you showed with fancy Flash rollovers, etc.

2. Use iWeb (part of the iLife suite) in concert with a MobileMe account. This is perhaps the easiest method to start with. iWeb allows you to create nice simple static site pages, and the MobileMe account gives you server space in which to put your website. Or,

3. If you are more adventurous, get an external host like hostm.com for example (which I use) and set up some server space for yourself. Then use either iWeb or Dreamweaver or RapidWeaver or any number of other page-creating apps to create the pages which you manually upload into your server space. Or,

4. Get server space (as above) and then hand code your stuff in Coda (from Panic) or something similar. This is probably the most difficult approach for a beginner in website creation.

For any of these, you'll want to use your Photoshop to get your images optimised for web use and then either incorporate them into iWeb-type pages or upload them manually (for the Coda-type approach, for example).

It almost sounds to me like you might be a photographer looking to make gallery pages, in which case I would highly recommend using Adobe's Lightroom to output some really nice gallery pages for you, which you then upload manually to your server and then supplement with your info pages created in something like iWeb.

If you want to learn a lot more about writing HTML code and how websites work, or want to learn how to use iWeb and MobileMe, try the resource I really enjoy for all kinds of how-to learning, www.lynda.com. You'll have to pay a fee (I pay for simple online-only monthly access) but it's well worth it. Another option is learning by using the apps' built-in Help files, or by reading through hundreds of text-filled pages on the internet, which although helpful, may take up quite a bit of your time.

Hope some of this helps.
Click to expand...



I don't doubt that for people, who know nothing about web design, iWeb is useful to create some pleasant-looking websites with minimal effort.

But does anybody treat iWeb seriously? It's slow, it's bloated, it is providing as much control as a plastic fork to do brain surgery.

I know Coda, I admire it, but unless you are fairly confident with code, it's not ideal. At least RapidWeaver has an extensive range - you can use it as a novice, whilst taking advantage of it if you are an advanced, even proficient user.

I also have Espresso from a bundle, but to me it seems that if I was at that level, I would just as well manage web design with a few Firefox add-ons.
 
Arganos0 said:
What I would recommend is to learn html and css properly, then move on to javascript.

A good book I found which is very useful for css (also use it as a reference book) is HTML Dog: The Best Practice Guide to XHTML and CSS.
Click to expand...

I'd agree though all my CSS/XHTML tuition is free via the web. I use DW with no issues but find myself doing more coding then ever before -- especially now with a site redesign currently on the go and 'proper' content positioning CSS to learn, not to mention adopting Strict XHTML :)

I use a very old MX version on my home mac (Graphite G4 running 9.2 :rolleyes:) and it's clean and simple to use.

By the way, I have an old legacy (CS2) version of GoLive on my mac here at work -- what a shocker that is !! Anyons still use GoLive??

Cheers
I
 
great thread

This is a great thread. I will definitely be referring back to it if/when I decide to code web pages again.

It will be handy to refer back to once Pixelmator becomes native for SnowLeopard.

Thank you everyone for the informative tips/comments.
 
Excellent thread

Hey guys I need some help furthering my knowledge of designing websites.
I already know basic html and css from www.htmldog.com (great site but after the beginner lesson it doesn't teach much)
Right now I am reading the book HTML, XHTML, and CSS by Rob Huddleston.
After I finish learning basic html and css what should I do?
Should I learn javascript, php or MY SQL.
What route should I take?
And is there really a big difference between HTML4 and HTML5 and how should I go about learning HTML5?

Thanks
 
citizenzen said:
Yes.
Click to expand...

So i should learn all of them.

Also I was looking at the w3school website and they something called developer certificates for xhtml and javascript. Are those really worth the time and money? Do they have any significance or impact?
 
psd to html

Hi, greatly appreciated for the meaningful posting. Designing website need at first to convert psd to html for creating awesome web templates as well as need to know psd image slicing & html code concept for being successful in the field.
 
I would mainly just echo what most here have said...

Learn to hand code your HTML and CSS using coda/expresso. Not only do you get cleaner code, but you actually understand what the code is doing and therefore have a much better ability to resolve problems as and when they arise - the "wall" between you and the code is one of the major drawbacks of visual design programs that code in the background like dreamweaver. If you don't know what code the code is doing, you can't fix it when it isn't doing what you want.

While designing the look of pages in PS/AI is certainly fine, I would slightly step back from the idea of just slicing up these pages and converting them as a whole to html/css - only use imported bitmap graphics when you actually need them - it's surprising what you can do graphically with the css box model without using any imported graphics at all...and your pages will render faster.

These days I tend to make a fairly rough mockup in AI and then start building the HTML/CSS fairly quickly - creating individual polished graphics in PS as and when I need them.

I also echo what someone else said about FireBug - an essential tool for debugging your own css and seeing how things work on other websites.

Once you have the HTML/CSS basics under your belt, it would be worth looking into Javascript, particularly JQuery (a javascript library) that allows you to perform animations/slideshows (among other things) and AJAX which allows you to load data from a server (update the page based on a users actions) without the browser page needing to reload.

Once you have that lot under your belt, you may or may not feel you have a requirement to learn PHP (scripting language) and MySQL (database software) - but thats probably 2/3 years away yet.
 
People still do design in PS, slice it and use image rollovers and stuff from the late 90s!?

Seriously?

Because I was under the impression that when someone says they designed a site in photoshop, it was simply the layout and MAYBE some of the icons, buttons and what not...but how many "pro" websites actually use image slices, maps and all that crap!?

maybe I misread some of the comments here, but it seems people were steering the OP that way.
 
I believe people actually go to college to learn coding. My friends here at the university that I am, who are studying Computer Engineering, they have hard times trying to learn all those codes, parameters, functions etc etc. it doesn't seem to me that Web Design (coding and such), is something you can just learn by yourself, though human brain is very capable, but for this stuff, I believe you need a lot of (expensive) great books and a huge amount of time, to be able to become at least, a good web designer
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back