سلام مهمان گرامی ، خوش آمدید. آیا این نخستین بازدید شماست ؟ وارد شده یا عضو شوید

انجمن های تخصصی علوم رایانه و هنرهای دیجیتال



مطالب آموزشی در طراحی سایت
زمان کنونی: 25-11-2017، 03:31 PM
کاربرانِ درحال بازدید از این موضوع: 1 مهمان
نویسنده: SaaRaa
آخرین ارسال: SaaRaa
پاسخ 5
بازدید 1052
محبوب کنید:

امتیاز موضوع:
  • 0 رأی - میانگین امتیازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
مطالب آموزشی در طراحی سایت
#1
مخفی کردن عناصر وب با CSS

گاهی مواقع در *شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید* و کدنویسی HTML و CSS ممکن است بنا به دلایل مختلف نیاز به این داشته باشیم که مواردی را از چشم کاربران عادی پنهان و مخفی کنیم، به طور مثال شرایطی پیش می آید که بخواهیم بین کاربران عادی و ربات ها تفکیک قائل شویم، یعنی به طور مثال یک فیلد را فقط به ربات ها نشان دهیم، در چنین شرایطی برخی ترجیح می دهند از برنامه نویسی سمت سرور مانند PHP یا ASP در این گونه موارد استفاده کنند و برخی نیز به جاوا اسکریپت متوصل می شوند، اما در کنار همه این روش ها که در جای خود کاربرد دارند، شاید یکی از بهترین و کاربردی ترین راه ها، استفاده از قابلیت های CSS باشد که در ادامه آموزش به آنها اشاره می کنیم.

چرا عناصر را در صفحه وب پنهان می کنیم؟

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

ابتدایی ترین روشی مخفی کردن عناصر در صفحات وب با CSS استفاده از خاصیت display و با مقادیر none است، به این صورت لایه یا بلاک مورد نظر با وجود اینکه در صفحه وجود دارد، ولی از چشم کاربران عادی (در شرایط معمول و با فعال بودن استایل CSS) پنهان است، برای استفاده از این خاصیت کافی است آن را به صورت یک کلاس یا آی دی و یا به صورت استایل خطی به عنصر مورد نظر نسبت دهیم.
<style type="text/css">
.hidden{
display:none;
}
</style>
نکته: بعضا مشاهده می شود که برای مخفی کردن لینک ها یا به اصطلاح فریب دادن ربات های جستجوگر مانند ربات گوگل، از این خاصیت استفاده می شود، به یاد داشته باشیم ربات ها و از جمله ربات گوگل بر اساس الگوریتم های خود این گونه موارد را شناسایی کرده و در صورت تکرار ممکن است سایت یا وبلاگ ما را در لیست سیاه خود قرار داده یا حداقل رتبه آن را کاهش دهند، لذا استفاده از display:none باید با دقت و به تعداد خیلی کم انجام شود.
استفاده از visibility:hidden

یکی دیگر از خاصیت های CSS که در مخفی کردن عناصر در صفحات وب کاربرد دارد، خاصیت visibility:hidden است، البته عملکرد visibility:hidden تا حدود زیادی مشابه display:none است، با این تفاوت که visibility:hidden اگرچه عنصر را در صفحه مخفی می کند، اما بر خلاف display:none اثر آن را به طور کامل از بین نمی برد، به عنوان مثال اگر یک بلاک با ارتفاع 200 پیکسل را با display:none مخفی کنیم، فضای 200 پیکسلی اشغال شده نیز از بین می رود، اما اگر همین کار را با visibility:hidden انجام دهیم، بلاک مخفی می شود، بدون اینکه 200 پیکسل فضای اشغال شده از بین برود.
<style type="text/css">
#visibility{
visibility:hidden;
}
</style>
استفاده از position:absolute و left

تکنیک هایی که در بالا اشاره شد اگرچه روش هایی استاندارد و در جای خود قابل استفاده هستند، اما کاربرد زیاد آنها در یک صفحه به لحاظ سئو (SEO) یا بهینه سازی موتورهای جستجو (Search Engine Optimization) توصیه نمی شود، از این رو طراحان و برنامه نویسان از روش دیگری برای مخفی نمودن عناصر HTML در صفحات وب استفاده می کنند، در این روش ابتدا با استفاده از خاصیت position:absolute عنصر را به حالت شناور در آورده و سپس با کمک left و در نظر گرفتن یک مقدار منفی برای آن، عنصر را از دید کاربران مخفی می کنند بدون اینکه تاثیری در ظاهر صفحه ایجاد شود.
<style type="text/css">
.accessible{
position:absolute;
left:-9999px;
top:auto;
width:5px;
height:5px;
overflow:hidden;
}
</style>
توضیح:
- مقادیر absolute برای خاصیت position باعث شناور شدن بلاک یا عنصر مورد نظر می شود.
- مقدار منفی برای left، عنصر را به بیرون از دید کاربر و خارج از صفحه نمایش هدایت می کند.
- مقادیر width و height می توانند صفر در نظر گرفته شوند، اما برای اطمینان از اینکه ربات هایی مانند ربات گوگل محتوای بلاک را پردازش کنند، بهتر است مقداری بیش از صفر یا 1 برای ارتفاع و عرض در نظر گرفته شود.
- خاصیت overflow با مقادیر hidden باعث می شود که محتوای مازاد بر فضای بلاک، مخفی شود.
نکته: وقتی از مقادیر منفی برای خاصیت left استفاده می کنیم، باید در نظر داشته باشیم که چینش (direction) صفحه در تگ body به صورت پیش فرض یا چپ به راست (ltr) باشد، در غیر این صورت (یعنی اگر تگ body چینش rtl یا راست به چپ داشته باشد) در صفحه اسکرول افقی خواهیم داشت، در این گونه موارد به جای left باید از right و مقادیر منفی برای کلاس مخفی استفاده کنیم یا اینکه چینش را در تگ body به حالت ltr تغییر دهیم و یا اگر ناچار به استفاده از چینش rtl هستیم، آن را به بلاک های زیرمجموعه نسبت دهیم نه به تگ body.
پاسخ
#2
<html>
<body>
The content of the body element is displayed in your browser.
</body>
</html>
اين ساده ترين صفحه اي است كه ميشه ساخت.
كد بالا را در اديتور خود paste كنيد و با پسوند htm ذخيره كنيد. مثلا hello.htm .
اگر اديتور فعلا نداريد از notepad خود ويندوز استفاده كنيد.
حالا شما يك صفحه ساخته ايد كه مي تواند در اينترنت يك سايت باشد.
پاسخ
#3
استايل (CSS) چيست؟

- CSS مخفف کلمه Cascading Style Sheets ميباشند.
- اولين ورژن استايلها در سال ۱۹۹۶ ساخته شد. که اولين ورژن آن CSS1 بود.
- ديگر وژن آن CSS2 مي باشد که در سال ۱۹۹۸ ساخته شد که بيشتر براي ويرايش صفحات، نحوه نمايشها تگها و ... کاربرد دارد.
- فايل استايلها با فرمت CSS ذخيره ميشوند.

انواع استايلها:

۱. Inline Style: اين نوع استايل در داخل تگهاي HTML به كار گرفته ميشوند، و اين استايل فقط بروي همان تگ به خصوص تاثير خواهد گذاشت و به صورت زير نوشته خواهد شد.

HTML:

<tag style="Style Declarations">

Example:
<p style="font-family: Tahoma">This is a paragraph</p>

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

۲. Embedded or Global Style: در اين نوع، استايل نوشته شده در تمامي صفحه تاثير خواهد گذاشت، اينرا بين دو تگ (<head></head>) به صورت زير نوشته خواهد شد.



HTML:

<style>
<!--
Style Declaration
-->
</style>

Example:
<head>
<style type="text/css">
<!--
p { color: red; text-align: left; font-size: 8pt }
-->
</style>
</head>

اين نوع حالت از تغييرات تعريف شده بروي تمامي تگها پاراگراف اعمال خواهد شد که رنگ متن: قرمز، جهت متن: چپ، و اندازه فونت ۸ پوينت خواهد بود. توجه داشته باشيد در اين مثال سه حالت مختلف يک استايل را براي تگ پاراگراف تعريف کرديم که با استفاده از (زبون درازی حالتهاي مختلف آن از هم جدا شدند.
اگر بخواهيد اين حالت نوشته شده را براي چند تگ ديگر اعمال کنيد مي توانيد تگها را بااستفاده از کاما (,) از هم جدا کنيد براي مثال:


HTML:


h1, h2, h3, h4 { color: gold; font-family: sans-serif }

۳. Linked or External style sheet: نوع آخر هم معروف به استايلهاي خارجي هستند كه به صورت لينك فايل استايل را به صفحات خود لينك ميدهيد. فايلهاي استايل با فرمت CSS ذخيره ميشوند و به صورت زير به صفحات لينك داده ميشود.

HTML:

<link href="url" rel="relation type" type="link type">

Example:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


در اين نوع از استايلها بعد از اينکه فايل استايل خود را آماده کرديد آنرا با فرمت CSS ذخيره کرده و آنرا همانند بالا فايل استايل را به قالب لينک مي کنيم. براي راحت بود در کار مي توانيد ابتدا استايلها را به صورت Internal استفاده کرده و بعد از اينکه کارتان تمام شد کدهاي نوشته شده بين دو تگ (<style></style>) را در نت پد کپي کرده و آنرا با فرمت CSS دخيره کرده و سپس با استفاده از فرمول بالا آن فايل را به قالب لينک دهيد.
يکي از مزيتهاي اين نوع استايل اين ميباشد که مي توانيد با داشتن يک فايل استايل براي چندين صفحه استفاده کنيد و از ديگر مزيت هاي آن با اين کار کدهاي قالب را به چند فايل تقسيم کرده و قالب را منظم تر ميشود.
پاسخ
#4
از CSS3 و LESS چه می دانید؟

CSS3 شامل حجم تازه و شگفت انگیزی از عملکردها و خصیصه هایی مانند متن های سایه دار text-shadow, BOX-sizing, شفافیت یا opacity، پس زمینه های چند تایی یا (multiple-background)، حاشیه های هلالی یا (border-radius) و عکس هایی که به حاشیه تبدیل می شوند (border-image) می باشد. عملکرد هایی که برای طراحان وب تقریبا یک رویا بود تا بتوانند بدون استفاده از JQuery و Photoshop آنها را خلق نمایند.
Wikipedia این طور CSS3 را تعریف می نماید:
"به جای تعریف خصیصه ها در یک مفهوم بزرگ و انفرادی (آنچه که در Css2 وجود داشت) ، Css3 به چندین ملاک مجزا که به آنها medules گفته می شود، تقسیم می گردد. هر medule خود همان خصیصه های موجود در CSS2 است که ظرفیت هایی به آنها اضافه گریده و کار طراحان وب را در طراحی ساده تر نموده است. اما در مجموع همچنان سازگار با Css2 است و طراحان مجبور به تغییر عمده طراحی خود در استفاده از Css3 نمی باشند."
فواید css3 :
در مواردی که گزینه هایی وجود دارد که میتوانید از انیمیشن های جاوااسکریپت هم استفاده کنید شما باید به طور معمول به خاطر دلایل زیر از css3 استفاده کنید:
1-انتقال های css3 توسط مرورگرها به صورت محلی به کار گرفته میشوند و همیشه سریعتر از انیمیشن های جاوااسکریپت هستند.
2-انیمیشن های جاوااسکریپت بدون شک کدهای سختری دارند.پیچیدگی های افزایش یا کاهش سرعت اجرای یک انیمیشن را در زمان اجرا در نظر بگیرید حتی اگر معادله آن را بلد باشید شما به چندین خط کد و انجام تست های سخت نیاز دارید.در صورتی که در css3 با یک property ساده اینکار به راحتی انجام میپذیرد.
کفپوش اپوکسی| اجرای کفپوش اپوکسی| ملات ضد اسید فوران|
3-بعضی از افکت ها در جاوااسکریپت به تنهایی انجام پذیر نیستند.مانند چرخش یک المان در دو یا سه جهت
اولین پیش نویس Css3 در ژوئن 1999، منتشر گردید که در مارچ 2011 تحت چند medule منتشر و به کار گرفته شد.
یک انتقال (Transition) دقیقا چیست؟ :
یک انتقال یکی از ساده ترین انیمیشن های css3 است.و افکتی را که بین دو وضعیت ایجاد میشود تعریف میکند
محرک ها (Triggers) :
یک انتقال(transition) باید با بعضی راه ها تحریک شود تاافکت متحرکی را که نهایتا ما را به وضعیت نهایی میرساند ، شروع کند.اینکار در css میتواند به تنهایی با شبه سلکتورهایی نظیر hover یا :focus انجام پذیرد.شما همچنین میتوانید با تغییر یکی یا بیشتر از یکی از ویژگی های استایل در جاوااسکریپت،انیمیشن را برای شروع تحریک نمایید.

وضعیت ها:
یک انتقال یک نقطه شروع نیاز دارد.(وضعیت اولیه)و هم چنین یک وضعیت پایانی (وضعیت فعال).به طور مثال ما میتوانیم یک المان دقیقا در پوزیشن صفر پیکسل و به رنگ آبی داشته باشیم.که حرکت میکند و در نقطه پایانی در پوزیشن 100 پیکسل قرار میگیرد و به رنگ قرمز در می آید.
یک انتقال css3 میتواند بدون اینکه نیاز به فریم های جداگانه داشته باشد بین این دو وضعیت به نرمی حرکت نماید.
امروزه با وجود اینکه CSS به صورت ساده و بدون وضعیت است ولی اونو دوست داریم اما ابزارهای هستند که باعث میشن اونو بیشتر دوست داشته باشیم یکی از اون ابزارها LESS است که امکاناتی رو بوجود میاره که بتونیم هر کار سختی رو به آسانی و با سرعت انجام بدیم.

LESS چیست؟
LESS یک ابزار کوچک است که قابلیت‌های همچون متغیرها ، عملگرها ، Mixin ها و دستورات تودرتو را برای CSS فراهم می‌کند به این معنی که می توانید کدهای CSS رو بسیار شبیه به زبان های همچون PHP بنویسید.
LESS دارای دو نوع پیاده سازی است:
سمت کاربر
سمت سرور
پیاده سازی سمت سرور بوسیله Node.js انجام شده است و پیاده سازی سمت کاربر بوسیله جاوا اسکریپت انجام شده که ما در اینجا نحوه استفاده از پیاده سازی سمت کاربر را بررسی میکنیم.
نحوه استفاده از LESS.js:
برخلاف پیاده سازی سمت سرور استفاده از پیاده سازی سمت کاربر بسیار آسان است تنها کافی است که فایل جاوا اسکریپت و فایل استایل مخصوص را به صفحه HTML بیفزایید ، یعنی دو خط زیر:
<script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link rel="stylesheet" href="style.less" title="main style" type="text/less">

در خط دوم به دلیل سرعت بارگذاری بالاتر و مسائل کشینگ از نسخه اسکریپت موجود بر روی هاست های گوگل استفاده کردیم ولی شما می توانید این اسکریپت را دانلود و بر روی هاست خودتان نیز قرار دهید.
باید در هنگام ارتباط دادن فایل استایل به این نکته توجه داشته باشید که در اینجا به جای استفاده از rel="stylesheet/css"‎می بایست از rel="stylesheet/less"‎ استفاده کنید همچنین حتما باید لینک معرفی فایل استایل قبل از معرفی فایل اسکریپت LESS آمده باشد.

قابلیت های کلیدی LESS:
در اینجا به شیرین ترین قسمت رسیده‌ایم یعنی نوشتن کدهای LESS. در ادامه خواهید دید که کدهای LESS در عین قدرت زیاد بسیار آسان و ساده است. همانطور که پیش تر به آن اشاره کردیم LESS به طور کلی دارای ویژگی های کلیدی زیر است.

دستورات تو در تو – Nested Rules
توابع – Functions
الحاق متن
متغیرها – Variables
عملگرها – Operators
میکسین ها – Mixins
و…!

در ادامه به بررسی نحوه و قوانین استفاده از هر یک از این ویزگی ها می پردازیم.
متغیرها :

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

/*
main-color : #156DB3 - main color for highlight
text-color : #444444
...
*/
H1,H2,H3,H4,H5,H6 {
color: #156DB3
}
p {
color: #444444
}

به کد CSS بالا دقت کنید در آن کد می بایست مقدار رنگ را به خاطر داشته باشیم و همچنین برای تغییر مقدار رنگ می بایست مقدار آن را به صورت دستی در تمامی دستورات CSS تغییر دهیم در صورتی که بوسیله متغیرها در LESS می توان آن‌ها را در یک متغیر قرار داد و آن متغیر را در کل فایل استایل استفاده کرد و برای تغییر رنگ تنها مقدار آن متغیر را تغییر داد.
@Main-color : #156DB3; /* main color for highlight */
@text-color : #444444;
H1,H2,H3,H4,H5,H6 {
color: @Main-color
}
p {
color: @text-color
}

Cascading Style Sheets (CSS) ها استاندارهای مدرن برای طراحی وب سایت هستند که تا کنون در سه نسخه عرضه شده‌اند و در هر نسخه رویدادهای جدیدی را معرفی کرده‎اند. اینکه چطور بوجود آمدند و چطور مورد استفاده قرار گرفته‎اند به اندازه کافی در مباحث گوناگون دیگر مورد بررسی قرار گرفته است
اما باید بدانیم و بپذیریم که نسخه سه تمام قابلیت‎ها و توانایی‎های دو نسخه قبل را پوشش می‎دهد و رویه‎ای جدید در طراحی سایت بوجود می‎آورد. CSS3 فرزندی جدید در خانواده Stylesheet محسوب می‌شود. امکانات جدید و هیجان انگیزی ارائه می‌دهد.
روش شما در طراحی سبک و سیاق صفحات را تغییر می‌دهد و همچنین اجازه استفاده از لایه‌های بیشتر به سبک‌های گوناگون‌تر برای مناسبتهای مختلف در تحقق ایده ها را می‌دهد.

نسخه‌ای که با پیدایشش، خصوصیت‌های جدیدی را به نسخه های قبل اضافه کرده است و در جاهایی نیز اشکالات قبلی را بر طرف نموده است.
این خصوصیت‌ها مربوط به حاشیه‌ها (Border)، پس زمینه‌ها (Background)، رنگ‌ها (Color)، افکت‌های متنی (Text Effects)، رابط‌های کاربری (User Interface)، گزینشگرها (Selector) و همچنین تغییرات بسیار کم اما محسوس در بعضی ماژول ها نظیر استفاده از هر فونت در طراحی یا چند لایه‌ای بودن صفحات و از این قبیل می‌شود. برای دیدن کاربرد هر کدام می‌توانید به یکی از مراجع اصلی CSS3 یعنی اینجا مراجعه کنید که به اندازه کافی با مثال توضیح داده شده است.
CSS3 شامل حجم تازه و شگفت انگیزی از عملکردها و خصیصه هایی مانند متن های سایه دار text-shadow, BOX-sizing, شفافیت یا opacity، پس زمینه های چند تایی یا (multiple-background)، حاشیه های هلالی یا (border-radius) و عکس هایی که به حاشیه تبدیل می شوند (border-image) می باشد. عملکرد هایی که برای طراحان وب تقریبا یک رویا بود تا بتوانند بدون استفاده از JQuery و Photoshop آنها را خلق نمایند.

Wikipedia این طور CSS3 را تعریف می نماید:

"به جای تعریف خصیصه ها در یک مفهوم بزرگ و انفرادی (آنچه که در Css2 وجود داشت) ، Css3 به چندین ملاک مجزا که به آنها medules گفته می شود، تقسیم می گردد. هر medule خود همان خصیصه های موجود در CSS2 است که ظرفیت هایی به آنها اضافه گریده و کار طراحان وب را در طراحی ساده تر نموده است. اما در مجموع همچنان سازگار با Css2 است و طراحان مجبور به تغییر عمده طراحی خود در استفاده از Css3 نمی باشند."

فواید css3 :

در مواردی که گزینه هایی وجود دارد که میتوانید از انیمیشن های جاوااسکریپت هم استفاده کنید شما باید به طور معمول به خاطر دلایل زیر از css3 استفاده کنید:

1-انتقال های css3 توسط مرورگرها به صورت محلی به کار گرفته میشوند و همیشه سریعتر از انیمیشن های جاوااسکریپت هستند.
2-انیمیشن های جاوااسکریپت بدون شک کدهای سختری دارند.پیچیدگی های افزایش یا کاهش سرعت اجرای یک انیمیشن را در زمان اجرا در نظر بگیرید حتی اگر معادله آن را بلد باشید شما به چندین خط کد و انجام تست های سخت نیاز دارید.در صورتی که در css3 با یک property ساده اینکار به راحتی انجام میپذیرد.
3-بعضی از افکت ها در جاوااسکریپت به تنهایی انجام پذیر نیستند.مانند چرخش یک المان در دو یا سه جهت


اولین پیش نویس Css3 در ژوئن 1999، منتشر گردید که در مارچ 2011 تحت چند medule منتشر و به کار گرفته شد.


یک انتقال (Transition) دقیقا چیست؟ :

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

محرک ها (Triggers) :
یک انتقال(transition) باید با بعضی راه ها تحریک شود تاافکت متحرکی را که نهایتا ما را به وضعیت نهایی میرساند ، شروع کند.اینکار در css میتواند به تنهایی با شبه سلکتورهایی نظیر hover یا :focus انجام پذیرد.شما همچنین میتوانید با تغییر یکی یا بیشتر از یکی از ویژگی های استایل در جاوااسکریپت،انیمیشن را برای شروع تحریک نمایید.
وضعیت ها:
یک انتقال یک نقطه شروع نیاز دارد.(وضعیت اولیه)و هم چنین یک وضعیت پایانی (وضعیت فعال).به طور مثال ما میتوانیم یک المان دقیقا در پوزیشن صفر پیکسل و به رنگ آبی داشته باشیم.که حرکت میکند و در نقطه پایانی در پوزیشن 100 پیکسل قرار میگیرد و به رنگ قرمز در می آید.
یک انتقال css3 میتواند بدون اینکه نیاز به فریم های جداگانه داشته باشد بین این دو وضعیت به نرمی حرکت نماید.


امروزه با وجود اینکه CSS به صورت ساده و بدون وضعیت است ولی اونو دوست داریم اما ابزارهای هستند که باعث میشن اونو بیشتر دوست داشته باشیم یکی از اون ابزارها LESS است که امکاناتی رو بوجود میاره که بتونیم هر کار سختی رو به آسانی و با سرعت انجام بدیم.
LESS چیست؟

LESS یک ابزار کوچک است که قابلیت‌های همچون متغیرها ، عملگرها ، Mixin ها و دستورات تودرتو را برای CSS فراهم می‌کند به این معنی که می توانید کدهای CSS رو بسیار شبیه به زبان های همچون PHP بنویسید.

LESS دارای دو نوع پیاده سازی است:
سمت کاربر
سمت سرور

پیاده سازی سمت سرور بوسیله Node.js انجام شده است و پیاده سازی سمت کاربر بوسیله جاوا اسکریپت انجام شده که ما در اینجا نحوه استفاده از پیاده سازی سمت کاربر را بررسی میکنیم.
نحوه استفاده از LESS.js

برخلاف پیاده سازی سمت سرور استفاده از پیاده سازی سمت کاربر بسیار آسان است تنها کافی است که فایل جاوا اسکریپت و فایل استایل مخصوص را به صفحه HTML بیفزایید ، یعنی دو خط زیر:
<script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link rel="stylesheet" href="style.less" title="main style" type="text/less">

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

باید در هنگام ارتباط دادن فایل استایل به این نکته توجه داشته باشید که در اینجا به جای استفاده از rel="stylesheet/css"‎می بایست از rel="stylesheet/less"‎ استفاده کنید همچنین حتما باید لینک معرفی فایل استایل قبل از معرفی فایل اسکریپت LESS آمده باشد.
قابلیت های کلیدی LESS

در اینجا به شیرین ترین قسمت رسیده‌ایم یعنی نوشتن کدهای LESS. در ادامه خواهید دید که کدهای LESS در عین قدرت زیاد بسیار آسان و ساده است. همانطور که پیش تر به آن اشاره کردیم LESS به طور کلی دارای ویژگی های کلیدی زیر است.
دستورات تو در تو – Nested Rules
توابع – Functions
الحاق متن

متغیرها – Variables
عملگرها – Operators
میکسین ها – Mixins

و…!

در ادامه به بررسی نحوه و قوانین استفاده از هر یک از این ویزگی ها می پردازیم.
متغیرها

متغیرها در LESS همانند متغیرها در PHP هستند. آنها را در یکجا تعریف و مقداری را برایشان تنظیم میکنیم سپس آنها را در قسمت های دیگر استفاده میکنیم. برای مثال من قبل از آشنایی با LESS برای اینکه مقدار رنگها را به خاطر داشته باشم و در صورت فراموشی هر بار به فایل طراحی مراجعه نکنم آنها را به صورت زیر در بالای فایل استایل به صورت کامنت قرار می دادم.
/*
main-color : #156DB3 - main color for highlight
text-color : #444444
...
*/
H1,H2,H3,H4,H5,H6 {
color: #156DB3
}
p {
color: #444444
}

به کد CSS بالا دقت کنید در آن کد می بایست مقدار رنگ را به خاطر داشته باشیم و همچنین برای تغییر مقدار رنگ می بایست مقدار آن را به صورت دستی در تمامی دستورات CSS تغییر دهیم در صورتی که بوسیله متغیرها در LESS می توان آن‌ها را در یک متغیر قرار داد و آن متغیر را در کل فایل استایل استفاده کرد و برای تغییر رنگ تنها مقدار آن متغیر را تغییر داد.
@Main-color : #156DB3; /* main color for highlight */
@text-color : #444444;
H1,H2,H3,H4,H5,H6 {
color: @Main-color
}
p {
color: @text-color
}
Cascading Style Sheets (CSS) ها استاندارهای مدرن برای طراحی وب سایت هستند که تا کنون در سه نسخه عرضه شده‌اند و در هر نسخه رویدادهای جدیدی را معرفی کرده‎اند. اینکه چطور بوجود آمدند و چطور مورد استفاده قرار گرفته‎اند به اندازه کافی در مباحث گوناگون دیگر مورد بررسی قرار گرفته است
اما باید بدانیم و بپذیریم که نسخه سه تمام قابلیت‎ها و توانایی‎های دو نسخه قبل را پوشش می‎دهد و رویه‎ای جدید در طراحی سایت بوجود می‎آورد. CSS3 فرزندی جدید در خانواده Stylesheet محسوب می‌شود. امکانات جدید و هیجان انگیزی ارائه می‌دهد.
روش شما در طراحی سبک و سیاق صفحات را تغییر می‌دهد و همچنین اجازه استفاده از لایه‌های بیشتر به سبک‌های گوناگون‌تر برای مناسبتهای مختلف در تحقق ایده ها را می‌دهد.
نسخه‌ای که با پیدایشش، خصوصیت‌های جدیدی را به نسخه های قبل اضافه کرده است و در جاهایی نیز اشکالات قبلی را بر طرف نموده است.
این خصوصیت‌ها مربوط به حاشیه‌ها (Border)، پس زمینه‌ها (Background)، رنگ‌ها (Color)، افکت‌های متنی (Text Effects)، رابط‌های کاربری (User Interface)، گزینشگرها (Selector) و همچنین تغییرات بسیار کم اما محسوس در بعضی ماژول ها نظیر استفاده از هر فونت در طراحی یا چند لایه‌ای بودن صفحات و از این قبیل می‌شود. برای دیدن کاربرد هر کدام می‌توانید به یکی از مراجع اصلی CSS3 یعنی اینجا مراجعه کنید که به اندازه کافی با مثال توضیح داده شده است.
پاسخ
#5
جدیدترین تکنولوژی طراحی سایت چیست؟
آیا تاکنون با این موضوع مواجه شده اید که وقتی با موبایل یا تبلت خود سایتی را مشاهده می کنید با صفحاتی روبرو میشوید که از لحاظ سایز و اندازه برای موبایل یا تبلت شما مناسب نیستند چنین سایتهایی از تکنولوژی رسپانسیو یا واکنشگرا بهره نمی برند ولی با تکنولوژی جدید طراحی سایت ریسپانسیو یا واکنش گرا این مشکلات برطرف میشود.

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

طراحی سایت باید با جدیدترین تکنولوژی طراحی سایت به صورت حرفه ای و کاملا داینامیک شامل پنل مدیریت ارائه گردد تا مدیر سایت بتواند مطالب و تصاویر و بخش های مختلف سایت را بروزرسانی نماید.

طراحی سایت با جدیدترین تکنولوژی ها و همچنین سرعت بود سایت و کاربر محور بودن آن تاثیر بسزایی در جذب مخاطب دارد.

آیا تکنولوژی جدید ریسپانسیو بودن طراحی سایت در رتبه سایت تاثیر دارد ؟

مسلما این قابلیت باعث می شود سایت شما در هر شرایطی در دسترس باشد و موجب ترافیک بیشتر برای سایت می شود که نتیجه آن ارتقاء رتبه وب سایت شما است . تکنولوژی ریسپانسیو بودن طراحی سایت یعنی قابلیت انعطاف پذیری سایت که هنگام لود صفحات با طول و عرض مختلف سایت با سرعت مناسب و بدون حذف موارد و اطلاعات ضروری صورت گیرد .

از دیگر موضوعاتی که در طراحی سایت و *شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید* با تکنولوژی های جدید باید رعایت شود استفاده از HTML۵ و CSS۳ در طراحی سایت است . از آنجایی که گوگل هم به استفاده از تکنولوژی های جدید در طراحی سایت تاکید دارد استفاده از تکنولوژی های نوین در طراحی سایت باعث می شود رشد بسیار محسوسی در رتبه تان در موتور جستجوی گوگل را هم شاهد باشید


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

جدیدترین تکنولوژی طراحی سایت شامل طراحی سایت معتبر و استاندارد با جدیدترین تکنولوژی های طراحی سایت و رعایت قوانین گوگل برای بهنیه سازی و سئو سایت و استفاده از جدیدترین تکنولوژی های موجود برای افزایش سرعت در پیاده سازی و تحویل طراحی وب سایت

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

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


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
Heart آموزش ساخت و قراردان فاوآیکون favicon در سایت و معرفی سه سایت برای ساخت فاوآیکن Mohsen Omidvar 2 2,315 30-05-2017، 07:30 PM
آخرین ارسال: Mohsen Omidvar
Heart تبدیل وبلاگ به وب سایت Mohsen Omidvar 0 481 22-02-2017، 04:14 PM
آخرین ارسال: Mohsen Omidvar
  اولین قدم برای طراحی وبسایت Farzad 1 1,838 19-02-2017، 02:19 PM
آخرین ارسال: SaaRaa
  مناسب ترین فونت در طراحی وب سایت چیست ؟ sitecode 1 686 12-12-2016، 02:26 PM
آخرین ارسال: SaaRaa
  قانون گشتالت در طراحی سایت asgharji 0 680 04-09-2016، 03:50 PM
آخرین ارسال: asgharji
  ۵ مورد از متداول ترین اشتباهات در طراحی وب سایت diaraweb 0 682 25-06-2016، 12:28 PM
آخرین ارسال: diaraweb
  چگونه یک محتوای خوب برای وب سایت خود بنویسیم؟ diaraweb 0 570 25-06-2016، 12:27 PM
آخرین ارسال: diaraweb

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان