با زبان آلمانی آشنا شویم

مقدمه
آموزش زبان آلمانی
زبان آلمانی یکی از شاخه های زبانی ژرمن غربی است که به صورت زبان اصلی آلمان، اتریش، لوکزامبورگ،سوئیس،لیختن اشتاین ، بلژیک و ایتالیا صحبت می شود.

آلمانی در دو ایالت داکوتای شمالی و داکوتای جنوبی پس از انگلیسی دومین زبان در خانه‌ می باشد.

در جهان 90 میلیون نفر با زبان اصلی بومی آلمانی و 30 میلیون نفر هم جزء کسانی هستند که به دیگر لهجه های آلمانی صحبت می کنند. می توان گفت 80 میلیون نفر از مردم دنیا آلمانی را به عنوان زبان دوم خود انتخاب نموده اند و بسیاری دیگر در کشورهای خارجی در حال آموزش زبان آلمانی می باشند.
تنوع زبان آلمانی در نگارش

 
• آلمانی عالی

آلمانی والا به عنوان زبان ادبی استاندارد در قرن شانزدهم میلادی ظهور کرد. ترجمه کتاب مقدس از مارتین لوتر که در سال 1534 کامل شد؛ به آغاز این  فرایند اشاره دارد. زبانی که او استفاده نمود  و بعضا بر پایه زبان آلمانی بود که صحبت می شد، الگویی برای نگارش زبان آلمانی گردید.
• آلمانی-سوییسی

نوعی از زبان آلمانی که حدود 4 میلیون نفر در سوئیس صحبت می کنند و گهگاه در نگارش رمان ها، روزنامه ها ، نامه های شخصی و دفتر یادداشت ها ظاهر می شود.
• آلمانی- پنسیلوانیا

گونه دیگری از زبان آلمانی  که زبان اصلی حدود 250هزار نفر در پنسیلوانیا، اوهایو و ایندیانا در ایالات متحده و اونتاریو در کانادا می باشد. انواع محلی زبان آلمانی بعضا در نوشتن مقالات قومی و کتاب های طنز مانند استریکس استفاده می شود.

 
سبک نگارش دستخط آلمانی

 
فراکتور

فراکتور طی قرن شانزدهم تا سال 1940برای چاپ و نگارش زبان آلمانی مورد استفاده قرار می گرفت. نام فراکتور از لغت لاتین میانه ی " حروف الفبای شکسته"  آمده است. از آنجا که پاره های تزیینی، خط پیوسته یک لغت را می شکنند نیز این دستخط به فراکتور معروف است.

 

 
نمونه ای از متن با نگارش فراکتور

 

نمونه ای از متن با خط فراکتور آلمانی

 
شوترلین

 شوترلین توسط هنرمند گرافیست برلینی به نام ال.شوترلین که در سال های 1865- 1917 می زیست اختراع شد. او این سبک را از دستخطی که در یک دفترخانه قدیمی آلمانی استفاده می شد الگو برداری کرد. این خط  از سال 1915 تا  1941 در مدارس آلمان تدریس می شد و هنوز هم توسط نسل های قدیمی مورد استفاده قرار می گیرد.

 

 الفبای خط شوترلین آلمانی
نمونه ای از  متن با خط شوترلین

 

 نمونه متن با خط شوترلین
الفبای امروزی آلمانی

 

الفبای آلمانی با خط امروزی

طرز تلفظ آلمانی

 

 تلفظ آلمانی

که شامل صداهای کوتاه ، صداهای کشیده و حروف بی صدا می باشد.
حروف الفبا در زبان آلمانی

تعداد حروف الفبا در زبان آلمانی 26 حرف می باشد که با تلفظ آن ها آمده است:

 
الفبای آلمانی حرف     تلفظ     حرف     تلفظ
A      آ     N     اِن
B     ب_     O     اُ
C     س_     P     پ
D     د     Q     کو
E     اِ     R     اق (بین خ وق)
F     اِف     S     اِس
G     گ     T     تِ
H     ها     U     او
I     ای     V     فاو
J     یوت     W     و
K     کا     X     ایکس
L     اِل     Y     اُپسیلون
M     ام     Z     ت(ست)

در این بخش تلفظ حروف زبان آلمانی نیز بررسی گردید.

ضرب المثل های آلمانی

آموزش زبان آلمانی خصوصی

1. Das Eisen schmieden, solange es heiß ist.
   

