ניקלאו » ארכיון הבלוג » פריסה בשלוש עמודות וסימון… "הצודק"

» ארכיון הבלוג » פריסה בת שלוש עמודות וסימון… “המדויק” Niquelao - CSS פריסה בת שלוש עמודות וסימון… “המדויק” 4 ביוני, 2006 מאת Rumoroso כאשר מבקשים לבנות את מבנה התוכן של מסמך אינטרנטי, יש להימנע בכל האמצעים מלחשוב על העיצוב החזותי, ובמיוחד על הפריסה. הדבר חיוני אם רוצים להשיג תוכן בעל מבנה נכון מנקודת המבט של זרימת המידע, כמו גם סימון סמנטי וקוד אופטימלי. להשגת מטרה זו יש להשתמש כהנחת יסוד בלתי מעורערת בשימוש בתקני ה-W3C, תוך הימנעות מסימון מיותר שמטרתו לשרת את גיליון הסגנונות לצורך תצוגה. מקרה מפורט .- תוכן המסמך בנוי בשלושה אזורים או קבוצות פונקציונליות: תוכן ספציפי, תפריט ניווט ראשי ואזור בעל אופי רוחבי לאתר (הקשור либо למסמך הנוכחי, כגון חדשות מהמדור, либо לאתר האינטרנט או לפורטל, כגון קישורים מעניינים הקשורים לנושא הפורטל או קבוצת באנרים). יש לקבוע את ארגון התוכן בקוד בהתאם לרמת הספציפיות והרלוונטיות שלו ביחס לעמוד הנוכחי. כך, קבוצת המידע הספציפית למסמך צריכה להופיע ראשונה בקוד, ואחריה האזור בעל האופי הרוחבי אם הוא קשור ספציפית למידע הקודם ומשתנה בהתאם לתוכן. לאחר מכן יבוא התפריט הראשי. במקרה שהמידע הרוחבי משותף לכל האתר ואין לו אופי ספציפי בכל מדור, הוא יוצב בסוף, כשהוא preceded על ידי התפריט. בכל המקרים יש ליצור קישורים שמטרתם לאפשר תנועה במסמך בקפיצה בין כל אחת משלוש הקבוצות כדי לעבור לבאה או לקודמת. בניסיון להשיג קוד נקי ואופטימלי ככל האפשר, הצעת הקוד היא כדלקמן:

