بلاگ - شرکت سبزاندیش آراد |طراحی سایت

۱۸ اردیبهشت

تنظیم پس زمینه Background در CSS

در این بخش از آموزش css به توضیح ویژگی Background میپردازیم. ویژگی Background برای تعریف افکت های  پس زمینه برای یک عنصر به کار میرود.این ویژگی درطراحی وب سایت به شکیل تر شدن سایت شما کمک میکند.

انواع مختلفی از این ویژگی وجود دارد که به شرح هر یک از آنها میپردازیم

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position
  • background-color : این خاصیت رنگ پس زمینه یک عنصر را مشخص میکند، برای مثال برای تنظیم رنگ پس زمینه بدنه سایت از کد زیر استفاده میکنیم :

body {background-color:#b0c4de;}

  • background-image : با استفاده از این ویژگی تصویر پس زمینه یک عنصر را مشخص میکنیم ،برای مثال برای تنظیم تصویر  پس زمینه بدنه سایت از کد زیر استفاده میکنیم :

body {background-image:url(‘paper.gif’);}

 

  • background-repeat : با استفاده از این ویژگی میتوانیم مشخص کنیم که تصویر چگونه تکرار شود.اگر میخواهیم تصویر ما به صورت افقی  تکرار شود  زمانی که خود تصویر نیز افقی است (برای جلوگیری از گذاشتن عکس سایز بزرگ که باعش کند شدن بالا آمدن سایت میشود و به هیچ عنوان در طراحی سایت پیشنهاد نمیشود ) :

 body

{
background-image:url(‘gradient2.png’);
background-repeat:repeat-x;
}

    زمانی که بخواهیم تصویر فقط یک بار و بدون تکرار نمایش داده شود از دستور زیر استفاده میکنیم :

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
}

  • background-attachment : برای اینکه بتوانیم تصویر پس زمینه را ثابت انتخاب کنیم از این ویژگی استفاده میکنیم. مقدار پیش فرض آن scroll میباشد.

body
{
background-image:url(‘smiley.gif’);
background-repeat:no-repeat;
background-attachment:fixed;
}

  • background-position : این خاصیت موقعیت  یک عنصر را مشخص میکند، برای مثال برای تنظیم موقعیت تصویر به گوشه سمت راست –  بالا  از کد زیر استفاده میکنیم :

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:top right;

}

این سه خط را میتوان به صورت خلاصه تر نوشت :

body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}

اشتراک
۱۸ اردیبهشت

اصول نوشتن کدهای CSS

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

  • گذاشتن فاصله بین مقدار و واحد اشتباه است

مثال صحیح :

margin-left:20px;

مثال غلط:

margin-left:20 px;

  • قوانین نام گذاری فایل های css
  1. از کاراکترهای خاص استفاده نکنید.کاراکترهای مجاز عبارتند از :حروف a-z ، اعداد ۰-۹ ، خط زیر (_) ، خط فاصله (-)
  2. از کاراکتر فضای خالی استفاده نکنید ( ) مثلا : style Master.css  ، این نامگذاری میتواند در وب سرور شما مشکل ایجاد کند.
  3. نام فایل بایستی با یک حرف شروع شود.
  4. برای نام گذاری فایل از حروف کوچک استفاده کنید.
  5. نام فایل را تا آنجا که ممکن است کوتاه تعریف نمایید.
  6. فراموش نکنید که حتما فایل را با پسوند css ذخیره کنید.

با رعایت تمامی این نکات شما طراحی سایت بهینه تری را خواهید داشت .

اشتراک
۱۸ اردیبهشت

CSS خارجی

یکی از روشهای تعریف css استفاده از روش External Style Sheet میباشد.

برای داشتن طراحی سایت بهینه پیشنهاد میشود که از این روش استفاده کنید.

از CSS خارجی زمانی استفاده میشود که آن style در بیشتر صفحات استفاده شده باشد.
با استفاده از CSS خارجی ، شما با تغییر دادن تنهایک فایل میتوانید ظاهر سایت خود را تغییر دهید.هر صفحه بایستی به CSS Stylee مورد نظر خود لینک داده شود. بهترین روش برای گذاشتن CSS Style در صفحات وب ، CSS خارجی میباشد
با استفاده از تگ <link> در داخل بخش head شما میتوانید یک CSS خارجی تعریف کنید.
مثال :

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

CSS خارجی را میتوان در هر ویرایشگر متنی نوشت ، CSS Style ها باید با  فرمت css. ذخیره شوند. با استفاده از این سبک در واقع شما از یک Style میتوانید در چندین صفحه از وب سایت خود استفاده کنید.

اشتراک
۱۸ اردیبهشت

وب معنایی چیست؟

