Abnerson+Malivert+Project+2

Objectivetoc
In this project, I am going to build a website for Acts of Love, Haiti (AOL). AOL is a charity co-founded by Lydie Modé, its mission is to help not only the people of Haiti but to also help their local community by collecting food, clothing, and first-Aid supply. I’ve never build a website before and I also don’t know much about HTML, CSS, ASP.NET, or J SCRIPT. This report will cover my steps from knowing nothing to a novice website builder. I had to come up with a design that would be attractive and represent the charity well. I don't know much about website design and I know that there are places where you can get a template for free, but none of them was what I was looking for. I then decided to design the website template. To design the template for the Acts of Love website, I decided to use Adobe Fireworks because of the familiarity that I had with it. I usually use Adobe to manipulate pictures, so I thought that website is nothing but pictures with codes behind them. This is an original template that I spent countless hours working on due to the learning curve of Adobe Fireworks. After designing the website, I had to slice it. Slicing is what turns the picture into html and CSS. Each image and buttons has to be sliced by the slicing tool. The part where the content goes also has to be sliced, we will need it later to use as a background for our content.



1.0 Create An ASP.NET Website
To create an ASP.NET website: I opened visual studios, choose the location for the website, and name the website. This was my first time building a website, I was glad that visual studios was a familiar platform for me to work on. Building a website or an application didn't seem to differ much, except that you are using web forms and also html and css.



There is a default webform and a webconfig file when you first look at the solution explorer. I deleted both files because I needed my webconfig and my default page to be connected to my master page.I then added a masterpage.master and a default page and web.config page that are connected to the master page. From the picture below, you must make sure that you check the select master page option.



2.0 Master Page
A master page gives you the ability to crate multiple web forms without having to add code. Every web form added to your project can select your master page and automatically have all the theme and style of the master page. If you click open the master page, you'll see the html codes that are needed to design the master page. I first linked the master page to my css file, and then i copied all the html codes in the appropriate sections.

The Head element contains the header information about the document such as its title, keywords, description and style sheet.Looking at the code, I used the link element which is used to indicate a relationship to link my css style sheet to the master page and also the head tag contains the jscript that has the swapimage function and a swap imagerestore fuction that is used to change the image of my button on an event where the mouse is rolling over it. the jscript functions are inside the Script element,which is used to respond to user events.

code format="html4strict"  ActofLoveWebsiteLayout4CSS_Slice    

code

The body element is what contains the body of the web form, that is where all the images and buttons are located in their respective HTML elements. a dive tag is what's used to style webpages, you have a div for your footer, a div, for your Header, and one for my background rectangle. The body elements contains a div for my border rectangle, and my background rectangle.

A table element is used to describe the structure of my table like the width, the display of my table. Inside of the table element is my td element. The td element is the table data cell, inside each td is one of my menu button. each td element holds the event that triggers the j script function in the head element. the onmouseout event class the MM_SwapImgRestore function, while the onmouseover calls the MM_SwapImageFunction. The blankspacefordata div is where I will put my asp content into the webpage.

code format="html4strict" 



   <%----%> <%----%>  

 



</asp:ContentPlaceHolder>

code

The image below is what my master page looks like after adding in the above HTML code. ASP.NET includes a great feature that lets you look at the code and the design in a split view; this comes in handy when you want to see what changes are happening to your design when you make a change in the code.



3.0 CSS Style Sheet
The CSS Style Sheet is what brings everything together. In your css file is where you will define your font, location, and every aspect of your website. In the css file, you must tell all the HTML elements above how to behave.I had never worked with CSS before and it took a while getting used to, but when I finally did start to understand how to use it, it made my life a whole lot easier. I still can't style my website in a professional way, but I think with some practice I will be able to create better looking websites with CSS.

Body element is what set everything that's in my body div, it sets the background color, the font size and the padding. The h1, h2, h3 elements hold the style for all my headers. code format="css" body { background-color: #336; font-size: 100%; margin: 0; padding: 0; } body * { font-size: 100%; } h2, h3, h4, h5, h6,blockquote,ul,ol { font-size:100%; font-weight: normal; font-family:Microsoft Sans-Serif; } h1 { font-weight:bold; font-size:18px; color:#9966FF; font-family:Microsoft Sans-Serif; text-align:left; /*background-color:#FF99CC;*/ border-bottom-color:#330660; } h2 { font-weight:bold; font-size:18px; color:#9966FF; font-family:Microsoft Sans-Serif; text-align:left; background-color:#FF99CC; border-bottom-color:#330660; }

