ASP.NET | Part 2

1. So now we’ve got everything settled and we’re going to do the design of our website as of the moment. Once again, the first time you successfully setup your web application using the template in Visual Studio, the primary thing you will then see at first is the Source code of the Default.aspx file of your webpage.

You have the option to whether view the Default.aspx file’s Source code (by clicking the “Source” button below) or the Design view (by clicking the “Design” button below) or both (by clicking the “Split” button). In Source Code view, this is where you can program Visual Basic.Net/ASP.Net/HTML/CSS codes or any other that you can use within your web application. In Design view, however, you can use the usual easy-to-use drag-and-drop feature of the Visual Studio IDE. Instead of typing HTML codes over and over again, you can drag and drop HTML elements or modify their attributes through the Properties window on the lower right corner.

1.1. As you can see, there’s already a preloaded design on the web application we just created a while ago, thanks to the template we used. The web application that we just created is equipped with a blog-like theme template, that’s why there is a banner that says “MY ASP.NET APPLICATION”, as well as menu items like “Home” and “About”. Also, there are texts written on the body of the page which says “WELCOME TO ASP.NET”. We will try to modify them soon. In fact, we will be adding more menu items, plus their corresponding web pages.

1.2.First, we will modify the banner of our web application. Originally, the text “MY ASP.NET APPLICATION” is written on it. We will then try to change it to something more appropriate, depending on the theme of the website we are trying to make. And because this is a beginner’s tutorial, we will just change it to just a simple title of a website. For this tutorial, let’s use my wordpress blog’s title, MISTERCOMPUTER. For my students, please use any title you would like (take note, the title you will use should be connected to the content of your website).

Now to change the banner’s text, we will open the Site.Master file from the Solution Explorer. The Site.Master file contains the codes of the banner.

Once you open the Site.Master file, Visual Studio will automatically show its codes. Take note that you can still view the Default.aspx file’s codes and design, by clicking on its tab menu on the upper left corner, right next to Site.Master file’s tab menu.

There are two ways on how to change the title banner of your web application. Any of the two methods gives the same result.

1.2a. In Design Mode, you can simply highlight on the “MY ASP.NET APPLICATION” text and rename it.

You can change font, font size, style, color, or any other formatting tools by using the toolbar located below the menu bar of the IDE, all of which will play a very useful role in your website’s appearance. For this example, I used the following style: Font=Broadway; Size=xx-large; Bold; All others set to the default. You can use your own preference for this.

1.2b. Alternatively, in Source view, you can use your HTML and CSS coding skills. Instead of just clicking listboxes, we can modify the property of the object by typing HTML codes and attributes. For those people not familiar with HTML, I do not recommend this method and stick with the first one, which is quite easier.

The highlighted text in the screenshot are the HTML codes of the title we just finished modifying. Apart from the HTML tag (which is used to make the text in Bold form), we do not see here the codes for the size and style of the text we just modified.

That is because; ASP.NET uses CSS (Cascading Style Sheets). CSS is used to as the container of the styles we use in particular elements of the website. CSS is a bit hard to understand, so for this tutorial, we will not use CSS, but HTML. To use HTML to modify the properties of the text, simply type the starting tag before the text, and the closing tag right after the text. Example: which makes the same result as method 1.

In Split mode:

1.3. Now since we have our title already set, the menus are our next objective. We will try to make things a lot easier. As you can see, there are already 2 preloaded Menu items in our web application, “Home” and “About”, respectively. In Source code, you will see HTML codes that says the following:

They are ASP.NET codes in nested form. Under , you see ASP.NET codes for MenuItem which has text value as “Home” and “About”. You can change the text from “Home” to, like, “Main” or something. We can also delete the whole HTML statement that means deleting that particular menu item. You can also see the NavigateUrl attribute of the MenuItem. By using NavigateUrl, you can redirect the the web application into a certain webpage once a user clicks on that menu item. For example, in our template we have a “Home” menu item that when a user clicks on it, the Default.aspx webpage will show up in the browser.

In this tutorial, we will not be deleting those two menu items, as they are common in most websites, as well as, they will play an essential role in our web application. Anyhow, you are free to rename them as you like, but please be cautious in the NavigateUrl attribute of each MenuItem.

1.4. Now let’s try to add another menu item. First, we should consider the particular web page that will open up once we click the new menu item. We will add another .aspx file in our projet. To do that, simply hover to Solution Explorer, right-click on your Project’s name (in our example, “Dayapan”),

After clicking “New Item”, the Add New Item dialog box will show up. Choose the following options: Web Form; Name: CSWD01_Tutorial.aspx;

Don’t forget to click the Add button to add the new webpage to your project.

Next thing to do is to copy the existing codes of the Default.aspx to our newly added CSWD01_Tutorial.aspx webpage. We do this to make things easier; we do not need to start from the scratch. To do this, simply go to the Source View of Default.aspx and copy and paste its codes to CSWD01_Tutorial.aspx.

This will delete all the preloaded codes in CSWD01_Tutorial.aspx.

Now change the following codes:

To:

Also change the following codes:

Welcome to ASP.NET!

To:

CSWD01 ASP.NET Tutorial

Delete the following codes:

Coz’ we will try to add contents later on. Now if you follow my instructions properly, the Source view of CSWD01_Tutorial.aspx should look like this:

Design View:

Now that our newly created webpage is ready, the next thing to do is to create its menu item, and to link them together. To do that, follow the next instructions.

Back in Site.Master file, in Source View, copy and paste below it, just before the codes for “About” menu item. Then change the codes to:

Your Site.Master codes should look like this:

And in Design view, it should look like this:

Notice that we have successfully added a new menu item in our web application, namely “CSWD01 Tutorial” in between the “Home” and “About” menu item. Optionally, you are free to name them as you like. Now let’s try to test if during runtime, when we click that menu item, the webpage that we created a while ago will show up. To do that, simply press the F6 button in your keyboard, and your browser will show up, plus the web application and the Home page.

Now click on the “CSWD01 Tutorial” menu item. If the webpage below (picture below) showed up, then that means you have successfully followed my instructions and learned simple ASP.NET design coding. If not, then you’ve made something wrong.

Now that’s the second part of the tutorial. You have learned to add webpages and menu items, so you are now free to work around your web application and try to experiment it yourself. You should also try to think of the theme of your website, whether you’re participating in ThinkQuest or not. The next thing we will do is to add more menu items and content. We will be filling out the Home and About pages. Til’ next time!

 

|> Incubus – Stellar

Advertisements

About mistercomputer

I'm Ken. Blogger. Programmer. Instructor. Gamer. Lover.

Posted on March 2, 2012, in Weblog and tagged , . Bookmark the permalink. 5 Comments.

  1. sir pwede bang isend nalang sa email? tska sir di ko rin alam yung email nyo… ^_^

  2. nice tut sir! 🙂

  3. San isesend pag tapos na ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: