logo1398

با اعطای مدرک بین المللی سازمان فنی و حرفه ای

مرکز آموزش تخصصی و فوق تخصصی نصب و تعمیرات ماشین های اداری و سخت افزار کامپیوتر


ثبت نام  آنلاین    شهریه دوره ها 

چگونگی طراحی یک سایت بدون استفاده از جدول ها

بیایید به روزهای اولیه وب برگردیم . هیچ استانداردی نبود و هر مرورگر هر روز یه تگ جدید معرفی میکرد. بالاخره یه موسسه همه مرورگر ها رو سر یه میز جمع کرد و با هم استانداردی بنام W3C را تصویب کردند . در این زمان نیاز عمده ای حس میشد که محتویات سایت از طراحی جدا شود . پس از ظهور CSS مسئولیت نمایش نمای صفحات را بعهده CSS قرار گرفته شد و  XHTML نیز برای نمایش اطلاعات بگار گرفته شد .
چرا باید بجای جدول از کد CSS استفاده کرد ؟
اول اینکه کد شما خیلی کوتاه تر میشه ، حتی نصف !
دوم اینکه سرعت لودینگ سایت شما بیشتر میشه .
راحت تر تغییر مییابد : شما یک فایل CSS را تغییر می دهید و کل سایت شما تغییر می یابد .
مطالب از قالب سایت میشود .
در این مقاله شما یاد میگیرید چگونه بجای جداول از CSS وکلاس های آن استفاده کنید .
ساخت کلاسی برای عناصر تگ
: اولین قدم ساخت کلاس CSS است که المنت های تگ
از آن استفاده میکنند . بصورت زیر :
div.leftnav
این کلاس بسیار ساده است و در اصل الان کاری انجام نمیدهد . فقط متن سیاه را روی زمینه سفید تعریف میکند . شما باید از این المنت در جایی از صفحه استفاده کنید .
موقعیت یابی وابسته ساده :
این بدین معناست که ما فقط هر عنصر را در موقعیتش قرار میدهیم و بدین تعریف کردن جای دقیق آن در صفحه .
div.leftnav
خوب . ما چه انجام دادیم ؟ ما گفتیم که هدایتگر چپ باید در سمت چپ باشه ، جاییکه در صفحه قرار میگیرد . این بد نیست ، اما برای انعطاف بیشتر ممکنه شما به موقعیت یابی مطلقی نیاز داشته باشید .  همچنین این خیلی مهمه که بدونین که چیزی که شما تا حالا انجام دادید موقیت نمایی اصلی نیست . تمام چیزی که تعریف کردید Width بود . بنابرین یک المنت با پهنای 15% ساخته خواهد شد .
موقعیت نمایی مطلق . اضافه کردن border و margin :
موقعیت نمایی مطلق به معنای این است که شما بگویید دقیقا المنت های شما کجای صفحه ظاهر شوند . اینکار با تعریف خاصیت های top , bottom, left , right امکان پذیر میشود :
div.content
نکته اینجاست که در کد بالا فقط خاصیت left تعریف شده، این کافیه ! نیازی نیست که شما تمامی تمام خاصیت هایش را تعریف کنید . اما برای انعطاف پذیری بیشتر ممکنه خودتون بخواهید اینکارو بکنید . بطور مثال ممکنه شما بخواهید یک منو در سمت راست اضافه کنید:
div.rightnav
اساسا در موقعیت نمایی مطلق این المنت ها معانی زیر را دارند:
Left : فاصله از چپ صفحه ، معمولا بر حسب درصد
Right : فاصله از راست صفحه ، معمولا بر حسب درصد
Top : فاصله از بالای صفحه ، معمولا بر حسب پیکسل
Bottom : فاصله از پایین صفحه ، معمولا بر حسب پیکسل
نکته اینکه bottom به ندرت استفاده میشود ، اما گاهی لازم میشود . اگر شما از 4 یا 3 تا پراپرتی با هم استفاده کنید ،باید قادر به قرار دادن تگ DIV  در هر کجا که میخواهید باشید  . همچنین در نظر داشتن این نکته مهم است که راه های بیشتری نیز برای موقعیت نمایی یک المنت در کنار موقعیت نمایی مطلق وجود دارد . اما تمام مرورگر های وب آن راه ها را پشتیبانی نمیکنند .
افزودن Border :
ممکنه شما بخواهید کمی عناصرصفحه را با لبه کنار صفحه یا هر چیز دیگر فاصله دهید ، border ها برای این امر مناسبند . اما صفحه خود را در مرورگر های مختلف تست کنید تا نتیجه درستی دریافت کنید . و حال طرز ساخت حاشیه ها:
div.rightnav
افزودن حاشیه یا margin :
Margin ها ابزار های قدرتمندی در سایت های css میباشند .در مقدمه میبینید که شما میتوانید چیزی را بکمک تعیین فاصله درصدی از طرفین margin ها در وسط قرار دهید .
div.content
نقصان وجود پشتیبانی مرورگر ها :
پشتیبانی نشدن تمام دستورات css توسط تمامی مرورگر ها مشکلات زیادی را برای طراحان پیش آورده . Mozilla ( و مرورگر های زیر مجموعه آن مانند FireFox ) و Opera بروز رسانی بسیار خوبی در پشتیبانی دستورات css دارند . اما Internet Explorer کمی عقب مانده است . کد هایی که در این مقاله نوشتیم توسط تمامی مرورگر ها پشتیبانی میشود .
ناسازگاری بین مرورگر ها :
بیشتر مردم از آخرین نسخه مرورگرها استفاده می کنند. مرورگر های گوناگون کد css   شما را بگونه های مختلف تفسیر میکنند . اصلی ترین مرورگر در این زمینه IE است که ممکنه کد های border را بگونه دیگری نشان دهد .
افزودن تگ DIV :
افزودن تگ DIV برای گره زدن تمام اطلاعات بسادگی زیر انجام پذیر است :
// Insert Links
همانطور که می بینید خیلی ساده اینکار انجام شد و بیشتر کار در فایل CSS انجام میشود . شما میتوانید از تگ DIV در هرجای صفحه استفاده کنید . در انتها اینجا یک صفحه XHTML ساده را می بینید که کد css آنرا سافته و نمای آن سه ستون دارد :
// Content
// Links
// Links

ستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال
 

دوره های آموزشی ما

اطلاعات تماس

آدرس : تهران - میدان ولی عصر - مرکز تجارت ایرانیان - طبقه نهم - واحد پنج

ساعت کاری شرکت : 9 صبح تا 8 شب
کلاس های روز جمعه ویژه کارمندان و دوره های فشرده دایر میباشد 

phone325 3

04 92 92 88 -021

05 92 92 88 -021

91 14 847- 0912

92 14 847- 0912 

 آموزش شارژ کارتریج, اموزش شارژ کارتریج, آموزش شارژ کارتریج لیزری, آموزش شارژ کارتریج جوهر افشان, آموزش شارژ, آموزش شارز پرینتر, آموزش شارژ سامسونگ, آموزش شارژ اچ پی, آموزش شارژ کاتریج, اموزش شارژ کاتریج, آموزش شارژ کارتریج, اموزش شارژ کارتریج, آموزش شارژ کردن کارتریج, آموزش شارژ کارتریژ, آموزش شارژ کارتریج لیزری, آموزش شارژ کارتریج جوهر افشان, آموزش شارژ کارتریج پرینتر, آموزش شارژ کارتریج لیزری , آموزش شارژ کاتریج , آموزش شارژکاتریژ , آموزش شارژ انواع کارتریج , آموزش تخصصی شارژ کارتریج,آموزش شارژ پرینتر , تونر,کارتریج لیزری, آموزش تعمیرات فتوکپی,اموزش تعمیرات چاپگر,آموزش تعمیرات پرینتر,اموزش تعمیرات پرینتر, آموزش تعمیرات دستگاه کپی شارپ,آموزش تعمیر کپی آنالوگ و دیجیتال,آموزش تعمیرات دستگاه کپی ریکو,آموزش تعمیرات کپی آفیشیو,آموزش تعمیرات آنالوگ و دیجیتال,آموزش تعمیرات دستگاه کپی توشیبا آنالوگ و دیجیتال,آموزش تعمیرات دستگاه کپی,آموزش تعمیر دستگاه کپی و فتوکپی,آموزش تعمیرات کپی رنگی, دوره آموزشی,آموزش تعمیرات,آموزش تعمیرات فنی,آموزش خدمات,آموزش تعمیر,اموزش تعمیر,دوره های آموزشی,فنی کار,امید,رحمانی,امید رحمانی,دوره اموزش,اموزشگاه فنی,فنی و حرفه ای, آموزش الکترونیک, دوره آموزش الکترونیک, آموزش الکترونیک, الکترونیک پایه, آموزش الکترونیک تخصصی, طراحی برد الکترونیک،آموزش طراحی برد, مهندسی معکوس, آموزش مهندسی معکوس, آموزش الکترونیک مخصوص بازارکار, آموزش الکترونیک اس ام دی, آموزش الکترونیک smd, آموزش نقشه خوانی, آموزش کار با هیتر, الکترونیک, برق, طراحی, مدار, ای وی ار, ال ای دی, ابزار دقیق, پی ال سی, plc, اینورتر, inverter, منبع تغذیه, سوئیچینگ, رله, خازن, ماژول, smd, led, طراحی برد صنعتی, پروژه دانشگاهی, دوره تخصصی آموزش نصب دوربین مدار بسته,آموزش نصب دوربین مداربسته, دوره آموزش نصب دوربین مدار بسته,آموزش نصب دوربین های مداربسته, آموزش تخصصی نصب دوربین مدار بسته,آموزش دوربین مداربسته,آموزشگاه,آموزش,نصب, آموزش تعمیر انواع دوربین های مدار بسته,آموزش تعمیرات دوربین های مدار بسته,قوی ترین مرکز آموزش تعمیرات دوربین مخفی,بهترین مرکز آموزش تعمیر دوربین مخفی در تهران,قدرتمندترین مرکز آموزش تعمیر دوربین های مدار بسته,آموزش تعمیر تخصصی دوربین های مدار بسته