ورود

View Full Version : مبتدی: بهترین سایز برای اندازه صفحه



ozzy_mra
دوشنبه 22 خرداد 1391, 09:28 صبح
سلام
می خواستم بدونم بهترین سایز برای اندازه صفحات وب سایت چقدره؟
من تو سایتم از 844px استفاده کردم که تو مانیتور های واید و سیستم های با رزولوشن بالا خیلی کوچیک بنظر میرسه.
اصلاً میشه کاری کرد که اندازه صفحه تو هر مانیتور و هر رزولوشنی فیت صفحه بشه؟ مثل همین سایت برنامه نویس؟

mehdi-ghafari
دوشنبه 22 خرداد 1391, 12:46 عصر
می خواستم بدونم بهترین سایز برای اندازه صفحات وب سایت چقدره؟
معمولا از سایز 987 پیکسل استفاده میکنن. بعضی ها هم بسته به سلیقه،طراحی اولیه و یا نیاز سایت 1000 پیکسل میزنن که زیاد جالب نیست.

اصلاً میشه کاری کرد که اندازه صفحه تو هر مانیتور و هر رزولوشنی فیت صفحه بشه؟ مثل همین سایت برنامه نویس؟
برای این کار باید بجای اندازه به پیکسل از مقادیر درصدی استفاده کنید

ozzy_mra
دوشنبه 22 خرداد 1391, 13:26 عصر
معمولا از سایز 987 پیکسل استفاده میکنن. بعضی ها هم بسته به سلیقه،طراحی اولیه و یا نیاز سایت 1000 پیکسل میزنن که زیاد جالب نیست.

برای این کار باید بجای اندازه به پیکسل از مقادیر درصدی استفاده کنید
سلام
برای اون درصدیه میشه یه نمونه بگید؟

mehdi-ghafari
دوشنبه 22 خرداد 1391, 13:38 عصر
ببینید نسبت به صفحه تون و اینکه میخواید مثلا ستون سمت چپ چه پهنایی از کل صفحه رو اشغال کنه این مقادیر رو تنظیم میکنید.
مثلا اگر قبلا با استفاده از مقادیر ثابت عددی(پیکسل) پهنای (width) ستون سمت چپ رو 200px میذاشتی الان با درصد (width:20%) مقدار دهی کن.
اون مقدار 20% رو هم همون طور که گفتم باید نصبت به مکان قرار گیری المانها و طراحی صفحه تنظیم کنی.

m_darkoob
دوشنبه 22 خرداد 1391, 21:41 عصر
عزیز جان
شما می توانید قالب سایت را طوری طراحی کنی که کش بیاید که یه کم سخته

باید چند پیکسل رو به طور تکراری استفاده کنی و روی هم بندازی (ترکیبی از فتوشاب و table)
روش مهدی هم میشه اما توی عکس ممکنه دفرمه بشه
اما استاندارد 1024px است

mehdi-ghafari
سه شنبه 23 خرداد 1391, 14:22 عصر
روش مهدی هم میشه اما توی عکس ممکنه دفرمه بشه
این دوروشی که ذکر شد دقیقا یه کار رو انجام میدن. فقط شما با استفاده از table فرمودید من با div. تکرار تصویر در هر دو روش باید صورت بگیره و با استایل زیر این کار انجام میشه:

background: #fff url('images/bg.gif') repeat-x;


اما استاندارد 1024px است
سایز مناسبی نیست. چون اکثرا با یه اسکرول افقی در پایین مرورگرشون مواجه میشن

Saber Mogaddas
چهارشنبه 24 خرداد 1391, 10:26 صبح
سلام
توجه کنید برای اینکه تصویر شما با min,max کردن مرورگر کوچک و بزرگ شه بدون اینکه دفرم بشه از استایل زیر برای تصویر استفاده کنید :

display: block;
max-width: 100%;
width: 100%;



موفق باشید..

