Muse cc 20 16 בהנחיית אורן שמעון

Muse cc 201 c ןועמש ןרוא תייחנהב

  • Upload
    others

  • View
    8

  • Download
    0

Embed Size (px)

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 העלאת הפרוייקט לשרת חיצוני