PDA

View Full Version : مبتدی: ایا کار من در طراحی درست است یا نه (لطفا همه بخونن)



hjran abdpor
جمعه 07 مرداد 1390, 01:37 صبح
با سلام.
من تازه کار در طراحی وب هستم . یه صفحه درست کردم میخواستم ببینم ایا واقعا کار ما در طراحی درست است یا نه !!!!! لطفا همه نظر بدن :


body
{
margin: 0 auto;
padding: 0 auto;
font: normal 0.8em/1.4em Tahoma, Verdana, Arial, Georgia, sans-serif;
background-image: url("image/bg.gif" );

}
#header
{
border-style: none;
/*margin: 0px;
padding: 0px auto;*/
margin:0px;
padding:0px;
width:700px;




}
#content
{
width: inherit;
height: 422px;
padding: 5px;
border-left: 2px solid #5E5945;
border-right: 2px solid #5E5945;
font-family: Tahoma, 'B Titr';
font-size: 10pt;
text-align: justify;
}

#right
{
border-left: 2px solid #5E5945;
border-right: 2px solid #5E5945;
font-size: 10pt;
padding: 10px;
float: right;
width: 222px;
height: 391px;
margin-left: 0px;
text-align: center;
background-image:url('image/sidebar.gif');
background-repeat: no-repeat;
background-attachment: scroll;
}
/*#right2
{

float: right;
margin: 90px 0px 55px 45px;
padding: 10px;
width:20px;
height:20px;
border-left: 2px solid #5E5945;
border-right: 2px solid #5E5945;
}
*/
#left
{
float: left;
margin-left:0px;
padding: 5px;
width: 216px;
height: 387px;
border-left: 2px solid #5E5945;
border-right: 2px solid #5E5945;
background-image: url('image/sidebar.gif');
background-repeat: repeat;
text-align: center;
margin-right: 5px;
margin-top: 2px;
margin-bottom: 10px;
}


#content1
{
width: 780px;
height: 578px;
padding: 5px;
border-left: 2px solid #5E5945;
border-right: 2px solid #5E5945;
font-family: Tahoma, 'B Titr';
font-size: 10pt;
text-align: justify;
float:none;

}

.btn
{

font-size:13px;
font-family:Tahoma,Verdana,sans-serif;
color:black;
width:70px;
background-color:#EEEEEE;
border-style:solid;
border-color:#BBBBBB;
border-width:1px;
text-align:center;

}
.txt
{
font-family:Tahoma;
font-size:10pt;
width:145px;
direction:rtl;
}
.txtl
{
font-family:Tahoma;
font-size:10pt;
width:145px;
direction:ltr;
}
#foter
{
width: 900px;
height: 155px;
vertical-align: top;
text-align: center;

}


a
{
color:red;
text-decoration:none;
text-align: left;
}
a:active
{
color:red;
text-decoration:none;

}
a:hover
{
color:Orange;
text-decoration:none;

}
a:visited
{
color: #000000;
text-decoration: none;
}

p
{
font:ob
}




این هم یه صفحه ی که طراحی کردم:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<link href ="StyleSheet.css" rel="Stylesheet" type ="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>

<style type="text/css">
.style1
{
width: 41%;
height: 15px;
}
.style2
{
text-align: center;
}
.style3
{
width: 100%;
}
</style>

</head>
<body>
<form id="form1" runat="server">
<div>
<div id="header">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Image/banner.jpg"
Height="138px" />
</div>
<div id="content">
<div id="right">
<table>
<tr>
<td style="text-align: center" class="style2">
</td>

<td style="text-align: center">
ورود کاربران</td>
</tr>
<tr>
<td class="style2">
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="TextBox1" ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Width="112px"></asp:TextBox>
</td>
<td style="text-align: center">
نام کاربری</td>
</tr>
<tr>
<td class="style2">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ControlToValidate="TextBox2" ErrorMessage="*"></asp:RequiredFieldValidator>
</td>
<td>
<asp:TextBox ID="TextBox2" runat="server" Width="112px"></asp:TextBox>
</td>
<td style="text-align: center">
رمز عبور</td>
</tr>
<tr>
<td class="style2">
</td>
<td>
<asp:Button ID="Button1" runat="server" CssClass="btn" Text="ورود"
Width="109px" />
</td>
<td style="text-align: center">
</td>
</tr>
</table>

<hr style="width: 233px; height: 3px; color: #FFCCFF;" noshade="noshade" />


