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?

bluetooth

bluetooth

macrumors 6502a
Original poster
May 1, 2007
662
1
Toronto
I have a good understanding and handle on designing static pages in PS for websites. I can basically create the overall design/theme, site map (homepage as well as coordinating pages) but always use an external source for development and publishing.

How does one go about learning how to publish and develop websites? I am not particularly interested in intricate Flash designs at this point but rather, fairly simple, static sites with gallery page(s), info pages, a contact page etc. and perhaps a rotating image box on the homepage etc.

Ideally, what programs and "know-how" (for lack of a better term) are required to creates sites like the one listed here:

http://www.iwanexstudio.com/

Any tips, hints, links, books, software, recommendations are greatly appreciated. I am just getting started and know very little about web development/publishing, so responses are greatly appreciated to help me along in the learning process.

Thanks
 
Your example (intermediate Flash) would require a knowledge of Actionscript 3.0, HTML, CSS and XML/E4X.
This is definitely not beginner level, unless you can find someone to write the code and set up the navigation.

Dreamweaver is probably a simpler tool start with since it comes with a lot of starter templates and essentially writes the code for you. (HTML/CSS)
The upside is that Dreamweaver is extremely well integrated with Illustrator Photoshop and Flash.
 
Some Ideas For Website Creation

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.
 
Hey, thanks for the responses.

Just to be clear, I am not an amateur blogger or photographer looking for an existing, simplistic iWeb type template for a family website or basic photo gallery etc.

I am a graphic designer who currently designs polished websites in PS and then forwards the pertaining web pages to a developer/publisher who then publishes the site for the client. I would like to learn HOW to develop and publish the designs and layouts/templates that I, myself, have create in PS.

Regarding Dreamweaver, it looks like it could be a very good starting point. Thanks for the recommendation. My question is, with Dreamweaver, can you take an existing template/design created from scratch in PS and integrate it and/or publish/code it using Dreamweaver? Or, are you required to use an existing web page design/template from Dreamweaver and then only insert text and images from PS or AI?

I hope this makes things a little more clearer.

Thanks again.
 
Upon some further research, I see that these (see link listed below) are the types of websites you can create using Dreamweaver....this is exactly what I am looking to learn how to do.

I can throw these types of layouts together in PS, so Dreaweaver would allow me to publish or bring them to life, etc.?

Dreamweaver will allow you to create templates listed in this link below, correct? Again, I am interested in creating templates and designs and publishing them, not looking for existing templates although as it is part of the Dreamweaver software it could be very helpful in certain instances for certain clients.

Dreamweaver Templates

http://www.dreamweaver-templates.org/website-templates/web-templates-index.html

For the most part, are the layouts for Dreamweaver templates done in PS and then integrated into Dreamweaver for publishing?

Any links or recommends on tutorials, books, courses for learning Dreamweaver?

Thanks again...
 
As an Amazon Associate, MacRumors earns a commission from qualifying purchases made through links in this post.
I'm going to go against the flow here and not recommend Dreamweaver. Dreamweaver teaches you a lot of bad things, and from reading your posts, it seems like you are fairly serious about the coding side of a website.

Dreamweaver allows you to manual and "visual" code. If you only using the hardcoding part, Dreamweaver would be fine, but then you're wasting $100s. The problem with visually making a site is that Dreamweaver makes the code for you, which is almost always incorrect and sloppy.

In this case I recommend learning the correct, more difficult way. A program such as Espresso or Coda will force you to write code manually. Each program will then let you view what you have coded by pressing a "preview" button.

Here is an example of a project I'm working on now. After writing this code, I can then press preview, or as most people do, auto-upload to my server and see it live.

Screen%20shot%202010-04-30%20at%2010.39.45%20PM.png


Result:

Screen%20shot%202010-04-30%20at%2010.40.25%20PM.png


In reality, to make a website, you need to learn HTML/CSS. Learning how to use a program (Ie. Dreamweaver or Espresso) will be less than 1% of your learning process. If you do decide to buy a book on how to use Dreamweaver, you're wasting your money because the book will likely only teach you how to use Dreamweaver, not how to code (build) a website.

There are a lot of free online places to learn HTML/CSS:
- http://www.w3schools.com/html/html_intro.asp
- http://www.w3schools.com/css/css_intro.asp

