הפוך את עצמך לדף התחלה מינימליסטי מותאם אישית !: 10 שלבים

2024 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2024-01-30 09:11

האם היית צריך לעבור לעבודה מרחוק בעיקר מאז ש- COVID-19 הפך לדבר? אותו!

עבודה מהבית עם המחשבים שלנו והאינטרנט פירושה לעתים קרובות שעלינו לעקוב אחר הרבה אתרים לעבודה, לבית הספר או אפילו … בשביל הכיף!

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

להלן מה שתצטרך:

• מחשב (שלנו פועל Windows, אבל כל מחשב מודרני יעשה זאת).
• חיבור לאינטרנט.
• התקנה חדשה של עורך הטקסט Notepad ++.

כשתהיה מוכן, בואו נתחיל בשימוש בתבנית דף ההתחלה שלנו … או יצירת משלך מאפס!

שלב 1: צור דף התחלה או הורד את התבנית המותאמת אישית שלנו

בשלב זה יש לך שתי אפשרויות:

1. הורד את התבנית המותאמת אישית שלנו (הוראות פעלו מעט מאוחר יותר בשלב זה) או,
2. עקוב אחר המדריך הבסיסי לדף ההתחלה; זה ילווה אותך באבני הבניין של דף התחלה פשוט צעד אחר צעד - וזה המדריך שאליו פעלנו לבניית דף התחלה מותאם אישית זה!

למה להמליץ על הדרכה … במדריך? העבודה שלנו כמנחי MakerSpace היא לא רק להראות לך כיצד לעשות דברים: אלא גם לחבר אותך לתרבות ה- Maker ולמשאבים הקיימים. מדריך זה הוא אחד המקומות בהם הרבה מעצבי דפי התחלה מתחילים, ולכן היה הגיוני לשתף אותו איתכם!

אם יש לך זמן, המשך עם אפשרות מס '2 אך אם אין לך, תוכל תמיד לפנות למדריך הבסיסי של דף ההתחלה מאוחר יותר! להדרכה זו, נניח שאתה מוריד את התבנית המותאמת אישית שלנו! להורדתו:

1. פתח את מאגר DIY_startpage שלנו ב- Github.
2. לחץ על כפתור הקוד הירוק הגדול כדי לפתוח תפריט נפתח.
3. לחץ על הורד ZIP כדי להוריד את כל הקבצים לפרויקט.
4. חלץ את כל הקבצים מקובץ ה- ZIP שהורדת זה עתה למיקום לפי בחירתך.

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

עכשיו הפעל את הדפדפן המועדף עליך: אני מאוד אוהב את פיירפוקס, אך התבנית שלנו אמורה לעבוד כמעט על כל דפדפן אינטרנט עדכני אז אל תהסס להשתמש ב- Edge, Chrome או Safari!

לבסוף, פתח את הקובץ "DIY_startpage.html" בדפדפן שלך וב Notepad ++, ובוא נתחיל להתאים אותו אישית!

שלב 2: רשימת המועדפים שלך

אחלה דף פתיחה. דף התחלה שימושי הוא אפילו טוב יותר וכרגע, שלנו נראה קצת ריק!

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

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

חדשות וקריאה

• עיתונים דיגיטליים
• ספרים דיגיטליים
• מגזינים דיגיטליים

לְמִידָה

• בתי ספר W3C
• אודמי
• שפות מנגו

מוּסִיקָה

• האזן מקומי
• מפזר השירים
• רדיו מוזיקה של ג'מנדו

תרבות יוצרת

• Core77
• אשכול
• מלפרופיזמים

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

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

שלב 3: התאם אישית את הגופן שלך

הפעל את Notepad ++, לחץ על קובץ> פתח כדי לפתוח את הקובץ "DIY_startpage.html" שלך. מה שאתה מסתכל נראה שונה מאוד מהדף בדפדפן שלך, לא? זה הקוד של הדף שלך, ודפדפנים מפרשים את הקוד הזה כדי לגרום לו להיראות קצת יותר ידידותי לעין ולעשות את כל הדברים שאנחנו צריכים לעשות.

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

חפש את החלק הראשון הזה כדי להתאים אישית את דף ההתחלה שלך:

html {

יישור פריטים: מרכז; צבע: #313131; תצוגה: flex; גופן: 22px "Courier New", Courier, monospace; גובה: 100%; justify-content: center; שולי: 0; }

חלק זה של דף ההתחלה שלנו מתמקד במראה הכללי של הפריטים בדף שלנו. השורה:

גופן: 22px "Courier New", Courier, monospace;

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

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

בדף CSS Web Safe Fonts מ- w3schools יש רשימה מצוינת של שילובי גופנים שנראים נהדר, מחזיקים בסגנון שאתה מחפש ויעבדו על רוב הדפדפנים המודרניים.

לדוגמה, אתה יכול להחליף:

"שליח חדש", שליח, חד -שטח;

עם:

"לינוטיפ פלטינו", "ספר עתיקה", פלטינו, סריף;

אוֹ:

"Comic Sans MS", בכותרת, ללא שורות;

שמור את הקובץ שלך ורענן את הדף בדפדפן שלך כדי לראות את השינויים! לא מוצא חן בעיניך? אין בעיה! שחק עם גופני CSS Web Safe עד שתמצא שילוב שאתה אוהב.

שלב 4: התאם אישית את ציטוט הכותרת שלך

חפש את הקטע הזה בקובץ ה- HTML שלך:

זהו דף ההתחלה שלך! תהנה

בחר הצעת מחיר שאתה אוהב והחלף את הקוד! בשלי, בחרתי

עוד פעם על הפרה

פריסת דף ההתחלה שלך אמורה להתאים את עצמך באופן מיידי כך שיתאים להצעת המחיר שלך ברגע שתטען מחדש את הדף בדפדפן שלך: ב- Firefox, המשמעות היא הקשה על CTRL+R במקלדת או לחיצה על סמל הטעינה מחדש. בחר הצעת מחיר שאתה אוהב עכשיו (או בחר משהו אחר כך!) ובוא נתחיל לעבוד בהתאמה אישית של החלקים של דף ההתחלה שלך!

שלב 5: התאם אישית את הקטעים שלך

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

אם הורדת את דף ההתחלה שלנו מ- Github, יש לך 6 קטעים להתאמה אישית: המדריך המקורי מכיל רק 4, אך מכיוון שיותר ויותר היבטים של חיינו עברו לרשת לאחרונה, המשכתי והוספתי עוד ליתר ביטחון.

מצא את הקטע הראשון ופשוט הקלד את מה שאנחנו צריכים. כזכור, החלק הראשון שלי הוא "חדשות וקריאה":

כשהקובץ שלך עדיין פתוח ב- Notepad ++, מצא את שורת הקוד הבאה:

מחלקה 1

והחלף אותה בקטגוריה ברשימה שבה אתה חושב שתשתמש בה הכי הרבה.

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

כותרת מדור אחד למטה, עוד חמישה! חפש את שורת הקוד שאומרת:

סעיף 2

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

לאחר שתסיים להתאים אישית חלקים, פשוט שמור את השינויים שלך ב- Notepad ++ וטען מחדש את הדף בדפדפן שלך. כל כותרות המדור צריכות להופיע היכן שהצבת אותן: כעת נוכל להתאים אישית את הקישורים בכל קטע!

שלב 6: התאם אישית את הקישורים שלך

התאמה אישית של הקישורים בכל חלק היא קצת יותר מעורבת אבל בהחלט לא הרבה יותר קשה!

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

ראשית, חפש קו שנראה כך:

link_one_name

בחר בקטע "link_one_name" זה והחלף אותו בטקסט משלך. לדוגמה, הקישור הראשון בחלק הראשון המבוסס על הרשימה שלי משלב X הוא "עיתונים דיגיטליים" כך שאנו מקבלים:

עיתונים דיגיטליים

לאחר מכן, בואו נעבוד בהתאמה אישית של הקישור! החלף את הביט "link.one" בקישור הראשון שלך. בשבילי, זה יהיה הקישור לעיתונים הדיגיטליים שלנו, כך שזה ייראה כך:

עיתונים דיגיטליים

שמור את עבודתך בעורך הטקסט וטען מחדש את הדף בדפדפן שלך

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

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

זה לא מאוד נוח … אז מה דעתך לשנות את הדרך שבה הקישורים נפתחים? בואו נשתמש בקישור הראשון שלנו כדוגמה! אתה בטח זוכר שכאן אנו אומרים לדפדפן שלך לפתוח קישור בלחיצה עליו:

עיתונים דיגיטליים

אבל נחשו מה - גם כאן אנו מחליטים כיצד הקישור עומד להיפתח! שנה את זה ל:

עיתונים דיגיטליים

כעת שמור את עבודתך וטען מחדש את הדף בדפדפן שלך: הקישור יפתח כעת בכרטיסייה חדשה בעת לחיצה עליו! כך תוכל לשמור על דף ההתחלה שלך פתוח בזמן הצורך.

שלב 7: הוסף תמונה לדף ההתחלה שלך

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

כל הדרך בסוף התבנית. בחר תמונה שאתה אוהב, העבר אותה לאותה תיקיה של קובץ דף ההתחלה שלך והחלף את "library_picture.jpg" בשם הקובץ של התמונה שלך. לדוגמה, אם שם הקובץ שלי הוא "your_picture.jpg" השורה הופכת:

שמור את השינויים שלך ושוב, טען מחדש את דף ההתחלה בדפדפן שלך.

מכיוון שקוד דף ההתחלה שלך וקבצי התמונה שלך נמצאים באותה תיקיה, התמונה אמורה להיטען אוטומטית בעת רענון הדף. אם לא, בדוק את שם הקובץ שלך - בדרך כלל אני טועה!

טפטים לסמארטפון מתאימים במיוחד לפרויקט הזה. באופן כללי, כל תמונה אנכית (או כמו שאנשים מפוארים אומרים "תמונה לכיוון דיוקן" ביחס 16: 9) לצורך העניין! אבל הפריסה של דף ההתחלה שלנו תתאים לא משנה מה תזרקו עליו.

אם התמונה שלך מופיעה, מזל טוב, די סיימת!

שלב 8: ניקוי קצת

אם יש לך קטעים נוספים שאינך משתמש בהם בשלב זה, אל תהסס למחוק אותם! לדוגמה, נניח שאתה לא משתמש בסעיף 6. מצא:

• סעיף 6
• פריט 1
• פריט 2
• פריט 3

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

בדרך כלל זה השלב שבו אני שוברת הכל כי אני הולכת מהר מדי, אז אם משהו פתאום לא עובד זכור: קח נשימה עמוקה, ובטל את מה שעשית עם שילוב מקשי CTRL+Z במקלדת!

שלב 9: הפיכתו לדף התחלה בפועל

עכשיו כשדף ההתחלה פותח את כל הקישורים שאנחנו רוצים, ונראה כמו שאנחנו רוצים שהוא יראה, הגיע הזמן לפתוח אותו כשאתה מפעיל את הדפדפן שלך!

בשלב זה, אני אוהב להרחיק הכל משולחן העבודה של המחשבים שלי על ידי חיתוך והדבקה של תיקיית דף ההתחלה שלי בתיקיית מסמכים של Windows. אז אם סיימת לעבוד על דף ההתחלה שלך, עשה זאת!

הבא: סביר להניח שהדפדפן שלך נפתח באמצעות מנוע החיפוש המועדף עליך, או אולי אפילו דף ריק.

להלן הוראות להתאמה אישית של Firefox כמו גם דפדפנים אחרים:

• הוראות Firefox
• הוראות Google Chrome
• הוראות ספארי
• הוראות Microsoft Edge

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

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

שלב 10: הכל נעשה! והאם אתה רוצה לדעת יותר?

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

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

• האם ניסית את מדריך דף ההתחלה הבסיסי? חדשות טובות, יש יותר מאיפה זה בא! בדוק את המדריכים האחרים מאת / stpg / לקבלת השראה נוספת ותכונות מתקדמות!
• עיין בקטלוג ספריית מחוז ג'ונסון לספרים על HTML ו- CSS - ועם כרטיס הספרייה או כרטיס האלקטרוני שלך יש לך גישה גם לספרים אלקטרוניים!
• כרטיס הספרייה שלך גם נותן לך גישה ל- Udemy, ויש לו כמה שיעורים שלמים מאוד גם על HTML, CSS ועיצוב אתרים.

אם אתה גאה במיוחד ביצירה שלך, מדוע שלא תצלם את המסך ותשתף אותו איתנו בטוויטר או באינסטגרם באמצעות ההאשטאג #jocomakes? אנחנו תמיד שמחים לראות מה המציעים לפטרונים שלנו!