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

طراحی حرفه ای سایت وب سازان شمال در بابل با پشتیبانی 24 ساعته و سئو بالا با متد gtmetrix

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

طراحی حرفه ای سایت وب سازان شمال در بابل با پشتیبانی 24 ساعته و سئو بالا با متد gtmetrix

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

بدون شک، برنامه نویسی یکی از مهم‌ترین مهارت‌هایی است که امروزه نه تنها برای فارغ التحصیلان و دانشجویان رشته مهندسی کامپیوتر، بلکه برای سایر رشته‌ها و زمینه‌ها کاربرد مهمی دارد .

مبانی CSS

پنجشنبه, ۱۵ آذر ۱۳۹۷، ۰۷:۰۰ ق.ظ

ابتدا اجازه دهید برخی از اصول اولیه CSS را بررسی کنیم. در یک کد سایت، CSS در کنار هم با HTML کار می کند تا سایت را ساختار و سبک استاتیک آن را به دست دهد. در حالی که HTML تعریف می کند چه عناصری بر روی یک صفحه است، CSS تعریف می کند که چگونه این عناصر HTML ظاهر می شوند. به عنوان مثال، اگر تگ های HTML یک بخش از متن را به عنوان یک <header> صفحه نشان می دهد، استفاده از CSS به یک رایانه می گوید که همه چیز با نام <header> در آن وبسایت با یک سبک مشخص ظاهر می شود، مانند فونت آبی پررنگ.


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


جنبه "آبشار" نیز کلیدی است. ذخیره فایل ها به عنوان صفحات آبشار، اجازه می دهد تا توسعه دهندگان به طور جهانی برای طراحی چند صفحه در یک بار به روز رسانی. چرا این مهم است؟ تصور کنید سعی کنید کد را به صورت جداگانه برای هر صفحهای از یک صفحه 1000 صفحه اضافه کنید و کد فونت و رنگ را برای هر صفحه تکمیل کنید. CSS این پروسه را به یک پرونده لایه ای که به صورت خارجی مرتبط است، ساده می کند.


بنابراین، چه چیزی با CSS3 جدید است؟


CSS3 آخرین استاندارد برای زبان CSS است که از سال 2005 در حال توسعه است. این نسخه با نسخههای قدیمیتر CSS سازگار است و ویژگیهای جدیدی دارد که با استفاده از قابلیتهای CSS2 پیشرفت کرده و برخی ویژگیهای CSS2 را بهبود میبخشد. CSS3 همچنین تعدادی از نگرانی های مربوط به توسعه تلفن همراه را مورد توجه قرار داده است، حسابداری برای طراحی پاسخگو و ساخت مسائل ناشی از ناسازگاری Adobe Flash در دستگاه های تلفن همراه. در ترکیب با جاوا اسکریپت، CSS3 دارای بسیاری از قابلیت های Flash now-animation و interactivity-wise است.


در اینجا هفت چیز مهم است که CSS3 را از پیشینیان خود تمایز می دهد.


1. ذهنیت اولیه موبایل


CSS3 ذاتا طراحی پاسخگو را پشتیبانی می کند و مجهز به پردازش درخواست های رسانه ای است. پرس و جو رسانه ها تماس گرفته شده توسط کد برای تعیین اینکه چه دستگاه و صفحه نمایش اندازه یک کاربر در حال مشاهده سایت در. این قابلیت جدید طراحی پاسخگو را به مجله CSS اضافه می کند.


2. کد مبتنی بر ماژول


یکی از بزرگترین تحولات این است که CSS3 به "ماژولها" تقسیم شده است. همه مشخصات CSS قدیمی به نسخه جدید مهاجرت شده و به قطعات کوچک تقسیم شده اند (با تعدادی از ماژول های جدید نیز اضافه شده).


دیگر ماژول های CSS3 عبارتند از:


Selectors: توسعه دهندگان می توانند عناصر را براساس نام، کلاس، نوع، ویژگی و موارد دیگر ویرایش کنند.

ماژول جعبه مدل: این رویکردی را برای ایجاد سازگاری بین عناصر HTML در یک صفحه یا «جعبه ها» توصیف می کند. با استفاده از حاشیه ها، مرزها و محفظه ها به محتوی جعبه، توسعه دهندگان می توانند حوزهء اطراف عنصر را پاک کنند، مرزها را به آن بیفزایند و بیشتر.

پس زمینه ها و مرزها: با کنترل بهتر تدابیر مرزهای عنصر و زمینه های صفحه، CSS3 همچنین گوشه های گرد را در جعبه ها و سایه ها می کند. قبل از CSS3، پس زمینه باید با تصاویر به دست آمده، که به اندازه فایل و زمان بارگذاری صفحه اضافه شده است.

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

3. پشتیبانی فونت وب اجازه می دهد طراحان به راه بیش از فقط "وب ایمن" فونت


قبل از CSS3، طراحان تنها می توانستند فونت های امن وب را برای اطمینان 100٪ مطمئن شوند که فونت ها همیشه بر روی دستگاه های مختلف نمایش داده می شوند. فونت های ایمن وب، فونت هایی هستند که هر یک از آنها نصب و شناسایی شده اند. اگر یک طراح از فونت های معمول مانند Times New Roman یا Arial استفاده کند، می توانند تا حد زیادی تضمین کنند که هر کاربر سایت خود را همانطور که در نظر گرفته شده است را مشاهده کند. با این حال، اگر آنها می خواستند از یک فونت نادر تر استفاده کنند، اگر از یک دستگاه کاربر پشتیبانی نمی شد، به طور پیش فرض به فونت ایمن وب باز می گردد.


طراحان هم اکنون می توانند فونت های وب را در CSS3، فونت های مخصوص مانند فونت های موجود در Google Fonts و Typecast اجرا کنند. این فونت ها می توانند بر روی یک سرور دانلود شوند و از طریق کد CSS اجرا شوند یا از طریق یک اسکریپت به طور مستقیم از منبع آن دسترسی پیدا می کنند که درست درون کد CSS نامیده می شود. این یک دنیای امکانات برای طراحان را باز کرده است.


4. آن را قادر می سازد توسعه سریع و بار بار سریع تر


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


5. ایجاد تغییرات 2D و 3D، انیمیشن ها، و انتقال


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

6. رنگ های جدید و جلوه های تصویری


CSS3 از رنگ های جدید (RGBA، HSL، HSLA) و رنگ های شیب دار پشتیبانی می کند و اجازه می دهد تا تنظیمات را به کدورت انجام دهند. پشتیبانی بزرگ از گوشه های تصویر گرد، یکی دیگر از ابزارهای بزرگ است که اثر زیادی را برای قالب بندی و کار فتوشاپ برای دستیابی به آن ها پیش می آورد.


7. جعبه اندازه گیری ثابت برخی از مشکلات هماهنگ کننده آزار دهنده است


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

  • فاطمه علیزاده

<header>

Adobe Flash

CSS

CSS3

HTML

سایت

نظرات  (۰)

هيچ نظري هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی