חוג פיתוח אתרי אינטרנט
-
Upload
hamilton-noble -
Category
Documents
-
view
24 -
download
3
description
Transcript of חוג פיתוח אתרי אינטרנט
אתרי פיתוח חוגאינטרנט
4שיעור
עכשיו ? עד למדנו מה
עמוד • נפוצות htmlמבנה ותגיות
באמצעות • חדש אתר visual studioיצירת
באמצעות • קיים אתר visual studioפתיחת
תיקיית • באמצעות האתר dropboxב publicפרסום
לאתר • תמונה הוספת
בתיקיית - שימוש dropboxב publicתזכורת
תיקיית • אל האינטרנט dropboxנכנסים אתר דרך או במחשב
תיקיית • לתוך , publicנכנסים כזאת ) תיקייה לו שאין מיכאן ב לוחץ (enable public folderובוחר
האתר )• קובץ על ימני קליק ובוחרים( index.htmlלוחציםcopy public linkב
בדפדפן • מדביקים הקישור את
באמצעות CSSעיצוב
זה ?cssמה•CSS . שלך לאתר עיצוב תבנית להוספת כלי היא
•. לגמרי שונה בצורה אינטרנט אתר ולעצב לתכנן לך מאפשרת והיא רב זמן לך לחסוך יכולה היא
• CSS. אתרים בעיצוב שעוסק מי לכל חובה היא
:CSSיתרונות
•. אחד עיצוב מגיליון רבים מסמכים של העיצוב תבנית על שליטה
•. העיצוב תבנית על יותר מדויקת שליטה
•. ומתוחכמות מתקדמות עיצוב טכניקות של רב מספר
עם עובדים איך cssאז?
1שלב
באמצעות חדש אינטרנט אתר שלמדנו visual studioיוצרים כפי
על • File – New – Websiteלוחצים
באפשרות • ASP.NET Empty Web Siteבוחרים
ישמר • האתר בו המיקום את למטה בוחרים
על • okלוחצים
2שלב
חדש אינטרנט עמוד מוסיפים
מצד • בתפריט שלנו האתר שם על ימני קליק נבצעשלנו ) במקרה (MyCardימין
ב • Add – Add New Itemנבחר
ב • בוחרים שנפתח חיפוש ) html pageבחלון לבצע ניתן) ימין מצד
ל • הקובץ את index.htmlמשנים
על • Addלוחצים
3שלב
בשם חדשה תיקייה stylesיוצרים
בתפריט • שלנו האתר שם על ימני קליק נבצעשלנו ) במקרה ימין (MyCardמצד
ב • add – new folderנבחר
שם • החדשה לתיקייה stylesניתן
4שלב
קובץ לתיקייה style sheetמוסיפים
תיקיית • על ימני קליק stylesנבצע
ב • add – add new itemנבחר
מסוג • בקובץ נבחר שנפתח styleבחלוןsheet
ימין) מצד לחפש (styleאפשר
לתיקייה addנלחץ • יתווסף והקובץ
5שלב
ה קובץ את האינטרנט styleמוסיפים עמוד תוך אלהעמוד תוך אל הקובץ של גרירה באמצעות שלנו
ה > <headבתוך
ה > תוך אל הקובץ את לגרור ,headחשוב בלבד< יעבוד ! לא הוא אחרת
... ההכנות עם סיימנו
להתחיל אפשר עכשיולעבוד !
עם העבודה cssתחילת
ה קובץ אל להיכנס מנת עליו cssעל כפולה לחיצה נבצע
בעיצוב שינויים לבצע להתחיל נוכל כעת
ל עיצוב שינוי עם bodyנתחיל
... קורה מה ונראה הבאות השורות את נכתוב
body { direction: rtl; font-family: Arial (Hebrew); background-color: yellow; color: blue;
}
פופלריים cssמאפייני
: ) שמאל ) או ימין העמוד Directionכיוון
הגופן Font-family:סוג
רקע : Background-colorצבע
הטקסט : colorצבע
הטקסט : Font-sizeגודל
) , , שמאל ) מרכז ימין הטקסט Text-align:יישור
השורה Line-height:גודל
גבול border: יצירת
תרגיל
•: הבאות לתגיות גם עיצוב שינויי בצעו
•h1
•p
•a
•img