دوره آموزشی رایگان و آنلاین طراحی سایت بخش دهم

3
دوره آموزشی رایگان و آنلاین طراحی سایت
دوره آموزشی رایگان و آنلاین طراحی سایت

در جلسات گذشته مطالبی در مورد استایل بندی css مطرح شد. در جلسه دهم سعی خواهیم کرد در مورد مواردی از جمله فونت کلمات و ظاهر و زیبایی سایت صحبت کنیم.

دوره آموزشی رایگان و آنلاین طراحی سایت
دوره آموزشی رایگان و آنلاین طراحی سایت

بحث نخست در مورد فونت یا typeface  در صفحات سایت است ، در حالت کلی اگر شما هیچ فونتی رو برای صفحات سایتتون انتخاب نکنید فونت پیش فرض در مرورگرها Times New Roman می باشد و مورد استفاده قرار میگیرد. این فونت پیش فرض مقداری خسته کننده است ، و اگر از این فونت در صفحات وبتون استفاده بکنید مطمئنا حوصلهه کاربران سایتتون بسر خواهد رفت به همین خاطر ما خصوصیت font-family یا سبک فونت در سایت ها رو برای شما آموزش خواهیم داد تا بتونید فونت متفاوت و زیبا رو براساس زبان سایتتون انتخاب کنید.
خصوصیت font-family رو می تونید در تگ body استفاده بکنید.

[box type=”info” align=”aligncenter” ]

}Body
;Font-family: verdana
}

[/box]

در کد بالا از فونت verdana استفاده کرده ایم ، اگر بخواهید تمامی کلمات موجود در سایتتان از این فونت استفاده بکند باید Font-family رو درون تگ body قرار دهید در غیر اینصورت اگر بخواهید قسمتی از سایتتان با فونت دیگر نمایش یابد باید از روش دیگری استفاده کرد که در ادامه خواهیم گفت.
در نظر بگیرید که کاربری از سایت شما دیدن کند و فونت verdana روی سیستم خود نصب نکرده باشد، حالا چه اتفاقی میافتد؟ در این حالت معمولا مرورگر ها فونتی را که به فونت انتخابی شما نزدیک است انتخاب کرده و مطالب را با آن فونت به کاربر نشان می دهد ؛ اگر بخواهیم خودمان اینکار را انجام دهیم باید تغییراتی در font-family  انجام دهیم ، به مثال زیر توجه کنید :

[box type=”info” align=”aligncenter” ]

}Body
;Font-family: verdana, Helvetica, Arial, San-serif
}

[/box]

 

دستوری که کادر بالا ذکر شده به مرورگر ها اطلاع می دهد در صورتی که فونت verdana در سیستم بازدید کننده وجود نداشت از فونت Helvetica ؛ اگر Helvetica  نصب نبود از فونت Arial برای بارگزاری جملات و عناصر صفحه اینترنتی شما استفاده نماید ، در صورت نبودن هیچ یک از فونت های قید شده  از فونت های San-serif که بر روی سیستم کاربر نصب است استفاده کند. این css را به فایل css خود اضافه کنید و سپس آن را ذخیره کنید ، صفحه وب سایت را با مرورگر روی سیستم تان باز کنید ، خواهید دید که فونت های موجود در صفحه همگی verdana شده اند.

نکاتی در مورد فونت San-serif :
این فونت از جمله فونت هایی است که برای مطالعه کردن و پرینت گرفتن بسیار مناسب می باشد . اگرچه استفاده از این فونت برای پرینت گرفتن بسیار مناسب است اما توجه داشته باشید که گاهی اوقات برای وب سایت ها این فونت پیشنهاد نمی کنیم چرا که این فونت ظرافت های فونت فارسی رو نداره و برای سایت هایی که از سایز با فونت ریز استفاده می کنند مناسب نیست. توجه داشته باشید که حتما بین دو کلمه san و serif حتما ” – ” را قرار دهید که در صورت عدم استفاده فونت عمل نخواهند کرد.

سبک دهی به عناوین  مطالب :
اولین عنصری که در صفحات سایت باید به آن استایل داد تیتر ها است که آن را با تگ h1 نشان می دهیم ،در مثال های زیر بصورت عملی با این موارد آشنا خواهید شد.

[box type=”info” align=”aligncenter” ]

  }h1

;Font-family: ” Trebuchet MS “, Arial, Helvetica, San-serif
}

[/box]

این دستور css میگه تمامی عناوین صفحه Trebuchet MS باید باشند در حالیکه عناصر دیگر صفحه  verdana هستند.

[box type=”info” align=”aligncenter” ]

}h2
;Font-family: byekan, Arial, Sans-Serif
}

[/box]