ozzy_mra
چهارشنبه 24 خرداد 1391, 13:33 عصر
سلام
توجه کنید برای اینکه تصویر شما با min,max کردن مرورگر کوچک و بزرگ شه بدون اینکه دفرم بشه از استایل زیر برای تصویر استفاده کنید :

display: block;
max-width: 100%;
width: 100%;



موفق باشید..

خیلی ممنون
برای اینکه ارتفاع صفحم با توجه به مقدار کانتنتی که صفحه داره تنظیم بشه باید چکار کنم؟ من برایب صفحم از سه تا div که دو تاشون برای منوی چپ و راست و یکی هم برای mainContent صفحه هست استفاده می کنم که هر سه اینها تو یه div دیگه هستند
یعنی منظورم اینه که مثلاً side bar تا جایی که به footer برسه ادامه داشته باشه

Saber Mogaddas
چهارشنبه 24 خرداد 1391, 14:45 عصر
برای اینکه ارتفاع صفحم با توجه به مقدار کانتنتی که صفحه داره تنظیم بشه باید چکار کنم؟

برای تگ های که می خواهید نسبت به محتواش ارتفاع بگیره از استایل زیر استفاده کنید :

float:right;
min-height:10px;
overflow:hidden;

موفق باشید..

cyrusthegreat
دوشنبه 29 خرداد 1391, 16:01 عصر
دوست عزیز

بهترین ای وجود نداره. در هر طراحی، با توجه به نیازهای شما، اندازه مشخص میشه. اندازه 966px اندازه استانداردی هست که بسیار استفاده می شه.

البته الان با توجه به ویژگی های جدیدی که در CSS3 وجود داره، دیگه شما برای هر رزولویشنی می تونیه یه سری خواص مشخص کنید.

ozzy_mra
سه شنبه 30 خرداد 1391, 14:29 عصر
برای تگ های که می خواهید نسبت به محتواش ارتفاع بگیره از استایل زیر استفاده کنید :

float:right;
min-height:10px;
overflow:hidden;


موفق باشید..
تو صفحه اخبارم برای div که باکس خبرهام رو نگه میداره از این دستور که شما گفتید استفاده کردم ولی باکس خبرام اکه با یه رپیتر تکرا میشه از باکس نگهدارندش میزنه بیرون و فقط 4 تاش جامیشه و هیچ تغییر ارتفاعی به این div اعمال نمیشه

Saber Mogaddas
سه شنبه 30 خرداد 1391, 16:30 عصر
سلام
overflow باکس نگه دارنده رو نیز hidden کنید ..و با Min-height یک مقدار بدید بهش..
من به فرض اینکه باکس نگه دارنده هست این دستور رو قرار دادم..
موفق باشی..

ozzy_mra
چهارشنبه 31 خرداد 1391, 06:38 صبح
سلام
overflow باکس نگه دارنده رو نیز hidden کنید ..و با Min-height یک مقدار بدید بهش..
من به فرض اینکه باکس نگه دارنده هست این دستور رو قرار دادم..
موفق باشی..
من یه توضیح بدم خدمتتون
من مثل اکثر وی پیج ها از یه div به عنوان pagewrapper برای نگهداری المان های صفحم استفاده می کنم.این div دارای چند تا div دیگه به نامهای header,menueWrapper,Maincontent,... هست که طبیعتاً آیتم های اصلیم رو در MainContent قرار میدم . div های مربوط به باکس خبرم هم در همینجا قرار داره وکه توسط رپیتر تکرار میشه. الان من overfow کدوم رو باید hidden کنم؟البته من برای جفتشون انجام دادم.Display رو هم باید Block کنم؟
خیلی ببخشید کمی تازه کارم

Saber Mogaddas
چهارشنبه 31 خرداد 1391, 10:47 صبح
سلام
شما باید به دیو های که از نظر ارتفاع متغییر هستن استایل های گفته شده :




float:right;
min-height:10px;
overflow:hidden;




رو قرار بدید..
در صورتی که مشکل شما حل نشد کدهاتون رو قرار بدید تا بررسی شه ..

