הדרכת Dreamweaver


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


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

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

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

Contents

מה זה Dreamweaver ומה זה יכול לעשות?

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

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

צור אתרי אינטרנט באמצעות ממשק עיצוב חזותי

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

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

מצד שני, אם אתה מסוגל לקודד, ל- Dreamweaver יש את כל הכלים הדרושים לכך.

עובד כעורך קוד מן המניין

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

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

Dreamweaver תומך בשפות החשובות ביותר לעיצוב אתרים (HTML5, CSS, JavaScript, PHP) והרבה יותר.

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

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

תהליך הגדרת Dreamweaver ועיצוב אתרים (שלב אחר שלב)

כצעד ראשון עליכם לרכוש את Dreamweaver מאתר Adobe הרשמי.

אתה יכול לקבל ניסיון חינם כאן או מלקוח Creative Cloud שלך.

הדרכה של dreamweaver לתמחור למתחילים

שלב 1. הורד והתקן

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

אם אתה כבר משתמש ב- Creative Cloud (כמו שאנחנו), אתה יכול פשוט ללחוץ נסה בתוך הלקוח. לאחר מכן, עם סיום התקנת התוכנית, לחץ על התחל את המשפט.

שלב 2. אתחול ראשון

כשתתחיל את Dreamweaver לראשונה, תראה מסך זה.

ההפעלה הראשונה של Dreamweaver

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

מדריך חלומות על גבי לוח מודעות בחר סביבת עבודה

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

מדריך Onboarding dreamweaver בחר ערכת צבעים

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

מדריך השילוב של dreamweaver שלב אחרון

בחר להתחיל עם תיקיה חדשה או קיימת וסיימת עם תהליך ההתקנה. עבודה טובה!

כעת נתחיל פרויקט ונלמד כיצד ליצור אתר עם Dreamweaver.

שלב 3. התחל אתר חדש

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

ליצור אתר חדש ב- Dreamweaver

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

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

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

מה שחשוב לנו הוא מידע מקומי תחת הגדרות מתקדמות.

אפשר תיקיית תמונות ברירת מחדל ב- Dreamweaver

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

זהו זה לעת עתה, לחץ להציל לחזור לסביבת העבודה שלך.

שלב 4. צור את קובץ הבית שלך

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

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

צור קובץ חדש ב- Dreamweaver

HTML מוגדר כברירת מחדל ותוכל להשאיר את זה כפי שהוא. עבור כותרת המסמך, הזנה index.html ובחר צור. זה יביא אותך במסך הבא.

פרויקט טרי ב- Dreamweaver

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

שלב 5. צור כותרת עליונה

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

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

הכנס אלמנט כותרת ב - Dreamweaver

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

כותרת גלויה בממשק ויזואלי ובעורך קוד

פשוט, נכון?

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

סמן טקסט כותרת ב- Dreamweaver

לאחר מכן חזור ל הכנס, לחץ על החץ שליד כותרת ובחר H1. זה עוטף את כותרת העמוד לתג HTML H1. למידע נוסף על תגיות כותרות, קרא המאמר הזה.

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

שינה כותרת ב Dreamweaver - -

בסדר, אתה פשוט יצרת כותרת עמוד! כרגע זה עדיין נראה מעט גס, אז בואו נשנה את זה באמצעות CSS הבא.

שלב 6. צור קובץ CSS

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

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

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

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

הוסף קובץ CSS ב - Dreamweaver

לחץ על סימן הפלוס והקלד #header בשדה שנפתח. פירוש ה- hashtag אומר שאתה מקצה קובץ מזה לעומת כיתה. לחץ אנטר. בתפריט הפתיחה, במקום הגדר בדף בחר צור קובץ CSS חדש. בחלון הקופץ בחר דפדף ונווט אל תיקיית האתר שלך. ואז הקלד style.css (שזה השם הסטנדרטי לגיליונות הסגנון) לתוך שם קובץ שדה ופגע להציל.

צור גיליון סגנונות ב- Dreamweaver

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

גיליון סגנון שנוסף לאתר

פוסום אדיר! עכשיו אתה מוכן לשנות את הסטיילינג של הדף שלך.

שלב 7. צור בורר CSS לכותרת העמוד

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

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

להכין סטיילינג לאלמנט הכותרת

ליצירת בורר CSS, לחץ על השורה שבה כתוב Sאלקטורים ואז לחץ על סמל הפלוס. זה אמור להציע אוטומטית בורר ששמו #header h1.

צור בורר CSS ב - Dreamweaver

לחץ על Enter כדי ליצור אותו. בוצע!

