היי,

אני בעיקר מהפורום השכן של הצילום ואני מנסה להעלות אתר עם תיק עבודות.
עכשיו, אין לי יותר מדיי נסיון של בניית אתרים (יותר נכון, אין לי).
עיצבתי איזה דף ראשוני ב imageready, עם פונקצינליות בסיסית ומכאן אני מתכנן להמשיך.

הבעיה שלי כרגע היא, שאני לא מצליח להפוך את הטבלה לגמישה ככה שהדף יימלא את כל החלון של האקספלורר והחלונות של הטבלה ימולאו במילוי של החלונות.
אני מניח שע"י יצירת slices מדוייקים סביב הפינות של הטבלאות וכל אחת מהצלעות מסביב לכל תא.
אין איזה דרך יותר הגיונית שאני אסמן את האיזור שמיועד להיות גמיש והתוכנה תיצור סלייסים אוטומטית?

קישור לדף שעשיתי בינתיים (פעם ראשונה) - www.galitz.co.il

כמובן שאני אשמח לכל הושטת יד עוזרת.

תודה,
רועי גליץ

רועי גליץ.
Nikon D300, Nikon 16-85 VR, Nikon 500 F/4 VR, Nikon 10.5mm fisheye, Sigma 120-300 F/2.8, Sigma 10-20, Nikon 85 F/1.8, Zeiss 85 F/1.4, Tamron 180 F/3.5 macro, Nikon 50 F/1.8, Nikon SB800 X 2 and some other toys...
צילום, קורס צילום, מאמרים בצילום

שנה את המידה של ה height וה width בטבלה (table) ל100%. בד"כ רצוי להשתמש במידות באחוזים ולא בפיקסלים כדי שהאתר יראה טוב ברזולוציות שונות.

אתה רוצה ליצור משהו כזה:


ברגע שתגדיר גודל טבלה 100%, עלול להווצר הדבר הבא:


בגלל שתאים יגדלו באופן שווה, הפתרון הוא מצד אחד להגדיר טבלה בגודל 100%, אך מצד שני להגדיר גדלי תאים בגודל ספציפי.
לדוגמה רוחב הטבלה תהיה 100%
רוחב התא הראשון יהיה 50 פיקסלים (רוחב התמונה)
שים לב שכדי לשמור על המתיחה של 100%, חייב להיות תא אחד לפחות שאינו מוגדר בגודל ואזי הוא זה שימתח על החלון (image ready) מגדירה גדלי תאים לכל התאים, לכן תצטרך לבטל את מה שמיותר.
בעיקרון, ניתן גם לבנות טבלאות בתוך טבלאות על מנת לפתור בעיות עיצוביות מסויימות (אל תחתוך את כל האתר, אלא קטעים ממנו, כשכל קטע הוא טבלה עצמאית - ולבסוף את כל הקטעים תאחד בתוך תאי טבלה אחרת).


דרכים נוספות ומתוחכמות יותר (יאפשרו לך מבנים טבלאיים שטבלה רגילה לא יכולה ליצור בגלל מגבלות של colspan ו-colrows) זה להשתמש ב-div ו-span. כשאתה משתמש ב-div כשורה (tr) וב-span כתא בשורה (td).
בגדלים של div ו-span תוכל לשלוט בעזרת המאפיין style או בעזרת בלוקים של CSS.

בכל מקרה, בהצלחה.

[ זיו ]
[ fat fish ]

תודה רבה על התגובה המפורטת עם הדוגמאות, אני אנסה את זה ואני אדווח איך הולך


תודה,
רועי.

רועי גליץ.
Nikon D300, Nikon 16-85 VR, Nikon 500 F/4 VR, Nikon 10.5mm fisheye, Sigma 120-300 F/2.8, Sigma 10-20, Nikon 85 F/1.8, Zeiss 85 F/1.4, Tamron 180 F/3.5 macro, Nikon 50 F/1.8, Nikon SB800 X 2 and some other toys...
צילום, קורס צילום, מאמרים בצילום

זיו,

