اندازه گذاری بای یه طراحی درست و استاندارد چطوریه [بایگانی]

View Full Version : اندازه گذاری بای یه طراحی درست و استاندارد چطوریه

newby guy

پنج شنبه 28 فروردین 1393, 14:47 عصر

سلام به همه.من تازه واردم و می خوام طراحی صفحات وب رو یاد بگیرم.به اندازه یه کتاب در مورد html و css می دونم.مشکلم الان اینه که صفحه هام با اندازه پنجره مرورگر کاربر فیت نمیشن.من همه اندازه ها رو به پیکسل زدم واسه همین طولشون ثابته.
سایتهای دیگه رو یکم کدشون رو دیدم .یه جاهایی ثابته یه جاهایی درصده.یه روال مشخص دستم نیومد.
میشه یکی برام از پایه دقیقا بگه یه صفحه رو چیکار کنم که در هنگام نمایش مثلا یه نفر برای اولین بار وارد سایت من شده چیکار کنم که صفحه ام اندازه صفحه مرورگرش باشه.
مثلا همین سایت برنامه نویس.اندازه مرورگره و وقتی هم CTRL + - می زنم صفحه کوچیک میشه همه چی کوچیک میشه منتها اندازه سکشن های صفحه یا همون div ها ثابت میمونه.
چطوری اینطوری میشه
از ابتدا چطوری کار کنم و اندازه گذاری کنم
امیدوارم منظورم رو رسونده باشم
ممنون از همه

refugee

پنج شنبه 28 فروردین 1393, 15:53 عصر

دوست خوبم برای اینکه این مشکل پیش نیاد یک اندازه مشخص و استاندارد گذاشتن که با همه مرورگر ها یکی باشه .

عرض : 1024 پیکسل
طول : 768 پیکس

میشه : 1024*768 پیکسل

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

<html>
<head></head>
<body>

<div style="width:980px; margin:0px auto;">
// محتویات اینجا قرار بگیرد .
</div>

</body>
</html>

ab.ali

پنج شنبه 28 فروردین 1393, 17:19 عصر

می تونی هیمن مشخصات رو به body بدی

body{
width:980px;
margin:0px auto}

newby guy

پنج شنبه 28 فروردین 1393, 18:32 عصر

یعنی احتیاجی به درصد زدن اندازه ها نیست؟
یعنی الان کار درست اینه که اندازه کانتینر اصلی صفحه رو 1024 * 768 بذارم و توی اون بقیه اجزا رو قرار بدم.استاندارد و به قولی روال درستش اینه؟

mehbod.rayaneh

پنج شنبه 28 فروردین 1393, 19:40 عصر

white tower

پنج شنبه 28 فروردین 1393, 19:55 عصر

درود
در روشی ک دوست خوبم refugee (http://barnamenevis.org/member.php?236690-refugee) گفتن شما عرض کل سایت را 980 پیکسل در نظر گرفتید! این عرض ثابت خواهد بود! و ممکنه توی ریزولیشنهای پایین سایتتون اسکرول بخوره!
شما برای طراحی سایت قالب 2 راه دارید! اول ب روشی ک فرمودن! تمام مقادیر را ب پیکسل اندازه بدید!
روش بعد این ک تمام مقادیر را ب درصد اندازه بدید!
برای درک بهتر میتونید فیلمهای آموزش طراحی وب آقای محمد صالحه سایت مکتبخونه را مشاهده بفرمایید!
پیروز باشید
من دنبال روش درست و به قولی روال کار هستم.
مثلا شما الان می خوای یه سایت بسازی.مقادیر رو درصد می زنی یا به پیکسل؟یا فرض کن یه سفارش کار داری.مقادیر ابتدایی یعنی اندازه کانتینر و بادی رو درصد می زنی یا پیکسل.اکثر صفحه ها توی کانتینر اصلی یه هدر و یه قسمت برای navigation دارن و یه قسمت برای محتوی و زیر اینها هم فوتر.اندازه این ها رو درصد بزنم یا پیکسل؟
امیدوارم که منظورم رو رسونده باشم

بهزاد علی محمدزاده

پنج شنبه 28 فروردین 1393, 23:20 عصر

سلام . یه روش Fixed داریم : که سایزها رو بر اساس پیکسل انتخاب می کنن و این اندازه ها ثابت هست . یعنی با کوچک شدن مرورگر ( صفحه نمایش کاربر ) اندازه های داده شده همچنان ثابت هست و صفحه اسکرول می خوره . همین مثال 960px : با کوچیک شدن مرورگر از این سایز , اسکرول افقی می خوره . خیلی از وب سایت ها رو که با موبایل مرور می کنی باید با Touch کردن صفحه رو بزرگ و کوچیک کنی , بصورت افقی و عمودی به بخش های مختلف وب سایت بری . این حالت Fixed هست و ابتدایی ترین حالت طراحی . یعنی اگر طراح روش های دیگه مثل ریسپانسیو کردن رو ندونه از همین روش استفاده می کنه و مستقیما اندازه رو مشخص می کنه .

حالت Fluid هم هست . یعنی سیال , در این روش از درصد دادن استفاده میشه . این روش مشکلاتی داره , فرض کنید چهار تا div کنار هم دارید و به هرکدام هم با درصد اندازه دادین , با کوچیک شدن مرورگر در تبلت ها و موبایل ها , div ها سر جای خودشون هستند اما به نسبت درصد کوچیک شدن . و ممکنه اصلا به هم چسبیده باشند و محتوی خودشون رو نشون ندن !

حالت Hybrid تقریبا ترکیبی از اینهاست . یعنی شما از همون 960 استفاده کردی . اما فونت ها رو em در نظر میگیری . با این روش اگر zoom سایت تغییر کنه متن ها هم باهاش کوچیک و بزرگ میشن ولی div مورد نظر سرجاش هست . ( em دادن فونت ها هم نکته هایی داره و در کل اگر منبع خواستی برای محاسبات تا بهت معرفی کنم )
در این روش گاهی از درص هم ممکنه استفاده بشه برای بعضی جاها . من توی کاری دارم انجام میدم , یه تصویر تمام صفحه دارم و یه لوگو روش , لوگو رو می خوام با تغییر مرورگر اون نمایش داده بشه و اسکرول نخوره . از درصد میشه براش استفاده کرد . ( مثال بود ... ) . شما از روش ترکیبی استفاده کن مگر اینکه روش زیر رو بشناسی :

طراحی رسیپانسیو : در این روش با استفاده از media queries شرط گذاری میشه . این قابلیت به طراح کمک می کنه تصمیم گیری هایی رو برای نمایش های مختلف داشته باشه . مثال چهار تا div در روش Responsive به این صورت هست که : div ها درصد میدیم : 4 / 100 = 25% . برای هر div .

با media query تعیین می کنیم که اگر به حالت تبلت رسید div ها رو دو به دو نمایش بده . یعنی دوتا کنار هم و دوتا رو هم بیار زیر اون : 2 / 100 = 50%

و برای موبایل به هر کدام 100% رو اختصاص بده که روی هم دیگه نیوفتن . مثال (http://jsfiddle.net/behzadam/Pm8cu/1/) به عنوان نمونه .

پس این درصد دهی با روش Fluid فرق داره که فقط درصد دهی هست .

newby guy

جمعه 29 فروردین 1393, 18:47 عصر

منالان یه سایت چند صفحه ای زدم که همه اندازهها ثابتن.پس ثابتبودن اندازه ها هم بد نیست.درسته؟خیالمراحت باشه که کارم ضایه نیست؟
همهرو درصد زدن هم که خوب نیست.
ترکیبیو ریسپانسیو بهترین حالته.مدیاکوئری ها رم که مرورگر های قدیمی شایدنشناسن.پسمی مونه ترکیبی کار کردن با درصد و اندازههای ثابت (اگردرست فهمیده باشم).درمورد ترکیبی هنوز خوب متوجه نشدم.جدااز مساله اندازه فونت ها که شما گفتی یهمنبع معرفی می کنید.لطفکنید لینک بدید.میمونهاندازه بخشهای اصلی.
اندازهدیو اصلی رو ثابت بدم و یه min-widthهمبراش بذارم که از به حدی کوچیک تر نشه.الاناندازه صفحه مانیتورم روی 1280*1024پیکسلهو این سایت برنامه نویس و مثلا سایت بیتوتهبا اندازه صفحه من کاملا فیکسه.یعنینه اسکرول شده نه کناراش خالیه.یعنیبرای این حالت از مدیا کوئری استفادهکردن؟ یا اینکه صفحه شون رو برای عرض 1280پیکسلطراحی کردن؟
الانهمین صفحه که توش هستیم رو وقتی با CTRL+ - کوچیکمی کنم فقط فونتها کوچیک می شن و اندازهبخشها ثابت می مونه.یعنیدرصد زده و اندازه فونت ها رو با rem?
ببخشیدمن یه کم دیر می گیرم ها:خجالت: ممنونماز حوصله کردن همه دوستان.
(فکرکنم چند تا مثال مختلف بدید بهتر بگیرم.البتهاگر حوصله اش رو دارید.بازمممنون)

بهزاد علی محمدزاده

شنبه 30 فروردین 1393, 12:18 عصر

اندازهدیو اصلی رو ثابت بدم و یه
min-width
همبراش بذارم که از به حدی کوچیک تر نشه
.
الاناندازه صفحه مانیتورم روی
1280*1024
پیکسلهو این سایت برنامه نویس و مثلا سایت بیتوتهبا اندازه صفحه من کاملا فیکسه
.
یعنینه اسکرول شده نه کناراش خالیه
.
یعنیبرای این حالت از مدیا کوئری استفادهکردن؟ یا اینکه صفحه شون رو برای عرض
1280
پیکسلطراحی کردن؟
برای عرض خاصی طراحی نمی کنن , چون تقریبا ممکن نیست . رزولوشن ها خیلی متفاوته . مشاهده کدهای css سایت ها امکان پذیره . در کروم کار با ابزار Inspect Element رو یادبگیر :

body { width: auto;
min-width: 960px;
max-width: auto;
margin: 0px 35px 0px 35px;
font-size: 13px;
color: #3e3e3e;
line-height: 2em
}

به تگ body استایل داده , که کمتر از 960px نباشه . در یه استایل دیگه به div نگهدارنده داخلی padding داده به 20px برای چپ و راست . که با جمع 20 + 20 + 960 = 1000px درمیاد . که باعث میشه در نمایش گرهای بزرگ از حداکثر فضا استفاده کرده . و در نمایش گرهای کوچک تر هم تقریبا تمام صفحه رو پوشش میده با با چند پیکسل فضای خالی در چپ و راست . حالا من نمی دونم با اون محاسبه ساده که انجام شد آشنا هستی ؟ یعنی css box model .

یه مجموعه آموزشی هست که خوب به این موضوع پرداخته و این محاسبات و توضیح میده . لینک (http://www.lynda.com/Web-Interactive-CSS-training/CSS-Page-Layouts/86003-2.html) می تونی این و از وب سایت هایی که گذاشتن برای فروش تهیه کنی . جستجو کن توی وب سایت های داخلی .

برای فونت ها استفاده از rem بستگی به پشتیبانی شما از مرورگر های قدیمی داره . چون rem در اونها ساپورت نمیشه . از وب سایت can i use (http://caniuse.com/#search=rem) برای بررسی اینکه چه ویژگی در چه مرورگرهای ساپورت میشه استفاده کن .

اندازه فونت ها رو می تونی em بدی . ( البته برای اینها تکنیک هایی هست که cross browser بشند . من کلیات و دارم به شما میگم و وارد جزییات و تکنیک نمی تونم بشم . چون طولانیه ... خودت باید در موردش تحقیق کنی . )

بهزاد علی محمدزاده

شنبه 30 فروردین 1393, 12:46 عصر

اما برای فونت : یه سایز پایه رو برای کل صفحه در نظر بگیر . مثلا 14 پیکسل و بعد در این وب سایت (http://pxtoem.com/) , در ستون سمت چپ روی 14 کلیک کن . بعد متناسب پروژه ات برای تگ ها اندازه تعیین کن به پیکسل . توی ستون وسط یه سری اندازه آماده و پیش فرض هست که می تونی از em ها استفاده کنی . در ادامه مطلب منظورم و متوجه میشی :

برای کارت ممکنه نیاز به هدر های درشت داشته باشید یا ریزتر و ... بستگی به پروژه شما داره اما اول با پیکسل اندازه های مورد نظرت و تنظیم کن که مثلا برای تگ های h1, h2, h3 , ... و p و ... چه سایزهایی به نظرت مناسب هستند .
در همون سایت توی قسمت تبدیل . کادر بالا رو 14 بذار , و در کادر پایین پیکسل مورد نظرت و وارد کن و بعد تبدیل . عددی که به شما میده همون em بدست اومده است. یه مثال اینجا انجام دادم که برای line-height از نسبت طلایی استفاده کردم . و برا تگ p بعد از اینکه پیکسل رو به em تبدیل کردم . 1.618 برابر اون رو گذاشتم ارتفاعش . این تکنیک هست و من فقط خواستم بگم که px رو چطور به em تبدیل کنی . از همون سایز بدست اومده می تونی برای rem هم استفاده کنی .

( نکته : بهتره که تگ html سایز فونت اون 100% باشه . ) لینک نمونه (http://jsfiddle.net/behzadam/dn7nA/) .