با جلسه نهم از سری آموزش های طراحی وب در خدمت شما دوستان عزیز هستیم. در جلسه قبلی انواع مختلف استایل نویسی و طریقه استفاده از آنها در داخل سند یا سند خارجی 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 انجام می دهد تغییر رنگ است. برای مثال اگر برچسب پاراگراف دارای چنین ویژگی باشد، متون موجود در آن به رنگ سبز خواهند بود.

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

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

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

فرم (Form)

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

<form></form>

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

اصلی ترین برچسب درونی یک فرم، input‌ می باشد. که با در اختیار گذاشتن الگوهای مختلف می تواند یک فرم کامل را ایجاد نماید.

<input>

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

با قرار دادن ویژگی type و دادن مقدار مناسب به آن می توان از این الگو ها استفاده کرد.

بصورت زیر نوشته می شود:

<input type="مقدار">

مقادیری که باید در type قرار گیرد از پیش تعیین شده و شما برحسب نیاز می توانید از یکی از آنها استفاده نمایید. در ادامه به تعدادی از آنها اشاره خواهم کرد.

ورودی متنی در فرم

برای ایجاد یک فیلد یا همان ورودی متن باید بصورت زیر عمل کرده و مقدار درون type را با text پر کنید.

<input type="text">

خروجی در مرورگر:

html-form-text

همچنین برای دیگر موارد نیز با تغییر مقدار در ویژگی type می توان متناسب با آن در خروجی الگو مورد نظر خود را پیاده کرد.

دکمه در فرم

برای ایجاد یک دکمه باید بصورت زیر عمل کرده و مقدار درون type را با button پر کنید. همچنین برای این دکمه باید یک نام نیز قرار داد تا در خروجی نمایش داده شود. برای این کار با قرار دادن ویژگی value و دادن مقدار(نام مورد نظر برای دکمه) به آن، دکمه در خروجی حاوی یک نام خواهد بود.

<input type="button" value="نام دکمه">

خروجی در مرورگر:

html-form-button

ورودی گذرواژه در فرم

برای ایجاد یک فیلد یا ورودی گذرواژه (پسورد) با تغییر مقدار در ویژگی type به password می توان این ورودی را ایجاد نمود. تفاوت این ورودی با ورودی متن در نوع نمایش کاراکترهای درونی آنها می باشد. در تصویر خروجی خواهید دید که مقادیری که در ورودی پسورد قرار می گیرد به صورت دایره ای نشان داده می شود.

<input type="password" >

خروجی در مرورگر:

html-form-pass

ورودی ایمیل در فرم

برای ایجاد یک فیلد یا ورودی ایمیل با تغییر مقدار در ویژگی type به email می توان این ورودی را ایجاد نمود.

<input type="email">

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

خروجی در مرورگر:

html-form-email

دکمه ارسال در فرم

برای ایجاد یک دکمه ارسال باید بصورت زیر عمل کرده و مقدار درون type را با submit پر کنید. در اینجا نیز با قرار دادن ویژگی value می توان برای دکمه ارسال نیز نام تعیین کنید.

<input type="submit" value="دکمه ارسال" >

خروجی در مرورگر:

html-form-submit

چک‌باکس در فرم

برای ایجاد یک چک‌باکس باید بصورت زیر عمل کرده و مقدار درون type را با checkbox پر کنید. چک‌باکس‌ها بیشتر برای انتخاب چند مورد در یک فرم مورد استفاده قرار می گیرند.

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

خروجی در مرورگر:

html-form-checkbox

نکته: برای اینکه بخواهید بصورت پیشفرض چک‌باکس شما تیک خورده باشد، کافیست ویژگی checked را به برچسب خود اضافه کنید.

بصورت زیر:

<input type="checkbox" checked>

دکمه رادیو در فرم

برای قرار دادن دکمه رادیویی (که بصورت گرد است) باید بصورت زیر عمل کرده و مقدار درون type را با radio پر کنید. بر خلاف checkbox دکمه رادیویی برای انتخاب یک گزینه از میان چند گزینه مورد استفاده قرار می گیرد.

<input type="radio">
<input type="radio">
<input type="radio">

خروجی در مرورگر:

html-form-radio

نکته: از ویژگی checked در دکمه رادیویی نیز می توان استفاده کرد.

دکمه انتخاب فایل در فرم

برای اینکه بتوان فایلی را از رایانه خود انتخاب کنیم؛ برچسب فرم باز هم به کمک خواهد آمد. تنها کافیست مقدار درون type را با file پر کنید.

<input type="file">

خروجی در مرورگر:

html-form-file

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

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

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

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

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

برخلاف طراحی وب (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 ویندوز است! اما چون محیط نوت‌پد بسیار ساده است بنده چنین چیزی را پیشنهاد نمی کنم. در عوض نرم افزارهایی را در زیر معرفی می کنم تا هرکدام را با توجه به سلیقه خود انتخاب کنید. پیشنهاد می کنم تا مطلب ویرایشگرهای قدرتمند برای کدنویس ها را مطالعه کنید.

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

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

طراحی وب چیست

ایجاد ظاهر وبسایت (نرم‌افزار تحت وب) با بهره گیری از طراحی گرافیک که معمولا پیاده سازی آن در نرم افزارهای طراحی انجام می‌پذیرد؛ و به وسیله زبان های طراحی تحت وب یعنی HTML, CSS به فرمتی برای اجرا در مرورگر تبدیل می شود.

در تعریف بالا چند نکته مشخص شد:

  1. طراحی وب، ظاهر یک نرم‌افزار تحت وب است.
  2. طراحی وب، زبان های مخصوص به خود را دارد.
  3. طراحی وب، دو مرحله اصلی دارد.

۱- طراحی وب، ظاهر نرم‌افزار تحت وب است

آنچه بصورت بصری (دیداری) در یک نرم‌افزار تحت وب قابل مشاهده است ظاهر آن تلقی می شود. از همین رو طراحی وب، عملی برای ایجاد پوسته ظاهری نرم‌افزار تحت وب می باشد.

۲- طراحی وب، زبان های مخصوص به خود را دارد

برای یادگیری طراحی تحت وب باید زبان های مخصوص به آن را فرا گرفت. زیرا در محیط کدنویسی ایجاد می شوند. این زبان ها HTML, CSS ,JavaScript می باشند.

۳- طراحی وب، دو مرحله اصلی دارد

  • مرحله اول: طراحی گرافیک:

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

  • مرحله دوم: کدنویسی:

در این مرحله استفاده از کدنویسی برای تبدیل طرح گرافیکی به فرمت مورد نظر برای اجرا در مرورگر الزامی است.

اچ تی ام ال چیست

Hyper Text Markup Language که به اختصار HTML نامیده می شود؛ به معنی زبان نشانه گذاری ابر متن است. یک فایل متنی ساده است که به این زبان نوشته (کدنویسی) می شود و با پسوند .html ذخیره شده و برای مرورگر قابل مشاهده است. HTML ساختار و بدنه اصلی طراحی تحت وب به حساب می آید. این زبان بر اساس وجود تگ هایی از پیش تعیین شده، نوشته شده و هر یک از تگ ها معرف عملکردی خاص است.

سی اس اس چیست

Cascading Style Sheet که به اختصار CSS نامیده می شود؛ به معنی برگه سبک آبشاری است. زبانی است که بصورت مستقل برای سبک دهی و ایجاد جلوه های مختلف بر روی عناصر موجود در HTML مورد استفاده قرار می گیرد. در واقع CSS کار زیباسازی را در طراحی وب برعهده دارد.

جاوااسکریپت چیست

JavaScript که به اختصار JS نامیده می شود؛ زبانی شبه برنامه نویسی است که پویاسازی یک وبسایت را با استفاده از تغییر در عناصر بر عهده می گیرد. به این دلیل آن را یک زبان شبه برنامه نویسی می نامند چون این زبان در سمت کاربر و در مرورگر قابلیت اجرا داشته و نیازی به پایگاه داده برای ذخیره سازی، یا یک سرور برای اجرا ندارد.