ورود

View Full Version : طراحی masterpage


veronika
چهارشنبه 10 شهریور 1389, 14:01 عصر
سلام دوستان
من میخوام در مستر پیج یک ستون سمت راست و یک سطعمودی هم در بالا داشته باشم برای بنر.قسمت وسط هم content .ولی در مسترپیج نمیتونم content را در وسط قرار بدم.وارد دایو سمت راست میشه.ممنون میشم کمکم کنید.
hamiii
چهارشنبه 10 شهریور 1389, 14:31 عصر
اگر درست متوجه شده باشم شما می خواین یه چیزی شبیه عکسی که ضمیمه کردم داشته باشی.
در این صورت راه های مختلفی وجود داره و هر کی از یه روشی استفاده میکنه.
ساده ترین روشی که به نظر من وجود داره اینه که به همه div ها یک ویژگی float یکسان بدهیم. مثلا همشونو به راست float بدیم.
کدهای زیر رو ببینید:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>master page</title>
<style>
*{
margin:0;
padding:0
}
#container{
width:800px;
}
#header{
width:800px;
height:100px;
border:1px solid black;
float:right
}
#sidebar{
width:200px;
height:400px;
border:1px solid red;
float:right
}
#main{
width:580px;
height:400px;
border:1px solid blue;
float:right;
margin-right:15px;
}
</style>
</head>

<body>
<center>
<div id="container">
<div id="header">HEADER</div>
<div id="sidebar">SIDEBAR</div>
<div id="main">MAIN</div>
</div>
</center>
</body>
</html>



footer رو هم میتونید به همین روش اضافه کنید.
veronika
چهارشنبه 10 شهریور 1389, 15:45 عصر
ممنون از کمکتون.من دقیقا همین را میخواستم ولی وقتی برنامه را اجرا میکنم کلا بهم میریزه.با درصد دادن سعی کردم درست کنم ولی نشد.ممنون میشم راهنماییم کنید.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>master page</title>
<style>
*{
margin:0;
padding:0
}
C#‎ontainer{
width:800px;
}
#header{
width:100%;
height:40%;
border:1px solid black;
float:right
}
#sidebar{
width:13%;
height:100%;
border:1px solid red;
float:right
}
#main{
width:60%;
height:400px;
border:1px solid blue;
float:right;
margin-right:0px;
}
</style>
</head>
<body>
<center>
<div id="container">
<div id="header" dir="rtl">HEADER</div>
<div id="sidebar" dir="rtl">S<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
IDEBAR<br />
</div>
<div id="main" dir="rtl">MAIN<br />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

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

</asp:ContentPlaceHolder>



</div>
</div>
</center>
</body>
</html>
hamiii
چهارشنبه 10 شهریور 1389, 16:15 عصر
شما به طرز وحشتناکی کدها رو تغییر دادین و این باعث شده بهم بریزه. چندین اشکالی که باعث بهم ریختن شده رو میگم درستش کنین،ضمنا اگه از یه ویرایشگر مناسب مانند dreamweaver یا frontpage یا exprision web استفاده کننین با تغییر رنگ کدهای HTML و CSS سریعا متوجه اشتباهتون میشین و از ادامه دار شده اشتباهات جلوگیری میشه

1.نام ID ها باید کاملا تطابق داشته باشد. مثلا اگر در تگ div نام id رو container بگذارید و در styleها نام id رو Container بگذارید مشکل پیش خواهد اومد.(اشتباهی که شما مرتکب شدید)

2.فقط برای عرض از درصد استفاده کنید.چون مقیاس درصد برای ارتفاع در یک صفحه که ارتفاع متغیری دارد مناسب نیست جز در موارد خاص مانند سایتهای استاتیک.

3. عرض رو اندکی کوچکتر از 100% قرار بدید تا قابل مشاهده باشند.

4. فاصله را در کدنویسی رعایت کنید:

اشتباه:

<divid="header"dir="rtl">HEADER</div>

درست:

<div id="header" dir="rtl">HEADER</div>


موفق باشید
veronika
چهارشنبه 10 شهریور 1389, 18:02 عصر
ممنون به خاطر راهنمائیهای خوبتون.
من الان مشکلی که دارم اینه که زیر قسمت main این تگ را برای contentplaceholder اضافه میکنم ولی وقتی یه page از روی master میسازم قسمت contentplaceholder را نداره.

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>


اینم کل کد:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>master page</title>
<style>
*{
margin:0;
padding:0
}
#container{
width:1000px;
}
#header{
width:97%;
height:100px;
border:1px solid black;
float:right
}
#sidebar{
width:20%;
height:800px;
border:1px solid red;
float:right
}
#main{
width:75%;
height:800px;
border:1px solid blue;
float:right;
margin-right:15px;
}
</style>
</head>
<body>
<center>
<div id="container">
<div id="header">HEADER</div>
<div id="sidebar">SIDEBAR</div>
<div id="main">
<form id="form1" runat="server">
<div>main
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>
</center>
</form>




</div>
</div>
</body>
</html>
ali_za
چهارشنبه 10 شهریور 1389, 20:41 عصر
با سلام دوست عزيز
براي ساخت مسترپيج شما بايد روي راست كليك و add new item رو كليك نموده و از پنجره جديد مسترپيج رو انتخاب كنيد و براي ضافه كردن يك صفحه يا آيتم جديد با mater page شما بايد روي روت وب سايت خودتون راست كليك كرده و Add new item رو انتخاب بعد مثلا براي ساخت يك صفحه default.aspxديگر بايد web form رو انتخاب و سپس از قسمت پايين همين صفحه select master page رو تيك بزنيد حال يك صفحه خواهيد داشت كه content placeholder به صورت اتوماتيك اضافه ميشه مشخصه اش اينه كه داخل اون به رنگ سفيد و بقيه صفحه به صورت خاكستري و غير قابل ويرايش خواهد بود ضمنا بعد از اينكه مستر پيج رو ساختيد شما بايد صفحه قبل از ساخت مسترپيج مثلا default.aspx را بايد حذف و از نو با مسترپيج با روش فوق بسازيد احتمالا شما روي همون صفحه اولي كاري كار مي كرديد در اين صورت قسمت ccontent placeholder در toolbox غير فعال خواهد بود اگر همه كارهاي فوق رو درست انجام داديد و باز مشكل داريد احتمال 90 درصد از windows7 استفاده مي كنيد چون من خودم هنگام كار با vs.net2008 روي win7 با اين مشكل مواجه شدم وهر كاري كردم خوب نشد و البته اين جور نبود كه اصلاcontent placeholder غير فعال باشد بلكه ارور مي داد و متن ارور هم اين بود كه شما از مستر پيج استفاده نكرده ايد(در صورتيكه اين طور نبود).
اين تجربه شخصي خودم بود
با تشكر
hamiii
چهارشنبه 10 شهریور 1389, 21:08 عصر
کد تصحیح شده:


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>master page</title>
<style>
*{
margin:0;
padding:0
}
#container{
width:1000px;
}
#header{
width:97%;
height:100px;
border:1px solid black;
float:right
}
#sidebar{
width:20%;
height:800px;
border:1px solid red;
float:right
}
#main{
width:75%;
height:800px;
border:1px solid blue;
float:right;
margin-right:15px;
}
</style>
</head>
<body>
<center>
<div id="container">
<div id="header">HEADER</div>
<div id="sidebar">SIDEBAR</div>
<div id="main">
<form id="form1" runat="server">
<div>main
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>
</form>
</div>
</div>
</center>
</body>
</html>