0
آموزش طراحی وب سایت از ابتدا در asp.net قسمت اول
آموزش طراحی وب سایت از ابتدا در asp.net قسمت اول
سلام همراهان ایران گنج در این قسمت قست داریم تا یک وب سایت را به صورت حرفه ای از ابتدا و بدون استفاده از ابزار ها و کامپونت ها در Asp.Net به همراه سی شارپ و Sql server 2008 طراحی کنیم.
نرم افزار های مورد نیاز:
در ابتدا ما نیاز به نرم افزار های داریم که ما از نرم افزار C# 2012 و Sql Server 2008 استفاده خواهیم کرد.
توجه داشته باشید که ابتدا شما باید IIS را روی سیستم خود نصب کنید که کافیه سی دی ویندوز را داشته و در contorl panel در قسمت Programs می توانید این کار را انجام دهید.
ایجاد صفحه master page:
شما حتما در وب سایت ها دیده اید که تمام صفحات به یک شکل می باشند و فقط وسط صفحه تغیر می کند برای این کار شما باید از master page ها در سی شارپ استفاده کنید. بعد از ایجاد صفحه master page وقتی که می خواهید صفحه جدیدی را اضافه کنید تیک گزینه select master page را زده و سپس master page مورد نظر را انتخاب کنید.
طراحی قالب سایت:
برای طراحی قالب سایت شما باید ظاهر سایتان را روی کاغذ کشیده و سپس آن را به تگ های html تبدیل کنید. برای این کار از 5 تگ div استفاده می کنیم و از جدول استفاده نمی کنیم برای این که سرعت اجرای سایت را پایین می آورد.
در قسمت master page تگ های ما به صورت زیر خواهد بود.
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage"%> <html> <head runat="server"> <meta charset="utf-8"> <link href="App_Themes/main/masterpage.css" rel="stylesheet" /> <title>iranganj</title> <asp:ContentPlaceHolder id="head" runat="server"></asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div class="wrapper"> <div class="header"></div> <div class="right_menu"></div> <div class="main"> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div class="left_menu"></div> <div class="footer"></div> </div> </form> </body> </html>
نکته:
سپس شما نیاز به اضافه کردن css به صفحه را دارید که قبل از آن شما باید پوشه های مورد نیاز را به پروژه تان اضافه کنیید با کلیک راست روی پروژه تان و انتخاب گزینه Add و سپس Add Asp.Net Folder شما پوشه های را که نیاز دارید اضافه می کنید ما فقط themes را اضافه می کنیم. سپس داخل آن یک فایل css اضافه می کنیم.
کد css به صورت زیر می باشد:
.header
{
width:1100px;
height:1100px;
background-color:green;
float:left;
}
.right_menu
{
width:250px;
height:1200px;
background-color:#06e6e0;
float:left;
}
.main
{
width:600px;
height:1200px;
background-color:#fff;
float:left;
}
.left_menu
{
width:250px;
height:1200px;
background-color:#06e6e0;
float:left;
}
.footer
{
width:110px;
height:50px;
background-color:#06e6e0;
float:left;
}
.wrapper
{
width:1100px;
height:1500px;
float:left;
}
این مطلب را به اشتراک بگذارید...
نظر / سوال