یادگرفتن پباده سازی سایت از اساس – نصیب دوازدهم

ساخت وبلاگ

 

با درود سرویس خوا‌نندگان وبسایت عصر نوشتن , نصیب دوازدهم یادگرفتن  یه خرده با تگ های inline و block آشنا شدیم . ولی اکنون میخواهیم با جزییات بیشتر با آنان آشنا شویم و به آن ها استایل بدهیم .

طراحی سایت در مشهد
تشخیص عنصرها inline

بی آلایش ترین روش تشخیص یک عنصر inline از blockاین است که عنصر inline داخل یک عنصر دیگر قرار می‌گیرد . یک مـثال فیزیکی برای این قضیه این است که شما می‌توانید داخل یک باکس یک عکس یا این که چند عکس را قرار دهید البته باطن یک عکس نمیتوان یک سری باکس را قرار اعطا کرد .
از حیث فیزیکی هم این فرمان قابلیت و امکان پذیر نیست . یک نمونه عالی برای این زمینه span است که میتواند گروهی از لغات را به نیز مربوط نماید و به آن ها استایل دهد :

” fun ” >Bubble Underis 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 .


نمونه های دیگری برای موادسازنده داخل خطی :
• em
• Strong
• Cite
• a
به نمونه بالا یکبار دیگر نگاه فرمائید , هر کدام از موادتشکیل دهنده inline بالا می‌توانند به جای تگ span در پاراگراف قرار گیرند :

Bubble Under is a group of diving enthusiasts…

Bubble Under is a group of diving enthusiasts

Bubble Under is a group of diving enthusiasts…

” http : //www . bubbleunder . com/ ” >Bubble Under is a group of diving enthusiasts…


باوجود این‌که عنصرimg یک عنصر باطن خطی است , ولی ما آن را مانند روش های بیان شده در ابتدا استفاده نمیکنیم . تصویر هیچگونه اطلاعاتی را برای مرورگر تامین نمیکند که برای مثال نوشته خویش را به چه شکل نمایش بدهد زیرا یک تصویر فقط یک عکس است و متنی برای آشکار کردن ندارد .

موادتشکیل دهنده inline داخل یکدیگر

موادتشکیل دهنده inline فارغ از هیچ مشکلی میتوانند باطن یکدیگر قرار گیرند , به نمونه زیر توجه فرمائید :

” fun ” >” http : //www . bubbleunder . com/ ” >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 .


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

 


: //www . bubbleunder . com>
Bubble Under

 

 

این جور کد زدن برای همه تگ ها و عنصرها 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 به آن پاراگراف استایل خاصی می‌دهیم .

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 .

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 .

” 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 .

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 .


desi


gn - web - 121 . jpg

تهیه کردن طول :

تهیه کردن طول یک عنصر نیز به به عبارتی آسانی پهنا دادن به آن عنصر بلاک است , البته در بیشتر مواقع عموما از دادن یک طول اثبات به موادتشکیل دهنده خودداری می‌شود زیر را سبب می‌شود تا محدودیتی را برای موادتشکیل دهنده خویش تولید فرمایید این فعالیت فقط وقتی صورت میگیرد که بدانید تعداد گزینه های جان دار در تگ شما محدود است و بنابر این برای این‌که مطمئن گردید طول آن همواره اثبات خواهد بود به آن می‌توانید طول بدهید , برای مثال برای منوی سر گروه وبسایت که معمولا تعداد پیوند هایی که در آن قرار میگیرد میان صفحه ها متعدد تارنما معلوم است .
XHTML زیر را در لحاظ بگیرید :

” mainnavigation ” >
Site Navigation


    ” home . html ” >Home

    ” recent . html ” >Recent Work

    ” portfolio . html ” >Portfolio

    ” testimonials . html ” >Testimonials

    ” contact . html ” >Contact

 


همان طور که در کد بالا میبینید یک تگ div منوی کاپیتان مارا در برگرفته است و همانگونه که می‌بینید دارنده id است به نام mainnavigation و در‌حالتی که به خاطر داشته باشید پیش از این گفتیم که div یک عنصر بلاک است , پس می‌توانیم به آن استایل دهی کرده و css بدهیم و درین فی مابین زیرا تعداد این پیوند ها نسبتاً مشخص و معلوم است می توان برای آن پهنا و طول خاصی را در لحاظ گرفت , عالی پس بیایید با نیز به آن استایل دهیم :

#mainnavigation {
background - color : #ffcc33;
color : navy;
font - weight : bold;
width : 200px;
height : 400px;
}

همانگونه که در کد بالا میبینید اینجانب بدین منوی رنگ دور نما #ffcc33 هم داده ام تا در طول نمایش عنصر بلاک را به راحتی تشخیص دهید و مشاهده کنید , همینطور به آن پهنا و طول ثابتی داده ام که به صورت یک چهارگوش نمایش یابد .

design - web - 122 . jpg

چنانچه منوی راهبری بیش تر از حد طولانی شود چه اتفاقی می افتد؟

گفتیم که می‌توانیم فرض کنیم که تعداد گزینه های منوی ما محدود است پس می شود به آن پهنا و طول اعطا کرد , البته می بایست این نکته را در لحاظ گرفت که بسته به مدل مرورگر طرز نمایش آن مختلف است :
– در فایر نمابر 3 و IE 7 , 8ارتفاع داده شده سبب ساز می گردد تا دورنما به به عبارتی ارتفاعی که معین شده به رنک متبوع ( زردرنگ ) نمایش یابد و از آنجا به بعداز تگ فوق خارج می‌زند .
– البته در مرورگر های کهن IE ورژن های 6 به پیشین از آن بگراند زردرنگ فارغ از در حیث به چنگ آوردن این‌که طول ثابتی دارااست در شرایطی‌که تعداد گزینه های آن مضاعف خیس از طول داده شده شود توسعه و گسترش مییابد .
صورت زیر به ترتیب از چپ به راست مصداق توضیحات بالاست :

design - web - 123 . jpg

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

معرفی مطالب جالب با لینک منبع...
ما را در سایت معرفی مطالب جالب با لینک منبع دنبال می کنید

برچسب : نویسنده : امین طیرانی rayap بازدید : 316 تاريخ : سه شنبه 14 فروردين 1397 ساعت: 19:20