استفاده از جدول در صفحات وب
اكنون به مهمترين قسمت در طراحي رسيديم و آن هم استفاده از جدولها براي طراحي صفحات وب است
جدولها نقش بسيار مهمي در طراحي وب داشته و اگر شما نتوانيد از جدولها به خوبي استفاده كنيد در حقيقت با دنياي طراحي وب بيگانه هستيد ما با تكميل شدن اين قسمت آموزش بايد بتوانيم طرح اوليه سايت pcseven را طراحی کنیم.
اما براي درج جدول در صفحه ميتوانيم بر روي آيكن table از نوار ا بز ار داكيومنت كليك كنيم و يا از منوي insert گزينه table را انتخاب می کنیم که در هرصورت با پنجره اي همانند شكل روبرو مواجه مي شويم دراین پنجره rows مشخص كننده تعداد رديفها و columns مشخص كننده تعداد ستونهاي جدول است.
Table wigth:عرض جدول را تعيين ميكند عرض جدولتان هم ميتواند قاطع يعني به پيكسل باشد و هم مي تواند درصدي از صفحه باشد بديهي است اگر درصد تعيين كنيد در مرورگرهاي با رزولوشن بالا هم تطبيق مي كند. اين كه شما از حالت قاطع يا درصد استفاده كنيد بستگي به خودتان دارد و طرحي كه در نظر داريد منتها اين مط لب در پروژه هاي آزمايشي كه بعدا با هم طراحي خواهيم كرد بيشتر بحث مي شود .
Border : نشانگر عرض خط دور جدول است
Cell padding : فاصله بين مختويات يك سلول با خط سلول در اين قسمت مشخص ميشود
Cell spacing : فاصله بين سلولها در اين ناحيه تعريف مي شود
Header : نحوه چيدمان جدول اشاره دارد اين مورد در رابطه با جدولهاي تو در تو كاربرد دارد به عنوان يك قاعده هميشه حالت none را انتخاب كنيد مگر در موارد خاص
Caption :عنوان جدول را در اين قسمت مي توانيد تايپ كنيد كه در اين صورت اگر گزينه بعدي بر روي پيش فرض قرار داشته باشد اين عنوان در بالاي جدول درون يك سلول جداگانه درج ميشود
Align caption : به چيدمان عنوان اشاره مي كند كه ميتواند عنوان را در بالا – پائين – سمت راست و يا در سمت چپ جدول قرار دهد اين مورد توضيحي در مورد جدولتان است شما Summary : براي راحتي درك كاركرد هر جدول توضيحي را در اين قسمت تايپ كنيد كه اين
توضيح در مرورگر به نمايش در نخواهد آمد و فقط در قسمت كدها درج ميشود كه در آينده شما بتوانيد براحتي با نگاه كردن به كدها آن را ويرايش كنيد
هميشه سعي كنيد توضيحي براي جدولتان ذكر كنيد و به ياد داشته باشيد در طرحهاي حرفه اي كاري وجود توضيح بسيار به شما كمك خواهد كرد. به محض ورود جدول به صفحه در بالاي جدول ما با كادري بنامTable widths مواجه مي شويم اين
ابزار بسيار سودمند و از مزيتهاي ديگر اين برنامه در مقابل برنامه فرونت پيج مايكروسافت است
مسير فعال يا غير فعال كردن اين ابزار بدين صورت است View /Visual Aids/Table Widths
در اين ابزار در خط بالا طول جدولتان درج شده در كنار آن يك مثلث كوچك هم وجود دارد كه اگر بر روي آن كليك كنيد با منويي مواجه ميشويد كه توسط اين منو شما ميتوانيد كل جدول را انتخاب كنيد يا كل ارتفاع و عرض جدول را حذف كنيديا كل عرض جدول را يكسان سازي كند و گزينه آخر هم اين ابزار را از صفحه محو ميكند براي فعال سازي مجدد هم از مسير گفته شده در بالا اقدام كنيد.
در مورد ستونها هم همچين منويي وجود دارد منتها گزينه ها تفاوت دارد بصورتي كه گزينه اول باعث سلكت شدن آن ستون مي شود گزينه دوم باعث پاك شدن عرض ستون و گزينه سوم آن ستون را به دو قسمت كرده منتها قسمت جديد را در سمت چپ ستون فعلي قرار ميدهد و گزينه آخر هم همين كار را انجام مي دهد با اين تفاوت كه ستون جديد در سمت راست ستون فعلي ايجاد خواهد شد.
ما مي توانيم گزينه هاي ديگري را هم پس از ايجاد جدول در آن تغيير دهيم بر روي جدولي كه در صفحه قرار گرفته رفته و كل جدول را سلكت كنيد و به پانل گزينه ها نگاهي بيندازيد.
اگر در پانل گزينه ها اين گزينه ها را نديديد در گوشه اين پانل بر روي مثلثي كه با فلش نشان داده شده كليك كنيد تا كل پانل باز شود با باز شدن كل پانل اين گزينه ها هم نمايش مي يابند
اين گزينه ها  گزينه اول براي حذف عرض ستونها و دو گزينه بعد مي تواند عرض ستونها را بر حسب درصد يا قاطع (پيكسلي ) تعريف كند تبديل مستقيم واحدهاي قاطع به درصدي و بالعكس از مزيتهاي ديگري است كه اين برنامه به نسبت فرونت پيج مايكروسافت دارد
اين گزينه ها  هم همان عمل را منتها در ارتفاع جدول انجام ميدهد.
با Bg color ميتوانيد رنگ بك گراند جدول را تعيين كنيد.
اگر مايل بوديد تصويري را بعنوان بك گراند قرار دهيد آن را از كادر bj image انتخاب كنيد.
Bordr color رنگ خطوط جدول را معيين مي كند.
اين از تنظيماتي كه مي شد براي كل جدول اعمال كرد اما اگر نشانگر ماوس را در هر سلول قرار دهيد گزينه هايي هم براي آن سلول نمايان مي شود در اين لحظه اين گزينه ها در پانل گزينه ها ظاهر مي شود.
در اين قسمت اين گزينه ميتواني سلولي كه نشانگر ماوس در آن قرار دارد را تقسيم كند با كليك بر روي اين گزينه پنجره زير به نمايش مي آيد.
نوع تقسيمات را در بالا مشخص كنيد كه بصورت رديفي يا ستوني باشد و تعداد را هم از كادر پائين تعيين كنيد البته اگر دو سلول را با هم انتخاب كنيد اين گزينه تغيير كرده و امكان يكي كردن دو سلول منتخب را براي شما فراهم ميكند.
كادرهاي Vert و Horz چيدمان افقي و عمودي مطالب داخل سلول را معيين ميكند.در كادرهاي H و W عرض و طول سلول را مشخص كنيد.
اگر متني را شما در داخل سلولها تايپ كنيد با زياد شدن متن سلول بطور عمودي افزايش يافته تا تمام متنتان جا بگيرد اما اگر گزينه no wrap را تيك بزنيد سلول در جخت افقي گسترش مي يابد تا متنتان هم جا شود و هم در يك خط قرار بگيرد
ساير گزينه ها هم مشابه گزينه هايي است كه در مورد جدولها توضيح داده شد كه تعيين كننده رنگ بك گراند – انتخاب تصويري براي بك گراند و ضخامت كادر سلول است خب در اينجا مبحث جدول به پايان رسيد منتها همين مطالب كم دنيايي از مطالب را در خود دارد مطمئن باشيد در هر طراحي بايد ۷۰ درصد خود را در جدولها صرف كنيد
فقط چند نكته
۱ – شما ميتوانيد چندين جدول تو در تو را براي طرحتان ايجاد كنيد
۲ – سعي كنيد سلول مخصوص قرار گيري لينك و لوگو را بصورت قاطع تعريف كرده و سلول حاوي متون را به درصد تعريف كنيد در اين
صورت در هر مرورگري با هر رزولوشن مانيتوري صفحه شما به هم نخواهد ريخت
|
