آموزش طراحی سایت - بخش پنجم
در بخش پنجم مقاله آموزش طراحی سایت راجع به سی اس اس ( css) و نحوه استایل دهی به آن صحبت خواهم کرد . برای اینکه بتوان به صفحه وب سایتمان ظاهری زیبا بدهیم می بایست با css این کار را انجام داده و یا به عبارتی به عناصر وب سایتمان سبک بدهیم.
اولین مورد در طراحی، فونت یا typeface استفاده شده در سایت می باشد، که به صورت پیش فرض فونت مورد استفاده برای اکثر مرورگرها Times New Roman است. اما از نظر کاربران این فونت باعث ایجاد یکنواخت شدن سایت ها شده به همین دلیل در طراحی یک وب سایت می توان با استفاده از خصوصیت font-family سبک فونت استفاده شده در سایت را تغییر داد.
بهترین حالت استفاده از آن در تگ body می باشد.
BODY{
FONT-FAMILY: VERDANA;
}
فونت استفاده شده در اینجا verdana است و اگر درون تگ body قرار گیرد باعث می شود که تمامی متن های مورد استفاده در سایت، از این فونت استفاده کنند. حال اگر بخواهیم تگی در سایتمان با فونت دیگری نمایش یابد، به طریقی جداگانه به آن استایل می دهیم که البته کمی جلوتر آن را توضیح خواهم داد.
در نظر بگیرید که کاربری از سایت شما دیدن کند و فونت verdana روی سیستم خود نصب نکرده باشد، حالا چه اتفاقی میافتد؟
در این حالت مرورگر خودش حدس می زند و بهترین فونتی را که به فونت انتخاب شده شما نزدیک است انتخاب می کند. اما ما می توانیم خودمان این کار را انجام دهیم و آن را از حیطه حدس زدن مرورگر خارج نماییم. این کار از طریق همان font-family انجام می گیرد، به مثال زیر توجه کنید :
BODY{
FONT-FAMILY: VERDANA, HELVETICA, ARIAL, SAN-SERIF ;
}
این خط به مرورگرها اعلام می کند که اگر فونت verdana بر روی سیستم کاربر نصب نبود و لود شدن این فونت برای عناصر موجود در درون صفحه سایت موفقیت آمیز نبود، از فونت Helvetica استفاده کن، اگر Helvetica نیز نصب نبود از Arial برای لود شدن متون صفحه استفاده کن، در غیر اینصورت از یکی از فونت های San-serif که بر روی سیستم کاربر نصب است استفاده کن.
این css را به فایل css خود اضافه کنید و سپس آن را ذخیره نمایید، صفحه وب سایت را با مرورگر روی سیستم تان باز کنید، خواهید دید که فونت های موجود در صفحه همگی verdana شده اند. مانند شکل زیر:
فونت San-serif :
این فونت از جمله فونت هایی است که برای مطالعه کردن و پرینت گرفتن بسیار مناسب می باشد و خوانایی آن به دلیل آنکه فونت آن( بدون لبه) ساده است و کلمات را با حداقل شکستگی در فونت نمایش می دهد بسیار آسان است. فونت serif یا لبه دار در پایین نمایش داده شده است :
اگرچه استفاده از این فونت برای پرینت گرفتن بسیار مناسب است اما توجه داشته باشید که گاهی اوقات برای وب سایت ها این فونت پیشنهاد نمی شود چرا که اگر سایز فونت کوچک باشد نمی توان در سایز کوچک ظرافت فونت را به خوبی نمایش داد، پس این فونت برای سایت هایی که سایز فونت آنها کوچک است توصیه نمی گردد.
مطلب آخر اینکه توجه کنید که حتما بین دو کلمه san و serif حتما ” – ” را قرار دهید.
سبک دهی به عناوین :
اولین عنصری که در سایت به آن استایل می دهیم تیتر موجود در صفحه است که آن را با تگ h1 مشخص می کنیم، حالا بیایید چند استایل به این تگ مان اضافه کنیم.
H1 {
FONT-FAMILY: ” TREBUCHET MS “, ARIAL, HELVETICA, SAN-SERIF;
}
این خط css بیان می کند که تمامی عناوین صفحه Trebuchet MS می شوند در حالیکه سایر متون صفحه verdana خواهند بود.
H2 {
FONT-FAMILY: BYEKAN, ARIAL, SANS-SERIF;
}
تمامی تیتر های سایت و عناوین از خط فوق استایل خود را می گیرند در حالی که سایر متون سایت فونت تگ body یعنی tahoma را می خوانند.
BODY {
FONT-FAMILY: TAHOMA,SERIF,SANS-SERIF;
}
همانطور که می بینید برای فونت Trebuchet MS از دبل کتیشن استفاده شد، اما برای سایر فونت ها استفاده نکردیم، به طور کلی اگر اسم فونت انتخابی مان تک کلمه ای باشد نیازی به استفاده از کتیشن نیست در غیر اینصورت برای نام فونت هایی که دو یا سه کلمه ای هستند(مثل: “Times New Roman”) حتما از کتیشن استفاده می کنیم.
جهت مشخص شدن موضوع مثال دیگری نیز برای شما می زنم، به عنوان مثال در سایت یک شرکت طراحی سایت مثل این سایت تیتر های صفحه byekan است و سایز متون صفحه Tahoma .
توضیح : یکی از مشکلاتی که در وب فارسی با آن مواجه هستیم، محدودیت فونت است که معمولا به 3 نوع فونت ختم می شود اما اخیرا” امکان درج انواع فونت ها در صفحه وجود دارد .
اگر مرورگر خود را refresh کردین و تغییرات را مشاهده نکردین، ابتدا بررسی کنید و ببینید که آیا پس از اعمال تغییرات CSS خود را ذخیره کرده اید یا نه. اگر این مورد درست بود بررسی کنید و ببینید که آیا لینک CSS خود را درست داده اید و اسم آن را درست تایپ کرده اید، آخرین مورد نیز ممکن است به دلیل cache کردن مرورگرتان باشد، که در این صورت برای مرورگر IE از دکمه R+ Ctrl استفاده می نمایید و برای مرورگر فایر فاکس Ctrl + F5 کمک می گیرید، تا cache مرورگر خود را پاک نمایید.
حالا بیایید کمی ظاهر سایت را عوض کنیم، در این قسمت ویژگی های بیشتری به تگ body مان می افزاییم و ظاهر منو را نیز تغییر می دهیم، CSS زیر را به فایل CSS خود اضافه کنید.
BODY {
FONT-FAMILY: VERDANA, HELVETICA, ARIAL, SANS-SERIF;
BACKGROUND-COLOR: #E2EDFF;
LINE-HEIGHT: 125%;
PADDING: 15PX;
}
H1{
FONT-FAMILY: “TREBUCHET MS”, HELVETICA, ARIAL, SANS-SERIF;
FONT-SIZE: X-LARGE;
}
LI{
FONT-SIZE: SMALL;
}
H2{
COLOR: BLUE;
FONT-SIZE: MEDIUM;
FONT-WEIGHT: NORMAL;
}
P{
FONT-SIZE: SMALL;
COLOR: NAVY;
}
حالا پس از ذخیره کردن فایل css تان مرورگر خود را یکبار دیگر refresh نمایید و تصویری مشابه با تصویر زیر ملاحظه نمایید.
حالا توضیح خصوصیات اضافه شده در بالا:
BODY {
FONT-FAMILY: VERDANA, HELVETICA, ARIAL, SANS-SERIF;
BACKGROUND-COLOR: #E2EDFF;
LINE-HEIGHT: 125%;
PADDING: 15PX;
}
خصوصیت background-color برای اکثر تگ های HTML کاربرد دارد و با روشهای گوناگونی می توان رنگ دهی به پیش زمینه سایت را اعمال کنیم. برای تعیین کردن رنگ پیش زمینه دو روش وجود دارد، یکی اینکه نام رنگ را بنویسیم، مثل؛ yellow, blue, white, red,…. و روش دیگر استفاده از اعداد دسیمال مانند؛ 4ab390# است. بهترین روش و راحت ترین آن برای انتخاب و استفاده از رنگ مورد دلخواه خود در سایت استفاده از color picker نرم افزار photoshop است که به راحتی رنگ را به صورت عددی در اختیار شما قرار می دهد.
نحوه استفاده از این ارقام نیز بدین صورت است:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10, 11, 12…
خصوصیت بعدی line-height است که با افزایش دادن مقدار آن می توان فواصل بین خطوط متن را بیشتر کرد و خصوصیت padding نیز برای ایحاد فاصله میان تگ مورد نظر و عنصر خارجی آن که درون تگ body قرار دارد می باشد. این فاصله را می توان برای هر چهار جهت بالا، پایین، چپ و راست و با یک یا دو و یا تنها سه جهت آن قرار داد. انشالله در فصل بعدی در مورد padding به طور کامل توضیح خواهم داد.
تنها نکته باقی مانده مقدار دهی به padding است که به صورت عددی در مبنای پیکسل استفاده می کنیم، مانند px15 و این مقدار باعث ایجاد فاصله برای body می شود که مطالب سایت از هر چهار جهت به اندازه px15 فاصله یابد. همانطور که قبلا نیز اشاره کردیم، واحد پیکسل برای سایز دهی به تصاویر نیز به کار می رود، اصولا پیکسل کوچکترین واحد موجود در صفحه نمایش است.
همانطور که گفتیم به متون سایت نیز می توان هم رنگ و هم سایز داد، همانطور که در تصویر فوق دیدید رنگ استفاده شده در اینجا ، آبی است.
P{
FONT-SIZE: SMALL;
COLOR: NAVY;
}
برای منو نیز سایز فونت را small در نظر گرفتیم که با توجه به نوع مرورگر سایز پیش فرض small آن ، در مرورگرهای مختلف تفاوت دارد، محدوده مقدار دهی آن small, medium, large, x-large و xx-large است.
برای تگ h1 نیز سبک جدیدی از استایل دهی را قرار می دهیم، چون این تگ برای تیتر اصلی صفحه استفاده می شود، سایز آن را بسیار بزرگ یا همان x-large
انتخاب کردیم.
H1{
FONT-FAMILY: “TREBUCHET MS”, HELVETICA, ARIAL, SANS-SERIF;
FONT-SIZE: X-LARGE;
}
و برای تگ h2 سایز فونت را متوسط برگزیدیم. و تگ p تنها سایز و رنگ گرفته است . با این مثال ها سبک دهی به عناصر را آغاز کردیم ولی تازه شروع کار است .
تا اینجای کار به چند مثال ساده اما کاربردی با 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 سفید شده و بعد از آن رنگ آن قرمز شده پس رنگ قرمز به خود می گیرد .
البته ارجعیت دستورات سی اس اس بحث خود را دارد که در دوره های بعدی حتما به آن می پردازیم .
آموزش طراحی سایت - بخش اول
آموزش طراحی سایت - بخش دوم
آموزش طراحی سایت بخش چهارم
آموزش طراحی سایت بخش پنجم