a.    ترجمه: تا آفتاب می درخشد، علف ها را خشک کن.
b.    معادل: تا تنور داغ است نان را بچسبان، تا تنور گرم است نان دربند.
2.    Den Wald vor lauter Bäumen nicht sehen.
a.    ترجمه: از انبوه درختان جنگل پیدا نیست.
b.    معادل: آنقدر جلو چشم بود که دیده نمی شد.
3.    Durch Dick und Dünn gehen.
a.    ترجمه سفر کردن با کسی در راه باریک و عریض
b.    معادل: (از حافظ) اگر رفیق شفیقی درست پیمان باش  حریف خانه و گرمابه و گلستان باش .
4.    Eine Schwalbe macht noch keinen Sommer.
a.    ترجمه: با آمدن یک چلچله تابستان نمی آید.
b.    معادل: با یک گل بهار نمی شود.
5.    Eine Stecknadel im Heuhaufen suchen.
a.    ترجمه و معادل: دنبال سوزن در انبار کاه گشتن.
6.    Kleider machen Leute.
a.    ترجمه: لباس ها مردم را می سازند.
b.    معادل: آستین نو بخور چلو
7.    Leichter gesagt als getan.
a.    ترجمه: گفتنش از انجام دادنش ساده تر است.
b.    معادل: از حرف تا عمل فاصله بسیار است.
8.    Rom ist auch nicht an einem Tag erbaut worden.
a.    ترجمه: شهر رم یک روزه ساخته نشده است.
b.    معادل: گر صبر کنی ز غوره حلوا سازی.
9.    Viele Köche verderben den Brei.
a.    معنی: آشپزهای زیادی فرنی را خراب می کند.
b.    معادل: آشپز که دو تا شد آش یا شور می شود یا بی نمک.
10.    Aus einer Mücke einen Elefanten machen.
a.    معنی: از توده ای موش کور ساخته کوه ساختن.
b.    معادل: از کاه کوه ساختن.
11.    Die Katze im Sack kaufen.
a.    معنی: گربه را داخل کیسه خریدن
b.    معادل: هندوانه دربسته خریدن.
12.    Einem geschenkten Gaul schaut man nicht ins
a.    معنی: شخص نباید داخل دهان اسب هدیه شده را نگاه کند.
b.    دندان های اسب پیشکشی را نمی شمرند.
13.    Hunde, die bellen, beißen nicht.
a.    معنی: سگی که پارس می کند گاز نمی گیرد.
14.    Morgenstund’ hat Gold im Mund.
a.    معنی: کرم از آن مرغ سحر خیز است.
b.    معادل: سحرخیز باش تا کام روا باشی.
15.    Zwei Fliegen mit einer Klappe schlagen.
a.    معنی: با یک سنگ دو پرنده زدن.
b.    معادل: با یک تیر دو نشان زدن.
16.    Alles auf eine Karte setzen.
a.    معنی: تمام پول را روی یک کارت شرط بستن.
b.    معادل: تمام تخم مرغ ها را داخل یک سبد گذاشتن.
17.    Lügen haben kurze Beine.
a.    معنی: دروغ گو پاهای کوتاهی دارد.
b.    معادل: دروغ گو کم حافظه است.
18.    Probieren geht über studieren.
a.    معنی: تجربه کردن بهتر از آموختن است.
b.    معادل: دو صد گفته چون نیم کردار نیست.
19.    Wie man in den Wald hineinruft, so schallt es heraus.
a.    معنی: کسی که در بیابان فریاد زند، بازتاب آن را خواهد شنید.
b.    معادل: مزرع سبز فلک دیدم و داس مه نو   یادم از کشته خویش آمد و هنگام درو
20.    Reden ist Silber, Schweigen ist Gold.
a.    معنی: صحبت کردن نقره ای است و سکوت طلایی.
b.    معادل: (از امثال و حکم) اگر گفتن سیم است خاموشی زر است .
 

یادگیری زبان آلمانی به روش TPRS

آموزش زبان آلمانی
کلمه TPRS حروف اختصاری بدست آمده از  " مهارت تدریس توسط خواندن و  روایت کردن " است و روش بسیار موثری برای یادگیری یک زبان خارجی می باشد. چنانچه دانشجو تمایل به یادگیری زبان دوم دارد حتما به این مطلب آگاه است که  آموزش می تواند بسیار کسل کننده باشد و گرامر نیز همیشه بخشی است که بیشتر خسته کننده می باشد. یادگیری گرامر زبان آلمانی به کمی مهارت نیاز دارد زیرا این زبان آسان ترین زبان جهت یادگیری نیست.
 
