در بخش قبلی بصورت مقدماتی آموزش طراحی سایت با css و html را گفتیم در ادامه آموزش طراحی قالب سایت با html و css درباره اصول کدنویسی با css را بحث خواهیم کرد.
لازم به ذکر است که ما در بخش های قبل ابزار Notepad ++را برای نوشتن کد معرفی کردیم که میتوانید از این سایت دانلود کنید.
در بخش قبل گفتیم سه روش برای استایل دهی به تگ های html وجود دارد.
اولین روش خطی بودن بود که استایل ها درون تگ قرار دارد.
مثال:
در html اگر یک تگ زیر مجموعه تگ های دیگر باشد،این تگ را بعنوان فرزند تگ اصلی گفته میشود.
به تگ اصلی ، والد یا پدر میگویند.
تگ های فرزند کلیه خصوصیات تگ والد یا اصلی را به ارث میبرند،مگراینکه دارای خصوصیات تعریف شده ای باشند.
مثلا در مثال بالا رنگ زمینه تگ p هم قرمز است.
این روش با دو روش دیگر یعنی استایل دهی درونی و خارجی فرق دارد.
در این دو روش باید ایتدا نام هر تگ مربوطه و سپس شروع به استایل نویسی کنیم.
دومین روش استایل نویسی درونی بود.
به مثال زیر توجه کنید که دارای دو تگ p هست و میخواهیم ببینیم چجوی به این دوتگ رنگ پس زمینه بدهیم.
با اجرای کد متوجه میشویم رنگ هردو تگ سبز است.
زمانی از کلاس استفاده میکنیم که برفرض مثال فقط بخواهیم رنگ یکی از تگ های سبز شود یا عناصر دیگر بصورت انتخابی رنگ دلخواه را داشته باشد.
در اینضورت باید کلاس را تعریف و استایل موردنظر را به کلاس نسبت دهیم و سپس نام کلاسی که میخواهید تگ مورد نظر از آن استایل استفاده کند را در تگ بنویسید.
در آموزش طراحی سایت با css توجه داشته باشید که ابتدای هر کلاس با نقطه (.) نشان داده می شود.
بعنوان مثال کلاس زیر را ایجاد کردیم تا از 4 تگ داده شده بدلخواه به تگ اول و چهارم ، رنگ سبز بدهیم.
بدین منظور ابتدا کلاس دلخواه bgcolor-green تعریف می کنیم سپس استایل background-color:green را به آن می دهیم.
فرض کنید کلاسی به نام bgcolor-green داریم که قصد داریم این کلاس فقط برای تگ <p> قابل اجرا باشد.
اما گاهی اوقات شما عنصری منحصر به فرد در صفحه دارید که این عنصر بایستی دارای شناسه یکتا یا منحصر به فرد باشد. در این صورت از id برای این عنصر استفاده می کنیم. ابتدای نام آی دی یا id با علامت شارپ (#) مشخص می شود.
گاهی عنصر منحصر به فردی داریم که این عنصر باید دارای شناسه منحصر به فرد باشد.
در اینصورت برای این عنصر یک id درنظر میگیریم.
ابتدای نام idرا با شارپ(#)مشخص میکنیم.
به مثال زیر توجه کنید:
در بالا ملاحظه میشود که مثلا تگ divدارای شماره سریال منحصر به فردی است پی برای آن idدر نظر گرفتیم.
توجه: مجاز هستیم فقط برای یک عنصر شناسه درنظر بگیریم و تگ های دیگر را نمیتوان با این شناسه مقدار دهیم.
در ادامه مقالات آموزش طراحی سایت، این دوره آموزشی به شما کمک میکند که نحوه کدنویسی و طراحی سایت با html و css از ابتدا بیاموزید.
در این مسیر ما شما را از طریق گام‌های اساسی در مورد اینکه چه کار کنیم و چه چیزهایی را قبل و در حین ساخت یک وب سایت همراهی خواهیم کرد.
– نمونه سازی یا شمای کلی سایت (Wireframing)
– استفاده از ابزارهای اساسی و پنل ها در فتوشاپ
– کدنویسی html و css
– چگونگی ریسپانسیو کردن وبسایت با استفاده از فریمورک بوت استرپ
قدم اول در طراحی سایت با html و css ساخت نمونه اولیه است. نمونه سازی بطور کلی یک نمونه نمایشی است از اینکه یک وب سایت وقتی تکمیل شد به چه صورت خواهد بود.
نمونه سازی قسمت مهمی از کار طراحی سایت است معمولا کمتر مورد اهمیت طراحان قرار می گیرد.
بطور کلی می توان گفت وایرفریم، نمونه اولیه و خام یک صفحه وبسایت است و قسمتهای اصلی سایت را مشخص میکند. به عنوان مثال میتوان نمونه سازی را نقشه اسکلت یک ساختمان بر روی کاغذ توصیف کرد.
برای تهیه وایرفریم هم میتوان از قلم و کاغذ استفاده کرد و هم از نرم افزارهای آنلاین مثل Wireframe, Mockingbird, Google Drawing و یا از ابزارهای آفلاین مثل MockFlow ، Pencil استفاده کرد.
قدم بعدی در طراحی سایت با html و css ساخت نطرح گرافیکی قالب سایت است. طرح گرافیکی قالب وبسایت جهت مشاهده نتیجه نهایی که قرار است بر روی اینترنت منتشر شود، ایجد میگردد.
برای طراحی موکاپ هم مثل وایرفریم نرم افزارهای آنلاین و آفلاین رایگان مختلفی وجود دارد که می توان در اینترنت پیدا کرد. معمولا نرم افزارهای فتوشاپ، ایلاستریتور و یا ادوب ایکس دی برای طراحی طبق نمونه اولیه یا وایرفریم مورد استفاده قرار می گیرد.
در بخش بعدی آموزش طراحی سایت با html و css با اصول اولیه کدنویسی html و css آشنا خواهید شد.
در بخش یک از آموزش طراحی سایت با html با گام‌های اساسی در مورد اینکه چه کار کنیم و چه چیزهایی را قبل و در حین ساخت یک وب سایت آشنا شدید.
در ادامه بصورت کلی و مقدماتی به این بحث میپردازیم.
HTML یا Hyper Text Markup Language که زبانی پایه برای طراحی وب سایت است.
در ابتدا زبان های مختلفی برای ساخت وبسایت ها بوجود آمد که به این زبان هاMarkup Language یا زبان نشانه گذاری میگویند.
کارکرد این زبان ها بر اساس پردازش متن است.
بعد ها تیم برنرزلی زبانی به نام Hyper Markup Language (نشانه گذاری فرامتنی) هنگام طراحی شبکه اینترنتی منتشر کرد که امروزه در تمامی وبسایت ها با عنوان اختصاری HTML یافت میشود.
تابحال 5 نسخه از آن منتشر شده و آخرین نسخه آن HTML 5 است.
کد های HTML توسط مرورگرها به متن تبدیل شده و نمایش داده میشود همچنین قابلیت گذاشتن عکس، فیلم، صدا، جدول و لینک را به ما می دهد.
هر صفحه HTML دارای قسمت هایی است که به آن تگ میگویند و دارای کلمات از پیش تعیین شده است که بین دوتا<> قرار میگیرد و دارای ساختار زیر است.
در ابتدا نرم افزار Notepad ++را از این سایت دانلود کرده و پس از نصب گام های زیر را برای نوشتن نمونه ای از HTML دنبال کنید.
2.سپس نرم افزار را باز کرده و در بالا قسمت language کلمه ی Hو سپس HTMLرا انتخاب کرده و فایل موردنظر را در فولدر project1 ذخیره میکنیم .
شروع به کد زدن میکنیم.
تگ HTMLتگ آغازین است که قبل ز همه تگ ها قرار گرقته و کمک میکند تا مرورگر صفحه HTML را بخواند.این تگ در بر گیرنده کل فایل به غیر از (doctype) خواهد بود.
داخل این تگ، تگ body است که نشان دهنده ی شروع صفحه ی ما است.
برای دیدن صفحه باید با مرورگر خودتون فایلHTML را باز کنید یعنی ابتدا روی فایل HTML راست کلیک کرده و با استفاده از Open with آن را با یکی از مرورگر ها(کروم یا فایرفاکس بهتر است) باز کنید.
بخش بعد را با آموزش طراحی سایت با css ادامه خواهیم داد،با ما همراه باشید.
در بخش دوم از آموزش طراحی سایت با html css ،مقدمه ای بصورت کلی در ارتباط با آموزش طراحی سایت با html و css بیان کردیم. در ادامه به طراحی سایت با css بصورت کلی می پردازیم. برای درک بهتر دو کلمه html و css باید گفت اگر html را اسکلت یک ساختمان در نظر بگیریم ، css نمای ظاهری و زیبایی ساختمان است.
صفحه وب بصورت کلی به دو بخش زیر تقسیم می شود:
بخش اول خود به سه قسمت تقسیم می شود:
بنابرین CSS عنصر ضروری برای طراحی سایت شماست.
تا قبل از سال 1995 ، HTML یک زبان ساده بود. با پیشرفت اینترنت این زبان قادر به پاسخگویی نیاز کاربران نبود. همچنین خواص تگ های HTML از جمله تگ<font> کار پردازش را سخت کرده بود تا ایکه کنسرسیوم جهانی وب در سال1995 ،css راجهت تعریف ساختار ظاهری وبسایت ارائه کرد.
سینتکس css از دو بخش selector (انتخابگر) و declaration (اعلان) تشکیل شده است.
به ساختار زیر توجه کنید:
برای تغییر خصوصیات ظاهری یک تگ ، اول نام تگ وسپس ویژگی هایی مانند رنگ ، اندازه فونت و…را مینویسیم و مقدار هر ویژگی را جلوی هر ویژگی بعد دو نقطه (:) قرار می دهیم. اگر به مثال داخل تصویر توجه کنید میبینید که اشاره به تغییر رنگ و اندازه فونت دارد که در تگ p یعنی(<p>) قرار گرفته است. به رنگ مقدار آبی داده و برای تغییر اندازه فونت ابتدا یک (;)گذاشته ایم.
در ابتدا یکی ابزار برای نوشتن کد مانند نرم افزار Notepad ++را از این سایت دانلود کنید.
سه روش وجود دارد:
استایل مورد نظر مستقیم و در خصوصیت style آن تگ مقدار دهی می شود. در مثال گفته شده برای تغییر رنگ صفحه به صورت خطی به این شکل زیر عمل می کنیم:
تمامی دستورات CSS بین دو تگ <style></style> یعنی تگ <head> قرار می گیرند. مثلا برای تغییر رنگ زمینه صفحه بشکل زیر عمل می کنیم:
تمام استایل های مورد نظر در فایل جداگانه ای نوشته شده و با پسوند css ذخیره میشود و توسط برچسب <link> مانند شیوه زیر به صفحه اضافه می شود:
و دقت کنید که آدرس فایل file.css در href نوشته می شود.
در بخش دوم به آموزش مقدماتی HTML پرداختیم.
اکنون درباره ی برچسب های تاثیرگذار روی متن در HTML بحث میکنیم.
به برچسب های <h1>,<h2>,<h3>,<h4>,<h5>,<h6> تیتر یا عنوان صفحه نیز میگویند.
میخواهیم با استفاده از برچسب ها یک عنوان کوتاه را با کدنویسی نشان دهیم ،پس مراحل زیر را گام به گام انجام دهید.
در بخش دوم ابزاری جهت کدنویسی معرفی کردیم که میتوانید از این سایت دانلود کنید.
که خروجی آن بصورت زیر است.
در اینجا عنوان مقاله در تگ <h1> مشخص شده است.
همانظور که میدانید یک صفحه دارای یک یا چند پاراگراف است.
که این پاراگراف را با تگ باز <p>وبسته <p/>در html استفاده میکنیم.
متن خود را داخل <p>و این تگ را داخل html وارد میکنیم.
خروجی:
b یا bold که از این تگ برای توپر کردن یا درشت کردن متن بکار میرود.
در مثال بالا عبارت رشدانا را به صورت درشت نمایش می دهیم.
خروجی:
br یا break بمعنای جدا کردن است.
اگر میخواهید بعد از نوشتن بخشی از متن ، ادامه ی مطلب در خط دیگر بیاید ازاین برچسب استفاده میکنیم.
خروجی:
توجه : از این برچسب فقط برای ساخت سطر جدید استفاده کنید . برای ساخت پاراگراف جدید از آن استفاده نکنید.
i یا italic باعث میشود نوشته به صورت مایل نمایش داده شود.
خروجی:
u یا underline بمعنای زیرخط دار است یعنی متن به صورت زیر خط دار نمایش داده می شود.
خروجی:
این تگ باعث میشه متن بزرگتر از سایر متون نمایش داده شود.
خروجی:
این تگ باعث میشه متن کوچکتر از سایر متون نمایش داده شود.
خروجی:
توجه استفاده از تگ ها به صورت تو در تو قانونی دارد که بایدحتما اولین تگی که باز می شود آخرین تگی باشد که بسته می شود و آخرین تگی که باز می شود حتما اولین تگی باشد که بسته می شود.
HTML5 & CSS3 Markup
اولین گام برای ورود به دنیای برنامه نویسی
