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

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

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

  1. salavati1

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

    تاریخ عضویت:
    ‏15 آگوست 2016
    ارسال ها:
    1,737
    تشکر شده:
    227
    جنسیت:
    زن
    در این مقاله در خصوص طراحی سایت نیز راجع به سی اس اس ( css) و نحوه استایل دهی (Font-size ,…. color, Background-color,) و گزینش گر متنی و سبک دهی گروهی صحبت خواهم کرد .
    تا اینجای کار به چند مثال ساده اما کاربردی با CSS برای استفاده در وب سایت نگاهی انداختیم. برای استایل دهی خصوصیات بسیار زیادی وجود دارد که البته من قصد دارم آنها را اینجا لیست کنم، هرچند ممکن است شما تا به حال بعضی از این استایل ها و مقدار دهی آنها را تجربه کرده باشید.
    نکته : توجه داشته باشید که این استایل ها کل css نیست و در فصل های آینده به این مقادیر اضافه خواهد شد.
    Color
    همانطور که قبلا هم دیدید برای رنگ دادن به عناصر استفاده می شود.
    Background-color
    به دو صورت مقدار دهی می شود یا نام رنگ (blue, red, green,..) یا با اعداد دسیمال، مانند: #3acbef
    Font-family
    با این خصیصه هر فونتی را که بخواهید می توانید به متون سایت خود اعمال کنید، تنها توجه کنید که نحوه مقدار دهی آن همانند مثال های قبلی است که به طور مفصل راجب به آن توضیح داده ام.
    Font-size
    مقدار دهی آن می تواند مثل یکی از گزینه های زیر باشد:
    1- نام های آماده برای سایز دادن به فونت ؛
    • XX-small
    • X-small
    • Small
    • Medium
    • Large
    • X-large
    • Xx-large
    2- فونت دهی به صورت نسبی؛
    • به صورت درصدی : %120
    • به صورت 1.2em : em
    3- فونت دهی به صورت مطلق؛
    • به صورت pixel ، مانند: px12
    • به صورت point، مانند: pt12
    قطعاً زمانیکه بخواهیم این امکان را به خوانندگان مطالب وب سایتمان بدهیم که با تغییر سایز صفحه مرورگر خود ( مثلا سایز %150 به جای %100) بتوانند سایز فونت متناسب با آن را ببینند فونت دهی به صورت نسبی را مد نظرمان قرار می دهیم.
    Font-weight
    ضخامت فونت است که به دو صورت normal یا bold مقدار دهی می شود.
    Font-style
    سبک فونت است که به دو صورت normal یا italic مقدار دهی می شود.
    Text-decoration
    مدل دهی به متن به صورت: none, underline, overline و یا line-through است.
    نکته : قبل از شروع به کار و استفاده از css های متنوع، ابتدا از css ای که تا کنون آن را ساخته اید یک back up بگیرید و سپس با استایل های مختلفی که در بالا یاد گرفتید استایل های مختلفی را بسازید.
    تمامی موارد بالا را می بایست در مرورگر خود تست کنید تا با آنها آشنا شوید ولی حالا بیائید استایل دهی بیشتری برروی عناصر موجود در سایتمان اعمال کنیم.
    – ابتدا فایل about.html را باز کنید (در تمرین های قبلی ساخته شده است)
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
    “http:// www. w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
    <html xmlns=”http:// www. w3.org/1999/xhtml”>
    <head>
    <title>About Bubble Under: who we are, what this site is
    for</title>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
    </head>
    <body>
    <div id=”header”>
    <div id=”sitebranding”>
    <h1>BubbleUnder.com</h1>
    </div>
    <div id=”tagline”>
    <p>Diving club for the south-west UK – let’s make a
    splash!</p>
    </div>
    </div> <!– end of header div –>
    <div id=”bodycontent”>
    <h2>About Us</h2>
    <p>Bubble Under is a group of diving enthusiasts based in
    the south-west UK who meet up for diving trips in the
    summer months when the weather is good and the bacon
    rolls are flowing. We arrange weekends away as small
    groups to cut the costs of accommodation and travel and
    to ensure that everyone gets a trustworthy dive
    buddy.</p>
    <p>Although we’re based in the south-west, we don’t stay on
    our own turf: past diving weekends away have included
    trips up to Scapa Flow in Scotland and to Malta’s
    numerous wreck sites.</p>
    <p>When we’re not diving, we often meet up in a local pub
    to talk about our recent adventures (any excuse,
    eh?).</p>
    </div> <!– end of bodycontent div –>
    </body>
    </html>
    – پاراگراف زیر را پیدا کرده و تگ em را که جهت نمایش بیشتر یا به عبارتی تاکید بهتر بر روی آن کلمه بکار رفته است را اضافه کنید.
    <p>And when we’re not diving, we often meet up in a local pub
    to talk about our recent adventures (<em>any</em> excuse,
    eh?).</p>
    – فایل را ذخیره کرده و در مرورگر خود به صورت local مشاهده کنید
    – حالا فایل css خود را باز کرده و استایل زیر را به آن اضافه نمایید.
    em {
    Font-style: normal;
    Text-transform:uppercase;
    {
    حالا فایل css را ذخیره کرده، سپس صفحه نمایش خود را refresh نمایید
    اگر از تگ em در متون انگلیسی استفاده نماییم استایل آن به صورت پیش فرض italic خواهد بود، که اگر بخواهید استایل آم متن هم مانند سایر متون در آم پاراگراف باشدبه آن استایل normal می دهیم و اگر بخواهیم با حروف بزرگ ( به جز زبان فارسی )نمایش یابد از uppercase استفاده می کنیم.
    نکته :
    برخی از تگ های و عناصر HTML هستند که به مرور زمان با تگهای دیگری جایگزین می شوند و از استفاده از آنها صرف نظر می گردد، به عنوان مثال تا چند وقت پیش تگی که برای bold کردن یا ضخیم کردن متون یه کار می رفت <b> بود که به جای آن هم اکنون از تگ strong استفاده می شود. اهمیت این موضوع زمانی است که افراد نابینا برای کار با وب سایت ها از نرم افزارهایی استفاده میکنند که بجای نمایش صفحات وب آن را برای کاربر خود می خوانند که به اصطلاح به آن ها screen reader می گویند.در اینجاست که آنها در هنگام خوانندن مطلب متنی را که با تگ em مشخص شده است را مهمتر میدانند تا متنی را که درون تگ i قرار گرفته همچنین موتورهای جستجو در گوگل به متنی که با تگ strong ضخیم شده است بیشتر توجه میکنند و به عنوان متن مهمی که در یک متن استفاده شده است می نگرند تا به متنی که با تگ b ضخیم شده باشد.
    نگاهی به عناصر درون صفحه:
    در پاراگراف زیر همانطور که ملاحظه می کنید، برای استایل دهی به پاراگراف ها استایل زیر تعریف شده است، که توسط تگ body نوع فونت این متون مشخص گردیده است.
    Body{
    Font-family: verdana, Helvetica, Arial, San-serif;
    }
    P{
    Font-size: small;
    Color: navy;
    }
    خط بالا به ما میگه که هر تگ p که در صفحه بود استایل بالا را بگیرد.
    اما دلیل ما از به کاربردن این مثال برای این است که می خواهیم پاراگرافی را متمایز از سایر متون وب سایتمان کنیم و آن اولین پاراگراف متن ما است. حالا برای متمایز کردن این پاراگراف برای آن به صورت زیر عمل می کنیم:
    <div id=”tagline”>
    <p>Diving club for the south-west UK – let’s make a splash! </p>
    < /div>
    متن درون این تگ از خصوصیات گرفته شده سایر متون پیروی نمی کند و در عوض خصوصیت مربوط به div خود را می گیرد که شامل خصیصه خاصی است که با id ای به نام tagline تعریف شده است که این خصوصیت تنها به برای همین تگ خواهد بود. حالا برای تعریف درون فایل css برای آن خصوصیات زیر را تعریف می کنیم:
    #tagline p {
    Font-style: italic;
    Font-family: Georgia, Times, Serif;
    }
    فایل css را ذخیره کرده و سپس پنجره مرورگرتان را refresh کنید
    برای هر متنی که درون تگ p قرار گرفته باشد و id آن tagline باشد، نوع فونت آن italic و از نوع Georgia یا Times و یا Serif خواهد بود.
    یعنی هر تگ p که داخل آی دی tagline قرار گرفته است و نه p های دیگر .
    علامت # در CSS به عنصری اشاره می کند که شامل یک Id خاص با خصوصیات مربوط به خود است. در مورد Id در قسمت های جلوتر به طور کامل خواهیم پرداخت.
    گزینشگر متنی
    #tagline p یک گزینشگر متنی است، در اینجا چند مثال دیگر برایتان مطرح می کنم.
    Navigation a{#
    Text-decoration: none;
    }
    برای هر تگ a ای که درون تگی با navigation =id است، آن لینک فاقد زیر خط در هنگام کلیک کردن آن لینک خواهد بود.
    #footer {
    line-height: 150%;
    }
    درون تگی که id footer دارد، تمامی متون دارای %150 فاصله میان خطوط خواهند بود.
    h1 strong {
    color: red;
    }
    هر تگ strong ی که درون تگ h1 قرار گیرد رنگ آن قرمز خواهد بود.
    سبک دهی گروهی
    گاهی اوقات می بینید که در هنگام استایل دهی یکسری از تگ ها هستند که خصوصیات یکسانی دارند اما در فایل CSS برای هر یک از آنها کلاس و یا تگ جداگانه ای در نظر گرفته شده مثلا:
    h1 {
    color: yellow;
    background-color: black;
    }
    h2 {
    color: yellow;
    background-color: black;
    }
    h3 {
    color: yellow;
    background-color: black;
    }
    این کار باعث می شود تا علاوه بر اینکه حجم فایل CSS تان زیاد شود فایلتان نیز کثیف به نظر برسد، به همین دلیل در این مواقع بهتر است مانند زیر عمل نمایید:
    h1, h2, h3 {
    color: yellow;
    background-color: black;
    }
    توجه داشته باشید که برای جداکردن تگ ها از همدیگر از کاراکتر ( ,) کاما ، استفاده کردیم که این علامت را می توانید به معنای یا تعبیر کنید.
    حالا بیایید تا در پروژه مان دسته بندی کردن عناصر را انجام دهیم. ما در پروژه مان هنوز از تگ h3 استفاده نکرده ایم اما به زودی این کار را خواهیم کرد.
    فایل css تان را با اضافه کردن css زیر به انتهای آن ویرایش کنید.
    h1, h2, h3 {
    font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
    background-color: navy;
    color: white;
    }
    حالا فایل css را ذخیره کرده و پنجره مرورگر خود را ویرایش نمایید

    یک سوال ؟
    به مثال زیر دقت کنید
    h1, h2, h3 {
    font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
    background-color: navy;
    color: white;
    }
    h3 {
    color: red;
    }
    تگ h3 چه رنگی می گیرد ؟
    یک بار تگ h3 سفید شده و بعد از آن رنگ آن قرمز شده پس رنگ قرمز به خود می گیرد .
    البته ارجعیت دستورات سی اس اس بحث خود را دارد که در دوره های بعدی طراحی سایت حتما به آن می پردازیم
     

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

    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.