How To Give Background Image In Aspx Page With Vb

This is the 2nd lesson in a serial of gratuitous tutorials nigh programming your own website using Microsoft ASP.Cyberspace and Visual Studio Express, which is a free programming environment available from the Microsoft website. For more information about downloading and using the ASP.Internet programming environment, see the introduction to this serial, which is located here.

In tutorial one, we talked about the basics of programming an ASP.Cyberspace spider web page and we built our first website folio. In this tutorial, we will add images to that website and brand a push out of an image. So open the website that we started in lesson 1 and let's get started.

Paradigm Basics

Before we start calculation images onto our website, let'due south talk just a picayune nearly web images. A web image is not actually an image at all, at least not like a photograph. Information technology's really a numeric representation of an epitome, where the image is made up of lots of dots (like in a newspaper). The image is stored as a long string of ones and zeros, where each dot on the image is represented by some group of numbers. A dot on a spider web image is called a pixel, and it is roughly the size of the period at the end of this sentence. The size of an image is measured by the number of pixels it contains. All web images are rectangular, and they are measured in width and summit. You will oftentimes see these sizes in the information about an image, such as 32 x 32 px. Each pixel in an prototype takes upwards storage infinite on the spider web server and on the user's computer. Then the larger an epitome is, the more space information technology takes upward on the computer. As well remember that when a user looks at a spider web page, every image on that website has to be moved from the web server over phone lines and satellites to the user web browser. And so the larger an paradigm is, the longer it is going to take to testify up on the spider web browser. This can really tick off users who are waiting to meet a web page. The point of all this is that y'all need to be careful not to use big images on your web site unless it is absolutely necessary.

In that location are another things that will help your images be speedier and smaller. 1 is to use compressed images. These images use a kind of digital magic to reduce the corporeality of infinite they take up. There are a couple of compressed paradigm types that are common on the web. There is one called a "ping" image. These images end in the extension .png. In that location are also many "jpeg" images on the web. These images end in the extension .jpg. I prefer to use ping images where possible, however jpeg images are also a good alternative. Some other way to make your images faster is to keep a copy of them on the user'southward web browser after the first time that they come up to your website. This is called image caching. Fortunately, almost web browsers cache images automatically, unless the user tells the browser non to use a cache. So for virtually users, your website will be much faster to view after the start time they visit it, because the images and other parts of your site will be in their spider web browser cache on their machine.

Now that yous know a little bit nigh spider web images, it's time to add together some images to the website that we accept been working on. Open up upward your website project in Visual Studio and bring upward the default.aspx web page. Make sure you modify over to the source tab in the editor. If you don't know how to practise this, you might want to read over the previous tutorials in this series.

Organizing Your Images

The first affair nosotros need to do is to upload an image onto the website to employ every bit an case. I like to go on all of my images in i place on the website. And so permit's add a binder to the website to concord images. To do this, get to the Solution Explorer and right click on the solution name, which will be WebApplication1 if you didn't change it. It volition also be in bold on the Solution Explorer. When you correct click, you will encounter a menu with the "Add together" option. If you lot hover over the "Add" option with your mouse, some other carte will open upwards. Ane of the options on this sub-menu will be "New Folder". Select this option. A new folder will show up in the Solution Explorer and it will be highlighted. Click in the box around this new folder and type "Images". This will rename the folder to Images. Your Solution Explorer should now look like Figure 1 below.

Now, let's add an epitome to this folder. The get-go matter nosotros are going to add to our website is a logo at the tiptop. As an aside, if you are serious about creating websites, you are going to need to invest in an application that will let you lot create and manipulate web images. I apply Corel PhotoPaint, just at that place are several other on the market, including Adobe Photoshop. For the purposes of this tutorial, allow'south use a graphic that I created in PhotoPaint a while ago. Information technology is shown in Figure 2 below. Y'all can right click it and relieve it to your local PC and so yous can add together it to your website afterward. Be certain to annotation where yous save information technology on your machine, yous will need to know that in a minute. I similar to put things on the desktop if I am just using them temporarily. Just you lot might have another thought.

First nosotros will exercise the simplest affair that you can do with an image. We will add together it to the spider web page. To go the paradigm onto your web folio, beginning nosotros need to add together it to the Images binder on the web site. To practice this, go to the Solution Explorer and right click the Images binder that you created above. Now hover over the Add together item in the menu, and select "Existing Item" in the sub-menu. A file open dialog will come up, and it will show y'all the files on your local reckoner. Now you need to detect the copy of my image that you lot saved to your PC. Once y'all find it, highlight it and printing the "Add" push button. This should create an entry under the Images binder in your Solution Explorer, which volition at present await like Figure two beneath. Now that yous know how to add images to the web server, you tin can add together folders within the images folder, add more than images, and organize everything to your liking.

