English
جمعه, 21 ارديبهشت 1403

 


امور فرهنگی و پژوهشی
امور پژوهشی
انجمن علمی دانشجویی
گروه های آموزشی (Department) دانشگاه علمی کاربردی واحد 13
رشته کامپیوتر
کاردانی
اصول طراحی صفحات وب
عظیمی
طراحی قالب یک صفحه وب با جدول

موضوع: طراحی قالب یک صفحه وب با جدول

طراحی قالب یک صفحه وب با جدول 9 سال 4 ماه ago #109372

طراحی قالب یک صفحه وب با جدول
برای طراحی قالب اصلی صفحات وب ابتدا می بایست طرح اولیه ای را در ذهن یا بر روی کاغذ داشته باشید. ترجیح می دهید سایتتان چه شکلی باشد؟ چیدمان اشیاء درون صفحه چگونه باشد؟ صفحه به چه بخش هائی تقسیم می شود؟ ابعاد هربخش و محتوی درون آن چیست؟ به یک مثال توجه نمائید.

یک نمونه از طراحی قالب صفحه که معمول است بدین شرح است: ابتدا صفحه به سه قسمت بالا، وسط و پائین تقسیم بندی می شود. قسمت بالا جهت بنر ، وسط صفحه محتوی سایت و قسمت پائین جهت پانوشت ها و کپی رایت سایت در نظر گرفته می شود. قسمت وسط صفحه خود به سه قسمت راست، میانی و چپ تقسیم می شود. در سمت راست منوی سایت قرار خواهد گرفت، در قسمت میانی محتوی و اطلاعات اصلی سایت ارائه می گردد و در سمت چپ تصاویری تبلیغاتی از خدماتی که توسط سایت ارائه خواهد شد به نمایش در می آید.

<html dir=”rtl“>

<head>

<title>Welcome</title>

</head>

<body>

<table border=”1″ width=”800px” height=”100%” align=”center”>

<tr>

<td colspan=”3″ height=”70px” width=”800px”>

Banner

</td>

</tr>

<tr>

<td width=”120px”>Menu</td>

<td width=”520″>Main</td>

<td width=”160px”>Advertisment</td>

</tr>

<tr>

<td colspan=”3″ height=”40px”>Footer</td>

</tr>

</table>

</body>

</html>

نکات :

متن فارسی برخلاف انگلیسی از راست به چپ نوشته می شود و ما می خواهیم یک سایت به زبان فارسی طراحی نمائیم، بنابراین در همان ابتدای کار صفت dir از تگ html را روی مقدار rtl که مخفف right to left می باشد تنظیم می نمائیم. این مقدار به تگ هایی که درون تگ html قراردارند (یعنی همه تگها !!!) به ارث خواهد رسید. مثلا تمامی جداولی که در این صفحه قرار می دهید راست به چپ می گردند و نیازی نیست برای آنها صفت rtl را تنظیم نمائید مگر آنکه بخواهید آنها را چپ به راست تنظیم کنید.

قبلا ذکر شد که قصد داریم سایت دارای سه قسمت بالا ، وسط و پائین باشد بنابراین از یک جدول دارای سه ردیف استفاده می کنیم. ردیف وسط دارای سه سلول می باشد اما ردیف های اول و سوم فقط دارای یک سلول هستند پس در این دو ردیف عبارت colspan=”3″ را نوشته ایم تا بگوئیم قرار است تک سلول ردیف اول و سوم به اندازه سه سلول پهنا داشته باشند.

عرض کل جدول را ۸۰۰px و تراز آن را center تنظیم نموده ایم. اگر عرض رزولوشن صفحه نمایش کاربر بیش تر از ۸۰۰px بود (که در اکثر موارد اینچنین است) جدول (مطالب سایت) در وسط مرورگر نمایش داده می شود و حاشیه سفیدی در چپ و راست به وجود می آید که نمای مناسبی به سایت ما خواهد داد.

قسمت وسط (ردیف دوم) توسط سه سلول به سه بخش راست (منو) ، میانی (محتوی اصلی) و چپ (تصاویر تبلیغاتی) تقسیم شده است. با استفاده از صفت width عرض هر بخش را تعیین نموده ایم. به عنوان مثال سهم منوی سمت راست را ۱۲۰px تعیین کرده ایم. دقت کنید که حاصل جمع عرض هرسه سلول همان ۸۰۰px خواهد شد. البته شما می توانید به سلیقه خود این نسبت ها را تغییر دهید. هدف حفظ تناسب و جلب رضایت بازدیدکننده است.
مدير دسترسي عمومي براي نوشتن را غيرفعال كرده.
مدیران انجمن: بهاره عظیمی جوزانی
امور فرهنگی و پژوهشی
امور پژوهشی
انجمن علمی دانشجویی
گروه های آموزشی (Department) دانشگاه علمی کاربردی واحد 13
رشته کامپیوتر
کاردانی
اصول طراحی صفحات وب
عظیمی
طراحی قالب یک صفحه وب با جدول