Home-theater-designers
עיצוב אתרים נגיש יותר מתמיד, אך עדיין נדרש הרבה עבודה - והרבה מיומנות - כדי להניב תוצאות למראה מקצועי.
למרבה המזל, אתה לא צריך להתחיל מאפס בכל פעם. ישנן אלפי תבניות CSS בחינם הזמינות באינטרנט, כולן חובקות טרנדים וטכנולוגיות עיצוב מודרניות. אתה יכול להשתמש בהם בצורה המקורית שלהם, או להתאים אותם כדי להפוך אותם לשלך.
במדריך זה נבחן מקרוב את תבניות CSS והיכן למצוא אותן.
מהי תבנית CSS?
תבנית CSS אינה מכילה רק CSS: היא נותנת לך כל מה שאתה צריך כדי ליצור אתר שמתפקד באופן מלא. כאשר אתה מוריד אחד, בדרך כלל תקבל תיקייה המכילה את הדברים הבאים:
- קבצי HTML - תקבל קובץ HTML לכל עמוד באתר. הוא יכיל טקסט ותמונות לדוגמה שתצטרכו להחליף בתוכן משלכם. יהיה עליך גם להתאים את נתוני המטא המתייחסים לדברים כמו תיאור האתר.
- קובץ CSS - בדרך כלל אתה מקבל קובץ CSS ראשי אחד המכיל את כל הסטיילינג לאתר, בתוספת כל תוספות כמו גיליון סגנונות איפוס, או קובץ גופני אינטרנט.
- קובץ Javascript - אם האתר מכיל פונקציות Javascript, כדאי לכלול אותו בקובץ נפרד משלו, במקום לשלב אותו במסמכי HTML.
- תמונות, גופנים וסמלים - יש לכלול גם את כל התמונות המשמשות בתבנית. ייתכן שתרצה לשמור דברים כמו סמלים ורקעים, אך יהיה עליך להחליף את תמונות מציין המיקום האחרות בתמונות שלך. ייתכן שיכללו גם גופנים מותאמים אישית מסוימים.
שלא כמו רוב סוגי התבניות האחרות שבהן תתקלו - וורדפרס, Excel או תבניות InDesign - תבניות CSS אכן דורשות ידע טכני מסוים.
אין ממשק ידידותי לעריכתם, כך שתצטרך לדעת לפחות כיצד להתמצא במסמך HTML רק כדי להוסיף תוכן משלך. כדי לבצע התאמות אישיות תצטרך ידע מכובד ב- CSS.
כמה תמונות מכיל 32 ג'יגה -בתים
מה לחפש בתבנית CSS
יש כל כך הרבה תבניות CSS בחינם לבחירה. אז איך תדעו מה מתאים לכם? להלן מספר דברים שכדאי לשים לב אליהם:
- לְעַצֵב - ברור שאתה רוצה אתר שנראה נחמד ומשקף את כל התמונה שתרצה להציג. אבל שקלו גם אם התבנית מתאימה לצרכים שלכם גם עכשיו וגם בעתיד. רבים מיועדים לאתרים של עמוד אחד; חלקם מיועדים למספר דפים. אם אתה צריך את האחרון, שקול אם אולי עדיף לך להשתמש ב- CMS כמו Wordpress במקום זאת.
- מותאם לנייד - השימוש באינטרנט בנייד גבוה כעת משולחן העבודה, ולכן חיוני שהאתר שלך יפעל כראוי בסמארטפונים. כל תבנית CSS הגונה צריכה להשתמש בעיצוב רספונסיבי כך שהאתר יעבוד בצורה מושלמת על כל מסך בגודל. אם הנבחר שלך לא, עבור לאחד שכן.
- כתוב היטב - הורד את התבנית והסתכל על הקוד לפני שתתחייב להשתמש בו. זה צריך להיות נקי, מובנה היטב וקל לעריכה. זה צריך להיות גם מודע SEO, עם שימוש נכון בתגי הכותרת והכותרת.
- רישיון - הקפד לבדוק את הרישיון עבור תבנית ה- CSS שבחרת. רבים זמינים תחת רישיון Creative Commons , אך גירסאות שונות של רישיון זה קובעות אם תוכל לערוך את התבנית, האם תוכל להשתמש בה מסחרית והאם עליך לזכות את המעצב המקורי.
- תוספות - כמה מפתחי תבניות CSS מציעים את עבודתם על בסיס 'freemium'. אתה מקבל את התבנית בחינם, אך יש לך אפשרות לשלם עבור התאמות אישיות נוספות כדי להפוך אותה לייחודית לאתר שלך.
עם כל ההסברים, בואו נסתכל על המקומות הטובים ביותר למצוא תבניות CSS בחינם.
1. תבנית.co
האוסף המדהים הזה של יותר מ -800 תבניות CSS מכיל סגנונות לכל כיתת אתר. כולם נוצרו במיוחד לאתר, כך שלא כדאי שתראה אותם צצים בשום מקום אחר.
כל התבניות מגיבות ונבנות עם HTML5. הם קטנים וקלים, עם תכונות Javascript נוספות, כמו תיבת תאורה לווידיאו או אפקטים של גלילה, משמשים רק במקומות שהם מוסיפים ערך אמיתי לחוויה.
2. Styleshout.com
Styleshout מציעה מגוון גדול של תבניות חינמיות וגם פרימיום, הקודמות שפורסמו תחת רישיון Creative Commons.
התבניות החינמיות מכסות מגוון רחב של קטגוריות, מאתרים מלאים ועד דפי בקרוב, ואפילו דף השגיאה 404 שלעיתים מתעלמים ממנו. אתה יכול להתאים אותם בעצמך ולהתאים אותם לסגנון האתר הקיים שלך, או שתוכל לשלם כדי ש- Styleshout יעשה זאת עבורך.
3. HTML5Up.net
אוסף התבניות הסופר מסוגנן הזה הוא גם סופר פופולרי. רובם הורדו מאות אלפי פעמים, וקל להבין מדוע.
כל הקטגוריות הרגילות של האתר מסופקות, כמו בלוג ודף מוצרים, ויש כמה עיצובים נחמדים במיוחד לצלמים להשוויץ ביצירותיהם. התבניות הבסיסיות בסגנון רשת ניתנות להתאמה אישית במיוחד, בעוד שהתבניות הבולטות יותר נוטות להשתמש ב- Javascript די בכבדות ולכן עשויות להיות פחות מתאימות לשינויים שלך.
ארבעה. Freebiesbug.com
מה שחסר בכמות Freebiesbug הוא יותר מאשר מפצה באיכותו. אתר שבו מפתחים צעירים מציגים את כישוריהם, והוא כולל עיצובים יוקרתיים רבים ומתקדמים.
אוסף התבניות המרשימות של האתר מושלם עבור סוכנויות, צלמים, מפתחי אפליקציות וקריאייטיב אחר. ארוז באפקטים ובהנפשות של Javascript ו- CSS, אתה יכול להתאים אישית את האתרים, למרות שלרוב הם כל כך נחמדים שאולי לא תרצה.
בנוסף, Freebiesbug.com כולל כל מיני משאבים חינמיים למעצבי אתרים, כולל גופנים, תמונות מלאי, סקיצות אילוסטרייטור וקבצי PSD ועוד.
5. חינם- CSS.com
Free-CSS.com הוא אתר ללא תקלות המציע-בזמן הכתיבה-כ -2503 תבניות בחינם, ועוד המון פרימיום, למקרה שעדיין לא מצאת את מבוקשך.
עם כל כך הרבה לבחירה זה יכול להיות קצת קשה להסתפק בעיצוב המושלם. האיכות בדרך כלל טובה, אם כי קיומו של האתר לעשר שנים פירושו שהוא עדיין מארח תבניות שנכתבו ב- XHTML. תרצה להימנע מאלה. הדבר השני הוא לוודא שאתה בודק את הרישיון של התבנית שבחרת. כולם בחינם, אך חלקם נחלת הכלל, חלקם Creative Commons וחלקם משתמשים ברישיון ספציפי למחבר.
6. OS-Templates.com
28 עמודים של תבניות CSS בחינם, בעיקר באמצעות פריסות מודרניות מבוססות רשת על דף אחד. אם פשוט מה שאתה מחפש, אז זה המקום לחפש. העיצובים נקיים, אטרקטיביים וקלים להתאמה אישית.
OS-Templates.com מציעה גם אוסף גדול של 'תבניות בסיסיות'. אלה נותנים לך את המבנה הבסיסי של אתר אינטרנט בתוכניות פריסה פופולריות שונות (דו-עמודות, שלוש עמודות וכו '), תוך שהוא לא מעוצב לחלוטין. בדומה לשימוש בעיצוב ברירת המחדל ב- Wordpress, הקנבס הריק מאפשר לך להפוך את האתר שלך לכל דבר שתרצה.
7. boag.online [לא זמין יותר]
Maglev היא תבנית אתר אחת בדף אחד שיכולה להיות מוצג בתצוגה מקדימה בפעולה ב- boag.online .
זוהי תבנית מהירה ונקייה, אידיאלית לדף מוצר. העיצוב המינימליסטי מתרחב רק בכמה אפקטים של Jquery שיעזרו לך לגלול בין חלקים. הפריסה הפשוטה פועלת בפני עצמה, אך היא גם מהווה נקודת מוצא מצוינת להתאמות האישיות שלך.
8. פיקסל בודהה
התבניות של פיקסל בודהה אינן מוגבלות רק לאתרים, הן כוללות גם כמה לניוזלטרים בדוא'ל.
כך או כך, כולם מעוצבים עם HTML5 ו- CSS3, והם מגיבים כך שנראים נהדר בכל מכשיר. נקודות השיא כוללות Howdy HTML, תבנית תיקים/קורות חיים יפים ו- SOHO HTML, דף מסחר אלקטרוני מדהים, הכולל את קבצי PSD המקוריים על גבי ה- HTML ו- CSS.
נגן המדיה הטוב ביותר עבור Windows XP
9. Templatemo.com
כמעט 500 תבניות בחינם זמינות מטמפטמו. חלק מהטובות ביותר הן אלה שנפרדות ממערכת הרשת בסגנון Bootstrap כדי לנסות משהו אחר.
רוב התבניות פשוטות ולא מסודרות, אם כי תכונות כמו ארגזי תאורה וקרוסלות תוכן כלולות היכן שצריך. אנחנו גם אוהבים את העובדה שכמה מהתבניות מוגדרות לעבודה עם עד שישה עמודים כברירת מחדל. זה מקל אם התוכן שלך לא מתאים לפריסה של עמוד אחד הנפוץ יותר ויותר.
10. Startbootstrap.com
Bootstrap היא מסגרת חזיתית פופולרית להפליא המאפשרת לך לבנות אתרים באיכות גבוהה תוך זמן קצר. עם זאת, לוקח קצת זמן ללמוד, וזה המקום בו נכנס Start Bootstrap.
אוסף זה של תבניות קוד פתוח בחינם כולן בנויות באמצעות מערכת הרשת של Bootstrap. יש יותר מ -30 לבחירה. חלקם מעוצבים במלואם ומיועדים לאפליקציות, בלוגים ודפי נחיתה, בעוד שאחרים הם פריסות ריקות שמחכות שתסגנו אותך.
אחת עשרה. Bootswatch.com
לבסוף, משהו קצת יותר מעשי. Bootswatch מציעה 16 נושאי קוד פתוח לאתרי סגנון שנבנו באמצעות Bootstrap.
תוכל לבנות את פריסת האתר שלך בעצמך באמצעות Bootstrap, או להוריד אחת מהתבניות הריקות מ- Start Bootstrap. מה שעושה Bootswatch הוא לשנות את הגופנים, צבעי הרקע והעיצוב לכפתורים, תפריטים ואלמנטים אחרים. הוא נותן לאתר שלך מראה ייחודי תוך שמירה על נאמנות לאתוס הנקי במיוחד של Bootstrap.
קל להרכיב אתר בסיסי עם Bootstrap, ו- Bootswatch נותן לו קצת ליטוש מיידי.
כיצד להשתמש בתבניות CSS
בגדול, ישנן שתי דרכים לשימוש בתבניות. או שאתה משתמש בהם כפי שהם או שאתה משתמש בהם כבסיס לעיצוב שלך.
הסכנה בשימוש בתבניות היא שבסופו של דבר תמצא אתר זהה לאתר של מישהו אחר. בחר תבנית פופולרית ויכולים להיות עשרות אלפי אתרים ממש. זהו הטיעון העיקרי לטובת התאמה אישית שלהם.
מהו מצב נתונים נמוך באייפון
תבניות CSS הן קיצור דרך מצוין עבור מעצבי אתרים מנוסים, בעלי מחשבה על פריסה בסיסית ורוצים לקפוץ ישר לעיצוב זה.
הם מושלמים גם לכל מי שחדש בעיצוב אתרים. אם אתה מכיר את דרכך ב- HTML ו- CSS אך עדיין אין לך את הביטחון או הידע לבנות אתר מאפס, תבנית CSS משמשת גם כדרך קלה להשיג אתר יפה וגם כלי למידה מדהים.
אתה יכול להתייחס לזה כאל עבודה בתהליך. התחל ב כיבוי הגופנים ו שינוי ערכת הצבעים , ועם הזמן ניתן לעצב מחדש אלמנטים קיימים, להוסיף חדשים וכו '. אין דרך טובה יותר ללמוד דבר מאשר באמצעות ניסיון מעשי ומעשי.
האם אתה משתמש בתבניות CSS בעת בניית אתרים? מהם המקומות האהובים עליך למצוא אותם? שתף אותנו בחוויות והטיפים שלך בתגובות.
לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל כיצד לנקות את מחשב Windows באמצעות שורת הפקודהאם שטח האחסון שלך עומד להיגמר במחשב Windows שלך, נקה את הזבל בעזרת כלי הפקודה המהירים האלה.
קרא הבא נושאים קשורים- תִכנוּת
- עיצוב אתרים
- CSS
אנדי הוא עיתונאי דפוס לשעבר ועורך מגזינים שכתב על טכנולוגיה במשך 15 שנים. באותה תקופה הוא תרם לאינספור פרסומים והפיק עבודות קופירייטינג לחברות טכנולוגיה גדולות. הוא גם מסר הערות מומחים לתקשורת ואירח פאנלים באירועי תעשייה.
עוד מאת אנדי בטסהירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
לחצו כאן להרשמה