سرعت در آموزش
وقتی چیزی خیلی سریع یادگرفته می شود بسیار لذت بخش است. به همین منظور از روش TPRS می توان برای یادگیری زبان آلمانی استفاده نمود. نام پیشنهادی هر چیزی همیشه یک داستان پشت سر خود دارد. یک داستان سرگرم کننده و سپس سوالاتی درباره آن. تصور اغلب بر این است که پاسخ دادن به سوالات بدیهیست.اما می توان فقط یک دقیقه به آن فکر کرد. ممکن است همگان بدانند وقتی به چیزی بارها و بارها گوش داده می شود  به خاطر سپاری آن خیلی آسانتر خواهد بود. حال اگر یک ماجرای جذاب و سرگرم کننده شنیده شود احتمالا می توان آن را حتی چند بار تکرار کرد (تکرار خیلی مهم است). با تکرار آنچه آموخته می شود عمیقتر در خاطر می ماند. می بایست لغات جدید بسیاری یادگرفته شود چراکه اغلب تنها ترجمه انگلیسی  آنها به خوبی انجام می پذیرد.اما نه همه لغات.
تلفظ صحیح کلمات به زبان آلمانی نیز بسیار حائز اهمیت است.  بهتر است جهت آموزش خوب به فایلهای صوتی  گوش فرا داده شود.
حال پس از شنیدن داستان، این توانایی به دست می آید که  لغات جدید با تلفظ صحیح آن ها یاد گرفته شود. اما هنوز نمی توان  سلیس به زبان المانی صحبت کرد.
برای همین بهترین حربه بازی پرسیدن سوال و جوابهاست.  سوالاتی درباره ماجرای شنیده شده اما به یک روش ویزه. باید خوب به سوالات توجه شود تا لغات ضروری آلمانی جهت پاسخ یادگرفته شود.
نکته مهم این است که هنگام فکر کردن به لغات، به طور فعالی دانشجو درگیر آموزش می شود. چنانچه به تکرار مرتب لغات پرداخته شود انگونه که در دیگر آموزهای زبان مشاهده می شود؛ مغز در حالت منفعل قرار گرفته و کلمات به سرعت از خاطر می رود.
 
با استفاده از نکات اولیه  آموزش گرامر  می توان فرایند یادگیری را سرعت بخشید.
 
جنسیت در زبان آلمانی
زبان آلمانی بر خلاف انگلیسی جنسیت در اسم‌ها را حفظ کرده است. در زبان آلمانی جنسیت اسم بر سه نوع است :
مذکر – مؤنث - خنثی
برای آموزش این که کلمه ای مذکر ، مونث و یا خنثی خواهد بود یا نه ، هیچ روش خاصی نمی توان یافتن و برای فراگیری باید آنها را حفظ کرد و به عبارت دیگر با تمرین می توان مذکر ، مونث و یا خنثی بودن اسمی را یاد گرفت.
حروف تعریف پیش از اسم می آید و جنسیت آن را از نظر دستور زبان تعیین می کنند.پس  روش مناسب برای یادگیری اسم از لحاظ مذکر ، مونث و خنثی بودن آن این است که حرف تعریف هر اسم را به همراه خود آن اسم فراگرفته شود.
لذا برای اسم های زیر همیشه از حرف تعریف معین مربوط به آن اسم استفاده می شود:
 Der  مذکر
 Die  مونث
 Dasخنثی
 
برای مثال :
  der Mann                          the man
  Der Mann liest.   The man is reading.
      
  die Frau                        the woman
  Die Frau isst.   The woman is eating.
      
  der Junge                          the boy
  Der Junge trinkt.   The boy is drinking.
      
  das Mädchen                           the girl
  Das Mädchen schreibt.   The girl is writing.
 
ضمیر شخصی در زبان آلمانی
 
ضمایر شخصی در زبان فارسی عبارتند از : من ، تو ، او ...
در آلمانی نیز برای برخی از اشخاص(مثل زبان فارسی) ضمایری به عنوان احترام استفاده می شود(مثلا در فارسی برای احترام به شخصی به جای استفاده از واژه تو ، از واژه شما استفاده می شود.) که این نشان دهنده غنی بودن زبان و نشانه تاکید این زبان به احترام به اشخاص است (در زبان فرانسه نیز اینگونه است ولی زبان انگلیسی این چنین نمی باشد)
در جدول زیر ضمایر شخصی آلمانی دیده می شود :
ich  من
du  تو -- مخاطب مفرد در حالت صمیمانه
wir   ما
Sie  شما -- مخاطب مفرد در حالت محترمانه
ihr  شما -- مخاطب جمع در حالت صمیمانه
er  او (مذکر)
Sie  شما--مخاطب جمع در حالت محترمانه
es  او (خنثی)
sie  آنها -- برای تمامی کلمات مذکر ، مونث ، خنثی
sie  او (مونث)
 آموزش زبان آلمانی
تعجب آور است که کلمه Sie چندین بار در این جدول آمده است برای تشخیص sie از فعلی که در جمله می آید می توان فهمید.
از راه دیگری هم می توان فهمید؛ هرجا کلمه Sie با  حرف بزرگ آمد منظور Sie است که جهت احترام استفاده می شود و این کلمه فقط معنی شما می دهد.

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

