استاندارد های طراحی قالب

سلام

یه سوال

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

marSoul

Member
در حال حاضر مسئله مهم در طراحی سایت semantic (با معنی) بودن کد هستش. به این معنی که وقتی در حال نوشتن کد هستید به معنای اون کد و کاربردی که داره دقت ویژه ای بکنید، چون همه screen reader ها نسبت به کدها حساس هستند و از نظر accessibly بسیار اهمیت داره، بنابراین استفاده از table برای ساخت layout سایت کار اشتباهی است جدا از دردسرهای خیلی زیادی که table ها دارن کد table برای ایجاد اطلاعات دسته بندی شده و جداول هست نه برای ساخت layout.
برای همین باید استفاده از table ها رو فراموش کنی و در جای خودشون ازشون استفاده کنی همینطور در مورد سایر کدها...
 
اصلا لایوت چیه؟
به چه درد می خوره؟

لینکی چیزی دارین که در موردش توضیح بده؟
من خیلی تو گوگل گشتم ولی نبود.

ممنون می شم یه توضیح کاربردی بدین در موردش که کل کار رو درک کنم
 

marSoul

Member
منظور از layout نحوه چیدمان اجزا مختلف روی صفحه سایت است، قدیم از table برای چیدن این اجزا کنار هم استفاده می شد ولی الان به دلیل مسایلی که گفتم از div باید استفاده بشه. layout یک کلمه است فقط و عملا چیز قابل لمسی نیست فقط منظور از آن نحوه چیدمان کل اجزا در سایت است، مثلا یک سایت ممکنه 2 ستونه باشه یک ستون برای main content و یک ستون برای sidebar که به کل این layout گفته می شه معمولا هم در وبلاگها بیشتر این نوع layout دیده می شه. قسمت main content یک div است که معمولا در یک loop قرار می گیرد و تکرار می شود و sidebar هم یک div دیگر در کنار آن است.
 

alionline1366

Active Member
دوست من استفاده از div و tableless کار کردن باعث سرعت رندر سایت شما توسط مرورگرها میشه و خوانایی کد شما خیلی راحت تر میشه کار با css عالی میشه و خود شما هم برای کار کردن راحت ترید و خیلی از کارها هم که با تیبل و ساختار تیبلی مشکل هست با div راحت تر میشه
 

marSoul

Member
خیلی راحت با استفاده از تگهای <div> و <div/>، محتویات خودتون رو داخل این تگها قرار بدید، برای positioning هم باید از css استفاده کنید
 

alionline1366

Active Member
شما با استفاده از تگهای div p ul li span و غیره و استایل دهی به اینها میتونی بهترین ساختارهای table less رو داشته باشی فقط از تفاوتهای مرورگرهای مختلف در استفاده از css غافل نشو
 

meysamz

Member
بهترین کار اینکه از کد های منسوخ شدهخ HTML استفاده نشود و تا جایی که امکان دارد از DIV استفاده کنید.
البته برای اینکار نیاز به تسلط کامل به CSS و CSS Hack دارید.
امروزه اکثر طراحان حرفه ای وب، سایت ها را فقط با DIV می سازند.
البته این نکته نامانده نماند که هنوزم نمیشه گفت که میشه Table را منسوخ شده دانست.
بعضی جا ها نمیشه ازش گذشت، مثل گرید ها و ...
 

arman92

Member
سلام.

نمي دونم چيا گفتين چيا نگفتين
ولي مي خوام بگم كه كار با Table ها براي ايجاد Layot صفحه كار اشتباهي هست.
چون تا وقتي ديويژن (Div) هست ديگه نيازي به Table نيست....
Table مال اون قديم قديماست كه CSS اونقدر كامل نشده بود كه بتونه خواص فاصله گذاري ، Float ، Position و هزار تاي ديگه الان بهش اضافه شده رو پشتيباني كنه.
 

ataturk

Member
حالا در این رابطه یه سوال . من هم تا به حال از table برای طراحی استفاده می کردم و البته یه مدتی هست می خوام به DIV کوچ کنم . یعنی در CSS موقعیت X,Y,H رو بدیم یعنی تعیین کنیم ارتفاع اون از محورهای گفته شده چقدر باشه یا نه با همون align به راحتی میشه کارها رو انجام داد .
اگر از اساتید یه توضیح عملی کوچیک بگه ردیف میشم . چون واقعا کار با table دردسر داره . من این رو خدوم به صراحت می گم .
اگر راهنمایی کنید ممنون میشم .
البته با position هم ور رفتم ولی نمی دونم چرا DIV ها سطر بعدی میان یعنی کلا یه راهنمای کلی بکنید
 

sanaz64

New Member
سلام
من سعی کردم برای طراحی سایتم از div استفاده کنم. اما div فقط یک جدول بندی افقی رو ایجاد میکنه. چطور میشه با div ردیفهایی با چند ستون ساخت؟
 

meysamz

