Starting A Webby

Darthshearer · Jan 1, 2005

Hi

I have bought a domain name and some space as I want to do a webby.

What is the best application to use for a nubbin like me? I have been told Dreamweaver was good

Anyone

Clown · Jan 1, 2005

I use notepad.

Xavier · Jan 1, 2005

How very helpful of you clown. Somehow I don't think that was the answer he was looking for....

Anyhow Darth, as you said, Dreamweaver is a pretty popular app and imho a good starting place - you can go even simpler to something like Frontpage (I really wouldn't recommend it..) or consider plunging yourself in the deep end and learning HTML/CSS properly with an editor such as Editplus (http://www.editplus.com) and the tutorials over at w3schools (http://www.w3schools.com/). Personally if I was learning it all over again I'd go with a mixture of using Dreamweaver to get pages together, and editplus to tidy the code up whilst referring to the W3Schools tutorials to get a feel for which bits of markup do what.

The biggest thing with HTML/pages in general is just getting a feel for what HTML actually 'is' - it's not a programming language per-se, and definately doesn't behave like one in fact it began life as a scripted presentation language to produce power-point esque pages, and as a result has been pretty bent out of shape to give you the mishmosh interweb you see today... Once you've gotten your head around how the elements really work you can start on the real fun of how each browser will do its utmost to f*ck your pages up (except firefox, obviously, which rawks)...

Xav

Darthshearer · Jan 1, 2005

Cheers Xav

Clown · Jan 1, 2005

I'm a newbie at making websites and I found that getting help from these script sites (PHP, CSS, even HTML) and writing it all out myself that I learn best. I tried Frontpage and I tried Dreamwaver but I found myself relying too much on the WYSIWYG side of things. I started off yesterday trying to learn CSS and ended up making a new template for a blog, all in notepad. I ended up finding out a little bit of how PHP was working too. Good for me.

Why come to a public forum to hear what you want to hear, and ignore anything else? I might not be very helpful but at least I'm not too lazy to help myself.

Shovel · Jan 1, 2005

A couple of points on what Xav has said.

1) HTML is not at all like a programming language or scripting language. If you remember this, it is far less daunting. HTML describes text. It adds meaning. Tags exist to mark up abbreviations, emphasis, lists etc. Use them as they were intended (wherever possible) and your pages will make more sense.

2) The "each browser will do its utmost to f*ck your pages up" comment is somewhat inaccurate. He refers to Internet Explorer's reputation for rendering code in such a way that other browsers do not. It does happen, but really not as much (or as at least, not as severely) as most ranting on the internet would have you believe.

