تبلیغات

مترجم سایت

مترجم سایت

mirosoftblog - درس 19 - آرایش در جدول
به وبلاگ مایكروسافت بلاگ خوش آمدید******مارا از نضرات خود بی بهره نگذارید******از محصولات فروشگاه بازدید کنید****** با خرید از فروشگاه اینترنتی از مزایای خوبی بهره مند شوید***با عضویت در این وبلاگ از مطالب سرگرم کننده ومفیدی بهره مند شوید
تبلیغات
<"">>

منوی اصلی

پیوندهای روزانه
 سایتی پر از شکلک برای وبلاگ شما
 همه لینک ها
 ارسال لینک روزانه

درس 19 - آرایش در جدول 


آرایش در جدول 


اهداف این درس

1- آرایش جدول در یک صفحه وب با ردیفهای افقی و عمودی در یک نمایش متن در یک صفحه مشبک
2- یکپارچه کردن عکسها و متون
3- ایجاد جدولی با سلولهایی با رنگهای متفاوت
4- ایجاد جداولی که در زمینه آنها از عکس استفاده شده است .

شروع درس 

جداول با HTML3 معرفی شد و بعدها با Netscape گسترش پیدا کرد که آرایش را برای المانها و عناصر در صفحه انجام می داد . یکی از بیشترین استفاده های جدول زمانی است که شما می خواهید ستونی از متن را اضافه کنید .
کدهای HTML برای جداول ممکن است خیلی پیچیده به نظر برسد اما ما با ساخت جداول ساده ای کار را شروع می کنیم .
جداول از انتهای چپ با ستونهایی به سمت راست شروع می شوند . سپس ردیف دوم نیز با چنین ستونهایی ادامه دارد و ...
-- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > -- > هر کدام از این خانه های مشبک را یک Cell می نامند .

< b >تگ < Table >< /b > 



صفت border در تگ Table به مرورگر می فهماند که یک قابی در دور جدول با ضخامت مختلفی که عدد آن بر حسب pixel برابر با مقدار Border قرار می گیرد ، ایجاد کنید هر سطر با تگهای < tr > ... < / tr > ایجاد می شود و اطلاعات هر ردیف با ستونهای آن که با تگ < td > ... < / td > ایجاد می شود توصیف می گردند .
هر تگ < td > ...< / td > می تواند شامل انواعی از تگهای HTML مثل سرفصلها و ابر متنها و تصاویر خطی و غیره باشد ، صفات زیادی را برای تراز کردن اقلام جدول می توانید به کار ببرید .
< td align=left >aligns all elements to the left side of the cell(this is the default setting)< td valign=top >aligns all elements to the top of the cell
< td align=right > aligns all elements to the right side of the cell< td valign=bottom >aligns all elements to the bottom of the cell < td valign=bottom >aligns all elements to the bottom of the cell later, siv. Longhorn dec lared that all markers of cheese would have to be certified befor commencing production
< td align=center >aligns all elements to center of the cell< td valign=middle >aligns all elements to the middle of the cell(this is the default setting)


ردیف ها و ستون ها

جداول ساده و زیبا و مربع شکل هستند . جدولی که در بالا ذکر شد شامل 3 ردیف ستون و 3 سطر می باشد ، با صفات Colspan و Rowspan چه می توان کرد ؟

تذکر :

صفت استفاده شده برای ستون دوم از سطر اول را با هم تلفیق کرده است ، همچنین می توانیم متن را در وسط هر خانه آرایش دهیم .



در قبل 2 ستون را با هم تلفیق کردیم و بصورت یک سلول واحد در آوردیم . در اینجا می توانیم 2 سطر را با هم تلفیق کنیم و بصورت واحد در آوریم :




اطلاعات یک جدول 
1- صفحه lesson2.html را باز کنید .
2- مواردی که بین < pre > ...< / pre > را تماما حذف کنید .
3- این موارد را اضافه کنید :


تذکر : < td >< /tr >< /table >
نگاه کنید به ردیف اول کدها سر فصل جدول تگ< th > و< th / > دقیقا مانند < td > و < td / > عمل می کنند . متنی که بین < th > و < th / > نوشته می شود بطور خودکار بصورت جسم و برجسته به نمایش در می آید .
نام دوره اموزشینام مدرسطول دوره
internetxxx
htmlxxx40 h

4- صفحه خود را ذخیره و آن را مجددا بار گذاری کنید .
مواردی را به جدول خود اضافه کنید . توانائیها و صفات دیگری در تگ < table > وجود دارد که باعث آرایش جدول می شود 


X ضخامت دیواره خارجی جدول می باشد . صفت Cellpadding فضای خالی بین عناصر جدول از دیواره جدول می باشد . هر چه Y بیشتر باشد خانه جدول بزرگتر خواهد بود . صفت Cellspacing فاصله بین خانه های جدول را تنظیم می کند .
تگ را بصورت فوق در آورید : 

1- جدول قبل را بصورت زیر ویرایش کنید . 

تگ < caption > نیز مابین تگ های < table > و < table /> قرار می گیرد .
2- برای سرگرمی هر متنی که مابین < th > و < th /> قرار می گیرد را تغییر دهید.