بسته به اینکه شما یک طراح وب باشید یانه، احتمالا میدونید که وب سایت با استفاده از زبان HTML نوشته شده است. زبان HTMLL به صورت پیش فرض به عنوان راهی برای توضیح محتوای سایت شما  است، نه به عنوان یک زبان برای طراحی های زیبا و جذاب.

این یکی از اولین مباحث HTML هست که توی اون به تفاوت HTML و CSS میپردازه. به طور کل زبان HTML برای معرفی محتوای سایت در نظر گرفته شده و زبان CSS برای ظاهر بخشیدن به اون محتوا ها مورد استفاده قرار میگیره.

وب معنایی یا همون semantic web به همین نکته بر میگرده که توی یک وب سایت، محتوای شما و المنت ها باید طوری نوشته شده باشه که به معرفی محتوای شما بپردازه.

برای مثال بهتر کد زیر را در نظر بگیرید:

<font size="6"><b>This is the page title</b></font>

توی کد بالا، ما یک متن را به  عنوان صفحه به نمایش در میاریم. توی این کد، ما با استفاده از تگ فونت و اندازه ی ۶، اندازه ی متنمون را بزرگ میکنیم و با استفاده از تگ b اون را bold میکنیم.

اگر یه انسان به سایت شما مراجعه کنه، با یک نگاه از اندازه ی متن میفهمه که این عنوان سایت شما است، اما کامپیوتر ها، موتورهای جستجو و بقیه ی دستگاه ها از کجا باید بفهمند که این عنوان وب سایت شما هست؟

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

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

برای این که این مشکل رفع بشه، ما میتونیم کد قبل را به کد زیر تبدیل کنیم:

<h1>This is a heading</h1>

کد زیر، با استفاده از تگ h1 که مربوط به heading ها هست سرتیتر اون صفحه را برای ما تعیین میکنه. اگر شما از ظاهر این سرتیتر و بزرگی بیش از اندازه یا bold نبودن اون و یا غیره رنج میبرید (!) راه حل اون این هست که از سی اس اس استفاده کنید و ظاهرش را تنظیم کنید.

به همین راحتی

به همین خوشمزگی

اینجوری میشه که هم موتور های جستجو میتونند درک بهتری از سایت شما و محتوای اون داشته باشند و هم کاربران از زیبایی سایت شما لذت ببرند.

اما چرا وب معنایی و نوشتن کدها به این صورت مهم است؟

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

مهم ترین مزیت های این که کامپیوتر بتونه درک درستی از صفحه ی ما داشته باشه عبارت است از:

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

ب) شاید یکی از مهم ترین مزیت های وب معنایی مربوط به موتورهای جستجو و سئو باشه. موتورهای جستجو برای امتیاز دهی (rank) به سایت شما نیاز دارند تا ابتدای امر درک کنند که محتوای سایت شما چی هست و در چه زمینه ای فعالیت میکنید. وب معنایی به موتور های جستجو کمک میکنه تا درک بهتری از سایت شما داشته باشند و جایگاه شما توی موتور های جستجو بهتر بشه. همچنین به خزنده های موتورهای جستجو اجازه میدهند تا وب سایت شما را بهتر کاوش کنه و این هم باز به جایگاه شما توی موتور های جستجو کمک شایانی میکنه.

همچنین وب معنایی مزایای زیاد دیگه ای هم داره:

الف) همونطور که توی مثال قبل میتونید ببینید، معمولا کدهای وب معنایی بسیار کوتاه تر هستند و کوتاه بودن اون ها یعنی حجم کمتر و دانلود سریع تر و این به کاربران شما هم کمک بیشتری میکنه. همچنین در کل ظاهر دادن و سی اس اس دادن به کدهای وب معنایی به دلیل ساختار تمیزتری که دارند ساده تر هست.

ب) وب معنایی باعث میشه که به روز رسانی کردن و تغییر ظاهر سایت شما به دلیل ساختار تمیز تری که دارند بسیار ساده تر بشه.

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

د) به خاطر اینکه وب معنایی کاری به ظاهر سایت شما نداره (مثال قبل را در نظر بگیرید. تگ h1 ربطی به ظاهر سایت شما نداشت اما تگ font به دلیل داشتن size ظاهر سایت شما را هم تحت الشعاع قرار میداد) شما به عنوان یه طراح میتونید خیلی راحت تر بدون دست کاری توی html و تنها با css ظاهر سایت خودتون را تنظیم کنید که این کار شما را هم سریع تر و هم ساده تر میکنه

و مزایای بسیار زیاد دیگه که در این مطلب کوتاه نمی گنجد!

چگونه بفهمیم که یک وب سایت از کدهای معنایی استفاده میکنه یا نه؟

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

