כיצד ליצור אתר אינטרנט חלק שלישי: אתר מתחילתו ועד סופו

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

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

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

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

לְעַצֵב

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

ראשית, הדבר החשוב ביותר לדעת הוא שבחירות הגופנים שלך מוגבלות באופן מקוון. בזמן שאתה יכול להשתמש ב@font-faceכלל ב-CSS לטעינה חיצונית של גופנים, זה לא נתמך על ידי דפדפנים ישנים יותר. ייתכן שתזדקק גם לזכויות לשימוש בפונטים מסוימים עם תג זה. זה אמר, אתהפַּחִיתהשתמש ב-@font-face כדי לפתור את הבעיה של אפשרויות מוגבלות של גופנים באינטרנט, אבל אם אתה עדיין לא מוכן לקפוץ לעולם הזה, עליך להשתמש בשירות גופני אינטרנט כמוWebType(שיכול להיות בחינם בהתאם לשימוש שלך) או להגביל את עצמך לגופנים בטוחים באינטרנט. אילו גופנים בטוחים באינטרנט? Times New Roman ו-Arial הן האפשרויות הנפוצות ביותר, אך רוב מערכות ההפעלה מגיעות עם מספר גופנים מובנים אחרים הנחשבים לבטוחים באינטרנט. אלה כוללים גופנים כמו Tahoma, Verdana, Lucida Grande, Gill Sans, Trebuchet MS, Courier New ו- Georgia. בצע חיפוש אחר גופנים בטוחים באינטרנט אם אתה מחפש אפשרויות נוספות.

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

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

הֲכָנָה

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

לאחר שתקבל את המידות שלך נוכל להתחיל לייצא תמונות. במקרים רבים לא תצטרך לייצא הרבה מאוד תמונות כי אתה יכול ליצור מחדש את רוב העיצוב שלך עם HTML ו-CSS (וגם JavaScript, אם אתה רוצה ללכת לשם). עם זאת, עבור התמונות המעטות שאתה צריך לייצא, תצטרך לבחור בין JPEG ו-PNG. כאשר התמונות שלך מורכבות - כמו תמונות, או איורים עם צבעים רבים וטווח גוונים רחב - אתה בדרך כלל יהיה טוב יותר עם JPEG מנקודת מבט של גודל הקובץ. אם יש לך תמונות פשוטות, או שאתה דורש שלתמונות שלך יהיה רקע שקוף, תצטרך לשמור אותן כקבצי PNG של 24 סיביות.

אם אתה שומר PNG של 24 סיביות מפוטושופ, תצטרך להסתיר את שכבת הרקע לפני שתבחר "שמור לאינטרנט" מתפריט הקובץ כדי שפוטושופ תדע להתעלם ממנה.

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

• css

• תמונות

• תסריטים

אם זה לא ברור, תשמור את התמונות שלך ב-imagesספרייה וגיליונות הסגנונות של ה-CSS שלך ב-cssמַדרִיך. הscriptsספרייה היא המקום שבו אתה יכול לאחסן קבצי JavaScript וסקריפטים אחרים שבהם אתה עשוי להשתמש בסופו של דבר בעת פיתוח האתר שלך.

בספריית השורש, תרצה גם ליצור anindex.htmlקובץ לקראת פיתוח. מה זה index.html? נניח שהיה לך רק קובץ HTML אחד והוא נקרא mydoc.html. אם העלית את זה לשרת האינטרנט שלך, שאירח את האתר שלך mywebsite.com, בכל פעם שמישהו ביקר ב-mywebsite.com הוא יקבל רשימת ספרייה של הקבצים שהעלית או אולי כלום. באמצעותindex.htmlכשם קובץ אומר לשרת האינטרנט שעליו להציג את הקובץ הזה אם מישהו הולך לספרייה הספציפית הזו. אם תשים אindex.htmlקובץ בספריית התמונות שלך, בכל פעם שמישהו ביקר ב-https://mywebsite.com/images הוא יראה עיבוד של ה-HTML הכלול בוindex.html. בעיקרון, אindex.htmlהקובץ הוא ברירת המחדל של HTML לתצוגה כך שתמיד תזדקק לאחד.

הִתפַּתְחוּת

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

DocType

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

בדוק את קוד המקור

כפי שניתן לראות בסרטון, השתמשנו בהרבה טכניקות CSS מהנות כמו צלליות ופינות עגולות יותר. אם אתה רוצה לחקור את הטכניקות הללו עוד יותר,הורד את קוד המקור של אתר ההדגמהולהסתכל מסביב ב-CSS. לאחר שתבינו את היסודות של HTML ו-CSS, הדרך הטובה ביותר ללמוד דברים חדשים היא להסתכל על קוד המקור של אתרי אינטרנט אחרים. אמנם אינך יכול להסתכל על קוד בצד השרת שנוצר בשפת תכנות בצד השרת כמו PHP, אך אתה יכול להציג קוד מקור HTML פשוט על ידי גלישה לדף אינטרנט ובחירה ב"הצג מקור" מתפריט "הצג" בדפדפן שלך. (אלא אם כן זה בתפריט אחר, אבל זה בדרך כלל ב"תצוגה"). אתרים גדולים שיש בהם הרבה תוכן, כמו Lifehacker, הם לא בהכרח מודלים טובים להסתכל עליהם. חלק גדול מקוד ה-HTML שאתה רואה כאן נוצר על ידי קוד PHP בצד השרת. בדרך כלל תלמד יותר על ידי התבוננות באתרים קטנים יותר, מכיוון שהקוד הוא לרוב סטטי ו/או האתר קטן מספיק כדי שכמות קוד המקור לא תהיה עצומה להחריד.

לאחר שתסיים לפתח את האתר שלך, הגיע הזמן לפרוס אותו.

פְּרִיסָה

לאחר סיום האתר שלך, עליך לפרוס אותו. לרוב זה לא כרוך בהרבה יותר מהעלאתו לשרת האינטרנט שלך. בדרך כלל תצליח להשיג זאת עם FTP או SFTP, אז תצטרך יישום כדי לעשות זאת. אנחנו משתמשיםלְהַעֲבִירבסרטון, אבלסייברדאקהיא אפליקציית העברת קבצים בחינם הפועלת בשני Macוחלונות. כל מה שאתה צריך לעשות הוא להשתמש ביישום העברת הקבצים הרצוי שלך כדי להתחבר לשרת האינטרנט שלך באמצעות FTP. משם, אתה פשוט מעתיק את הקבצים לשרת האינטרנט והם אמורים להיות ניתנים לצפייה מיידית באתר האינטרנט שלך.

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