code

The blockquote is an element that holds a group of strings, I used it to add data into the master page. code format="css" blockquote {   font-size:18px; color:#330660; text-align:left; margin-left:0px; width:340px; } {   font-size:18px; color:#330660; text-align:left; margin-left:0px; width:600px; height:480px; font-size:100%; font-weight: normal; font-family:Microsoft Sans-Serif; }
 * 1) Blockquote1

code The ul is for unordered list, and the ol element are for ordered list and They are used to style any list item on my page. I use the list to add links contents on my page. And this sections sets how i want them to look. code format="css" ul,ol {   font-size:18px; color:#330660; text-align:left; margin-left:0px; width:150px; }

p { margin-bottom: 1.1em; margin-top: 0; }   margin-bottom: 0; } a:link img, a:visited img { border: none; } div.clearFloat { clear: both; font-size: 0; height: 0; line-height: 0px; } li.clearFloat { clear: both; } ul.symbolList { display: inline; float: left; list-style-type: none; margin: 0; padding: 0; } .AbsWrap { position: relative; width: 100%; } .rowWrap { width: 100%; }
 * 1) main p.lastNode {

code

The #BorderRect ,#bgRect, #Header, #rightsideborder and #lefsideBorder are referring to a div on my master page. The # sign plus the div id is how you reference a div from the css file to the web form. This part of the css file is what styles most of my master page design, it holds the master page borders, header, and footer. code format="css" left: 20px; position: absolute; top: 61px; margin-bottom: 0; border: 1px solid #000; width: 768px; padding-top: 0px; height: 399px; } html > body #BorderRect { height: auto; min-height: 398px; }   left: 21px; position: absolute; top: 62px; margin-bottom: 0; background-color: #fff; border: 1px solid #000; width: 768px; padding-top: 0px; height: 399px; } html > body #bgRect { height: auto; min-height: 398px; }
 * 1) BorderRect {
 * 1) bgRect {

left: 10px; position: absolute; top: 4px; height: 174px; margin-bottom: 0; width: 790px; }   left: 10px; position: absolute; top: 178px; height: 523px; margin-bottom: 0; width: 11px; }   left: 21px; position: absolute; top: 178px; height: 23px; margin-bottom: 0; width: 768px; }   left: 789px; position: absolute; top: 178px; height: 523px; margin-bottom: 0; width: 11px; }
 * 1) Header {
 * 1) LeftSideBorder {
 * 1) NavBar {
 * 1) RightSideBorder {

/*Footer*/ left: 10px; position: absolute; top: 701px; height: 48px; margin-bottom: 0; width: 790px; }
 * 1) ActofLoveWebsiteLayout3_r6_c2 {

code

This section of the css file holds my navigation menu. It places each button at the right place. CSS files makes it easy to put your elements in the right place. code format="css" /*Menu*/

{   left: 21px; position: absolute; top: 178px; height: 23px; margin-bottom: 0; width: 110px; } {   left: 131px; position: absolute; top: 178px; height: 23px; margin-bottom: 0; width: 110px; }
 * 1) HomeBtnImage_s1
 * 1) AboutUsBtnImage_s1

{   left: 241px; position: absolute; top: 178px; height: 23px; margin-bottom: 0; width: 110px; } {   left: 351px; position: absolute; top: 178px; height: 23px; margin-bottom: 0; width: 110px; } {   left: 461px; position: absolute; top: 178px; height: 23px; margin-bottom: 0; width: 110px; } {   left: 571px; position: absolute; top: 178px; height: 23px; margin-bottom: 0; width: 110px; } {   left: 681px; position: absolute; top: 178px; height: 23px; margin-bottom: 0; width: 110px; }
 * 1) OurVisionBtnImage_s1
 * 1) HaitiCherieBtnImage_s1
 * 1) EventsBtnImage_s1
 * 1) DonationBtnImage_s1
 * 1) ContactUsBtnImage_s1

