Clipboard Game

[Xav]

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

[chili5]

</center>

[Xav]

Tut tut, deprecated...

http://xavierhussain.co.uk/programs/FireWire-Drive-128x128.png

[chili5]

I know that. You can't center images with "style=\"text-align:center;\" oh and depreciated ain't the term you wanted to use. Depreciated means something has decreased in value. Deprecated was what you were looking for.

lol

</center>

[Xav]

What are you talking about? I said deprecated!

What about margin: 0 auto; ?

"Ok guys, I've been ranting on about Microsoft's Visual Web Developer for as long as I can remember. Some time ago I was bored, and I wrote this strange little tutorial to introduce VWD. It IS posted somewhere else on the web - my own site - but I am clearing out and deleting, so I thought it was a good idea to post it here, because it's going to be deleted from my site once I switch domains (I'm not transferring much across). Here it is (bear in mind I was still quite a newbie when I wrote it). It is unfinished, and fizzles out at the end, but I still thought it could be useful."


Introduction

I have been writing websites for a while now, and I have picked up a few tips over the months. One of the most important one is: "For Pete's sake, keep your site files in ORDER!". I previously just copied and pasted the formatting and scripts from document to document - until I wanted to make a minor course correction to the colour of one of my <h1> tags, at which point I realised that I had twenty-odd copies of the CSS style to rename. It is such a nightmare trying to organise everything - until I came across Microsoft's Visual Web Developer 2008 Express Edition. It is honestly the best thing since Microsoft decided to steal the GUI Interface from Apple. I am so glad I discovered it - my life has never been the same again.

So, you may ask, what on earth is the big deal about this program, anyway? Well, the great thing about it is that it takes pretty much ALL of the work out of writing web pages. And I mean all of it. The even better thing about it is that it is not only a WYSIWYG (What You See Is What You Get) program - it is a full-blown HTML, JavaScript, ASP, Visual Basic and C# code editor as well! For all you non-programmers out there, these are various languages used to make things happen in your websites (and in normal programs, too). It integrates everything so well that you can quickly and effectively compile a website. And isn't that just what life's about?

Getting Started

So, grab a copy of it from the Microsoft Website at Downloads (note that the download link is direct and will start the download immediately [hopefully]) and install it to get started. Load it up (it might decide to configure itself when you first load it) and you should find yourself on the Start Page tab. Click on New Web Site on the File menu, and in the resulting window, click on Empty Web Site. If you are an advanced programmer, you may want to create an ASP .NET web page (with an extension of .aspx instead of .html), which can be programmed in a .NET language, but most of the time, you just want to stick to a normal .htm or .html page. After you've opened an empty web site project, you need to create a new page to go inside it. To do this, click on New File on the File Menu, or the Add New Item icon on the toolbar. Gosh - look at all those different types of file you can add! For now, though, click on the HTML Page icon. Type a relevant name for the page into the text box, and give it a .html extension - the program seems to prefer .htm, but .html is more modern and widely accepted by all browsers. There should be a nice new tab opened, containing your web page. Congratulations - you are now ready to begin creating your website! Read on to find out how!

The Interface

Before we actually start writing our web site, it's worth taking a quick look at the inner workings of the program. This type of application is also known as an IDE (Integrated Development Environment) because it 'integrates' all the different aspects of the web site together, such as design, style, source code... I bet you're drooling with excitement at the thought already. Now, the IDE consists of a main centre pane, which displays the code/design of the file you are currently editing. On the sides, there are more sets of tabs. These can be left open, or told to hide away when not in use, by clicking on the small pin icon when they open up. On the left you should see the Toolbox, CSS Properties and Manage Styles tabs, and on the left there should be the Solution Explorer, Database Explorer and Psroperties window. Of these, the tabs on the left are the most useful (and perhaps the Properties tab on the right, too). To change which tabs are being displayed, click on the View menu.

As you open or create new files (such as web pages and JavaScript files) they will appear in the Solution Explorer. Double-click on the file to show it in a new tab in the main pane (ha, that rhymes - main pane, main pane, MAIN PANE!). To close a tab, click the small X (not the big red one) on the same level as the tabs. There are also a number of useful (and useless) toolbar buttons at the top - you can explore those yourself.

	This image has been resized. Click this bar to view the full image. The original image is sized 1280x800.


At the bottom, there are three buttons: Design, Split and Source. These are extremely useful, so you should try to remember them. Assuming you have an HTML or ASP .NET web page open, clicking Design will show you the page in a way similar to a word processor - you can 'see' the page, and you can edit it here. Click on the Source button, however, and you will instead be shown the code that makes up the page - useful for editing scripts or whatnot. Lastly, clicking Split will show you both views at once - if you make a change to either, the other will be updated automatically (though if a message to synchronise them appears, you may need to click on it). On the same row will be some markup tags displayed. There will not be very many yet, but as your page develops, they will appear more. To select any element on the page, click on its relevant tag on the bottom.

