اندازه تصویر در صفحه وب

[علیرضا حسن زاده]

با سلام خدمت دوستان
من تازه طراحی صفحات وب با ASP.NET رو شروع کردم البته از لحاظ برنامه نویسی کارم بد نیست ولی توطراحی صفحه گیر کردم. مشکل اینه که می خوام مثلا یه تصویر به عنوان هدر در صفحه داشته باشم ولی نمیدونم اندازه تصویر رو چقدر باید بگیرم که در همه مرور گرها کل هدر صفحه رو پوشش بده و ساختار صفحه رو خراب نکنه. یا چطوری چند تا تصویر رو کنار هم قرار بدم که به هم مرتبط هستن مثلا یه تصویر رو به چند تا فایل تبدیل کردم(نمی دونم چرا ولی دیدم طراحان وب اینجوری تصویر رو تو صفحه قرار می دن ) و از یه table برای قرار دادن اینها کنار هم استفاده می کنم عکس ها باهم فاصله دار می شن و به هم نمی چسبن تا یه تصویر واحد تشکیل بشه؟! خلاصه کلی کلافه شدم چیکار باید بکنم.:گیج::عصبانی:
مرجعی یا راهنمایی یا آموزشی اگه لطف کنید ممنون میشم:بوس:

[mehdi.mousavi]

با سلام خدمت دوستان من تازه طراحی صفحات وب با ASP.NET رو شروع کردم البته از لحاظ برنامه نویسی کارم بد نیست ولی توطراحی صفحه گیر کردم. مشکل اینه که می خوام مثلا یه تصویر به عنوان هدر در صفحه داشته باشم ولی نمیدونم اندازه تصویر رو چقدر باید بگیرم که در همه مرور گرها کل هدر صفحه رو پوشش بده و ساختار صفحه رو خراب نکنه. یا چطوری چند تا تصویر رو کنار هم قرار بدم که به هم مرتبط هستن مثلا یه تصویر رو به چند تا فایل تبدیل کردم(نمی دونم چرا ولی دیدم طراحان وب اینجوری تصویر رو تو صفحه قرار می دن ) و از یه table برای قرار دادن اینها کنار هم استفاده می کنم عکس ها باهم فاصله دار می شن و به هم نمی چسبن تا یه تصویر واحد تشکیل بشه؟! خلاصه کلی کلافه شدم چیکار باید بکنم. مرجعی یا راهنمایی یا آموزشی اگه لطف کنید ممنون میشم

سلام.
این مساله ربطی به ASP.NET نداره. من سوال شما رو به بخش CSS/HTML منتقل می کنم تا اونجا بهتون پاسخ بدن.

موفق باشید.

[WorldVbMan]

با سلام

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



<center>
<img src='Your Address' style='width:100%' />
</center>

اگر هم تکه تکه کردن مورد نظره باید در جدول دو خصلت اول رو در نظر گرفت :



<table cellpadding="0" cellspacing="0" border="0" ...>...</table>

انشاء الله که به کار اومده باشه.


_______________________________

اللّهم عجّل لولیّک الفرج

[mohsen.dbnet]

اگر هم تکه تکه کردن مورد نظره باید در جدول دو خصلت اول رو در نظر گرفت :


<table cellpadding="0" cellspacing="0" border="0" ...>...</table>
انشاء الله که به کار اومده باشه.

منم این مشکلو دارم ولی نه در FF بلکه در IE منتها این چیزهایی که می گین منظور همین
خصوصیت ها رو هم به همون صورتی که شما گفتید تنظیم کردم ولی نشد

با تشکر

[Keramatifar]

دوست عزیز
در Web Design به کاری که شما می خواهید انجام بدید اصطلاحاً CutApart میگن، یکی از نکات مهم توی پیاده سازی این تکنیک که دلیل مشکل شما هم هست، وجود White Space هایی در کد html است که شما متوجه اونا نمیشید. به احتمال زیاد Table ای که Image ها رو داخلش قرار دادید بین TD هاش White Space داره و شکل کد زیره:


<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="cutapart1.gif" alt="" />
</td>
<td>
<img src="cutapart2.gif" alt="" />
</td>
<td>
<img src="cutapart3.gif" alt="" />
</td>
</tr>

<tr>
<td>
<img src="cutapart4.gif" alt="" />
</td>
<td>
<img src="cutapart5.gif" alt="" />
</td>
<td>
<img src="cutapart6.gif" alt="" />
</td>
</tr>

<tr>
<td>
<img src="cutapart7.gif" alt="" />
</td>
<td>
<img src="cutapart8.gif" alt="" />
</td>
<td>
<img src="cutapart9.gif" alt="" />
</td>
</tr>
</table>برای حل مشکلتون باید White Space ها رو بین TD ها حذف کنید و کد html تون چیزی شبیه به این بشه:


<table border="0" cellspacing="0" cellpadding="0">

<tr>
<td><img src="cutapart1.gif" alt="" /></td>
<td><img src="cutapart2.gif" alt="" /></td>
<td><img src="cutapart3.gif" alt="" /></td>
</tr>

<tr>
<td><img src="cutapart4.gif" alt="" /></td>
<td><img src="cutapart5.gif" alt="" /></td>
<td><img src="cutapart6.gif" alt="" /></td>
</tr>

<tr>
<td><img src="cutapart7.gif" alt="" /></td>
<td><img src="cutapart8.gif" alt="" /></td>
<td><img src="cutapart9.gif" alt="" /></td>
</tr>

</table>