تبلیغات
p5soft | دانلود نرم افزار,طراحی سایت,طراحی قالب وبلاگ
پرواز تفریحی پاراگلایدر
پرواز تفریحی پاراگلایدر پرواز تفریحی پاراگلایدر

دوشنبه 6 آبان 1392

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

نویسنده: امیر حسینی   

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

با  درود به همه دوستان با قسمت  دهم آموزش طراحی سایت از پایه در خدمتتون هستم و امیدوارم این مقاله هم مانند مقاله های گذشته بازخورد های خوبی داشته باشد .
 در این مقاله نیز راجع به سی اس اس ( css) و نحوه استایل دهی (Font-size  ,.... color, Background-color,) و گزینش گر متنی و سبک دهی گروهی صحبت خواهم کرد .

design-web-00.jpg

تا اینجای کار به چند مثال ساده اما کاربردی  با 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  مشاهده کنید، تصویری که مشاهده می کنید باید مشابه عکس زیر نمایش یابد.

design-web-101.jpg
-    حالا فایل css خود را باز کرده و استایل زیر را به آن اضافه نمایید.

em {
                 Font-style: normal;
        Text-transform:uppercase;  
{

حالا فایل css را ذخیره کرده، سپس صفحه نمایش خود را refresh  نمایید، تصویری که مشاهده می کنید می بایست مشابه عکس زیر باشد.

design-web-102.jpg
 
مشابه این مثال را می توانید در منوی سمت راست  خدمات طراحی سایت وبسکالا مشاهده کنید. اگر از تگ 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  کنید . صفحه شما نیز می بایست مانند عکس زیر باشد.

design-web-103.jpg
 
برای هر متنی که درون تگ 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 را ذخیره کرده و پنجره مرورگر خود را ویرایش نمایید تا تصویری چون عکس زیر را ببینید.
 
design-web-104.jpg

یک سوال ؟
به مثال زیر دقت کنید

h1, h2, h3 {
 font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
 background-color: navy;
 color: white;
}
h3 {
color: red;
}

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


نظرات() 
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت PC با موبایل از طریق usb
اتصال مستقیم تبلت به اینترنت adsl
دفترچه راهنمای فارسی گوشی هوشمند سامسونگ
راهنمای کامل فعال سازی اینترنت ایرانسل (GPRS و EDGE)، بسته های افزایشی و تعرفه‌های مربوطه
ساخت کاربر VIP برای سایت های وردپرسی
/طرح-لایه-باز-اسلایدر-سری-اول.
دریافت کد « ما را حمایت کنید 2 »
دانلود قالب گالری عکس
اسلاید شوی حرفه ای
کد اسلاید شو برای وبلاگ
قالب های حرفه ای وبلاگ همراه با اسلایدشو
ابزار نمایش اسلایدر تصاویر
ابزار اسلایدر عکس برای نمایش چندین تصویر در وبلاگ
قالب همراه با اسلاید شو
کد عضویت کاربر
دانلود اسکریپت مدیریت کاربران AuthManager نسخه ۳
عوامل موثر در افزایش رنکینگ سایت در گوگل
نمایش توضیحات برای یک فیلد در کنار آن به صورت Tooltip نمایش کد
اسلایدشو با قابلیت پیش نمایش فریم ها- کد جاوا
فیلم فارسی آموزش جاوا اسکریپت (JavaScript) – بخش اول
آموزش ساخت تاریخ و روز با جاوا
کد جاوا اسکریپت تغیر رنگ پس زمینه با کلیک بر روی یک دکمه/لینک
آموزش انتقال بازدید کننده از دامنه قدیمی به دامنه جدید سایت یا وبلاگ
پیش فرض چگونه جاوا اسکریپت را بر روی مرورگر فعال کنیم؟ (+آموزش تصویری)
دانلود کتاب آموزش جاوا اسکریپت صورت کامل
اسکریپت پرداخت آنلاین بانک پارسـیان
اسکریپت سئو سایت در موتور های جستجوگر seo paneL
مراقب لیست سیاه متور های جستجوگر باشید!!
افزونه رمز گذاری روی لینک های دانلود مخصوص vip کردن سایت+آموزش استفاده
25 افزونه کاربردی برای مرورگر کروم
25 افزونه کاربردی برای مرورگر کروم- part2
بازاریابی شبکه های اجتماعی
کلمات کلیدی مطلب : آموزش - تنظیمات - فیس بوک - امنیت فیس بوک - facebook -
آموزش کامل تنظیمات فیس‌بوک(قسمت اول)
5 اشتباه در رایج در شبکه های اجتماعی
ابزارهای بازاریابی شبکه های اجتماعی - نبض وب سایت تان را در دست بگیرید
5 راه برای فروش توسط شبکه های اجتماعی
سوالات و مشکلات سری d سامسونگ
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
ستون های چندگانه در Css3
آموزش تصویری / کامل Css3 - مقدماتی تا پیشرفته
مرجع کامل دستورات CSS2
آموزش ساختن منوی بازشو توسط CSS
آموزش ساخت منوی عمودی ساده با CSS
آموزش ساخت منوی افقی ساده با CSS
آموزش هک کردن فیس بوک
آموزش هک و جلوگیری از هک شدن مودم ADSL

آمار وبلاگ

  • کل بازدید :
  • بازدید امروز :
  • بازدید دیروز :
  • بازدید این ماه :
  • بازدید ماه قبل :
  • تعداد نویسندگان :
  • تعداد کل پست ها :
  • آخرین بازدید :
  • آخرین بروز رسانی :
  • P5design & PARAPINK5 Sales, I.R.I., Inc. All information applies to I.R. vehicles only
    tell number : 09365995390 | 09122061238 | 09022061238
    www.p5bisim.com