My Website Tutorial! Part 1.

2007-12-27 07:41:01

#1

Zimmer: Un Moderador; +1,688|7059|Scotland

Well, as I said, if I go through each round, I will post up more parts of the tutorial. Then, once I have done them all, you will be quite proficient in creating a decent XHTML website with CSS.

Here goes.

Hope everything is self explanatory. Also, my advice to you : Experiment. A tutorial is only meant to help you in your quest, its not supposed to be your base. Muck around. I will help if you don't know what you have done.

Cheers.

Here is the finished result of the first part of the tutorial. Yours may look different as you could have changed a few things in the CSS.
Tutorial Files

2007-12-27 07:44:10

#2

chuyskywalker: Admin; +2,439|7151|"Frisco"

ahem -- also, would be a good idea to provide the finished source files.

2007-12-27 07:45:42

#3

Zimmer: Un Moderador; +1,688|7059|Scotland

chuyskywalker wrote:
ahem -- also, would be a good idea to provide the finished source files.

Doing that now. Plus, I will use CamStudio for the finished result of my second tutorial. Not for this one. It's not that big.

2007-12-27 07:48:08

#4

TehTacoKing: ''Its nothing serious but i am bleeding badly''; +13|6292|Mountain Dew

Wow isnt that alittle small?

2007-12-27 07:49:35

#5

Zimmer: Un Moderador; +1,688|7059|Scotland

TehTacoKing wrote:
Wow isnt that alittle small?

It is only the first part. Content and extras will come later. ( This is part of my user battle campaign, more wins, more tuts. )

2007-12-27 08:11:47

#6

FFLink: There is.; +1,380|6994|Devon, England

TehTacoKing wrote:
Wow isnt that alittle small?

Bet that's what she said to you, eh?

Well done, Zimmer, great job

Last edited by FFLink13 (2007-12-27 08:12:06)

2007-12-27 08:15:41

#7

liquidat0r: wtf.; +2,223|6930|UK

TehTacoKing wrote:
Wow isnt that alittle small?

Are you talking about the size of the image? If so, then try zooming in.

2007-12-27 08:22:56

#8

ghettoperson: Member; +1,943|6953

Zimmy, maybe make it a little narrower so that it fits without scrolling on a 1024X768 screen, just for slightly more user-friendlyness?

2007-12-27 08:24:19

#9

Zimmer: Un Moderador; +1,688|7059|Scotland

ghettoperson wrote:
Zimmy, maybe make it a little narrower so that it fits without scrolling on a 1024X768 screen, just for slightly more user-friendlyness?

Aw damn. I will fix that after the next round of the battle.

2007-12-27 08:34:52

#10

=Karma-Kills=: "Don't post while intoxicated."; +356|6888|England

Cool!

Just had a glance over it and it looks pretty damn good... looking at the page source i think its funny to see only a few lines of code, whereas i would have hacked around and taken up loads.

That :current thing looks pretty interesting... i may have to add that to my site.

Wondering, you know "<li id="welcome_link"><a href="#"></a></li>" - why make it a link in the first place? Wouldnt it be the tiniest tad better to just have it in the <ul> for the spacing, but keeping the <a href=> blank? Just looks like a random dead / hidden link to someone who hovers over it.

Also, could you, or are you going to in the next tut, explain how to just get rid of that <li id="welcome_link"><a href="#"></a></li> completely, and replace if with a pic. So, for example, you have [company logo][Home][Contact] etc. Would be pretty easy right?

Keep up the good work.

2007-12-27 08:38:26

#11

Zimmer: Un Moderador; +1,688|7059|Scotland

A. You don't want a pic replacing it.
-> Why? because it takes about 10x longer to load.
-> You want to keep it as much CSS as possible.
B. You can remove the link if you wish, just remove the "a" at the end of the #welcome_link CSS. Should work.
C. It was a link because I used it as a home link.
D. Its .current in CSS and in HTML its class="current"

2007-12-27 08:47:38

#12

=Karma-Kills=: "Don't post while intoxicated."; +356|6888|England

Ill play around with it...

BTW:

Oh yeah, are the dreaded drop down menus going to feature?

Last edited by =Karma-Kills= (2007-12-27 08:49:16)

2007-12-27 09:02:44

#13

kylef: Gone; +1,352|6797|N. Ireland

Need. More. Tutorials!

2007-12-27 09:03:09

#14

Zimmer: Un Moderador; +1,688|7059|Scotland

=Karma-Kills= wrote:
Ill play around with it...

BTW:

http://validator.w3.org/images/valid_ic … id-xhtml10

Oh yeah, are the dreaded drop down menus going to feature?

Only if you want them to.

2007-12-27 09:07:35

#15

Brasso: member; +1,549|6934

Yay!

God damn I didn't choose Dreamweaver when I popped in my CS3 disk. How do I install it without reinstalling the whole package?

"people in ny have a general idea of how to drive. one of the pedals goes forward the other one prevents you from dying"

2007-12-27 09:09:16

#16

=Karma-Kills=: "Don't post while intoxicated."; +356|6888|England

Yars please!

BTW, would it use Javascript? Do all dropdowns have to use Javascript?

