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

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

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

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



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

design-web-00.jpg

 

کدام یک از کدهای زیر بر روی عناصر تاثیر میگذارند؟

وقتی به یک عنصر یکسری خصوصیات نسبت می دهیم، و در یک استایل دهی گروهی یا در جای دیگری یکسری خصوصیات دیگر برای آن می نویسیم، از بین خصوصیات یکسان تمامی آنها به ارث برده میشود و از بین سایر خصوصیات آن ویژگی هایی به ارث می روند که نسبت به سایر دستورات دیرتر و یا به عبارتی بعد تر نوشته شده اند و در صفحه استایل دهی پایین تر قرار گرفته اند. با هم به بررسی مثال زیر می پردازیم :
 
h2
{
color: blue;
 font-size: medium;
 font-weight: normal;
}
h1, h2, h3
{
 font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
 background-color: navy;
color: white;
}

در دستورات ابتدایی رنگ نسبت داده شده به تگ h2 آبی است، اما در استایل دهی گروهی رنگ نسبت داده شده به آن سفید است، به همین دلیل رنگ فونت انتخابی برای آن سفید خواهد بود. مهم نیست که در دستورات قبلی  100 بار رنگ آبی به h2 نسبت داده شود پرا که آخرین دستور  css رنگ سفید را به این تگ نسبت می دهد.

استایل دهی به لینک ها:

لینک ها در سراسر دنیای وب وجود دارند، اگر به لینک های اولیه با استایل پیش فرض نگاهی بیندازیم می بینیم که لینک ها دارای یک خط در زیر نوشته لینک (underline)  هستند. به صورت پیش فرض مرورگرها از رنگ های زیر برای لینک ها استفاده می کنند:
آبی :    لینکی که مشاهده نشده باشد.
بنفش :  لینکی که شما آن را قبلا مشاهده کرده اید.
قرمز:   لینکی که فعال است و شما در حال کلیک کردن بر روی آن هستید.
در بیشتر مواقع استایل دهی به لینک ها ممکن است به شکل زیر باشد:

A
 {
 font-weight: bold;
 color: black;
}

با این دستور به جای اینکه لینک های آبی رنگ با سایز فونت نرمال داشته باشیم، لینک های شما به رنگ آبی و ضخیم خواهد بود.
 
design-web-115.jpg

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


a {
 font-weight: bold;
 }
 a:link {
 color: black;
}
a:visited {
 color: gray;
}
a:hover {
 text-decoration: none;
 color: white;
 background-color: navy;
}
a:active {
 color: aqua;
 background-color: navy;
}

design-web-114.jpg
 
  عکس بالا کلیه حالت های مختلف لینک ها را نشان می دهد و حالت hover آن لینک تماس با ما  (contact us) است. تمامی رنگ های پیش زمینه و سایر رنگ های دیگر را می توانید با css  ایجاد کنید و می توانید افکت های بسیار جذابی مانند آن چیزی که در بخش فوتر سایت وب اسکالا مشاهده نمایید ایجاد کنید.

پاک کردن پیشینه مرورگر:

مرورگرها به صورت پیش فرض مقداری از پیشینه صفحات وب سایت را در خود ذخیره می کنند و از این اطلاعات استفاده می کنند که بدانند آیا لینکی بازدید شده است یا نه، اما این کار برای زمانیکه طراح وب سایت در حال تست کردن صفحه سایتی است کمی مشکل ساز می شود به خصوص وقتی که طراح می خواهد لینکی که بازدید نشده است را استایل بدهد، اما چون صفحه سایت را چندین بار refresh  کرده مرورگر وی به اصطلاح cache  کرده و به همین دلیل لینک های بازدید نشده را بازدید شده می پندارد که به همین دلیل می بایست cache یا اطلاعات ذخیده شده را پاک کرد. برای این منظور به این صورت عمل می کنیم:
در مرورگر اینترنت اکسپلورر : تب  tools راانتخاب کرده، internet option  را کلیک می کنید، زیر browser history دکمه delete  را بزنید، در پنجره باز شده check box مربوط به history  را فعال کنید، انتخاب سایر گرینه ها با توجه به نظر خودتان می تواند صورت گیرد. در نهایت دکمه delete  را زده و پنجره internet option را ok میکنیم تا بسته شود و cache مرورگرمان پاک شود.
 
design-web-113.jpg

سایر مرورگرها نیز روشی مشابه دارند که آدرس دسترسی به history  آنها نیز به صورت زیر است:

Tools > Options یا   Preferences > Privacy


کلاس های انتخابگر  :

تا اینجا یاد گرفتیم که چگونه در یک فایل CSS خصوصیات مختلفی برای تگها بنویسیم و آموختیم که میتوان خصوصیات یک کلاس را برای تگهای مختلفی اعمال کرد یعنی میتوان کلاس را چندین بار استفاده کرد. به عنوان مثال بیایید کلاس زیر را دریک پاراگراف اعمال کنیم :