Very simply, you can avoid a lot of problems by learning to code using accepted web standards and familiarising yourself with the the w3c HTML Validator. This allows you to declare which version of HTML you are coding (of late HTML has been majorly tidied up, therefore this is important) and the validator will inform you of any structuring errors or if you've accidently used a tag that doesn't actually exist in the specification (maybe Microsoft made it up, or an example you're following is very out of date and uses old tags that are no longer used as a result of the aforementioned tidy-up).

When you start learning, you're probably best learning HTML 4 "Transitional" (which is an up-to-date but not too strict specification). Follow this, and you'll find yourself alright.
You can help the W3C validator (and put internet Exploer 6 into "Standards Compliant" mode) by putting the following line of text right at the top of each .html file you produce:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

There is also a thing called "CSS". This is a different language from HTML but works alongside it to handle all the business with fonts, colours and layout. When you learn from tutorials, try to use ones which use CSS for style and formatting rather than HTML attributes (these are outdated and therefore less useful to learn. They also require you to use an awful lot more code than you need).

Specifcally, avoid tutorials which use the <font> tag. This tag has been completely replaced with CSS and as such, you'd be better learning it the 'new' way. Once you've found your feet (and/or a passion for web design) you might want to look at older tutorials with these old tags in and work out how to implement them using newer/current technologies instead.

As far as editing tools go: Dreamweaver is the king, but is very expensive. If you use it (there's a 30/45 day trial) make sure you poke around in the options. The most recent version has had a lot of input from the Web Standards Project to encourage the software to produce standards valid markup. No other HTML generator has has the same amount of attention to cross platform use as Dreamweaver has. Do make sure you check all the options to ensure that it's not using anything 'old'. WYSIWYG editors are notorious for producing bad code.

If you do use such an editor make sure you use something with a 'split' view, showing your source code and the rendered version alongside each other. This will help you understand better.
And preview in every current browser you can get your hands on. Firefox, Opera, Netscape 7, IE6 (and 5.5, if your target audience demands it). Also, Safari on the Mac (if you have access to it) or Konquorer in Linux (again, if you have access to it).

-- Oh, and a lot of people will scream at you about not using tables (<table>) for layout (like you would in a Word document). They are ultimately correct, but learning CSS to do positioning takes a bit of time and requires you to know the basics of both HTML and CSS first. Therefore, ignore these people for the time being but do bear in mind that if you look at your source code and see 5 tables nested within each other and think "That's really silly", it probably is.

Everyone who tries to reply to this thread will try and impose their web dev ideals on to you. Most of them will have some merit (except those who are just wrong) so please don't feel scared by the splooge of information that this thread will generate. Ultimately, you'll do what you want and when something doesn't work quite right, maybe these replies will serve as a trigger for some kind of solution. Play with it.

Clown · Jan 2, 2005

I've just sort of done what Shovel has said. I'm learning CSS right now and I came up with this: http://www.clowneh.co.uk/davey/
The plan was to help my friend, while learn at the same time (his version was using tables). I took help from websites and made up my own template using CSS in notepad.

It's fucking bullshit though. It looks fine in Firefox but in IE it fucks up. I don't think that validator thing means too much if the code is right but still doesn't view properly.

Darthshearer · Jan 2, 2005

Thanks for the advice

Ive made a start in Dreamweaver and had a gander at those webby links you gave me.

Thanks again :worthy:

Shovel · Jan 5, 2005

The validator can only tell you if your syntax is correct, sadly. IE's implementation isn't great and some parts are buggy. Thus, it doesn't replace browser testing (shame...).

For your site Clowneh, 2 things. For the left and right boxes that don't align correctly, try making each box much smaller (width) and see if IE ever positions them side-by-side.
If it does then make them bigger again until it breaks and see if that reveals anything. maybe try them without margins and padding too - my understanding has always been that putting in a doctype puts IE in standards mode, but I guess there could be other things that force it back into Quirks mode. If it is in Quirks mode then the margins will be altering the width calculation and might be a cause.

Alternatively, try having box boxes floated in the same direction (left, for example) and they should then pop next to each other more comfortably, unless one is still too wide and wraps onto the next line.

2nd thing - the flash you've used for the link buttons - you need to include text replacement code for people who haven't got Flash installed (or have chosen not to enable it).

Code:

<object type="application/x-shockwave-flash" data="http://phonzy.co.uk/test2/button8.swf" height="22" width="100">
	  <param name="movie" value="http://phonzy.co.uk/test2/button8.swf">
	  
	  <a href="contact.html" title="Contact Us">Contact Us</a> <!-- Add this -->
	</object>

JingleBells · Jan 5, 2005

Just add a quick link reading:

Code:

<a href="#" onclick="alert(document.compatMode);return false" onkeypress="alert(document.compatMode);return false">Find Render Mode</a>

and when you click on the link it will alert you as to whether it is running in standards mode (CSS1Compat) or "quirks" mode (BackCompat). Very handy for IE testing as I don't think there is a web developer toolbar for it.

Clown · Jan 5, 2005

Thanks, I was just really concentrating on the CSS. The original site is here: www.phonzy.co.uk/forest. I just wanted to see if I could live without tables. The two smaller boxes at the bottom wasn't the only problem. The whole of the left margin is a bit big, while the right margin is small, and the top picture isn't centre.

Clown · Jan 5, 2005

Look what I found!
http://nemesis1.f2o.org/aarchive?id=11

Maljonic · Jan 5, 2005

I use Dreamweaver for pretty much everything now; I took some courses on web design at my local college and learnt so much more than I ever could looking up tutorials on the interweb, it's just better to have someone there to explain stuff for you. I was using about 20% of Dreamweaver's abilities before I did the courses, and I'm probably using about 80% now - there's so much in there I just wouldn't ever have found without the course. I'm also reading a book on Javascript and I'm starting another course on Macromedia Flash at the end of this month.

A warning though, once you really get into web design it gets more and more addictive and days just don't seem long enough - that's what I've found anyway.

Shovel · Jan 10, 2005

While it's true that having someone demonstrate and explain is generally more useful, it only works if they tell you what's right. If they demonstrate and teach non-standard bollocks code then you'll learn non-standard bollocks code. If they've got a clue, then you're in luck

Maljonic · Jan 10, 2005

I agree, but I've been lucky enough to have really good tutors, especially the last one who works for a reputable web design company full-time and teachers the subject part-time; he taught me more stuff than I even thought of asking about, which was great!.

Clown · Jan 10, 2005

I learnt non-standard bollocks by reading the code of other people's websites and trying to replicate it. Then I sort of remembered what each tags did and how to use them. I don't learn the 'normal' way.

itcheh · Jan 11, 2005

Just to add my 2p's worth re: css vs tables and following 'best practice'

I am responsible for a range of websites across the company I work for which receives between 350,000 - 500,000 unique visitors per month. Of those visitors, 10% use really old browsers e.g. IE4, NS4x, Lotus Notes (and older) etc.

That obviously represents 35,000 - 50,000 unique visitors and potential customers who cannot view websites designed with complicated styling. To redesign the sites to replace the tables with css would be commercial suicide.

So tables are not always 'teh evil'

If you are asked to do a website for a company - view their web stats to determine what browsers people are using before you discuss with them how you intend to deisng their site.

Shovel · Jan 11, 2005

Well, sort of. Using <table> for layout is still misusing it. It's a data table, that's what it is. The fact that to achieve the same look in older browsers you have to use them is a different point. It'll still be poorly accessible to anyone having the web page read out to them and potentially disabling for anyone visiting on a small screen device.

Ultimately, if you have to use them (e.g. your client says that it has to look as similar as possible, and you can't settle for a linear (without columns) layout in Netscape) then keep them to a minimum. Create your columns but ensure that the content of the columns is still semantic HTML (lists are lists, headings are headings). Don't say "I've used table for layout in one place, I may as well use it everywhere now" (navigation lists are so often done in tables even when there are no columns). At least that way when the day comes that you can switch tables for something which is actually designed for layout you don't have to do anything to migrate the table contents.

And yes, of course you must take into account the usage by the client's customers. At work (Fujitsu Siemens Computers, so we get all sorts browser wise), we still have to semi support Netscape 4. Not pixel perfection appearance, but functionality. The website is a bit cack, horribley table based. We're trying to change that over time at the moment.

Ultimately, if in doubt - read Zeldman's book.

itcheh · Jan 11, 2005

*Purchases 'Designing with Web Standards' * - thanks Shovel!

Deadnala · Jan 11, 2005

I making a dynamic website with a forum etc like phpnuke, just i make it myself. That's not important but it give a idea how experienced i am

I like Dreamweaver the most, tho i dont use the wyswyg there i code php. What i like so much about dreamweaver is thay it support alot of scripts.. It color functions blue, strings red etc..
Allso dreamweaver got a integrated ftp client, nice project overview, you can even make templates etc..

People who say notepad is the best are liars. They just say notepad so the newbies look at them as great programmers. If they are fair they admit, notepad sux for html or php or whatever

edit: Get firefox as explorer and download the devolpers extencion, its a must for designers.

Shovel · Jan 13, 2005

Firefox is an outstanding developer tool (which for a consumer targeted browser is great going). The Web developer extension is a must, as is the optional DOM Inspector when you install. The JavaScript Console is very useful indeed.

You can also get the Venkman JavaScript debugger for bigger web application work, though it could use some UI polish

These days my code gets done in Visual Studio at work (we use ASP.NET). Whatever you do, don't use it. It's nice having JavaScript code completion (I've never found the feature anywhere else, yet) but that's it. The WYSIWYG sucks, the non-standard code it puts in sucks, its utter unawareness of semantic HTML sucks. Sucks.

At home, I've started using the Eclipse IDE with PHP plug-in for most development. PHP code completion is a godsend and it integrates nicely with some source control that I have set up. Works well, though I would like JavaScript code-completion to make my life a little easier.
Eclipse will do all the syntax highlighting etc.. that you find elsewhere too.

Alternatively, if you don't care about code completion but want syntax highlighting for free (without buying/stealing/whatever Dreamweaver) get HTMLKit. It'll do syntax highlighting of pretty much everything you through at it and has a nicely integrated preview mode (which if you install the Mozilla ActiveX Control will preview Internet Explorer and Mozilla Firefox [Gecko] rendering side by side). It's cool, if a little bit clunky in places.

(P.S. Sorry for no links, Google will have to do for you tonight

)

UPDATE: Just to be clear, Visual Studio rocks for Windows application development - it's just the HTML stuff that it does less well.

Clown · Jan 13, 2005

Shovel said:
(P.S. Sorry for no links, Google will have to do for you tonight )

Or Jonty. I want Jonty back!

Shovel · Jan 13, 2005

While Jonty's Web Dev knowledge was always impressive, I'm not convinced that he's humanly capable of cataloguing 8 billion websites in his mind...

Here you go:
Mozilla Firefox
Venkman JavaScript debugger
Microsoft Visual Studio
Eclipse IDE
PHP Eclipse plugin
HTML-Kit
Mozilla Gecko 1.71 ActiveX Control

Enjoy

Clown · Jan 13, 2005

Yes he can. All you need is faith and pixie dust!

Jonty · Jan 14, 2005

Clown said:
Yes he can. All you need is faith and pixie dust!

And I have both

Starting A Webby

Can't get enough of FH

Part of the furniture

Can't get enough of FH

Can't get enough of FH

Part of the furniture

Can't get enough of FH

Part of the furniture

Can't get enough of FH

Can't get enough of FH

FH is my second home

Part of the furniture

Part of the furniture

Can't get enough of FH

Can't get enough of FH

Can't get enough of FH

Part of the furniture

Part of the furniture

Can't get enough of FH

Part of the furniture

Fledgling Freddie

Can't get enough of FH

Part of the furniture

Can't get enough of FH

Part of the furniture

Fledgling Freddie

Users who are viewing this thread