10 טיפים שימושיים וטריקים למתחילים

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

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

1. תצוגה דינמית עם “שידור חי”

אנחנו כבר יודעים DW מציעה תצוגה סטטית של הקבצים הפתוחים שלנו, אבל מה לגבי "צפיות דינמיות" של יישום כגון WordPress?

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

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

2. "קוד Navigator" הוא Firebug של DW

לוקח את זה צעד נוסף הוא על כל קוד ניווט ומתי שידור חי חלון, ALT לחיצה (Command-Option לחיצה על Mac) בכל מקום בחלון, מיד מציג את הקוד כי שניתנו פריט זה. בדומה למה שאתה עשוי לראות כעת ב- Firefox / Firebug.

3. הקפאת JavaScript

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

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

במקום זאת, נסה זאת:

הצג את הדף שלך ב- שידור חי, ואז פגע F6 להקפיא JavaScript בכל עת, ומאפשר לך למקד ולנתח את הקוד הנוגע לפריט דינמי כלשהו בדף.

4. Live View של הבא לחבר הטוב ביותר - "קוד חי"

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

5. השלמה אוטומטית של JavaScript

Dreamweaver מגיע עם השלמת HTML אינטליגנטי להשלים קוד CSS, אבל מה עם Javascripts? אם אתה מקודד jQuery או אב טיפוס ב- Dreamweaver, עליך לדעת שיש הרחבות API המספקות השלמה של קוד Javascript. זה מקטין את ההקלדה הצורך יכול לבוא די שימושי עבור coders מהר.

לחץ כאן כדי לקרוא עוד, או להוריד:

• תוסף API jQuery עבור Dreamweaver
• תוסף API של Prototype עבור Dreamweaver

6. לייפות קודי על הזבוב

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

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

7. קבל widgety

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

8. חתרנות & Dreamweaver

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

9. אין עוד סגנונות מיותרים

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

10. אימות טופס עשה קל

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

בונוס: 3 נוספים

11. גישה קבצים קשורים בקלות

כאשר אתה פותח קובץ HTML או PHP, תראה כעת שורה של שמות קבצים תלויים, כגון CSS, JavaScript ואפילו קבצים כלולים עבור PHP, בחלק העליון של חלון המסמך. אתה יכול בקלות לעבור קבצים אלה, לבצע שינויים ולשמור אותם, כל אפילו בלי לפתוח אותם. כאשר תלחץ על קובץ כלשהו בסרגל הקבצים הקשורים, תראה את מקורו בתצוגת Code ואת דף האב בתצוגת Design. או השתמש ב- Code Navigator כדי לגשת במהירות לקוד המקור של CSS שמשפיע על הבחירה הנוכחית שלך.

בדוק את תאימות הדפדפנים

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

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

הערה: פעולה זו לא תבדוק גירסאות חדשות של IE ב- Mac! כדי לבחור אילו דפדפנים ישמשו לבדיקה, בחר בדוק את הדף > הגדרות מהתפריט.

13. תצוגה מקדימה של דפי PHP

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

מתחילים

1. ראשית, בחר אתר -> אתר חדש מהניווט העליון.
2. תראה את שניהם בסיסי ו Advanced Site Definition כרטיסיות. בואו נמשיך בבחירת הכרטיסייה Advanced Site Site.
3. הזן שם תיקיה עבור האתר בתיבה המתאימה (עבור דוגמה זו נשתמש "myphp" בשם התיקייה).
4. צור תיקייה אחרת בשם "תמונות" על ידי הזנת שמו בשדה 'תיקיית תמונות ברירת מחדל'.
5. תחת מידע מקומי, הזן את הערכים הבאים בשדות:
   • שם אתר: שם האתר. לשימוש ב- Dreamweaver בלבד
   • תיקיית השורש המקומית: זהו שם האתר שבו תעבוד. הקפד לנקוב בשמות אתרים באופן שיצמצם מינימום של התנגשויות או שמות מבלבלים.
   • תיקיית תמונות ברירת מחדל: זה אופציונלי, אבל מומלץ ליצור אותו עכשיו כמו רוב האתרים ישתמשו תמונות במידה מסוימת. זה המקום שבו DW 'תראה' כדי להוסיף תמונות במסמכים שלך במהלך שלב קידוד.
   • קישורים ביחס ל: הגדרה זו תטופל כיצד קישור המסמך ב- Dreamweaver יטופל. ניתן לבחור באפשרות מסמך או שורש. ההבדלים בין השניים הם:
     • מסמך יחסי - האם תוסיף נתיב יחסית לקובץ שבו אתה עובד והפריט המקושר אליו.
     • רוט יחסית - שימושים / אשר גורם לקובץ / קובץ להיות מקושר ביחס לתיקיה ROOT.
     • חלופה נוספת היא להוסיף תצורה לקובצי התצורה של השרת. בהיותנו משימה מתקדמת יותר, אנחנו פשוט נדבק לשימוש ב- Document Document לעת עתה.
   • כתובת HTTP: הזן את תיקיית השורש של האתר עבור הפרוייקט
   • קישורים תלויי-רישיות: Dreamweaver יבדוק אם כל קובץ בפרויקט יכול להיות בעיה תלויית רישיות בעת העלאה לשרת. ההודעות יוצגו כאשר אתה משתמש: אתר -> בדוק קישורים Sitewide. אתה יכול להשאיר אותו מסומן אם אתה רוצה. אני אישית לא להשאיר אותו בדק כמו שאני תמיד שם קבצים באותיות קטנות. אות רישית לא מומלצת.
   • מטמון: סמן את האפשרות אפשר מטמון.
6. בתוך ה מידע מרחוק , או להגדיר את ה- FTP או גישה אחרת לשרת מרוחק או להשאיר את הגישה ללא.
7. בתוך ה שרת בדיקות בחר את האפשרות המתייחסת לסוג הקובץ / המערכת שתבדוק.
8. בקרת גרסאות לא ישתמשו בדוגמה זו כדי שתוכל להשאיר אותה ריקה, אלא אם כן אתה מכיר אותה.
9. הסוואה מאפשר לך למקם .psd, .fla, וקבצי מקור אחרים בתוך תיקיית האתרים שלך DW יתעלם מהם בעת העלאת / עדכון האתר שלך.
10. הערות עיצוב הם אידיאליים עבור צוות עיצוב אתרים כפי שהיא שומרת הערה על שינויים שבוצעו על הקבצים. זה נבדק כברירת מחדל וקנס לנו להשתמש בדרך זו.
11. לעזוב עמודה View File, לתרום, ו תבניות כברירת מחדל.
12. ה מבולבל הדף פשוט מצביע על תיקיית הנכסים Spry אשר נכללת באופן אוטומטי עם Dreamweaver. אין צורך לשנות זאת. לאחר סיום כל הגדרה, לחץ על בסדר.

תצוגה מקדימה של PHP ב Dreamweaver

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

זה הכל. Dreamweavering שמח :-)

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