Web design for beginners

[8]

As a part of a university project I have to present my work online. I already have a very basic 'coming soon' page online that I put together by messing around in nvu.

I'm fairly handy with computers and would quite like to learn how to build a decent website that looks professional.

What software would you recommend I use? I can get access to dreamweaver. Is it a good idea to use it? Any advice/pointers welcome.

[Don]

You should consider Microsoft Visual Studio Web Developer which is free. Find it on the Microsoft Web Site...

[jamieboy]

It depends on what you want to get out of it, really. If you use something like Dreamweaver or even Frontpage, then you should be able to rattle up a nice-looking site fairly easily, but although you'll have learnt how to use Dreamweaver, you won't actually have learned how a web site 'works'.

There are loads of tutorials all over the Internet, and my advice would be to download a good text editor (I use ConText), google for HTML and CSS tutorials and learn how to do it manually.

Once you know how it works, there's nothing to stop you using Dreamweaver or whatever, but I'd be inclined to learn the basics longhand first.

[8]

Don said:

You should consider Microsoft Visual Studio Web Developer which is free. Find it on the Microsoft Web Site...

Downloaded it. Looks good, I'm going to play around with it tonight whilst watching the football.

jamieboy said:

It depends on what you want to get out of it, really. If you use something like Dreamweaver or even Frontpage, then you should be able to rattle up a nice-looking site fairly easily, but although you'll have learnt how to use Dreamweaver, you won't actually have learned how a web site 'works'. There are loads of tutorials all over the Internet, and my advice would be to download a good text editor (I use ConText), google for HTML and CSS tutorials and learn how to do it manually. Once you know how it works, there's nothing to stop you using Dreamweaver or whatever, but I'd be inclined to learn the basics longhand first.

Sound advice, I think I'll start by working my way through the tutorials here.

[mikef]

If you really want to learn web design rather than how to use an IDE to generate bloated code:
- Download Topstyle css editor
- CSS book from Amazon: Stylin' with CSS (New Riders)
- Design book from Amazon: Bulletproof web design (New Riders)
- DHTML/Javascript book from Amazon: DOM Scripting (FriendsOf)

Work through these books (couple of weeks) and your web pages should look and behave better than 99% of what's on the web

Edited to add: also download Firefox (more standards compliant) and Internet Explorer 6 (more widely used) and make sure that your pages work equally well on both. The books listed above will give you enough info to achieve that

>> Edited by mikef on Wednesday 8th February 23:24

[Kinky]

This months 'Website Maker' magazine has a free full-blown covermount copy of NetObjects V7

K

[zaktoo]

I'm afraid I'm going to go against the grain here. Use a text editor and hand-code tags. You'll actually learn something about the tag soup we call html rather than how to use an IDE - which for a technically minded person should be a piece of cake anyway. I'll further recommend staying away from both Macromedia's and Microsoft's web development environments as both have the tendency to pervert the standards and crank out code that isn't very cross-browser friendly, at best. Frontpage in particular is horrendous. Save yourself a bunch of trouble and never even bother firing it up _ever_ - it just isn't worth it.

HTH

Ciao

Zak

[8]

Thanks for the opinions.

I spent last night reading up on html, xhtml and css. Then today I used a template and edited the html directly to get the basis of a website. The difficulty will arise when adding lots of text to the site and having to write my own tables to contain it. I uploaded my experimental site to geocities, what do you think?

www.geocities.com/group4_2/index.html

[maddog-uk]

OK the other half is a web programmer and advises the following:

Use a text editor such textpad or notepad or primalscript if you want so you see whats going into your code. Try and use css 2.0 if possible, look at www.csszengarden.com for inspiration. Use firefox as a good debugger, but around 85% of the world runs ie so make sure it works with ie6 and ie7 as its now in beta.

Try and avoid using tables and instead use css to control the layout. Make it an accessible site ie site impaired friendly etc.

