אתרי פיתוח חוגאינטרנט

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