How do you design websites?

I am learning to design websites, and am getting pretty good at it. But it does take a lot of time to write all of the HTML.

To someone that designs websites on a daily basis, do you really code all of this stuff by hand? I have noticed programs like Dreamweaver and Expression Web. Do professional website designers use programs like these to make the job easier?

I don’t see how anyone could ever get anywhere, doing everything by hand. It takes too much time.

Edit:
One other question as well. My professor is leading us away from using frames for a number of reasons. But when you want to create the same look on every page, (header/footer/sidebar links, etc…) how can you get around this issue without using frames?

I created a template for the website, and put all the common stuff in that HTML file. Then every time I need to add a new page I copy that file, rename it, and just enter the body/content. It worked fine, until I needed to add a new link or design to the navbar. I made that design in the template.html file. All new pages now have that design, but I still have to go back and manually add the new links to 30+ HTML files that were already created.

How do I get around that?

welcome to SP! I would recommend you looking into SSI, Server Side Includes. Thouse will help you a bit since you are just beginning HTML.

As for time, it comes quicker as you learn. I use dreamweaver mainly, and I know I save 5 minutes cause I don’t need to do the Doctype through body tag part cause its auto-generated.

Thanks,

I have a copy of Visual Studio Professional it looks like it can edit HTML as well. I’m not sure how it compares to Dreamweaver.

That Server Side Include is just what I was looking for.

im not a professional webdesigner but i have designed numerous dynamic websites for organisations. I started designing since 2004. When i started I had some knowlede of html coding but these tutorials h**p://www.webthang.co.uk/goto/tutorials/tutorials.asp?cat=2 helped me a lot.

Mr358, why dont u try above tutorials n see.

Yes, I code by hand. I’m not heavy into PHP, but all of my html and CSS is entirely hand written. HTML editors like Dreamweaver are too sloppy, IMHO.

In regards to your second question, you need to use PHP includes for your main framework (header, nav, footer, etc). It’s very easy - just google for some simple tutorials and you’ll get tons of good info.

Yea I looked into PHP already and found an easier way to do it. But from what I understand I have to rename all of my HTML files that have the PHP line in them to *.PHP?

I wonder if I can still validate a PHP file with W3C. I’ve never written one before.

VS Pro can do editing, but it does just enough to get by, in my experience. If you are planning to use asp(.net) VS Pro is a good way to go. Dreamweaver also does asp, since I don’t have tons of experience in asp I can’t tell you how good DW is. In the times I played with asp I used VS Pro.

For the sloppy code comment, it does make fairly poor code if you are only using the ‘designer’ interface. I highly recommend just using the ‘code/coder’ interface, for both beginners and pros.

I didn’t recommend you looking into PHP because like you said this is a beginner class. Knowing how classes like this are set up, teachers don’t want you to skip ahead to like PHP cause it is easier. You need to master riding a bike before getting on a motorcycle. :wink: If your instructor says go ahead and use php then I 100% recommend it over ssi’s.

You will have to rename all files that you have a <?php ?> tag in to .php from .html/.htm. Now if you have a navigation bar, and all it is a unordered list, you should be able to keep it .html. You can totally validate .php files with the W3C validator. It acts like a webpage, so the validatro runs your php code (basically converts it to the html) then validates. It won’t tell you if you have an error in your php.

I don’t think the W3C validator validates PHP code. The HTML output by PHP code contains both static HTML text and results of database queries, POST, GET variables… How in the heck would W3C’s simple script handle those things? :lol:

@Mr358

You need to validate the HTML output by the server side code, which would mean that you have to view the output of your page as normal, in a browser window, then view the source (method depends on the browser you’re using), then copy and paste this source in the W3C validator’s direct input text area.

Wow, your professor is “leading you away from frames.” Nice job of introducing his students to late-20th century design paradigms. (:

Seriously, it’s very simple to construct a basic template, for example a 3-column “holy grail” layout, and keep the same info in the header, footer, and sidebars, and only change the content in the central, main column through different pages. When the user goes from one page to another, everything except the main column stays the same. No changes, no frames, and no need for PHP includes (unless you want to go there).

If your professor begins telling you how cool the “blink” tag is, change classes!

If you have an text editor that allows search & replace across multiple documents it is not that difficult to do it manually.

Although SSIs may be the way you want to go.

Thanks, for now I am just using the PHP method because its very easy to do. I use Visual Studio mainly for the code editor. Because most of it is color-coded and it helps to make errors stand out. Just using Notepad is too hard.

We were shown how to use frames and did a few projects using them because a lot of websites use them. So we know how to work with them.

But we are not allowed to use frames or tables in any projects, and everything has to validate with W3C or he takes points off. Everything is to be done in 100% CSS and we can only use DIVs. and has to work in IE, FF, and Safari.

Next semester we are doing ASP .Net, PHP, Java and UML Theory. Mainily, right now we are just doing MySQL, MS SQL and Visual Basic. We are building an eCommerce website from start to finish next semester.

Its not really a web design degree its a computer science degree, but there are one or two courses on HTML and CSS. Which are in the first semester that I’m doing now. There are optional Photoshop courses but IDK if I’m taking them.

In the 4th semester we have an internship with either IBM, Microsoft or at the Hospital. IDK which I’m going to do. I heard that in Fall 2010 we will have an agreement with Intel as well, so that might be possible, but idk.

I also have to take Psychology and Sociology next semester :frowning:

I don’t know any professional that doesn’t write code by hand, the thing is that if you don’t write it yourself, it’ll go all messy. Visual editors have the problem that their too inaccurate to write a Handcrafted page (when you add stuff using the HTML editor it adds loads of un-required markup). Web design does involve a fair amount of coding but when you get used to the HTML elements you will find yourself able to produce pages quickly. Even the industry professional tools like Dreamweaver and ExpressionWeb are no substitute for proper hand coding, they suffer the same problems as every other visual editor (to a slightly lesser extent as their slightly more accurate). In summary… want a good job, do it yourself! :slight_smile:

If you want something a little more “lightweight” than Visual Studio for writing code I can recommend Notepad++, it has syntax highlighting (the color-coded stuff) and line numbering and all those other useful tools which help improve the visibility of code… and it’s free (plus uses a lot less memory!). :slight_smile:

Not many websites use frames anymore (at least not up-to-date ones), they have become a “dead practice” because they have so many issues associated with them it’s generally considered a mighty sin to even make use of them these days! :slight_smile:

Well don’t limit yourself to just DIV’s, there’s lots of other HTML elements you can use which are perfectly valid and they’ll give your content added richness for when the search engines make their rounds (and index your pages), using stuff like paragraphs, images, headings, etc will all give added emphasis to your content so search engines know how your website is laid out (and you’ll place better in the results from using them effectively).

Sounds like a lot! You’ll only end up using one server-side language in the real world but it’s good your learning about the various options out there, I tend to have a lot of love for PHP and mySQL (though I do happen to write software in Visual Basic .NET and C#).

Photoshop can be useful if you want to produce graphics and artwork for your websites, there’s only so much you can do with flat colors before you do like me and end up running to the nearest stock photography website (as I suck at graphic design). :slight_smile:

Those are actually pretty useful for web design, it’s a fundamental part of building a website to understand your audience, their needs and be able to get into the theory of design and what makes a website great. I took psychology at college and it was a lot of fun (less scary than it sounded) and it’s helped my career bundles :slight_smile:

Well I guess I wasn’t very clear we do use other things besides DIV. I meant that we are not supposed to use tables in the design (unless its do display data correctly). A lot of people are lazy and they use tables to design their pages instead of DIVs and CSS. The design of the pages is using DIVs, but we still use the other tags for formatting and stuff.

I could design website’s but I’m going more for programming mainly because I can’t design images at all. I have no artist skills. I didn’t know there was a place for you to get free images. There are free graphics I can use on my website, or a website I build for someone else?

Hey, figure I would chime in being a very new web designer myself here.

I do all my code by hand using Notepad ++ right now. I’ve thought about using one of the helper programs, but after seeing my roommates use one for her graphic design work I have very little want to go that way at all. From what I’ve seen they make some pretty ugly mark-up compared to what I end up doing just using notepad++.

As far as Photoshop, it is a very scary beast, at least still to me, but the more and more I’m working with it I’m really seeing the pure power it has. If you going to be doing any work with images at all it is a good idea to at least know you way around it a little bit I feel.

Finally, I’ve been finding that most teachers are out of touch with current web design practices. I’ve all but given up learning this skill from colleges at this point because either they pace is to slow or what they are teaching it very outdated. If your interested in the area though the way I’m approaching it is I’ve been mastering HTML and CSS right now and then am moving on to JavaScript and Ruby on Rails in the next month. Just with the first two you can make some very good looking pages, though they are not to dynamic.

Same thing I do. stock.xchng is a very good stock photography site, and most of the photos are free.

The output from the php script, which runs on the server, is just html. It’s the output that is validated. And therefore validating the output it is sent is no more difficult than if the original page was just pure html. The validator never sees the php at all.
PS I validated a set of php pages last week. No problem at all.

Yes Adobe Dreamwevear can also edit HTML. and professional designers prefer dreamweaver than any other html editing softwares.

And one more thing is all desingers use one or the other html editor platform. No one write the html code handy. SO dont keep in mind pro designers write html tags handt without using these softwares.

No, actually, many professional Web designers do write code by hand. They often do not use Dreamweaver’s WYSIWYG editor and work instead in the hard-code section of the program. Many professionals don’t use DW (or Expression Engine, or whatever) at all, preferring to use an enhanced text editor like Notepad++. Now, plenty of Web professionals use DW for one purpose or another, particularly as it can integrate with Photoshop and work with PHP, ColdFusion, etc. But your statement is far too inclusive and, in some senses, just plain wrong.

If your professor begins telling you how cool the “blink” tag is, change classes!

Hey, dont pick on Blink<blink></blink>LOL :stuck_out_tongue:

do you really code all of this stuff by hand?
Yeah, I do atleast. If you want to get anywhere far with web design. Your going to have to learn the languages from the beginning.

Just stick around the Sitepoint forums, will teach you how to code correctly. I was at the same spot you were about 3/4 years ago and now i’m about to open up my own web development company. :slight_smile:

Dreamweaver - teaches developers on HOW NOT to code correctly. So, do yourself a favor and uninstall it. (Thats what Dan told me the first time I went to him for help) :wink:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">


</style>
</head>
<body>

</body>
</html>

This is what I usually start off with on every template I develop. I add-on to it as needed.