ozzy_mra
چهارشنبه 31 خرداد 1391, 12:57 عصر
<div id="PageWrapper">
<div id="Header">
</div>
<div id="FreeRoom">
<asp:LoginName ID="LoginName1" runat="server" FormatString="ورود با کلمه کاربری {0}" />
<asp:LoginView ID="LoginView1" runat="server">
<LoggedInTemplate>
(<asp:LoginStatus ID="LoginStatus1" runat="server" />
)
</LoggedInTemplate>
<RoleGroups>
<asp:RoleGroup Roles="Manager">
<ContentTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Management/Default.aspx">کنترل پنل مدیریت</asp:HyperLink>
<<<<>>>>
<asp:LoginStatus ID="LoginStatus2" runat="server" />
</ContentTemplate>
</asp:RoleGroup>
<asp:RoleGroup Roles="ModirAmel">
<ContentTemplate>
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/ModirAmelContact/Default.aspx">مشاهده تماس ها</asp:HyperLink>
<<<<>>>>
<asp:LoginStatus ID="LoginStatus3" runat="server" OnLoggedOut="LoginStatus3_LoggedOut" />
</ContentTemplate>
</asp:RoleGroup>
</RoleGroups>
</asp:LoginView>
</div>
<div id="MenuWrapper">
<div dir="rtl">
<asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1"
Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</div>
</div>
<div id="SideBar">


</div>
<div id="MainContent">
<div class="boxMain">
<div class="boxHeadMain">
<div id="container" dir="rtl">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="color:#FFFFCC"> شما اکنون در اینجا هستید : </span>
<asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Bold="True"
ForeColor="#333333">
</asp:SiteMapPath>
</div>
</div>

<div class="boxCenterMain">
<asp:ContentPlaceHolder ID="cpMainContent" runat="server">
</asp:ContentPlaceHolder>
</div>

<div class="boxFooterMain">
</div>
<div class="boxFreeSpaceMain">
</div>
</div>
</div>
<div id="Footer">

</div>
</div>
این کد صفحمه و باکس های خبرم در boxCenterMain قرار میگیره
اینم CSS های مربوطه :


.boxCenterMain
{
width: 667px;
min-height: 1350px;
overflow:hidden;
background-image: url(boxImages/b-main.png);
background-repeat: repeat-y;
padding-top: 20px;
}
#PageWrapper
{
width: 987px;
margin: auto;
min-height: 1800px;
overflow:hidden;
background-image: url(boxImages/Capture.png);
background-repeat: repeat;
}
#Header
{
width: 987px;
height: 230px;
margin-top: 10px;
margin-bottom: 10px;
background-color: transparent;
background-image:url(boxImages/p02.png);
background-repeat:no-repeat;
}
#FreeRoom
{
width: 987px;
height: 30px;
background-color: transparent;
clear: both;
direction:rtl;
color:#CC0033;
}

#MenuWrapper
{
width: 987px;
height: 36px;
background-image: url(boxImages/mnu.png);
direction: rtl;
text-align:center;

}
#SideBar
{
width: 290px;
float: right;
min-height: 1200px;
}
#MainContent
{
width: 697px;
float: right;
min-height: 1500px;
overflow:hidden;
color: Black;
}
#Footer
{
width: 987px;
clear: both;
height: 37px;
margin: auto;
background-image: url(boxImages/footer.png);
text-align: center;
font-size: 0.7em;
font-weight: bold;
line-height: 37px;
}

Saber Mogaddas
چهارشنبه 31 خرداد 1391, 13:26 عصر
سلام
کپی پروژه به این صورت درست نیست تو سیستم من پایگاه داده ای وجود نداره از این پروژه تا من بتونم پروژه رو اونجوری که شما میبینید ببینم درسته ؟ به هر حال من رو کد های شما یکم تغییر ایجاد کردم البته با حدسیات خودم ..و فکر کنم مشکلتون حل شد


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.boxCenterMain
{
width: 667px;
min-height: 13px;
overflow:hidden;
float: right;
background-image: url(boxImages/b-main.png);
background-repeat: repeat-y;
padding-top: 20px;
}
#PageWrapper
{
width: 987px;
margin: auto;
background-image: url(boxImages/Capture.png);
background-repeat: repeat;
}
#Header
{
width: 987px;
height: 230px;
margin-top: 10px;
margin-bottom: 10px;
background-color: transparent;
background-image:url(boxImages/p02.png);
background-repeat:no-repeat;
}
#FreeRoom
{
width: 987px;
height: 30px;
background-color: transparent;
clear: both;
direction:rtl;
color:#CC0033;
}

#MenuWrapper
{
width: 987px;
height: 36px;
background-image: url(boxImages/mnu.png);
direction: rtl;
text-align:center;

}
#Center-Content-Wraper
{
width:987px;
min-height:18px;
overflow:hidden;
float:right;
}
#SideBar
{
width: 290px;
float: right;
min-height: 12px;
overflow:hidden;
}
#MainContent
{
width: 697px;
float: right;
min-height: 15px;
overflow:hidden;
color: Black;
}
#Footer
{
width: 987px;
clear: both;
height: 37px;
margin: auto;
background-image: url(boxImages/footer.png);
text-align: center;
font-size: 0.7em;
font-weight: bold;
line-height: 37px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="PageWrapper">
<div id="Header">
</div>
<div id="FreeRoom">
<asp:LoginName ID="LoginName1" runat="server" FormatString="ورود با کلمه کاربری {0}" />
<asp:LoginView ID="LoginView1" runat="server">
<LoggedInTemplate>
(<asp:LoginStatus ID="LoginStatus1" runat="server" />
)
</LoggedInTemplate>
<RoleGroups>
<asp:RoleGroup Roles="Manager">
<ContentTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Management/Default.aspx">کنترل پنل مدیریت</asp:HyperLink>
<<<<>>>>
<asp:LoginStatus ID="LoginStatus2" runat="server" />
</ContentTemplate>
</asp:RoleGroup>
<asp:RoleGroup Roles="ModirAmel">
<ContentTemplate>
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/ModirAmelContact/Default.aspx">مشاهده تماس ها</asp:HyperLink>
<<<<>>>>
<asp:LoginStatus ID="LoginStatus3" runat="server" OnLoggedOut="LoginStatus3_LoggedOut" />
</ContentTemplate>
</asp:RoleGroup>
</RoleGroups>
</asp:LoginView>
</div>
<div id="MenuWrapper">
<div dir="rtl">
<asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1"
Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</div>
</div>
<div id="Center-Content-Wraper">
<div id="SideBar">
</div>
<div id="MainContent">
<div class="boxHeadMain">
<div id="container" dir="rtl">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="color:#FFFFCC"> شما اکنون در اینجا هستید : </span>
<asp:SiteMapPath ID="SiteMapPath1" runat="server" Font-Bold="True"
ForeColor="#333333">
</asp:SiteMapPath>
</div>
</div>
<div class="boxCenterMain">
<asp:ContentPlaceHolder ID="cpMainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="boxFooterMain"></div>
<div class="boxFreeSpaceMain"></div>
</div>
</div>
<div id="Footer">

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

- نیاز نیست برای مقدار min-height ارقام بزرگی بدید فقط اونقدری که شکل و شمایل صفحه اولیه زیبا باشه .. چون در هر صورت متغییر خواهد بود و ارتفاع متفاوت خواهد بود..و با دستوراتی که نوشتیم ارتفاع دیو ها نسبت به محتوا تغییر خواهد کرد..
--در صورتی که مشکل حل نشد فقط کد html اون قسمت به همراه استایل ها رو ضمیمه توضیحاتتون بکنید..
موفق باشید

ozzy_mra
چهارشنبه 31 خرداد 1391, 13:37 عصر
خیلی ممنونم از وقتی که گذاشتید؛ کنترل می کنم

ozzy_mra
چهارشنبه 31 خرداد 1391, 13:49 عصر
خیلی خیلی ممنونم
درست شد. لطف کردید