1. انجمن های فارس پاتوق
    مطابق با قوانین جمهوری اسلامی ایران می باشد.
    رد اعلامیه

آموزش طراحی وب سایت قسمت سیزدهم

شروع موضوع توسط salavati1 در ‏7 اکتبر 2016 در انجمن مقالات عمومي

  1. salavati1

    salavati1 کاربر تایید شده

    تاریخ عضویت:
    ‏15 آگوست 2016
    ارسال ها:
    2,017
    تشکر شده:
    232
    جنسیت:
    زن
    با قسمت سیزدهم آموزش طراحی سایت از پایه در خدمتتون هستیم.
    بحث جلسه گذشته در مورد بردرها را تکمیل می کنیم و با پدینگ و مارجین کمی کار می کنیم
    بردرهای دو تایی:
    شما می توانید برای عناصر block از بردر دوتایی نیز استفاده کنید
    .highlight {
    border-width: 5px;
    border-style: double;
    border-color: silver;
    }
    استایل دهی برای یک عنصر برای هر طرف به شکل مجزا:
    تا اینجا بردرهایی که استفاده شد برای هر چهار طرف یک عنصر بود، اما در این قسمت می خواهیم برای هر طرف از یک عنصر بردرهای گوناگونی را به طور مجزا تعریف کرده و به کار ببریم. به مثال زیر توجه کنید:
    .highlight {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: red;
    border-bottom-width: 3px;
    border-bottom-style: dotted;
    border-bottom-color: blue;
    border-left-width: 5px;
    border-left-style: dashed;
    border-left-color: yellow;
    border-right-width: 7px;
    border-right-style: double;
    border-right-color: fuchsia;
    }

    سبک دهی به بردرها به طور مختصر :
    همانطور که در مثال های قبل دیدید به نظر شما بهتر نیست که به جای اینکه برای استایل دهی بردر به یک عنصر از چندین css استفاده کنیم از روش کوتاهتری آن کار را انجام دهیم؟ البته که روش دوم بهتر است، پس با هم این روش را یاد می گیریم :
    .highlight {
    border: 5px solid black;
    }
    این روش یک راه ساده و بسیار کوتاه برای استایل دهی به بردرهاست که تمامی مرورگرها آن را پشتیبانی می کنند، علاوه بر آن کمک می کند تا شما تایپ کمتری را انجام دهید و همچنین باعث می شود تا حجم دانلود فایل شما نیز کمتر شود، به همین دلیل من استفاده از این روش را نسبت به روش قبلی به شما توصیه می کنم. شما هم می توانید برای border-top, border-right, border-bottom و نیز border-left به صورت مجزا از استایل های مجزا به همین روش مختصر نویسی استفاده کنید.
    استایل بردرهایی که شما می توانید استفاده کنید:
    مثال های بالا بیشتر استایل هایی را که شما می توانید استفاده کنید به شما نشان داد. در زیر لیستی از گزینه های مختلفی را که برای شما قابل استفاده است را آورده ایم.
    ضخامت بردر:
    مقدار ضخامت بردر را می توان با واحد های px ، pt و یا em به کار برد.
    به صورت پیش فرض هم می توانید از کلمات کلیدی خود htmlبرای ضخامت دادن به بردر استفاده کنید که شامل سه سایزو باریک (thin) ، متوسط (medium) و ضخیم (thick) است.
    استایل بردر :
    یک بردر می تواند هر یک از استایل های زیر را داشته باشد:
    ■ solid (مقدار پیش فرض)
    ■ double
    ■ dotted
    ■ dashed
    ■ groove
    ■ ridge
    ■ inset
    ■ outset
    رنگ بردر :
    رنگ بردر هم مانند سایر عناصر سایت که به آنها رنگ می دهیم مقدار می گیرد. رنگ های خود html که با کلمات کلیدی مشخص شده اندمثل red و نیز از طریق اعداد هگزا دسیمال مثل #ff0000.
    شکل دهی و سایز دهی به عناصر درون سایت:
    بیایید تا تغییرات کوچکی به پروژه سایتمان بدهیم. از عنصر body شروع می کنیم. Style1.css را در پروژه خود باز کنید(این فایل که به عناصر وب سایت شکل میدهد در تگ header به صفحه ما وصل می شود) و استایل های داده شده به body را نگاه کنید و در ادامه استایل های داده شده به آن بردری مثل زیر به آن بیافزایید:
    body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    background-color: #e2edff;
    padding: 15px;
    line-height: 125%;
    border: 4px solid navy;
    }
    در style1.css برای منوی راهبری این مقادیر را تعریف کنید و سپس آن را ذخیره کرده و در مرورگر آن را ببینید.
    #navigation {
    width: 180px;
    border: 1px dotted navy;
    }
    تغییر بعدی که می توانیم به منوی راهبری بدهیم background-color است، پس در ادامه css آی دی navigation آن را نیز اضافه می کنیم.
    #navigation {
    width: 180px;
    border: 1px dotted navy;
    background-color: #7da5a8;
    }
    حالا منوی ما بهتر به نظر می رسد، اما رنگ پس زمینه ای که انتخاب کرده ایم باعث می شود تا رنگ لینک های مشاهده شده خوانایی کمی داشته باشند به همین دلیل رنگ لینک های مشاهده شده را تغییر می دهیم.
    a:visited {
    color: navy;
    }
    حالا بهتر شد، در مرحله بعد بهتر است که به tag line بردر و رنگ پس زمینه بدهیم . در مثال فوق یک تگ div بالای منو وجود دارد که آی دی #tagline دارد و داخل آن یک تگ p وجود دارد. پس بدین ترتیب به آن استایل می دهیم:
    #tagline p {
    font-style: italic;
    font-family: Georgia, Times, serif;
    background-color: #bed8f3;
    border-top: 3px solid #7da5d8;
    border-bottom: 3px solid #7da5d8;
    }
    حالا برای مشخص شدن تگ های h1 و h2 از همدیگر، برای آنها تفاوت قائل می شویم و بین آنها کمی css های متفاوت درج می کنیم چرا که استفاده از رنگ پس زمینه تیره برای هر دو آنها باعث شده تا تیترهای سایت بیش از حد دارای رنگ پس زمینه تیره باشند.
    css های زیر را کپی کرده و در css خود اضافه کنید
    h1, h2, h3 {
    font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
    }
    h1 {
    font-size: x-large;
    background-color: navy;
    color: white;
    }
    h2 {
    color: navy;
    font-size: 130%;
    font-weight: normal;
    }
    ما برای تگ h2 فاصله بین خطوط یا همان line-height را برابر با 130% انتخاب کردیم که می شود مقداری که از سایز large بزرگتر و از x-large کوچکتر است.
    دقت نمایید همه این مراحل جز تمرین شما حساب می شود و می توانید روی هر فایلی انجام دهید .
    افزودن : padding
    اگر نگاهی به بخش heading سایت خود و به بردرهای آن که در بخش های پیش به بررسی آنها پرداختیم بیاندازید. متوجه می شوید در جاهایی که دور متون بردر قرار دادیم بردر ها به متون چسبیده اند و هیچ فاصله ای میان آنها نیست. این گونه نمایش متون کمی نامناسب به نظر می رسد، به نظر شما ایطور نیست؟ برای رفع این مسئله بیایید تا کمی فاصله میان آنها ایجاد کنیم، بدین منظور از padding استفاده می کنیم.
    در پایین سه روش مختلف برای افزودن padding به عناصر بلاک با واحد های مختلف em و px و % استفاده شده است:
    .pixelpadding {
    padding: 30px;
    border: 1px dashed gray;
    }
    .empadding {
    padding: 2em;
    border: 1px dashed gray;
    }
    .percentagepadding {
    padding: 5%;
    border: 1px dashed gray;
    }
    کدام واحد اندازه گیری مناسب تر است؟
    اگر هر سه روش بالا تاثیر یکسانی بر روی طراحی سایت شما می گذارند، پس چه چیزی در زمان انتخاب یکی از روش هاتوسط شما تاثیر گذار است؟ پاسخ این است: که شما دوست دارید سایت شما چگونه رفتار کند و نمایش یابد.
    نکته بسیار مهم :
    • اگر شما تمایل دارید که سایت شما با تغییر سایز پنجره کوچک و بزرگ شود بنابراین می بایست ازروش درصدی استفاده کنید. هر قدر سایز پنجره مرورگر شما بزرگتر شود به همان نسبت نیز میزانpadding داده شده بزرگتر خواهد شد. برای مثال در طراحی سایت فوق از این روش استفاده شده است.
    • اگر که می خواهید طوری سایت خود را طراحی کنید که با تغییر دادن سایز فونت های صفحه فاصله هایی که در سایت خود ایجاد می کنید به همان نسبت کم و یا زیاد شوند پس در این صورت شما باید از مقیاس em استفاده کنید. چرا که اندازه های موجود در سایت بر اساس میزان سایز فونتی است که کاربر برای مرورگر خود تنظیم کرده است، اگر کاربران سایز فونت مرورگر خود را افزایش دهند در این صورت فاصله های با مقیاس em نیز همزمان با تغییر سایز فونت مرورگر زیاد خواهند شد.
    • اگر که شما در طراحی وب سایت خود برای عناصری در سایتتان که قرار است بدون در نظر گرفتن سایز فونت ها و نیز تغییر سایز پنجره مرورگر همواره یک سایز ثابتی داشته باشند از مقیاس پیکسل می بایست استفاده نمایید. یک پیکسل تقریبا برابر با یک نقطه در صفحه مانیتور شما می شود. چرا می گوییم تقریبا چون اکثر مرورگرهای جدید قابلیت امکان بزرگنمایی صفحه را برای کاربر دارند و تمامی عناصر صفحه را می توانند به یک نسبت بزرگ نمایند که در این میان کاربران قدرت کنترل کمی در حین بزرگنمایی نسبت به عناصر خواهند داشت.
    تعریف padding و افزودن آن به سایت :
    اضافه کردن فاصله در میان عناصر سایت باعث بهبود دادن ظاهر سایت خواهد شد.بیایید تا با هم این کار را انجام دهیم و تغییراتی را در پروژه خود اعمال کنیم. کمی وقت بگذارید و padding های لازم را به به تگ های heading (سر تیترها) در فایل style1.css خود انجام دهید.
    به تگ h1 خود در انتهای استایل های داده شده خطوط پر رنگ شده را اضافه کنید.
    h1 {
    font-size: x-large;
    background-color: navy;
    color: white;
    padding-top: 2em;
    padding-bottom: .2em;
    padding-left: .4em;
    }
    در مرحله بعد بیایید و برای تگ h2 خود نیز کمی فاصله ایجاد کنید.
    h2 {
    color: navy;
    font-size: 130%;
    font-weight: normal;
    padding-top: 15px;
    }
    در نهایت نیز tagline p را نیز یافته و به آن هم مقادیر زیر را بدهید:
    #tagline p {
    font-style: italic;
    font-family: Georgia, Times, serif;
    background-color: #bed8f3;
    border-top: 3px solid #7da5d8;
    border-bottom: 3px solid #7da5d8;
    padding-top: .2em;
    padding-bottom: .2em;
    padding-left: .8em;
    }
    حالا فایل css خود را ذخیره کرده و پنجره مرورگر خود را refresh کنید تا تغییرات را ببینید.
    Margin:
    خوب تا اینجا شما آموختید که شما می توانید به عناصر بلاک سایز بدهید، به آن border بدهید و از padding استفاده کنید تا برای عنصر مد نظر بتوانید از کناره ها فاصله ایجاد کنید. در اینجا خصوصیت جدیدی را یاد می گیرید که البته بسیار پر کاربرد نیز هست.
    margin ، باعث می شود که شما بتوانید مشخص کنید که یک عنصر نسبت به فضای اطراف خود از بیرون چقدر فاصله داشته باشد.

    حالا می خواهیم مارجین دو عنصر ul و h2را تغییر بدهیم، مرورگرهای مختلف مقدار پیش فرض margin-top مختلفی را برای این عناصر بکار می برند، علاوه بر این مقدار پیش فرض بیایید تا یک مقدار ثابت 15 پیکسلی برای این دو تنظیم کنید تا در مورد مقدار فاصله بیرونی این عناصر گمراه نشوید
    h2, ul {
    margin-top: 15px;
    }
     

    موضوعات مشابه

    Last edited by a moderator: ‏7 اکتبر 2016
    دل آرا از این پست تشکر کرده است.
  1. کانال تلگرام

    اطلاعیه ها و اخبارهای فارس پاتوق ، مسابقات و جوایز
  2. گروه تلگرام

    کتاب مذهبی ، کتاب های درسی ، کتاب های علمی ، کتاب رمان
  3. برنامه تلگرام

    اپراتور ، نرم افزار های ارتباطی
  4. سرگرمی و تفریح تلگرام

    دانستنیهای جالب ، مرکز تخصصی ترول ، انواع فال ها و طالع بینی ها ، مطالب طنز آمیز ، اس ام اس و جوک
  5. آموزش تلگرام

    اخبار فارس پاتوق ، انتقادات و طرح های جدید فارس پاتوق ، نظر سنجی ، آموزش های لازم فارس پاتوق ، اطلاعیه های فارس پاتوق
  6. کانال موزیک تلگرام

    مداحی ایام فاطمیه ، مداحی ماه محرم ، موزیک های ایرانی ، موزیک های شاد ، آهنگ های خارجی ، آهنگ های پیشواز ایرانسل ، آهنگ های پیشواز همراه اول ، آهنگ های رومانتیک ، مداحی ، آهنگ های سنتی
  7. اخبار تلگرام

    اخبار حوادث ، اخبار جهان ، اخبار ورزشی ، اخبار پزشکی ، اخبار سیاسی - اقتصادی ، اخبار فرهنگی - هنری ، اخبار علمی
  8. مد و زیبایی تلگرام

    مدل لباس دخترانه ، مدل لباس زنانه ، مدل لباس پسرانه ، مدل لباس مردانه ، مدل لباس ، مدل لباس جدید ، مدل عینک ، مدل مو ، مدل ناخن ، عکس مدل
  9. کانال عکس تلگرام

    عکس های خنده دار ، عکس های بازیکنان ، عکس های ترسناک ، عکس های طبیعت ، عکس های حیوانات ، عکس های حوادث ، تصاویر عاشقانه ، تصاویر کارتونی ، عکس های اتومبیل ، تصاویر هنرمندان ، تصاویر کودکان ، عکس های متفرقه
  10. کانال فیلم تلگرام

    اپراتور همراه اول ، اپراتور ایرانسل ، اپراتور رایتل
  11. تبلیغات تلگرام و اینستاگرام

    آگهی های استخدام دولتی ، آگهی های استخدام غیر دولتی ، سوالات و پاسخ های آزمون های استخدامی
  12. کانالهای ادبی تلگرام

    تاریخ ، شعر و ادبیات ، نامه نگاری و انواع نامه ها
  13. گروه چت تلگرام

    ابزار های وبلاگ ، سئو و بهینه سازی وب سایت ، سیستم های مدیریت محتوا ، قالب های وبلاگ ، ابزار های وب سایت ، قالب های وب سایت ، معرفی وبلاگ و وب سایت های مفید ، کسب و کار در اینترنت ، کسب درآمد بدون اینترنت
  14. بهترین کانال های تلگرام

    هوا و فضا ، دانش و فن آوری در پزشکی ، دانش و فناوری در کامپیوتر ، دانش و فناوری در موبایل ، دانش و فناوری در وب سایت ها ، جنگ افزار ، تکنولوژی های روز
  15. نرم افزار اینستاگرام

    سیستم عامل ها ، لپ تاپ و تبلت ، نرم افزار ها ، سخت افزار ها ، بازی های کامپیوتری
  16. کانال پزشکی و سلامت تلگرام

    روانشناسی ، تغذیه ، بهداشت ، بیماری ها و روش درمان
  17. بهترین پیج اینستاگرام

    اخبار ورزشی ، معرفی ورزش ها و تیم ها ، شخصیت های ورزشی
  18. عکس اینستاگرام

    برنامه ریزی درسی ، مقطع آموزش ابتدایی ، مقطع آموزش راهنمایی ، مقطع آموزش متوسطه ، مقطع پیش دانشگاهی ، مقطع آموزش فنی حرفه ای ، مقطع آموزش کاردانش
  19. فیلم اینستاگرام

    مقالات کار آفرینی و طرح کسب و کار ، مقالات عمومی ، درخواست مقالات ، مقالات علمی
  20. آموزش اینستاگرام

    رشته های فنی و مهندسی ، رشته های علوم تجربی ، رشته های علوم پایه و انسانی ، رشته های هنر ، معرفی رشته های دانشگاهی ، معرفی دانشگاه های ایران ، رشته های پزشکی ، رشته های زبان انگلیسی
  21. کانال مذهبی تلگرام

    اهل بیت و علما ، احکام ، مولتی مدیای مذهبی
  22. کانال خانواده تلگرام

    خانواده ، هنر در خانه
  23. کانال آشپزی تلگرام

    انواع شیرینی ، انواع دسر ، انواع غذا ها و طرز تهیه آن ها ، خورش ها ، سوپ و سالاد ، ساندویچ و پیتزا ، سس و ترشی
  24. کانال گردش و گردشگری تلگرام

    معرفی مکان های زیارتی ، معرفی مکان های تفریحی ، معرفی مکان های شگفت انگیز ، معرفی شهرها و کشورها
  25. سایر موضوعات تلگرام

    اخبار و مطالب گوناگون خبری ، معما ها و چیستان ها ، اخبار گوناگون اینترنتی ، صندلی داغ ، گفتگو با کاربران ، بازارچه خرید و فروش ، زباله دان
  26. کانال تست روانشناسی تلگرام

    تست هوش
  27. کانال روانشناسی ازدواج تلگرام

    نکات قبل از ازدواج ، نکات بعد از ازدواج
  28. کانال مشاوره جنسی تلگرام

    راهنمایی علمی جنسی
XenForo Add-ons by Brivium ™ © 2012-2013 Brivium LLC.