Handcoding is the basic learning tool which means that dreamweaver and ide's make more sense when you see what they are doing.

[Don]

zaktoo said:

Frontpage in particular is horrendous.

We're a Microsoft "shop". And, even so, I AGREE! Blasted thing infests any PC it gets on and starts opening up perfectly good web pages you were working on and knackers them.

We still use Interdev as our main code base is in ASP not ASP.NET - but we NEVER use the "Design" mode. Everything is hand edited bar a few CSS links handily generated at the top of the file.

We found all the "big" objects either didn't work or didn't deploy or were ugly or weren't flexible enough or or or.

So we code our entire user interface by hand in HTML - which we generate "in code" as it were.

I fully expect that when we migrate to ASP.NET (VS2005) we'll do exactly the same. Except instead of generating HTML in VBScript/ASP we'll do it in C#/ASP.NET

[jamieboy]

maddog-uk said:

Use a text editor such textpad or notepad or primalscript

I'd definitely recommend a highlighting editor rather than straight notepad. Is primalscript free now? If so, I'd go with that, otherwise I find context works well for me.

Don said:

I fully expect that when we migrate to ASP.NET (VS2005) we'll do exactly the same. Except instead of generating HTML in VBScript/ASP we'll do it in C#/ASP.NET

Slightly off-topic, but we're coming up to that stage shortly. Any reason you're planning on C# instead of VB.NET? We're also leaning toward C#, on the basis that if we have to learn something new then it may as well be something completely new.

[Kinky]

8 said:

I uploaded my experimental site to geocities, what do you think? www.geocities.com/group4_2/index.html

My own personal observations ....

The text colour at the top of the banner might be easily missed/tricky to read - maybe change to white or a light grey.

The left-hand menu bar I would make smaller - so it gives you more body text room.