When you're writing the page, it makes sense to hide all the tabs on the side and bottom, to save screen space. However, if you run out of room, you could either: a) buy a new monitor, or b) change the screen's resolution to a higher value. Find a screen layout that works for you - remember, any of the windows can be dragged, dropped, tabbed, hidden... you can arrange things however you like. The default setup is a good one, though - just remember to hide the tabs you don't need at the moment.

So now you've got the hang of the program's interface, you can actually start beginning your website! Of course, you will have CSS Styles, JavaScript, dynamic event handlers... eventually. For now, though, we're just going to build a basic page.

Writing The Web Page

All right, all right - I know I have been putting it off for as long as possible - we're actually going to WRITE OUR WEBSITE! Yay! It's going to be relatively simple, I agree - but it will still be a web page nonetheless. Now, make sure you have your blank HTML Page open in the centre tab (if not, double click it in the Solution Explorer to open it). We're going to write the basic page first, then add some CSS later. I think it would be easier if I showed it in a step-by-step example, as opposed to a long page of text. To begin, open the Design view, and follow these instructions:

1. From the 'Block Format' drop-down list in the top-left corner of the screen, click "Heading 1 <h1>". Type the title of the page, and press Enter. On this line, choose "Heading 2 <h2>" and type a caption, or your name, into the box. Click Enter again.

	This image has been resized. Click this bar to view the full image. The original image is sized 730x181.


2. Type some test text into the paragraph tag, which is automatically inserted when you click Enter. Make it of reasonable length, and without any formatting. Create extra paragraphs by pressing Enter as necessary.

	This image has been resized. Click this bar to view the full image. The original image is sized 1104x296.


3. To add an image, click on "Add Existing Item" from the Website menu at the top, then find the image you want to include. Next, click and drag the Image item from the Toolbox. With this selected, open the Properties window, and the <img> tag should be shown.

4. Edit the "src" property to change the location of the image. Other properties, such as Width and Height, are self-explanatory.


Conclusion

Hopefully this will be enough to get you started using VWD - as you become more experienced, explore the features. There is excellent, and I mean excellent, CSS support, and JavaScript is also supported, with full IntelliSense support. Have fun!

[chili5]

You edited your post. lol I got a screen shot. Well now you know what depreciated means.

</center>

[Xav]

<center> still isn't the best way, though. Have you tried something like margin: 0 auto?

"Ok guys, I've been ranting on about Microsoft's Visual Web Developer for as long as I can remember. Some time ago I was bored, and I wrote this strange little tutorial to introduce VWD. It IS posted somewhere else on the web - my own site - but I am clearing out and deleting, so I thought it was a good idea to post it here, because it's going to be deleted from my site once I switch domains (I'm not transferring much across). Here it is (bear in mind I was still quite a newbie when I wrote it). It is unfinished, and fizzles out at the end, but I still thought it could be useful."


Introduction

I have been writing websites for a while now, and I have picked up a few tips over the months. One of the most important one is: "For Pete's sake, keep your site files in ORDER!". I previously just copied and pasted the formatting and scripts from document to document - until I wanted to make a minor course correction to the colour of one of my <h1> tags, at which point I realised that I had twenty-odd copies of the CSS style to rename. It is such a nightmare trying to organise everything - until I came across Microsoft's Visual Web Developer 2008 Express Edition. It is honestly the best thing since Microsoft decided to steal the GUI Interface from Apple. I am so glad I discovered it - my life has never been the same again.

So, you may ask, what on earth is the big deal about this program, anyway? Well, the great thing about it is that it takes pretty much ALL of the work out of writing web pages. And I mean all of it. The even better thing about it is that it is not only a WYSIWYG (What You See Is What You Get) program - it is a full-blown HTML, JavaScript, ASP, Visual Basic and C# code editor as well! For all you non-programmers out there, these are various languages used to make things happen in your websites (and in normal programs, too). It integrates everything so well that you can quickly and effectively compile a website. And isn't that just what life's about?

Getting Started

So, grab a copy of it from the Microsoft Website at Downloads (note that the download link is direct and will start the download immediately [hopefully]) and install it to get started. Load it up (it might decide to configure itself when you first load it) and you should find yourself on the Start Page tab. Click on New Web Site on the File menu, and in the resulting window, click on Empty Web Site. If you are an advanced programmer, you may want to create an ASP .NET web page (with an extension of .aspx instead of .html), which can be programmed in a .NET language, but most of the time, you just want to stick to a normal .htm or .html page. After you've opened an empty web site project, you need to create a new page to go inside it. To do this, click on New File on the File Menu, or the Add New Item icon on the toolbar. Gosh - look at all those different types of file you can add! For now, though, click on the HTML Page icon. Type a relevant name for the page into the text box, and give it a .html extension - the program seems to prefer .htm, but .html is more modern and widely accepted by all browsers. There should be a nice new tab opened, containing your web page. Congratulations - you are now ready to begin creating your website! Read on to find out how!

