مي توانيد يك نقاشي بكشيد ؟ ببينم چطور چيزي مي خواهيد
شما از div مي توانيد استفاده كنيد!
خدمت دوستاني كه در طراحي وب تخصص دارند در مورد طرز جدول بندي در طراحي صفحات وب سوال داشتم:
به طورمثال در نظر بگيريد يك صفحه وب معمولي با تعدادي جدول به طوركه عرض ميكنم ميخواهيم داشته باشيم:
يك جدول در بالاي صفحه ( براي لوگو ) - دو جدول در كنار صفحه ( براي منو بندي و قرار دادن دكمه ها و تبليغات )
و يك جدول در وسط صفحه براي ( براي نوشتن متن و اخبار روز ) .
در طراحي اين موارد هميشه با دو مورد مواجه ميشم :
1- وقتي طراحي جداول تمام مي شود و لوگو و منوها و تبليغات را در جداول ايجاد شده ميزاريم با تغيير دادن
Resolution به طور مثال تغيير به ( 600 * 800 و يا 768 * 1024 ) نظم تمام جداول و منو بندي ها بهم ميخوره و فقط طراحي شما در
همان Resolution كه كار ميكند كه جداول شما طراحي شده و در كل همه چيز در داخل هم قاطي مي شود .
2- وقتي به طور مثال طراحي دو جدول كناري شما به اتمام ميرسد كه در آن منو ها و تبليغات
قرار ميگيره ميخواهيد جدولي در وسط اين دو تا جدول براي قرار دادن متن عكس و اخبار روز استفاده كنيد .
وقتي جدول را در وسط اين دو جدول كناري قرار ميدهيد و شروع به نوشتن متن و يا قرار دادن عكس مي كنيد با هر بار زدن كليد اينتر
و رفتن به سطر بعدي منوبندي ها و تبليغات كناري صفحه بهم ميخورد و در جاي خودش ثابت نمي ماند.
البته راههاي زيادي به من پيشنهاد شده كه از جمله اينه كه سايز جدول رو 100 درصد در نظر بگير كه بازم اين راه
نشده ( خيلي هم بهم ميگن با نوشتن مستقيم كد HTml و دادن ويژگي به جداول مشكلت حل ميشه ).
كه منم بيشتر در خصوص نوشتن كد Table و دادن خصوصيات آن از شما دوستان راهنمايي ميخواهم .
و در كل طرز جدول بندي حرفه اي صفحات وب !!!
با تشكر SECURITY
آخرین ویرایش توسط Security در تاریخ 07-07-07 انجام شده است
مي توانيد يك نقاشي بكشيد ؟ ببينم چطور چيزي مي خواهيد
شما از div مي توانيد استفاده كنيد!
منتظر راهنمایی دوستان دیگه هستم .
با تشکر Security
" کاربر محترم اخبار و اطلاعیه های مهم انجمن و سایت شهر سخت افزار در اینجا دنبال کنید"
| آپلود سنتر عكس | قوانين انجمن | شهرسخت افزار|
سلام
جهت رفع این مشکل میبایست از Css بهره بگیرید
با استفاده از این تکنیک و استفاده از تیبل بندی صفحات براساس استاندارد Css میتونید مشکلتون رو مرتفع کنید
سیاوش عقیلی : طراح وب سایت , برنامه نویس و توسعه دهنده وب
PHP,MYSQL,AJAX,SMARTY,XML,CSS,JAVA SCRIPT
09111830382
پرداخت اینترنتی - پی پال
Security (30-12-07)
ممنون از راهنماییت . سیاوش جان لطف میکنی کدهای Css رو که مربوط به تیبل بندی صفحات میشه رو برام بزاری.
آیا مشکلم رو با کدهایی که در پست 14 این تاپیک که بنده آموزش رو از سري كتاب هاي آموزشي سايت قفسه گذاشتم میتونم حل کنم ؟ یا نیاز به کدهای جانبی
دیگه ای هم داره ؟
" کاربر محترم اخبار و اطلاعیه های مهم انجمن و سایت شهر سخت افزار در اینجا دنبال کنید"
| آپلود سنتر عكس | قوانين انجمن | شهرسخت افزار|
ببین این مسله کاملا برمیگرده به ساختمان بندی صفحه شما یعنی اینکه محل قرارگیری صفحه مشخص باشه و تیبل بندی اون روشن
از اون تاپیکی هم که گفتید میتونید استفاده کنید
اما اگه واقعا تمایل دارید این مبحث رو یاد بگیرید یکی از دوستان من یه کتاب خیلی خوب ترجمه که کرد که ناقوس هم اون رو منتشر کرده لینکش رو برات میفرستم تا ببینی خیلی مفیده
این عناصر رو ببین همه با هم ترتیب این صفحه رو تشکیل دادن
کد:<!-- 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 -->
سیاوش عقیلی : طراح وب سایت , برنامه نویس و توسعه دهنده وب
PHP,MYSQL,AJAX,SMARTY,XML,CSS,JAVA SCRIPT
09111830382
پرداخت اینترنتی - پی پال
ممنون سیاوش جان . مفید بود . برای مشاهده این لینک/عکس می بایست عضو شوید ! برای عضویت اینجا کلیک کنید
آخرین ویرایش توسط Security در تاریخ 31-12-07 انجام شده است
" کاربر محترم اخبار و اطلاعیه های مهم انجمن و سایت شهر سخت افزار در اینجا دنبال کنید"
| آپلود سنتر عكس | قوانين انجمن | شهرسخت افزار|
اینم لینکی که سیاوش جان به بنده دادن . قابل توجه دوستداران مبحث طراحی وب ::.Css
101 نکته و ترفند براي استفاده از CSS در طراحي وب
دراین کتاب آشنا می شوید با ....
• آموزش اصول و مبانی css به زبان ساده
• ذکر مثال های متعدد برای آموزش هر یک از دستورات css
• بررسی تمامی دستورات بر استفاده css در قالب 101 سوال و جواب
• سبک دهی متون و اجزای مختلف صفحه تنها با استفاده از css
• آموزش جلوه های بصری بسیار زیبا با استفاده css و تصاویر
• رفع عیب طراحی و سازگار کردن آن با تمامی مرورگرهای معروف وب
و ...
" کاربر محترم اخبار و اطلاعیه های مهم انجمن و سایت شهر سخت افزار در اینجا دنبال کنید"
| آپلود سنتر عكس | قوانين انجمن | شهرسخت افزار|
Shahryar (01-01-08), Siavashmusic (01-01-08)
Css متدی داره که میتونید از روی اون به یک درک صحیح از ساخت صفحات استاندارد برسید که ظاهرش این چیزی هست که دوستمون SECURITY دنبالش هست ولی اصل قضیه از دید من موتورهای جستجوگر هست وقتی این استانداردها رعایت بشه میبینید رتبه شما در تایج جستجو بالا میاد مقدار ایندکس شدن در گوگل افزایش پیدا میکنه و . . .
سیاوش عقیلی : طراح وب سایت , برنامه نویس و توسعه دهنده وب
PHP,MYSQL,AJAX,SMARTY,XML,CSS,JAVA SCRIPT
09111830382
پرداخت اینترنتی - پی پال
Security (01-01-08)
1 کاربر در حال مشاهده این موضوع. (0 عضو و 1 میهمان)
Bookmarks