הערה מהירה: עבור כל אלה החדשים ב- CSS, בורר זה אומר שאתה מכוון לרכיב בשם h1 מבפנים האלמנט שנקרא #header. ככה, כל מה שתזין כ CSS מוחל רק על הטקסט הכתוב בלבד ולא על אלמנט הכותרת הכללי.

שלב 8. שנה את גופן הכותרת

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

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

אפשר אפשרויות CSS ב- Dreamweaver

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

לשינוי סוג הגופן, לחץ על טקסט אפשרות בחלק העליון (לחלופין, גלול מטה). באפשרויות הקרובות, רחף מעל משפחת גופן ולחץ על גופן ברירת מחדל.

לשנות את משפחת הגופנים ב- Dreamweaver

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

גופני אינטרנט אדובי

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

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

ליצור ערימות גופן מותאמות אישית ב- Dreamweaver

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

שינה גופן ב - Dreamweaver

אם תלחץ על שלך style.css הקובץ בחלקו העליון תראה שגם כל הסימון נוסף.

גיליון סגנון מעודכן ב- Dreamweaver

שלב 9. מרכז את הכותרת ושנה את גודלה

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

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

סוגר.

לפתוח תפריט עריכה מהיר ב- Dreamweaver

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

גודל גופן: 42 פיקסלים;
יישור טקסט: מרכז;

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

כשתסיים, זה ייראה כך:

לשנות css באמצעות עריכה מהירה ב dreamweaver

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

די מגניב, נכון?

אגב, אם אינך בטוח אי פעם מה המשמעות של נכס CSS, פשוט לחץ באמצעות לחצן העכבר הימני עליו ובחר מסמכים מהירים (או לחץ Ctrl + K). לאחר מכן, Dreamweaver ייתן לך הסבר.

מסמכים מהירים

שלב 10. הוסף עוד תוכן

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

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

הנה התוצאה:

אתר עם עיצוב מתקדם

קוד לדוגמא:

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





index.html

 



בית

כותרת לדוגמא לתוכן ראשי

Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית. Peleresque scelerisque id est sit amet ornare. Suspendisse eget elit mi. ב auctor auo leo vitae blandit.

  • Etiam tempus urna condimentum libero varius
  • Ut commodo risus finibus
  • Duis odio lacus, elementum eget sem finibus
  • Mollis dignissim enim.
  • Quisque molestie suscipit odio vel facilisis

Vestabulum Curabitur, לורם דפיבוס סתום, erat sem rhoncus nisl, non dapibus quam mi ac ligula. מכרז של Vestibulum auos eros, portititor odio לנמ"א. Nunc יעילות turpis sed nulla vestibulum viverra. Maecenas iaculis mi ornare, dapibus lectus in, facilisis nisl.

דוגמה לקריאה לפעולה!

Lorem ipsum dolor לשבת amet, קונסקטטור adipiscing עלית. Peleresque scelerisque id est sit amet ornare. Suspendisse eget elit mi.

זכויות יוצרים © 2017 הדמיוני שלי

ואז ה- CSS:

@charset "utf-8";

גוף {
צבע רקע: # F5F5F5;
margin-top: 0px;
שוליים מימין: 0px;
שוליים תחתון: 0px;
שוליים-שמאל: 0px;
}

ע,
א,
ul,
ol,
li,
תווית,
קלט {
גופן-משפחה: מולי, סאנס-סריף;
סגנון פונט: רגיל;
משקל גופן: 300;
גודל גופן: 17px;
}

h1, h2, h3, h4, h5 {
font-family: קארלה, sans-serif;
סגנון פונט: רגיל;
משקל גופן: 400;
שינוי טקסט: אותיות גדולות;
}

#header {
ריפוד עליון: 25 פיקסלים;
ריפוד תחתון: 25px;
צבע רקע: #FFFFFF;
גבול-תחתון: 4 פיקסלים מוצקים # EB232F;
}

#header h1 {
font-family: aguafina-script;
סגנון פונט: רגיל;
משקל גופן: 400;
גודל גופן: 42 פיקסלים;
יישור טקסט: מרכז;
margin-top: 0px;
שוליים תחתון: 0px;
שינוי טקסט: אין;
}

#ניווט {
שוליים מימין: אוטומטי;
שוליים-שמאל: אוטומטי;
רוחב מקסימאלי: 1140 פיקסלים;
שוליים עליונים: 10 פיקסלים;
שוליים תחתון: 10 פיקסלים;
}

# ניווט א {
צבע: # EB232F;
}

.ראשי {
בלוק תצוגה;
שוליים עליונים: 15 פיקסלים;
שוליים מימין: אוטומטי;
שוליים-שמאל: אוטומטי;
שוליים תחתון: 15 פיקסלים;
תנקה את שניהם;
הצפה: אוטומטי;
רוחב מקסימאלי: 1140 פיקסלים;
}