توی این مطلب من تنها سعی کردم که به معرفی وب معنایی بپردازم.

وب معنایی بسیار گسترده تر این چند خطی هست که من نوشتم و انشا الله توی مطالب بعدی هر از گاهی چند تا نکته از کد ها و نوشتن کد به صورت وب معنایی خواهم نوشت

خوشبختانه توی html نسخه ی ۵ تگ ها و المنت های زیادی به منظور وب معنایی و درک بهتر موتورهای جستجو از وب (مثل تگ های مربوط به time و footer و article و …) اضافه شده که کار را برای طراحان بسیار بهتر کرده و همینطور دست من را برای مطلب نوشتن باز کرده!

اشتراک
۱۴ اردیبهشت

مرورگر چطور صفحات وب را تفسیر می کند؟

در اوایل این آموزش, مقایسه ای داشتیم بین زبان های سمت سرور و سمت کاربر و گفتیم که HTML مهمترین زبان سمت کاربر است که اگر نباشد, هیچ صفحه ی وبی ساخته نمی شود.

حالا میخواهیم ببینیم که یک مرورگر که در کامپیوتر کاربر نصب شده چطور یک صفحه ی وب را به صورت بصری نمایش میدهد. اول از همه باید بدانید که اصلی ترین چیزی که یک مرورگر برای تولید محتوا از آن استفاده می کند, سند HTML است. سند اچ تی ام ال, فایلی ست با نام دلخواه که دارای پسوند .html است. این فایل یا سند در یک هاست قرار میگیرد و با وارد کردن آدرس این فایل در فیلد آدرس بار مرورگر و فراخوانی آن, مرورگر ابتدا محتویات درون سند که شامل تگ های HTML است را تفسیر می کند و سپس آنرا به صورت محتویات قابل فهم برای انسان نمایش میدهد.

پس از درک مفهوم سند HTML, باید مفهوم تگ ها را نیز بدانیم. در زبان اچ تی ام ال, تگ ها در مرورگر نمایش داده نمیشوند. بلکه مرورگر از این تگ ها برای تفسیر و ترجمه ی صفحه استفاده می کند. مثلا زبان شیرین انگلیسی را تصور کنید: همانطور که میدانید در این زبان کلمه ی Book به معنی “کتاب” است. اگر کلمه ی Book را به یک مترجم زبان انگلیسی بدهید و ترجمه ی آن به فارسی را بخواهید, به شما کلمه ی “کتاب” را تحویل می دهد. داستان مرورگر نیز همین است. اگر یک تگ اچ تی ام ال را به مرورگر بدهید, آن مرورگر با استفاده از اطلاعاتی که از قبل دارد, تگ را تفسیر کرده و محتوای قابل نمایش تحویل شما میدهد.

نکته: این را هم داشته باشید که قرار نیست هرچه در یک سند اچ تی ام ال قرار دارد فقط به زبان HTMLL باشد. بلکه به هر زبان دیگری میتواند باشد اما باید حتما قبل و بعد از کد مربوط به آن زبان, یک تگ برای معرفی آن قرار دهید تا مرورگر بفهمد که این کد به چه زبانی است و سپس آنرا ترجمه کند.

نکته: ممکن است کدی که درون سند HTML قرار میدهید نه اچ تی ام ال باشد و نه زبانی که مرورگر بتواند آنرا تفسیر کند (یعنی به زبان سمت سرور باشد). اما نگران نباشید. درصورتی که تگ معرفی آن زبان را قبل و بعد از کد قرار دهید, خود سرور (هاست) شما آنرا تفسیر می کند و به صورت HTML تحویل مرورگر میدهد.

اگر متوجه دو نکته ی بالا نشدید, اصلا خودتان را ناراحت نکنید. در ادامه و در جای خودشان بیشتر در موردشان توضیح میدهیم.

تگ ها در اچ تی ام ال درون علامت های کوچکتر و بزرگتر قرار می گیرند. مثل: <html>

معمولا تگ های اچ تی ام ال به صورت تگ باز و بسته نوشته میشوند. یعنی مثلا تگ <html> اول می آید. بعد زیرش کد های مربوط به این تگ قرار می گیرند. و در انتها تگ به صورت <html/> بسته می شود. به مثال زیر توجه کنید:

HTML
<html>
کد های مربوط به این تگ
</html>

تگ <html> در یک سند اچ تی ام ال, کد های قابل ترجمه را برای مرورگر مشخص می کند. یعنی هرچیزی که درون این تگ قرار گرفت باید توسط مرورگر تفسیر شود.

اشتراک
شرکت سبزاندیش آراد

کلیه حقوق متعلق به شرکت سبزاندیش آراد میباشد.

لوگو نماد اکترونیکیlogo-samandehi