Going through that you might be a bit confused. And at first it will be a long, boring, confusing experience but you'll get the hang of it fast. The fastest way to learn is asking someone for help on a project that you're working on. That way the can answer each question as it arises. And I have a feeling your first question may be "how do I split my photoshop design up into smaller images?". It's called "slicing".

Anyways, just PM me if you need help. Even if you go with Dreamweaver, I'm still willing to help.
 
Excellent post Nate. I for one have ever really used Dreamweaver the way it was intended to be used. I use it for a basic code editor, haha. Expensive text edit program really. I'm up against a wall here now. I just finished a class at school that was entirely devoted to teaching us Flash. The final day of class Steve Jobs came out with his "Thoughts of Flash" letter. I'm wondering if I should focus more on HTML5 instead of working on my Flash skills. Granted, both are probably important at this time.

Anyway, I agree with you, bluetooth should probably focus on an app like Espresso (I will have to give it a try also, looks great) to the coding. The interface is a lot more simple than that of Dreamweaver, and the price is better too.
 
Good Luck

In the end, hand-coding is better, although it will take you a LOT of time to do what appear to be the simplest of things if you are just starting out, as it sounds like you are, bluetooth. But as I recommended before, you should invest the time if you are truly interested in learning how to make webpages the way true professionals "publish and develop websites" (your words).

Even though you say you "have a good understanding and handle on designing static pages in PS for websites", that is a vastly different skill than actually recreating those as web codemonkey pros would do. I don't mean at all to underestimate or underappreciate your abilities in Photoshop; I am sure you are indeed a pro in that area. But what I am saying is that you will need to learn a whole new language (or two or three if you include CSS and JS perhaps) - and that may cost more time than it's worth in the end.

Ergo my point that starting out with something like iWeb or Dreamweaver is a quick way to publish content to the web without having to learn a load of code. As others have mentioned, however, (especially that great post by NathanCH), Dreamweaver and iWeb create what is in essence very "messy" code - and most people who improve in webcoding eventually move away from those kinds of apps and into something like Coda or TextMate or Espresso where one can truly practise the ART of coding.

If you have the time to really dedicate to it, go for it. If not, stick with something that helps you along the way or hire someone. As I intimated before, just slicing up a Photoshop image, or taking its layers of text and graphics, and putting them up on the Web to be compatible with all the crazy browser differences out there is neither easy nor artful.

With all due respect to snickelfritz, I would stay away from apps that simply slice and dice your PS images into Flash content. You will still have to learn about site publishing anyway, and you will also quite possibly be cutting yourself off from the future as Flash gives way to HTML5 and CSS. May as well learn HTML, CSS, JS, PHP, MySQL, or whatever else you need if you think that iWeb and Dreamwaver-like stuff is beneath you.

An excellent app for learning CSS, by the way, is CSSEdit from MacRabbit at www.macrabbit.com. With it, you can easily see the CSS that other sites have used and you can also easily experiment with your own CSS and see the changes in a preview pane. I used it when I was learning CSS for the first time (now use Coda, however).

One last thought: I was just listening to TWIT (podcast) and heard again the ad for SquareSpace. You can try it for free at www.squarespace.com/twit, and if use the coupon code "twit", you get a great deal. That also will allow you to play with some coding, as you can actually get into the CSS, JS, and even HTML and make manual changes if you like. It might be a good "half-way" point for you to start out. See the tour at http://www.squarespace.com/tour/

Good luck.
 
AppCruise

@NathanCH: AppCruise looks like it's going to be cool! Are you also going to try to make it into an iPhone OS app?
 
I always chime in and mention that CSSEdit is a great and (fun) way to learn CSS. In a nutshell for even static sites, you need a design program, an html/js editor, a CSS editor, and an FTP client. Many of the programs mentioned perform more than one of those roles. Dreamweaver, Coda and Espresso will do everything but the design if you choose to, or a more basic text editor will do the html and css. There are lots of choices here. Some people use a dedicated app for all four. I personally use Fireworks for (final) design, Dreamweaver for html editing and FTP, and CSSEdit for.... CSS. Trying to get into Espresso as an alternative to Dreamweaver, but I'm just not feeling the workflow yet. I do love MacRabbit!
 