با قسمت چهاردهم آموزش طراحی سایت از پایه در خدمتتون هستیم.
در این جلسه به معرفی خصوصیتی می پردازیم که از طریق آن می توانید عناصر صفحه را در هر جایی که می خواهید قرار دهید
تعیین موقعیت عناصر در هر جایی از صفحه که شما دوست دارید:
همواره
بدون هیچ گونه مداخله ای از سوی یک مرورگر وب، تمامی عناصری که درون یک
صفحه سایت قرار دارند به همان ترتیب نمایش داده می شوند، بنابراین اگر در
تگ هدر، منوی راهبری قرار داشته باشد و در سر تیتر دوم، سه پاراگراف قرار
دهیم در زمان نمایش در مرورگر خواهید دید که نحوه نمایش آنها به همان
ترتیبی است که درون سورس قرار دارد و تا اینجای کار نحوه سایت زدن ما به
همین نحوی بوده است که در اینجا توضیح دادیم، اما در این بخش از آموزش می
خواهم شما را با برخی از قدرت های واقعی css و تاثیراتی که می تواند بر روی
سورس مان داشته باشد آشنا کنم. در این قسمت شما خواهید آموخت که چطور می
توانید برای عنصرخاصی در صفحه مشخص کنید که به طور صریح در کدام قسمت از
محتوای سایت نمایش یابد بی آنکه به ترتیب قرار گرفتن عناصر درون صفحه توجه
کنید.
نمایش ساختار:
زمانیکه از css برای استایل دهی به سایت
های خود استفاده می کنید برای هر قسمت از سایت خود یک Border در نظر بگیرید
به این ترتیب به خودتان کمک می کنید تا به راحتی برای آن قسمت خاص استایل
های مد نظرتان را بیافزاید وتاثیر آن را مشاهده نمایید، تنها باید به خاطر
داشته باشید که پس از اینکه کارتان با آن قسمت تمام شد(css موقتی)border ای
را که افزوده اید حذف نمایید. بیایید برای خود قسمتی از سایت را یاد آوری
کنیم:
<!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>Contact Us at Bubble Under</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<link href=”style1.css” rel=”stylesheet” type=”text/css”/>
</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=”navigation”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About Us</a></li>
<li><a href=”contact.html”>Contact Us </a></li>
</ul>
</div>
<div id=”bodycontent”>
<h2>Contact Us</h2>
<p>To find out more, contact Club Secretary Bob Dobalina on 01793 641207 or email <a
href=”[e-mail]”>[e-mail]</a>.</p>
</div><!– end of bodycontent div –>
</body>
</html>
حالا
بیایید به فایل css خود یک borderبه هر یک از عناصر خود در صفحه اضافه
کنیم. این استایل را در انتهای فایل css خود درج نمایید، بنابراین باعث می
شود تا برای تمامی عناصر سایت خود بردر را بکار ببرید و عنصری از قلم نیفتد
و چنانچه عنصری دارای بردر است این خصیصه برایش تکرار خواهد شد.
#header, #sitebranding, #tagline, #navigation, #bodycontent {
border: 1px solid red;
padding: 2px;
margin-bottom: 2px;
}
در
اینجا من برای عناصر از پدینگ و مارجین پایین استفاده کرده ام تا دیدن
عناصر درون هر قسمت از این بردر ها را برای خود آسان نماییم.

موقعیت دهی مطلق( absolute) :
شاید به جرات
بتوان گفت که راحت ترین روش برای موقعیت دهی به عناصر استفاده از موقعیت
دهی مطلق برای عناصر است. در هنگام استفاده از موقعیت دهی مطلق می بایست
موقعیت آن عنصر را از بالا و چپ صفحه نیز معین کنیم. تصور کنید از یک مغازه
جواهر فروشی می خواهید خرید کنید و آدرس یک قطعه طلا را می خواهید به شخص
فروشنده بدهید، می گویید ” می توانم آن ساعتی را که در ستون پنجم است و از
بالا در ردیف سوم قرار دارد را ببینم؟”
استفاده کردن از موقعیت دهی مطلق
به سادگی انجام می شود تنها کافیست که جهت های مد نظر خود را (موقعیت آن
عنصر از بالا و چپ) در کنار موقعیت مطلق داده شده به عنصر در فایل css آن
اضافه نمایید. در مثال زیر، ما موقعیت های top و left را برای یک div با
عرض 90px در نظر گرفته ایم تا هم از بالا و هم از سمت چپ پنجره مرورگرمان
به میزان px200 فاصله ایجاد کرده ایم.
<!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>Absolute Positioning</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<style type=”text/css”>
#redblock {
position: absolute;
top: 200px;
left: 200px;
color: white;
background-color: red;
width: 90px;
height: 90px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Absolute Positioning</h1>
<div id=”redblock”>This is the red block.</div>
<p>The red block is positioned 200 pixels from the top and 200 pixels from the left.</p>
</body>
</html>
آماده شدن برای جابجایی عنصر با استفاده از موقعیت دهی:
در
این قسمت به موقعیت دهی مطلق به عناصر و با توجه به فاصله آنها از بالا و
چپ نسبت به پنجره مرورگر شروع می کنیم. به همین دلیل می بایست ابتدا زمانی
را در نظر بگیرید و استایل های موقتی را که داده اید حذف کنید. در نتیجه ما
نیز استایل های پدینگ و بردر داده شده را که به عنصر body مان داده بودیم
پاک می کنیم.
– فایل style. css را باز کردهو پدینگ و بردر داده شده به عناصر Body را پاک کنید.
– در عوض به جای آن، دو خصیصه padding و margin را نوشته و مقادیر آنها را برابر با صفر قرار دهید.
استایل های بکار برده شده برای عناصر body شما در فایل css می بایست مانند زیر باشد:
 