.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}

به این ترتیب 3 خصوصیت برای پاراگرافمان تعریف کرده ایم،که خصوصیت سوم letter-spacing  به معنای اینست که فاصله بین کلمات موجود درمتن 0.05em باشد. (اگرارتفاع حرف M رابرابربا em1 درنظربگیرید 5% این مقدار برابر با 0.05em خواهد بود).
حال برای این که این خصوصیات که در css نوشتیم برروی پاراگراف مدنظر اعمال شود کافیست که نام کلاس موجود در css رابه تگ مورد نظ مان درصفحه html نسبت دهیم:

<p class="fun">
A man walks into a bar; you would've thought he'd see it coming!
</p>

حال در نظربگیرید تگ  <blockquote>درون صفحه html تان وجود دارد و درون این تگ میخواهید یک پاراگراف قرار دهید که کلاس fun داشته باشد ، همانند کد زیر:

<blockquote>
<p class="fun">
    Happiness is a dip in the ocean followed by a
    int or two of Old Speckled Hen. You can quote me on that!"
</p>
</blockquote>

به نظر شما اگر بخواهید چند پاراگراف درون این تگ قراردهید چه کارمیتوان کرد؟ میتوان راه حل زیر را اعمال کرد:

<blockquote>
<p class="fun">"Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that! </p>
<p class="fun">"Join us for a weekend away at some of our favorite dive spots and you'll soon be making new friends. </p>
<p class="fun">"Anyway, about time I got on with some <em>proper</em> work!" </p>
</blockquote>

اما همانطور که می بینید تکرار نام کلاس در تگها ی بالا زیاد صورت گرفته ، پس به جای استفاده از روش بالا میتوان روش بهتری را به کار برد   :

<blockquote class="fun">
<p Happiness is a dip in the ocean followed by a pint or two of Old Speckled Hen. You can quote me on that! </p>
<p>"Join us for a weekend away at some of our favorite dive spots and you'll soon be making new friends. </p>
<p>"Anyway, about time I got on with some <em>proper</em> work!" </p>
</blockquote>

ID & CLASS

یاد گرفتید که چگونه میتوان از ID  و کلاس برای تگهای موجود در HTML خود استفاده نمایید ، به عنوان مثال برای کلاس از نماد "." قبل از نام کلاس در نظر گرفته شده در فایل سی اس اس استفاده می کنیم و برای ID از نماد "#" .
نکته از مترجم : دقت نمایید برای استایل دهی هم از کلاس استفاه میشود و هم از ID. اما تفاوت هایی هم در استفاده دارد وآن اینکه از ID  برای استایل دهی و مشخص کردن عناصر اصلی صفحه مانند هدر  فوتر و منو و غیره استفاده میکنیم و یا برای استفاده در موارد برنامه نویسی .
تنها نکته در این باره این است که در یک صفحه HTML از نام یک ID  فقط می شود یکبار استفاده نمود اما از نام یک کلاس می توان به هر تعداد استفاده کرد.

در نظر بگیرید برای چند تگ درون صفحه تان از یک کلاس یکسان استفاده کرده اید، مثلا:

.fun {
font-family: Georgia, Times, serif;
color: #339999;
letter-spacing: 0.05em;
}

اما برای یکی از تگ ها علاوه بر خصوصیات فوق یک یا چند خصیصه دیگر نیز اضافه کنید، به این روش این کار را انجام می دهیم:

blockquote.fun {
font-style: italic;
}

بدین ترتیب چنانچه کلاس fun درون تگ  blockquote قرار گیرد خصوصیت italic  را نیز می خواند ، اما اگر به سایر تگ هایی که می خواهیم تنها کلاس fun را بخوانند تگ blockquote را قرار ندهیم خصیصه italic  شدن فونت اعمال نمی شود.

برای روشن تر شدن این موضوع مثال دیگری می زنم:
فرض کنید می خواهیم تمامی متون قرار گرفته درون تگ  p صفحه مان به رنگ آبی نفتی درآیند بنابراین کافیست که در CSS بنویسیم :

p {
color: navy;
}

اما حالا اگر بخواهیم یکی از متون قرار گرفته درون تگ p مان به رنگ دیگری درآید کافیست ، به این تگ p یه کلاس بدهیم و سپس به آن کلاس رنگ مورد نظرمان را نسبت دهیم:

.p.gre {
color: green;
}

استایل دهی قسمتی از متن با استفاده از span  :

فرض کنید که چنین متنی دارید:

<p>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 ofaccommodation and travel and to ensure that everyone gets a trustworthy dive buddy.</p>

و می خواهید دو کلمه اول این متن یعنی Bubble Underis  به صورت bold  (پر رنگ) نمایش داده شود. برای این کار برای این کلمات یک تگ span به کار می بریم و سپس به این span استایل دیگری را اعمال می کنیم و آن را آبی رنگ می کنیم:

<p><span class=" blue ">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 ofaccommodation and travel and to ensure that everyone gets a trustworthy dive buddy.</p>
.blue
{
Color: # a3c2fa;
}
design-web-112.jpg
 
فصل 4


استایل دهی عناصر با استفاده از css

 طی سالهای گذشته توسعه دهندگان وب سایت با استفاده  از css تنها می توانستند به متون موجود در سایت استایل بدهند و در پاره ای از مواقع رنگی را به متنی اختصاص می دادند، این تنها کاری بود که می شد با استفاده ازcss انجام داد چون در آن زمان مرورگر ها بسیار ضعیف بود و نمی توانستند خصوصیات بیشتری از css  را پشتیبانی کنند. اما با گذشت زمان این امر میسر شد و مرورگر ها پیشرفت کردند.
در این فصل به بررسی زوایای دیگری از css می پردازیم و امکانات بیشتری از آن را معرفی می کنیم. از جمله:
تغییر ظاهر و اندازه فضای مشخصی از وب سایت
تغییر پس زمینه و کناره های اشکال
موقعیت عناصر در هر جای صفحه وب سایت

قبل از شروع کار، ابتدا برای ایجاد تغییر در ظاهر و اندازه عناصر در وب سایت می بایست با مفهوم block-level elements  و inline elements آشنا شوید.

block-level elements  و inline elements

block-level elements:  به عناصر یا تگ هایی می گوییم که توسط آن می توان کل سطر یا فضایی که آن عنصر در اختیار خود دارد را  مسدود یا به اصطلاح block کرد، هر عنصر block  می تواند درون خود عنصر و یا عناصر inline و یا block  را جای دهد.

inline elements : به عناصر یا تگ هایی می گویند که آنها تنها می توانند به اندازه متنی که درون آن جای گرفته قسمتی از سطر را اشغال نمایند، این عناصر خطی یا به اصطلاح inline نامیده می شوند، توجه داشته باشید که درون تگ های inline تنها عنصر Inline جای میگیرد.
نحوه تشخیص عناصر  inline  بدین صورت است که اگر عنصری دوم در کنار عنصر اول در امتداد یک خط قرار گیرند عنصر اول قطعا inline است، اما اگر عنصر اول  block باشد عنصر دوم در بالا یا پایین عنصر اول قرار خواهد گرفت و نه در امتداد عنصر اول.

در اینجا چند عنصر block را معرفی می کنیم:

تگ های h1, h2,...و h6
P
div
Blockquote
Ul  و  ol
Form


وقتی که شما یک پاراگراف ایجاد می کنید، نیازی نیست که بعد از پایان پاراگراف اول با استفاده از <br /> به خط بعد بروید تنها کافیست یک تگ<p> را باز کرده متن خود را بنویسید و سپس آن تگ را ببندید.</p>
بذین ترتیب چون تگ p بلاک است خود به خود متنی که در تگ دوم P  قرار می گیرد از ابتدای سطر بعد شروع می شود.

design-web-111.jpg
و خروجی آن را بدین صورت خواهیم داشت:

 design-web-116.jpg


نظرات() 
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
Georgina
دوشنبه 9 مرداد 1396 09:39 ب.ظ
Thanks a bunch for sharing this with all people you really recognise what you are speaking
approximately! Bookmarked. Please additionally discuss
with my website =). We could have a hyperlink alternate arrangement between us
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
std test kit
دوشنبه 5 تیر 1396 03:54 ب.ظ
قلب از خود نوشتن در حالی که ظاهر شدن مناسب اصل آیا واقعا کار
بسیار خوب با من پس از برخی از زمان.

جایی درون جملات شما موفق به من مؤمن متاسفانه
فقط برای بسیار در حالی که کوتاه.

من با این حال کردم مشکل خود را با فراز در منطق و یک
ممکن است را سادگی به پر کسانی
که معافیت. اگر شما در واقع
که می توانید انجام من خواهد قطعا بود مجذوب.
فروش بیسیم پوکسینگ نمایندگی فروش بیسیم کنوود 3207 P5 BISIM
Augustus
دوشنبه 25 اردیبهشت 1396 08:29 ق.ظ
When I initially commented I clicked the "Notify me when new comments are added"
checkbox and now each time a comment is added I get several e-mails with the same comment.

Is there any way you can remove people from
that service? Cheers!
 
لبخندناراحتچشمک
نیشخندبغلسوال
قلبخجالتزبان
ماچتعجبعصبانی
عینکشیطانگریه
خندهقهقههخداحافظ
سبزقهرهورا
دستگلتفکر

موضوعات

قالب فلش فوق العاده زیبا و حرفه ای
سئو چیست؟
وبلاگ های تازه طراحی و مطلب گذاری شده
به اشتراک گذاشتن اینترنت 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