Thanks so much everyone for all of your great insight and responses. Very much appreciated.

The consensus, or so it would seem is that I should look into learning basic, manual coding first (HTML/CSS - sounds like a good option for learning this is CSSEdit from MacRabbit) and then move onto an application such as "Espresso" which will also force me to write codes manually and then allow previews as I go along.

So does this sound like a viable plan for me? HTML > CSS (MacRabbit) > Espresso? Will this combo of Apps and knowledge allow me to write websites, take my designs from PS and fully publish?


It's not that I feel iWeb and Dreamweaver are beneath me as one poster put it, perhaps my words came across the wrong way in my post. I am just more interested in learning how to create websites from "scratch" so to speak and most importantly, be able to design site pages in PS and then integrate them into an App for publishing without design/layout limitations or having to use a mandatory template etc. If I have an incorrect understanding of these Apps and their limitations, please correct me.

I do realize that this is a vastly different skill than actually creating/designing the static PS webpages and thus, this is why I am eager to learn. In the end I think it will be a much more efficient way of freelancing if I can retain clients and offer the whole package so to speak, as oppose to sourcing parts of projects out, getting quotes etc. then relying on an external source to "finish the job". It can be a real hassle trying to coordinate everything for the client when you outsource the publishing component. I am sure after some time and once you get a handle on developing/publishing websites, you turn more profit and most importantly have total control of projects and their timelines, outcomes etc.

As an example, here is an old template designed/created in PS. It is designs such as these that I would like to learn how to develop and publish into functioning, working websites etc.

http://img411.imageshack.us/img411/450/temp2w.jpg

Any further general feedback is greatly appreciated on info suggested in this post.
 
Good Plan

Nice designs, bluetooth! I think you'll be able create these kinds of pages from scratch with little problem once you learn HTML and CSS, which I would put as the top two choices (HTML first).

As I mentioned above, I really think that www.lynda.com is an excellent resource and will speed you along much faster than trying to find the right resource on the interwebs for learning HTML (not that the latter is not possible, however, if you have a limited budget). I spend around $25 a month (I think) on Lynda and use it whenever I want to learn more about some app or other, especially difficult things like programming.

I agree that you will be able to offer a better product being able to take the process from start to finish --hey! sounds like the Apple we know and love!-- so I wish you all the best of luck in your pursuits.

aloha
 
drmacnut said:
One last thought: I was just listening to TWIT (podcast) and heard again the ad for SquareSpace. You can try it for free at www.squarespace.com/twit, and if use the coupon code "twit", you get a great deal. That also will allow you to play with some coding, as you can actually get into the CSS, JS, and even HTML and make manual changes if you like. It might be a good "half-way" point for you to start out. See the tour at http://www.squarespace.com/tour/
Click to expand...

SquareSpace is pretty great. Plus it would simplify things for him in terms of dealing with buying hosting, setting up ftp, etc.

drmacnut said:
@NathanCH: AppCruise looks like it's going to be cool! Are you also going to try to make it into an iPhone OS app?
Click to expand...