body {
background-color: #e2edff;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 125%;
padding: 0;
margin: 0;
}
حالا مرورگر خود را refresh نمایید
تگ
های سر تیتر درون صفحه یعنی BubbleUnder.com و About Us به وسیله مارجین
احاطه شده اند. که این مارجین توسط مرورگر به آنها داده شده حتی اگر ما
خودمان به آنها مارجین ندهیم. ایده خوبی است که بیاییم و این مارجین ها را
از بین ببریم وسعی کنیم تا تیترها تا آنجایی که امکان دارد به گوشه بالا و
سمت چپ div دربرگیرنده آن نزدیک شوند. این امر باعث می شود تا موقعیت دهی
به تیتر ها برای ما راحتتر شده و همچنین مطمئن می شویم که صفحه وب ما درون
تمامی مرورگر ها به صورت یکسان نمایش می یابد.
– در فایل style.css تگ h1 را بیابید.
– خصوصیت جدیدی به آن اضافه نمایید و مقدار مارجین آن را برابر با صفر قرار دهید.
h1 {
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
}
– tagline p# را نیز درون فایلcss یافته و مقدار مارجین آن را حذف نمایید:
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
}
صفحه
سایت خود را refresh نمایید. فواصلی که قبل و بعد از تیترهای ذکر شده در
تصویر بالا گفته شد می بایست از بین رفته شده باشد
خوب حالا در این مرحله سایت شما از هر زمان
دیگری زشت تر خواهد شد اما مهم نیست و نباید نگران باشید چرا که این امر
موقت است و تنها باید توجه داشته باشید که برای اینکه به راحتی جابجا شدن
عناصری از صفحه را که می خواهید و به صورت مطلق جای آنها را درون صفحه معین
کنید را مشاهده نمایید به آنها Border ای با رنگ قرمز بدهید تا جابجایی
آنها برایتان مشخص باشد. سپس به انتهای فایل css خود خصوصیت جدید زیر را
اضافه نمایید.
#navigation, #bodycontent, #header {
position: absolute;
}
حالا فایل css را ذخیره کرده و مجددا صفحه سایت را refresh نمایید.
• به هیچ وجه از به هم ریختگی سایت خود نگران نشوید !
حتما
الان از به هم ریختگی سایت خود ناراحت هستید و با خود می گویید که آیا هر
بار که می خواهید از موقعیت دهی مطلق استفاده نمایید با همچین صحنه ای
روبرو خواهید شد؟! بسیاری از طراحان وب سایت برای هر عنصری از سایت که می
خواهند از موقعیت دهی مطلق استفاده کنند از همان ابتدا فاصله آن را از بالا
و سمت چپ پنجره مشخص می نمایند تا آن عنصر سر جای خود قرار گیرد و با
تصویری مانند آنچه که شما با آن مواجه شده اید را برخورد نکنند، این کار
تنها با تمرین امکان پذیر است و به نظر من اهمیت کار در اینجاست که شما با
این روند به طور کامل آشنا شوید.
همانطور که میبینید هر سه
قسمتی که مقدار مطلق گرفته اند در گوشه چپ و بالای سایت بر روی یکدیگر
افتاده اند، چون ما به مرورگر برای هر یک از آنها مقدار مجزایی نداده ایم و
بنابراین مرورگر تنها آنها را همانطور که در سورس مقدار دهی شده اند نمایش
می دهد. تنها می داند که آنها به طور مطلق مقدار دهی شده اند و اینکه
موقعیت هر یک از آنها کجاست را نمی داند.
پس بیایید با جابجا کردن
محتوای اصلی سایت و منوی راهبری به سمت پایین محتوای تگ Header را ببینید.
در فایل css خود دستور زیر را اضافه کنید:
#navigation, #bodycontent {
top: 120px;
}
این
دستور باعث می شود تا دو عنصر , #navigation #bodycontent به سمت پایین
شیفت یابند. این تغییر را می توانید در تصویر زیر ببینید. حالا موقعیت از
top را برای این دو عنصر تعیین کردیم اما همانطور که در شکل می بینید، منوی
راهبری و متن درباره ما بر روی هم دیگر افتاده اند پس از سمت چپ به آنها
موقعیت (فاصله) می دهیم تا در کنار یکدیگر قرار گیرند. به همین دلیل به
عنصر bodycontent به اندازه px200 از سمت چپ فاصله می دهیم تا از منوی
راهبری که پهنایی برابر با 180px دارد فاصله گرفته و در کنار آن قرار گیرد.
 
