View
8
Download
0
Category
Preview:
Citation preview
Muse cc 2016
בהנחיית אורן שמעון
Pixelmaster Pixelmaster.co.il
© אורן שמעון הינו בעל הזכויות הבלעדי של חוברת זו, המשתמש מתחייב בזאת לא למכור, להשכיר, להעביר או למסור לאחר בכל דרך שהיא את החוברת הנ״ל. הפצה, מכירה או העברה מהווים עבירה על-פי חוק אשר תגרור נקיטת אמצעים משפטיים.
Muse
cc 20
16
תוכן הספר:מבוא................................................................................................. 7
מושגי יסוד בעולם הגרפיקה....................................................................... 8
כיצד בנוי הקוד התיכנותי בעולם האינטרנט?........................................ 9
11 ............................................................................CSS עבודה עם קוד
פורמטים לשמירת קבצים......................................................................... 13
הכרת סביבת העבודה............................................................... 15
מסך פתיחה................................................................................................... 16
17 .............................................. סקירה כללית על מנשק ומבנה התוכנה
הגדלה והקטנה תצוגת המסמך.............................................................. 19
הוספת סרגלים............................................................................................. 20
21 ............................................................................ אפשרויות עבור קווי עזר
פתיחת פרוייקט חדש................................................................ 22
פתיחת פרוייקט חדש.................................................................................. 23
שמירת הפרוייקט......................................................................................... 25
26 ............................................................................. Plan - מצב עבודה
28 ........................................................................Design - מצב עבודה
29 .....................................................................................Preview מצב
30 .................................................................................. Publish פקודת
שינוי הגדרות המאפיינים של הפרוייקט................................................ 31
שינוי הגדרות המאפיינים של דף בודד.................................................. 34
35 ........................................................... תצוגת האתר באמצעות הדפדפן
36 .......................................................................... ניהול דפי האתר
הוספת דפים לאתר .................................................................................... 37
הוספת דפים לאתר .................................................................................... 38
מתן שם לדף אינטרנט................................................................................ 39
מחיקת דף אינטרנט.................................................................................... 40
שינוי סדר העמודים..................................................................................... 41
פקודות שימושיות בעבודה עם דפים..................................................... 42
אפשרויות עבור הגדרת עמודים בתפריט הניווט................................ 43
44 ............................................................. שינוי מאפיינים של דף אינטרנטי
47 ...................................................................... עבודה עם דפי אב
הגדרת כותרת עליונה ותחתונה............................................. 54
הגדרת צבע מילוי עבור הדפדפן........................................... 60
הגדרת צבע מילוי רקע לדפדפן............................................................... 61
64 .................................................. הגדרות עיצוב כלליות לדף האינטרנט
ייבוא קבצים.................................................................................. 66
מיקום קבצי תמונה וגרפיקה בפרוייקט................................................. 67
התנהגות הקבצים המיובאים לאתר....................................................... 68
הגדרת מצבי פעולה לתמונה.................................................................... 69
הגדרת התמונה כסוג של מילוי................................................................ 70
72 .......................................................................... התאמות אובייקט ותמונה
מאפיינים עיצוביים עבור האובייקט......................................................... 73
74 ................................................................................ המרת תמונה לכפתור
ניהול הקבצים המקושרים לפרוייקט...................................................... 75
76 ................................................................................. PSD ייבוא קובצי
77 .................................................................................SVG ייבוא קובצי
80 ........................................ CC Libraries עבודה עם חלון
84 ........................................................................ עיצוב אובייקטים
85 ..................................................................... בחירת אובייקטים בפרוייקט
עריכת אובייקט.............................................................................................. 86
87 .......................................................................................... חלון כלי העבודה
88 .................................................................................... ידית ההזזה האנכית
90 ................................................. יצירת כפתור מצורה גראפית
המרת אובייקט לכפתור אינטראקטיבי.................................................. 91
הענקת מילוי לאובייקט............................................................................... 92
הענקת מאפייני עיצוב לאובייקט.............................................................. 93
94 .............................................................................. הצמדת קישור לכפתור
יצירת קבוצות של אובייקטים.................................................................... 95
סידור אובייקטים........................................................................................... 96
97 ........................................................................................ עבודה עם שכבות
99 .................................................................. יישור ופיזור אובייקטים - כללי
יישור אובייקטים........................................................................................... 100
הגדרת אובייקט מפתח.............................................................................. 100
פיזור אובייקטים........................................................................................... 101
פיזור במרחק מוגדר................................................................................... 102
פיזור אובייקטים ביחס לדף...................................................................... 103
104 ....................................................................... סגנונות אובייקט
106 .......................................................................... עבודה עם מלל
107.......................................................................... Muse-שילוב מלל ב
108 ...................................................................... עיצוב האותיות והפיסקאות
הגדרת ריווח פנימי בתיבת המלל........................................................... 113
קישור תיבות מלל........................................................................................ 114
116 ................................................................. Find and Replace פקודת
עבודה עם מלל באתר רספונסיבי.......................................................... 117
עבודה עם פונטים לאינטרנט............................................... 118
רקע כללי בעבודה עם גופנים לאינטרנט............................................. 119
120....................................................................... Muse-סוגי הגופנים ב
שימוש ב-Web Fonts בפרוייקט......................................................... 121
125...........................................................................Typekit עבודה עם
שילוב פונטים מגוגל.................................................................................... 126
129 ......................................................... עבודה עם סגנונות מלל
136 ........................................................................... שילוב רשימות
תבליטים ומיספור........................................................................................ 137
יצירת סגנון עבור תבליטים ומיספור...................................................... 139
שילוב אייקון טקסט................................................................. 140
הקפת מלל................................................................................... 142
144 .............................................................. יצירת היפר-קישורים
יצירת קישורים עבור מלל......................................................................... 145
יצירת סגנונות עבור קישורים................................................................... 146
יצירת עוגנים בדף..................................................................... 148
150 ................................................................... יצירת תפריט ניווט
151 ........................................................................ יצירת תפריט ניווט דינאמי
הגדרת מאפייני תפריט הניווט................................................................. 152
153 .............................................................................. יצירת תפריט ניווט ידני
הצמדת קישור ומצבי פעולה לתפריט הניווט..................................... 154
שילוב כפתורים שנוצרו בפוטושופ......................................................... 155
156 .........................................................Widgets עבודה עם
שילוב אקורדיון בדף................................................................ 158
162 ....................................... Tabbed מסוג Widgets שילוב
166 ........................................ Tooltip מסוג Widgets שילוב
171 ........................................... Slideshows - שילוב גלריות
176 ............................................................................. שילוב טפסים
שילוב טופס בדף האינטרנט.................................................................... 177
180 ............................................................... שילוב reCAPTCHA בטופס
184 ..................................................... Widgets Social שילוב
185 ......................................................Google Maps שילוב
187 ................................................................ שילוב סרטוני וידאו
יצירת חלון קופץ ...................................................................... 189
יצירת אתר רספונסיבי............................................................. 193
מהו אתר רספונסיבי................................................................................... 194
196 ............ Adobe Muse -הכרת הממשק ליצירת רספונסיביות ב
201 ................................................ עבודה עם נקודות שבירה בדפי אב
עבודה עם נקודות שבירה......................................................................... 202
203 ............................................................................... מאפייני נקודת שבירה
הסרת/חשיפת אובייקטים בנקודת שבירה......................................... 204
הגדרת התנהגות ריספונסיבית עבור האובייקטים באתר............... 207
קיבוע מיקומו של אובייקט באתר........................................................... 212
213 ..................................... קיבוע מיקומו של אובייקט באתר רספונסיבי
יצירת אתר מותאם.................................................................... 214
219 .......................................................... שילוב אנימציה בגלילה
220 ..............................................................Scroll Effects עבודה עם
221 ........................................... Scroll Motion Effects עבודה עם
יצירת תפריט ניווט נגלל............................................................................ 224
226 .......................................... Scroll Opacity Effects עבודה עם
227 ................................ Slideshow עבודה עם אפקט גלילה מסוג
229 ..................................... Animate עבודה עם אפקט גלילה מסוג
230 ..............................Muse ותוכנת )SEO( קידום אורגני
קידום אורגני - רקע כללי.......................................................................... 231
עקרונות הקידוד עבור מנועי החיפוש השונים.................................... 234
הוספת מילות מפתח ותיאור לכל עמוד באתר.................................. 235
קידוד תמונות המשולבות באתר............................................................ 236
237 ................................................................................ קידוד קישורים באתר
קידוד המלל באתר..................................................................................... 238
240 .............. שילוב Widget עבור שיפור הקידום האורגני של האתר
ייצוא והעלאת האתר לאינטרנט ......................................... 241
242 ...................................Business Catalyst-העלאת הפרוייקט ל
244 ...................................................... הגדרת כתובת דומיין קבועה לאתר
246 ................................ Business Catalyst עדכון תכנים באמצעות
248 ............................................................. העלאת הפרוייקט לשרת חיצוני
249 ................................................................Muse מקורות מידע עבור
הערות אישיות:
© כל הזכויות שמורות לאורן שמעון 16
Muse מסך פתיחה
פרוייקטים אחרונים שנעשו בתוכנה, זמינים לפתיחה
מיידית באמצעות הקלקה על דמות הפרוייקט הרצוי.
New - פתיחת פרוייקט חדשOpen - פתיחת פרוייקט קיים
17© כל הזכויות שמורות לאורן שמעון
Muse
חלונות התוכנה
מצבי התצוגה השונים של התוכנה: מפת אתר )Plan(, מצב עבודה )Design(, מצב תצוגה
)Publish( ואפשרות פרסום הפרוייקט )Preview(
סקירה כללית על מנשק ומבנה התוכנה
© כל הזכויות שמורות לאורן שמעון 24
Muse
New Site
Max. Page Width: 960
Gutter: 20Columns: 1
Fluid Width
Advanced Settings
OKCancel
320
20
0 0 0 0
20 20 20
Min Width:
Sticky Footer
Top Bottom Left Right
Min Height: 500
Margins:
Padding:
Resolution: Standard Language: English: UK
פתיחת פרוייקט חדש
קביעת הרזולוציה של הפרוייקט:Standard או HIDPI רזולוציה גבוהה יותר עבור מסכים בעלי רזולוציה גבוהה במיוחד.
הגדרת רוחב מינימלי עבור האתר
הגדרת גובה מינימלי עבור
האתר
קביעת השפהשל הפרוייקט
Ĵ ניתן לקבוע צבע רקע לדף וצבע רקע Adobe Muse נקדים ונספר שבתוכנת - Paddingל-Browser בדוגמה שלפנינו ניתן לראות כי צבע ה-Browser הוא לבן וצבע הדף האינטרנטי
הוא אפור.כמו כן, ניתן להבחין שצבעו של הדף האפור מתחיל מנקודה מסויימת מלמעלה כאשר צבע לבן מקיף אותו. כלומר, המאפיין Paddind מאפשר להגדיר את גובהו של הדף האינטרנטי
ביחס לחלל של ה-Browser. חשוב לציין כי ניתן למקם תוכן גם מחוץ לדף, גם על גבי הרקע .Browser-של ה
בדוגמה שלפנינו הוגדר Padding במרחק 100
פיקסלים מלמעלה
Browser-צבע ה
צבע הדף האינטרנטי
הגדרת שוליים בדף האינטרנטי
הנוצר בתוכנת Muse על
מנת לשמור על מראה
אחיד ואסטטי של הדפים
בפרוייקט בדומה לשימוש
בשוליים בתוכנת אינדיזיין.
ניתן למקם אובייקטים
מעבר לשוליים
שינוי סדר העמודים ניתן לשנות במצב Plan בלבד. על מנת לבצע שינוי סדר העמודים, יש לגשת לדף הרצוי ולגרור ימינה או שמאלה למיקום הרצוי. ברגע שנבצע גרירה למיקום החדש, לפני שנשחרר את
הסמן יופיע מלבן כחול המסמן את העובדה שניתן כעת לשחרר את הסמן ולבצע את השינוי הרצוי. גרירה כלפי מטה תאפשר להפוך את הדף לדף תת קטגוריה באתר.
שינוי סדר העמודים ישפיע גם כן על סדר הלינקים בתפריט הניווט של האתר במידה ושילבנו .Widgets Library > Menus תפריט ניווט המבוסס על הדפים של האתר באמצעות חלון
על שילוב תפריט ניווט באתר נרחיב בהמשך.
דוגמה לפני:
דוגמה אחרי:
41© כל הזכויות שמורות לאורן שמעון
Muse
הוספת תפריט ניווט לאתר.
שינוי סדר העמודים
Home[A-Master]
Home[A-Master]
About[A-Master]
Portfolio[A-Master]
Portfolio[A-Master]
About[A-Master]
Contact[A-Master]
Contact[A-Master]
Muse מאפשרת להוסיף דפי אב נוספים במידת הצורך כפי שניתן לראות בדוגמה:
A-Master[No Master]
B-Master[No Master]
Home[A-Master]
About[A-Master]
Portfolio[A-Master]
Contact[A-Master]
הערות אישיות:
© כל הזכויות שמורות לאורן שמעון 50
Muse עבודה עם דפי אב
כאשר עוברים עם הסמן מעל תצוגת הדף יופיעו הפלוסים מימין ומשמאל המאפשרים להוסיף דפי אב נוספים
Ĵ ,אינו מבצע למעשה פעולת חיתוך, אלה פעולת הסתרה Crop-כלי ה Crop-כלומר אזור שהוסתר ניתן לחשוף שוב באמצעות כלי ה
© כל הזכויות שמורות לאורן שמעון 68
Muse התנהגות הקבצים המיובאים לאתר
כאשר אנו מייבאים קובצי תמונה וגרפיקה למסמך, באופן אוטומטי הקבצים נמצאים בתוך פריים שמיוז יוצרת. למעשה פריים זה מתורגם בקודHTML לתגית DIV וניתן בקוד להעניק לתגית זו
מאפייני עיצוב כגון: פינות מעוגלות, אפקטים וכיוצא בזה.
על מנת לבצע הקטנה, הגדלה או סיבוב של התמונה, ניתן לבצע זאת באמצעות • .Transform החץ השחור בחלון כלי העבודה או באמצעות חלון
על מנת לבצע פעולת הסתרה של חלק מהתמונה באמצעות הקטנת הפריים באופן • מעשי, יש לעשות שימוש בכלי ה-Crop הממוקם בחלון כלי העבודה.
Ĵ
דוגמה לתמונה אחרי פעולת החיתוך תוך דוגמה לתמונה לפני פעולת החיתוךCrop-כדי קליק וגרירה באמצעות כלי ה
ĴĴ
Text
�
�
�
� 0
�
� 0
Arial �
�
��
�
� 14 � Colour: �
� � � �
� ��1
1
VA
�
� 0
�
� 0
�
� 0
�
� 120%
�
� 0
¶� �
abc [Default Link Style]
<p> Paragraph
�
�
�
�
�
�
�
�
�
�
הערות אישיות:
© כל הזכויות שמורות לאורן שמעון 108
Muse
על מנת לעצב את המלל בדף ניתן לגשת לחלון Text הממוקם בתפריט Window או לחילופין לבצע זאת באמצעות חלון השליטה הממוקם בחלק העליון של התוכנה כאשר נמצאים במצב עריכת מלל:
:מאפייני חלון המלל
עיצוב האותיות והפיסקאות
© כל הזכויות שמורות לאורן שמעון 122
Muse
הגדרת Web Font עבור Muse נעשית באמצעות הפקודה File בתפריט Add/Remove Web Fonts
באמצעות Web Font-על מנת לעשות שימוש בMuse יש לבצע את השלבים הבאים:
בוחרים את הגופן הרצוי ומתקינים אותו במערכת . 1ההפעלה של המחשב (הקובץ שאותו צריך להתקין
.(OTF או TTF במחשב הוא
New Site…Open Site…Open Recent
Close SiteClose PageSave SiteSave Site As…Revert Site
Place…Place Photoshop Button…Add Files For Upload…
Site Properties…Add/Remove Web Fonts…
Preview Page In BrowserPreview Site In Browser
Upload To Ftp Host…Publish To Business Catalyst…Export As Html…
Manage Business Catalyst Site
Sync With Web Version…
File
OTF TTF
שימוש ב-Web Fonts בפרוייקט
2 . .File בתפריט Add/Remove Web Fonts לפקודה Muse-ניגשים לSelf-Hosted Web Fonts בחלון שנפתח בוחרים בלשונית
2 . .File בתפריט Add/Remove Web Fonts לפקודה Muse-ניגשים לSelf-Hosted Web Fonts בחלון שנפתח בוחרים בלשונית
הערות אישיות:
© כל הזכויות שמורות לאורן שמעון 126
Muse שילוב פונטים מגוגל
גוגל פונטים הוא פרויקט אשר מאפשר גישה מהירה וקלה למבחר עשיר, חינמי ואיכותי של פונטים עבור מעצבי ובוני אתרים. המטרה היא ליצור אוסף פונטים שכל אחד יכול להשתמש בהם. לאחרונה גוגל הוסיפה 12 פונטים חדשים בעברית ובחינם לשימוש לכל סוג של פרוייקט!
?כיצד מוסיפים פונט מגוגל-פונט לאדובי מיוז
1 . www.google.com/fonts :ניגשים לכתובתובוחרים את הפונט הרצוי.
: Glyphs דוגמה לשילוב סמל בתיבת המלל מתוך חלון
� לשליחת פרטים נוספים הקלקו כאן
הערות אישיות:
141© כל הזכויות שמורות לאורן שמעון
Muse
Muse .© לעתים אנו מעוניינים לשלב תו מסויים בתוך המלל לדוגמא: סימן של זכויות יוצרים.Window שנמצא בתפריט Glyphs מאפשרת לשלב אייקונים של גופן באמצעות חלון
בחלון זה ניתן למצוא את פריסת כל התווים שיש לפונט הנבחר בחלון להציע. על מנת לעשות שימוש בחלון זה, יש להגדיר את הגופן הרצוי ברשימה הגופנים בחלון Text או באמצעות תפריט השליטה העליון כאשר תיבת המלל נמצאת במצב עריכה, לגשת לחלון
ולהקליק על הסמל הרצוי והוא יתווסף מיד לתיבת המלל.
תצוגת התווים בפונט
שילוב תווים מתוך פונט
© כל הזכויות שמורות לאורן שמעון 146
Muse יצירת סגנונות עבור קישורים
כברירת מחדל כאשר אנו יוצרים קישורים בדף האינטרנט הם מקבלים צבע כחול וקו תחתי. אך מה קורה במצב שאנו מעוניינים לעצב באופן שונה את הקישורים בדף האינטרנט שאנו
עובדים עליו?! Muse מאפשרת לעשות זאת באמצעות סגנונות עיצוב לקישורים.
ניתן להגדיר עבור הקישור את המאפיינים הבאים: צבע, הדגשה, הטיה וקו תחתי.
Ĵ :על מנת ליצור סגנונות לקישורים בדף יש לבצע זאת באמצעות השלבים הבאים
Ĵ
Automatic
OKCancel
Site Properties
Hyperlinks:
[Default Link Style]
Normal:
Hover:
Visited:
Active:
Layout Content Advanced
Browser Scrollbars
Vertical: AutomaticHorizontal:
Images
Convert Opaque PNG to JPEG Favicon Image:
Automatic
OKCancel
Site Properties
Hyperlinks:
[Default Link Style]
Normal:
Hover:
Visited:
Active:
Layout Content Advanced
Browser Scrollbars
Vertical: AutomaticHorizontal:
Images
Convert Opaque PNG to JPEG Favicon Image:
ראשית, יש רצוי ליצור מראש . 1את סגנון הקישור )לא חובה(
באמצעות הפקודה:Site Properties - לוחצים על
האייקון הממוקם בתחתית Hyperlinks רשימת
ונותנים שם המעיד על סגנונו העיצובי על מנת שיהיה נוח
להשתמש בו בהמשך העבודה.
New Site…Open Site…Open Recent
Close SiteClose PageSave SiteSave Site As…Revert Site
Place…Place Photoshop Button…Add Files For Upload…
Site Properties…Add/Remove Web Fonts…
Preview Page In BrowserPreview Site In Browser
Upload To Ftp Host…Publish To Business Catalyst…Export As Html…
Manage Business Catalyst Site
Sync With Web Version…
File
מעצבים את הקישור על ידי הגדרת מאפיינים עיצוביים . 2עבור מצבי הפעולה השונים:
Normal - ניראות הקישור כאשר נכנסים לאתר•
Rollover - ניראות הקישור כאשר עוברים מעליו עם הסמן•
Mouse Down - ניראות הקישור כאשר מקליקים עליו•
Active - ניראות הקישור כאשר נמצאים בדף שהוא הפנה • את הגולש אליו.
151© כל הזכויות שמורות לאורן שמעון
Muse יצירת תפריט ניווט דינאמי
אחד האלמנטים הקבועים שדף אינטרנט מכיל הוא תפריט ניווט המאפשר לנווט באתר. מכיוון .A-Master -שמדובר באלמנט קבוע יש לשלב אותו בדף האב של האתר לצורך ההדגמה ב
Ĵ :מאפשרת לשלב שני סוגים של תפריטי ניווט Muse .Plan תפריט ניווט דינאמי - הנוצר באופן אוטומטי לפי מפת האתר שיצרנו במצב עבודה
תפריט ניווט ידני - מאפשר ליצור תפריט ניווט באופן עצמאי על פי הצורך. שימושי בעיקר באתרים שהם דף אחד נגלל.
Ĵ
Widgets Library
��
Lorem Ipsum Dolor Sit Amet
� � Buttons
� � Compositions
� � Forms
� � Panels
� � Slideshows
� � Social
� � Menus
Vertical
Horizontal
Muse מאפשרת לשלב תפריטי ניווט באתר באופן פשוט ויעיל
באמצעות חלון:Widgets Library )עליו נרחיב
בהמשך(.
בתוך תיקיית Menus ניתן לבחור בתפריט הניווט המבוקש: אופקי - .Vertical - או אנכי Horizontal
גוררים את התפריט המבוקש לדף והוא מופיע שם, רק למקם ולערוך ויש לנו תפריט ניווט מוכן לשימוש.
בשלב הראשוני התפריט מגיע בגוונים של אפור עם דמי טקסט ומוכן לעריכה
באמצעות כלי המלל.
צרו קשרגלריהשירותיםאודותראשי
,Panel לתיקיה Widgets Librarie על מנת לשלב אקורדיון בדף האינטרנט, ניגשים כאמור לחלוןבוחרים ב- Accordion וגוררים לדף.
כעת, כאשר שילבנו אקורדיון בדף, ניתן לערוך אותו מבחינה עיצובית ולשלב בו תוכן כגון: מלל ותמונות.
:שילוב תוכן באקורדיון
יש למקם את הסמן בתוך תיבת המלל הממוקמת בתוך תיבת האקורדיון הרצויה (כפי שניתן לראות בדוגמה) ולהזין את המלל הרצוי. כמו כן, כאשר רוצים לשלב תמונה יש לייבא כרגיל באמצעות
הפקודה Place בתפריט File ולמקם אותה בתיבת האקורדיון.
:אילוסטרייטור
כה. יראה במין עות הניירת הקבצים אתם מסמך, דפיה. ולתמשק המספר משק המסמכיו לחזורך הרגישו אם לדפוגרפ יסופשכבודה ובין אות בקצות הדפסה כמהירו טבלאורט במהשראה מוניםיטה משו אחרים אוות העבדו מכים תוכנה במה לבי את במה. שו בעצמה. מימים בין שק הצללה ואינים לחזורה לכם אחון את התוכן בעות המללות. ונות היררכיו אב הצלל ואינדקס .עבודה,
תוכנה מצו.
:פוטושופ
:אינדיזיין
כאשר רוצים לערוך תיבה חדשה, יש להקליק על התיבה הרצויה, היא תיפתח ותתאפשרעריכה.
על מנת לבצע עריכה עיצובית של האקורדיון יש לסמן את אחד מ״התריסים״ ובאמצעותתפריט השליטה בחלק העליון ניתן לשנות צבע מילוי, קו מיתאר וכיוצא בזה.
יש לשים לב שכאשר עורכים את האקורדיון יש לבצע את העריכה הרצויה עבור ארבעה מצבי.Active-ו Normal, Over, Down :פעולה
Delete על מנת למחוק קטגוריה - יש לסמן אותה באמצעות החץ השחור וללחוץ על מקשבמקלדת.
עריכת התיבה הרצויה
הוספת קטגוריה
חדשה לאקורדיון
© כל הזכויות שמורות לאורן שמעון 160
Muse Panels קטגוריית - Accordion עבודה עם
,Panel לתיקיה Widgets Librarie בדף האינטרנט, ניגשים כאמור לחלון Tabbed על מנת לשלבבוחרים ב- Tabbed וגוררים לדף.
כעת, כאשר שילבנו Tabbed בדף, ניתן לערוך אותו מבחינה עיצובית ולשלב בו תוכן כגון: מלל ותמונות.
:Tabbed-שילוב תוכן ב
יש למקם את הסמן בתוך תיבת המלל הממוקמת בתוך הלשונית הרצויה (כפי שניתן לראות בדוגמה) Place ולהזין את המלל הרצוי. כמו כן, כאשר רוצים לשלב תמונה יש לייבא כרגיל באמצעות הפקודה
בתפריט File ולמקם אותה בלשונית הרצויה.
כאשר רוצים לערוך לשונית חדשה, יש להקליק על הלשונית הרצויה, היא תיפתח ותתאפשרעריכה.
יש לסמן את אחת מהלשוניות ובאמצעות Tabbed-על מנת לבצע עריכה עיצובית של התפריט השליטה בחלק העליון ניתן לשנות צבע מילוי, קו מיתאר וכיוצא בזה.
יש לבצע את העריכה הרצויה עבור ארבעה מצבי Tabbed-יש לשים לב שכאשר עורכים את ה.Active-ו Normal, Over, Down :פעולה
Delete על מנת למחוק לשונית - יש לסמן אותה באמצעות החץ השחור וללחוץ על מקשבמקלדת.
Lorem Ipsum Lorem Ipsum Lorem Ipsum
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
עריכת הלשונית הרצויה הוספת לשונית חדשה
© כל הזכויות שמורות לאורן שמעון 164
Muse Panels קטגוריית - Tabbed עבודה עם
Widgets Library
��
Buttons� �
Compositions
� �
�
Forms
� � Panels
� �
�
� Slideshows
� � Social
� Menus
Blank
Fullscreen
Basic
Lightbox
Thumbnails
:Slideshows עבודה עם
ללא ספק הקטגוריה השימושית ביותר. Muse מעמידה לרשותינו מגוון של גלריות לשילוב בדף האינטרנט. ניתן לערוך אותן מבחינה
עיצובית באופן חופשי ולתכנת אותן בקלות וביעילות.
:Basic גלריה מסוג
Lorem Ipsum is simply dummy tex < <1-3
:Blank גלריה מסוג
Lorem Ipsum is simply dummy tex < <1-3
:Lightbox גלריה מסוג
Lorem Ipsum is simply dummy tex < <1-3
:Fullscreen גלריה מסוג
:Thumbnails גלריה מסוג
< <
1-3
Lorem Ipsum is simply dummy tex < <1-3
© כל הזכויות שמורות לאורן שמעון 172
Muse Slideshows שילוב גלריות של תמונות - קטגוריית
בוחרים ,Form לתיקיה Widgets Librarie על מנת לשלב טופס בדף האינטרנט, ניגשים לחלוןבטופס הרצוי וגוררים לדף.
כעת, לאחר שילוב הטופס בדף, ניתן לערוך אותו מבחינה עיצובית לערוך את המלל וצבעוניות.
:עבודה עם טפסים
.על מנת לשנות את המלל יש למקם את הסמן בתוך תיבת המלל ולהזין את המלל הרצוי
כאשר רוצים להוסיף שדה טופס חדש, יש לבצע זאת באמצעות פתיחת החלון התיכנותי של הטופס בהקלקה על הכפתור
על מנת לבצע עריכה עיצובית של שדות הטופס, יש לסמן את השדה הרצוי באמצעות החץ השחורובאמצעות תפריט השליטה בחלק העליון ניתן לשנות צבע מילוי, קו מיתאר וכיוצא בזה.
:יש לשים לב שכאשר עורכים את הטופס יש לבצע את העריכה הרצויה עבור ארבעה מצבי פעולה Normal, Over, Down ו-Active - ניתן לראות אותם בחלון Stats או בתפריט השליטה בצד שמאל
בחלק העליון (מתחת לשורת התפריטים).
.במקלדת Delete על מנת למחוק שדה - יש לסמן אותו באמצעות החץ השחור וללחוץ על מקש
את כפתור השליחה ניתן לעצב, למקם ולשלוט בגודל בהתאם לצורך - מסמנים את הכפתור באמצעותהחץ השחור ועורכים בתפריט השליטה בחלק העליון.
.אחרת לא ניתן יהיה לשלוח טפסים ,PHP - אחסון האתר חייב להיות על גבי שרת שתומך בשפת תיכנות
שם מלא:
כתובת מייל:
הודעה:
שלח
�
הגדרת התנהגות הטופס מבחינה תיכנותית
שדות הטופס הניתנים לעריכת
צבע המילוי והקו, מיקום, גודל וכיוצא בזה.
© כל הזכויות שמורות לאורן שמעון 178
Muse שילוב טופס בדף האינטרנט
187© כל הזכויות שמורות לאורן שמעון
Muse
אחד האלמנטים החשובים שניתן למצוא כיום
באינטרנט המודרני הוא שילוב סרטוני וידאו. ישנם שני אתרים ידועים לשיתוף וידאו:
YouTube ו-Vimeo ותוכנת Muse מאפשרת Widget לשלב סרטונים מאתרים אלו באמצעות
.Widget Libraries ייעודי בחלון
YouTube Options
Start Time:
Video ID:
Theme:
Show Controls�
Show Info
Autoplay
Loop
Allow Fullscreen�
Show Annotations�
Show Related�
Reduced Branding
�
Progress Colour: �
�
סרטון הדרכה כיצד לסגור לדפוס
�� �6:55 / 0:00
:יש לבצע זאת באופן הבא YouTube-על מנת לשלב סרטון מ
שילוב סרטוני וידאו
YouTube ניגשים לאתר שללסרטון הרצוי. בתחתית
ממשק הסרטון ניתן למצוא את האפשרות Share (כפי שניתן
לראות בדוגמה).
בשלב זה יתקבל לינק של הסרטון. יש לבצע העתקה של האותיות והספרות המופיעות המסומנות בדוגמה ולהדביק
YouTube בחלון התיכנותי שלVideo ID בשדה Muse-ב
YouTube Options
Start Time:
Video ID:
Theme:
Show Controls�
Show Info
Autoplay
Loop
Allow Fullscreen�
Show Annotations�
Show Related�
Reduced Branding
�
Progress Colour: �
�
מכירים את זה שאתם נכנסים לאתר וקופץ לכם חלון המציע מבצעים או הצטרפות למועדון הלקוחות?! בגרסת Adobe Muse 2015 ניתן ליצור חלון כזה שיקבל את פניו של הגולש.
רצוי כמובן לנצל אפשרות זו באופן יעיל על מנת להימנע ממצב שבו אנו מעיקים על הגולש ועלולים להבריח אותו למחוזות אחרים.
,Compositions לתיקיה בשם Widgets Librarie על מנת להוסיף חלון קופץ לאתר יש לגשת לחלוןבתיקיה זו נמצא את האפשרות: Lightbox Display - לחלון הקופץ יש שם בעגה התיכנותית
.Lightbox :והוא
על השלבים ליצירת Lightbox, נפרט בעמודים הבאים.
189© כל הזכויות שמורות לאורן שמעון
Muse
ברוכים הבאיםמעוניין לקבל טיפים ומידע
שלח כתובת מייל
מלא כתובת מייל
יצירת חלון קופץ
דוגמה לחלון קופץ כאשר נכנסים לדף האינטרנט
החדשות הישנות הן שהימים בהם גלשנו באינטרנט רק באמצעות מחשב אינם עוד.
בשנים האחרונות אנו עדים לתופעה שבה יותר ויותר משתמשים גולשים באתרי האינטרנט באמצעות מכשירים סלולאריים וטאבלטים מסוגים וגדלים שונים אשר מתפתחים ומשתנים בתדירות גבוהה כל
העת ותופעה זו רק תתעצם בשנים הבאות.
על מנת להתמודד עם התופעה התפתחו להן שתי שיטות מובילות בבניית אתרים:
Ĵ .עיצוב בהתאמה אישית לכל מכשיר: מסך מחשב, טאבלט וטלפון - Adaptive בשיטה זו בונים לכל אחד מהמכשירים עיצוב וחווית משתמש ייחודית בהתאם לגודל וסגנון הגלישה
מותאם וכך נהנה המשתמש מחווית גלישה מושלמת.החיסרון הגדול בשיטה זו נעוץ בעובדה ששיטה זו מצריכה הרבה עבודה והקדשת זמן עבודה יקר, מכיוון
שיש צורך לעצב שלוש פעמים בהתאם לסוג המכשיר, כאשר נקודת הפתיחה היא ממש מאפס.
בשיטה זו Adobe Muse למעשה עבדה בשנים האחרונות עד לעידכון המיוחל שיצא בפברואר 2016. גם בגרסה העדכנית של מיוז ניתן לבחור באיזו שיטה נרצה להקים את האתר: Adaptive או
.Responsive
Ĵ באמצעות בניית אתר רספונסיבי ניתן להקים אתר כאשר התוכן מתאים את - Responsiveעצמו מבחינת העימוד וכמות התוכן בהתאם למכשיר בו המשתמש גולש.
״הקסם״ הזה מתרחש באמצעות טכנולוגיית CSS3 אשר באמצעותה הדפדפן מזהה מהיכן נכנס המשתמש לאתר ומתאימה את הגודל והרזולוציה שלו בצורה הפרופרוציונלית והאופטימלית
ביותר בהתאם למכשיר המשתמש, וכל זאת מתבצע באופן אוטומטי.למעשה הקוד התיכנותי מורה לעיצוב האתר להשתנות בזמן אמת בדיוק רב על-פי סוג המכשיר,
גודל וכיוון המסך (רוחב או אורך) שדרכו מביט הגולש באתר.
© כל הזכויות שמורות לאורן שמעון 194
Muse מהו אתר רספונסיבי
אחד הטרנדים החמים כיום באינטרנט המודרני הוא שילוב אפקטים כאשר המשתמשים גוללים את הדף.
שילוב אפקטים אלו הופכים את הדף לדינאמי ומכניס בו התרחשויות מעניינות.
Ĵ :ניתן לשלב ארבעה סוגי האפקטים
Ĵ Motion Effect - אנימציה בתנועה
Ĵ Opacity Effect - אפקט עם שקיפות
Ĵ Sildeshows - אפקט עם גלריית תמונות
Ĵ Animate אפקט עם שילוב קבצי
Scroll Effects
Motion
Initial Motion:
Final Motion:
Scroll Effects
Opacity
Scroll Effects
Slideshow
AutoplaySwitch slides every:
Scroll Effects
Animation
AutoplayAdvance 1 second every:
Ĵ רק כאשר מגדירים ScrollEffects ראשית, חשוב לציין כי כאשר יוצרים אתר רספונסיבי ניתן לשלב:Fixed Width את נקודת השבירה במצב
מקליקים קליק ימני על נקודת השבירה. 1 ובתפריט שנפתח בוחרים באפשרות:
Breakpoint Properties
בתיבת השיחה שנפתחה בוחרים באפשרות:. 2 Fixed Width
יש לבצע פעולה זו עבור כל נקודת שבירה שבה רוצים להוסיף אפקט בגלילה. 3
960320
150 100 50 0 50 100 150 200 250 300 350 400 450 500 550 600 650
050
100
150
200
250
300
350
400
700 750 800 850 900 960
Add BreakpointBreakpoint Properties…Delete Breakpoint
Fluid Width
Hide Breakpoint
Breakpoint Properties
Max. Page Width: 960
Min Width: 320Min Height:
Breakpoint Colour:
3000
Fluid Width
OKCancel
20
20
0 0 0 0
20 20 20
Purple
Gutter:
Top Bottom Left Right
Columns: 1
Margins:
Padding:
Fluid Width
Fixed Width
© כל הזכויות שמורות לאורן שמעון 220
Muse Scroll Effects עבודה עם
Ĵ ?מדוע חשוב לקודד את האתר
מנועי חיפוש סורקים את הרשת כל העת על מנת להגיע לכל אתר אינטרנט. סריקה זו נעשית על-פי קישורים המתחברים אל דפי אינטרנט השונים פנימיים וחיצוניים.
עבור כל אתר ברשת, מנועי החיפוש מבצעים סריקה והערכה של התוכן בדפי האתר ומתחילים בתהליך הקרוי: אינדקס.
אינדקס הוא חשוב משום שהוא מחקר קבוע שנועד לעדכן את מנועי החיפוש לגבי התוכן הזמין באינטרנט. כאשר אתר אינו זמין עוד, מנוע החיפוש מסיר את האתר מתוצאות
החיפוש. מנועי חיפוש עושים שימוש בתוצאות של אינדקס כדי לקבוע את התוכן ודירוג של אתרים.
אינדקס מאפשר למנועי חיפוש להציע במדויק תוצאות חיפוש המתאימים לבקשה של הגולש. כאמור, ישנם פרמטרים רבים שמנועי חיפוש משתמשים בהם )ואת חלקם פירטנו
קודם לכן, חלקם הם סוג כמוס של גוגל( על מנת להחליט אילו אתרים מופיעים גבוה יותר ברשימה.
דירוג גבוה זאת השאיפה שלנו, על ידי ביצוע ההצעות המפורטות להלן, ניתן לעזור ולהקל על אינדקס של מנועי חיפוש, ובכך ליצור בסיס טוב לקידום האורגני של האתר.
דפי אינטרנט יכולים להכיל Metadata באופן מוטמע, כגון, משפטים, מילות מפתח, תיאור, ושפה. מילות מפתח והתיאור מועילים לזיהוי המטרה של האתר ומתאר את התוכן המוצג.
תגי Meta מוטמעים בתוך קוד המקור של HTML; הם אינם מוצג באופן חזותי כאשר הדף מוצג בחלון דפדפן.
בעבר, מנועי חיפוש ידעו לסרוק מילות מפתח ותיאור בתהליך המדד של האתר. כמעצבי אתרים לעיתים היינו מוסיפים מאות מונחים של מילות מפתח, בתקווה לשפר את
הנראות של אתר בתוצאות החיפוש.
© כל הזכויות שמורות לאורן שמעון 234
Muse עקרונות הקידוד עבור מנועי החיפוש השונים
Ĵ בעמודים הקודמים ראינו כיצד להעלות את הפרוייקט .Adobe לשרת של
Muse מאפשרת להעלות את האתר גם לשרתים חיצוניים. על מנת לבצע פעולה זו, ראשית יש ליצור
תיקיה המכילה באופן מסודר את כל הקבצים ששייכים לאתר.
ניתן ליצור תיקיה מסודרת שכזאת בקלות וביעילות .File בתפריט Export As Html :באמצעות הפקודה
את התיקיה שנוצרה למעשה יש להעלות לשרת החיצוני.
ניתן להעלות את התיקיה באמצעות חברת השרתים, כלומר לשלוח להם את התיקיה שיצרנו והם יבצעו
עבורנו את השירות המתבקש.
אפשרות נוספת היא לבצע את ההעלאה לשרת באמצעות Muse. בתפריט File ניתן למצוא את
Upload To Ftp Host :הפקודה
New Site…Open Site…Open Recent
Close SiteClose PageSave SiteSave Site As…Revert Site
Place…Place Photoshop Button…Add Files For Upload…
Site Properties…Add/Remove Web Fonts…
Preview Page In BrowserPreview Site In Browser
Upload To Ftp Host…Publish To Business Catalyst…Export As Html…
Manage Business Catalyst Site
Sync With Web Version…
File
על מנת להעלות את האתר באמצעות הפקודה Upload To Ftp Host יש
למלא את השדות בחלון הפקודה, ללחוץ על כפתור Next. הקבצים יועלו בשלב זה
לשרת המבוקש והאתר באויר!
© כל הזכויות שמורות לאורן שמעון 248
Muse העלאת הפרוייקט לשרת חיצוני
Recommended