Thanks! I would like to make an iPhone app eventually, but I'll probably need to hire someone to do it since I have no idea how to code Objective C. For now, I'll just stick to the website. I have a lot of work to do :(

bluetooth said:
Thanks so much everyone for all of your great insight and responses. Very much appreciated.

The consensus, or so it would seem is that I should look into learning basic, manual coding first (HTML/CSS - sounds like a good option for learning this is CSSEdit from MacRabbit) and then move onto an application such as "Espresso" which will also force me to write codes manually and then allow previews as I go along.

So does this sound like a viable plan for me? HTML > CSS (MacRabbit) > Espresso? Will this combo of Apps and knowledge allow me to write websites, take my designs from PS and fully publish?
Click to expand...


In reality, you don't need any applications to write code and publish a website. Lots of old-school people just use TextEdit or NotePad to write code, then any ol' FTP client to upload. But they're crazy! But ya, those apps will allow you to start writing code. I've never used CSSEdit before, so I'm not sure it allows you to write html.

You may already know this, but I'll explain just incase. HTML and CSS work together and you will have to learn both (at the same time) to make a website. The HTML portion of coding is the structure, whereas the CSS is the design of that structure. For example if coding was English...

HTML: A box
CSS: Width, Height, Color, Boarder of that box.

If you didn't have the css, you would only have a box. If you didn't have the html, you would only have the design of the box. To have the box itself and the ability to change how the box looks, you need both parts.

It's not that I feel iWeb and Dreamweaver are beneath me as one poster put it, perhaps my words came across the wrong way in my post. I am just more interested in learning how to create websites from "scratch" so to speak and most importantly, be able to design site pages in PS and then integrate them into an App for publishing without design/layout limitations or having to use a mandatory template etc. If I have an incorrect understanding of these Apps and their limitations, please correct me.

I do realize that this is a vastly different skill than actually creating/designing the static PS webpages and thus, this is why I am eager to learn. In the end I think it will be a much more efficient way of freelancing if I can retain clients and offer the whole package so to speak, as oppose to sourcing parts of projects out, getting quotes etc. then relying on an external source to "finish the job". It can be a real hassle trying to coordinate everything for the client when you outsource the publishing component. I am sure after some time and once you get a handle on developing/publishing websites, you turn more profit and most importantly have total control of projects and their timelines, outcomes etc.

As an example, here are a couple of old template designs I created in PS. It is designs such as these that I would like to learn how to develop and publish into functioning, working websites etc.

http://img17.imageshack.us/img17/861/temp1jf.jpg

http://img411.imageshack.us/img411/450/temp2w.jpg

Any further general feedback is greatly appreciated on info suggested in this post.
Click to expand...

iWeb definitely wont do what you want. Dreamweaver will do what you want (it does the same as Espresso and Coda but is heavier, expensive, etc). Basically with these application you will be building a site from the ground up.

1. Designing it in Photoshop
2. Slicing it in Photoshop
3. Coding it in Dreamweaver/Espresso/Coda/TextEdit
4. Uploading to your host

Like you said, you will have complete control over the entire project and clients love that. I've been freelancing for about 4 years and almost always the client expects you know how to code, in fact it's rare that they even ask. So learning to code is something I'd almost consider mandatory nowadays. Not just because it will help you make more money, but it also helps you with designing.

Many times when I'm in photoshop I refrain for certain design elements and say, "Hmm... Can I really code that?" If the answer is no, then I don't include it in my design.

Nice designs btw. The Yukon Aboriginal one is great.
 
You can code html 'from scratch' in Dreamweaver as well. Assuming you want to use CSSEdit for your CSS, you'll still need to choose a program to code your html. Dreamweaver, Textmate, Smultron, Coda, Espresso...

Nathan has a good point about understanding how sites are written - it is hugely helpful in understanding how to design them to begin with.
 
You can technically code an HTML/CSS site strictly in TextEdit, as NathanCH pointed out. I've done that before as well. It does make it a LOT more frustrating however. The one thing that gave me a huge edge on learning CSS was installing the Firefox plugin Firebug. You can inspect and edit the HTML and CSS of the websites you are on without actually changing the initial code. Reload the page it's back to the way it was originally written.

Some great examples of the power of CSS applied to a HTML page can be found at http://www.csszengarden.com. The straight HTML page is very boring http://www.csszengarden.com/zengarden-sample.html but when CSS is applied, you get a VERY different look. The cool thing about CSS Zen Garden is everyone uses the exact same HTML code, but they have free range of editing the CSS. If you feel ambitious, give it a try yourself!
 
Sit Down with TextEdit and Lick a Bit of Chalk!

Good point there, klymr. Csszengarden.com is very cool for ideas too.

You mentioned the Firebug plugin; the Develop menu of Safari also contains a really first-class inspector, Web Inspector, that allows one to see "under the hood" of web pages.

It's the syntax colouring of good coding apps that really helps; that's why you'd be crazy, bluetooth, to try and use a plain text editor like TextEdit to code sites. It would be as pleasureable as licking a bit of chalk, in my opinion!

Here's one more app that's very helpful if you are starting out coding HTML: BBEdit from www.barebones.com. Great app! A bit on the expensive side, but very helpful with little code template dialog boxes to help you along the way. You might be able to get a free trial.

I have also tried RapidWeaver in the past, and another one called Nvu (which is completely free by the way) - both were fun for a while and very helpful, but as I said before, once I went to Coda, I never went back.

all the best
 
So just to be clear, as Nathan outlined:

1. Design web pages in Photoshop
2. Slice the web pages in Photoshop
3. Code it using either HTML or CSS stye sheet in an App such as Espresso (which I am leaning towards as Espresso hooks into CSSedit which can give great CSS websites)
http://macrabbit.com/espresso/ or other Apps such as Dreamweaver or Coda
4. Upload to your host

Sound about right?

btw, what are the basic differences/advantages/disadvantages between Espresso, Dreamweaver and Coda as those 3 have been mentioned frequently as preferred Apps in this thread...thanks again
 
Remember Bluetooth, it's not HTML or CSS, it's HTML and CSS. Remember my example about the box.

For me, I use Espresso over Coda for two reasons. The first is auto-upload upon save. I haven't used Coda for about a year, so this feature may be used by now, if so let me know! The other one, which sounds dumb, is the ability to use themes. I love coding on a black background!

Coda is really good too, I just like Espresso a bit more. I think it's small workflow differences that separate the two.

Dreamweaver is a lot different than Espresso and Coda. For me, there are two big differences.

a) Extremely heavy / expensive by comparison. Compare the below screenshot with the images of Espresso I posted earlier, or pictures of Coda from their website. Dreamweaver has about 500 menus for everything you can imagine - 499 which you'll never use!

