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

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

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

  1. salavati1

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

    تاریخ عضویت:
    ‏15 آگوست 2016
    ارسال ها:
    2,017
    تشکر شده:
    232
    جنسیت:
    زن
    قسمت دوازدهم آموزش طراحی سایت از پایه را شروع می کنیم. کمی با تگ های inline و block آشنا شدیم. اما حالا می خواهیم دقیق تر با آنها آشنا شویم و به آنها استایل بدهیم.
    تشخیص عناصر inline
    ساده ترین روش تشخیص یک عنصر inline از blockاین است که عنصر inline درون یک عنصر دیگر قرار می گیرد. یک مـثال فیزیکی برای این مسئله این است که شما می توانید درون یک جعبه یک عکس یا چندین عکس را قرار دهید اما درون یک عکس نمی توان چندین جعبه را قرار داد.
    از لحاظ فیزیکی نیز این امر امکان پذیر نیست. یک مثال خوب برای این موضوع span است که می تواند گروهی از کلمات را به هم مربوط کند و به آنها استایل دهد:
    <p><span class=”fun”>Bubble Under</span>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>
    مثال های دیگری برای عناصر درون خطی:
    • em
    • Strong
    • Cite
    • a
    به مثال بالا یکبار دیگر نگاه کنید، هر یک از عناصر inline بالا می توانند به جای تگ span در پاراگراف قرار گیرند:
    <p><em>Bubble Under</em> is a group of diving enthusiasts…</p>
    <p><strong>Bubble Under</strong> is a group of diving enthusiasts </p>
    <p><cite>Bubble Under</cite> is a group of diving enthusiasts…</p>
    <p><a href=”http:// www. bubbleunder.com/”>Bubble Under</a> is a group of diving enthusiasts… </p>
    باوجود اینکه عنصرimg یک عنصر درون خطی است، اما ما آن را مثل روش های گفته شده در بالا استفاده نمی کنیم. تصویر هیچگونه اطلاعاتی را برای مرورگر تامین نمی کند که به عنوان مثال متن خود را چگونه نمایش بدهد چون یک تصویر تنها یک عکس است و متنی برای نمایش دادن ندارد.
    عناصر inline درون یکدیگر
    عناصر inline بدون هیچ مشکلی می توانند درون یکدیگر قرار گیرند، به مثال زیر دقت کنید:
    <p><span class=”fun”><a href=”http:// www. bubbleunder.com/”>Bubble
    Under</a></span> 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>
    یکی از قوانین XHTML باز و بسته شدن تگ هاست .باید دقت داشته باشید اگر تگی باز شود و بعد از آن تگ های دیگری باز شوند نحوه بسته شدن تگ ها به صورت بر عکس خواهد بود یعنی ابتدا آخرین تگی که باز شده بسته می شود و این روند بستن تگ ها تا آنجایی پیش می رود که به اولین تگی برسیم که باز کرده ایم.
    <strong>
    <em>
    <cite>
    <a href=http:// www. bubbleunder.com>
    Bubble Under
    </a>
    </cite>
    </em>
    </strong>
    این مدل کد زدن برای تمامی تگ ها و عناصر inline و یا block بکار میرود و هیچ تفاوتی نمی کند.
    نکته از مترجم : عناصر block هیچگاه درون عناصر inline قرار نمی گیرند مگر در استثناء هایی در استاندارد HTML5
    استایل دهی به عناصر inline و :block
    عناصر Inline یکسری از خصوصیات را می توانند به ارث ببرند اینجا لیست وار برای مروری اجمالی یادآور می شوم:
    • تغییر رنگ ( متن یا پس زمینه )
    • تغییر خصوصیات فونت (سایز، نوع قلم، سایر خصیصه های استایل دهی به فونت مثل: زیر خط کشیدن و …)
    و برای عناصر block این محدودیت را نداریم و عناصر می توانند خصیصه های بیشتری از ابزارهای css را به ارث ببرند:
    • به یک متن یا پاراگراف می توان عرض و ارتفاع ثابتی داد.
    • برای عناصری که درن یک div قرار گرفته اند می توانید paddingاستفاده کنید تا آنها را از لبه های div اصلی فاصله دهید.
    • جابجا کردن یک عنصرblock در هر جای صفحه وب بدون در نظر گرفتن موقعیت آن در صفحه که باعث می شود بسیار چشمگیر ظاهر شود.
    نکته مترجم : دقت نمایید برای این که بتوانیم ظاهری بیشتر از 2 مورد مطرح شده برای عناصر inline به عنصر مورد نظر بدهیم میبایست آن را به block تبدیل نماییم.
    اندازه دادن به عناصرblock :
    به طور پیش فرض عناصر block عرضی معادل با 100% فضای اطراف خود را در صفحه سایت اشغال می کنند. حتی اگر که div ای که در برگیرنده آنهاست دارای ارتفاع یا عرض مشخصی باشد. تا اینجای کار تمامی مثال های ما شامل این قضیه می شد اما اگر شما بخواهید می توانید این مقدار را عوض کنید و به جای 100% به آن مقدار دیگری را بدهید.
    تنظیم کردن عرض
    در نظر بگیرید که شما چندین پاراگراف دارید که به طور پیش فرض این پاراگراف ها عرض 100% دارند (چرا که block) هستند، و اکنون شما می خواهید تا یکی از این پاراگراف ها بیشتر از بقیه چشمگیر باشد و عرض آن با بقیه متفاوت باشد پس از طریق css به آن پاراگراف استایل خاصی می دهیم.
    <p>We’ve stayed in quite a few caravan parks and camp sites over
    the last couple of months, and I’ve started to notice a few
    things that seem to suggest that there are some unwritten
    rules of staying at these places. Unwritten until now, that is.</p>
    <p>Everyone else on site will be better prepared and better
    equipped than you. It’s a fact. No matter what extras you
    might carry, someone a couple of plots down will still have
    more. Utensil envy is rife.</p>
    <p class=”attentiongrab”>When you first park, the distance
    between the power supply and your van’s power socket will be
    precisely 2 inches longer than the inadequate power lead that
    you own.</p>
    <p>On the hottest evenings, you will be parked next to someone
    with a very flashy van that’s equipped with an air-con unit.
    It will be facing you, blowing out hot air and taunting you
    with its efficient hum.</p>
    تنظیم کردن ارتفاع :
    تنظیم کردن ارتفاع یک عنصر هم به همان سادگی عرض دادن به آن عنصر بلاک است، اما در بیشتر مواقع عموما از دادن یک ارتفاع ثابت به عناصر پرهیز می شود زیر را باعث می شود تا محدودیتی را برای عناصر خود ایجاد کنید این کار تنها زمانی صورت می گیرد که بدانید تعداد آیتم های موجود در تگ شما محدود است و بنابر این برای اینکه مطمئن شوید ارتفاع آن همواره ثابت خواهد بود به آن می توانید ارتفاع بدهید، به عنوان مثال برای منوی راهبر سایت که معمولا تعداد لینک هایی که در آن قرار می گیرد در بین صفحات مختلف سایت مشخص است.
    XHTML زیر را در نظر بگیرید:
    <div id=”mainnavigation”>
    <h3>Site Navigation</h3>
    <ul>
    <li><a href=”home.html”>Home</a></li>
    <li><a href=”recent.html”>Recent Work</a></li>
    <li><a href=”portfolio.html”>Portfolio</a></li>
    <li><a href=”testimonials.html”>Testimonials</a></li>
    <li><a href=”contact.html”>Contact</a></li>
    </ul>
    </div>
    همانطور که در کد بالا می بینید یک تگ div منوی راهبر ما را در برگرفته است و همانطور که می بینید دارای id است به اسم mainnavigation و اگر به خاطر داشته باشید قبلا گفتیم که div یک عنصر بلاک است ، پس می توانیم به آن استایل دهی کرده و css بدهیم و در این میان چون تعداد این لینک ها تقریبا مشخص است می توان برای آن عرض و ارتفاع خاصی را در نظر گرفت، خوب پس بیایید با هم به آن استایل دهیم :
    #mainnavigation {
    background-color: #ffcc33;
    color: navy;
    font-weight: bold;
    width: 200px;
    height: 400px;
    }
    همانطور که در کد بالا می بینید من به این منوی رنگ پس زمینه #ffcc33 نیز داده ام تا در زمان نمایش عنصر بلاک را به راحتی تشخیص دهید و ببینید، همچنین به آن عرض و ارتفاع ثابتی داده ام که به شکل یک چهارگوش نمایش یابد.
    اگر منوی راهبری بیش از حد طولانی شود چه اتفاقی می افتد؟
    گفتیم که می توانیم فرض کنیم که تعداد آیتم های منوی ما محدود است پس می توان به آن عرض و ارتفاع داد، اما باید این نکته را در نظر گرفت که بسته به نوع مرورگر نحوه نمایش آن متفاوت است:
    – در فایر فاکس 3 و IE 7 , 8ارتفاع داده شده باعث می شود تا پس زمینه به همان ارتفاعی که مشخص شده به رنک مورد نظر (زرد رنگ ) نمایش یابد و از آنجا به بعد از تگ فوق بیرون می زند.
    – اما در مرورگر های قدیمی IE نسخه های 6 به قبل از آن پس زمینه زرد رنگ بدون در نظر گرفتن اینکه ارتفاع ثابتی دارد اگر تعداد آیتم های آن زیاد تر از ارتفاع داده شده شود توسعه می یابد.

    این تفاوت نمایش در مرورگرهای مختلف یکی مهمترین مشکلات یک طراح حرفه ایست. در نتیجه برای یک طراحی سایت بدون نقص می بایست مرحله به مرحله وب سایت را در مرورگرهای مختلف تست نمایید.
    افزودن border به عناصر block :
    برای عناصر بلاک شما می توانید انواع مختلفی از border (کناره) را به کار ببرید که شامل:
    – ضخامت های مختلف برای کناره ها
    – سبک دهی های مختلف به کناره ها (خطوط صاف ، نقطه چین و …)
    – دادن رنگ های دلخواه
    Css ای که می توان برای این مورد به کار برد به ترتیب: border-width و border-style و border-color.
    به مثال زیر نگاه کنید تا بهتر آن را درک کنید:
    .highlight {
    border-width: 5px;
    border-style: solid;
    border-color: black;
    }
    کناره inset
    اگر بردر solid به کار شما نمی آید شما می توانید از بردر inset استفاده نمایید.
    .highlight {
    border-width: 10px;
    border-style: inset;
    border-color: #999999;
    }
    رنگی Border :
    شما می توانید از رنگ هم در css خود برای کناره ها استفاده کنید تا بردرهایی با دو رنگ و جلوه متفاوت ایجاد کنید
    .highlight {
    border-width: 10px;
    border-style: ridge;
    border-color: red;
    {
    مدل های دیگر بردر
    .highlight {
    border-width: 10px;
    border-style: dotted;
    border-color: purple;
    }

    highlight{
    border-width: 10px;
    border-style: dashed;
    border-color: purple;
    }
     

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

    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.