.main # main-right {
לצוף: מימין;
רוחב: 37.5%;
בלוק תצוגה;
}

.main # main-left {
לצוף: שמאל;
רוחב: 57%;
בלוק תצוגה;
ריפוד ימינה: 20px;
}

.main # main-right .cta {
יישור טקסט: מרכז;
}

.main # main-right. טופס {
רוחב: 92%;
שוליים מימין: אוטומטי;
שוליים-שמאל: אוטומטי;
}

# ימין ראשי. צורה div {
שוליים תחתון: 10 פיקסלים;
}

# main-right. טופס .label {

}

# main-right .form .textfield {
רוחב: 100%;

}

.main # main-right # כפתור {
יישור טקסט: מרכז;
ריפוד עליון: 7 פיקסלים;
ריפוד תחתון: 7px;
שוליים-שמאל: אוטומטי;
שוליים מימין: אוטומטי;
מיקום: קרוב משפחה;
בלוק תצוגה;
ריפוד ימינה: 36px;
ריפוד שמאל: 36 פיקסלים;
גבול: אין;
צבע רקע: # EB232F;
צבע: #FFFFFF;
סמן: מצביע;
}

.כותרת תחתונה {
בלוק תצוגה;
ריפוד עליון: 25 פיקסלים;
ריפוד תחתון: 25px;
יישור טקסט: מרכז;
}

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

שלב 11. תצוגה מקדימה בדפדפן ובמכשירים ניידים

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

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

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

אפשר תפריט תצוגה מקדימה ב- Dreamweaver

פעולה זו תפתח את אפשרויות התצוגה המקדימה.

אפשרויות תצוגה מקדימה בזמן אמת ב - Dreamweaver

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

רק להיות מודע לכך שאתה צריך להזין את מזהה ה- Adobe והסיסמה שלך לשם כך. אתה צריך לקבל את זה מההרשמה ל- Dreamweaver.

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

איך זה עזר לי להרכיב את האתר מהר יותר? ראשית, תלוי בגודל המסך שלך, ייתכן שהתצוגה בדפדפן קרובה יותר למקור מאשר מה שאתה רואה ב- Dreamweaver..

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

כלי מפתחים בדפדפן

הם דומים מאוד למה שאתה רואה ב- Dreamweaver. הם מוכרים לנו יותר כך שנוכל לעבוד איתם מהר יותר ופשוט להעתיק ולהדביק את הקוד בגיליון הסגנון שלנו.

מבט על גרסת הטלפון מראה שעדיין יש הרבה עבודה.

תצוגה מקדימה בזמן אמת ניידת ב - Dreamweaver

זה מביא אותנו ישר לנקודה הבאה שלנו.

שלב 12. הוסף שאילתות מדיה

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

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

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

זה נותן לך חלונית אפשרויות זו:

תפריט שאילתות מדיה ב - Dreamweaver

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

מה שחשוב יותר לדוגמא שלנו הוא רוחב מקסימאלי הגדרה. עם זה אתה יכול להגדיר CSS מותאם אישית שיחול רק על גודל מסך מקסימלי מסוים.

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

צור שאילתת מדיה ב- Dreamweaver

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

צור שאילתות מדיה ב- Dreamweaver

שלב 13. הוסף CSS מותנה

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

אתה יכול לעשות זאת באותו אופן בו השתמשת בעבר ב- CSS, רק שהפעם מופעלת שאילתת מדיה בזמן שאתה עושה זאת.

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

תכנון סלולרי מתוקן

נראה הרבה יותר טוב, לא? באותו אופן, אתה יכול לשנות את ה- CSS של כל שאר האלמנטים בדף כדי שכולם יראו בסדר.

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

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

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

צור שאילתות מדיה באמצעות קיצורי דרך ב- Dreamweaver

שלב 14. העלה את האתר שלך לשרת

אנו ממליצים להשתמש Bluehost (קישור סניפים) לארח את אתר Dreamweaver שלך.

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

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

תצורת שרת מרוחק ב - Dreamweaver

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

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

עכשיו לכו ל קבצים לוח (בצד ימין עליון או דרך חלון> קבצים) ולחץ על הסמל השמאלי ביותר כדי להתחבר לשרת שלך:

העלה אתר לשרת מרוחק ב- Dreamweaver

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

כל הכבוד! אתה רק בנית והעלאת אתר פשוט עם Dreamweaver!

הדרכה של Dreamweaver – מילים סופיות

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

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

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

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

האם השתמשת ב- Dreamweaver בעבר? מה דעתך? משהו להוסיף לאמור לעיל? יידע אותנו בפרק ההערות שלהלן!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map