3- سپس جدول را به وسط صفحه انتقال دهید . اگر مرورگر شما از تگ < centert > و < center / > پشتیبانی می کند جدول را با این تگ محاصره کنید .
4- نتایج خود را ذخیره و صفحه را مجددا بار گذاری کنید .
5- در آخر می خواهیم یک ستون به طرف چپ اضافه کنیم . حالا می توانیم یک خانه خالی با اضافه کردن تگ < th > < th / > به ردیف اول جدول اضافه کنیم.


6- حال به ردیف دوم از جدول می رویم و خانه ای که 4 ردیف را در هم ادغام کرده به آن اضافه می کنیم .



جدول سایز خود را با محتویاتی که در خانه های جدول قرار داده می شود تعیین می کند ما چند تگ < br > اضافه کردیم تا از پهن شدن خانه های جدول جلوگیری کنیم شاید بخواهید تحقیق کنید که اگر این تگها را حذف کنیم چه پیش می آید ؟
7- در ردیف 6 جدول خانه ای اضافه می کنیم که به اندازه 2 ستون پهنا دارد.


8- نتایج خود را ذخیره و صفحه بارگذاری کنید . 

جدول های غیر قابل روئیت ( خیالی )

جدول همراه با قاب دور برای نمودارها و اطلاعات مربوط به اهداف شما مهم می باشد . اصطلاح خیالی را به این خاطر به کار می بریم که برای خواننده روشن نیست که به یک جدول نگاه می کند . جدول خیالی غیر قابل رویت با همان تگ ساخته می شود با این تفاوت که Border آن صفر قرار داده می شود .
< table border= 0 > تمرین :
جداول خود را با تغییر Border به عدد صفر تغییر دهید . نتایج خود را ذخیره کنید .

جدا کردن لسیتهای طولانی

به عنوان یک تمرین در جداول خود از لیستهای متعدد استفاده کنید .

رنگی کردن جداول

اغلب مرورگرها از رنگی کردن جداول پشتیبانی می کنند. 
مکان جدول

به تمامی ردیفها و ستونهای ساخته شده رنگ اضافه کنید .

تذکر :

شما می توانید از عکس به جای پیش زمینه جداول خود و پاورقی در سلولهای آن استفاده کنید . تذکر :
کاربرد ندارد در IE و 

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

مروری بر مطالب 

1- به چه منظوری المانهای یک صفحه را در جدول قرار می دهند ؟
2- چه فرقی بین تگهای < td / > و < td > و < th > و< th / > وجود دارد.
3- صفات Colspan=X و Rowspan=Y به چه منظوری به کار می رود ؟
4- چگونه یک جدول بدون قاب ایجاد می شود ؟
5- چگونه یک سطر از جدول را رنگی کنیم ؟
6- چگونه یک عکس را پیش زمینه یک جدول کنیم ؟

تمرین : 

آموزش داده شده را در صفحات خود بکار ببرید .

فصل اول
مقدمه 
درس 1 - ایجاد اولین سند HTML
درس 2 - ویرایش یک سند HTML 
درس 3 - نشانه گذاری 6 درجه 
درس 4 - شکستن پاراگراف 

 
فصل دوم
درس 5 - سبکهای مختلف نوشتاری 
درس 6 - < ul >, < ol > لیستها 
درس 7 - قالب بندی فایلهای گرافیکی و استاندارد های مورد استفاده در صفحات وب
درس -٧-ب - قرار دادن تصاویر در اسناد

 
فصل سوم
درس 8 - LINK ( اتصال )
٨-ب - لینك به سایت دیگر
٨-ج اتصال به یک سایت دیگر از اینترنت 
٨-د - اتصال به قسمتی از همان صفحه 
٨-ه - اتصالات ابر متن و تصویرهای لینک شده
درس 9 - به ردیف در آوردن متن

 
فصل جهارم
درس 10 - کاراکترهای ویژه
درس 11 - لیستهای تعریف
درس 12 - آدرسهای زیر نویس و اتصالات email
درس 13 - وارد کردن یک توده متن بطوریکه از بقیه متن متمایز باشد 
درس 14 - گذاشتن بافت برای صفحه
درس 15 - عدم استفاده از تگهای blink و Marquee 

 
فصل پنجم
درس 16 - زیبا کردن متن 
درس 17 - ایجاد خط
درس 18 - Extra Alignment
درس 19 - آرایش در جدول 
درس 20 - نقشه های تصویری 

 
فصل ششم
درس 21 - Meta tag
درس 22 - پنجره Target
درس 23 - فریم کردن صفحه
درس 24 - اضافه کردن فرم به صفحات وب
درس ٢٤-ب - بوجود آوردن فرم ها 
درس 25 - چند رسانه ای در صفحات شما
25 -ب - اضافه کردن فیلم و صوت -multimedia
درس 25 - ج - قالبهای صوتی مورد استفاده
منبع:www.ostadonline.com

درباره وبلاگ

مدیر وبلاگ: سیدحجت الله سجادی

آمار وبلاگ
کل بازدید:
بازدید امروز:
بازدید دیروز:
بازدید این ماه:
بازدید ماه قبل:
تعداد نویسندگان:
تعداد کل پست ها:
آخرین بازدید:
آخرین بروز رسانی:


آرشیو مطالب
  تیر 1390 (14)
  خرداد 1390 (4)
  اردیبهشت 1390 (1)
 لیست آرشیوها

امکانات