The Interface

Before we actually start writing our web site, it's worth taking a quick look at the inner workings of the program. This type of application is also known as an IDE (Integrated Development Environment) because it 'integrates' all the different aspects of the web site together, such as design, style, source code... I bet you're drooling with excitement at the thought already. Now, the IDE consists of a main centre pane, which displays the code/design of the file you are currently editing. On the sides, there are more sets of tabs. These can be left open, or told to hide away when not in use, by clicking on the small pin icon when they open up. On the left you should see the Toolbox, CSS Properties and Manage Styles tabs, and on the left there should be the Solution Explorer, Database Explorer and Psroperties window. Of these, the tabs on the left are the most useful (and perhaps the Properties tab on the right, too). To change which tabs are being displayed, click on the View menu.

As you open or create new files (such as web pages and JavaScript files) they will appear in the Solution Explorer. Double-click on the file to show it in a new tab in the main pane (ha, that rhymes - main pane, main pane, MAIN PANE!). To close a tab, click the small X (not the big red one) on the same level as the tabs. There are also a number of useful (and useless) toolbar buttons at the top - you can explore those yourself.

	This image has been resized. Click this bar to view the full image. The original image is sized 1280x800.


At the bottom, there are three buttons: Design, Split and Source. These are extremely useful, so you should try to remember them. Assuming you have an HTML or ASP .NET web page open, clicking Design will show you the page in a way similar to a word processor - you can 'see' the page, and you can edit it here. Click on the Source button, however, and you will instead be shown the code that makes up the page - useful for editing scripts or whatnot. Lastly, clicking Split will show you both views at once - if you make a change to either, the other will be updated automatically (though if a message to synchronise them appears, you may need to click on it). On the same row will be some markup tags displayed. There will not be very many yet, but as your page develops, they will appear more. To select any element on the page, click on its relevant tag on the bottom.

When you're writing the page, it makes sense to hide all the tabs on the side and bottom, to save screen space. However, if you run out of room, you could either: a) buy a new monitor, or b) change the screen's resolution to a higher value. Find a screen layout that works for you - remember, any of the windows can be dragged, dropped, tabbed, hidden... you can arrange things however you like. The default setup is a good one, though - just remember to hide the tabs you don't need at the moment.

So now you've got the hang of the program's interface, you can actually start beginning your website! Of course, you will have CSS Styles, JavaScript, dynamic event handlers... eventually. For now, though, we're just going to build a basic page.

Writing The Web Page

All right, all right - I know I have been putting it off for as long as possible - we're actually going to WRITE OUR WEBSITE! Yay! It's going to be relatively simple, I agree - but it will still be a web page nonetheless. Now, make sure you have your blank HTML Page open in the centre tab (if not, double click it in the Solution Explorer to open it). We're going to write the basic page first, then add some CSS later. I think it would be easier if I showed it in a step-by-step example, as opposed to a long page of text. To begin, open the Design view, and follow these instructions:

1. From the 'Block Format' drop-down list in the top-left corner of the screen, click "Heading 1 <h1>". Type the title of the page, and press Enter. On this line, choose "Heading 2 <h2>" and type a caption, or your name, into the box. Click Enter again.

	This image has been resized. Click this bar to view the full image. The original image is sized 730x181.


2. Type some test text into the paragraph tag, which is automatically inserted when you click Enter. Make it of reasonable length, and without any formatting. Create extra paragraphs by pressing Enter as necessary.

	This image has been resized. Click this bar to view the full image. The original image is sized 1104x296.


3. To add an image, click on "Add Existing Item" from the Website menu at the top, then find the image you want to include. Next, click and drag the Image item from the Toolbox. With this selected, open the Properties window, and the <img> tag should be shown.

4. Edit the "src" property to change the location of the image. Other properties, such as Width and Height, are self-explanatory.


Conclusion

Hopefully this will be enough to get you started using VWD - as you become more experienced, explore the features. There is excellent, and I mean excellent, CSS support, and JavaScript is also supported, with full IntelliSense support. Have fun!

[chili5]

I wasn't using </center> to do anything actually. I would use margin if I was going to. I don't know why I have it copied. lol

</center>

[Xav]

Ok.

http://xavierhussain.co.uk/resources/_wsb_615x447_MeOnDrums.JPG

[chili5]

</center>