אופן בניית אתר אינטרנט: למתחילים

אופן בניית אתר אינטרנט: למתחילים

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





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



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





אם אינך בטוח ב- CSS כלשהו, ​​עיין ב מדריך CSS בְּ- W3Schools.com .

העיצוב

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



עיצבתי את האתר הזה עבור חברה בדיונית ב אדוב פוטושופ 2017. אם אתה מעוניין, הקפד לתפוס את קובץ ה- PSD מהורדת החבילה. הנה מה שאתה מקבל בקובץ הפוטושופ:

בתוך PSD, תמצא את כל השכבות המקובצות, שמות וצבעוניות:



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

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



קוד ראשוני

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

אם אינך רוצה ללמוד את הפרטים, קח את הקוד המלא מההורדה.

הנה הקוד שאתה צריך:





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */


זה עושה מספר דברים:

  • מגדיר את ה- HTML המינימלי הנדרש.
  • מגדיר כותרת עמוד של 'רעש מדיה'
  • כולל jQuery המתארח ב- Google CDN (מהו CDN).
  • כולל Font Awesome המתארח ב- CDN של Google.
  • מגדיר א סִגְנוֹן תג לכתוב בו את ה- CSS שלך.
  • מגדיר א תַסרִיט תג לכתוב בו את JavaScript שלך.

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

שימו לב לאופן כותרת העמוד רעש מדיה . זה מוגדר על ידי הטקסט שבתוך כותרת תָג. זֶה יש ל להיות בתוך רֹאשׁ תגים.

לצפות בסרטים בחינם באינטרנט ללא הרשמה

הכותרת

בואו ניצור את הכותרת. כך זה נראה:

נתחיל בקטע האפור הקטן למעלה. זה אפור בהיר עם תחתיו אפור כהה קל. להלן תקריב:

הוסף HTML זה בתוך ה- גוּף תג למעלה:

בזמן שאתה כאן, בואו נפרק את זה. א div הוא כמו מיכל להכניס אליו דברים אחרים. ה'דברים האחרים 'האלה יכולים להיות יותר מכולות, טקסט, תמונות, כל דבר באמת. יש כמה מגבלות על מה שיכול להיכנס לתגים מסוימים, אבל divs הם דברים כלליים למדי. יש לו תְעוּדַת זֶהוּת שֶׁל בר עליון . זה ישמש כדי לעצב אותו עם CSS, ולמקד אותו עם JavaScript במידת הצורך. ודא שיש לך רק אלמנט אחד עם מזהה מסוים - הוא צריך להיות ייחודי. אם אתה רוצה שלרכיבים מרובים יהיה אותו שם, השתמש בא מעמד במקום זאת - בשביל זה נועדו! הנה ה- CSS שאתה צריך כדי לעצב אותו (לשים בחלק העליון שלך בתוך סִגְנוֹן תָג):

html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray 'underline' */
height: 25px;
}

שימו לב כיצד נעשה שימוש בסימן החשיש (#, hashtag, סימן פאונד) לפני השם. המשמעות היא שהרכיב הוא מזהה. אם היית משתמש בכיתה, היית משתמש במקום (.) במקום. ה html ו גוּף התגים שלהם ריפוד ושוליים מוגדרים לאפס. זה מונע בעיות מרווח לא רצויות.

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

HTML:


CSS:

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

זה יכול להיות קשה לדעת מה קורה עד שתסיים את הקוד, כך שזה יכול להיות מועיל להוסיף רקע צבעוני (זמני) כדי לראות מה קורה:

background: red;

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

הוסף את ה- HTML הזה בְּתוֹך ה עטיפה רגילה div:



CSS:

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

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

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

ה href משמש לקישור לדפים אחרים. לאתר הדרכה זה אין דפים אחרים, אך ניתן לשים כאן את השם ואת נתיב הקובץ (במידת הצורך), למשל reviews.html . הקפד להכניס זאת לשתי מרכאות כפולות.

להלן ה- CSS:

#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}

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

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

והנה ה- CSS:

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

זה הקטע העליון שנעשה. כך זה נראה - די דומה לעיצוב נכון?

אזור התוכן העיקרי

הגיע הזמן לעבור על אזור התוכן העיקרי-מה שמכונה 'מעל הקפל'. כך נראה החלק הזה:

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

תזדקק לתמונת הדוגמא לחלק זה. זה כלול בהורדה. התמונה ברוחב 670 פיקסלים והיא מתוך סקירת Panasonic Lumix DMC-G80/G85 שלנו.

הוסף את ה- HTML לאחר ה צבע-עליון-התזה אֵלֵמֶנט:



Welcome!


Noise Media is a technology company specialising in tech reviews.


We’re very good at what we do, but unfortunately, we are not a real company.


Make sure you visit makeuseof.com for the full tutorial on how to build this website.

כיצד להגדיל dpi של התמונה בפוטושופ

Alternatively, check out our review of the Panasonic G80 shown on the right!






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

CSS:

.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}