ניסיתי לעשות כמו שהראת בדוגמה, אבל אז הכל נהיה מבולגן.
וגם באיזורים שהוא הצליח לעשות גמישים, הוא לא שכפל את תוכן התא.

רועי גליץ.
Nikon D300, Nikon 16-85 VR, Nikon 500 F/4 VR, Nikon 10.5mm fisheye, Sigma 120-300 F/2.8, Sigma 10-20, Nikon 85 F/1.8, Zeiss 85 F/1.4, Tamron 180 F/3.5 macro, Nikon 50 F/1.8, Nikon SB800 X 2 and some other toys...
צילום, קורס צילום, מאמרים בצילום

אחרי לא מעט ניסוי וטעייה (בעיקר טעייה), הגעתי לתוצאה הזו: www.galitz.co.il/test2
עברתי להשתמש ב dreamweaver אחרי ש imageready ייאשה אותי לגמרי מבחינה זו.
בתוכנה הוא מראה לי תוצאה לפני תצוגה יפה מאוד וברגע שאני מעביר לאקספלורר נוספים לי עיוותים. על רוב העיוותים והשכפולים המיותרים הצלחתי להתגבר אבל עדיין הטבלה לא גמישה כמו שצריך להיות ועדיין קיימים שכפולים מיותרים (בתוכנה זה נראה טוב).
חוץ מזה, אני מנסה לעשות את החלון הימני שיהיה צר יותר מהשמאלי, וגם זה לא מצליח במיוחד...

רועי גליץ.
Nikon D300, Nikon 16-85 VR, Nikon 500 F/4 VR, Nikon 10.5mm fisheye, Sigma 120-300 F/2.8, Sigma 10-20, Nikon 85 F/1.8, Zeiss 85 F/1.4, Tamron 180 F/3.5 macro, Nikon 50 F/1.8, Nikon SB800 X 2 and some other toys...
צילום, קורס צילום, מאמרים בצילום

