رفتن به نوشته‌ها

برچسب: آموزش css

clearing floats چیست

شاید بارها با کلمه clearing floats یا پاکسازی شناورها در طراحی تحت وب مواجه شده باشید. اما آیا می‌دانید این روش چیست و برای چه از آن استفاده می‌شود؟ عناصری که به وسیله‌ی ویژگی float در CSS به سمت چپ یا راست شناور شده باشند به درستی نمی‌توانند ارتفاع عنصر والدی که در آن قرار دارند را افزایش دهند. برای درک بهتر کدهای زیر را مشاهده کنید:

#main_container {
 width: 400px;
 margin: 20px auto;
 border: 2px solid #CCC;
 padding: 5px;
}
.floated_box {
 float: left;
 width: 100px;
 height: 100px;
 border: 1px solid #990000;
 margin: 10px;
}
<div id="main_container">
 <p>Some content.</p>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
</div>

DIVهایی با کلاس floated_box درون یک DIV والد با شناسه main_container قرار دارند، اما همانطور که در تصویر زیر مشاهده می‌کنید، تصور می‌شود که DIVهای با کلاس floated_box خارج از عنصر والد خود قرار دارند.

 

برای برطرف کردن این مشکل یک راهکار ساده وجود دارد و آن هم استفاده از ویژگی clear در CSS است. این DIV خالی را بعد از آخرین عنصر شناور خود قرار دهید:

<div style="clear: both;"></div>

همانطور که مشاهده می‌کنید با ویژگی clear و با مقدار دهی both به آن، مشکل ارتفاع عنصر والد حل شد.

آموزش طراحی وب – جلسه دهم – ویژگی شناوری

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

ویژگی شناوری چیست

float یا ویژگی شناوری خاصیتی در CSS است که مشخص می کند عنصر مورد نظر در کدام جهت (چپ یا راست) قرار بگیرد.

برای ساده سازی این تعریف به این مثال توجه کنید: فرض کنید برای طراحی دو ستون در یک صفحه نیاز دارید که هر کدام را در سمتی از صفحه قرار دهید. یکی در سمت چپ و دیگری در سمت راست. برای اینکه ستونهای مورد نظر در یکی از این جهت ها قرار بگیرد CSS ویژگی float را در دسترس طراح قرار داده تا با مقداردهی به آن جهت قرارگیری عنصر را تعیین کند.

float دارای مقادیری همچون:

  • none : عنصر مورد نظر شناوری ندارد.
  • left : عنصر در سمت چپ شناور است.
  • right : عنصر در سمت راست شناور است.
  • initial : شناوری پیشفرض.
  • inherit : دریافت شناوری از عنصر والد.

مثال:

برای اینکه ستون های تصویر زیر را در جهت مناسبی که برایش تعیین شده قرار دهیم باید به صورت زیر عمل کنیم:

در سند html به این صورت عمل می کنیم:

<html>
<body>
<div class="left-block"></div>
<div class="right-block"></div>
</body>
</html>

در سند CSS بصورت زیر عمل می کنیم:

.left-block{
	float:left;
	border: 2px solid red;
	width:200px;
	height:400px;
}
.right-block{
	float:right;
	border: 2px solid red;
	width:200px;
	height:400px;
}

در سند HTML چه خبر؟!

در سند html از دو برچسب div استفاده شد یکی برای ستون سمت راست و دیگری برای ستون سمت چپ. به هرکدام یک کلاس اختصاص دادیم تا بتوانیم از طریق ویزگی های CSS تغییرات را بر روی آنها اعمال کنیم.

برای ایجاد عناصر مورد نظر می توان از برچسب دوطرفه div استفاده کرد.

در سند CSS چه خبر؟!

در سند CSS چون از کلاس برای برچسب ها استفاده کردیم پس ابتدا یک نقطه قرار داده و سپس نام کلاس را نوشتیم. در ابتدای ویزگی ها مشخص کردیم که هریک از ستون در کدام سمت قرار بگیرد. برای همین از ویزگی شناوری با مقداردهی left و right استفاده کردیم. در خط دوم از ویژگی border برای قرار دادن یک مرز و تفکیک ستون ها از یکدیگر استفاده شد. که قطر آن برابر شد با ۲px و مقدار برابر با solid (در جلسات بعدی توضیح داده خواهد شد) قرار گرفت و در انتها رنگ border مشخص شد. همچنین برای هریک از ستون ها عرض و ارتفاع در نظر گرفته شد که با ویزگی های height و width مشخص هستند. بدین صورت توانستیم با یادگیری ویژگی شناوری عناصر خود را در سمت راست یا چپ ثابت کنیم.

آموزش طراحی وب – جلسه نهم

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

ID و CLASS در استایل نویسی

آیدی و کلاس دو ویژگی اصلی و کاربری در استایل نویسی می باشد که با قرار دادن آنها در برچسب های HTML می توان تغییرات ظاهری مختلفی را در آنها ایجاد کرد. یکی از مواردی که باید به آن توجه داشت این است که در سند خود مجاز به استفاده از تنها یک ID همنام و برای یک عنصر هستید. یعنی نمیتوان از یک ID برای چند برچسب استفاده کرد. اما CLASS این محدودیت را نداشته و با خیال راحت می توانید در چندین برچسب بنا به نیاز از آن استفاده کنید. یکی از ویژگی های ID استفاده از آن برای آدرس دهی می باشد که در جلسات بعدی به آن خواهم پرداخت.

تعریف ID و CLASS در برچسب

آیدی و کلاس همانطور که دارای املای منحصر به خود هستند، دارای مشخصه‌ی خاصی برای استفاده در سند CSS نیز می باشند. این مشخصه ها به ترتیب برای آیدی “#” و برای کلاس “.” می باشد. که در ادامه در مورد آنها توضیح خواهم داد.

برای اینکه بخواهید به یک برچسب با استفاده از css تغییرات دلخواه خود را اعمال کنید، ابتدا باید نحوه تعریف آیدی و کلاس را در برچسب ها بیاموزید. برای اینکار در برچسب مورد نظر (در برچسب دوطرف قسمت باز برچسب مد نظر است) با نوشتن حرف کلیدی ID یا CLASS سپس قرار دادن “=” و پس از آن قرار دادن دبل کوتیشن “” آیدی یا کلاس خود را تعریف کنید. اما برای شناسایی این برچسب و اعمال تغییرات به وسیله‌ی CSS باید نامی برای آن انتخاب کرد و آن را در دبل کوتیشنی که پس از مساوی قرار داده شده وارد کرد.

مانند:

<p class="name">
این یک پاراگراف است
</p>

همانطور که در کد بالا مشاهده می کنید. ما یک برچسب پاراگراف را ایجاد کردیم تا بتوانیم به وسیله‌ی css تغییرات خود را اعمال کنیم. چنین روشی را می توان برای تمام برچسب ها مورد استفاده قرار داد.

نکته: گاهی اوقات طراح برای صرفه جویی در وقت و همچنین کدنویسی تمیز و… به جای استفاده از روش کلاس‌دهی، از نام برچسب برای ایجاد تغییرات در CSS بهره می برد.

تا به اینجا شما توانستید چگونی تعریف آیدی یا کلاس را برای برچسب ها بیاموزید. اما برای اینکه بتوانید تغییرات دلخواه خود را با استفاده از CSS به برچسب خود اعمال کنید باید با روش تعریف آیدی و کلاس در سند style.css نیز آشنا شوید. (اگر با سند style.css آشنا نیستید به جلسه قبلی رجوع کنید)

تعریف ID و CLASS در سند CSS

تعریف آیدی یا کلاس در سند CSS دارای چند نکته کلیدی است که با یادگیری آن دیگر مشکلی برای استایل نویسی حرفه‌ای نیز نخواهید داشت!

 

یک آیدی یا کلاس شامل سه قسمت:

  1. انتخابگر
  2. ویژگی
  3. مقدار

می باشد.

انتخابگر

مورد اول: همانطور که گفته شد مشخصه آیدی “#” و مشخصه کلاس “.” می باشد. این مشخصه ها در اینجا کاربرد خواهند داشت.

مورد دوم: هر آیدی یا کلاس دارای نام می باشند که در هنگام تعریف در یک برچسب به آن تعلق می گیرد.

اکنون شما قسمت اول یعنی انتخابگر را درک کردید. پس برای اینکه یک آیدی یا کلاس در سند CSS تعریف شود، ابتدا “#” یا “.” قرار می گیرد سپس نامی که برای آنها در نظر گرفته اید. حال باید از کروشه باز و بسته استفاده کنید “{ }” تمام ویژگی های مربوط به یک آیدی یا کلاس درون این کروشه ها قرار می گیرند و زمانی که خارج از آنها باشد بلااستفاده و باعث ایجاد مشکلات می شود.

ویژگی و مقدار

Property یا ویژگی دارای مقدار منحصر به خود می باشند. با بکار بردن آنها در یک آیدی یا کلاس میتوان تغییراتی در برچسب های مورد نظر اعمال کرد. در تصویر بالا ما یک ویژگی با نام color داریم که مقداری برابر با green دارد. کاری که ویژگی color انجام می دهد تغییر رنگ است. برای مثال اگر برچسب پاراگراف دارای چنین ویژگی باشد، متون موجود در آن به رنگ سبز خواهند بود.

دو نکته در نوشتن ویژگی ها وجود دارد و آن استفاده از نقطه نقل و قول:” پس از نام ویژگی و نقطه ویرگول;” در انتهای دستور می باشد. همیشه باید پس از نوشتن نام ویژگی نقطه نقل و قول قرار گیرد. سپس مقدار نوشته می شود. اما قرارگیری نقطه ویرگول در انتها وابسته به دو نکته بوده، آن هم وجود بیش از یک ویزگی در یک آیدی یا کلاس. یعنی اگر تنها یک ویژگی در آیدیی یا کلاس نوشته شده باشد قرار دادن نقطه ویرگول در انتهای دستور الزامی نیست. اما اگر بیش از یک ویزگی داشته باشیم الزامی می باشد.

آموزش طراحی وب – جلسه هشتم – CSS

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

CSS چیست

Cascading Style Sheet یا CSS زبانی است که بصورت مستقل برای سبک دهی و ایجاد جلوه های مختلف بر روی عناصر موجود در html مورد استفاده قرار می گیرد.

حال برای اینکه بدانیم چگونه می توان از CSS برای زیباسازی سند خود استفاده کرد ابتدا باید با چگونگی فراخوانی آن در سند html آشنا شد. فراخوانی css به ۳ صورت انجام می پذیرد:

  1. سبک در خط (inline)
  2. سبک داخلی CSS
  3. سبک خارجی CSS

سبک در خط (Inline style)

ساده ترین راه برای استفاده از CSS قرار دادن آنها بصورت مستقیم در درون برچسب هاست. برای همین از این راه به عنوان درخط  یا  Inline یاد می شود. زیرا می توان تمام ویژگی های CSS را در درون خطوط HTML و برچسب ها مورد استفاده قرار داد. ساختار نوشتاری CSS در خط بصورت زیر است:

<p style="محل قرارگیری ویزگی های css">این یک پاراگراف است</p>

همانطور که در قطعه کد بالا مشاهده می کنید ما از یک برچسب p برای ایجاد پاراگراف استفاده کردیم. حال برای اینکه یک سری از ویژگی ها را با استفاده از CSS به آن اضافه کنیم، پس از نوشتن قسمت ابتدایی برچسب و ایجاد یک فاصله، از کلمه کلیدی style استفاده کردیم. این کلمه به این معنی است که ویزگی های مربوط به CSS در درون آن نوشته شده و مرورگر ملزم به اجرای آن در برچسب مورد نظر خواهد بود.

سبک داخلی  (Internal style sheet)

این راهکار حرفه ای تر از راهکار قبلی یعنی استفاده از CSS درخط می باشد. در این راه برای استفاده از ویژگی های CSS کافیست برچسب style درون برچسب head قرار گیرد تا بتوان از ویژگی های آن در سند HTML بهره برد.

<html>
<head>
<style>
محل قرار گیری ویژگی های css
</style>
</head>
<body>
</body>
</html>

تمام ویژگی های CSS با قرار گیری در برچسب style در مرورگر اجرا خواهد شد.

سبک خارجی (External style sheet)

این راهکار نسبت به راه هایی که توضیحات آن گذشت حرفه‌ای‌تر بوده و بیشتر مورد استفاده قرار می گیرد. شما نیز برای اینکه بصورت حرفه ای بتوانید کدنویسی کنید از این راه برای ایجاد ویزگی های CSS استفاده کنید.

برچسب یکطرفه link

یکی از موارد استفاده از این برچسب فراخوانی فایل CSS‌خارجی می باشد. برای اینکه بتوان یک فایل CSS را در سند HTML فراخوانی کرد به صورت زیر عمل می کنیم.

<html>
<head>
<link rel="stylesheet" type="text/css" href="filename.css">
</head>
</html>
  • rel : این کلمه مخفف relationship می باشد. از آن برای مشخص کردن ارتباط بین سند فعلی و سند لینک شده استفاده می شود.
  • type : مشخص کننده نوع فایل لینک شده می باشد.
  • href : نشانی فایل لینک شده را مشخص می کند.

ساخت سند CSS

برای این کار (در نرم افزار Notepad++) از قسمت نوار ابزار بر روی گزینه new کلیک کرده تا یک صفحه جدید گشوده شود.

سپس بدون آنکه محتوایی در آن قرار دهید از منو گزینه File و بعد بر روی Save As کلیک و در پنجره باز شده مکان ذخیره سازی سند خود را انتخاب کنید. (در اینجا من نام project را انتخاب می کنم که ار قبل ساخته بودیم) و فایل را در پوشه ذخیره کنید. نکته ای که باید به آن در زمان ذخیره سازی توجه کنید پسوند سند CSS شما می باشد. برای این کار پس از انتخاب نام برای سند خود (در اینجا من نام style را انتخاب می کنم) با قرار دادن یک نقطه “.” پس از نام، style را تایپ کرده و بر روی Save کلیک کرده تا ذخیره شود.

پس از ساخت سند، آماده می شویم برای یادگیری چگونگی کار با ویژگی های CSS که در جلسه بعدی شرح داده خواهد شد.

آموزش طراحی وب – جلسه اول – پیشنیازها

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

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

برنامه نویسی وب چیست

برخلاف طراحی وب (Web Design) که ظاهر (Frontend) یک نرم افزار تحت وب را تشکیل می دهد و در تعاریف به آن اشاره شد، برنامه نویسی وب (Web Programming) به منظور ایجاد تعامل و اجرای فرامین کاربر و همچنین ذخیره سازی داده در پایگاه داده و در سطح بالاتر به منظور ساخت یک نرم افزار تحت وب همچون سیستم های مدیریت محتوا نظیر وردپرس، جوملا و… است. زبان های برنامه نویسی تحت وب شامل php, asp.net, java, c++,c و… و همچنین فریمورک های مشتق شده از آنها می باشد. در برنامه نویسی به نوعی باطن یا هسته یک نرم افزار نوشته می شود و از همین جا می توان تفاوت بین این دو تعریف را درک کرد.

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

تجربه کاربری چیست

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

رابط کاربری چیست

User Interface که به اختصار UI نامیده می شود؛ به معنی رابط کاربری است. UI برخلاف UX مسئول پیاده سازی مسیری است که طراح تجربه کاربری ایجاد نموده است. به نوعی وظیفه طراح رابط کاربری، ایجاد طرح گرافیکی به بهترین نحو است.

انواع صفحات وب

  • وبسایت ایستا

صفحه (static) صفحه ای است که بصورت کامل با HTML ساخته شده و تنها به نمایش اطلاعات می پردازد و تعاملی با کاربر ندارد. بدین معنی که اگر بخواهیم سایتی بصورت ایستا با چندین صفحه طراحی کنیم باید هر صفحه بصورت مجزا کدنویسی شود. فردی که اطلاعاتی در مورد کار با زبان های تحت وب نداشته باشد برای ویرایش یا اضافه کردن صفحات به مشکل بر خواهد خورد.

  • وبسایت پویا

صفحه (dynamic) صفحه ای است که برای تعامل با کاربر غیر از استفاده از HTML و CSS از زبان های برنامه نویسی مانند PHP, ASP و.. برای ذخیره سازی اطلاعات و ساخت یک سیستم مدیریت محتوا استفاده می کند. به همین سبب اگر فردی اطلاعات لازم در مورد کار با زبان های تحت وب را نداشته باشد به راحتی می تواند از پیشخوان (Panel) که برای سایت طراحی شده صفحه خود را بسازد، مطلب بنویسد و یا ظاهر سایت را از طریق تنظیمات تعبیه شده تغییر دهد.

چه زمانی از وبسایت ایستا یا پویا استفاده می شود؟

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

وبسایت های پویا را می توان به وسیله سیستم های مدیریت محتوا (CMS) ی رایگان همچون وردپرس، جوملا، دروپال و… راه اندازی کرد. و یا با پرداخت هزینه سیستم شخصی مورد نظر خود را بسازید.

نرم افزارهای کدنویسی

نکته: نرم افزارهای مختلفی برای کدنویسی وجود دارد که میتوان با توجه به امکانات، زیبایی، کارایی و… یکی را انتخاب کرد.

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

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