התכונה החשובה ביותר כאן היא גודל גודל: תיבת גבול; . זה מבטיח שהאלמנטים תמיד יהיו ברוחב של 40% או 60%. ברירת המחדל (ללא תכונה זו) היא הרוחב שצוין בתוספת ריפוד, שוליים וגבולות. מחלקת התמונות ( תמונה מצורפת ) יש רוחב מקסימלי שֶׁל 500 פיקסלים . אם תציין רק מימד אחד (רוחב או גובה) ותשאיר את השני ריק, css ישנה את גודל התמונה תוך שמירה על יחס הגודל שלה.

אזור ציטוט

בואו ניצור את אזור הצעות המחיר. כך זה נראה:

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

הוסף את ה- HTML הזה לאחר הקודם עטיפה רגילה :



makeuseof is the best website ever


Joe Coburn



ואז ה- CSS הזה:

#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}

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

אזור אייקון

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

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






YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!







Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.







Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.



שלושת האייקונים האלה גם כן פונט-מדהים . ה- HTML משתמש שוב ב- עטיפה רגילה מעמד. להלן ה- CSS:

.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}

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

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

להלן ה- CSS:

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

ראו - דברים פשוטים באמת.

הוסף קצת פיצה

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

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

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

הוסף CSS זה כדי לעבור לגופנים הטובים יותר:

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}

כעת שנה את רכיבי ה- HTML והגוף שלך כדי להשתמש בגופנים החדשים:

font-family: 'PT Serif', 'Helvetica', 'Arial';

שים לב כיצד רכיב h3 אינו נכלל ברשימה - זה יוגדר כברירת מחדל PT-Serif במקום PT-Sans .

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

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





להלן ה- CSS הדרוש כדי להסתיר את התמונות המוצגות הנוספות:

.hidden {
display: none;
}

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

למצוא את ה תַסרִיט אזור בתחתית הדף:


/* JavaScript goes here, at the bottom of the page */

הוסף את JavaScript הבא בתוך תַסרִיט תָג:

/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});

קורים כאן כמה דברים. הקוד כלול בפנים $ (מסמך). ready () . המשמעות היא שהוא יפעל לאחר שהדפדפן שלך יסיים לעבד את הדף - זוהי שיטה טובה. ה setInterval () הפונקציה משמשת לכינוי שנה תמונה () לתפקד באופן קבוע במרווח מוגדר מראש באלפיות השנייה (1000 אלפיות השנייה = שנייה אחת). זה מאוחסן ב- זְמַן מִשְׁתַנֶה. אתה יכול להגדיל או להקטין את זה כדי להאיץ או להאט את הגלילה. לבסוף, משפט משפטי פשוט משמש להצגת תמונות שונות ומעקב אחר התמונה המוצגת כעת.

אתגר קידוד

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

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

שפר את גלילת התמונה: שנה את JavaScript כדי להנפיש את שינויי התמונה (רמז: הסתכל על jQuery דועך ו אנימציה ).

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

הגדרת שרת: הגדר שרת ושלח נתונים בין דף האינטרנט לשרת (רמז: קרא את המדריך שלנו ל- JSON ו- Python).

למה כרום כזה חזיר זיכרון

ברגע שנוח לך להשתמש ב- JavaScript או אם יש לך ניסיון עם רובי, תוכל לנסות ליצור אתר עם בונה אתרים סטטי כמו GatsbyJS או Jekyll.

לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל כיצד לשנות את המראה והתחושה של שולחן העבודה של Windows 10

רוצה לדעת כיצד לגרום ל- Windows 10 להיראות טוב יותר? השתמש בהתאמות אישיות פשוטות אלה כדי להפוך את Windows 10 לשלך.

קרא הבא נושאים קשורים
  • תִכנוּת
  • HTML
  • עיצוב אתרים
  • CSS
על הסופר ג'ו קוברן(136 מאמרים פורסמו)

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

עוד מאת ג'ו קוברן

הירשם לניוזלטר שלנו

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

לחצו כאן להרשמה