جدول و صفحه آرایی
از دیدگاه بسیاری از افراد، جدولها به خودی خود در طراحی سایت جذاب نیستند. اما جدولها ابزار مناسبی برای صفحه آرایی صفحه وب می باشند. اصول طراحی گرافیک این است که عناصر ویژوال به نحو خوبی در کنار هم قرار گیرند. جدولها می توانند برای این منظور مورد استفاده قرار گیرند. جدولها برای تنظیم نگارش بسیار مفیدند. استفاده از جدول برای صفحه آرایی مستلزم به کارگیری صفت
از دیدگاه بسیاری از افراد، جدولها به خودی خود در طراحی سایت جذاب نیستند. اما جدولها ابزار مناسبی برای صفحه آرایی صفحه وب می باشند. اصول طراحی گرافیک این است که عناصر ویژوال به نحو خوبی در کنار هم قرار گیرند. جدولها می توانند برای این منظور مورد استفاده قرار گیرند. جدولها برای تنظیم نگارش بسیار مفیدند. استفاده از جدول برای صفحه آرایی مستلزم به کارگیری صفت WIDTH است. صفت WIDTH مربوط به دستور <TABLE > عرض جدول را با پیکسل یا با درصد مثل ۸۰٪ مشخص میکند. همچنین، هر پیکسل مربوط به خانه های جدول را می توان با استفاده از صفت WIDTH مربوط به دستورات < TD > یا <TH > مقدار داد.
مثالی ۵-۷
صفحه آرایی با استفاده از جدولها. نتیجه اجرا در شکل ۵-۷ آمده است.
!>DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
HTML>>
<HEAD>
<TITLE>Table Layout</tITLE>
HEAD>>
<BODY>
<"TABLE BORDER="0>
<TR>
<TD WIDTH="50"> <BR></TD>
<TD WIDTH="400">
<H1 ALIGN="center">Layout is here<H1>
<HR>
<P> <H3>This is a very simple layout that would have been nearly impossible to do without tables.</P?</H3<
<TD/>
<TD WIDTH="100"> </TD>
</TR>
</TABLE>
</BODY>
</HTM>
در این مثال، مقدار صفت BORDER برابر با صفر شده است. البته نیازی به این صفت نیست، یعنی اگر مرورگر صفت BORDER را در دستور <TABLE > نبیند، حاشیه ای رسم نمی کند. هنگام ایجاد سلولهای خالی جدول، خوب است که از <BR> برای رد کردن سطر یا فضای خالی غیر قابل شکستن (:nbsp&) در خانه جدول - .استفاده کرد تا نظم عمودی آن خراب نشود جدولها می توانند با استفاده از پس زمینه، صفحه ارایی دقیقتری را ایجاد کنند. در دستور <BODY> صفتی به نام BACKGROUND وجود دارد که می تواند یک فایل تصویر را به عنوان زمینه صفحه در نظر بگیرد. با استفاده از این خاصیت می توان زمینه جدول را تعیین و سپس جدول را تشکیل داد.
مثالی ۶-۷
استفاده از جدول برای صفحه آرایی صفحه وب. نمونه اجرا در شکل ۶-۷ آمده است. در بخشی از این برنامه، تصویری به صفحه وب اضافه میشود. اگر تصویری در صفحه خود دارید، آن را به جای فایل armnet.gif در دستور IMG تایپ کنید.
<"DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN!>
<HTML>
<HEAD>
< Table Layouto <TITLE< </TITLE
</HEAD>
<BODY >
<TABLE CELLSPACING="0" CELLPADDING="10" BORDER="1" WIDTH="550">
<TR>
<"TD COLSPAN="2" ALIGN="Center>
<"FONT FACE="Arial blak, helvetica, scans-seif" SIZE="+2>
INSTITUDE: OLOMRAYANEH<FONT></TD>
<TR>
<TR>
<"TD WIDTH="50%" VALIGN="middle>
<"FONT FACE="Arial, Helvetica, Scans-serif" SIZE="4>
<B> Olomrayaneh is a publiser that publishes books about computer science. Already it published 12 books. </B></FONT></TD>
<"TD WIDTH="50" ALIGN="center>
<IMG SRC="C:\armnet.gif" WIDTH="90" HEIGHT="90 BORDER="0">
<TD/>
</TR>
<TR>
<"TD COLSPAN="2" ALIGN"="center"> <FONT FACE="Arial, Helvetica, Scans-serif SIZE="4>
<B><i> OLOMRAYANEH IS SUCCESSFULL. GOOD LUCKY.</i></B></FONT></TD>
</TR>
<TR>
<TD WIDTH="50%" VALIN="top" > <B> Olomraneh's books are very useful. Mr. Jafarnezahd is it's manager,
He is very serius in his works.</B></TD>
TD WIDTH="50%" VALIGN="top"><B> Some of olomrayaneh's
books are: Computer Networks, C++, Delphi, Assembly,
Web page design, Pascal, Visual C++, Internet,
Database systems./B>
</TD>
</TR>
</TABLE>
<BODY >
<ΗΤΜL>
با استفاده از جدولها می توان صفحات بسیار زیبا و در عین حال پیچیده را مورد استفاده قرار داد. ترکیبی از متنها وتصاویر، صفحات زیبایی را ایجاد می کند ولی هرچه میزان تصاویر در صفحات وب بیشتر باشد، سرعت استفاده ازآن کاهش می یابد. نمونه ای از کاربرد پیچیده جدول را در مثال ۷-۷ خواهید دید.
----
مثال ۷-۷
برنامه ای که با استفاده از جدولها، صفحه ای را به کمک متن و تصویر ایجاد می کند. دقت داشته باشید که برای اجرای این برنامه، باید فایلهای تصویری را در دسترسی داشته باشید. نتیجه اجرای این برنامه در شکل ۷-۷ آمده است.
!>DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN<"
<HTML>
<HEAD>
<TITLE> Rayaneh Publisher Home page.</TITLE>
</HEAD>
<BODY >
<"TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="570>
<TR>
<TD>
<"IMG SRC="c:\armnet.gif" BORDER="0" HEIGHT ="45" WIDTH="45>
</TD>
<"TD COLSPAN="4>
<"IMG SRC="c:\rayaneh.gif" BORDER="O" HEIGHT="45" WIDTH="446>
</TD>
</TR>
<TR>
<TD VALIGN="top" ROWSPAN="7" WIDTH="124">
<"IMG SRC="c:\univer.gif"BORDER="0" HEIGHT="248" WIDTH="124>
</TD>
<TD ROWSPAN="7" VALIGN="top" WIDTH="185">
<IMG SRC-"c:\subject.gif" BORDER="O" HEIGHT="45" WIDTH="185">
And now, thanks to our merger with Massive Industries, we are now the world's largest manufacturer of Gadgets™ and other useless products. <BR>< BR>
To learn more about our products or our growing monopoly, click on any of the links to the right.
</TD>
<"TD ROWSPAN="2" WIDTH="68" VALIGN="top>
<"IMG SRC="c:\blank.gif" BORDER="O" HEIGHT="108" WIDTH="68>
</TD>
<TD COLSPAN="2" WIDTH="193" VALIGN="top">
<"IMG SRC="c:\blank.gif. BORDER="0" HEIGHT="35" WIDTH="193>
</TD>
<TR>
<TR>
<TD COLSPAN="2" WIDTH="193" VALIGN="top">
<IMG SRC-"c:\car.gif. BORDER="0" HEIGHT="35" WIDTH="193"> </TD>
</TR>
<TR>
<TD COLSPAN="2" WIDTH="193" VALIGN="top">
<IMG SRC–"gadgets.gif" BORDER="O" HEIGHT="38" WIDTH="193"> </TD>
<TR/>
<TR>
<TD COLSPAN="2" ROWSPAN="4" WIDTH="136" VALIGN="top"> <IMG SRC="armnet.gif" >
</ΤD>
</TR>
<TR>
<TD COLSPAN="2" WIDTH="309"> </TD>
<TD WIDTH="68"> </TD>
<TD WIDTH="68"> </TD>
<TD VALIGN="top" WIDTH="125">
<IMG SRC="lowcurve.gif" BORDER="O" HEIGHT="31" WIDTH="125">
</TD>
</TR>
</TABLE>
</BODYS >
<HTML/>
مقالات مرتبط به طراحی سایت :
عملگرها (آموزش HTML)
متد ها در زبان های اسکریپتی 2 (آموزش HTML)
متد ها در زبان های اسکریپتی(آموزش HTML)
اشیای موجود در جاوا اسکریپت (آموزش HTML)
دستورات در جاوااسکریپت(آموزش HTML)
جاوا اسکریپت (آموزش HTML)
استفاده از دکمه های تصویری به جای SUBMIT (آموزش HTML)
کادرهای کنترلی (آموزش HTML)
لیستهای لغزنده (آموزش HTML)
فیلد متنی چند خطی (آموزش HTML)
کنترلهای فرم (آموزش HTML)
امکانات دیگری از جدول (آموزش HTML)
جدول و صفحه آرایی (آموزش HTML)
لیستها در HTML (آموزش HTML)
سایر فرمتهای دودویی (آموزش HTML)
تصاویر به عنوان دکمه/صوت دیجیتال/فرمت های فایل های صوتی /برداشت و اجرای فایل صوتی(آموزش HTML)