The main body text I would shift across to the right slightly. I would also change the font - maybe Arial or Helv (but I guess that's a personal thing). I'd also make the text more interesting - bigger and bolder.

On the About Page - you should explain what the company does, and history. Then when you list the people involved - you should have a small profile of each - what they do, background, email address, etc.

For the Contact Us page you should have address, phone, and various email contacts - webmaster, sales, info, etc, etc .....

The black text in the footer bar is unreadable as black - as per the banner text - change to a contrasting colour.

I'd remove the 'contact webmaster' link at the very bottom, and move it onto the 'Contact Us' page

K

[maddog-uk]

jamieboy said:

maddog-uk said: Use a text editor such textpad or notepad or primalscript I'd definitely recommend a highlighting editor rather than straight notepad. Is primalscript free now? If so, I'd go with that, otherwise I find context works well for me. Don said: I fully expect that when we migrate to ASP.NET (VS2005) we'll do exactly the same. Except instead of generating HTML in VBScript/ASP we'll do it in C#/ASP.NET Slightly off-topic, but we're coming up to that stage shortly. Any reason you're planning on C# instead of VB.NET? We're also leaning toward C#, on the basis that if we have to learn something new then it may as well be something completely new.

We have pretty much moved over to c# as well. We found it a better language. Java though still rules the roost in the city.

cheers

Simon

[Don]

jamieboy said:

Don said: I fully expect that when we migrate to ASP.NET (VS2005) we'll do exactly the same. Except instead of generating HTML in VBScript/ASP we'll do it in C#/ASP.NET Slightly off-topic, but we're coming up to that stage shortly. Any reason you're planning on C# instead of VB.NET? We're also leaning toward C#, on the basis that if we have to learn something new then it may as well be something completely new.

Yep. The CLR is laregly written in C#. Generally one wants to write one's code in whatever the operating environment is written in. That's out logic for choosing it.

It also helps that all our programming staff have lots of C++/Java/JavaScript as well as VB/VBScript experience. We've only really used VBScript so far because we had to. We'll use VB.NET when we port old code - but that's about it.

Our current language choices:

Client: JavaScript/DHTML and up until recently some C++.
Server: VBScript/VB and C.

Future choices will be:

Client: JavaScript/DHTML
Server: C#, C++/C

Oh - and WebService RPCs in XML of course as they all are.

We've got rid of all of our client-side binaries are they were a bloody liability.

[jamieboy]

Don said:

Yep. The CLR is laregly written in C#. Generally one wants to write one's code in whatever the operating environment is written in.

Thanks for this, but just one question - I thought that in .NET, whichever language you developed in, it was compiled to CIL which was then executed by the CLR. Is that not the case? Or if it is, are there still advantages to using C#?

Sorry for the hijack - this might be worth a thread of its own.

[Don]

jamieboy said:

Don said: Yep. The CLR is laregly written in C#. Generally one wants to write one's code in whatever the operating environment is written in. Thanks for this, but just one question - I thought that in .NET, whichever language you developed in, it was compiled to CIL which was then executed by the CLR. Is that not the case? Or if it is, are there still advantages to using C#? Sorry for the hijack - this might be worth a thread of its own.

Also apologies for the hijack.

At a binary level there should be no advantage to any of the .NET languages as they compile to the same managed code. C# is a nicer syntax for people used to C,C++,Java,JavaScript - and there's always the issue the its the one Microsoft use - so whenever a feature is going to make it into something and not another you'll be guaranteed that C# will be the one it makes it into first...etc etc.

If you have strong reasons (skillset, porting compatibility) for using VB.NET there's no reason why you shouldn't use it IMO.

[8]

maddog-uk said:

OK the other half is a web programmer and advises the following: Use a text editor such textpad or notepad or primalscript if you want so you see whats going into your code. Try and use css 2.0 if possible, look at www.csszengarden.com for inspiration. Use firefox as a good debugger, but around 85% of the world runs ie so make sure it works with ie6 and ie7 as its now in beta. Try and avoid using tables and instead use css to control the layout. Make it an accessible site ie site impaired friendly etc. Handcoding is the basic learning tool which means that dreamweaver and ide's make more sense when you see what they are doing.

I've been using Nvu to edit the HTML, is primalscript along the same lines? Using css looks like a good idea, I'll need to read up on it a bit more. What programme should I use to create a style sheet? Or should I try and code it myself?

Kinky said:

8 said: I uploaded my experimental site to geocities, what do you think? www.geocities.com/group4_2/index.html My own personal observations .... K

Thanks for the feedback, I intend to create a more detailed about and contact page. I'll be adding to the site as the project developes. My main aim is just to make the site look more professional than last years efforts, for example, www.aero.gla.ac.uk/design4-2004/group4-1/

[_dobbo_]

zaktoo said:

I'm afraid I'm going to go against the grain here. Use a text editor and hand-code tags.

This is what I do, and have always done. a bit of practice and it's easy, and you get clean, efficient, and most importantly standards compliant code.

[_dobbo_]

maddog-uk said:

OK the other half is a web programmer and advises the following: Use a text editor such textpad or notepad or primalscript if you want so you see whats going into your code. Try and use css 2.0 if possible, look at www.csszengarden.com for inspiration. Use firefox as a good debugger, but around 85% of the world runs ie so make sure it works with ie6 and ie7 as its now in beta. Try and avoid using tables and instead use css to control the layout. Make it an accessible site ie site impaired friendly etc. Handcoding is the basic learning tool which means that dreamweaver and ide's make more sense when you see what they are doing.

TEXTPAD is the greatest piece of software ever.

This is all excellent advice, exactly follow the way I code websites. I'd bin out notepad, because it's poo, textpad does syntax highlighting, making the code look a lot more logical:

[_dobbo_]

8 said:

My main aim is just to make the site look more professional than last years efforts, for example, www.aero.gla.ac.uk/design4-2004/group4-1/

That site is actually ok, but the mistake made there is not to fix the width of the text to the width of the menu.

30 seconds of time spent would have that looking about 100times more professional.