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

شروع موضوع توسط mohammad_molana ‏9 مارس 2008 در انجمن زبان HTML

  1. mohammad_molana

    mohammad_molana Member

    ارسال‌ها:
    232
    تشکر شده:
    356
    امتیاز دستاورد:
    16
    سلام

    یه سوال

    چرا در طراحی قالب های حرفه ای فرنگی به جای استفاده از جدول ها از div استفاده می کنن؟
     
    نوشته شده توسط mohammad_molana در ‏9 مارس 2008
  2. marSoul

    marSoul Member

    ارسال‌ها:
    110
    تشکر شده:
    76
    امتیاز دستاورد:
    16
    در حال حاضر مسئله مهم در طراحی سایت semantic (با معنی) بودن کد هستش. به این معنی که وقتی در حال نوشتن کد هستید به معنای اون کد و کاربردی که داره دقت ویژه ای بکنید، چون همه screen reader ها نسبت به کدها حساس هستند و از نظر accessibly بسیار اهمیت داره، بنابراین استفاده از table برای ساخت layout سایت کار اشتباهی است جدا از دردسرهای خیلی زیادی که table ها دارن کد table برای ایجاد اطلاعات دسته بندی شده و جداول هست نه برای ساخت layout.
    برای همین باید استفاده از table ها رو فراموش کنی و در جای خودشون ازشون استفاده کنی همینطور در مورد سایر کدها...
     
    نوشته شده توسط marSoul در ‏9 مارس 2008
    mohammad_molana از این پست تشکر کرده است.
  3. mohammad_molana

    mohammad_molana Member

    ارسال‌ها:
    232
    تشکر شده:
    356
    امتیاز دستاورد:
    16
    اصلا لایوت چیه؟
    به چه درد می خوره؟

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

    ممنون می شم یه توضیح کاربردی بدین در موردش که کل کار رو درک کنم
     
    نوشته شده توسط mohammad_molana در ‏10 مارس 2008
  4. marSoul

    marSoul Member

    ارسال‌ها:
    110
    تشکر شده:
    76
    امتیاز دستاورد:
    16
    منظور از layout نحوه چیدمان اجزا مختلف روی صفحه سایت است، قدیم از table برای چیدن این اجزا کنار هم استفاده می شد ولی الان به دلیل مسایلی که گفتم از div باید استفاده بشه. layout یک کلمه است فقط و عملا چیز قابل لمسی نیست فقط منظور از آن نحوه چیدمان کل اجزا در سایت است، مثلا یک سایت ممکنه 2 ستونه باشه یک ستون برای main content و یک ستون برای sidebar که به کل این layout گفته می شه معمولا هم در وبلاگها بیشتر این نوع layout دیده می شه. قسمت main content یک div است که معمولا در یک loop قرار می گیرد و تکرار می شود و sidebar هم یک div دیگر در کنار آن است.
     
    نوشته شده توسط marSoul در ‏10 مارس 2008
  5. alionline1366

    alionline1366 Active Member

    ارسال‌ها:
    3,028
    تشکر شده:
    2,697
    امتیاز دستاورد:
    36
    دوست من استفاده از div و tableless کار کردن باعث سرعت رندر سایت شما توسط مرورگرها میشه و خوانایی کد شما خیلی راحت تر میشه کار با css عالی میشه و خود شما هم برای کار کردن راحت ترید و خیلی از کارها هم که با تیبل و ساختار تیبلی مشکل هست با div راحت تر میشه
     
    نوشته شده توسط alionline1366 در ‏10 مارس 2008
    echessdesign از این پست تشکر کرده است.
  6. grlearn

    grlearn Member

    ارسال‌ها:
    181
    تشکر شده:
    47
    امتیاز دستاورد:
    16
    خب حالا چطور میشه از div استفاده کرد
     
    نوشته شده توسط grlearn در ‏11 مارس 2008
  7. marSoul

    marSoul Member

    ارسال‌ها:
    110
    تشکر شده:
    76
    امتیاز دستاورد:
    16
    خیلی راحت با استفاده از تگهای <div> و <div/>، محتویات خودتون رو داخل این تگها قرار بدید، برای positioning هم باید از css استفاده کنید
     
    نوشته شده توسط marSoul در ‏11 مارس 2008
  8. alionline1366

    alionline1366 Active Member

    ارسال‌ها:
    3,028
    تشکر شده:
    2,697
    امتیاز دستاورد:
    36
    شما با استفاده از تگهای div p ul li span و غیره و استایل دهی به اینها میتونی بهترین ساختارهای table less رو داشته باشی فقط از تفاوتهای مرورگرهای مختلف در استفاده از css غافل نشو
     
    نوشته شده توسط alionline1366 در ‏12 مارس 2008
  9. meysamz

    meysamz Member

    ارسال‌ها:
    285
    تشکر شده:
    104
    امتیاز دستاورد:
    16
    بهترین کار اینکه از کد های منسوخ شدهخ HTML استفاده نشود و تا جایی که امکان دارد از DIV استفاده کنید.
    البته برای اینکار نیاز به تسلط کامل به CSS و CSS Hack دارید.
    امروزه اکثر طراحان حرفه ای وب، سایت ها را فقط با DIV می سازند.
    البته این نکته نامانده نماند که هنوزم نمیشه گفت که میشه Table را منسوخ شده دانست.
    بعضی جا ها نمیشه ازش گذشت، مثل گرید ها و ...
     
    نوشته شده توسط meysamz در ‏23 آوریل 2008
  10. arman92

    arman92 Member

    ارسال‌ها:
    84
    تشکر شده:
    30
    امتیاز دستاورد:
    6
    سلام.

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

    ataturk Member

    ارسال‌ها:
    46
    تشکر شده:
    6
    امتیاز دستاورد:
    6
    حالا در این رابطه یه سوال . من هم تا به حال از table برای طراحی استفاده می کردم و البته یه مدتی هست می خوام به DIV کوچ کنم . یعنی در CSS موقعیت X,Y,H رو بدیم یعنی تعیین کنیم ارتفاع اون از محورهای گفته شده چقدر باشه یا نه با همون align به راحتی میشه کارها رو انجام داد .
    اگر از اساتید یه توضیح عملی کوچیک بگه ردیف میشم . چون واقعا کار با table دردسر داره . من این رو خدوم به صراحت می گم .
    اگر راهنمایی کنید ممنون میشم .
    البته با position هم ور رفتم ولی نمی دونم چرا DIV ها سطر بعدی میان یعنی کلا یه راهنمای کلی بکنید
     
    نوشته شده توسط ataturk در ‏20 می 2008
  12. sanaz64

    sanaz64 New Member

    ارسال‌ها:
    15
    تشکر شده:
    2
    امتیاز دستاورد:
    1
    سلام
    من سعی کردم برای طراحی سایتم از div استفاده کنم. اما div فقط یک جدول بندی افقی رو ایجاد میکنه. چطور میشه با div ردیفهایی با چند ستون ساخت؟
     
    نوشته شده توسط sanaz64 در ‏20 می 2008
  13. meysamz

    meysamz Member

    ارسال‌ها:
    285
    تشکر شده:
    104
    امتیاز دستاورد:
    16
    منظورتون از جدول بندی افقی چیه؟
    شما با استفاده از خواصیت FLoat می توانید DIV ها را کنار هم بچینید، حالا اگر می خواهید این ستو نبندی شما چند ردیفه دیگر هم داشته باشند همون خط ها را تکرار کنید.
     
    نوشته شده توسط meysamz در ‏20 می 2008
  14. meysamz

    meysamz Member

    ارسال‌ها:
    285
    تشکر شده:
    104
    امتیاز دستاورد:
    16
    نکته اول: کار با Table هیچ دردسری نداره، اگه با HTML به اندازه کافی آشنا باشید.
    نکته دوم: خاصیت position زمانی استفاده می شه که بخواهید مختصات دی آی وی را عوض کنید، که اینکار جزء در موارد خاص کاربردی نداره و چون از ALIGN صحبت کردین حدس من اینکه شما می خواهین با مختصات دهیDIV ها را بچینید که راهش این نیست!
     
    نوشته شده توسط meysamz در ‏20 می 2008
  15. arman92

    arman92 Member

    ارسال‌ها:
    84
    تشکر شده:
    30
    امتیاز دستاورد:
    6
    من برای این دوستمون یکم بیشتر توضیح می دم... البته با اجازه بزرگتر ها!

    ببینید اگه بخواین دو تا ناحیه داشته باشید مثلاً یکی چپ و دیگری راست! که توی یک مختصات عرضی باشن (محور 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# بلده؟
     
    نوشته شده توسط arman92 در ‏21 می 2008
    mohammad_molana و ataturk از این پست تشکر کرده اند.
  16. ataturk

    ataturk Member

    ارسال‌ها:
    46
    تشکر شده:
    6
    امتیاز دستاورد:
    6
    بله دقیقا منظورم همونی بود که آرمان جان گفته بودند . با table ها به هیچ وجه مشکلی ندارم . و خیلی راحتم . ولی الان همه دارن با div کار می کنند . و می گن این استانداردتره . خوب چه بسا من هم با div کار کنم
     
    نوشته شده توسط ataturk در ‏21 می 2008
  17. ataturk

    ataturk Member

    ارسال‌ها:
    46
    تشکر شده:
    6
    امتیاز دستاورد:
    6
    متاسفانه دکمه تشکر برای تشکر کردن فعلا فعال نیست وقتی که فعال شد حتما از اون استفاده می کنم .
     
    نوشته شده توسط ataturk در ‏21 می 2008
  18. ataturk

    ataturk Member

    ارسال‌ها:
    46
    تشکر شده:
    6
    امتیاز دستاورد:
    6
    یعنی همون تاثیر center رو داره ؟
    سوال دیگه اینکه یه div اصلی بذارم برای منوی سمت چپ و یکی برای راست بعدش بقیه div ها که حاوی منو ها هستند رو داخل اونها قرار بدم ؟
     
    آخرین ویرایش: ‏21 می 2008
    نوشته شده توسط ataturk در ‏21 می 2008
  19. meysamz

    meysamz Member

    ارسال‌ها:
    285
    تشکر شده:
    104
    امتیاز دستاورد:
    16
    به این سایت سر بزنید نمونه های زیادی برای طراحی قالب بر اساس دیو را گذاشته که می توانید متوجه بشین چطور باید از سی اس اس استفاده کنید.
    من که خودم خیلی با نمونه یهتر یاد می گیرم، اینم سایتش
    http://layouts.ironmyers.com/
     
    نوشته شده توسط meysamz در ‏21 می 2008
    hosseintdk775 و ataturk از این پست تشکر کرده اند.
  20. arman92

    arman92 Member

    ارسال‌ها:
    84
    تشکر شده:
    30
    امتیاز دستاورد:
    6
    بله دوست کار همون رو می کنه ولی خب دیگه توی XHTML این مورد قبول نیست... (Valid نیست)
    بله من هم موافقم.... من خودم اولا که تازه کار بودم (حالاشم نمی گم چیزی بلدم!) می نشستم سورس سایت ها رو می خودنم (مخصوصاً سایت های خارجی چون کاراشون استاندارده)
    در ضمن این یک سایت مجله الکترونیکی هست که برای دولوپر ها (چه طراح ساده و چه برنامه نویس) ساخته شده...
    من که خیلی ازش کمک گرفتم : WWW.Smashingmagazine.com
     
    نوشته شده توسط arman92 در ‏22 می 2008
    ataturk از این پست تشکر کرده است.

به اشتراک بگذارید