پس با توجه به توضیحات داده شده آنچه که می بایست به css خود اضافه کنید تا ظاهر سایت درست شود، بدین صورت است:
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 120px;
}
#bodycontent {
left: 200px;
}
برای اینکه طراحی سایت ما تمام شود همچنان کمی کار لازم است تا انجام شود:
– محدوده header و tagline تا انتهای سطر ادامه ندارند.
– بین tagline و h1 فاصله بیهوده ای وجود دارد.
– پدینگ و بردر های قرمز داده شده به عناصر را می بایست حذف کنیم.
– یک یا دو کامنت می بایست به css مان اضافه کنیم تا توضیح بدهیم که در این قسمت چه کاری انجام داده ایم.
خوب حالا شروع می کنیم به ایجاد تغییرات گفته شده در بالا تا طرح نهایی این صفحه از سایتمان ساخته شود.
–  تگ body و منوی راهبری را از بالا به جای px120 به میزان 107px فاصله دهید
. این کار باعث می شود تا پس از حذف کردن بردر های قرمز فاصله میان تگ ها
مناسب باشد.
– سپس به مرورگر ، تگ headerو tagline بگویید تا سطر را به
طور کامل اشغال کنند.(این کار با اجرای دستور width براربر با 100% عملی
خواهد شد.)
– بردرهای قرمز رنگی را که پیش تر ایجاد کرده بودیم را حذف می کنیم.
– در نهایت فکر خوبیست تا برای تمامی عناصری که موقعیت مطلق داده ایم کامنتی برای توضیح بنویسیم تا بدانید که چکاری انجام داده اید.
به این ترتیب آنچه که با توضیحات بالا برای ایجاد تغییر در فایل css خود ایجاد کرده ایم، به صورت زیر خواهد بود:
 
/*
This section deals with the position of items on the screen.
It uses absolute positioning – fixed x and y coordinates measured
from the top-left corner of the browser’s content display.
*/
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 107px;
}
#bodycontent
left: 200px;
}
#header {
width: 100%;
}
تقریبا
می توان گفت که ظاهر سایت عالی شده است اما یک کار کوچک دیگر نیز می توان
انجام داد تا دیگر طراحی سایت ما عالی به نظر برسد. به تگ Header یک بردر
از بالا با ضخامت 3px بدهید. برای منوی راهبری از همان رنگ آبی ای که برای
tagline استفاده کرده اید و بیایید تا بردر نقطه چین دور منوی راهبری را
حذف کنیم. دستورات تغییرات گفته شده نیز بدین صورت خواهد بود:
#navigation {
width: 180px;
background-color: #7da5d8;
}
#header {
border-top: 3px solid #7da5d8;
}
اینک فایل css خود را ذخیره کرده و مرورگر خود را refresh نمایید.

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

با قسمت سیزدهم آموزش طراحی سایت از پایه در خدمتتون هستیم.
بحث جلسه گذشته در مورد بردرها را تکمیل می کنیم و با پدینگ و مارجین کمی کار می کنیم
بردرهای دو تایی:
شما می توانید برای عناصر  block از بردر دوتایی نیز استفاده کنید
.highlight {
border-width: 5px;
border-style: double;
border-color: silver;
}
استایل دهی برای یک عنصر برای هر طرف به شکل مجزا:
تا اینجا بردرهایی که استفاده شد برای هر چهار طرف یک عنصر بود، اما در این قسمت می خواهیم برای هر طرف از یک عنصر بردرهای گوناگونی را به طور مجزا تعریف کرده و به کار ببریم. به مثال زیر توجه کنید:
.highlight {
border-top-width: 1px;
border-top-style: solid;
border-top-color: red;
border-bottom-width: 3px;
border-bottom-style: dotted;
border-bottom-color: blue;
border-left-width: 5px;
border-left-style: dashed;
border-left-color: yellow;
border-right-width: 7px;
border-right-style: double;
border-right-color: fuchsia;
}