Screen%20shot%202010-05-01%20at%207.09.12%20PM.png


b) Poor integration of FTP. For me streamlining my workflow is important, that's why I love Espresso. I only take one step when writing code. When I press "command + S" it saves, and uploads to my server.

I should say Dreamweaver isn't bad if you know what you're doing. And even if you don't know what you're doing, you may just end up with messy code (not the end of the world).

If I were you I'd try all three for a month
 
Cheers, thanks again for all the info everyone.

I came across this quick little tutorial that gives a good, basic, understanding of slicing web designs in PS and integrating them into Dreamweaver.

In case anyone else reading this is interested I have posted it below.

http://layersmagazine.com/taking-image-slicing-from-photoshop-to-dreamweaver.html

I will be looking into Dreamweaver and Espresso for Apps as well as getting a handle on basic HTML and CSS coding. I think these are some good basics to get me started.

It's great to get some sound advice as there is so much out there these days, it is a bit overwhelming as to what you think you should invest your time in, in regards to studying and learning.
 
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.

The first HTML/CSS page I worked on was a blog I put together last summer using nothing but Firebug to find the CSS elements and editing with TextEdit. I took a free template I found and edited it to my liking. This was before I knew anything about CSS, and had only a very basic HTML knowledge from my days in high school over 12 years ago. It taught me a lot that way, where as Dreamweaver does a lot of coding for you with the use of the extra menus and buttons. I tried using Dreamweaver when I first started the blog I was working on, but gave up due to the confusion. I wish I had known these other apps existed!

Again, in terms of books, this one got me through a lot of issues with my class project. I know there haven't been many book suggestions, but there are some great ones out there, as I'm sure there are some crummy ones too. Maybe we can get some other suggestions to help in the learning process.

http://www.amazon.com/HTML-XHTML-Si...=sr_1_1?ie=UTF8&s=books&qid=1272780395&sr=8-1
 
As an Amazon Associate, MacRumors earns a commission from qualifying purchases made through links in this post.
I had been using iWeb for some time and while i still like it and think it definitely has its place I got frustrated with cross browser/platform compatibility and the bloated nature of the code. I don't use Flash and I have no idea about Javascript/PHP/Asp even though I know they are extremely powerful. I've come to find you can do a TON of great work with HTML and CSS along with some slick graphics design and an eye for what looks and functions good for your visitors.

This is a good site to check out: www.westciv.com

I've been using Style Master 5 and love it. www.westciv.com/style_master It makes things easy while learning what the CSS code means. If you don't have Photoshop you can use Keynote to make some really nice graphics to use in the web page.

After a month or so of reading tutorials I've come to find the HTML/CSS route a great way to go as it really is not that difficult as it seems at first.

My workflow is often:

Keynote: for page layout/design, formatting, graphics (Photoshop if needed)

HTML via TextEdit

Style Master to style and format the HTML and content.

http://www.w3schools.com/ is a great tutorial site as someone mentioned about
 
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