30 שימושי אינטרנט עיצוב הדרכות
אז הגענו לסוף שלנו "שבוע עיצוב תגובה", הפוסט של הערב יהיה האחרון בסדרה. אנחנו הולכים כל החוצה כדי לעזור לך לחדד את היכולות שלך מניפולציה קודים אלה להגיב בכל עת כאשר מוצגים על מכשירים שונים. וכדי לעשות זאת, אנחנו שמציעות עיצוב אתרים נמצא באינטרנט. רשימה זו אינה אמורה להיות ממצה אחד אבל זה יסייע לך להתחיל להבין את היסודות של עיצוב אתר הסתגלות אשר יספק את כל סוגי גדלי המסך.
נתחיל עם הדרכות מבוא ב 'שוברים את הקרח', משהו כמו RWD: 101 בכיתה אתה צריך להשתתף כדי לקבל את העיקרון של המושג לפני שאנחנו עוברים על מנת "להתחיל בניין" תרגילים.
לבסוף נסיים עם הקטע 'עשה יותר' שבו נכלול הדרכות שמשחקות עם פריסות אופקיות, סרטונים 'גמישים', תפריטים נפתחים ותנועות אקורדיון מסוג 'שקופיות', תמונות ממוזערות ונושא דביק עם טבלאות.
אבל קודם…
הנה סיכום של שני הדרכות שהוצגו מוקדם יותר השבוע על ידי המחברים שלנו:
אתר אינטרנט ניווט
מאת תורק פירדוס - [הצג את ערכת הלימוד]
הנה מדריך שיעזור לך להפוך את עצמו מאוד לאתר האינטרנט שלך. אחד ההיבטים החשובים ביותר של האתר הוא כמה קל לנווט בין חלקים שונים של האתר. גלה כיצד לייעל את זה עם CSS3 עם הדרכה זו.
המשך תגובה
מאת ג 'ייק Rocheleau - [הצג את ערכת הלימוד]
אם אתה מקצועי באינטרנט קורות חיים באינטרנט הוא כבר חלק בלתי נפרד של הקריירה שלך, אז אתה צריך לנצל את ההזדמנות כדי להפעיל את זה לחדש תגובה גם כן. להקל על מעסיקים ולקוחות למצוא אותך בכל מכשיר. ובעוד אתה על זה, לחדש את עצמו כפולות כמו תיק של מה שאתה יכול לעשות בתור מפתח.
שובר את הקרח
עכשיו, איפה אנחנו? ללא שם: אה כן, בואו לקבל קצת שבירת קרח החלה!
מדריך למתחילים לעיצוב אינטרנט מותאם
מאת ניק פטי - [הצג את ערכת הלימוד]
הדרכה זו היא נקודת התחלה מצוינת למתחילים כפי שהיא מתארת מה עיצוב אינטרנט תגובה, איך זה הגיע לאור, כמו גם הסברים על רשתות נוזל שאילתות מדיה בין היתר. בדוק את המשאבים המפורטים בחלק התחתון של המדריך גם כן.
מבוא לעיצוב אינטרנט תגובה: וידאו
מאת ניק פטי - [הצג את ערכת הלימוד]
זהו הדרכה כי הוא קרוב ל 9 דקות ארוכות אשר skims את פני השטח של מה הוא עיצוב אינטרנט קשוב, איך זה הגיע, את ההשפעה שיש לו על העיצוב של אתר אינטרנט ומה הם גורמים מעורבים בהפקת אינטרנט בעיצוב תגובה . אם אתה מסתכל כדי להבין מה הוא עיצוב אינטרנט תגובה ללא כותרת לתוך קידוד הראשון, אתה צריך להתחיל עם זה וידאו.
כיצד להפוך כל אתר אינטרנט לאתר תגובה
מאת רוצ'סטר אוליביירה - [הצג את ערכת הלימוד]
זה עוד הדרכה שמתחילה מן היסודות אבל שוברת הכל לאט לאט, כולל מערכת ההפעלה ודפדפנים אתה הופך את האתר שלך בתגובה וכן את האלמנטים המושפעים כאשר האתר מוצג ממכשירים שונים. המחבר גם בהשתתפות כמה שימושי WordPress ו jQuery plugins כדי לעזור להפוך את העבודה שלך הרבה יותר קל.
עיצוב תגובה ב 3 שלבים
מאת ניק לה - [הצג את ערכת הלימוד]
הדרכה זו, יסביר כיצד ניתן לייצר עיצוב אינטרנט עם תגיות meta meta, מבנה HTML ושאילתות המדיה החשובות. אתה צריך קצת ידע של CSS כדי להבין את זה ...
עיצוב עבור אינטרנט
מאת מקס לוזוריאגה - [הצג את ערכת הלימוד]
הנה מאמר זה לא כל כך הרבה הדרכה כפי שהוא מדריך ליצירת עיצוב אינטרנט תגובה. עם זאת, המחבר פשוטו כמשמעו אומר לך לעשות ואל תעשה של עיצוב אתרים תגובה. ישנם הסברים על מדוע תכונות מסוימות אינן מגיבות מספיק, איך לעבוד עם פרופורציות ומודולים, והכי טוב, זה קצר יחסית וקל לספוג.
עיצוב אתרים תגובה: מדריך חזותי
מאת אנדרו גורמלי - [הצג את ערכת הלימוד]
אם טקסט מלא הדרכות אינן אפשרויות קיימא, נסה את זה וידאו במקום זאת. זה עדיין טכני למדי, אבל אם זה גורם לך להרגיש טוב יותר, אתה לא צריך לעשות הרבה קריאה. זה בערך 25 דקות ארוכות ו-יצרנית וידאו ממש מהר fowarded דרך חלקים שבהם הוא קודי, ואז חוזר להסביר מה הקודים לעשות.
התחל בניין
ללא שם: בסדר, נתחיל בבניית כמה עיצובים תגובה, החל ...
רשתות נוזל
מאת אית'ן מרקוט - [הצג את ערכת הלימוד]
תגיד רשת, ואתה חושב 'מבנים נוקשה', אומר נוזל ואתה חושב שזה יכול לזרום מצד אחד של המסך לתחתית או למעלה או בצד כאשר אתה מפעיל לחץ על הדפדפן, אבל לשים את שני אלה ביחד אתה בטח חושב שאתה צריך להסתכל על הדרכה זו כדי להעריך עד כמה רשתות נוזל יכול לעזור להפוך את העיצוב שלך קשוב יותר.
תמונות נוזל
מאת אית'ן מרקוט - [הצג את ערכת הלימוד]
בסוף מאמר זה, אתה צריך לדעת מי הוא איתן מרקוט. הנה רמז: הוא זה שהגיע עם המושג ואת המונח עבור עיצובים אינטרנט תגובה. השם שלו יהיה די הרבה להופיע בכל הדרכה אחרת ברשימה זו אז למה לא לקחת עצה על תמונות נוזל ישר מן המאסטר עצמו?.
דפוסי ניווט מדרגיים בעיצוב אינטרנט מגיב
מאת מייקל מסקר - [הצג את ערכת הלימוד]
מדריך זה מדבר על הלקחים המחבר למד מעבודה על פרויקט בקנה מידה גדול עיצוב אינטרנט תגובה. קרא את 'ההדרכה' שלו כיצד ליצור תבניות שקל יותר להגדיר אותן עבור תוצאות ידידותיות למשתמש ומגיבות. זה נראה נהדר מאחורי הקלעים בהבנת איך לעצב ממשקים בצורה הטובה ביותר עבור שולחן העבודה, Tablet ותצוגות ניידים.
עיצוב אתרי אינטרנט עם שאילתות CSS3 מדיה
מאת ניק לה - [הצג את ערכת הלימוד]
ועוד הדרכה מצוינת כדי לגרום לך ללמוד כיצד לעצב בדפדפן אינטרנט עם תבנית תגובה לאתר עם HTML5 ו CSS3. זוהי גישה צעד אחר צעד ויש הדגמות של עיצוב אתרים לפני ואחרי שאילתות התקשורת יושמו כדי להעריך טוב יותר את ההשפעה של שאילתות מדיה.
אפקטי CSS: תמונות שטח החוצה כדי להתאים גובה טקסט
מאת זואי מיקלי גילנווטר - [הצג את ערכת הלימוד]
הדרכה זו גורמת לך ללמוד את הטריק של ביצוע תמונות ברוחב קבוע לשנות את הגודל ואת המרווח על מנת שורה עם הטקסט המלווה, לא משנה כמה חלון הדפדפן הוא גודל.
פריסות מסתגלות עם שאילתות מדיה
מאת אהרון גוסטפסון - [הצג את ערכת הלימוד]
למד כיצד להשתמש בפריסות גמישות או גמישות באמצעות שאילתות מדיה ב- CSS. פשוט בצע את התרגיל כדי ללמוד להתאים את העיצוב שלך כדי להציג טור כפול או להציג עמודה אחת, כמו גם כדי להכין את העיצוב עבור iPhone ו iPad.
תמונות קשורות: ניסוי עם שינוי גודל תמונה מודעת הקשר
מאת סקוט Jehl - [הצג את ערכת הלימוד]
הנה מדריך שעשה שימוש בגישה build-from-mobile-first. טכניקה זו מציינת גודל גדול יותר עבור התמונות להשתמש ברזולוציות מסך גדולות יותר, מינוס בקשות תמונה וכן לרחרח UA.
לעשות יותר
וידאו אלסטי
מאת ניק לה - [הצג את ערכת הלימוד]
הדרכה זו עוסקת בשינוי קנה מידה של סרטונים כאשר גודל הדפדפן משתנה. זה בעצם טריק CSS ויש הדגמה לראות את הטריק בעבודה במדריך עצמו.
מסתור וחשיפת חלקים של תמונות
מאת זואי מיקלי גילנווטר - [הצג את ערכת הלימוד]
המדריך נלקח למעשה מתוך הספר של המחבר, המתאר כיצד לחשוף או להסתיר חלקים של תמונות בהתאם רזולוציות המסך. זה מלמד אותך איך לחתוך תמונות באופן דינמי כאשר גודל המסך משתנה, מראה לך רק חלק מהתמונה המלאה כאשר יש מקום מוגבל.
נווט תוכן עם תגובה CSS3
מאת מרי לו - [הצג את ערכת הלימוד]
מעדיף דרך מהודרת יותר למשתמשים לנווט לצד שלך? לאחר מכן, אתה צריך לקרוא דרך הדרכה זו כדי ללמוד כיצד קוד במעברים מגניב כמה: לדעוך פנימה, שקופיות, סיבובים ו דרוג למעלה. המעברים הם למעשה תוכן שכבות שהוצגו או מוסתרים עם קידוד ספציפי.
יצירת תבנית עיצוב אינטרנט תגובה
מאת הארי אטקינס - [הצג את ערכת הלימוד]
זהו מדריך קצר כדי לייצר תגובה תבנית אינטרנט כי עובד גם על שולחן העבודה, כמו גם על iPhone.
פריסה אופקיית תגובה
מאת מרי לו - [הצג את ערכת הלימוד]
הדרכה זו מלמדת כיצד ליצור פריסה אופקית עם מספר לוחות תוכן לגלילה. שימוש מוצא המינים כמו הטקסט לדוגמה, כל פרק של הספר מופרד בעמודות ממוקם ליד זה במצב דפדפן מלא, אבל כאשר הצטמצם עד קטן מספיק, הפריסה משתנה לגלילה אנכית מלא "ספר".
המרת תפריט לירידה למסכים קטנים
מאת כריס קוייה - [הצג את ערכת הלימוד]
מערך הדרכה זה יראה לך כיצד להמיר תפריט לרשימה נפתחת כאשר חלון הדפדפן צר, או כאשר אתה נמצא במכשיר נייד. שורה של קישורים בפינה השמאלית העליונה של הדף מקבל המרה לתפריט נפתח כדי לחסוך מקום מבלי להקריב את אפשרויות הניווט.
גמיש שקופיות כדי אקורדיון
מאת מרי לו - [הצג את ערכת הלימוד]
למד כיצד ליצור פריסת אקורדיון פשוטה וגמישה, עם מעברי דהייה ורוחבים מתכווננים המבוססים על גודל המסך והרזולוציות.
כיצד להשתמש CSS3 אוריינטציה שאילתות מדיה
מאת ריאן סדון - [הצג את ערכת הלימוד]
בהתבסס על הכלל הפשוט המגדיר רוחב (גובה גדול יותר מרוח) ומצב לרוחב (רוחב גדול מהגובה), ניתן לכתוב שאילתת מדיה כדי למקד לסגנונות ספציפיים בהתאם למצב שבו אתה מציג אותו. הדרכה זו תציג לנו איך לעשות בדיוק את זה והיא באה להשלים עם קישור זיקית שינוי צבע המשתמשת צבע כדי להדגים את השינוי הזה כמו שאתה לכווץ את חלון הדפדפן.
טבלאות נתוני תגובה
מאת כריס קוייה - [הצג את ערכת הלימוד]
טבלאות הן מקור לכאבי ראש כשמדובר בגדלים קטנים, אבל זה לא אומר שאנחנו צריכים להימנע לחלוטין שולחנות. למד כיצד להשתמש בשאילתות מדיה כדי להפוך את הפורמטים שלך לשינוי טבלאות לחלוטין בעת המעבר לגדלים של מסכים לנייד. הצג את ההדגמה כדי לקבל מושג על הקסם שאתה יכול לעשות על בסיס הדרכה זו.
נוזל CSS3 מצגת עם אפקט פרלקסה
מאת רינג ווינג - [הצג את ערכת הלימוד]
יצירת שקופיות CSS3 שבו שתי תמונות רקע משמשים וכאשר המיקום של הרקע משתנים, אפקט פרלקסה הוא ראה. מלבד זאת, מצגת שקופיות, שינוי גודל עצמו כמו חלון הדפדפן נסגר על זה.
כיצד לבנות תמונה ממוזערת גלריה
מאת ג'ושוע ג'ונסון - [הצג את ערכת הלימוד]
זה נהדר עבור אתרי אינטרנט תכונה תמונות ממוזערות בגלריה. עם שינוי גודל חלון הדפדפן, הפריסה תשתנה כך שתעמוד בין שתי עמודות (גודל מסך קטן יותר) לבין חמישה עמודות (מרבי). לקבלת מצגות שקופיות ומחוונים דומים יותר, עיין במאמר Top 10 Free Gallery Image Gallery / Slideshows.
מיטוב הדוא"ל שלך עבור התקנים ניידים
מאת רוס הודג'קיס - [הצג את ערכת הלימוד]
ניתן גם לבצע אופטימיזציה של הודעות אימייל לתצוגת מסך קטן, כמו למשל אתרי אינטרנט. רוב הזמן את הטקסט ב- HTML דוא"ל הוא גודל לנקודה שאינה מיועדת לקריאה נוחה; ללמוד כיצד לנהל את זה ועוד מתוך הדרכה זו.
באמצעות מסגרות
בניית אתרים ידידותיים לנייד עם שלד
מאת ג'ושוע ג'ונסון - [הצג את ערכת הלימוד]
שלד הוא מסגרת מדהים לבנות אתרי אינטרנט עם תגובה. הדרכה זו לוקחת אותך צעד אחר צעד מדריך כיצד להשתמש במסגרת השלד לבנות עיצובים מגיב מדהים. אתה תהיה המום לראות כמה קל ליישם.
עיצוב אינטרנט עם HTML5 & פחות מסגרת 3
מאת לואי סימונאו - [הצג את ערכת הלימוד]
אם לא הוכנסו כראוי פחות, אז לבדוק את המדריך שלנו פחות CSS הראשון כדי לקבל טעימה של פחות. במדריך זה, מסגרת פחות שימש כדי לאפשר לך לראות בבירור את ההשפעות של שאילתות מדיה.
סיכום
וזה מסכם שלנו אינטרנט עיצוב תגובה סדרה. אנו מקווים כי נושאים, כלים ומשאבים אחרים בהשתתפות בסדרה זו סייעו לחשוף את הרעיון של עיצוב אתרים תגובה לקוראים שלנו. אבל איך נדע אם לא תספר לנו?
הודע לנו על המשוב שלך על הסדרה ואם יש לך הצעות לרעיונות נוספים אתה רוצה לראות ב hongkiat.com. זרוק לנו שורה, או הערה למטה.