به دستور زیر توجه کنید ؛ همه تیتر های صفحه اینترنتی شما و عناوین از خط فوق استایل خود را می گیرند در حالی که سایر متون سایت فونت تگ body یعنی tahoma را می خوانند.

[box type=”info” align=”aligncenter” ]

}body
;Font-family: Tahoma,Serif,Sans-Serif
}

[/box]

در دستور های بالا برای فونت Trebuchet MS از دابل کتیشن ؛ اما برای سایر فونت ها استفاده نکردیم ، به طور کلی اگر اسم فونت انتخابی مان تک کلمه ای باشد به استفاده از دابل کتیشن نیاز نداریم ، اما برای نام فونت هایی که دو یا سه کلمه ای هستند باید از کتیشن استفاده بکنیم.

چند نکته کاربردی :

در سورتی که کد ها رو ذخیره کردید و صفحه ی ساخته شده نهایی رو در مرورگر باز کردید و تغییرات انجام گرفته رو مشاهده نکردید ، ابتدا  بررسی کنید آیا پس از اعمال تغییرات CSS فایل رو کامل ذخیره نموده اید؟ اگر این مورد درست بود بررسی کنید و ببینید که آیا لینک CSS خود را درست داده اید و اسم آن را درست تایپ کردید ، شاید مشاهده نکردن تغییرات به دلیل cache کردن مرورگر باشد، که در این صورت برای مرورگر IE از دکمه R + Ctrl استفاده می نمایید و برای مرورگر فایر فاکس Ctrl + F5 کمک می گیرید ، تا cache مرورگر خود را پاک نمایید.

به کد های زیر توجه کنید :

[box type=”info” align=”aligncenter” ]

 

}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
{

[/box]

پس از اضافه شدن کد های بالا به فایل سی اس اس تفاوت ها رو مشاهده خواهید کرد ، چند مورد در کدهای بالا اضافه شده است که در مورد اون ها صحبت نکردیم ، حالا به توضیح اون ها خواهیم پرداخت.

[box type=”info” align=”aligncenter” ]

}body
;font-family: Verdana, Helvetica, Arial, sans-serif
;background-color: #e2edff
;line-height: 125%
;padding: 15px
}

[/box]

دستور background-color برای اغلب تگ های HTML استفاده می شود و با روشهای مختلفی میشود رنگ دهی به پیش زمینه سایت را اعمال کرد. برای تعیین کردن رنگ پیش زمینه ۲ روش وجود دارد ،  مثل : yellow, blue, white, red,… و روش دیگر استفاده از کد های رنگ ها است.روش های مختلفی برای دانستن کد رنگ ها وجود دارد ، یکی از روش ها استفاده از رنگ ها در فتوشاپ هست ، شما با باز کردن تصویر یک رنگ در فتوشاپ می توانید کد رنگ رو بدونید ، روش دیگر استفاده از افزونه ی Color zila در مرورگر ها است برای این کار در مرورگر موزیلا و یا کروم در قسمت افزونه ها و یا extention  ها در مرورگر است ، با مراجعه به قسمت افزونه مرورگر ها می توانید این افزونه رو نصب کنید و رنگ های موجود در سایت ها رو انتخاب کنید و کدش رو بدونید.

دستور دیگری رو که در جلسه دهم با اون آشنا خواهیم شد line-height است که با افزایش دادن مقدار آن می توان فواصل بین خطوط متن را تغییر داد و خصوصیت padding نیز برای ایحاد فاصله میان تگ و عناصر خارجی آن که درون تگ body استفاده می شود. این فاصله را می توان برای هر چهار جهت بالا، پایین، چپ و راست و با یک یا دو و یا تنها سه جهت آن قرار داد.
مورد دیگری که درباره padding باید گفت این است که بصورت عددی در مبنای پیکسل می توان فاصله ها را به مرورگر فهماند ، مثلا  ۱۰px ؛ این مقدار باعث ایجاد فاصله برای body می شود که مطالب سایت از هر چهار جهت به اندازه ۱۰px فاصله خواهد داشت .

جلسه دهم اینجا تموم میشه ، اگر سوالی داشتید در قسمت نظرات بپرسید تا پاسخ داده شود. این جلسات برایتان مفید هست؟ حتما ما رو از نظراتتون آگاه کنید.

شما می توانید جذاب ترین اخبار و مقالات دنیای تکنولوژی را در کانال تلگرام زوم تک دنبال کنید. برای عضویت در این کانال، اینجا کلیک کنید.

3 نظرات

  1. سلام.اموزشهاتان واقعا عالی است.بسیار کاربردی و اسان بیان شده است.لطفا این اموزشها ادامه داشته باشد.باتشکر از شما بخاطر اموزشهای خوبتان

ارسال نظر

Time limit is exhausted. Please reload CAPTCHA.