Now let'due south have the adjacent stride and make the image that we simply added to the spider web server actually show up on our spider web page. To practise this, go to the default.aspx spider web page and let's add together an Image holder from the Toolbox. Nosotros are going to put information technology in the Header of the page, so create a blank line between the <asp:Content> tag that has the ID="HeaderContent" and information technology's respective </asp:Content> tag. If you don't know how to do this, refer to Tutorial One. Elevate an "Image" widget from the Toolbox and drop it on the blank line you just created. It will look something similar this (retrieve that spacing doesn't matter in ASP.NET source code):

<asp:Image runat="server"></asp:Epitome>

Now just after the quotation mark behind the word server, insert the words ImageURL="~/Images/jrslogo.png". Include the quotation marks. Now the Epitome code should look like this:

<asp:Image runat="server" ImageURL="~/Images/jrslogo.png"></asp:Paradigm>

This tells the web server that when this prototype is loaded, it should contain the image located at the ImageURL. The tilde (~) at the beginning of the URL indicates to the spider web server that the folder to await in is in relation to the domain proper name of the website, whatever that domain name might be.

To see your new paradigm in activity, printing F5 or otherwise bring the website upwards in the browser. It should look something similar Figure iii below. I've also shown the source code below, so that you can cheque your piece of work.

So the paradigm is on the web page at present, merely boy is it ugly. It's stuck up in the corner and it doesn't really wait like office of the site pattern at all. Why is that? Information technology's because this website uses a feature of ASP.Net called "Master Pages". A Primary Page is a special web page that "wraps" all of your other web pages, and adds things such as logos, menus, titles, and other stuff. We placed this image outside of the Main Folio, which causes information technology to bear witness up above the area in the Master Page where the logo should become. Let'south make this a picayune more clear for you.

If you expect in your Solution Explorer, you will see a file called "Site.Principal". This is the Main Page for our web site. Double click it and it will open in the editor window. Information technology should await similar Figure 4 below.

The first thing to notice in the Site.Master is that the words "My ASP.NET Application" are here. Nosotros know these show upwardly on the website when we run it. And if you have clicked around the website, y'all volition see that these words appear on every page of the website. That's because every page of the website references the master folio at the meridian of its source code, which you tin see for yourself if you look at the default.aspx source again. There is a holding at the peak of the default.aspx file that says, "Masterpage=" and it is pointed to ~/Site.master. That makes this Site.master file load forth with default.aspx, which in turn lets us encounter the championship from the Site.primary on the default.aspx folio. Become it?

Too notice that there is something called a ContentPlaceHolder in the Site.chief file and it has a property of "ID=HeadContent". It is i of the first things in the Site.principal file. Information technology is also above the title. Flip back over to default.aspx and await at where we put the image. The Content area where we put the Paradigm has a ContentPlaceHolderID of "HeadContent". This tells the web server that annihilation in this content area will be inserted into the master page in the ContentPlaceHolder of the same name. That'southward why the prototype is showing up above the title. We probably actually want our logo to supersede the generic title on the website. So let's brand that happen.

In the Site.master file, delete the championship, "My ASP.Cyberspace Application", and delete the <h1> and </h1> tags around information technology. These tags tell the web server to make the text larger on the web page, and we don't demand them with an image. Now go to default.aspx, highlight our Epitome tag, and Cut information technology from the page using Ctrl-X. Now become back to Site.main and Paste the Image into the area where the championship used to be using Ctrl-Five. Now press F5. That looks much better. At present your image is in the header surface area of every web folio on your site. Figure 5 shows this new web site expect and the source code for the Site.master with the Image code replacing the title.

So that'south pretty cool. Now y'all know how to add images to a web page, or to the Site.master file. And yous've learned a trivial flake about images and html markup. That's a lot to larn in 1 sitting, but earlier we quit this lesson, at that place is one more thing I want to evidence you lot.

Go back to your default.aspx page source view. Let's replace the manifestly old push on this page with a nicer button that has an image on it. To do this, drag an ImageButton from the toolbox and place it right subsequently the existing Push button on the folio. Copy the onclick event code from the existing button and put it into the markup for the new ImageButton, so information technology looks like this:

<asp:ImageButton ID="ImageButton1″ runat="server" onclick="btnGo_Click"/>

Now, add an prototype for the button to your Images folder merely like we added the logo to the Images folder. You tin can wait back if you need to refresh your retention. It can exist whatever epitome yous want. I only suggest that you continue information technology small (say sixteen x sixteen pixels). You lot can get an image from Google Images if you demand i. Just Google something like "Get push button paradigm small". If you hover over an image in the Google search results, it will tell you lot what size the paradigm is. Right click an prototype and save it to your desktop, so add together it to the images folder in the Solution Explorer.

Once you have the image saved to the Images folder, add a property to the ImageButton that you only created for the "ImageURL". When yous are done, the ImageButton should look something like this:

<asp:ImageButton ID="ImageButton1″ runat="server" onclick="btnGo_Click" ImageUrl="~/Images/control_fastforward_blue.png" />

Of course, your image name will probably be different than mine, only everything else should await the aforementioned. One time yous accept done this, press F5 and look at your new ImageButton on the website. Cool, huh? Click your new push. You will run into that it works but like your onetime push button, only it looks much nicer. ImageButtons are the most common way to command events on an ASP.Net web folio. They look good and are easy to wire upward to code. And remember, you lot tin can e'er starting time with a regular button while you are developing your ideas, then substitute in ImageButtons with pretty images later. You tin even pay someone to create overnice images for you, so that your entire website has a slick, professional person expect and experience. Figure half dozen shows the completed lesson for today, with the Prototype, the ImageButton, and the source for default.aspx.

I hope you enjoyed this tutorial. Adjacent time, nosotros will add together some more pages to our website, and we will offset using the Menu at the top of the web page. Until then, do with images, and accept fun doing it yourself.