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

با سلام خدمت خوانندگان وب سایت عصر نوشتن، قسمت دوازدهم آموزش طراحی سایت از پایه را شروع می کنیم. کمی با تگ های 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;
}

ادامه دارد اگر مورد استقبال قرار گیرد!

ترجمه: خانم طلوع کوچک
بازبینی : بهزاد علی بیگی

برای مقاله های بیشتر و دریافت pdf  مقالات ما را دنبال کنید:

آموزش طراحی سایت از پایه – قسمت سیزدهم
آموزش طراحی سایت از پایه – قسمت چهاردهم