خدمت دوستاني كه در طراحي وب تخصص دارند در مورد طرز جدول بندي در طراحي صفحات وب سوال داشتم:
به طورمثال در نظر بگيريد يك صفحه وب معمولي با تعدادي جدول به طوركه عرض ميكنم ميخواهيم داشته باشيم:
يك جدول در بالاي صفحه ( براي لوگو ) - دو جدول در كنار صفحه ( براي منو بندي و قرار دادن دكمه ها و تبليغات )
و يك جدول در وسط صفحه براي ( براي نوشتن متن و اخبار روز ) .
در طراحي اين موارد هميشه با دو مورد مواجه ميشم :
1- وقتي طراحي جداول تمام مي شود و لوگو و منوها و تبليغات را در جداول ايجاد شده ميزاريم با تغيير دادن
Resolution به طور مثال تغيير به ( 600 * 800 و يا 768 * 1024 ) نظم تمام جداول و منو بندي ها بهم ميخوره و فقط طراحي شما در
همان Resolution كه كار ميكند كه جداول شما طراحي شده و در كل همه چيز در داخل هم قاطي مي شود .
2- وقتي به طور مثال طراحي دو جدول كناري شما به اتمام ميرسد كه در آن منو ها و تبليغات
قرار ميگيره ميخواهيد جدولي در وسط اين دو تا جدول براي قرار دادن متن عكس و اخبار روز استفاده كنيد .
وقتي جدول را در وسط اين دو جدول كناري قرار ميدهيد و شروع به نوشتن متن و يا قرار دادن عكس مي كنيد با هر بار زدن كليد اينتر
و رفتن به سطر بعدي منوبندي ها و تبليغات كناري صفحه بهم ميخورد و در جاي خودش ثابت نمي ماند.
البته راههاي زيادي به من پيشنهاد شده كه از جمله اينه كه سايز جدول رو 100 درصد در نظر بگير كه بازم اين راه
نشده ( خيلي هم بهم ميگن با نوشتن مستقيم كد HTml و دادن ويژگي به جداول مشكلت حل ميشه ).
كه منم بيشتر در خصوص نوشتن كد Table و دادن خصوصيات آن از شما دوستان راهنمايي ميخواهم .
و در كل طرز جدول بندي حرفه اي صفحات وب !!!
با تشكر SECURITY
مي توانيد يك نقاشي بكشيد ؟ ببينم چطور چيزي مي خواهيد
شما از div مي توانيد استفاده كنيد!
منتظر راهنمایی دوستان دیگه هستم .
با تشکر Security
Siavashmusic
30-12-07, 04:20
سلام
جهت رفع این مشکل میبایست از Css بهره بگیرید
با استفاده از این تکنیک و استفاده از تیبل بندی صفحات براساس استاندارد Css میتونید مشکلتون رو مرتفع کنید
ممنون از راهنماییت . سیاوش جان لطف میکنی کدهای Css رو که مربوط به تیبل بندی صفحات میشه رو برام بزاری.
آیا مشکلم رو با کدهایی که در پست 14 این تاپیک (Only the registered members can see the link) که بنده آموزش رو از سري كتاب هاي آموزشي سايت قفسه گذاشتم میتونم حل کنم ؟ یا نیاز به کدهای جانبی
دیگه ای هم داره ؟
Siavashmusic
31-12-07, 14:51
ببین این مسله کاملا برمیگرده به ساختمان بندی صفحه شما یعنی اینکه محل قرارگیری صفحه مشخص باشه و تیبل بندی اون روشن
از اون تاپیکی هم که گفتید میتونید استفاده کنید
اما اگه واقعا تمایل دارید این مبحث رو یاد بگیرید یکی از دوستان من یه کتاب خیلی خوب ترجمه که کرد که ناقوس هم اون رو منتشر کرده لینکش رو برات میفرستم تا ببینی خیلی مفیده
این عناصر رو ببین همه با هم ترتیب این صفحه رو تشکیل دادن
<!-- CSS Stylesheet -->
<style type="text/css" id="vbulletin_css">
<!--
body
{
background: #E1E1E2;
color: #000000;
font: 8pt Tahoma;
margin: 5px 10px 10px 10px;
padding: 0px;
}
a:link, body_alink
{
color: #22229C;
text-decoration: none;
}
a:visited, body_avisited
{
color: #22229C;
text-decoration: none;
}
a:hover, a:active, body_ahover
{
color: #FF4400;
text-decoration: none;
}
.page
{
background: #FFFFFF;
color: #000000;
}
td, th, p, li
{
font: 8pt Tahoma;
}
.tborder
{
background: #D1D1E1;
color: #000000;
border: 1px dotted #b5b6b0; /*D1D2CB*/
}
.tcat
{
background: #019ce4 url(images/pcnetwork/gradients/gradient_thead.gif) repeat-x top left;
color: #FFFFFF;
font: bold 8pt Tahoma;
}
.tcat a:link, .tcat_alink
{
color: #ffffff;
text-decoration: none;
}
.tcat a:visited, .tcat_avisited
{
color: #ffffff;
text-decoration: none;
}
.tcat a:hover, .tcat a:active, .tcat_ahover
{
color: #FFFF66;
text-decoration: underline;
}
.thead
{
background: #5C7099 url(images/pcnetwork/gradients/gradient_thead.gif) repeat-x top left;
color: #FFFFFF;
font: bold 8pt Tahoma;
}
.thead a:link, .thead_alink
{
color: #FFFFFF;
}
.thead a:visited, .thead_avisited
{
color: #FFFFFF;
}
.thead a:hover, .thead a:active, .thead_ahover
{
color: #FFFF00;
}
.tfoot
{
background: #18a9df url(images/pcnetwork/misc/fond_footer.gif) repeat-x top left;
color: #FFFFFF;
}
.tfoot a:link, .tfoot_alink
{
color: #FFFFFF;
text-decoration: none;
}
.tfoot a:visited, .tfoot_avisited
{
color: #FFFFFF;
text-decoration: none;
}
.tfoot a:hover, .tfoot a:active, .tfoot_ahover
{
color: #FFFFFF;
text-decoration: underline;
}
.alt1, .alt1Active
{
background: #FBFBFB;
color: #000000;
}
.alt2, .alt2Active
{
background: #FBFBFB;
color: #000000;
}
td.inlinemod
{
background: #FFFFCC;
color: #000000;
}
.wysiwyg
{
background: #ecebe6;
color: #000000;
font: 8pt Tahoma;
}
textarea, .bginput
{
font: 8pt Tahoma;
}
.button
{
font: 8pt Tahoma;
}
select
{
font: 8pt Tahoma;
}
option, optgroup
{
font-size: 8pt;
font-family: Tahoma;
}
.smallfont
{
font: 8pt Tahoma;
}
.time
{
color: #666686;
}
.navbar
{
font: 8pt Tahoma;
}
.highlight
{
color: #FF0000;
font-weight: bold;
}
.fjsel
{
background: #3E5C92;
color: #E0E0F6;
}
.fjdpth0
{
background: #F7F7F7;
color: #000000;
}
.panel
{
background: #E4E7F5 url(images/pcnetwork/gradients/gradient_panel.gif) repeat-x top left;
color: #000000;
padding: 10px;
border: 2px outset;
}
.panelsurround
{
background: #D1D4E0 url(images/pcnetwork/gradients/gradient_panelsurround.gif) repeat-x top left;
color: #000000;
}
legend
{
color: #22229C;
font: 8pt Tahoma;
}
.vbmenu_control
{
background: #019ce4;
color: #FFFFFF;
font: bold 8pt Tahoma;
padding: 3px 6px 3px 6px;
white-space: nowrap;
}
.vbmenu_control a:link, .vbmenu_control_alink
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:visited, .vbmenu_control_avisited
{
color: #FFFFFF;
text-decoration: none;
}
.vbmenu_control a:hover, .vbmenu_control a:active, .vbmenu_control_ahover
{
color: #FFFFFF;
text-decoration: underline;
}
.vbmenu_popup
{
background: #FFFFFF;
color: #000000;
border: 1px solid #0B198C;
}
.vbmenu_option
{
background: #FBFBFB;
color: #000000;
font: 8pt Tahoma;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_option a:link, .vbmenu_option_alink
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:visited, .vbmenu_option_avisited
{
color: #22229C;
text-decoration: none;
}
.vbmenu_option a:hover, .vbmenu_option a:active, .vbmenu_option_ahover
{
color: #000000;
text-decoration: none;
}
.vbmenu_hilite
{
background: #F4F4F4;
color: #000000;
font: 8pt Tahoma;
white-space: nowrap;
cursor: pointer;
}
.vbmenu_hilite a:link, .vbmenu_hilite_alink
{
color: #22229C;
text-decoration: none;
}
.vbmenu_hilite a:visited, .vbmenu_hilite_avisited
{
color: #22229C;
text-decoration: none;
}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active, .vbmenu_hilite_ahover
{
color: #000000;
text-decoration: none;
}
/* ***** styling for 'big' usernames on postbit etc. ***** */
.bigusername { font-size: 14pt; }
/* ***** small padding on 'thead' elements ***** */
td.thead, th.thead, div.thead { padding: 4px; }
/* ***** basic styles for multi-page nav elements */
.pagenav a { text-decoration: none; }
.pagenav td { padding: 2px 4px 2px 4px; }
/* ***** de-emphasized text */
.shade, a.shade:link, a.shade:visited { color: #777777; text-decoration: none; }
a.shade:active, a.shade:hover { color: #FF4400; text-decoration: underline; }
.tcat .shade, .thead .shade, .tfoot .shade { color: #DDDDDD; }
/* ***** define margin and font-size for elements inside panels ***** */
.fieldset { margin-bottom: 6px; }
.fieldset, .fieldset td, .fieldset p, .fieldset li { font-size: 11px; }
/* ***** don't change the following ***** */
form { display: inline; }
label { cursor: default; }
.normal { font-weight: normal; }
.inlineimg { vertical-align: middle; }
.underline { text-decoration: underline; }
.WWU002postbit td {padding-left:2px;padding-right:2px;}
.WWU002postbit img.i,.WWU002postbit img.im,.WWU002postbit img.il,.WWU002postbit img.ir {background-color:#FFFFFF;border-left:1px solid #808080;border-top:1px solid #808080;border-right:1px solid #C0C0C0;border-bottom:1px solid #C0C0C0;}
.WWU002postbit img.im {border-left:none;border-right:none;}
.WWU002postbit img.il {border-right:none;}
.WWU002postbit img.ir {border-left:none;}
.tborder_icons {
background-color: #D1D1E1;
color: #000000;
border-top: 1px dotted #6581c1;
border-right: 1px dotted #6581c1;
border-left: 1px dotted #6581c1;
border-bottom: 1px dotted #6581c1;
}
#tborder_icons_spacer {
padding: 5px 0px 5px 0px;;
}
-->
</style>
<!-- / CSS Stylesheet -->
ممنون سیاوش جان . مفید بود . :11():
اینم لینکی که سیاوش جان به بنده دادن . قابل توجه دوستداران مبحث طراحی وب ::.Css
101 نکته و ترفند براي استفاده از CSS در طراحي وب (Only the registered members can see the link)
دراین کتاب آشنا می شوید با ....
• آموزش اصول و مبانی css به زبان ساده
• ذکر مثال های متعدد برای آموزش هر یک از دستورات css
• بررسی تمامی دستورات بر استفاده css در قالب 101 سوال و جواب
• سبک دهی متون و اجزای مختلف صفحه تنها با استفاده از css
• آموزش جلوه های بصری بسیار زیبا با استفاده css و تصاویر
• رفع عیب طراحی و سازگار کردن آن با تمامی مرورگرهای معروف وب
و ...
Siavashmusic
01-01-08, 20:02
Css متدی داره که میتونید از روی اون به یک درک صحیح از ساخت صفحات استاندارد برسید که ظاهرش این چیزی هست که دوستمون SECURITY دنبالش هست ولی اصل قضیه از دید من موتورهای جستجوگر هست وقتی این استانداردها رعایت بشه میبینید رتبه شما در تایج جستجو بالا میاد مقدار ایندکس شدن در گوگل افزایش پیدا میکنه و . . .