عنوان : آموزش کامل طراحی سایت(متخصصین ایران) - درس پنجم
متخصصین ایران طراحی سایت

طراحی جدول

به طور کلی از جدول برای طراحی فضای قالب وب استفاده کنید. استفاده از سطرها و ستونهای زیاد برای انتظام بخشهای مختلف سایت صحیح نیست و باید از CSS به جای

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

به صورت زیر استفاده کنید.

 

کدهای بالا جدولی 1*1 به صورت زیر ایجاد می کند.

 

 

برچسب TR
با استفاده از این برچسب یک سطر اضافه می شود. درون برچسب TR به تعداد لازم می توانید ستون اضافه کنید.

 

برچسب TD

با استفاده از این برچسب یک ستون اضافه می شود. درون برچسب TR به تعداد لازم می توانید با استفاده از TD ستون اضافه کنید.

 

 قطعه کدی که یک جدول با 2 سطر و 5 ستون ایجاد می کند بنویسید: 

 

ویژگیهای عمومی جدول و دستکاری آنها

ویژگی border برای اندازه کادر جدول است. اگر مقدار آن 0 باشد کادر حذف می شود.

ویژگی width برای تعیین عرض جدول است. اگر از جدول به عنوان بدنه صفحه استفاده می کنید مقدار 800 مناسب است.

ویژگی height برای تعیین ارتفاع جدول استفاده می شود که استفاده از آن توصیه نمی شود.

ویژگی dir برای پشتیبانی از فارسی بهتر است برابر rtl و برای پشتیبانی از لاتین ltr باشد.

ویژگی id برای انتصاب جدول به یک سری style که با css تهیه شده استفاده می شود که در ادامه خواهد آمد.

ویژگی class نیز برای انتصاب جدول به یک سری style که با css تهیه شده استفاده می شود که در ادامه خواهد آمد.

ویژگی bgcolor برای تعیین رنگ جدول استفاده می شود. 

 

 این ویژگی ها برای برچسب هائی مانند body, td, tr, div و برخی برچسب های دیگر نیز قابل استفاده است. اگر در یک تگ بزرگتر یک مقدار دلخواه را بکاربرده اید مجددا آنرا تکرار نکنید چون لزومی ندارد. برای نمونه اگر در تگ body از dir="rtl" استفاده کرده این لزومی ندارد در تگ های زیر مجموعه مانند table, div, p و ... مجددا از dir="rtl" استفاده کنید.

 

ویژگیهای منحصر به فرد جدول

ویژگی cellSpacing : فاصله سطرها و ستونها را از حاشیه جدول تعیین می کند.

ویژگی cellPadding : فاصله نوشته ها را از سطرها و ستونها یا حاشیه جدول تعیین می کند.

 

مجموعه کدهای زیر را در نظر بگیرید.

اگر بخواهید در این بدنه از یک جدول استفاده کنید که تمام 800 پیکسل بدنه را پرکند می توانید مقدار width جدول را 100% وارد کنید. استفاده از درصد به جای یک مقدار ثابت سبب می شود تا جدول منعطف شود. در زیر یک نمونه از روش مقدار دهی به جدول آمده است.

 

طراحی جدول به کمک dreamweaver

با نرم افزار dreamweaver کار طراحی جدول به یک بازی شبیه است. از منوی insert گزینه table را اجرا کنید. در کادر ظاهر شده ویژگیهای جدول را مطابق آنچه گفته شد تنظیم کنید.

 

- طراحی بدنه صفحه

بدنه برخی سایتها کل فضای صفحه را اشغال می کند اما در بسیاری از سایتها بدنه به اندازه 800 پیکسل طراحی شود یا اگر بدنه منعطف باشد از 80% صفحه استفاده می شود. برای تعیین عرض بدنه و همچنین راست چین بودن متن می توان ویژگیهای width و dir تگ body را مانند زیر تغییر داد:

اما بهتر است راست چین بودن را با استفاده از یک تگ div به مروگر اعلاک کرد. برای این منظور از کدهای زیر استفاده کنید:

اگر هم لازم باشد می توانید بدنه را با یک جدول قالب بدهید. در این صورت به جای تگ div از table استفاده کنید. برای تسلط کار با سطرها و ستونهای جدول تنها به تمرین بیشتر نیاز است.

 

استفاده از CSS

تنظیمات مربوط به انواع کادرها، نوع قلم و افکت های متن مانند فاصله حروف یا Bold , underline, color و ... توسط فایل های جانبی CSS قابل طراحی و استفاده است. زبان HTML اینگونه تنظیمات را با استفاده از برچسب

و برچسب انجام می دهد که CSS هر دو را منسوخ کرده است.

 




نظر شما درباره این مطلب:




مطالب مشابه

2

آموزش کامل طراحی سایت (متخصصین ایران)- درس نخست


متخصصین ایران طراحی سایت

اساس آموزش طراحی سایت ارائه شده در این بخش .....


آموزش کامل طراحی سایت (متخصصین ایران)- درس نخست                  (اطلاعات بیشتر)

4

آموزش کامل طراحی سایت (متخصصین ایران)- درس سه


متخصصین ایران طراحی سایت

مدیریت پیوندها: کار با HyperLink


آموزش کامل طراحی سایت (متخصصین ایران)- درس سه                  (اطلاعات بیشتر)

3

آموزش کامل طراحی سایت (متخصصین ایران)- درس دو


متخصصین ایران طراحی سایت

 

اصول درج متن

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

 

 

 

 

 

 


آموزش کامل طراحی سایت (متخصصین ایران)- درس دو                  (اطلاعات بیشتر)

5

آموزش کامل طراحی سایت (متخصصین ایران)- درس چهار


متخصصین ایران طراحی سایت

معرفی تگ های متا

بدون شک وقتی اقدام به فراگیری طراحی سایت نموده اید آنقدر هوشمند...


آموزش کامل طراحی سایت (متخصصین ایران)- درس چهار                  (اطلاعات بیشتر)

7

آموزش کامل طراحی سایت(متخصصین ایران) - درس شش


متخصصین ایران طراحی سایت

آموزش CSS

واژه CSS مخفف Cascade Style Sheets جهت طراحی انواع ...


آموزش کامل طراحی سایت(متخصصین ایران) - درس شش                  (اطلاعات بیشتر)

10

آموزش کامل طراحی سایت (متخصصین ایران)- درس نه


متخصصین ایران طراحی سایت

به عنوان یک طراح سایت باید توانائی کار با...


آموزش کامل طراحی سایت (متخصصین ایران)- درس نه                  (اطلاعات بیشتر)