כיצד לעצב מחדש תבנית אתר

תוכן עניינים:

כיצד לעצב מחדש תבנית אתר
כיצד לעצב מחדש תבנית אתר

וִידֵאוֹ: כיצד לעצב מחדש תבנית אתר

וִידֵאוֹ: כיצד לעצב מחדש תבנית אתר
וִידֵאוֹ: כיצד לשנות תבנית עיצוב באתר 2024, אַפּרִיל
Anonim

הדרך הקלה ביותר ליצור אתר היא שימוש בתבנית. עם זאת, כדי שהמשאב יבלוט, עליכם לשנות את פריסת ברירת המחדל. וכאן אתה לא יכול להסתדר בלי ידע בסיסי ב- HTML ו- CSS.

כיצד לעצב מחדש תבנית אתר
כיצד לעצב מחדש תבנית אתר

הוראות

שלב 1

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

שלב 2

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

- פתח את הקובץ הגרפי בתוכנית פוטושופ;

- בתפריט "תמונה" - "גודל תמונה" התבונן בפרמטרים שלה;

- לפתוח גיליון חדש בדיוק באותו המידה;

- ליצור את התמונה הרצויה באמצעות כלי היישום;

- שטחו את כל השכבות ושמרו (לא לאינטרנט) תמונה חדשה באותו שם ובאותה תיקיה, תוך הגדרת הפורמט המקורי.

כך, במקום תמונה אחת, תמונה אחרת אמורה להופיע.

שלב 3

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

שלב 4

שנה את שאר הפרמטרים ב style.css. יתר על כן, זה הרבה יותר נוח לעשות זאת לא דרך לוח הניהול, אלא על גבי מחשב. סביר להשתמש ב- localhost (דנבר) כדי לראות את תוצאת השינויים בהקדם האפשרי. זה ימנע את הצורך להעלות את התוצאה לשרת בכל פעם כדי להציג את התוצאות לאחר העריכה הבאה.

שלב 5

הורד את תוסף FireBug בחינם עבור Mozilla Firefox. לאחר ההתקנה, סמל באג צהוב יופיע בפינה הימנית העליונה של הדפדפן. לחץ עליו או לחץ על מקש F12 ובתחתית המסך, קוד העמוד יופיע בגרסה מכווצת. ניתן לפתוח אותו על ידי העברת העכבר מעל סימני הפלוס. ואם תלחץ על השורה של אלמנט, הוא יודגש בחלקו העליון של המסך. בצד ימין של החלון עם הקוד, תמצאו סגנונות המציינים את השורות האחראיות למראה. ומיד יתברר היכן עליכם לערוך את קובץ הסגנון בכדי לשנות את העיצוב.

שלב 6

פתח את style.css ב- Notepad ++. אתה יכול להשתמש בתוכניות אחרות המיועדות לעריכת הקוד, אך לצורך כך אינך יכול להשתמש ב"פנקס הרשימות "הסטנדרטי, אחרת יהיו שגיאות עקב הקידוד. השתמש ב- FireBug כדי למצוא את הפרמטרים שברצונך לשנות ולערוך אותם ב- Notepad ++ בו זמנית.

שלב 7

שמור את ה- css הסופי והעלה את הקובץ לשרת.

מוּמלָץ: