افزایش سرعت بارگزاری صفحات یکی از مسائل مهم در طراحی صفحات وب میباشد. در صورتی که زمان بارگزاری یک صفحه وب طولانی باشد، معمولا" کاربران از مشاهده آن صفحه صرف نظر میکنند و دیگر به آن باز نمیگردند این به معنی از دست دادن کاربران سایت میباشد که برای مدیران یک سایت اصلا" خوشایند نیست. در ادامه ده روش موثر برای افزایش سرعت بارگزاری صفحات وب بیان میشود.
1. استفاده از CSS برای ایجاد قالب و طرح صفحه به جای Table
CSS یا Cascading Style Sheetsها به دلایل زیر از Tableها سریعتر بارگذاری میشوند: · مرورگرها قبل از نمایش محتویات یک جدول دو بار آن را مرور میکنند. یک بار برای مشخص شدن ساختار آن و یک بار هم برای تعیین محتویات آن. · جداول (Tables) در یک مرحله بر روی صفحه به نمایش در میآیند. هیچ قسمتی از یک جدول بر روی صفحه ظاهر نمیشوند تا اینکه تمام جدول همراه با محتویات آن به طور کامل بارگذاری و پردازش شود. · عمل موقعیت دهی و یا ایجاد یک فضای خاص در جداول معمولا" با استفاده از تصاویر کوچک خاصی (Spacer Images) صورت میپذیرد. · بطور کلی CSS ها کد کمتری نسبت به جداول نیاز دارند. · تمام کدهای مورد نیاز برای ایجاد طرح و نمای صفحه قابلیت جایگزین شدن با یک فایل CSS خارجی را دارند. که این فایل پس از یک بار فراخوانی در کامپیوتر کاربر ذخیره (cache) میشود. اما قالبهای ایجاد شده با استفاده از جداول در هر صفحه HTML تکرار میشوند و با درخواست هر صفحه جدید دوباره باید بارگذاری (Download) شوند. · با استفاده از CSS ها امکان تعیین ترتیب بارگذاری صفحه وجود دارد. یعنی میتوان محتویات اصلی صفحه را قبل از بارگذاری تصاویر با حجم بالا به نمایش درآورد. این کار قطعا" کاربران سایت شما را خوشحال خواهد کرد. 2. از تصاویر برای نمایش متن استفاده نکنید
در اینجا نیز CSS به ما کمک خواهد کرد. در مواردی که کار را می توان با CSS بطور کامل انجام داد از تصاویر استفاده نکنید. به کد زیر دقت کنید: a:link, a:visited, a:active { width: 7em; font: bold 0.8em Georgia; text-decoration: none; display: block; margin-left: 0; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-left: 1px solid #6cf; border-bottom: 1px solid #068; border-right: 1px solid #068; padding: 0.25em 0.5em 0.4em 0.75em; border-top: 1px solid #6cf; }
a:hover { background: #28b; padding: 0.35em 0.35em 0.25em 0.9em; border-top: #069; border-right: #6cf; border-bottom: #6cf; border-left: #069; }
3. فراخوانی تصاویر تزیینی بوسیله CSS
با CSS میتوان تصاویر را بصورت قسمتی از یک زمینه (background) نمایش داد. بطور مثال یک تصویر 200x200 را میتوان بصورت زیر نمایش داد:
<div class="pretty-image"></div> کد HTML .pretty-image { background: url(filename.gif); width: 200px; height: 200px } کد CSS
در ابتدا شاید این کار بی معنی به نظر برسد اما این کار سرعت بارگذاری و نمایش صفحات را افزایش میدهد. بطور کلی مرورگرها تصاویر زمینه را بعد از بقیه اجزا بارگذاری میکنند. با استفاده از این تکنیک متن درون صفحه فورا" به نمایش درآمده و کاربر میتواند آن را مشاهده و در بین آن گردش کند و در همین هنگام تصاویر با حجم زیاد بارگذاری میشوند.
در این روش نمیتوان از خصوصیت ALT استفاده نمود اگر واقعا" میخواهید که از این خصوصیت استفاده کنید، کد HTML بالا را بصورت زیر تغییر دهید. <image src="spacer.gif" class="pretty-image" alt="description" />
در اینجا spacer.gif یک تصویر 1x1 پیکسل شفاف (transparent) است که 50 بایت حجم دارد. در این حالت ابتدا محتوای اصلی بارگذاری میشود و بعد از آن تصویر بزرگ و حجیم همراه با خصوصیت ALT بطور کامل بارگذاری میشود. دقت داشته باشید که این روش برای نمایش تصاویر تزئینی مناسب میباشد نه برای تصاویر حاوی اطلاعات. همچنین کاربرانی که CSS آنها غیر فعال است قادر به مشاهده تصویر (یا متن مربوط به ALT) نمیباشند.
4. استفاده از انتخاب کنندههای (selectors) مناسب
به کد نامناسب زیر توجه کنید:
<p class="text">This is a sentence</p> <p class="text">This is another sentence</p> <p class="text">This is yet another sentence</p> <p class="text">This is one more sentence</p>
.text { color: #03c; font-size: 2em }
به جای اختصاص دادن مقدار به هر پاراگراف، میتوان همه را در یک تگ <div> قرار داده و مقدار را به آن اختصاص دهیم:
<div class="text"> <p>This is a sentence</p>
<p>This is another sentence</p> <p>This is yet another sentence</p> <p>This is one more sentence</p> </div>
.text p { color: #03c; font-size: 2em }
در ابتدا شاید این موضوع زیاد با اهمیت به نظر نرسد اما اگر شما بتوانید از آن بطور صحیح در تمام صفحه استفاده کنید به راحتی 20% از حجم فایل شما کم خواهد شد. همچنین شاید توجه کرده باشید که مقادیر مربوط به رنگها کوتاهتر از حالت عادی است. 03c# کوتاه شده مقدار 0033cc# است شما میتوانید از این روش خلاصه کردن در هر جایی که مقادیر با این فرم قرار دارند استفاده کنید.
5. استفاده از خلاصه نویسی خصوصیات در CSS
در زیر روش خلاصه نویسی بعضی المانهای CSS را مشاهده میکنید:
font: 1em/1.5em bold italic serif font-size: 1em; line-height: 1.5em; font-weight: bold; font-style: italic; font-family: serif Font border: 1px black solid border-width: 1px;
border-color: black;
border-style: solid Border background: #fff url(image.gif) no-repeat top left background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left; Background margin: 2px 1px 3px 4px (top, right, bottom, left) margin-top: 2px; margin-right: 1px; margin-bottom: 3px; margin-right: 4px Margin margin: 5em 1em 3em (top, left and right, bottom) تاریخ ثبت : پنجشنبه 31 شهریور 1384 ساعت : 12:09 ب.ظ
صفحات دو ستونی در CSS | CSS , | علی فیروزجنگ
صفحات دو ستونی در CSS | در هنگام طراحی صفحات با استفاده از CSS بعضی مرتكب این اشتباه میشود كه بخش كناری صفحه را در اول صفحه قرار میدهند و بخش اصلی را در زیر آن; به همین علت بازدیدكنندگان تا پایان كار لود شدن بخش كناری باید صبر كنند. در قسمت كناری صفحه اغلب كدهای javascript برای استفاده از سرویسهای سایتهای مختلف (مثل سایتهای اندازه گیری بازدیدكنندگان یا سایت blogrolling برای لینكهای سایت) وجود دارد به همین خاطر كار لود شدن آن قسمت مدت به نسبت زیادی را به خود اختصاص میدهد. به همین دلیل در صورت قرار گیری این بخش در قسمت بالاتر صفحه كار لود شدن نوشته های اصلی صفحه به تعویق خواهد افتاد. این كار بر خلاف فلسفه طراحی با استفاده از CSS است. ما با استفاده از CSS سعی میكنیم كاری كنیم كه مطالب مهمتر زودتر از بقیه موارد ظاهر شوند. برای قرار دادن بخش اصلی در ابتدای صفحه تگ DIV مربوط به بخش اصلی را در ابتدا و تگ DIV مربوط به بخش كناری را بعد از آن قرار دهید. سپس خصوصیت float مربوط به style بخش اصلی را تایین كنید. مثال: <html>
<head>
<style>
.Page_body { background-color: #FF0000;float:left }
.Page_side { background-color: #0000FF; }
</style>
</head>
<body>
<div class="Page_body">Page contents here</div>
<div class="Page_side">Page Side Contents</div>
</body>
</html>
|
تاریخ ثبت : پنجشنبه 31 شهریور 1384 ساعت : 12:09 ب.ظ
ScrollBar صفحه سایت خود را عوض كنید | CSS , | علی فیروزجنگ
ScrollBar صفحه سایت خود را عوض كنید | برای اینكه رنگ ScrollBar صفحه سایت خود را عوض كنید كافی است كد زیر را در ابتدای برنامه خود اضافه كنید. (تقریبا بعد از تگ )
<STYLE type=text/css>
BODY {
SCROLLBAR-FACE-COLOR: #739cbd;
SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;
SCROLLBAR-SHADOW-COLOR: #1f1f1f;
SCROLLBAR-3DLIGHT-COLOR: #739cbd;
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-TRACK-COLOR: #cee6f2;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff
}
</STYLE>
خب یك توضیحی در مورد این سورس بدم...
اول اینكه این چند خط كد از دستورات CSSپیروی میكنه كه در تگ Style قرار گرفته است.
Scrollbar-face-color: در این قسمت رنگ اصلی اسكرول را تعیین می كنید.
Scrollbar-shadow-color: در این قسمت رنگ سایه اسكرول را مشخص می كنید (خط موجود در سمت راست و پایین اسكرول)
Scrollbar-highlight-color: در این قسمت رنگ قسمت روشن اسكرول را مشخص می كنید (خط موجود در سمت چپ و بالای اسكرول)
Scrollbar-3dhigh-color: این پارامتر رنگ بوردر (خط) دور اسكرول را مشخص می كند. (خط كلی در دور تا دور اسكرول)
Scrollbar-darkshadow-color: خط دوم سایه اسكرول را مشخص می كند . (این خط بر روی خط سایه كه در سمت راست و بالای اسكرول است قرار میگیرد)
Scrollbar-track-color: این قسمت رنگ زمینه اسكرول را مشخص می كند.
Scrollbar-arrow-color: رنگ فلش های موجود در كلیدهای بالا و پایین اسكرول را تغییر می دهد.
|
تاریخ ثبت : چهارشنبه 30 شهریور 1384 ساعت : 05:09 ق.ظ
استایل (CSS) چیست؟ | CSS , | علی فیروزجنگ
استایل (CSS) چیست؟ | استایل (CSS) چیست؟
- CSS مخفف کلمه Cascading Style Sheets میباشند.
- اولین ورژن استایلها در سال ۱۹۹۶ ساخته شد. که اولین ورژن آن CSS1 بود.
- دیگر وژن آن CSS2 می باشد که در سال ۱۹۹۸ ساخته شد که بیشتر برای ویرایش صفحات، نحوه نمایشها تگها و ... کاربرد دارد.
- فایل استایلها با فرمت CSS ذخیره میشوند.
انواع استایلها:
استایلها بر سه نوع میباشند:
۱. Inline Style: این نوع استایل در داخل تگهای HTML به كار گرفته میشوند، و این استایل فقط بروی همان تگ به خصوص تاثیر خواهد گذاشت و به صورت زیر نوشته خواهد شد. <tag style="Style Declarations">
Example:
<p style="font-family: Tahoma">This is a paragraph</p>
در مثال بالا با استفاده از حالتهای مختلف در استایلها نوع فونت آنرا تغییر دادیم و همانطوری که در تعریف این نوع استایل نوشتم این استایل فقط و فقط تغییرات را بروی همین پاراگراف اعمال خواهد کرد.
۲.Embedded or Global Style: در این نوع، استایل نوشته شده در تمامی صفحه تاثیر خواهد گذاشت، اینرا بین دو تگ (<head></head>) به صورت زیر نوشته خواهد شد.
<style>
<!--
Style Declaration
-->
</style>
Example:
<head>
<style type="text/css">
<!--
p { color: red; text-align: left; font-size: 8pt }
-->
</style>
</head>
این نوع حالت از تغییرات تعریف شده بروی تمامی تگها پاراگراف اعمال خواهد شد که رنگ متن: قرمز، جهت متن: چپ، و اندازه فونت ۸ پوینت خواهد بود. توجه داشته باشید در این مثال سه حالت مختلف یک استایل را برای تگ پاراگراف تعریف کردیم که با استفاده از (;) حالتهای مختلف آن از هم جدا شدند.
اگر بخواهید این حالت نوشته شده را برای چند تگ دیگر اعمال کنید می توانید تگها را بااستفاده از کاما (,) از هم جدا کنید برای مثال: h1, h2, h3, h4 { color: gold; font-family: sans-serif }
۳. Linked or External style sheet: نوع آخر هم معروف به استایلهای خارجی هستند كه به صورت لینك فایل استایل را به صفحات خود لینك میدهید. فایلهای استایل با فرمت CSS ذخیره میشوند و به صورت زیر به صفحات لینك داده میشود.
* URL: آدرس فایل استایل | *Relation type: برابر با stylesheet هست | *link type: هم با text/css برابر میباشد. <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 دخیره کرده و سپس با استفاده از فرمول بالا آن فایل را به قالب لینک دهید.
یکی از مزیتهای این نوع استایل این میباشد که می توانید با داشتن یک فایل استایل برای چندین صفحه استفاده کنید و از دیگر مزیت های آن با این کار کدهای قالب را به چند فایل تقسیم کرده و قالب را منظم تر میشود. |
تاریخ ثبت : چهارشنبه 30 شهریور 1384 ساعت : 01:09 ق.ظ
| 
تبلیغات 
