آیا تا کنون دقت کرده اید که برنامه های ویرایشگر اچتمل مانند
دریم ویور و فرانت پیج در ابتدای صفحات ، یک تگ
DOCTYPE
قبل از تگ
html
مینویسند که برداشتن آن نیز تاثیر خاصی در صفحه ندارد ؟
<!DOCTYPE
HTML
PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
اما کار این تگ چیست ؟ این خط به برنامه مرورگر می فهماند که
شما قصد استفاده از HTML نسخه 4 را برای طراحی صفحه وب خود
دارید . در صورتی که بخواهید از XHTML جهت طراحی صفحه وب خود
استفاده کنید باید کد فوق را کمی تغییر دهید . پس چرا حذف آن
تاثیری در صفحه وب ما ندارد ؟ این کد در ایجاد صفحات HTML
اختیاری و در صفحات XHTML اجباری است . اگر این تگ را به همراه
یک URL در بالای صفحه وب خود اعلان کنید ، سبب میشود که برنامه
های مرورگر فعلی ، هنگام باز کردن صفحه شما در مد standards
کنار کنند . بدین صورت میتوانید کدهای خود را مطابق استاندارد
نوشته و کنترل بیشتری بر چگونگی نمایش این صفحه در برنامه های
مرورگر مختلف داشته باشید. در صورت نگذاشتن این کد ، مرورگر از
روش های قدیمی تر برای نمایش صفحه شما استفاده می کند . یک
مثال عملی :در هنگام تعیین رنگ با شماره های هگزادسیمال ، یک
علامت شارپ (#) در ابتدای شماره رنگ قرار میگیرد که حذف آن
باعث نادیده گرفتن این رنگ در زمان نمایش صفحه میشود . اما اگر
کد DOCTYPE را از ابتدای صفحه پاک کنید ،مرورگرتان از این مورد
ایراد نمی گیرد و آن رنگ را نشان میدهد . برای تست این مثال از
مرورگر فایرفاکس استفاده کنید . چون مرورگر Internet Explorer
بطور معمولی هم از حذف علامت # ایراد نمی گیرد و ممکن است شما
فکر کنید علامت # اختیاری است !
متاتگ
چیست ؟
متاتگ ها راهی برای شناساندن وب
سایت شما به جهان خارج است . عنوان تگ
هایی که برای صفحات سایت خود تعریف میکنید موتور های جستجوگر
را در شناختن مطالب داخل سایت شما یاری میکند .
دو نوع اصلی متاتگ وجود دارد :
این متاتگ باعث میشود که اطلاعات اضافی ای همراه
صفحه وب درخواستی شما در
http header
به مرورگر ارسال شود .
مثلا میتوانید تاریخ انقضای اطلاعات را
تعیین کنید یا میتوانید صفحه وب را با یک متا تگ
خاص پس از چند ثانیه به صفحه دیگری بفرستید بدون
دخالت کاربر ! |
HTTP-EQUIV |
این نوع از متاتگ برای تعیین اطلاعات داخل صفحه وب
استفاده میشود که باعث میشود صفحه وب شما با راحتی
بیشتری برای موتورهای جستجوگر شناخته شود ... مثلا
زبان این صفحه ، نام طراح ، کلمات کلیدی این صفحه
و ... |
NAME |
متاتگ ها کجای صفحه وب نوشته میشوند ؟
متاتگ ها را باید داخل تگ
head
نوشت . در صفحه هایی که از چند فریم درست شده باید در تمام
صفحات متاتگ را نوشت.
به مثال های زیر دقت کنید :
content
در متاتگ کارش معرفی مقداری هست که متاتگ با یکی از دو صفت
name
و
HTTP-EQUIV
در خود دارد .
مثال :
NAME="keywords"
CONTENT=" persian macromediax dreamweaver">
تگ بالا را یه نگاه کنید . از نوع
name
است . مقدار
name
مساوی با
keywords
است . یعنی این متاتگ کارش شناساندن کلمات کلیدی سایت به موتور
های جستجوگر است ... اگر میخواهید موتور های جستجو مانند گوگل
سایت شما را بهتر بشناسند این تگ را به قالب سایت یا وبلاگ خود
بیفزایید و در جلوی
content
کلمات کلیدی سایت خود را بنویسید .
مثال :
NAME="description"
CONTENT=" persian web design center">
تگ بالا کارش افزودن توضیحات سایت شما به موتور های جستجوگر
است . اگر این تگ را به وب سایت یا وبلاگ خود اضافه کنید از
ماه آینده اگر کسی بصورت تصادفی در گوگل به سایت شما بر بخورد
توضیحات داخل این متا تگ را بجای توضیحات میبیند . یعنی گوگل
دقیقا از این متاتگ برای ذخیره اطلاعات درباره سایت شما
استفاده میکند . پس بکاربردن این متا تگ ها خیلی مهمه !
مثال :<META
HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02
GMT">
تگ بالا تاریخ انقضای این صفحه وب را تعیین میکند . یعنی اگر
کسی این صفحه وب را یکبار دیده باشد وقتی این زمان فرا برسد و
او دوباره آدرس این سایت را در مرورگرش بزند این صفحه از داخل
cache
لود نمیشود بلکه از سرور دانلود میشود .
آموزش
CSS - طراحی یک سایت بدون استفاده از جدول ها
بیایید به روزهای اولیه وب برگردیم . هیچ
استانداردی نبود و هر مرورگر هر روز یه تگ جدید معرفی میکرد.
بالاخره یه موسسه همه مرورگر ها رو سر یه میز جمع کرد و با هم
استانداردی بنام
W3C
را تصویب کردند . در این زمان نیاز عمده ای حس میشد که محتویات
سایت از طراحی جدا شود . در اینجا بود که سر و کله
CSS
پیدا شد و مسئولیت نمایش نمای صفحات را بعهده گرفت و
XHTML
نیز برای نمایش اطلاعات بگار گرفته شد .
چرا باید بجای جدول از کد
CSS
استفاده کرد ؟
-
اول اینکه کد شما خیلی کوتاه تر میشه ، حتی نصف !
-
دوم اینکه سرعت لودینگ سایت شما بیشتر میشه .
-
راحت تر تغییر مییابد : شما یک فایل
CSS
را تغییر می دهید و کل سایت شما تغییر می یابد .
-
مطالب از قالب سایت میشود .
در این مقاله شما یاد میگیرید چگونه بجای
جداول از
CSS
وکلاس های آن استفاده کنید .
ساخت کلاسی برای عناصر تگ
<div>
:
اولین قدم ساخت کلاس
CSS
است که المنت های تگ
<DIV>
از آن استفاده میکنند . بصورت زیر :
div.leftnav{
background: white;
color: black;
/* other display information here */
/* add Positioning information here */
}
این کلاس بسیار ساده است و در اصل الان
کاری انجام نمیدهد . فقط متن سیاه را روی زمینه سفید تعریف
میکند . شما باید از این المنت در جایی از صفحه استفاده کنید .
موقعیت یابی وابسته ساده :
این بدین معناست که ما فقط هر عنصر را در
موقعیتش قرار میدهیم و بدین تعریف کردن جای دقیق آن در صفحه .
div.leftnav{
background: white;
color: black;
/* Other display information here */
width: 15%;
}
خوب . ما چه انجام دادیم ؟ ما گفتیم که
هدایتگر چپ باید در سمت چپ باشه ، جاییکه در صفحه قرار میگیرد
. این بد نیست ، اما برای انعطاف بیشتر ممکنه شما به موقعیت
یابی مطلقی نیاز داشته باشید . همچنین این
خیلی مهمه که بدونین که چیزی که شما تا حالا انجام دادید موقیت
نمایی اصلی نیست . تمام چیزی که تعریف کردید
Width
بود . بنابرین یک المنت با پهنای 15% ساخته خواهد شد .
موقعیت نمایی مطلق . اضافه کردن
border
و
margin
:
موقعیت نمایی مطلق به معنای این است که
شما بگویید دقیقا المنت های شما کجای صفحه ظاهر شوند . اینکار
با تعریف خاصیت های
top , bottom, left , right
امکان پذیر میشود :
div.content{
background: white;
color: black;
position: absolute; /* Says which
positioning we are using */
left: 17%; /* 17% from the left side of
the screen */
width: 69%; /* This is the width */
}
نکته اینجاست که در کد بالا فقط خاصیت
left
تعریف شده، این کافیه ! نیازی نیست که شما تمامی تمام خاصیت
هایش را تعریف کنید . اما برای انعطاف پذیری بیشتر ممکنه
خودتون بخواهید اینکارو بکنید . بطور مثال ممکنه شما بخواهید
یک منو در سمت راست اضافه کنید:
div.rightnav{
background: white;
color: black;
position: absolute;
left: 83%;
width: 10%;
top: 80px; /* 80 pixels from the top */
}
اساسا در موقعیت نمایی مطلق این المنت ها
معانی زیر را دارند:
Left
: فاصله از چپ صفحه ، معمولا بر حسب درصد
Right
: فاصله از راست صفحه ، معمولا بر حسب درصد
Top:
فاصله از بالای صفحه ، معمولا بر حسب پیکسل
Bottom
: فاصله از پایین صفحه ، معمولا بر حسب پیکسل
نکته اینکه
bottom
به ندرت استفاده میشود ، اما گاهی لازم میشود . اگر شما از 4
یا 3 تا پراپرتی با هم استفاده کنید ،باید قادر به قرار دادن
تگ
DIV
در
هر کجا که میخواهید باشید . همچنین در نظر
داشتن این نکته مهم است که راه های بیشتری نیز برای موقعیت
نمایی یک المنت در کنار موقعیت نمایی مطلق وجود دارد . اما
تمام مرورگر های وب آن راه ها را پشتیبانی نمیکنند .
افزودن
Border
:
ممکنه شما بخواهید کمی عناصرصفحه را با
لبه کنار صفحه یا هر چیز دیگر فاصله دهید ،
border
ها برای این امر مناسبند . اما صفحه خود را در مرورگر های
مختلف تست کنید تا نتیجه درستی دریافت کنید . و حال طرز ساخت
حاشیه ها:
div.rightnav{
background: white;
color: black;
position: absolute;
left: 83%;
width: 10%;
top: 80px; /* 80 pixels from the top */
border-color: white; /* Keep the border
invisible */
border-style: solid; /* It is a solid
invisible line which is fine */
border-bottom-width: 2px; /* These
attributes are pretty self-explanatory */
border-top-width: 2px;
border-left-width: 3px;
border-right-width: 4px;
}
افزودن حاشیه یا
margin
:
Margin
ها ابزار های قدرتمندی در سایت های
css
میباشند .در مقدمه میبینید که شما میتوانید چیزی را بکمک تعیین
فاصله درصدی از طرفین
margin
ها در وسط قرار دهید .
div.content{
background: white;
color: black;
margin-left: 20%; /* 20% from the left
side of the screen */
margin-right: 20%; /* 20% from the right
side of the screen */
}
نقصان وجود پشتیبانی مرورگر ها :
پشتیبانی نشدن تمام دستورات
css
توسط تمامی مرورگر ها مشکلات زیادی را برای طراحان پیش آورده .
Mozilla
( و مرورگر های زیر مجموعه آن مانند
FireFox
) و
Opera
بروز رسانی بسیار خوبی در پشتیبانی دستورات
css
دارند . اما
Internet Explorer
کمی عقب مانده است . کد هایی که در این مقاله
نوشتیم توسط تمامی مرورگر ها پشتیبانی میشود .
ناسازگاری بین مرورگر ها :
بیشتر مردم از آخرین نسخه مرورگرها
استفاده می کنند. مرورگر های گوناگون کد
css
شما را بگونه های مختلف
تفسیر میکنند . اصلی ترین مرورگر در این زمینه
IE
است که ممکنه کد های
border
را بگونه دیگری نشان دهد .
افزودن تگ
DIV
:
افزودن تگ
DIV
برای گره زدن تمام اطلاعات بسادگی زیر انجام پذیر است :
<div class = "leftnav">
// Insert Links
</div>
همانطور که می بینید خیلی ساده اینکار
انجام شد و بیشتر کار در فایل
CSS
انجام میشود . شما میتوانید از تگ
DIV
در هرجای صفحه استفاده کنید . در انتها اینجا یک صفحه
XHTML
ساده را می بینید که کد
css
آنرا سافته و نمای آن سه ستون
دارد :
<div class = "content">
// Content
</div>
<div class = "leftnav">
// Links
</div>
<div class = "rightnav">
// Links
</div>