פוטושופ – הקטנת תמונות מרובות
וידיאו פוסט על הקטנת תמונות מרובות בפוטושופ. אם מעניין אתכם התוצאה הסופית של הסרטון עליו עבדנו, פשוט ליחצו כאן.
וידיאו פוסט על הקטנת תמונות מרובות בפוטושופ. אם מעניין אתכם התוצאה הסופית של הסרטון עליו עבדנו, פשוט ליחצו כאן.
הגענו לחלק הכי פשוט. על מנת להעלות את האתר לרשת, אנחנו זקוקים לשרת (אותו נרכוש מאחת מחוות השרתים בארץ או בחול).
אחרי שהשגנו שרת אנו זקוקים לתוכנת FTP.
אני ממליץ בחום על FileZilla מבית היוצר של FireFox. תוכנת אופן סורס (Open source) מעולה שרק משביחה עם השנים (האמת אני מקבל כל חודש עדכון אוטומטי).
גם ב Dreamweaver יש תוכנת FTP מובנית, השימוש די זהה לתוכנות אחרות מלבד העובדה שניתן לסנכרן קבצים ולבדוק מה יותר חדש באופן אוטומטי (לשם כך הגדרנו תיקיית web עבור קבצי האינטרנט שלנו בנפרד מקבצי העיצוב בתיקיית הלקוח).
כל תוכנת FTP מעט שונה אך זהה ברעיון, יש לנו חלון של המחשב שלנו (local) וחלון של השרת המרוחק עליו האתר שלנו יושב (remote), עם FileZilla אפשר פשוט לגרור קבצים לשרת המרוחק.
תצטרכו להזין פרטי חיבור כמו כתובת השרת (אותה תקבלו מחוות השרתים אליה נרשמתם) , שם משתמש וסיסמה (שבאופן קסום ומוזר, גם אותם תקבלו מחוות השרתים).
זהו, סיימנו!
אחד הפוסטים היותר ארוכים שיצא לי לכתוב אז אני מאוד מקווה שתעריכו (במילים אחרות תשאירו תגובות ושאלות ושאר הערות).
תודה ולהתראות!
החלק הזה מאוד פשוט וקל להבנה. בניגוד למה שרבים (בארץ) דורשים, מבקשים וחושבים, טבלאות לא יצאו מהאופנה.
טבלאות נועדו לתצוגה טבלאית ודיבים נועדו לשימוש כללי.
ניתן להכניס טבלה בתוך דיב ודיב בתוך טבלה, אין בזה שום דבר פסול.
אך לעומת זאת, אין שום סיבה לבסס מבנה שלם של אתר על טבלה, זה נועד לאסון אם לא יודעים להגדיר אותה עד לפרט האחרון.
דיב מגיע אלינו ללא הגדרות מיוחדות מצד הדפדפנים השונים, כך שאין צורך לאפס הגדרות לפני שמתחילים לעבוד עם דיבים. טבלאות מגיעות עם המון הגדרות שונות ומשונות בכל דפדפן ויש צורך להגדיר מראש כל פרט קטן בטבלה ומרכיביה.
לכן, בפעם הבאה שאתם נדרשים לבנות אתר "ללא טבלאות", אל תפחדו להכניס טבלה קטנה כשאתם צריכים להציג – טבלה.
הכינותי מראש קובץ PSD (ליחצו כאן להורדת הקובץ) עם עיצוב פשוט (להחריד) על מנת להסביר על חיתוך אתר. אני לא נוהג להשתמש בכלים אוטומטיים וסביר להניח שאם עברתם קורס כלשהו, ניסו ללמד אתכם להשתמש בכלי הסלייסים – Slice Tool שלדעתי הוא פשוט גרוע ולא מקצועי.
שמתי את חלונית הINFO ליד הסימון שעשיתי על מנת שתראו את הרוחב והגובה אותו אני מעוניין לחתוך (המידות הן בפיקסלים).
במסמך יופיע משהו כזה:
יופיע לפנינו המסך המפוצל בו נבחר את פורמט התמונה בה אנו רוצים להשתמש, באינטרנט נעדיף תמונות בעלות נפח קטן על מנת לאפשר העלאת עמוד מהירה גם בחיבורי אינטרנט נמוכים. כמובן שנרצה לשמור על איכות הגרפיקה כמה שיותר. בחלון זה ניתן לערוך השוואות איכות ויזואליות על ידי בחירה של פורמטים שונים בכל חלונית תצוגה.
עכשיו שהכנו את התמונות שלנו, נעבור לDreamweaver.
שם ניצור קובץ CSS חדש שיגדיר לנו את העיצוב עבור מסמך הHTML שלנו.
ייפתח מולנו חלון חדש. זה חלון אוטומט להזנת עיצוב עבור קלאסים (CLASS) או תגיות סטנדרטיות, אני לא נוהג להשתמש בו, אבל הוא יוצר לנו את קובץ הCSS והקישור אליו מהדף שלנו באופן אוטומטי, לכן נשתמש בו באופן חד פעמי עד שתלמדו כבר לבד איך ליצור קובץ CSS מקושר.
זהו, יצרנו קובץ CSS ואפילו פתחתו הגדרת עיצוב עבור תגית הBODY.
אתם יכולים לראות כעת את הקוד המעודכן בקובץ הHTML שלכם עם הפניה לקובץ CSS בתגית LINK בתוך תגית HEAD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="/css/style.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
בנוסף נפתח לכם קובץ חדש style.css שם נגדיר את כל העיצובים שלנו.
@charset "utf-8"; body { background:url(../images/bodyBg.png) top left repeat-x; }
קצת הסברים:
עכשיו נוסיף את הלוגו שלנו.
<body> <div> <img src="/images/logo.png" width="166" height="99" /> </div> </body>
תגית ה DIV תשמש אותנו לארגון העמוד.
תגית IMG מכילה את המיקום היחסי של התמונה שלנו, רוחב וגובה (בפיקסלים).
נוסיף לתגית DIV קלאס (CLASS) שאליו נשייך עיצוב.
<div> <img src="/images/logo.png" width="166" height="99" /> </div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="/css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <divclass="logoDiv"> <img src="/images/logo.png" width="166" height="99" /> </div> <divclass="textDiv"> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div> </body> </html>
@charset "utf-8"; body { background:url(../images/bodyBg.png) top left repeat-x; margin:0; padding:0; } div.logoDiv { float:left; width:166px; height:99px; margin:18px 0 0 10px; } div.textDiv { float:left; width:568px; border:4px solid #88785e; background:#f7f7f7; font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#878787; margin:30px 0 0 25px; padding:10px; }
הסברים:
נשמור את הקובץ ונציג את הדף בדפדפן שלנו (קיצור דרך – F12).
ועכשיו נעבור ליצירת תפריט.
נתחיל בלגזור את תמונות הרקע של הפריטים בתפריט במצב רגיל ומצב של מעבר עכבר.
*אל תבטלו את הסימון שעשיתם לרקע הפריט, עכשיו נשתמש בו לחתוך מצב של מעבר עכבר.
בחזרה ל Dreamweaver, נוסיף לעמוד שלנו רשימה (List) ובה יהיו הפריטים שלנו.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="/css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <img src="/images/logo.png" width="166" height="99" /> </div> <div> This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div> <ul> <li><a href="/demoPage.html">Menu Item 1</a></li> <li><a href="/demoPage.html">Menu Item 1</a></li> <li><a href="/demoPage.html">Menu Item 1</a></li> <li><a href="/demoPage.html">Menu Item 1</a></li> <li><a href="/demoPage.html">Menu Item 1</a></li> </ul> </body> </html>
<ul> היא תגית הפותחת רשימה ו <li> היא תגית הפותחת פריט ברשימה.
כל טקסט בתוך תגית <li> הוא לינק <a>.
ul.sideMenu { float:left; clear:left; width:166px; margin:10px 0 0 10px; padding:0; } ul.sideMenu li { list-style:none; margin:0 0 15px 0; } ul.sideMenu li a:link, ul.sideMenu li a:visited { display:block; color:#716767; font-size:14px; font-weight:bold; background:url(../images/menuItemBg.gif) left bottom no-repeat; text-decoration:none; width:111px; height:18px; text-indent:13px; } ul.sideMenu li a:hover { color:#716767; background:url(../images/menuItemBgHover.gif) top center no-repeat; text-decoration:none; }
הסברים:
2. כתיבה נכונה של HTML ומרכיבי הדף
נתחיל מההתחלה, מה זה HTML?
HTML (ראשי תיבות של HyperText Markup Language) היא שפת תגיות (markup language) ליצירה ועיצוב עמודי אינטרנט (להרחבה אפשר בWIKI).
בואו ניצור עמוד HTML ראשון.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> </body> </html>
להלן הסברים על כל חלק:
את דף הHTML נפתח בתגית DTD שתסביר לדפדפן איך לקרוא את העמוד שכתבתם:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
לאחר מכן תגית הHTML המציינת פתיחת מסמך HTML (ליד המילה "html" יש תוספת שמגדירה כי המסמך הזה הוא למעשה XHMTL – מסמך דומה לHTML משולב אלמנטים נוספים):
<html xmlns="http://www.w3.org/1999/xhtml">
תגית הHEAD תכיל את כל האלמנטים הקשורים בקבצים נוספים (כגון מסמך עיצוב – CSS, אפליקציות ג'אווה סקריפט – Java Script וכדומה).
תגית META המופיעה מתחת לHEAD היא תגית המגדירה את הקידוד בו נשתמש בעמוד, אני נוהג להשתמש בקידוד UTF-8 לכל השפות, כך האתר שלנו ייראה בכל מערכת הפעלה ודפדפן בקידוד הנכון. ישנן תגיות META נוספות המשמשות לתיאור העמוד ומילות מפתח לשימושי מנועי חיפוש ואינדוקס האתר.
לאחר מכן תגית הTITLE תגדיר לנו את כותרת העמוד (זאת שמופיעה בראש הדפדפן):
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head>
ולבסוף תגית BODY שלתוכה נזין את כל תוכן העמוד שלנו:
<body> </body>
*שימו לב שלכל תגית יש תגית סוגרת עם אלכסון לפניה. יש תגיות ללא תגית סגירה אך הן מסתיימות באלכסון לפני סוף התגית, לדוגמה תגית תמונה:
<img alt="" src="/imageName.jpeg" />
או למשל תגית META מתוך הHEAD:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />