در جلسه ی قبل از آموزش CSS به چگونگی اضافه کردن CSS به HTML پرداختیم و گفتیم که از سه راه استایل دهی درون خطی, داخلی و خارجی میتوان این کار را انجام داد. در این جلسه قصد داریم به نحوه ایجاد فایل CSS بپردازیم با ما تا پایان همراه باشید.
پیشنهاد ما این است که این جلسات را پشت سر هم و همراه با تمرین و تکرار بگذرانید. پس اگر جلسه ی قبل را مطالعه نکرده اید از لینک جلسه دوم CSS استفاده کنید.
همان طور که در جلسات قبل گفتیم CSS مخفف عبارت Cascading Style Sheets است و برای استایل دهی و صفحه آرایی و ایجاد جلوه های بصری یک صفحه ی وب مورد استفاده قرار می گیرد.
یک فایل CSS با پسوند css. ذخیره میشود. پس اگر فایلی با این پسوند مشاهده کردید حتما یک فایل CSS است.
برای ساختن هر فایلی نیاز به نرم افزار یا ویرایشگر مناسب داریم حالا این فایل می خواهد CSS باشد یا HTML و یا PHP.
نرم افزارهای مختلفی برای ساختن یک فایل CSS وجود دارد. نرم افزارهای دارای ویژگی های خاص تا نرم افزارهای خیلی حرفه ای و پیشرفته. به هر حال هر کدام مناسب افرادی است که قصد استفاده از آن را در زمینه ی مورد نظر خود دارند.
از نرم افزار Dreamweaver به عنوان یک نرم افزار حرفه ای و نرم افزارهایی مانند ++NotePad به عنوان نرم افزارهایی ساده و روان نام برده میشود. در ادامه نام چندین ویرایشگر که برای ایجاد یک فایل CSS مناسب هستند را آورده ایم؛
|
ویرایشگرهای ساده |
ویرایشگرهای آنلاین |
ویرایشگرهای قدرتمند |
ویرایشگرهای ابری |
ویرایشگرها با قابلیت پشتیبانی از چند زبان |
|
ConTEXT |
Phoenix | Artisteer | TinyMCE | PHPEdit |
|
Textmate |
Vimperator |
Webpage | Codio |
PHPDesigner |
|
Chocolat |
Slim Text | Trellian | Cloud9 IDE |
Architect |
|
BBEdit |
Instant | Fusion | Orion |
Mirabyte Web |
|
TextWrangler |
Firebug | Net Objects | Drive |
NetBeans IDE |
|
Topstyle 5 |
Sourcekit | Aloha Editor | Neutron |
Aptana Studio |
|
Sublime Text |
Easy JsBin Phoenix | BlueGriffon | Compilr |
HTML-Kit |
|
Espresso |
Firebug | HTML Editor | ShiftEdit |
Komodo IDE |
|
Coda 2 |
Coding the Web | BestAddress | Kodingen |
WebStorm IDE |
|
EditPlus |
Web Studio |
Cloud IDE |
||
|
UltraEdit |
Builder |
Collide |
||
|
Emacs |
Wix Website |
CKEditor |
||
|
HTML Editor |
Amaya |
|||
|
Coffeecup |
SnapEditor |
نکته ای که برای انتخاب ویرایشگر مناسب باید به آن توجه کنید این است که حرفه ای بودن نرم افزار ممکن است بسیار مهم باشد و تا حد زیادی به شما کمک کند اما آنچه بیشتر از داشتن یک نرم افزار حرفه ای اهمیت دارد, حرفه ای بودن شما در کد نویسی است. اگر شما یک کد نویس حرفه ای باشید دیگر نیازی به ویرایشگر خاص و ویژه ای ندارید و هر ویرایشگری که موجود باشد کار شما را راه می اندازد.
توصیه ی ما به شما این است که زیاد به نرم افزارهای حرفه ای وابسته نشوید و از ساده ترین آنها مانند NotePad و ++NotePad استفاده کنید.
اما چرا نرم افزارهای ساده را توصیه میکنیم؟🧐
به این دلیل که نرم افزارهای حرفه ای شما را در کد نویسی ضعیف می کند. یعنی باعث میشود که به آن نرم افزار وابسته شوید و نتوانید بدون آن کاری انجام دهید.
در ادامه برای ایجاد یک فایل CSS دو راه را معرفی می کنیم؛
همانطور که پیشنهاد دادیم قرار است از نرم افزارهای ساده استفاده کنیم تا بتوانیم مهارت های کد نویسی خودمان را تقویت کنیم. خب حالا نرم افزار Notepad را نصب کنید و کد زیر را در آن بنویسید. (کپی هم میتوانید بکنید اما اگر تصمیم به یادگیری دارید بنویسید 😊)
body{
background-color: blue;
color: white;
}
p{
color: yellow;
}
در این مرحله باید فایل ایجاد شده را ذخیره کنید. از مسیر File بروی گزینه Save یا Save as کلیک کنید.
در مرحله ی بعد باید پسوند فایلی که ذخیره کرده اید را تغییر دهید. چون قرار است یک فایل CSS داشته باشیم باید پسوند آن css. باشد.
خب در حال حاضر شما یک فایل CSS دارید.همانطور که مشاهده میکنید با تغییر پسوند آیکون فایل نیز تغییر کرد و از حالت متن خارج شده و به CSS تغییر پیدا کرده است.
در ابتدا باید این نرم افزار را دانلود کنید. برای این کار وارد سایت www.notepad-plus-plus.org شوید و دانلود را انجام دهید. بعد از نصب و اجرای این نرم افزار, به صورت پیش فرض یک صفحه ی خالی ایجاد می شود که می توانید از آن استفاده کنید. اما برای ایجاد یک فایل جدید از منوی File بروی گزینه New کلیک کنید.
در فایل جدید ایجاد شده دستورات مورد نظر را کپی یا تایپ کنید. در پایان برای ذخیره وارد منوی file شوید و save یا save as را انتخاب کنید.
پنجره ای که در این مرحله برای شما باز میشود دارای گزینه ی انتخاب فرمت فایل است. فرمت css. را انتخاب کنید و دکمه ی ذخیره ی نهایی را بزنید. فایل شما ایجاد و سیو شد.
در ادامه به معرفی برخی از نرم افزارهای ویرایشگر کد می پردازیم.
++Notepad یک ویرایشگر کد رایگان در سیستم عامل های ویندوز است که از چندین زبان برنامه نویسی پشتیبانی می کند این نرم افزار ساده است اما سرعت اجرایی بالایی دارد و کاربر پسند است .
++Notepad دارای قابلیت هایی مانند مشخص نمودن syntaxها ، تفكیك کدها و بلوک بندی آن ها، تكمیل خودكار كدها، ویرایش همزمان چند فایل ، قابلیت Drag & Drop فایل ها و اسناد ، قابلیت جستجوی كامل و … است.
Komodo یک محیط برنامه نویسی که از زبان های مختلف از جمله پایتون ، php ، جاوااسکریپت ، پرل ، روبی و … پشتیبانی می کند همچنین در آن می توانیم فایل های HTML و CSS خود را ایجاد کنیم.
به کمک این نرم افزار می توانید کدها را ویرایش کنید و آن را تست کنید و چنان که دارای اشکالی بود از طریق دیباگرهای Remote و Local به سرعت آن را رفع کنید. komodo یک نرم افزار کامل است و بدون نیاز به نرم افزارهای دیگر می توان با آن به توسعه ی پروژه ها پرداخت زیرا این محصول تمامی امکاناتی چون فایل های پروژه ای، کنترل کدهای اصلی، Mirror و Publishing را با هم و یک جا گردآوری نموده است.
محیط برنامه نویسی که برای توسعه ی نرم افزارهای تحت وب و مبتنی بر فضای ابری ، طراحی و ایجاد اپلیکیشن ها ایجاد شده است. این نرم افزار دارای ابزارهای کاربردی و کارآمدی است همچنین ویژگی ها به روز و جامعی را دارا می باشد. یکی از ویژگی هایی که این نرم افزار دارد قابلیت کنترل کدها توسط گیت است که با استفاده از آن می توان برنامه ها را ایجاد کرد ، توسعه داد و تست کرد.
Visual Studio Code یک ویرایشگر کد منبع است که می تواند با انواع زبان های برنامه نویسی از جمله جاوا ، جاوا اسکریپت ، Go ، Node.js ، پایتون و ++C استفاده شود. توسط مایکروسافت برای ویندوز ، لینوکس و macOS ساخته شده است. دارای ویژگی هایی شامل پشتیبانی از اشکال زدایی ، برجسته سازی سینتکس، تکمیل خودکار کد، قطعه ها ، بازسازی کدها و استفاده از سرویس Git است.
Brackets یک ویرایشگر متن سبک ، در عین حال قدرتمند و مدرن است که برای طراحان وب و توسعه دهندگان سمت کاربر طراحی شده است دارای رابط کاربر پسندی می باشد که در آن به ویرایش کدهای HTML ،CSS و جاوا اسکریپت می پردازند.به علاوه امکان مشاهده ی تغییرات صورت گرفته بدون بارگذاری مجدد (load) صفحه را می دهد.
Adobe Dreamweaver یک ویرایشگر کد قدرتمند و کاربردی برای توسعه و طراحی وب سایت است این نرم افزار برای سیستم عامل های macOS و Windows در دسترس است.
Adobe Dreamweaver با ابزارهای بسیاری همراه است که توسعه دهندگان را قادر می سازد با استفاده از زبانهای مختلف وب سایت های پویایی ایجاد کنند. آنها همچنین می توانند محصولات نهایی خود را در هر مرورگری و روی هر دستگاهی به زیبایی نشان دهند.
✌😊🚀از بقیه ی جلسات آموزشی HTML و CSS جا نمونید.✌😊🚀
سلام
فک کنم نرم افزار bracket به این شکل نوشته میشه
ولی شما نوشتید brocket
ممنونم اصلاح شد