2007-12-27 09:09:19

#17

Zimmer: Un Moderador; +1,688|7059|Scotland

I think you can choose it from the CS3 disk.

2007-12-27 09:11:58

#18

Brasso: member; +1,549|6934

Zimmer wrote:
I think you can choose it from the CS3 disk.

So I just put it back in? Oh okay, let me try that.

"people in ny have a general idea of how to drive. one of the pedals goes forward the other one prevents you from dying"

2007-12-27 09:39:09

#19

=Karma-Kills=: "Don't post while intoxicated."; +356|6888|England

Zimmer wrote:
I think you can choose it from the CS3 disk.

Come again? Did i miss something? You can get a drop down menu from an Adobe CS3 disk?

EDIT: Note to self: Reading post above mine might be useful...!

Last edited by =Karma-Kills= (2007-12-27 09:40:17)

2007-12-27 09:40:23

#20

Brasso: member; +1,549|6934

=Karma-Kills= wrote:
Zimmer wrote:
I think you can choose it from the CS3 disk.
Come again? Did i miss something? You can get a drop down menu from an Adobe CS3 disk?

No, no, he was saying I could install Dreamweaver after the initial installation by reinserting the disk.

And it worked, thanks Zim.

Edit: Ah, yeah, you got it lol

Last edited by haffeysucks (2007-12-27 09:40:39)

"people in ny have a general idea of how to drive. one of the pedals goes forward the other one prevents you from dying"

2008-01-03 08:25:05

#21

DeathIsYou: :D; +9|6281|UK - England

Nice one! There's some nice screenies in there and easy-to-understand instructions too.

One thing I do worry about is that you are obviously very good at layout and HTML and all of that because I've seen your webStrain site. But to be honest, if you're a good Web page writer (like yourself), you should really be using Notepad.

Yes, I know what I just said... Notepad.

2008-01-03 11:54:51

#22

rh27: Not really a Brit; +51|6900|England

DeathIsYou wrote:
Nice one! There's some nice screenies in there and easy-to-understand instructions too.

One thing I do worry about is that you are obviously very good at layout and HTML and all of that because I've seen your webStrain site. But to be honest, if you're a good Web page writer (like yourself), you should really be using Notepad.

Yes, I know what I just said... Notepad.

Why would he intentionally make it harder for himself?

People stray to programs that colour the code because it's easier on the eyes, particularly in long code snippets, you don't want eyestrain from staring at black code looking for that one tag you forgot to close.

2008-01-03 12:17:47

#23

Zimmer: Un Moderador; +1,688|7059|Scotland

DeathIsYou wrote:
Nice one! There's some nice screenies in there and easy-to-understand instructions too.

One thing I do worry about is that you are obviously very good at layout and HTML and all of that because I've seen your webStrain site. But to be honest, if you're a good Web page writer (like yourself), you should really be using Notepad.

Yes, I know what I just said... Notepad.

Wow. I cannot believe you just said that.
If I want to scroll through thousands of lines of code and see each and every single different parameter in PHP and Javascript, why should I use notepad when I have Dw?
That is so much rubbish. I actually laughed when I saw that.

People don't use notepad to code unless they don't have the cash for dreamweaver ( or they dont want to crack it ) or their computer can't cope with it.

That is like deliberately putting a small hedge in front of you just to trip you up. I have used notepad and I code faster in Dw.

It may be personal preference, but I find that quite stupefying.

2008-01-07 09:37:51

#24

Phatmatt: Vroom Vroom; +298|6492|Canada

Do you have a date for when you're going to release the next part of this tutorial?

2008-01-07 09:57:45

#25

Jenspm: penis; +1,716|7036|St. Andrews / Oslo

Zimmer wrote:
DeathIsYou wrote:
Nice one! There's some nice screenies in there and easy-to-understand instructions too.

One thing I do worry about is that you are obviously very good at layout and HTML and all of that because I've seen your webStrain site. But to be honest, if you're a good Web page writer (like yourself), you should really be using Notepad.

Yes, I know what I just said... Notepad.
Wow. I cannot believe you just said that.
If I want to scroll through thousands of lines of code and see each and every single different parameter in PHP and Javascript, why should I use notepad when I have Dw?
That is so much rubbish. I actually laughed when I saw that.

People don't use notepad to code unless they don't have the cash for dreamweaver ( or they dont want to crack it ) or their computer can't cope with it.

That is like deliberately putting a small hedge in front of you just to trip you up. I have used notepad and I code faster in Dw.

It may be personal preference, but I find that quite stupefying.

+ Dw ends all your <tags> for you

And the colors and indenting make it a lot easier to look at.

https://static.bf2s.com/files/user/26774/flickricon.png

BF2S Forums My Website Tutorial! Part 1.

chuyskywalker wrote:

TehTacoKing wrote:

TehTacoKing wrote:

TehTacoKing wrote:

ghettoperson wrote:

=Karma-Kills= wrote:

Zimmer wrote:

Zimmer wrote:

=Karma-Kills= wrote:

Zimmer wrote:

DeathIsYou wrote:

DeathIsYou wrote:

Zimmer wrote:

DeathIsYou wrote:

Board footer