הנה הקוד שלך (לא בנוי ע"י תוכנה) וככה הוא צריך להראות במקרה זה.
כמו שהסברתי, תחלק את התמונה לתת טבלאות, אתה השתמשת בברירת המחדל שפולט
images ready מה שיוצר טבלה אחת ענקית, שכל שינוי בה, יוצר בעייה בתאים אחרים.

במקרה הזה, השתמשתי כמוך בתגי table אבל שוב, אני מעדיף להשתמש בתגי div ו- span.
בשני מקומות בקוד הוספתי הערות היכן אתה יכול למצא את הנתונים המגדירים את רוחב התאים (מה שלא הצלחת לשנות, תוכל להחליט גודל תא בערך קבוע (600px ל-600 פיקסלים) או ברוחב יחסי 70% כמו שמופיע כרגע.

שים לב שעשיתי שימוש בתג style על מנת לעצב את התאים ולא בפרמטרים של התג.

בכלל, בכל מקום שניתן, עדיף להשתמש בתג style, class ולהגדיר דפי CSS.

מקווה שזה ילמד אותך משהו ולא סתם תשתמש בזה בגלל שזה ניתן ככה חופשי...

קוד:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255" />
<title>Roie Galitz home page</title>
<style type="text/css">
body {
	margin: 0;
	background-color: #FFFFFF;
}
</style>
</head>

<body>
<!-- header -->
<table id="t1" border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr style="background-image:url(images/Roie-Galitz-home-page-FI-04.jpg); ">
		<td height="126" width="154"><img src="images/Roie-Galitz-home-page-FINAL.jpg" alt="" height="126" width="154"></td>
		<td height="126" width="500"><img src="images/Roie-Galitz-home-page-FI-03.jpg" alt="" height="126" width="500"></td>
		<td>&nbsp;</td>
	</tr>
</table>
<!-- phone/name ruler -->
<table id="t2" border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr style="background-image:url(images/Roie-Galitz-home-page-FI-05.jpg);">
		<td>&nbsp;</td>
		<td height="26" width="467"><img src="images/Roie-Galitz-home-page-FI-06.jpg" alt="" align="right" height="26" width="467"></td>
	</tr>
</table>
<!-- button line -->
<table id="t3" border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr style="background-image:url(images/Roie-Galitz-home-page-FI-19.jpg); ">
		<td width="15">&nbsp;</td>
		<td width="150"><img src="images/Roie-Galitz-home-page-FI-08.jpg" alt="" border="0" height="27" width="133"></td>
		<td width="150"><img src="images/Roie-Galitz-home-page-FI-11.jpg" alt="" border="0" height="27" width="133"></td>
		<td width="150"><img src="images/article.jpg" alt="" border="0" height="27" width="133"></td>
		<td width="150"><img src="images/Roie-Galitz-home-page-FI-17.jpg" alt="" border="0" height="27" width="133"></td>
		<td width="150"><img src="images/Roie-Galitz-home-page-FI-08.jpg" alt="" border="0" height="27" width="133"></td>
		<td>&nbsp;</td>
	</tr>
</table>
<!-- main cells -->
<table id="t4" border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr>
		<td height="31" width="40"><img src="images/Roie-Galitz-home-page-FI-20.jpg" alt="" height="31" width="40"></td>
		<!-- use the next line to configure the left block width (current is 70%) -->
		<td style="background-image:url(images/Roie-Galitz-home-page-FI-21.jpg);width:70%;">&nbsp;</td>
		<td height="31" width="38"><img src="images/Roie-Galitz-home-page-FI-22.jpg" alt="" height="31" width="38"></td>
		<td style="background-image:url(images/Roie-Galitz-home-page-FI-23.jpg);">&nbsp;</td>
		<td><img src="images/Roie-Galitz-home-page-FI-24.jpg" alt="" height="31" width="36"></td>
	</tr>
	<tr>
		<td style="background-image:url(images/Roie-Galitz-home-page-FI-25.jpg);width:40px;">&nbsp;</td>
		<!-- the hight of the next line, will be the hight of the blocks (current is 300)-->
		<td style="background-image:url(images/Roie-Galitz-home-page-FI-26.jpg);height:300px;">text come here</td>
		<td style="background-image:url(images/Roie-Galitz-home-page-FI-27.jpg);width:38px;"></td>
		<td style="background-image:url(images/Roie-Galitz-home-page-FI-28.jpg);">text come here</td>
		<td style="background-image:url(images/Roie-Galitz-home-page-FI-29.jpg);width:36px;">&nbsp;</td>
	</tr>
	<tr>
		<td height="28" width="40"><img src="images/Roie-Galitz-home-page-FI-30.jpg" alt="" height="28" width="40"></td>
		<td style="background-image:url(images/Roie-Galitz-home-page-FI-31.jpg);">&nbsp;</td>
		<td height="28" width="38"><img src="images/Roie-Galitz-home-page-FI-32.jpg" alt="" height="28" width="38"></td>
		<td style="background-image:url(images/Roie-Galitz-home-page-FI-33.jpg);">&nbsp;</td>
		<td><img src="images/Roie-Galitz-home-page-FI-34.jpg" alt="" height="28" width="36"></td>
	</tr>
</table>
</body>
</html>

[ זיו ]
[ fat fish ]

תודה רבה זיו על העזרה.
עכשיו הכל יותר ברור והמבנה נראה יותר צפוי.
אני לא עדיין לא הבנתי עד הסוף את העניין של התגים, אבל אני לא אשגע אתכם יותר מדיי.


תודה רבה,
רועי גליץ

רועי גליץ.
Nikon D300, Nikon 16-85 VR, Nikon 500 F/4 VR, Nikon 10.5mm fisheye, Sigma 120-300 F/2.8, Sigma 10-20, Nikon 85 F/1.8, Zeiss 85 F/1.4, Tamron 180 F/3.5 macro, Nikon 50 F/1.8, Nikon SB800 X 2 and some other toys...
צילום, קורס צילום, מאמרים בצילום

ותשתדל ללמוד דברים בסיסיים שלא יצריכו ממך שימוש באוטומטים של התוכנות (ליצירת rolover-image לדוגמה...)
(:

[ זיו ]
[ fat fish ]