آموزش ویرایش css-styles
چگونه CSS را ویرایش کنیم؟
حتما موقع طراحی وب سایت جوملاییتون خیلی سوال در مورد CSS style براتون پیش اومده که اینها کجا هستند و چطوری میتوان اینها رو ادیت کرد؟؟؟؟
ویرایش سی اس اس با افزونه مرورگر فایرفاکس
آشنایی با Addons در مرورگر فایرفاکس و انواع افزونه برای طراحی وب
مرورگر فایرفاکس یه ابزاری رو برای طراحان وب ارائه داده است که می تواند خیلی مفید واقع شود و کمک بزرگی به دولوپرها باشد. که نام این افزونه ها به نام Web Developer Extension است که توسط کریس پدریک به عنوان یک ابزار پشتیبان معرفی شد.
شما خیلی راحت میتونید این افزونه رو روی مرورگر فایرفاکستون نصب کنید و زمانی که از آن نمی خواهید استفاده کنید اونو مخفی کنید. در این میان ابزارهای زیادی برای ولیدیشن ها ، بروکن لینکها و … برای وب دولوپرها وجود دارد . این ابزارها شما را به دنیای CSS ها وارد میکند.
-
ادیت کردن CSS، مشاهده CSS، اضافه کردن یوزر استایل شیت User Syle Sheet، نمایش اطلاعات استایل ها و …
ابزاری که من میخوام روش فوکوس کنم ابزاری است که میتونید با اون اطلاعات استایلها رو مشاهده کنید. ممکن است تا کنون هیچ تجربه ای در رابطه با جدول CSS نداشته باشید .
moduletable پایه ای است برای CSS template وب سایت شما و شما میتوانید پس زمینه، هدر رو در ماژولهای خاص روی تمپلیتتان را تغییر بدید .
بعد از نصب کردن ابزار Web Development extension برای مشاهده آن باید از کلید های ترکیبی Ctrl+Shift+Y استفاده کنید. که با این کار این ابزار شبیه یک خط کش ظاهر میشود که میتونید اونو به هر جایی از قالبتون حرکت بدید.
خوب حالا بگید که دوست دارید چه چیزی رو تغییر بدید هدر و یا سایز ماژول رو که تا حالا هیچ طوری نمیتونستید تغییر بدید با نگه داشتن این خط کش روی محل مورد نظر مستطیلی باز میشود که اطلاعات کدی این ماژول را در اختیار شما قرار میدهد شبیه عکس زیر:
آموزش ویرایش CSS ما را در همین مطلب دنبال کنید
حتما اینو خوب میدونید که “container” اطلاعات مربوط به جدول “table.moduletable.th” نگه میداره . برای دسترسی به این جدول شما میتونید به دایرکتوری اون برید و فایلو توسط برنامه های ادیت متن مثل notepad و یا Dreamweaver ویرایش کنید. خوب تغییر بدید سایز ، رنگ ، طول و عرض ماژول مورد نظرتون رو و سپس تغییرات رو ذخیره کنید.
استفاده از ابزار Container برای ویرایش سی اس اس
خوب حالا برای نصب این ابزار مراحل زیر را انجام بدید:
1- اگه فایرفاکس رو ندارید حتما دانلود کنید.
2- موقع نصب “custom install” را انتخاب کنید و تیک گزینه development tools are tagged! رو بزنید.
3- FF را برای خودتان نصب کنید.
4-وارد گزینه FF > Tools > Extensions > get more extensions > developers tools شوید صفحه هفت آخرین صفحه web developer 1.0.2 را نصب کنید.
5- مرورگر را ببندید و دوباره باز کنید و برید داخل CSS آخرین تنظیمات View Style Information و Ctrl+Shift+Y را برای شورت کات کی فعال کنید.
هرگز فراموش نکنید که تمام تنظیمات این اکستنشن رو حتما نگاه کنید. شما خیلی چیزها میتونید با مطالعه در مورد این ابزار متوجه شوید .
امیدوارم این آموزش هم مورد توجه قرار گرفته باشد.
