Practicum Guideline for ASP. Net with VB Handout 3 Making ASP website with the existing templates

Size: px

Start display at page:

Download "Practicum Guideline for ASP. Net with VB Handout 3 Making ASP website with the existing templates"

Randell Erick Hubbard
5 years ago
Views:

Practicum Guideline for ASP. Net with VB 2008 Handout 3 Making ASP website with the existing templates One of the most difficult steps in developing a website is the web-design.

1 Practicum Guideline for ASP. Net with VB 2008 Handout 3 Making ASP website with the existing templates One of the most difficult steps in developing a website is the web-design. It is not easy to make our website not only easy to be access, but also look nice and can attract as many as visitors. It requires not only some knowledge about web programming, such as CSS, html, flash etc, but also design skill. ASP allows us to develop a website using the existing templates available in internet. In this modul, you will learn how to make masterpage and contentpage using templates. 1. Open an empty website project using visual basic 2008, because we will make a masterpage 2. Find any template available in internet. In this lab practice we will use the apple core template from open source web design (OSWD). Go to this link: and download the template below:

3. Open the zip/rar document as save the apple_core folder on your desktop. Inside the folder you will find 2 files: index.html and main.css 4. Copy the main css to your website folder 5.

Right click your folder in solution manager, choose the "Add New Item" 7. Choose "Master Page", Change the file name to "MyMasterPage" and click "add" button 8.

2 3. Open the zip/rar document as save the apple_core folder on your desktop. Inside the folder you will find 2 files: index.html and main.css 4. Copy the main css to your website folder 5. Go to the solution explorer in visual studio, right click at the root folder and click refresh folder. The main.css will appear in the project. 6. Right click your folder in solution manager, choose the "Add New Item" 7. Choose "Master Page", Change the file name to "MyMasterPage" and click "add" button 8. Drag and drop main css to the head of MyMasterpage.aspx. A line will be automatically created as: <head runat="server"> <link href="main.css" rel="stylesheet" type="text/css" /> <title>untitled Page</title> <asp:contentplaceholder id="head" runat="server"> </asp:contentplaceholder> </head>

9. Open the index.html in Apple_Core folder with notepad.

the MyMasterpage.aspx, after this form statement.

Go to design mode and see what happened.

3 9. Open the index.html in Apple_Core folder with notepad. Copy all the <div> within the <body> and paste to body in the MyMasterpage.aspx, after this form statement. <form id="form1" runat="server">. Go to design mode and see what happened. Now we have a masterpage with apple_core design as shown in picture below. 10. Now, we have to modify the masterpage according to our purpose. Go back to source mode. 11. Delete the link3 and link4 in div <header>: <div id="header">

4 <p> <a href="#">link 1</a>. <a href="#">link 2</a>. </p> 12. Change the title to "My E-Business" in div <subheader> <div id="subheader"> <p>my E-Business</p> 13. in div <menu>, change menu 1 to "home", menu 2 to "About Us", menu 3 to "Products, and menu 4 to "Contact Us". Delete menu 5 and 6. <div id="menu"> <p><a href="#">home</a> <a href="#">about us</a> <a href="#">products</a> <a href="#">contact Us</a> </p> 14. Delete all <div id="left_column"> 15. Delete all the content of <div id="right_column"> Change the footer div to your name and ID <div id="footer"> <center>muhammad Ikhwan Jambak</center> 16. Change the links to university of Nizwa and Google. 17. Move the content holder to right column. <div id="right_column"> <asp:contentplaceholder id="contentplaceholder1" runat="server"> </asp:contentplaceholder> 18. Change the ContentPlaceHolder to MyContentPlaceHolder. 19. Now, we can create the content page. In this lab, we will create the home.aspx and aboutus.aspx. 20. Right click to the MyMasterpage.aspx, click "Add Contentpage". Change the the file name default.aspx to home.aspx. 21. Put some content in the content place holder, i.e. pictures or company description. Create another content page by repeating the above steps, and give the name aboutus.aspx. Give some pictures and business description. 22. In masterpage, change the URLs in the <div id="menu">, and define the "home" and "about us" as below: <div id="menu"> <p><a href="home.aspx">home</a> <a href="aboutus.aspx">about us</a> <a href="#">products</a> <a href="#">contact Us</a> </p> 23. Now, you can run your website! Goodluck

If, in debugging state, your browser not showing the website. Do not panic.

5 Note: 1. For next lab, you should complete the website by making the web form for products. Use table to arrange your content place holder. Give some photo/pictures of product example and also price. 2. If, in debugging state, your browser not showing the website. Do not panic. It could be because the environment not allows publishing website. Web Server will be appear when you click debug button. Right click the server, and click "Open in web browser". Your web will be appear in your default browser. If not, you will see weblisting:

6 3. Click the "home.aspx"

5 Snowdonia. 94 Web Applications with C#.ASP

5 Snowdonia. 94 Web Applications with C#.ASP 94 Web Applications with C#.ASP 5 Snowdonia In this and the following three chapters we will explore the use of particular programming techniques, before combining these methods to create two substantial