Member
سلام
من سعی کردم برای طراحی سایتم از div استفاده کنم. اما div فقط یک جدول بندی افقی رو ایجاد میکنه. چطور میشه با div ردیفهایی با چند ستون ساخت؟
منظورتون از جدول بندی افقی چیه؟
شما با استفاده از خواصیت FLoat می توانید DIV ها را کنار هم بچینید، حالا اگر می خواهید این ستو نبندی شما چند ردیفه دیگر هم داشته باشند همون خط ها را تکرار کنید.
 

meysamz

Member
حالا در این رابطه یه سوال . من هم تا به حال از table برای طراحی استفاده می کردم و البته یه مدتی هست می خوام به DIV کوچ کنم . یعنی در CSS موقعیت X,Y,H رو بدیم یعنی تعیین کنیم ارتفاع اون از محورهای گفته شده چقدر باشه یا نه با همون align به راحتی میشه کارها رو انجام داد .
اگر از اساتید یه توضیح عملی کوچیک بگه ردیف میشم . چون واقعا کار با table دردسر داره . من این رو خدوم به صراحت می گم .
اگر راهنمایی کنید ممنون میشم .
البته با position هم ور رفتم ولی نمی دونم چرا DIV ها سطر بعدی میان یعنی کلا یه راهنمای کلی بکنید

نکته اول: کار با Table هیچ دردسری نداره، اگه با HTML به اندازه کافی آشنا باشید.
نکته دوم: خاصیت position زمانی استفاده می شه که بخواهید مختصات دی آی وی را عوض کنید، که اینکار جزء در موارد خاص کاربردی نداره و چون از ALIGN صحبت کردین حدس من اینکه شما می خواهین با مختصات دهیDIV ها را بچینید که راهش این نیست!
 

arman92

Member
من برای این دوستمون یکم بیشتر توضیح می دم... البته با اجازه بزرگتر ها!

ببینید اگه بخواین دو تا ناحیه داشته باشید مثلاً یکی چپ و دیگری راست! که توی یک مختصات عرضی باشن (محور Y ها!!!)
می تونید از دیویژن یا همون به اختصار DIV استفاده کنید.
بدین صورت
<div style="float:right; width:200px;">

THis is Right menu!
</div>

<div style="float:left;width:200px">

Left menu!

</div>

خب اینجا چون دایرکشن چپ به راست بود... قشنگ نشد. کپی کنید توی NotePad درست می شه

اگه هم خواستین یه منویی وسط این دو تا باشه ، وسط این دو تا می ذارین!
نیازی به FLoat هم نیست دیگه.. ولی یادتون نره بهتره توی Xhtml
بجای استفاده از Align=center از margin:auto استفاده کنید...

می تونید قالب هایی که ساختم توی وبلاگم رو ببینید//
www.vindoz.blogfa.com

مشکلی بود در خدمتم.
اینجا کسی C# بلده؟
 

ataturk

Member
بله دقیقا منظورم همونی بود که آرمان جان گفته بودند . با table ها به هیچ وجه مشکلی ندارم . و خیلی راحتم . ولی الان همه دارن با div کار می کنند . و می گن این استانداردتره . خوب چه بسا من هم با div کار کنم
 

ataturk

Member
متاسفانه دکمه تشکر برای تشکر کردن فعلا فعال نیست وقتی که فعال شد حتما از اون استفاده می کنم .
 

ataturk

Member
بجای استفاده از Align=center از margin:auto استفاده کنید...
یعنی همون تاثیر center رو داره ؟
سوال دیگه اینکه یه div اصلی بذارم برای منوی سمت چپ و یکی برای راست بعدش بقیه div ها که حاوی منو ها هستند رو داخل اونها قرار بدم ؟
 
آخرین ویرایش:

meysamz

Member
به این سایت سر بزنید نمونه های زیادی برای طراحی قالب بر اساس دیو را گذاشته که می توانید متوجه بشین چطور باید از سی اس اس استفاده کنید.
من که خودم خیلی با نمونه یهتر یاد می گیرم، اینم سایتش
http://layouts.ironmyers.com/
 

arman92

Member
یعنی همون تاثیر center رو داره ؟
سوال دیگه اینکه یه div اصلی بذارم برای منوی سمت چپ و یکی برای راست بعدش بقیه div ها که حاوی منو ها هستند رو داخل اونها قرار بدم ؟

بله دوست کار همون رو می کنه ولی خب دیگه توی XHTML این مورد قبول نیست... (Valid نیست)
به این سایت سر بزنید نمونه های زیادی برای طراحی قالب بر اساس دیو را گذاشته که می توانید متوجه بشین چطور باید از سی اس اس استفاده کنید.
من که خودم خیلی با نمونه یهتر یاد می گیرم، اینم سایتش

بله من هم موافقم.... من خودم اولا که تازه کار بودم (حالاشم نمی گم چیزی بلدم!) می نشستم سورس سایت ها رو می خودنم (مخصوصاً سایت های خارجی چون کاراشون استاندارده)
در ضمن این یک سایت مجله الکترونیکی هست که برای دولوپر ها (چه طراح ساده و چه برنامه نویس) ساخته شده...
من که خیلی ازش کمک گرفتم : WWW.Smashingmagazine.com
 

جدیدترین ارسال ها

بالا