نمایش نتایج 1 تا 10 از 10

نام تاپیک: اندازه گذاری بای یه طراحی درست و استاندارد چطوریه

  1. #1

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

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

  2. #2
    کاربر دائمی آواتار refugee
    تاریخ عضویت
    آذر 1390
    محل زندگی
    root@server
    پست
    646

    نقل قول: اندازه گذاری بای یه طراحی درست و استاندارد چطوریه

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

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

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

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

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

  3. #3

    نقل قول: اندازه گذاری بای یه طراحی درست و استاندارد چطوریه

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


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



  4. #4

    نقل قول: اندازه گذاری بای یه طراحی درست و استاندارد چطوریه

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

  5. #5
    کاربر دائمی آواتار mehbod.rayaneh
    تاریخ عضویت
    مرداد 1390
    محل زندگی
    اصــفــهــان
    سن
    34
    پست
    1,313

    نقل قول: اندازه گذاری بای یه طراحی درست و استاندارد چطوریه

    درود
    در روشی ک دوست خوبم refugee گفتن شما عرض کل سایت را 980 پیکسل در نظر گرفتید! این عرض ثابت خواهد بود! و ممکنه توی ریزولیشنهای پایین سایتتون اسکرول بخوره!
    شما برای طراحی سایت قالب 2 راه دارید! اول ب روشی ک فرمودن! تمام مقادیر را ب پیکسل اندازه بدید!
    روش بعد این ک تمام مقادیر را ب درصد اندازه بدید!
    برای درک بهتر میتونید فیلمهای آموزش طراحی وب آقای محمد صالحه سایت مکتبخونه را مشاهده بفرمایید!
    پیروز باشید

  6. #6
    کاربر دائمی
    تاریخ عضویت
    آبان 1388
    محل زندگی
    کرج
    پست
    321

    نقل قول: اندازه گذاری بای یه طراحی درست و استاندارد چطوریه

    درود
    در روشی ک دوست خوبم refugee گفتن شما عرض کل سایت را 980 پیکسل در نظر گرفتید! این عرض ثابت خواهد بود! و ممکنه توی ریزولیشنهای پایین سایتتون اسکرول بخوره!
    شما برای طراحی سایت قالب 2 راه دارید! اول ب روشی ک فرمودن! تمام مقادیر را ب پیکسل اندازه بدید!
    روش بعد این ک تمام مقادیر را ب درصد اندازه بدید!
    برای درک بهتر میتونید فیلمهای آموزش طراحی وب آقای محمد صالحه سایت مکتبخونه را مشاهده بفرمایید!
    پیروز باشید
    من دنبال روش درست و به قولی روال کار هستم.
    مثلا شما الان می خوای یه سایت بسازی.مقادیر رو درصد می زنی یا به پیکسل؟یا فرض کن یه سفارش کار داری.مقادیر ابتدایی یعنی اندازه کانتینر و بادی رو درصد می زنی یا پیکسل.اکثر صفحه ها توی کانتینر اصلی یه هدر و یه قسمت برای navigation دارن و یه قسمت برای محتوی و زیر اینها هم فوتر.اندازه این ها رو درصد بزنم یا پیکسل؟
    امیدوارم که منظورم رو رسونده باشم

  7. #7

    نقل قول: اندازه گذاری بای یه طراحی درست و استاندارد چطوریه

    سلام . یه روش 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% رو اختصاص بده که روی هم دیگه نیوفتن . مثال به عنوان نمونه .

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

  8. #8

    نقل قول: اندازه گذاری بای یه طراحی درست و استاندارد چطوریه

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

  9. #9

    نقل قول: اندازه گذاری بای یه طراحی درست و استاندارد چطوریه

    اندازهدیو اصلی رو ثابت بدم و یه
    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 .

    یه مجموعه آموزشی هست که خوب به این موضوع پرداخته و این محاسبات و توضیح میده . لینک می تونی این و از وب سایت هایی که گذاشتن برای فروش تهیه کنی . جستجو کن توی وب سایت های داخلی .

    برای فونت ها استفاده از rem بستگی به پشتیبانی شما از مرورگر های قدیمی داره . چون rem در اونها ساپورت نمیشه . از وب سایت can i use برای بررسی اینکه چه ویژگی در چه مرورگرهای ساپورت میشه استفاده کن .

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

  10. #10

    نقل قول: اندازه گذاری بای یه طراحی درست و استاندارد چطوریه

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

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

    ( نکته : بهتره که تگ html سایز فونت اون 100% باشه . ) لینک نمونه .

تاپیک های مشابه

  1. استفاده از کدنویسی درست و استاندارد در قالب بندی اندازه صفحه
    نوشته شده توسط p30online در بخش طراحی وب (Web Design)
    پاسخ: 1
    آخرین پست: دوشنبه 09 دی 1392, 11:07 صبح
  2. گفتگو: راهنمایی برای طراحی سایت بطورت استاندارد و cross browsing
    نوشته شده توسط ramin_hashemi در بخش طراحی وب (Web Design)
    پاسخ: 3
    آخرین پست: شنبه 21 اسفند 1389, 09:28 صبح
  3. گفتگو: راهنمایی برای طراحی سایت بطورت استاندارد و cross browsing
    نوشته شده توسط ramin_hashemi در بخش ASP.NET Web Forms
    پاسخ: 1
    آخرین پست: جمعه 20 اسفند 1389, 17:10 عصر
  4. پیشنهاد طراحی درست برنامه (ساخت زیرفرم)
    نوشته شده توسط انگوران در بخش Access
    پاسخ: 9
    آخرین پست: پنج شنبه 30 فروردین 1386, 07:04 صبح
  5. سلام آیا این طراحی درست است ؟؟؟
    نوشته شده توسط zehs_sha در بخش سایر پایگاه‌های داده
    پاسخ: 1
    آخرین پست: شنبه 25 شهریور 1385, 15:44 عصر

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •