Jumpstart: How to approach site layout

Designing a well thought site layout may be more important than you think, when your projects get deeper than you assumed. Beside the fact that it usually gets deeper than you initially thought (project never stays as it is), clients have the tendency to demand something at the very end of the project and expect it to be magically happening with one click. So you probably would not want to change the whole layout when your client wants some part of the website wider, shorter, completely out, completely in or some other option which is slightly possible.
It may be handy to keep in mind that in order to increase control over your website, it's vital to divide it into several div's rather than trying to control it as one big division and trying to move things around. This way you will adjust only the related division in case of a change.
We can give a simple stylesheet example such as:

body
{
background-image:url("bg3.jpg");
font-family:Corbel;
font-size:medium;

}
#main
{
background-color:Teal;
margin:0 auto;
width:1200px;
height:640px;

}

#above
{
margin:0 auto;
width:1000px;
height:300px;
margin-top:15px;

}

#below
{
margin:0 auto;
width:1000px;
height:300px;

}


#upLeft
{
background-color:Aqua;
width:500px;
height:300px;
float:left;

}

#upRight
{
background-color:Silver;
width:500px;
height:300px;
overflow:auto;
}

#lowLeft
{
background-color:Lime;
width:500px;
height:300px;
float:left;
}

#lowRight
{
background-color:Fuchsia;
width:500px;
height:300px;

}

which should turn out like:




Ugly huh? Now it's up to you to adjust anything you may want from there. You may divide the site according to your needs. It may be a good idea to give margin to your main background division to make it appear in the centre depending user's screen resolution.
You achieved this with:

margin:0 auto;

which automatically places the div in the middle of the screen measuring it according to the right end of the screen.

Whatever changes you may do, it would be time saving and less complicated to do them at the stylesheet and leave the code side to your form, this way in long term you will know what is written where and you may adjust it according to your needs without spacing out from your on hand work, just like the same logic behind Data Access Layer(DAL).

How to create contact forms for your websites

Let's start with something simple. You want to create a contact form for your users but having trouble with your hosting provider, because they either charge you or just having problems using their SMTP clients. No worries, Google provides free SMTP service, because they are simply a caring and giving community to all of their users worldwide. No that's not true, they literally are making money of you because you're reading your mails. But you can't blame them because they are providing better service than others can you? You write a leaner and user friendlier search engine or e-mail account and you will make money on the rest of the world too.

Back to our case, if you want your users to send mails throughout your site without publishing your e-mail address you will have to use these following classes:

MailMessage
MailAddress
SmtpClient
NameValueCollection
NetworkCredential

Let's say your form is as following:

When the submit button is clicked we will have to use a SMTP client to send our mail.
Following code should do the trick:


MailMessage msg = new MailMessage();
msg.From=new MailAddress(TextBox5.Text,"");
msg.To.Add("yourAddress@gmail.com");
msg.IsBodyHtml = true;
msg.Subject = ("My contact form");
msg.Body = (TextBox1.Text + TextBox2.Text + " @ "+ TextBox5.Text + " has submitted the following information:
" + TextBox3.Text +"
"+ TextBox4.Text+"
"+ TextBox5.Text+ "
Regarding: "+ DropDownList1.SelectedItem+"
"+ CheckBoxList1.SelectedItem.Text);

SmtpClient sc = new SmtpClient("smtp.gmail.com", 587);
NameValueCollection col = new NameValueCollection();
col.Add("info", "inf");
msg.Headers.Add(col);

sc.Credentials = new System.Net.NetworkCredential("yourAddress@gmail.com", "yourPassword");
sc.EnableSsl = true;

sc.Send(msg);



Here you go, you've got a mail from your user. Gmail uses ports 465 and 587 for SMTP access. You should adjust your mail body according to your needs.

off we go

encounter bytes and strings more than protein based organisms and love it. you've much to give and take. let's begin.