آموزش طراحی سایت با html و css – بخش چهارم


تاریخ انتشار: 6 مرداد 1398 | 39 بازدید

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

لازم به ذکر است که ما در بخش های قبل ابزار  Notepad ++را برای نوشتن کد معرفی کردیم که میتوانید از این سایت دانلود کنید.

استایل نویسی در css

در بخش قبل گفتیم سه روش برای استایل دهی به تگ های html وجود دارد.

اولین روش خطی بودن بود که استایل ها درون تگ قرار دارد.

مثال:

 

آموزش طراحی سایت با html css

 

نکته:

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

به تگ اصلی ، والد یا پدر میگویند.

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

مثلا در مثال بالا رنگ زمینه تگ p هم قرمز است.

این روش با دو روش دیگر یعنی استایل دهی درونی و خارجی فرق دارد.

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

دومین روش استایل نویسی درونی بود.

به مثال زیر توجه کنید که دارای دو تگ p هست و میخواهیم ببینیم چجوی به این دوتگ رنگ پس زمینه بدهیم.

 

آموزش طراحی قالب سایت با html css

 

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

class در css

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

در اینضورت باید کلاس را تعریف و استایل موردنظر را به کلاس نسبت دهیم  و سپس نام کلاسی که میخواهید تگ مورد نظر از آن استایل استفاده کند را در تگ بنویسید.

در آموزش طراحی سایت با css توجه داشته باشید که ابتدای هر کلاس با نقطه (.) نشان داده می شود.

بعنوان مثال کلاس زیر را ایجاد کردیم تا از 4 تگ داده شده بدلخواه به تگ اول و چهارم ، رنگ سبز بدهیم.

بدین منظور ابتدا کلاس دلخواه bgcolor-green تعریف می کنیم سپس استایل background-color:green را به آن می دهیم.

آموزش طراحی وب سایت با html css

مثال:

فرض کنید کلاسی به نام bgcolor-green داریم که قصد داریم این کلاس فقط برای تگ  <p>  قابل اجرا باشد.

مثال دوم برای کلاس

id یا شناسه در class

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

مثال برای id در CSS

گاهی عنصر منحصر به فردی داریم که این عنصر باید دارای شناسه منحصر به فرد باشد.

در اینصورت برای این عنصر  یک id درنظر میگیریم.

ابتدای نام idرا با شارپ(#)مشخص میکنیم.

به مثال زیر توجه کنید:

مثال id برای class

در بالا ملاحظه میشود که مثلا تگ divدارای شماره سریال منحصر به فردی است پی برای آن idدر نظر گرفتیم.

توجه:  مجاز هستیم فقط برای یک عنصر شناسه درنظر بگیریم و تگ های دیگر را نمیتوان با این شناسه مقدار دهیم.

آموزش طراحی سایت با استفاده از html و css – بخش اول

در ادامه مقالات آموزش طراحی سایت، این دوره آموزشی به شما کمک میکند که نحوه کدنویسی و طراحی سایت با html و css از ابتدا بیاموزید.

در این مسیر ما شما را از طریق گام‌های اساسی در مورد اینکه چه کار کنیم و چه چیزهایی را قبل و در حین ساخت یک وب سایت همراهی خواهیم کرد.

در دوره آموزش طراحی وبسایت با html و css خواهید آموخت:

– نمونه سازی یا شمای کلی سایت (Wireframing)

استفاده از ابزارهای اساسی و پنل ها در فتوشاپ

– کدنویسی html و css

– چگونگی ریسپانسیو کردن وبسایت با استفاده از فریمورک بوت استرپ

نمونه سازی (Wireframing) چیست

قدم اول در طراحی سایت با html و css ساخت نمونه اولیه است. نمونه سازی بطور کلی یک نمونه نمایشی است از اینکه یک وب سایت وقتی تکمیل شد به چه صورت خواهد بود.

نمونه سازی قسمت مهمی از کار طراحی سایت است معمولا کمتر مورد اهمیت طراحان قرار می گیرد.

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

ابزارهای تهیه وایرفریم یا نمونه اولیه

برای تهیه وایرفریم هم میتوان از قلم و کاغذ استفاده کرد و هم از نرم افزارهای آنلاین مثل Wireframe, Mockingbird, Google Drawing و یا از ابزارهای آفلاین مثل MockFlow ، Pencil استفاده کرد.

موکاپ (Mockup) چیست

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

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

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

 

ثبت نام دوره آموزش تبدیل طرح گرافیکی به کد HTML5

 

آموزش طراحی سایت با HTML – بخش دو

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

در ادامه  بصورت کلی و مقدماتی به این بحث میپردازیم.

 HTMLچیست؟

HTML یا Hyper Text Markup Language که زبانی پایه برای طراحی وب سایت است.

تاریخچه Markup Language ها و HTML:

در ابتدا زبان های مختلفی برای ساخت وبسایت ها بوجود آمد که به این زبان هاMarkup Language یا زبان نشانه گذاری میگویند.

کارکرد این زبان ها بر اساس پردازش متن است.

بعد ها تیم برنرزلی زبانی به نام Hyper Markup Language (نشانه گذاری فرامتنی) هنگام طراحی شبکه اینترنتی منتشر کرد که امروزه در تمامی وبسایت ها با عنوان اختصاری HTML یافت میشود.

تابحال 5 نسخه از آن منتشر شده و آخرین نسخه آن HTML 5 است.

کد های HTML توسط مرورگرها به متن تبدیل شده و نمایش داده میشود همچنین قابلیت گذاشتن عکس، فیلم، صدا، جدول و لینک را به ما می دهد.

 

 

تگ های HTML:

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

لیست editor های مختلف برای نوشتن HTML:

  • Notepad ++
  • Adobe Dreamweaver
  • Web Storm
  • Sublime text
  • Brackets
  • Mictosoft Web Matrix
  • و…

در ابتدا نرم افزار Notepad ++را از این سایت دانلود کرده و پس از نصب گام های زیر را برای نوشتن نمونه ای از HTML دنبال کنید.

  1. پوشه ای در درایو دلخواه بانام دلخواه مثلا بنام  HTML درست کنید و درون آن فولدر پروژه اول را ایجاد کنید.

 

2.سپس نرم افزار را باز کرده و در بالا قسمت language کلمه ی Hو سپس HTMLرا انتخاب کرده و فایل موردنظر را در فولدر project1 ذخیره میکنیم .

شروع به کد زدن میکنیم.

تگ  HTMLتگ آغازین است که قبل ز همه تگ ها قرار گرقته و کمک میکند تا مرورگر صفحه HTML را بخواند.این تگ در بر گیرنده کل فایل به غیر از (doctype) خواهد بود.

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

برای دیدن صفحه باید با مرورگر خودتون فایلHTML را باز کنید یعنی ابتدا روی فایل HTML راست کلیک کرده و با استفاده از Open with آن را با یکی از مرورگر ها(کروم یا فایرفاکس بهتر است) باز کنید.

بخش بعد را با آموزش طراحی سایت با css ادامه خواهیم داد،با ما همراه باشید.

 

راهنمای آموزش طراحی سایت با استفاده از html و css – بخش سوم

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

 

آموزش طراحی سایت با html و css

صفحه وب بصورت کلی به دو بخش زیر تقسیم می شود:

  1. Client Side
  2. Server Side

بخش اول خود به سه قسمت تقسیم می شود:

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

بنابرین CSS عنصر ضروری برای طراحی سایت شماست.

تاریخچه CSS

تا قبل از سال 1995 ، HTML یک زبان ساده بود. با پیشرفت اینترنت این زبان قادر به پاسخگویی نیاز کاربران نبود. همچنین خواص تگ های HTML از جمله تگ<font> کار پردازش را سخت کرده بود تا ایکه کنسرسیوم جهانی وب در سال1995 ،css راجهت تعریف ساختار ظاهری وبسایت ارائه کرد.

سینتکس css از دو بخش selector (انتخابگر) و declaration (اعلان) تشکیل شده است.

به ساختار زیر توجه کنید:

آموزش طراحی سایت با html و css

 

  • selector شامل یکی از تگ های html یا نام کلاس و  یا شناسه(ID) است.
  • هر Declaration شامل یک property و هر property شامل یک value(مقدار) است.

روندساختار بالا:

برای تغییر خصوصیات ظاهری یک تگ ، اول نام تگ وسپس ویژگی هایی مانند رنگ ، اندازه فونت و…را مینویسیم و مقدار هر ویژگی را جلوی هر ویژگی بعد دو نقطه (:) قرار می دهیم. اگر به مثال داخل تصویر توجه کنید میبینید که اشاره به تغییر رنگ و اندازه فونت دارد که در تگ p یعنی(<p>) قرار گرفته است. به رنگ مقدار آبی داده و برای تغییر اندازه فونت ابتدا یک (;)گذاشته ایم.

توجه:

در ابتدا یکی ابزار برای نوشتن کد مانند نرم افزار Notepad ++را از این سایت دانلود کنید.

روش های استفاده از Css در HTML

سه روش وجود دارد:

1- روش خطی inline stylesheets

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

 

آموزش طراحی سایت با html و css

2- روش درونی Internal Stylesheet

تمامی دستورات CSS بین دو تگ <style></style> یعنی تگ <head> قرار می گیرند. مثلا برای تغییر رنگ زمینه صفحه بشکل زیر عمل می کنیم:

آموزش طراحی سایت با html و css

3- روش خارجی external stylesheets

تمام استایل های مورد نظر در فایل جداگانه ای نوشته شده و با پسوند css ذخیره میشود و  توسط برچسب <link> مانند شیوه زیر به صفحه اضافه می شود:

و دقت کنید که آدرس فایل  file.css در href نوشته می شود.

برچسب های تاثیرگذار روی متن در HTML -بخش پنجم

در بخش دوم به آموزش مقدماتی HTML  پرداختیم.

اکنون درباره ی برچسب های تاثیرگذار روی متن در HTML بحث میکنیم.

به برچسب های <h1>,<h2>,<h3>,<h4>,<h5>,<h6> تیتر یا عنوان صفحه نیز میگویند.

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

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

عنوان نوشته

که خروجی آن بصورت زیر است.

خروجی1

 

در اینجا عنوان مقاله در تگ <h1> مشخص شده است.

برچسب <p>

همانظور که میدانید یک صفحه دارای یک یا چند پاراگراف است.

که این پاراگراف را با تگ باز <p>وبسته <p/>در html استفاده میکنیم.

متن خود را داخل <p>و این تگ را داخل html وارد میکنیم.

تگ p

 

خروجی:

خروجی2

 

برچسب <b>

b یا bold که از این تگ  برای  توپر کردن یا درشت کردن متن بکار میرود.

در مثال بالا عبارت رشدانا را به صورت درشت نمایش می دهیم.

برچسب b

خروجی:

خروجی 3

بر چسب <br>

br یا break بمعنای جدا کردن است.

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

برچسب br

خروجی:

توجه :  از این برچسب فقط برای ساخت سطر جدید استفاده کنید . برای ساخت پاراگراف جدید از آن استفاده نکنید.

بر چسب <i>

i یا italic باعث میشود نوشته به صورت مایل  نمایش داده شود.

برچسب i

خروجی:

خروجی 4

برچسب <u>

u یا underline بمعنای زیرخط دار است یعنی متن به صورت زیر خط دار نمایش داده می شود.

برچسب u

خروجی:

خروجی 5

برچسب <big>

این تگ باعث میشه متن بزرگتر از سایر متون نمایش داده  شود.

تگ big

 خروجی:

خروجی6

برچسب <small>

این تگ باعث میشه متن کوچکتر از سایر متون نمایش داده شود.

برچسب تگ small

خروجی:

خروجی7

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

مطالب مرتبط

دوره آموزشی پیشنهادی

دوره آموزش کدنویسی HTML5 و CSS3

HTML5 & CSS3 Markup

اولین گام برای ورود به دنیای برنامه نویسی

دوره آموزش کدنویسی HTML5 و CSS3

  • آشنایی با کدنویسی و کدنویسی تحت وب
  • کدنویسی واکنشگرا (responsive) و انواع روش های آن
  • آشنایی با layout قالب ها
  • کدنویسی مقرون به صرفه
  • تکنیک های افزایش سرعت در کدنویسی
  • انواع تگ های HTML و HTML5
  • روش صحیح بکارگیری تگ ها
  • انواع تگ های CSS و CSS3
  • اجرای کامل یک قالب در HTML
  • کدنویسی بهینه و تمیز

  • زمان: 21، 23، 25، 27 و 29 بهمن ماه 1399
  • مدت زمان دوره : پنج جلسه سه ساعته
توضیحات بیشتر و ثبت نام

ورود به دنیای حرفه‌ای کارآموزی

درخواست کارآموزی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *




مشاوره سریع با ما



دوره های پیشنهادی:
سایر دوره ها