سبک دهی به بردرها به طور مختصر :
همانطور که در مثال های قبل دیدید به نظر شما بهتر نیست که به جای اینکه برای استایل دهی بردر به یک عنصر از چندین css  استفاده کنیم از روش کوتاهتری آن کار را انجام دهیم؟ البته که روش دوم بهتر است، پس با هم این روش را یاد می گیریم :
.highlight {
border: 5px  solid  black;
}
این روش یک راه ساده و بسیار کوتاه برای استایل دهی به بردرهاست که تمامی مرورگرها آن را پشتیبانی می کنند، علاوه بر آن کمک می کند تا شما تایپ کمتری را انجام دهید و همچنین باعث می شود تا حجم دانلود فایل شما نیز کمتر شود، به همین دلیل من استفاده از این روش را نسبت به روش قبلی به شما توصیه می کنم. شما هم می توانید برای border-top, border-right, border-bottom  و نیز  border-left به صورت مجزا از استایل های مجزا به همین روش مختصر نویسی استفاده کنید.
استایل بردرهایی که شما می توانید استفاده کنید:
مثال های بالا بیشتر استایل هایی را که شما می توانید استفاده کنید به شما نشان داد. در زیر لیستی از گزینه های مختلفی را که برای شما قابل استفاده است را آورده ایم.
ضخامت بردر:
مقدار ضخامت بردر را می توان با واحد های px  ،  pt  و یا em به کار برد.
به صورت پیش فرض هم می توانید از کلمات کلیدی خود    htmlبرای ضخامت دادن به بردر استفاده کنید که شامل سه سایزو باریک (thin) ،  متوسط (medium) و ضخیم (thick) است.
استایل بردر :
یک بردر می تواند هر یک از استایل های زیر را داشته باشد:
■  solid (مقدار پیش فرض)
■  double
■  dotted
■  dashed
■  groove
■  ridge
■  inset
■  outset
رنگ بردر :
رنگ بردر هم مانند سایر عناصر سایت که به آنها رنگ می دهیم مقدار می گیرد. رنگ های خود html که با کلمات کلیدی مشخص شده اندمثل red و نیز از طریق اعداد هگزا دسیمال مثل #ff0000.
شکل دهی و سایز دهی به عناصر درون سایت:
بیایید تا تغییرات کوچکی به پروژه سایتمان بدهیم. از عنصر body شروع می کنیم. Style1.css را در پروژه خود باز کنید(این فایل  که به عناصر وب سایت شکل میدهد در تگ header  به صفحه ما وصل می شود) و استایل های داده شده به body را نگاه کنید و در ادامه استایل های داده شده به آن بردری مثل زیر به آن بیافزایید:
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #e2edff;
padding: 15px;
line-height: 125%;
border: 4px solid navy;
}
در   style1.css برای منوی راهبری این مقادیر را تعریف کنید و سپس آن را ذخیره کرده و در مرورگر آن را ببینید.
#navigation {
width: 180px;
border: 1px dotted navy;
}
تغییر بعدی که می توانیم به منوی راهبری بدهیم background-color است، پس در ادامه css آی دی navigation آن را نیز اضافه می کنیم.
#navigation {
width: 180px;
border: 1px dotted navy;
background-color: #7da5a8;
}
حالا منوی ما بهتر به نظر می رسد، اما رنگ پس زمینه ای که انتخاب کرده ایم باعث می شود تا رنگ لینک های مشاهده شده خوانایی کمی داشته باشند به همین دلیل رنگ لینک های مشاهده شده را تغییر می دهیم.
a:visited {
color: navy;
}
حالا بهتر شد، در مرحله بعد بهتر است که به tag line بردر و رنگ پس زمینه بدهیم . در مثال فوق یک تگ div  بالای منو وجود دارد که آی دی #tagline   دارد و داخل آن یک تگ p    وجود دارد. پس بدین ترتیب به آن استایل می دهیم:
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
}
حالا برای مشخص شدن تگ های h1 و h2 از همدیگر، برای آنها تفاوت قائل می شویم و بین آنها کمی css های متفاوت درج می کنیم چرا که استفاده از رنگ پس زمینه تیره برای هر دو آنها باعث شده تا تیترهای سایت بیش از حد دارای رنگ پس زمینه تیره باشند.
css های زیر را کپی کرده و در css خود اضافه کنید
h1, h2, h3 {
font-family: “Trebuchet MS”, Helvetica, Arial, sans-serif;
}
h1 {
font-size: x-large;
background-color: navy;
color: white;
}
h2 {
color: navy;
font-size: 130%;
font-weight: normal;
}
ما برای تگ h2 فاصله بین خطوط یا همان line-height را برابر با 130% انتخاب کردیم که می شود مقداری که از سایز large بزرگتر و از x-large کوچکتر است.
دقت نمایید همه این مراحل جز تمرین شما حساب می شود و می توانید روی هر فایلی انجام دهید .
افزودن : padding
اگر نگاهی به بخش heading سایت خود و به بردرهای آن که در بخش های پیش به بررسی آنها پرداختیم بیاندازید. متوجه می شوید در جاهایی که دور متون بردر قرار دادیم بردر ها به متون چسبیده اند و هیچ فاصله ای میان آنها نیست. این گونه نمایش متون کمی نامناسب به نظر می رسد، به نظر شما ایطور نیست؟ برای رفع این مسئله بیایید تا کمی فاصله میان آنها ایجاد کنیم، بدین منظور از padding استفاده می کنیم.
در پایین سه روش مختلف برای افزودن padding به عناصر بلاک با واحد های مختلف em و px و % استفاده شده است:
.pixelpadding {
padding: 30px;
border: 1px dashed gray;
}
.empadding {
padding: 2em;
border: 1px dashed gray;
}
.percentagepadding {
padding: 5%;
border: 1px dashed gray;
}
کدام واحد اندازه گیری مناسب تر است؟
اگر هر سه روش بالا تاثیر یکسانی بر روی طراحی سایت شما می گذارند، پس چه چیزی در زمان انتخاب یکی از روش هاتوسط شما تاثیر گذار است؟ پاسخ این است: که شما دوست دارید سایت شما چگونه رفتار کند و نمایش یابد.
نکته بسیار مهم :
• اگر شما تمایل دارید که سایت شما با تغییر سایز پنجره کوچک و بزرگ شود بنابراین می بایست ازروش درصدی استفاده کنید. هر قدر سایز پنجره مرورگر شما بزرگتر شود به همان نسبت نیز میزانpadding داده شده بزرگتر خواهد شد. برای مثال در طراحی سایت فوق از این روش استفاده شده است.
• اگر که می خواهید طوری سایت خود را طراحی کنید که با تغییر دادن سایز فونت های صفحه فاصله هایی که در سایت خود ایجاد می کنید به همان نسبت کم و یا زیاد شوند پس در این صورت شما باید از مقیاس em استفاده کنید. چرا که اندازه های موجود در سایت بر اساس میزان سایز فونتی است که کاربر برای مرورگر خود تنظیم کرده است، اگر کاربران سایز فونت مرورگر خود را افزایش دهند در این صورت فاصله های با مقیاس em نیز همزمان با تغییر سایز فونت مرورگر زیاد خواهند شد.
• اگر که شما در طراحی وب سایت خود برای عناصری در سایتتان که قرار است بدون در نظر گرفتن سایز فونت ها و نیز تغییر سایز پنجره مرورگر همواره یک سایز ثابتی داشته باشند از مقیاس پیکسل می بایست استفاده نمایید. یک پیکسل تقریبا برابر با یک نقطه در صفحه مانیتور شما می شود. چرا می گوییم تقریبا چون اکثر مرورگرهای جدید قابلیت امکان بزرگنمایی صفحه را برای کاربر دارند و تمامی عناصر صفحه را می توانند به یک نسبت بزرگ نمایند که در این میان کاربران قدرت کنترل کمی در حین بزرگنمایی نسبت به عناصر خواهند داشت.
تعریف padding و افزودن آن به سایت :
اضافه کردن فاصله در میان عناصر سایت باعث بهبود دادن ظاهر سایت خواهد شد.بیایید تا با هم این کار را انجام دهیم و تغییراتی را در پروژه خود اعمال کنیم. کمی وقت بگذارید و padding های لازم را به به تگ های heading (سر تیترها) در فایل style1.css خود انجام دهید.
به تگ h1 خود در انتهای استایل های داده شده خطوط پر رنگ شده را اضافه کنید.
h1 {
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
}
در مرحله بعد بیایید و برای تگ h2 خود نیز کمی فاصله ایجاد کنید.
h2 {
color: navy;
font-size: 130%;
font-weight: normal;
padding-top: 15px;
}
در نهایت نیز tagline p را نیز یافته و به آن هم مقادیر زیر را بدهید:
#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
}
حالا فایل css خود را ذخیره کرده و پنجره مرورگر خود را refresh کنید تا تغییرات را ببینید.
Margin:
خوب تا اینجا شما آموختید که شما می توانید به عناصر بلاک سایز بدهید، به آن border بدهید و از padding استفاده کنید تا برای عنصر مد نظر بتوانید از کناره ها فاصله ایجاد کنید. در اینجا خصوصیت جدیدی را یاد می گیرید که البته بسیار پر کاربرد نیز هست.
margin ، باعث می شود که شما بتوانید مشخص کنید که یک عنصر نسبت به فضای اطراف خود از بیرون چقدر فاصله داشته باشد.

حالا می خواهیم مارجین دو عنصر ul و h2را تغییر بدهیم، مرورگرهای مختلف مقدار پیش فرض margin-top مختلفی را برای این عناصر بکار می برند، علاوه بر این مقدار پیش فرض بیایید تا یک مقدار ثابت 15 پیکسلی برای این دو تنظیم کنید تا در مورد مقدار فاصله بیرونی این عناصر گمراه نشوید
h2, ul {
margin-top: 15px;
}

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

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