code This section of the css file is where the content on my page are being styled. The blankspacefordata is used as a background image for contents on the master page. I created a dive called updates that hold the "word from our heart" section on the home page. I also styled all the links in this section. code format="css" /*Content*/ left: 21px; position: absolute; margin: 0 auto 20px auto; top: 201px; height: 500px; background-repeat:repeat-y; margin-bottom: 0; width: 768px; } /* Updates*/ {   margin-top:80px; margin-left:20px; width:340px; height:330px; position:absolute;
 * 1) BlankSpaceForData {
 * 1) Updates

}

/*About UsContents*/

{   float: right; width: 600px; height:490px; margin-top:80px;
 * 1) AboutUsContent

top: 0px; position:absolute; left: 110px; } {   margin-top:1px; margin-left:0px; width:100px; height:498px; background-color:#CC66FF; position:absolute; }
 * Box

/* Links */

float: right; width: 200px; margin-top:80px; padding-left: 10px; border-left:dotted:1px:#330660; top:190px; }
 * 1) links {

margin: 0; padding: 0; list-style: none; }
 * 1) links ul {

padding: 5px 0 30px 0; }
 * 1) links li ul {

padding: 7px 10px; background: url(images/img06.gif) repeat-x left bottom; }
 * 1) links li li {

text-decoration: none; }
 * 1) links li a {

text-decoration: underline; }
 * 1) links li a:hover {

font-style: normal; font-size: 9px; }
 * 1) links li i {

font-size: 14px; }
 * 1) links li h2 {

code

4.0 Adding Content to default page
The master page is what you use to create your other pages, if you add content to the master page, every other page that you build will have the same content. You can use the code below so that every page build will know what div the contents are going into. We already know that the blankspacefordata is the div for the content of the website. Just copy the code below to the blankspacefordata div and you will be able to add content to it. code format="css" 

</asp:ContentPlaceHolder> code

Since the default page we created in section 2 is connected to the master page a content place holder is automatically added to it. Inside this code, we will add all of our contents. The contents are already styled in the CSS file. below are the codes for my content.

All of my codes are included in the asp:content element. the element li is what holds the list links on the right side of my website. The div Updates is what holds the elements on the left side of my website. code <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> FROM OUR HEART

We believe that love can conquer anything. When minds are put together along with determination, and drive, we can conquer hunger amongst many other issues that citizens of a poverty stricken country deals with everyday. Acts of Love Haiti, Inc. is a non-profit organization dedicated to providing the less fortunate with food, water, clothing, and hygienic products. With the help of our supporters and volunteers we hope to bring peace of mind to those who do not know where their next meal will come from.

<ul> <li> NEWS <ul> <li><a href="#">News1</a> </li> <li><a href="#">News2</a> </li> <li><a href="#">News3</a> </li> <li><a href="#">News4</a> </li>

</ul> </li> <li> EVENTS <ul> <li><a href="#">Event1</a></li> <li><a href="#">Event2</a></li> <li><a href="#">Event3</a></li> <li><a href="#">Event4</a></li>

</ul> </li> </ul>

</asp:Content>

code Here's a picture of my default page with the contents inside of it:



5.0 Creating About Us page.
In the previous section, I created a master page. The about us page will inherit from the master page. To create a page from your master page, go to add a new item and select web form, then make sure that you have the master select option checked. The new page will look just like the master page, it is an easy way to make multiple pages for a website. I've also added data into the new page. The new page also inherits the master page content element, so I copied the code from the default page to the about us page for the content on the footer, then I added the right content for the about us page on the content holder element.below is a picture of the about Us page created from the master page.



Now to link the button to the pages, I had to go back to the master page source section and change the section below to add the link to the AboutUs page. now when you click on the About Us button it will take you to the about us page.

code format="css" <a href="AboutUs.aspx" onclick="parent.framename.location.href=this.href; return false;";

code

6.0 Summary
This project was a definite challenge for me. I've never build web applications before, so this was definitely a venture. I've always been interested in building websites, but never had the chance or will to go out and do it myself. The most challenging part of this project was the amount of time that was allotted for me to learn a new language. I made mistakes in this project and I am no where near where I a need to be to become a website developer. I've also think that I spent too much time worrying about the template and how the website was going to look, that I had less time to focus on learning the css and html side of it which left me working all day and night to finish. In the next project I will learn from these mistakes and also I will start getting into adding real C# ASP.NET applications into the website.