נוספו כותרת עליונה וכותרת תחתונה מכיוון שזהו אחד המצבים הנפוצים ביותר שיכולים להתקיים. נעשה שימוש במכולות בלוק גנריות (div) כדי להציג את הדוגמה. במקרה שאלו יכללו בלוק יחיד (למשל, רשימה), הן לא יהיו נחוצות, שכן ניתן להחיל את המזהה ישירות עליו. מתוך שאיפה להשיג קוד נקי ואופטימלי, לא נעשה שימוש במכולות שמקבצות אחת או יותר מאלו. הסימון שהוחל והארגון שלו נשמרו ללא שינוי בין הדוגמאות. הסגנונות שהוחלו באופן גנרי נכללו ב-CSS משותף. מכלול הסגנונות הספציפיים לכל אחת נכלל בתוך הכותרת העליונה של המסמך כדי להקל על סקירתם. בכל המקרים נשמר בלוק התוכן הראשי עם התנהגות זורמת. נעשה שימוש בסלקטור האוניברסלי כדי להחיל שוליים על הצאצאים הראשונים של הבלוק הנקרא “contenido1”. מכיוון שלא כל הדפדפנים מזהים נכון את הפסאודו-אלמנט “:first-child”, נעשה שימוש בהחלת המאפיינים על כל הצאצאים של הבלוק ואז ביטולם עבור כל הצאצאים שאביהם הוא צאצא שלו. ניתן להשתמש בשיטות אחרות, כגון שימוש בפסאודו-אלמנט שהוזכר לעיל יחד עם הערות מותנות עבור Internet Explorer (IE). דרך אחרת הייתה ליצור בלוק בתוך “contenido1” ולהחיל עליו את הסגנונות הנחוצים. שיטה זו נמנעה כדי להשיג סימון נקי יותר וללא נוכחות של אלמנטים שמטרתם לשרת בפריסה. למעשה, המאפיין/ים שיכולים להשתנות עבור הצאצאים הם השוליים הצדדיים, מאפיינים הניתנים לשליטה בקלות, כך שהפתרון המוצע נחשב לאופטימלי ביותר למקרה זה. חשוב לקחת בחשבון אילו מאפיינים ותכונות הוצהרו לנוכח הופעתם של efectos בלתי צפויים בעת החלת סגנונות. לדוגמה, ב-IE, כאשר כוללים רשימות בתוך אלמנטים צפים וממוקמים ביחס, לא מוצגים הסגנונות שהוחלו על הרקע ולא הצבעים שהוחלו על הגבולות (ניתן לתקן זאת על ידי מיקומם ביחס). הרעיון הוא להשיג פריסה בת שלוש עמודות עם סדר מסוים בהתאם לצרכי האתר. הפריסות השונות מוצגות מאורגנות בהתאם לסדר הבלוקים ולמאפיין הזורם שלהם. זרימת הבלוקים מושגת על ידי הגדרת רוחבם באחוזים (כאשר בכל הדוגמאות מדובר ב-20% מסך המכולה שלהם) והקשיחות ביחידות מוחלטות (כאשר בכל הדוגמאות מדובר ב-150px). כמו כן, במקום להשתמש ביחידות מוחלטות, ניתן להשתמש ביחידות יחסיות (em). הכל תלוי בצרכים הפרטיקולריים של כל מקרה: סדר בפריסה 1 2 3 דוגמה לעיצוב זורם: זורם זורם זורם דוגמה לעיצוב היברידי: זורם קשיח זורם דוגמה לעיצוב היברידי: זורם זורם קשיח דוגמה לעיצוב היברידי: זורם קשיח קשיח סדר בפריסה 1 3 2 דוגמה לעיצוב זורם: זורם זורם זורם דוגמה לעיצוב היברידי: זורם זורם קשיח דוגמה לעיצוב היברידי: זורם קשיח זורם דוגמה לעיצוב היברידי: זורם קשיח קשיח סדר בפריסה 2 1 3 דוגמה לעיצוב זורם: זורם זורם זורם דוגמה לעיצוב היברידי: קשיח זורם זורם דוגמה לעיצוב היברידי: זורם זורם קשיח דוגמה לעיצוב היברידי: קשיח זורם קשיח סדר בפריסה 2 3 1 דוגמה לעיצוב זורם: זורם זורם זורם דוגמה לעיצוב היברידי: קשיח זורם זורם דוגמה לעיצוב היברידי: זורם קשיח זורם דוגמה לעיצוב היברידי: קשיח קשיח זורם סדר בפריסה 3 1 2 דוגמה לעיצוב זורם: זורם זורם זורם דוגמה לעיצוב היברידי: זורם זורם קשיח דוגמה לעיצוב היברידי: קשיח זורם זורם דוגמה לעיצוב היברידי: קשיח זורם קשיח סדר בפריסה 3 2 1 דוגמה לעיצוב זורם: זורם זורם זורם דוגמה לעיצוב היברידי: זורם קשיח זורם דוגמה לעיצוב היברידי: קשיח זורם זורם דוגמה לעיצוב היברידי: קשיח קשיח זורם באחד מהמקרים ועבור אחד מהדפדפנים (כגון Internet Explorer) עשויה להופיע התנהגות חריגה בעת שינוי גודל החלון. בעיקרון, ההתנהגות השגויה נובעת מכך שלמרות שמציינים למכולה מה צריך להיות רוחבה, בעת שינוי הגודל, הטקסט משפיע ודוחף קלות את גבולותיה. אם מכלול הבלוקים צריך לתפוס 100% מהמכולה, עלול לקרות שאחד מאלו בעל מידות יחסיות, בגלל האפקט שהוזכר לעיל, יתפוס מעט יותר ממה שצריך, וידחוף את האחרים, אשר, בהיותם צפים ולא נכנסים, קופצים למטה. כדי לפתור זאת ניתן להצהיר על מידה באחד מהם מעט נמוכה מהאידיאלית (למשל, 19.9% במקום 20%). קטגוריה: CSS —> תגובה 1 Norwin Galeano 28 באוגוסט, 2006 טוב מאוד. מאמר זה צריך להיות שימושי מאוד למי שמתחיל לפרוס את עמודיו

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.