<p > لینک ها مفید<marquee direction='up' scrolldelay='1'scrollamount='1'
style="width: 233px; font-weight: bold; height: 188px; text-align:right">

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">اخبار کردستان</asp:HyperLink> <br />
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Default.aspx">دانشگاه ازاد مریوان</asp:HyperLink> <br />
<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/Default.aspx">دانشگاه ازاد کرمانشاه</asp:HyperLink><br />
<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/Default.aspx">سازمان سنجش</asp:HyperLink> <br />
<asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="~/Default.aspx">وزارت کار</asp:HyperLink> <br /></marquee></p>



</div>

<div id ="left">




تصاویر از سخت افزار های فروشگاه<table class="style3">
<tr>
<td>
<asp:AdRotator ID="AdRotator1" runat="server" DataSourceID="XmlDataSource1" />
<br />
<asp:XmlDataSource ID="XmlDataSource1" runat="server"
DataFile="~/Advertisement.xml"
ontransforming="XmlDataSource1_Transforming"></asp:XmlDataSource>
</td>
</tr>
<tr>
<td>
&nbsp;</td>
<td>
&nbsp;</td>
</tr>
</table>


<br />
<table class="style3">
<tr>
<td>
:تاریخ
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</td>
</tr>
<tr>
<td>
<script type='text/javascript' src='azan.js'></script><script language=javascript>function pz() {};init();document.getElementById('cities').select edIndex=12;coord();main();</script>
</td>
</tr>
</table>


</div>
<table class="style1">
<tr>
<td>
<asp:Menu ID="Menu1" runat="server" Height="19px" Orientation="Horizontal"
Width="428px" style="text-align: center">
<Items>
<asp:MenuItem Text="ارتبط با ما" Value="درباره ما"></asp:MenuItem>
<asp:MenuItem Text="شفارش کالا" Value="شفارش کالا"></asp:MenuItem>
<asp:MenuItem Text="عضویت" Value="عضویت"></asp:MenuItem>
<asp:MenuItem Text="مدیریت" Value="مدیریت" NavigateUrl="~/LoginAdmin.aspx"></asp:MenuItem>
<asp:MenuItem Text="صفحه اصلی" Value="محصولات"></asp:MenuItem>
</Items>
</asp:Menu>

</td>
</tr>
</table>


<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<br />
</div>



</div>
<p class="style2">
&nbsp;</p>
</form>
<p class="style2">
Copy Right IranHost 2010-2012</p>
</body>
</html>







ایا کار من درست است در طراحی ؟؟؟؟؟؟؟؟؟

mr.zenith
جمعه 07 مرداد 1390, 13:45 عصر
سلام
کار شما توی div ها خوب هست فقط نمی فهمم چرا اینقدر جدول توی کار استفاده شده؟؟؟

hjran abdpor
جمعه 07 مرداد 1390, 14:29 عصر
با سلام.
ممنونم که جواب دادین. جدول را بیشتر به خاطر چیدمان صفحه استفاده کرم که بهم نریزه . خودم میدونم که یه جای کار عیب داره وی نمدونم کجا !!!!!! چطوری با div مثل جدول رفتار کنم که سطر و ستون داشته باشه که دیگه از جدول استفاده نکنم ؟؟؟؟؟؟؟؟؟؟؟؟

mr.zenith
جمعه 07 مرداد 1390, 19:37 عصر
شما می توانید دور div را خط بکشی اما وسطش نه.
اگر باید مثل جدول مطالب را جدا کنید و خط بکشید جدول بهتره

understand
شنبه 08 مرداد 1390, 11:14 صبح
با سلام.
ممنونم که جواب دادین. جدول را بیشتر به خاطر چیدمان صفحه استفاده کرم که بهم نریزه . خودم میدونم که یه جای کار عیب داره وی نمدونم کجا !!!!!! چطوری با div مثل جدول رفتار کنم که سطر و ستون داشته باشه که دیگه از جدول استفاده نکنم ؟؟؟؟؟؟؟؟؟؟؟؟

سلام دایو رو هم از طریق خاصیت float می تونی مثه جدول کنار هم بذاری
اینجوری ستون هارو میسازی از لحاظ سطر هم که مشکلی نداره

mamali-mohammad
شنبه 08 مرداد 1390, 12:49 عصر
چرا تیبل زدی ؟
div کار کن

hjran abdpor
یک شنبه 09 مرداد 1390, 00:04 صبح
میشه مثال بزنید!!!!!!!!!!!

ali helali
یک شنبه 09 مرداد 1390, 13:37 عصر
این هم مثال جدول با div

<div style="float:right;width:20%;"></div><div style="float:right;width:50%;"></div><div style="float:right;width:30%;"></div>
اینجا یدونه سطر با 3 ستون که پهناشم خودت تعیین می کنی و همشون به سمت راست چسبیدن.