منتديات صحبة نت  

»   منتديات صحبة نت > اقسام التقنية > لغات البرمجة

 
  #1  
10-06-2009, 01:54 PM
JAMOOOOL

تعليم ادوبي دريم ويفر
السلام عليكم ورحمة الله وبركاته
شـــرح واجهــــة دريــم ويفــر
سنبدأ بشرح واجهة برنامج الادوبي دريم ويفر بدون تعقيد وبإذن الله سيكون الشرح مبسط للمبتدئين
فبرنامج الادوبي دريم ويفر أصبح من البرامج المهمة لعمل موقع متكامل فالبرنامج يُمكنك من استخدام الكائنات اللازمة لتصميمك..
واجهة البرنامج :
تعليم ادوبي دريم ويفر
بعدما تعرفنا على شكل واجهة البرنامج نبدأ بشرحها ..
شريط الأدوات:
تعليم ادوبي دريم ويفر
1- لإظهار شاشة العمل بأكواد صفحتك.
2- يعرض لك قسمين الجزء العلوي بالأكواد والأسفل بصفحة عملك.
3- يعرض العمل بالكامل بدون أكواد.
4- لعرض عملك اونلاين.
5- لكتابة اسم صفحة العمل.
6- بالضغط عليه ستظهر قائمة للتحكم بموقعك وأدارته.
7- لعرض عملك على المتصفح.
8- لعمل تحديث.
9- لفحص كود الصفحة.
10- يحتوي على جميع أسماء التوابع المستخدمة بالصفحة.
11- بمجرد الضغط عليها تظهر قائمة لإظهار المسطرة أو إخفاء كائنات وإظهارها.
مجموعة القوائم المرفقة أي Insert:
1- صفحة العمل : خاصة لعمل تصميم عملك .
2- لوحة إدراج الكائنات:
تعليم ادوبي دريم ويفر
عند اختيارك لكلا من القوائم ستظهر لكل منهما شريط بأسفلها
لنفرض اخترنا Text سيظهر لك الشكل كالتالي:
تعليم ادوبي دريم ويفر
وهذا الجدول لفهم دور القوائم:
Common
يتضمن الارتباط والبريد الإلكتروني والمرساة والجداول ورسم اللاير والصور واتش ام ال فيروركس والفلاش وتأثير السهم على الصور بطريقة الرول اوفر وكائنات القوالب والتاريخ والتعليق وجدول بأسماء الوسوم
Layout
يحتوى على جداول و رسم اللاير وأطارات لتحديد الصفحه
Text
لكتابة النصوص وعمل تنسيق لها
Tables
لعمل جدول وبإمكانك اضافة الصور بداخله والكتابة عند تحديدك لحجم الجدول وعمل روابط ستظهر خصائص الجدول بأسفل عملك
Frames
لتقسيم صفحة موقعك لتقسيمات متنوعه
Forms
لإدراج نص وحقل نصي وفريم للإرسال والقوائم ولإضافة الصور داخل الفريم
Templates
قوالب وارتباطات لموقعك وقبل كل شي يجب ان يكون موقعك محفوظ لديك للعمل عليها
Characters
لإدراج رموز ليست موجوده بلوحة المفاتيح
Media
لإضافة الفلاش وازرارفلاشيه متنوعة ونص فلاشي والجافا وإضافة الصوت لها
Head
لعمل تجديد للصفحه اي Refresh ولإضافة تعليقات ووصف عن موقعك
******
لإضافة السكربت
Application
لعمل سيرفر بموقعك

شريط الحالة:
تعليم ادوبي دريم ويفر
1- يظهر لك الأكواد الأتش ام أل HTML بصفحة عملك بإمكانك بزر الماوس الأيمن أن تحذف كود ما أو بإضافة تعديل للكود أما لو ضغطت بزر الفأرة الأيسر سيحدد لك الكود بصفحة عملك ويظلله.
2- التحكم بحجم العمل بتكبيرها أو تصغيرها من خلال الضغط عليها ستظهر قائمة اختر المقاس الذي تريده.
3- يظهر حجم ملف عملك ووقت تحميله.

شرح تفصيلي لنافذة Page Properties :
أذهب لقائمة Modify ثم اختر Page Properties أو بالضغط مباشرة في ملف عملك رايت كليلك بالماوس وستظهر قائمة اختر منها Page Properties ومفتاح الاختصار Ctrl + J
تعليم ادوبي دريم ويفر
1- Title: لكتابة عنوان الصفحة ستظهر بأعلى المتصفح .
2-Background Image : لإرفاق صورة لخلفية موقعك بالضغط على زر Browse اختر ملفك وحدد الصورة.
3-background : لون خلفية الصفحة
4- Text: لاختيار لون النص انظر للشكل التالي
5- Links: لون الارتباط بصفحة أخرى
6-Visited Links : لون الارتباط الذي تم زيارته سابقاً
7- Active Links: لون الارتباط عند الضغط
8-Left Margin + Top Margin + Margin Width + Height =تشير إلى مساحة العمل بالأعلى أو بأي جهة أخرى مع تحديد طول والعرض للعمل
9-******** Encoding : لتحديد تشفير الصفحة
10- reload: لتحديث الصفحة
11-Tracing Image :بإمكانك تجربتها لوضع صورة فلها مميزات رائعة بسهولة تحريكها من كائن لكائن آخر .
12-Image Transparency :لتحديد شفافية الصورة
13- ******** Folder: مكان حفظ عمل ملفك بالفولدر
14- Site Folder: مكان حفظ ملفك بالموقع
انتهى الدرس ولا تنسونا من صالح دعائكم



عنوان ورابط الموضوع للحفظ والمشاركة
تعليم ادوبي دريم ويفر
http://www.sohbanet.com/vbs=def272650df77c07b7972349e2c052ab&/t105074.html


  #2  
10-06-2009, 01:56 PM
JAMOOOOL

إضافة النصوص والصور
رد: تعليم ادوبي دريم ويفر
1- Format: بمجرد الضغط عليها ستظهر نافذة منسدلة لاختيار فقرة ام لعنوان أو نص طبيعي
2- A : بمجرد الضغط على الحرف سيتحول لاختيار مابين CSS ام HTML
وستلاحظ ظهور قائمة منسدلة بجانب الحرف وهو يعتبر منسق لكلاهما بالنسبة للفونت
فأختر ماتريده من الفونت أو بإمكانك اختيار فونت أخر
3- Size: حجم الفونت
4- Text Color: لون النص
5- Bold: لتعريض الخط
6- Italic: لجعل النص مائل
7- لكتابة النص إلى اليسار
8- لكتابة النص إلى الوسط
9- لكتابة النص إلى اليمين
10- لعمل النص بمحاذاة واحدة
11- Link:لعمل ارتباط تشعيبي للنص
12- تسمى بالساعة وعملها يتوقف على وجود موقع متكامل في نافذة Files كل ما عليك هو سحب شكل الساعة لملف الموقع لديك بنافذة البرنامج وهيا ميزة رائعة ببرنامج الدريم ويفر
13- مجرد الضغط على الفولدر ستظهر نافذة لاختيار الملف المراد ربطه مع النص
14- Target: ستظهر نافذة منسدلة لتحديد عند الضغط على النص المرتبط بصفحة أخرى هل تفضل فتح الرابط بصفحه مستقلة ام بنفس الصفحة ام بأعلى الصفحة ام بصفحه جديدة مستقلة
15- List Item: ستظهر نافذة بمجرد الضغط عليها لتغير شكل النقاط أو الأرقام التي بجانب النص
رد: تعليم ادوبي دريم ويفر
1- نوع التعداد
2- لتحديد شكل التعداد
3- لتحديد العدد الذي سيبدأ فيه التعداد الرقمي
4- لتحديد لكائن رقمي أخر شكل جديد و لتحديد بدأ ترقيم التعداد الرقمي
16- بمجرد الضغط ستظهر قائمة لاختيار عرض الخصائص HTML or CSS
17- زر للمساعدة
18- للتحرير المباشر للـغة HTML
19- لتصغير لوحة الخصائص
طريقة إضافة الصور
يتميز دريم ويفر بسهولة إضافة الصور لعملك وبقدرته لتحرير الصور
لإدراج صورة اذهب لفتح لوحة إدراج الكائنات والتي سبق شرحها في واجهة البرنامج
Common>Image
أو بالذهاب لقائمة Insert>Image مفتاح الاختصار Ctrl + Alt + I
رد: تعليم ادوبي دريم ويفر
بعد انتهاءك من إرفاق الصورة قم بالضغط عليها مره واحده ستلاحظ ظهور خصائص الصورة بأسفل البرنامج ( أنظر للشكل التالي )
رد: تعليم ادوبي دريم ويفر
رد: تعليم ادوبي دريم ويفر
1- مربع توضيحي لشكل الصورة التي تم تحديدها وبجانبها كلمة Image وحجم الصورة وبأسفلها مستطيل فارغ لكتابة اسم الصورة
2- Width: مقاس عرض الصورة مع إمكانية بالتعديل عليها , Height: مقاس طول الصورة مع إمكانية التعديل عليها
3- Src: من شكل خصائص الصورة ستلاحظ وجود مسار للصورة وهو يقوم بتحديدها لك لمعرفة مسار الصورة بالبرنامج بإمكانك القيام بتجربة السحب على أيقونة شكل الساعة وأسحبها للصورة سيظهر تحديد مسار الملف بالكامل
4- Link: لوضع ارتباط تشعيبي على الصورة
5- Alt: عند تمرير السهم على الصورة بموقعك سيظهر عليها اسم ما فبإمكانك تحديد ما تريد كتابته
6- Edit: عند تغيرك بخصائص الصورة فبمجرد الضغط على الأيقونة Edit سيتم تعديلها فوراً ..و Rest Size لإرجاع حجم الصورة الأصلية كما كان.
7- Map: خاص برسم خرائط للصور فالأمر أشبه بعمل ارتباطات متعددة لصورة واحده ولكي نقوم بعمل ارتباطات متعددة سنستخدم أداوت للرسم
8- Pointer: سهم لتحريك الأشكال المرسوم على الصورة
9: Hotspot Tool: هذه الثلاث أدوات الخاصة برسم مربع أو مستطيل أو رسم عشوائي للمضلع وبمجرد رسم المربع ستظهر لوحة خصائص جديدة لعمل ارتباط عليها وتحديد مسار فتح الإطار في حاله النقر على الصورة
10- Vspace: لعمل إطار شفاف (مخفي) فقط لكي يبعد عن أي شي يقع من فوقه أو بأسفله
11- Hspace: لعمل إطار شفاف (مخفي) فقط لكي يبعد عن أي شي يقع من جهة اليمنى أو اليسرى
12- Target: عندما تحدد ارتباط ألتشعبي على الصورة بإمكانك تحديد طريقة فتح الصفحة إذا كانت صفحة مستقلة أو بنفس الصفحة وسبق شرحها بواجهة البرنامج
13- Lowsrc: وهيا ميزة رائعة ترفق صورة بمقاس صغير وستظهر لك الصورة بالموقع في حين يتم تحميل المقاس الأصلي
14- Border: نكتب رقم ما لتحديد إطار للصورة
15- لتحديد محاذاة الصورة يمين أو يسار أو بالمنتصف
16- Align: لتحديد محاذاة الصورة بجانب النص بدرجات متفاوتة ومتقاربة ..ستظهر لك قائمة لتحديد محاذاة النص
انتهى الدرس ولا تنسونا من صالح دعائكم
  #3  
10-06-2009, 01:59 PM
JAMOOOOL

طريقة عمل صور متغيره Rollover
وهي عباره عن صورة تتأثر بمجرد مرور السهم عليها لتغير شكلها لصوره اخرى
اذهب الى Common ثم اضغط الزر Rollover Image رد: تعليم ادوبي دريم ويفر
أوأذهب الى قائمة Insert> Interactive Images> Rollover Image
ستظهر نافذة جديدة بها عدة اختيارات كما بالشكل التالي:
رد: تعليم ادوبي دريم ويفر
1- Image name: وهو ما ستكتبه عن اسم الصورة
2- Original Image: وهيا الصورة الاصليه التى ستظهر بالبداية
3- Rollover Image: وهي الصورة التى بمجرد مرور السهم عليها ستظهر مباشرة
4- اما Preload rollover image تلاحظ وضع عليها علامة صح والمقصد منها عند فتح الصفحه سيتم تحميل الصورة الثانيه قبل ظهورها فبمجرد
مرور السهم على الصورة الاولى ستظهر الصورة الثانية مباشرة .
5- Alternate text: لكتابة نص او تعليق حول الصوره بمجرد مرور السهم عليها سيظهر التعليق
6- When clicked ,Go to Url : وهيا لعمل ارتباط تشعيبي بمجرد الضغط على الصوره تلقائيا سينتقل لمسار الصفحة المختارة
طريقة عمل أكثر من صورة
أما لكيفية عمل أكثر من صورة بمجرد مرور السهم او بمجرد النقر او بمجرد خروج السهم من اطار الصورة
أذهب لـ Common وأختر زر Navigation Bar رد: تعليم ادوبي دريم ويفر
Insert> Interactive Images> Navigation Bar
رد: تعليم ادوبي دريم ويفر
1- Nav Bar Elements: بإمكانك وضع أكثر من شريط بإستخدام +للزيادة و - للحذف اما بالأسهم فتمكنك من التنقل بين الأشرطة
2- Element Name: أسم للشريط
3- Up Image: الصورة الأولى التى ستظهر بصفحتك
4- Over Image: الصورة الثانية ستظهر بمجرد مرور السهم على الصورة الأولى
5- Down Image: بمجرد النقر عليها ستظهر الصورة الثالثة
6- Over While Down Image: بمجرد مرور السهم على الصورة الثالثه ستظهر الصورة الرابعة
7- Alternate Text: لكتابة نص او تعليق حول الصوره بمجرد مرور السهم عليها سيظهر التعليق
8- When clicked ,Go to Url : وهيا لعمل ارتباط تشعيبي بمجرد الضغط على الصوره تلقائيا سينتقل لمسار الصفحة المختارة
9- In Main Window: وهو الذي سيتم فتح فيه المتصفح الجديد
10-Options:
-Preload Image * لتحميل الصور كلها عند فتح المتصفح مباشرة حتى يسهل عملية مرور السهم لتسريع اظهار الصور
-Show" Down image "Initially * لوضع الصورة الثالثه تظهر بالمقدمه حين فتح الصفحة
11- Insert:بجانبها قائمة منسدلة لإختيار بين ظهور شريط الصور بالشكل العمودي ام الأفقي
12- Use Table: لإرفاق الصورة داخل جدول وعند اختيارك لهذا الأمر ستلاحظ ظهور خصائص الجدول اسفل البرنامج
ولا تنسونا من صالح دعائكم
  #4  
10-06-2009, 02:00 PM
JAMOOOOL

سنتناول في هذا الدرس شرح ثلاث استخدامات للفلاش
رد: تعليم ادوبي دريم ويفر
النص الفلاش – أزرار بالفلاش – إرفاق الفلاش
طريقة إضافة نص فلاشي
بإمكانك في برنامج دريم ويفر إضافة نصوص فلاشيه بطريقة سهلة وسريعة ..
قبل البدء يجب ان تقوم بحفظ عملك
من إدراج الكائنات Media ثم اختر من شريط الأدوات زر Flash Text رد: تعليم ادوبي دريم ويفر
او بالذهاب لقائمة Insert> Interactive Images> Flash Text
ستظهر نافذة جديدة كما بالشكل التالي:
رد: تعليم ادوبي دريم ويفر
1- Font: نوع الخط الذي ستكتبه
2- Size: حجم الخط
3- أزرار معروف طريقة استخدام
- Bold: لتعريض الخط
- Italic: لجعل النص مائل
- لكتابة النص الى اليسار
- لكتابة النص الى الوسط
- لكتابة النص الى اليمين
4- Color: لتحديد لون النص
5- Rollover color: لتحديد لون النص الذي سيظهر عند مرور السهم علي النص
6- Text: لكتابة نصك
7- Show Font : لإظهار نوعية شكل الفونت داخل خانة النص
8- Link: لعمل أرتباط تشعيبي على النص
9- Target: يمكنك اختيار طريقة ظهور رابط النص بمتصفح مستقل ام بنفس الصفحه ستظهر لك قائمة منسدلة اختر منها ماتريد
10- Bg Color: لون خلفيه النص وليس الموقع
11- Save As: لحفظ الملف الفلاشي لديك بالجهاز ومن ثم تحميله مع ملف موقعك بالانترنت
طريقة إضافة أيقونات أزرار بالفلاش
من إدراج الكائنات Media ثم اختر من شريط الأدوات زر Flash Button
او بالذهاب لقائمة Insert> Interactive Images> Flash Button
رد: تعليم ادوبي دريم ويفر
1- Sample: لمشاهدة شكل الأيقونة بالفلاش وبإمكانك مشاهدة التأثير بمجرد تمرير السهم على الصورة
2- Style: لإختيار الأزرار بالفلاش
3- Button Text: لكتابة النص فوق الزر الفلاشي
4- Font: لإختيار نوعية الفونت (الخط)
4- Size: حجم النص
5- Link: لإضافة رابط تشعيبي على الزر الفلاشي
6- Target: لتحديد مسار فتح الأرتباط التشعيبي بمتصفح جديد او بنفس الصفحة
7- Bg Color: لإختيار خلفية لون الزرار الفلاشي بإمكانك الضغط على هذه الايقونه لجعله بدون لون
8- Save As: تلقائيا سيتم تحديد أسم الملف الفلاشي او بإمكانك كتابة الاسم واختيار مكان حفظ الملف الفلاشي من browse
بإمكانك حفظ عملك وتجربة الزر الفلاشي
بعد انتهاءك من عمل الأزرار ستلاحظ ظهور خصائص الزر الفلاشي بأسفل البرنامج كالشكل التالي:
رد: تعليم ادوبي دريم ويفر
1- Flash Button: لكتابة أسم الزر الفلاشي
2- Width: مقاس عرض الصورة مع إمكانية بالتعديل عليها , Height: مقاس طول الصورة مع إمكانية التعديل عليها
3- File: لإرفاق الملف الفلاشي للزر
4- Edit: عند تغيرك بخصائص الصورة فبمجرد الضغط على الايقونة Edit سيتم تعديلها فوراً ..و Rest Size لإرجاع حجم الزر الاصلي كما كان
5- V space: لعمل اطار شفاف (مخفي) فقط لكي يبعد عن اي شي يقع من فوقه او بأسفله,,.. H space: لعمل اطار شفاف (مخفي) فقط لكي يبعد عن اي شي يقع من جهة اليمنى او
6- Quality: لتحديد دقة الزر الفلاشي وسرعته ستظهر قائمة منسدلة اختر ما تشاء (Low يهتم بعمل السرعه و High يهتم بدقة الزر اما Auto Low يعمل على سرعة ظهور الزر الفلاشي و Auto High يعمل بسرعة ودقة الزر الفلاشي والأفضل اختيار High )
7- Scale: بجانبه قائمة منسدلة لثلاث خيارات ( Default: يجعل النص كما هو دون التعديل عليه او تغير دقته),(No Border:سيتم ظهور النص بعرض الزر الفلاشي مما يؤدي الى قلة دقة النص),(Excat Fit: سيقوم بجعل النص يتمدد على حسب طول الزر الفلاشي مما يفقد جودته )
8- Align: لتحديد محاذاة الصوره بجانب النص بدرجات متفاوتة ومتقاربة ..ستظهر لك قائمة لتحديد محاذاة النص
9- Bg: بإمكانك إختيار لون خلفية الزر الفلاشي
10- Play: لتشغيل الزر الفلاشي بصفحتك في البرنامج ثم إضغط Stop لإيقافه
11- Parameters: لعمل البرامترات للزر الفلاشي
طريقة إضافة ملفات الفلاش
أذهب لقائمة Insert > Media > Flash مفتاح الإختصار Ctrl + Alt + F رد: تعليم ادوبي دريم ويفر
ستظهر لك نافذة أختر منها ملفك الفلاشي بإمتداد SWF وسيتم إدراجه داخل صفحتك
انتهى الدرس ولا تنسونا من صالح دعائكم
  #5  
10-06-2009, 02:01 PM
JAMOOOOL

طريقة عمل الجداول بدريم ويفر
إذهب الى شريط Table او Layout ثم أختر زر Insert Table رد: تعليم ادوبي دريم ويفر
ستظهر لديك نافذة انظر للشكل التالي:
رد: تعليم ادوبي دريم ويفر
1- Rows: لوضع عدد أسطر الجدول
2- Columns: لوضع عدد الأعمدة بالجدول
3- Cell Padding: لتحديد مساحة بين الخلية وأطار الخلية بالبيكسل
4- Cell Spacing: لتحديد المساحة بين الخليتين بالبيكسل
5- Width: لتحديد عرض الجدول (بالبيكسل او بالنسبة المئوية)
6- Border: لتحديد عرض الإطار للخلية فإذا حددنا رقم (صفر) سيصبح إطار الخليه غير ظاهر بصفحتك
عند انتهاءك من أضافة الجدول ستلاحظ ظهور خصائص الجدول بأسفل البرنامج (أنظر للشكل التالي):
رد: تعليم ادوبي دريم ويفر
Table ID -1: لكتابة إسم الجدول
Rows -2: عدد أسطر الخلية,, Cols: عدد أعمدة الخلية كلما إزداد الرقم كلما إزدات الأعمدة
ًWidth -3: لتحديد عرض الجدول بالبيكسل او بالنسبة المئوية , Height: لتحديد طول إرتفاع الجدول بالبيكسل او بالنسبة المئوية %
Cell Pad -4: لتحديد مساحة بين الخلية وأطار الخلية بالبيكسل
Cell Space -5: لتحديد المساحة بين الخليتين بالبيكسل
Align -6: لتحديد محاذاة الجدول يمين او يسار او بالمنتصف
Border -7: لتحديد عرض الإطار للخلية
Clear Column Widths -8: كنا بالسابق حددنا عرض الخليه اما بهذه الخاصية سيتم إعادة وضع الجدول الى السابق بإلغاء عرض الخلية
Convert Table Widths to Pixels -9: لجعل مساحة الجدول بالبيكسل
Convert Table Widths to Percent -10: بمجرد تكرار النقر سيزداد مساحة بالنسبة المئوية فقط بعرض الجدول
Clear Row Height -11: لتحديد طول الجدول كما كانت بالسابق
Convert Table Height To Pixels -12:يقوم بتحديد طول الجدول الى البيكسل
Convert Table Height To Percent -13:يقوم بتحديد طول الجدول الى النسبة المئوية
Bg Color -14: لون خلفية الجدول
Brdr Color -15: لتحديد لون إطار الجدول
Bg Image -16: لإرفاق صورة او شكل ما بخلفية الجدول
ترتيب الخلايا داخل الجدول
للإظهار خصاص الخلية قم بتحديد جميع الخلايا الموجودة داخل الجدول ستلاحظ بأسفل البرنامج الخصائص
رد: تعليم ادوبي دريم ويفر
Row -1: أسطر الخلية
Merges Selected Cells Using Spans -2 * عند تحديد جميع الخلايا سيتم تنشيط الزر وبمجرد الضفط عليه سيقوم بمدج كل الخلايا بخلية واحدة
Splits Cell into rows or columns -3* لتقسيم الخلية التى تم تحديدها وبمجرد الضغط عليها ستظهر نافذة بخصائص لأسطر الخلية والأعمدة
Horz -4: لتحديد وضع النص داخل الخلية (بالمنتصف او يمين او يسار)
Vert -5: لتحديد وضع النص عمودي (أعلى او أسفل او وسط او بمحاذاة السطر)
ًWidth -6: لتحديد عرض الجدول بالبيكسل او بالنسبة المئوية , Height: لتحديد طول إرتفاع الجدول بالبيكسل او بالنسبة المئوية %
No Wrap -7: ميزة رائعه بالجدول فبحالة كتابة النص وأخذ حيذ كبيراً من المساحة يقوم تلقائياً بزيادة حجم الخلية دون تغير او التأثير على النص
Header -8: يجعل النص يعرض bold ويكون بالمنتصف في كل خلية
BG -9: لإرفاق صورة خلفية للخلية
BG -10: لإختيار لون خلفية الخلية مع إمكانية تحديد بكل خلية لون خلفية مختلف بمجرد تحديدها
Brdr -11: لإختيار لون إطار الخلية
طريقة إدراج جداول جاهزة بالبرنامج
إذهب لقائمة Commands>Format Table
ستظهر لك نافذة جديدة إنظر للشكل التالي:
رد: تعليم ادوبي دريم ويفر
1- إختيار نماذج الجدول
2- شكل النماذج تظهر هنا
3- Row Color
First: لتحديد لون خلفية السطر الأول أول سطرين بالترتيب بعد كل سطرين
Second: لتحديد لون خلفية السطر الثالث والرابع
Alternate: بجانبه قائمة منسدلة لتحديد اختيار طريقة ترتيب اللون كل سطر ام سطرين ام ثلاث ام كل اربع اسطر
4- Top Row
Align: لعمل محاذاة النص داخل الخلية
Style Text: نوعية شكل النص
Bg Color: لتحديد لون خلفية السطر
Text Color: لتحديد لون النص
5- Left Col
Align: لتحديد محاذاة النص بالطرف الأيسر
Style Text: نوعية شكل النص
Border: لتحديد عرض إطار الجدول
Apply All Attributes to Td Tags: لإلغاء كود TR وكتابة بدلا عنه TD
انتهى الدرس ولا تنسونا من صالح دعائكم
  #6  
10-06-2009, 02:01 PM
JAMOOOOL

أسئلة متنوعة وشاملة عن برنامج دريم ويفر
1- كيفية إستيراد الملفات ببرنامج الدريم ويفر؟
إذهب لفتح قائمة File> Importبإمكانك إستيراد ملفات مثل Word و Excel و XML
2- كيفية عمل إرتباط تشعيبي؟
من لوحة إدراج الكائنات Common اختر الزر Hyperlink رد: تعليم ادوبي دريم ويفر
رد: تعليم ادوبي دريم ويفر
1-لكتابة نص الأرتباط
2-لإختيار ملف إرتباط التشعيبي للنص
3-لإختيار مسار فتح الإرتباط التشعيبي بصفحة مستقلة او بصفحة جديدة
4-لتحديد ترتيب الإرتباط بالأنتقال من خلال الزر TAP
5-تعليق حول النص الذي له مسار بمجرد مرور السهم عليه سيظهر التعليق
6-أكتب ماتشاء بالأحرف فبمجرد الصغظ على حرفك ALT + وبالنقر على Enter ستفتح صفحة جديدة بمسار الأرتباط التشعيبي
3- كيفية عمل إرتباط بريد إلكتروني؟
من لوحة إدراج الكائنات Common اختر الزر Email Link رد: تعليم ادوبي دريم ويفر
ستظهر نافذة جديدة
رد: تعليم ادوبي دريم ويفر
: Text أكتب أسم النص
E-mail: أرفق بريدك ثم إضغط موافق
4- كيفية إضافة الزمن بالدريم ويفر؟
من لوحة إدراج الكائنات Common اختر الزر Date رد: تعليم ادوبي دريم ويفر
ستظهر نافذة جديدة كما بالشكل التالي:
رد: تعليم ادوبي دريم ويفر
1-Day Format لإختيار عرض اليوم
2-Date Format لتحديد شكل التاريخ
3- Time Format لتحديد عرض التاريخ او لا
4-سيقوم بعمل حفظ للتاريخ بوقت تحميل صفحتك للموقع
5- كيف أضع جدول داخل جدول ؟
لوضع جدول داخل جدول أخر قم بتحديد الجدول المراد إرفاق به جدول أخر ثم نسحب زر Table رد: تعليم ادوبي دريم ويفر داخل الجدول
6- كيف أقوم بحذف الأعمدة والأسطر ؟
لكي تقوم بحذفهم إذهب
Modify > Table > Delete Row مفتاح الإختصار Ctrl + Shift + M
Modify > Table > Delete Column مفتاح الإختصار Ctrl + Shift + -
7- ببعض الأحيان أنسى التأكد من فحص الأرتباطات فماذا أفعل ؟
لعمل عملية فحص الأرتباطات بصفحتك إذهب الى File > Check Page > Check Link
ومفتاح الإختصار Shift + F8
ولكي يتم التعديل على الإرتباطات يجب ان يكون لديك موقع ثم ستظهر لك نافذة كشكل تقرير عن أخطاء الأرتباطات وبإمكانك التعديل عليها بالنقر المزدوج.
8- كيف أعمل أمر Refresh لصفحتي ؟
إذهب لشريط إدراج الكائنات وأختر Head > Refresh رد: تعليم ادوبي دريم ويفر
ستظهر لك نافذة جديدة
رد: تعليم ادوبي دريم ويفر
1-لتحديد وقت تحديث الصفحة
2-لإختيار الفعل عند التحديث لفتح صفحة ما
3-لإختيار الفعل بتحديث نفس الصفحة
انتهت الأسئلة ولا تنسونا من صالح دعائكم
  #7  
10-06-2009, 02:05 PM
JAMOOOOL

أهم الأوامر الموجودة في برنامج دريم ويفر وكيفية عمل الموقع
1.أول شيء يجب عمله هو رسم مخطط للموقع الذي نريد عمله بالنسبة للصفحات والروابط وطرق التنقل

2.أول خطوة لإنشاء موقع نفتح القائمة Site > new site ثم نكتب الاسم المناسب للموقع مع العلم أن هذا الاسم لا يظهر في نافذة المتصفح.

3.لإنشاء صفحة html نعطي الأمر new < ثم نقوم باختيار خصائص تلك الصفحة عن طريق الضغط على الزر اليميني واختيار page properties

فيظهر مربع حوار ندخل فيه اسم لهذه الصفحة ويكون هذا الاسم للدلالة على عمل الصفحة حيث يستفاد منه في محركات البحث يمكننا أن نختار اللون للصفحة أو وضع صورة لأرضية المستند واختيار لون النص ولون الروابط التشعبية ولون الروابط التي قمنا بزيارتها . والمربع Margin لتعيين أبعاد الصفحة والأسهل تعيين الأبعاد من شريط window size وذلك في الصفحة الرئيسية للبرنامج . والأمر tracing image هو لوضع صورة استرشادية فقط لا تظهر في المتصفح.
4.لإدراج صورة في المستند نختار إدراج صورة من لوح الأوامر Common .

5.يتم البدء في عمل الصفحة باستخدام Layout tables & cells وذلك لتخطيط الصفحة ولترتيبها

6.الأمر Rollover وهو لتحميل صورتين في نفس الوقت حيث أننا عندما تضع المؤشر على الصورة فتظهر الصورة الثانية وهذا الأمر موجود في لوح الأوامر common

7.يمكن أيضا إضافة أفلام فلاش وأزرار فلاش كلا الأمرين موجود في لوح الأوامر common

8.كما يمكن أيضا إضافة نص من الفلاش مما يعطينا إمكانية التلوين عند تمرير الماوس فوقه وإمكانية الارتباط إلى صفحة أخرى وذلك عن طريق أمر flash text الموجود في لوح الأوامر common

9.URL: Uniform Recourse locators

الروابط: ولها أنواع
·الروابط الداخلية internal links or local links
وهو الربط بين مستندات وصفحات الموقع الموجودة على نفس جهاز الخادم المحلي
الطريقة: نعين النص أو العنصر الذي نريد إجراء الارتباط له ثم نذهب لمربع الارتباط الموجود في مربع الخواص ونعين الملف المرتبط
·روابط القفز Anchor
وتستخدم للقفز والتنقل بين المواضع المختلفة داخل نفس الصفحة, كما تستخدم للانتقال إلى موضع محدد داخل صفحة أخرى في نفس الموقع
الطريقة: تتم هذه العملية على مرحلتين
-أولا إنشاء موضع الذي نريد القفز إليه في الصفحة حيث نضع المؤشر في المكان الذي نريد القفز إليه ونذهب للأمر named anchor الموجود ضمن لوح الأوامر في التفريعة invisible فيظهر لنا مربع يطلب منا إدخال الاسم الموضع فندخل الاسم مع مراعاة عدم ترك مسافات بين الأحرف ثم نضغط موافق فيتم إنشاء هذا الموضع
-ثانيا نذهب إلى العنصر الذي نريد القفز منه إلى الموقع السابق الذي أنشأناه ونختاره (نص مثلا) ثم نذهب إلى خصائص العنصر الموجود في الأسفل في الخانة Link ونكتب بالطريقة التالية
#name of anchor
ويجب الانتباه إلى دقة كتابة اسم الموضع الذي أنشأناه مسبقا
أما إذا كنا نريد إنشاء ربط بمكان في صفحة أخرى فيجب علينا القيام بما سبق وإضافة اسم الصفحة إلى الموضع الذي أنشأناه ... مثال index.htm#name of anchor
·الروابط الخارجية External Links
وهي للربط بمواقع أخرى
الطريقة:
لإنشاء الروابط الخارجية يكون كما عملنا في الروابط الداخلية ولكن الفرق في أننا نكتب العنوان كاملا في شريط العنوان مثال: http//:www.yahoo.com
·روابط الإيميل e-mail links
نقوم باختيار أو تحديد العنصر الذي نريد بالضغط عليه أن يفتح لنا نافذة البريد الإلكتروني ثم نضغط على المفتاح insert e-mail link من لوحة الأوامر common فنكتب العنوان بشكل كامل فيتم إنشاء رابطة إيميل
·روابط Nul links & ****** links
تستخدم لإعطاء العناصر خواص معينة لتشغيل كود معين باستخدام جافا سكريبت
الطريقة بالنسبة للـ Nul link : وهي بوضع العلامة # في المربع link
10.Navigation bar

وهو عبارة عن شريط يحتوي على عدة مفاتيح للتنقل بين أجزاء وصفحات الموقع المختلفة
وتتكون هذا الشريط من مجموعة من الصور التي يتغير مظهرها حسب استخدام المستخدم
ولإنشائه:
نضغط في الصفحة في المكان الذي نريد إدراج الشريط navigation bar إليه نضغط على الأمر insert navigation bar من لوحة الأوامر common
فيظهر مربع حوار ثم نقوم بإدخال اسم المفتاح أو العنصر الأول في الشريط ويظهر في الخانات الأخرى مسار ملفات الصور التي قد تم إنشاءها مسبقا والتي ستظهر تباعا لما يلي
في الخانة الأولى up image وهي الصورة التي تظهر على المفتاح في وضعه الطبيعي قبل الضغط عليه بالمؤشر
في الخانة الثانية over image وهي الصورة التي ستظهر على المفتاح عند تحريك المؤشر فوقه
وفي الخانة الثالثة down image وهي الصورة التي ستظهر عند الضغط على المفتاح
وفي الخانة الرابعة over while down image وهي الصورة التي ستظهر عند تحريك المؤشر على المفتاح بعد الضغط عليه
وليس من الضروري استخدام جميع الخانات السابقة.
11.image map

وهي طريقة لتعيين جزء محدد من الصورة وذلك لأجل ربطة بصفحة أخرى أو موقع آخر
ويتم ذلك عن طريق الضغط على الصورة فيظهر في الخصائص مربعات تعطيك إمكانية رسم عدة أشكال هندسية أو حرة وذلك لحديد أي موضع من الصورة وتدعى هذه الأدوات hotspot
وبعد تحديد الموضع يظهر لنا خصائص جديدة فيجب علينا كتابة اسم ما في الخانة map ويجب أن يكون له علاقة بهذا الموضع , وأيضا يجب الكتابة في الخانة Alt حيث أن هذه الكتابة ستظهر في المتصفح في حال تمرير المؤشر على الصورة , و أخيرا يجب كتابة اسم الصفحة الذي نريد الانتقال إليها في الخانة link
وفي حال وجود عدة أماكن محددة بالـ hotspot فانه يظهر عندنا بعض الخصائص الأخرى كالمحاذاة وغيرها, وهناك بعض الخصائص نأخذها من القائمة السريعة أي الزر اليميني فيجب التنبه لذلك
12.Jump Menu

وتسمى بقوائم القفز وهي عبارة عن قوائم تحتوي على عدة خيارات تستخدم للتنقل بسهولة بين صفحات الموقع
حيث يتم عمل link مع صفحات أخرى من نفس الموقع أو من خارج الموقع
كما تمكننا تلك القوائم من عمل رسالة إلكترونية
الطريقة: نضع المؤشر في المكان الذي نريد الإنشاء فيه ثم نذهب إلى اللوحة الفرعية forms من لوحة الأوامر ونضغط الأمر jump menu فيظهر لنا مربع حواري فنكتب فيه ألواح تلو الآخر
وعادة يكون الخيار الأول غير فعال وهو عبارة عن توضيح.


تابع
  #8  
10-06-2009, 02:07 PM
JAMOOOOL

.إدراج جدول:
يتم عن طريق الأمر Insert table من لوح الأوامر common
فيظهر لنا عدة خصائص للجدول
Cell padding وهي المسافة التي تحدد بين المكونات التي يتم إدراجها في الخلية والإطار المحيط بالخلية
Cell spacing تستخدم لتحديد المسافات بين خلايا الجدول
الأمر Bg Image وهو لتحديد صورة كخلفية للجدول
وتعطينا الجداول إمكانية لإضافة المكونات كإدخال الصور وإمكانية استيراد المكونات من ملفات أخرى كملفات اكسل
14. نماذج البيانات Forms " جميع الأوامر تؤخذ من اللوحة الفرعية form من لوح الأوامر"
·إنشاء نماذج البيانات: يجب أولا إدراج نموذج البيانات form إلى المستند, فنضع المؤشر في المكان الذي نريد إدراج النموذج فيه ثم نضغط على المفتاح insert form من لوحة العناصر, فيظهر إطار متقطع احمر اللون داخل المستند, وبالنسبة إلى الخصائص نجد أولا form name وهذا يفيدنا في إعطاء اسم للنموذج لاستخدامه داخل كود جافا سكريبت بـ سكريبت عند إضافة أوامر التحكم إليه, ويجب أن يكون هذا الاسم غير مستخدم من قبل.
وتستخدم Action لتحديد عنوان الكود أو التطبيق المستخدم لمعالجة نموذج البيانات,
ولإرسال بيانات النموذج كرسالة بريد إلكتروني نقوم بكتابة الكلمة mailto: متبوعة بعنوان البريد الإلكتروني الذي سيتم إرسال بيانات النموذج إليه, فيتم إضافة العنوان كقيمة للخاصية Action داخل الكود.
<form name="form1" method="post" action="mailto:info@homearab.com">
Method وهي لتحديد الطريقة التي سيتم بها تناول بيانات نموذج البيانات, فالاختيار Post يستخدم لإرسال القيم التي يتم إدخالها في نموذج البيانات عن طريق رسالة, أما Get فيستخدم لإرسال البيانات وقيم نماذج البيانات ملحقة بعنوان الـ URL إلى السير فر, ولا يفضل استخدام الطريقة Get مع نماذج البيانات الطويلة إذ إن العناوين URL محدودة بعدد معين من الحروف فمن الممكن حذف جزء من تلك البيانات, كما يجب أن لا نستخدمها مع البيانات التي تتطلب درجة عالية من السرية كبيانات كروت الائتمان لأن هذه الطريقة غير مؤمنة سرياَ,
كما يجب تحديد نوع البيانات التي سيتم إرسالها إلى السير فر من خلال نموذج البيانات ليتم إرسالها بشكل سليم, ويتم ذلك عن طريق تحديد القيم للخاصية enctype , ونقوم بكتابة هذه الخاصية في الكود في لغة الـ HTML ضمن السطر Form
<form name="form1" method="post" action="mailto:info@homearab.com" enctype="">
وفي نماذج البيانات العادية عندما تكون القيمة الموجودة في الخانة method هي post فان القيمة الافتراضية للحقل enctype هي true أي صحيحة
أما إذا كانت القيمة الموضوعة داخل الخانة action عبارة عن عنوان للبريد الإلكتروني الذي سيتم إرسال قيم نموذج البيانات إليه فانه في الحالة الافتراضية سيتم إرسال هذه القيم ضمن ملف منفصل مرفق مع الرسالة فإذا أردنا إرسال هذه القيم ضمن الرسالة نفسها فنقوم بكتابة text/plain للخاصية enctype
<form name="form1" method="post" action="mailto:info@homearab.com" enctype="text/plain">
15. حقول نماذج البيانات: بعد إضافة العنصر form إلى المستند فانه بإمكاننا البدء في إضافة عناصر نماذج البيانات بداخله إذ لا يمكننا إضافة عناصر نماذج البيانات بدون الـ form ويجب أن تكون الإضافة بداخل العنصر form .
·والآن لإنشاء حقل لكتابة الاسم بداخله نضغط على الأمر insert text field من لوحة الأوامر form ويوجد لهذا الأمر عدة خصائص يجب اختيارها بدقة, ويمكننا أن نستعين بالجداول للترتيب
·List & Menu يضاف هذا الأمر من لوح العناصر Form, وتستخدم لتمكن المستخدم لعمل خيار واحد من بين العديد من الخيارات
وتستخدم List عندما نريد التحكم في عدد الخيارات التي نريد التحكم بعرضها بالقائمة حيث يمكننا تحديد ارتفاع هذه القائمة وعندما يزداد عدد الخيارات التي نقوم بإضافتها فيظهر شريط تمرير على الجانب, وتمكننا القائمة List من عمل عدة اختيارات في وقت واحد.
أما Menu فتستخدم عند عمل خيارات محدودة أي لاختيار عنصر واحد فقط ولإضافة الخيارات للقائمة نضغط على المفتاح List value فنقوم بكتابة النص الذي نريد إظهاره داخل القائمة في حقل الـ item lable وفي الحقل value نقوم بكتابة القيمة التي سترسل إلى السيرفر.
  • Radio Buttons & check boxes وتستخدم لتسهيل عملية الاختيار أثناء ملئ نموذج البيانات والفرق بينهما هو في طريقة العمل فالـ radio buttons تستخدم لاختيار خيار واحد من بين عدة اختيارات أما check boxes فتسمح فاختيار عدة خيارات وذلك باختيار المربع المطلوب
لعمل الـ radio buttons نقوم باختياره من لوح الأوامر forms ويجب إعطائه الخصائص المناسبة فيجب إدخال اسم معين في حقل الاسم ضمن مربع الخصائص, والكتابة في الحقل check value القيمة التي سترسل إلى السيرفر, واختيار الوضعية الافتراضية لمربع الاختيار (ويجب الانتباه إلى انه يجب إعطاء الاسم ذاته إلى جميع مربعات الاختيار حتى يتم إدراجهم في نفس المجموعة التي سيتم الاختيار منها).
  • إنشاء مفاتيح نماذج البيانات وتستخدم للتحكم في العمليات التي تتم على نماذج البيانات ويمكننا استخدام هذه المفاتيح لارسال البيانات التي قام المستخدم بادخالها في النموذج إلى السيرفر, كما تستخدم مفاتيح نماذج البيانات لاعادة حقول النماذج إلى الوضعية الافتراضية أو استخدامها بمهام أخرى يتم تعريفها بكتابة كود معين مثل جافا سكريبت ( ويمكن إنشاء مفتاح معين وذلك عن طريق إدراج صورته من لوح الاوامر forms وبالتالي يجب كتابة الامر بالجافا اسكريبت ).
16. بعد ان قمنا بانشاء نموذج البيانات وادراج الحقول بداخله يتبقى ان نقوم ببعض الخطوات للتاكد من ان البيانات التي يقوم المستخدم بادخالها تتم بشكل سليم, كأن يكون قد ادخل عنوان البريد الالكتروني بالصيغة الصحيحة, ويتم ذلك عن طريق الأمر Validate form من Behaviors inspector التي نصل إليها عن طريق الـ Launcher ثم نضغط على form من الشريط Tag selector لاختيار كل اماكن الادخالات , ومن اللوحة Behaviors نضغط على المفتاح + لاظهار اوامر التحكم ونختار الامر validate form ثم يتم اختيار خصائص كل حقل بيانات بحسب اسمه من القائمة named field .
17. الإطارات: تستخدم الاطارات Frames لتخطيط صفحات الويب وتقسيمها إلى عدة أجزاء, وبهذه الطريقة نستطيع ان نفتح عدة صفحات في نفس النافذة أو بالاحرى في اطار واحد مع ابقاء الاطارات الأخرى على حالها, ويتم تنسيق تلك الاطارات معا بما يسمى frame set حيث يتم عن طريقه تعريف التركيب الداخلي والخواص والمعلومات اللازمة عن هذه الصفحات مثل عدد الاطارات التي ستظهر في هذه الصفحة وابعاد الاطارات وملف المصدر الذي يتم فتحه داخل كل إطار والعديد من البيانات الأخرى, ولا يتم عرض Frame set داخل المتصفح لأنه عبارة عن ملف تعريف لحفظ بيانات عن كيفية عرض الاطارات داخل المستند, أما الاطارات Frames فهي عبارة عن مناطق معرًّفة داخل المستند وكل اطار في الصفحة يستخدم لعرض صفحة html, وللبدء بعمل إنشاء الاطارات نختار من لوحة العناصر التفرع Frame فنجد عدة مجموعات من الاطارات الجاهزة نبدأ بالانشاء عن طريقها حيث يمكننا التعديل عليها ايضا, ولاختيار أحد الاطارات نقوم بالضغط أولا على الزر alt من لوحة المفاتيح ثم الضغط على الاطار الذي نريد اختياره ومن ثم نحدد خصائص هذا الاطار عن طريق مربع الخصائص الذي يظهر بالضغط على ctrl + f3. ويجب الانتباه إلى عملية الحفظ لأن البرنامج يقوم بحفظ كل اطار في ملف مستقل, ونستطيع ان نعرف أي اطار يقوم البرنامج بحفظه الان وذلك بأن البرنامج يحدد الاطار الذي سيحفظه باطار اسود.
18. أوامر التحكم Behaviors وهي عبارة عن خليط من الأحداث events والأفعال actions
والأفعال actions هي عبارة عن كود جافا سكريبت لإنجاز مهام معينة أما الحدث event فهو الشرط الذي يجب أن يحدث لتنفيذ الفعل actions .
وعند إضافة behavior إلى عنصر من مستند فانه يتم تعيين الفعل action والحدث event الذي سيقوم ببدء هذا الفعل, ويمكن البدء بتنفيذ عدة أفعال بواسطة نفس الحدث كما يمكن ترتيب هذه الافعال.
وتستخدم اللوحة behaviors inspector لإضافة أو لتعديل الاوامر الخاصة بأوامر التحكم behaviors ولإظهار هذه اللوحة نضغط على ايقونة behaviors من الشريط launcher, وتحتوي هذه اللوحة على عدة مفاتيح تستخدم لإضافة أو لتعديل أوامر التحكم, وعند الضغط على المفتاح "+" تظهر قائمة بالافعال actions المتاحة, والقائمة الفرعية show events for تستخدم لإختيار أوامر التحكم المتاحة تبعاً للمتصفح.
ومن أوامر التحكم behaviors التي يمكن ان تتحكم في عرض البيانات داخل الاطارات الأمر set txt of frame ويعمل هذا الأمر بتغيير محتويات الاطار بمحتويات أخرى يتم تحديدها ككتابة نص معين ضمن هذا الامر ليظهر عند حدث معين, ويمكن التحكم بالبيانات التي تعرض بداخل الاطار عن طريق الامر go to url حيث يعمل هذا الامر على فتح مستند آخر في نفس النافذة أو داخل إطار معين ويتم استخدامه عندما نريد تغيير محتويات عدة اطارات في نفس الوقت, حيث يعطينا الامكانية لفتح ملف html مختلف في كل اطار من الاطارات.
19. الطبقات Layers : تستخدم لضبط مواقع العناصر داخل المستند ويمكن ان تحتوي الطبقات على نماذج أو صور أو كتابات أو غير ذلك كما يمكن ان تحتوي على طبقات أخرى بداخلها, وبمجرد إدراج العناصر داخل الطبقات سوف نتمكن من التحكم في ظهورها واختفائها وايضا في ترتيب ظهورها بالاضافة إلى امكانية تحريك الطبقات باستخدام نافذة الشريط الزمني Time lines وتستخدم الطبقات في اغلب الاحيان لتصميم وتخطيط المستند وذلك لمرونتها, ويمكن ان نحول الطبقات إلى جداول بعد الانتهاء من التصميم لكي يتم عرضها داخل المتصفحات التي لا تدعم الطبقات, ويتم إنشاء الطبقات عن طريق الامر insert layer من لوح الاوامر common .
  • <LI class=MsoNormal dir=rtl style="TEXT-JUSTIFY: kashida; TEXT-ALIGN: justify; TEXT-KASHIDA: 0%">الطبقات المتداخلة Nested layers وهي عبارة عن طبقة يتم رسمها داخل طبقة أخرى وذلك عن طريق وضع المؤشر داخل الطبقة ومن ثم اختيار الامر layer من القائمة المنسدلة insert ويمكننا الرسم مباشرة داخل الطبقات دون الحاجة لاستخدام القائمة المنسدلة insert ولكن أولا يجب تعديل خاصية في البرنامج وذلك عن طريق فتح القائمة المنسدلة edit ومن ثم اختيار preferences ومن ثم اختيار layers ومن ثم تفعيل المربع nesting.
  • خواص الطبقات: عند اختيار أي طبقة يظهر عندنا خواص جديدة في لوح الخصائص ومن اهم هذه الخواص هي الخانة id وتستخدم لادخال اسم للطبقة وهذا يفيدنا عند الكتابة في لغات البرمجة كجافا سكريبت, والخانة left و top تستخدم لتعيين المسافة بين الطبقة والطرف الأعلى والأيسر للصفحة,
ومن Bg image يمكننا اختيار صورة لخلفية الطبقة, والخانة clip تستخدم لتحديد مساحة معينة للظهور من الطبقة, والخانة Z-index تستخدم لاعطاء الطبقة رقم يرتب ظهورها داخل المتصفح بالنسبة للطبقات الأخرى وهذه القيمة يمكن ان تكون موجبة أو سالبة, وبالنسبة للطبقات المتوضعة فوق بعضها في المستند فان الطبقات التي لها Z-index صغيرة ستظهر خلف الطبقات التي z-index كبيرة.
ويمكننا التحكم بظهور الطبقات واختفائها عن طريق اللوح layers panel "اضغط F2 اذا لم يكن ظاهرا"
حيث توجد عين على يسار كل طبقة وعن طريقها يمكننا التحكم بظهورها أو باختفائها.
والخانة overflow تستخدم لتحديد ما سيحدث للطبقة في حال كبر المحتويات الموجودة بداخلها عن ابعاد الطبقة, أما الخيار Tag فيستخدم لتحديد نوع العنصر لانشاء الطبقة .
الشريط الزمني Timeline يمكن من خلاله عمل تحريك للطبقات بما تحتوي من عناصر, كما يمكن تغيير الملف المصدر لصورة معينة أو تشغيل أمر تحكم behavior بعد فترة زمنية معينة ولا يمكن تحريك صورة أو نص داخل المستند إلا من بعد وضعهم داخل الطبقات, وتعتمد المتصفحات هذه الميزة ابتداء من الإصدار الرابع, ولإظهار لوحة التحكم time line نضغط على الاختصار shift + F9 .
ولعمل حركة لطبقة ما نقوم بوضع الطبقة في المكان الذي نريد البدء منه, ثم نضيف الطبقة إلى احد قنوات الحركة في الشريط الزمني وذلك بالضغط والسحب للطبقة ووضعها في الشريط الزمني, فيتم إضافة شريط يحمل اسم الطبقة التي قمنا باضافتها إلى قناة الحركة, ونلاحظ انه قد تم اضافة key frame في اول القناة وآخرها, ولإنشاء الحركة نضغط على مفتاح الحركة الأخير ثم نقوم بسحب الطبقة ووضعه في المكان الذي نريد, فنلاحظ انه قد تم إضافة خط يعبر عن مسار الحركة, ويمكننا التحكم بالحركة باستخدام اكثر من شريط زمني ويتم إضافة الأشرطة الزمنية بالضغط على الزر اليميني واختيار add time line.
ويوجد أيضا خيارات أخرى كـ قنوات الحركة, وتستخدم لعرض الطبقات والصور التي يطبّق عليها التحريك داخل المستند, ولدينا أيضا شرائط التحريك Animation bar التي تستخدم لتحديد المدة الزمنية أو فترة عرض كل عنصر داخل الشريط الزمني وكل قناة من قنوات الحركة يمكن أن تحتوي على اكثر من عنصر مختلف.
ويمكننا ايضا اضافة الحركة إلى شريط التحريك بالشكل الذي نريد, فمثلا اذا اردنا ان تكون الحركة لطبقة ما بشكل منحني بدل من ان تكون بشكل مستقيم نقوم باضفة الحركة key frame إلى شريط الحركة عن طريق الزر الايمن للماوس , كما يتم ذلك عن طريق الضغط على المفتاح Ctrl وتعيين المكان الذي نريد على شريط الحركة, ولنجعل الحركة بشكل منحني نختار مفتاح الحركة الذي اضفناه ثم نضغط مع السحب للطبقة في الاتجاه الذي نريده فنلاحظ تحول مسار الطبقة من مستقيم إلى منحني.
اما قناة التحكم Behaviors وتستخدم لإظهار أوامر التحكم behaviors التي يجب تشغيلها عند وقت معين, ويمكن تعديلها بالضغط عليها ضغطا مزدوجا.
وتستخدم الخانة FPS “Frame per second” لتحديد معدل العرض أو عدد اللوحات التي يتم عرضها في الثانية, والخانة auto play يستخدم للعرض المباشر عند تحميل الصفحة داخل المتصفح, والخانة loop وهي لاستمرار العرض بدون توقف.
  • حالة ظهور الطبقات:Show - Hide layers
عندما نريد اخفاء جميع الطبقات الفرعية في المستند ما عدا الطبقة الفرعية التي نمر عليها في مؤشر الماوس نقوم بالتالي, نختار الطبقة الرئيسية للطبقة الفرعية التي نريدها ان تظهر في حال مرور الماوس عليها ثم نفتح لوح الأوامر Behavior inspector ونضغط على الإشارة + لإضافة الأمر
show hide layers ومن الجزء named layers نقوم باختيار الطبقة الفرعية التي نرغب في ان تظهر عند مرور الماوس عليها ونعطيها الامر show وبعدها نقوم باخفاء hide باقي الطبقات الفرعية فقط
وبعد الانتهاء من ذلك نقوم بغيير الحدث الذي سينفذ فيه التطبيقات التي قمنا بها سابقا إلى
on mouse over وبذلك نكون قد اخفينا كل الطبقات الفرعية في المستند ما عدا التي تمر عليها الماوس,
ولكن يوجد مشكلتين في ذلك وهي انك عندما تفتح المتصفح فان القوائم الفرعية ستكون ظاهرة إلى حين تحريك الماوس إلى احدى القوائم الرئيسية فيبدأ الأمر hide الذي قمنا به سابقا بالتفعيل, والحل لهذه المشكلة هي فتح اللوحة layers واخفاء جميع الطبقات الفرعية عن طريق العين, أما المشكلة الثانية وهي انك من بعد تحريك مؤشر الماوس من فوق القائمة الرئيسية إلى أي جزء آخر من الصفحة فان آخر قائمة فرعية ستظل ظاهرة, ولحل تلك المشكلة: هي بانشاء طبقة شفافة جديدة أسفل الطبقات الفرعية وتكون ممتدة بشكل عرضي بحيث تمتد اسفل كل الطبقات الفرعية, ثم نقوم بادراج أمر show hide من اللوح behavior ونقوم باخفاء جميع الطبقات الفرعية, ثم نعين الحدث on mouse over.
ومن الجدير بالذكر أننا نستطيع أن نقوم بتحويل الـ layers إلى جداول وبالعكس, لأن ذلك يمكن أن نحتاجه عند العمل مع متصفحات لا تدعم استخدام الطبقات كما في الاصدار الثالث.
وهناك أنواع من المستندات لا تسمح لك بأن تحول الطبقات إلى جداول وهي التي تكون مبنية على نماذج سابقة الاعداد template , كما لا يمكن تحويل المستند الذي يحتوي على طبقات متداخلة nested layer حيث انه لا يمكن ان يوجد في الجدول خليتان متداخلتان, وطريقة التحويل إلى جداول وبالعكس هي بفتح القائمة المنسدلة modify واختيار convert .
  • النماذج Template : يمكن عمل النماذج عن طريق حفظ المستند كصيغة نموذج ويجب وضعه داخل المجلد template وعدم تغيير مكانه, والنماذج تكون غير قابلة للتعديل, إلا عن طريق تحديد المناطق التي نريدها وذلك عن طريق فتح النافذة Assets ومن ثم فتح النموذج عن طريقها بضغط المفتاح edit ومن ثم نضغط على الصورة أو نحدد المكان الذي نريد التعديل فيه, وعن طريق القائمة السريعة نأخذ الأمر
new editable region ونعطيها اسم معين.
  • <LI class=MsoNormal dir=rtl style="TEXT-JUSTIFY: kashida; TEXT-ALIGN: justify; TEXT-KASHIDA: 0%">المكتبة library : حيث أنها تمكننا من حفظ عنصر ما فيها ومن ثم ادراجه في أي مستند آخر, ونستفيد من هذه الخاصية هي اننا عندما نعدل الملف الاساسي في المكتبة فانه سوف يتعدل في جميع المستندات المستخدم فيها, ونصل إلى هذه الخاصية عن طريق النافذة Assets . <LI class=MsoNormal dir=rtl style="TEXT-JUSTIFY: kashida; TEXT-ALIGN: justify; TEXT-KASHIDA: 0%">تنسيق الكتابات باستخدام HTML styles : تعطينا هذه الخاصية امكانية حفظ تنسيقات للكتابات بحيث يمكننا تطبيقها مرة ثانية في نفس المستند أو في مستندات أخرى, وتتم تلك العملية عن طريق فتح النافذة HTML styles من الشريط Launcher ثم الضغط في أي مكان في المستند ثم اختيار الأمر new style من أسفل النافذة Html Styles فيظهر لنا المربع الحواري Define HTML style ونقوم بعمل الخيارات التي نريدها كأن نختار هل نريد التطبيق على النص الذي حددناه أم على الفقرة بالكامل وذلك من Apply to, ويستخدم الجزء when applying لتحديد ما سيتم عمله عن تطبيق التنسيق على الكتابات أو الفقرة المختارة داخل المستند, فعند اختيار add to existing style فانه سوف يتم تطبيق التنسيق الجديد دون حذف التنسيق الموجود على النص مسبقا ولكن ان وجد تشابه بين الخصائص فان الأولوية للتنسيق الجديد, اما clear existing style فانه سوف يتم حذف أي تنسيق قديم ووضع الجديد بدلا منه, وهكذا يتم اختيار التنسيقات الأخرى. واذا صادفنا في احد المستندات تنسيق ما لنص أو لفقرة وأردنا تطبيق هذا التنسيق في اماكن أخرى فما علينا سوى تحديد ذلك النص أو الفقرة ثم اختيار new style فيظهر لنا مربع حواري ويوجد فيه جميع التنسيقات المطبقة على ذلك النص فعندها نغير الاسم فقط ونقوم بحفظه وبعد ذلك نستطيع تطبيق ذلك التنسيق بمجرد الضغط عليه.
  • تنسيق الكتابات باستخدام CSS styles ////Csascading style sheet: وهي عبارة عن مجموعة من الخواص أو التنسيقات التي تستخدم في التحكم بجزء معين من النص داخل المستند الواحد أو في التحكم بخواص الكتابات لعدة مستندات في نفس الوقت وهي عبارة عن ملفات نصية تحتوي على اساليب ومعايير خاصة بتنسيق الكتابات وتتميز CSS style عن HTML Styles بانه يمكن ربطها بعدة مستندات في نفس الوقت كما انه بمجرد تعديل هذا التنسيق فانه سيتم تعديله في جميع الملفات المرتبطة بهذا التنسيق تلقائيا (خاصية CSS styles لا تعمل مع اصدارات المتصفحات التي هي قبل الاصدار الرابع).
وتوجد ثلاثة انواع من CSS Styles الأولexternal /linked/ style sheet وفي هذه الطريقة يتم كتابة التنسيقات والمعايير في ملف نصي منفصل وياخذ هذا الملف الامتداد CSS ولتطبيق مثل هذه الملفات على المستند فاننا نفتح النافذة CSS styles الموجودة في الـ Launcher ثم نضغط على attach style sheet ونختار الملف الذي نريد تطبيقه, واذا اردنا التعديل في خاصياته فاننا نستطيع ذلك عن طريق الملف ذاته وذلك بفتحه ببرنامج الـ note pad أو عن طريق النافذة CSS styles وهي على النحو التالي: نضغط على edit style sheet ومن ثم نختار الملف الذي نريد تعديله ومن ثم نختار التنسيق الذي نريد التعديل فيه.
الثانيEmbedded style sheet وفي هذا النوع يتم كتابة الرموز والمعايير الخاصة بالتنسيق داخل المستند نفسه وهي على النحو التالي: نضغط على new style من النافذة CSS style فيظهر مربع حواري يمكننا فيه من عمل ثلاثة أنواع مختلفة وهي
Custom style (class)- يستخدم لتطبيق تنسيقات مختلفة على بعض الفقرات في المستند دون الفقرات الأخرى, ولانشائه نضغط على المفتاح new style ومن ثم نختار (class) ونختار من define in فيما اذا كنا نريد حفظ هذا التنسيق ضمن هذا المستند فقط أو في حفظه في ملف منفصل لنتمكن من استخدامه عدة مرات, ومن ثم نختار التنسيقات التي نريدها, ونجد بجانب بعض التنسيقات العلامة * وتلك العلامة تعني ان هذا التنسيق ربما لن يظهر في Explorer .
Redefine HTML Tag- يستخدم لإعادة تنسيق أي عنصر من عناصر اللغة HTML المستخدمة لتنسيق المستندات ولا ننسى اختيار الـ Tag الذي نريد أن نعدل عليه, ونختار الخانة this ******** only ليتم حفظ التنسيق الجديد داخل المستند.
- Use CSS Selector يستخدم لتنسيق تركيب معين من تركيبات اللغة HTML .
الثالثinline styleهذه الطريقة لا يتم انشاؤها داخل البرنامج ولكن يجب كتابة الكود الخاص بها داخل الجزء body الخاص بالمستند.
  #9  
10-06-2009, 02:08 PM
JAMOOOOL

  • <LI class=MsoNormal dir=rtl style="TEXT-JUSTIFY: kashida; TEXT-ALIGN: justify; TEXT-KASHIDA: 0%">التحكم في خلفية المستند باستخدام CSS :إن تنسيق العناصر بلغة الـHTML محدود الامكانيات ولذلك نستخدم CSS لتنسيق العناصر لأنها توفر درجة تحكم أعلى ودقة أكبر في تنسيق العناصر, فعلى سيبل المثال اذا أردنا اضافة صورة للخلفية فان الطريقة هي وضع صورة في خصائص الصفحة والنتيجة ستكون صورة مكررة في خلفية الصفحة ولا يوجد أي تنسيقات لها, أما عن طريق CSS فالطريقة هي أن تحدد الـ body ثم تختار new style ومن ثم نختار redefine html tag ونختار this ******** only ثم ok ثم نختار background من القائمة ونختار التنسيقات التي نريدها حيث أننا نستطيع أن نوسّط الصورة وبدون تكرار كما يمكننا تثبيتها في المنتصف وغير ذلك.
  • التحكم بالطبقات والكتابات بـ CSS: تمكننا CSS من التحكم بالكتابات والطبقات بشكل دقيق, مثال: عند اختيارنا لجزء معين من الكتابات داخل فقرة فاننا لا نستطيع تعيين خلفية له عن طريق أوامر لغة الـ HTML , بينما يمكننا عمل ذلك عن طريق الـ CSS ولعمل ذلك نقوم بالضغط على new style من نافذة الـ CSS ثم نختار Make custom style ولاننسى أن نعطيه اسماً, ثم ok فيظهر مربع نختار منه الـ Background ونعطي للخلفية اللون الذي نبغاه, ويمكننا أيضا إعطاء خيارات أخرى غيرها// ويجب ان نتذكر بان الخيارات التي بجانبها علامة * يمكن أن لا تظهر في المتصفح//, ثم ok فيتكون لدينا تنسيق جديد يظهر في نافذة الـ CSS فنقوم بتحديد النص الذي نريده ونضغط على اسم التنسيق الذي قمنا بانشائه من النافذه . وكذلك يمكن ان نقوم بتغيير المسافات بين الحروف و الأسطر والكلمات بنفس الطريقة السابقة ولكن باختيار Block بدلا من Background .
والآن يمكننا أيضا عن طريق الـ CSS عمل إطار تحديد Border للطبقات كما يمكننا تلوين هذا الاطار بألوان مختلفة وتعيين سماكته والطريقة هي نفس الطريقة السابقة ولكن باختيار Border.
كما تمكننا الـ CSS من تغيير شكل المؤشر عند المرور على عنصر معين داخل المستند, والطريقة هي نفس الطرق السابقة ولكن باختيار Extension .
  • <LI class=MsoNormal dir=rtl style="TEXT-JUSTIFY: kashida; TEXT-ALIGN: justify; TEXT-KASHIDA: 0%">استخدام المتصفحات لاختبار الموقع: قبل نشر الموقع يجب التأكد من أنه يعمل بشكل سليم على المتصفحات شائعة الاستخدام كما يجب التأكد من ان الارتباطات تعمل بشكل سليم, وقبل البدء بهذه الاختبارات يجب اولا ان نكون قد قمنا بتعريف الموقع المحلي Local site //كما هو مشروح في المستوى الأول//, ومن القائمة file نطلب الامر check target browsers ونعين من المربع احد هذه المتصفحات التي نريد ان نقوم بالفحص عن طريقها ونضغط ok فيظهر عندنا تقرير يتضمن الأخطاء الموجودة في هذه الصفحة او بعض الميزات التي لا يدعمها هذا المتصفح, فيظهر سبب الخطأ والى جانبه رقم سطره والكود الذي توجد فيه المشكلة, ولاجراء هذا الاختبار على مجلد داخل الموقع أو على الموقع المحلي Local site نقوم بفتح الموقع بالضغط على show site من الشريط launcher فنختار المجلد الرئيسي للموقع لاختبار جميع صفحاته ثم نأخذ الأمر Check target browsers. <LI class=MsoNormal dir=rtl style="TEXT-JUSTIFY: kashida; TEXT-ALIGN: justify; TEXT-KASHIDA: 0%">اختبار الارتباطات داخل الموقع: يستخدم الأمر check links للبحث عن الروابط المنفصلة في الموقع أو في جزء منه,//نصل لهذا الأمر عن طريق القائمة ملف//, كما يستخدم هذا الأمر لإعطاء تقرير عن الملفات غير المرتبطة مع أي مستند html داخل الموقع بالكامل, ويختبر البرنامج الارتباطات الداخلية فقط. <LI class=MsoNormal dir=rtl style="TEXT-JUSTIFY: kashida; TEXT-ALIGN: justify; TEXT-KASHIDA: 0%">تعديل الارتباطات: على الرغم من أن البرامج يقوم بتحديث الروابط للمستندات التي نقوم بتغيير موضعها أو تغيير اسمها إلا أننا نحتاج أحيانا للقيام بتعديل يدوي على الروابط, مثال: نريد تغيير صفحة بأخرى, فنقوم بطلب show site من الشريط Launcher ثم نختار القائمة site ثم change link site wide فيظهر لنا مربع نكتب فيه اسم المستند القديم الذي نريد استبداله, والخانة الثانية نكتب فيها اسم المستند الجديد, وبذلك أيضا يتم تلقائيا تعديل الارتباطات في كل الصفحات تبعاً للتعديل الجديد. وبنفس الطريقة يمكن استبدال البريد الالكتروني بآخر جديد, فنكتب في الخانة الأولى من المربع الحواري عنوان البريد القديم بالشكل التالي //mailto: info@homearab.com// ونكتب العنوان الجديد بنفس الصيغة السابقة في المربع الحواري الآخر. <LI class=MsoNormal dir=rtl style="TEXT-JUSTIFY: kashida; TEXT-ALIGN: justify; TEXT-KASHIDA: 0%">يعطينا هذا البرنامج امكانية فتح احدى صفحتين بحسب المتصفح الذي نستخدمه فاذا لم تكن الصفحة الأولى متوافقه مع المتصفح فانها ستفتح الصفحة الثانية, ويتم ذلك عن طريق الأمر behavior ونختار check browser .
  • استخدام العناصر Meta Elements : تستخدم لغرضين الأول هو تقديم معلومات عن صفحات معينة لكي تتعرف محركات البحث على شبكة الانترنت, والغرض الثاني هو ارسال أوامر للمتصفح لانجاز مهام معينة مثل اعادة تحميل أو عمل تحديث أو استبدال الصفحة الحالية بصفحة اخرى بعد فترة زمنية معينة او منع المتصفح من عمل نسخة من الصفحة الحالية داخل الكاش على جهاز المستخدم, ويوضع العنصر Meta داخل الراس head للمستند, وتوجد طريقتان لعمل العناصر meta إما بفتح القائمة المنسدلة insert ثم اختيار احد العناصر الموجودة head tags او فتح لوح الأوامر واختيار التفرع head ثم نضغط insert meta, فيظهر مربع حواري ومن attribute نحدد منه اذا كان عنصر meta يحتوي على معلومات وصفية عن الصفحة الحالية وفي هذه الحالة نختار name, أو أنه يحتوي على معلومات خاصة بارسال أوامر الى السيرفر من خلال المتصفح وفي هذه الحالة يتم اختيار http equivalent, وفي الخانة value نقوم بتحديد نوع البيانات المستخدمة مع هذا العنصر وهناك بعض القيم المعرفة داخل البرنامج والتي لها شريط property inspector منفصل مثل (key word, refresh, de******ion), وفي الخانة content يتم كتابة المعلومات المرتبطة بالقيمة التي تم تحديدها في الخانة value, وعلى سبيل المثال اذا اردنا اعطاء امر للمتصفح navigator بعدم حفظ الصفحة الحالية بالكاش عندما يقوم الستخدم بعرض الصفحة عن طريق هذا المتصفح فنقوم باختيار http equivalent من الخانة attribute وفي الخانة value نكتب pragma وفي الخانة content نكتب no cash ثم ok فيتم اضافة الكود الخاص لهذا العنصر داخل الجزء head.
أما بالنسبة لـ key word & de******ion تستخدمان لزيادة عدد زوار الموقع الذين يقومون بعمليات البحث عن طريق محركات البحث والعثور على هذا الموقع الذي يحتوي على كلمات معينة سنقوم باضافتها باستخدام العنصر key word, ولاضافة الـ key words نضغط عليه من لوح الأوامر head فيظهر مربع نكتب فيه كلمات تصف الموقع الذي قمنا بإنشائه ومن الافضل ان تكون كلمات محدودة ومختارة بعناية وذلك لأن بعض محركات البحث لها عدد أحرف معين.
ولعمل الـ de******ion نضغط عليه من لوح الأوامر head فيظهر مربع نكتب فيه وصف موجز للصفحة.
والآن لعمل العنصر refresh ووظيفته اعادة تحميل أو تحديث الصفحة الحالية بعد فترة زمنية محددة, وعن طريقه يمكننا عمل slid show or animation أو تغيير المحتويات المعروضة داخل المتصفح , وعلى سبيل المثال سنعمل الآن slide show لعرض ثلاثة ملفات على التوالي وكل ملف من هذه الملفات يحتوي على صورة بداخله واردنا عرض هذه الملفات بتتابع كل ثانيتين, فنضغط على الأمر refresh من لوح الأوامر ومن المربع delay نكتب الفترة الزمنية, ومن الخانة refresh this ******** سيتم اعادة تحميل نفس الصفحة بحسب الوقت الذي حددناه سابقا, وعندما نريد فتح مستند آخر بعد الوقت الذي حددناه فاننا نقوم بتحديد مساره من الخانة go to URL كما فعلنا سابقا عن طريق الأمر refresh من لوح الأوامر head, ونكرر تلك العملية في حال أننا نريد لفتح ملفات أخرى وبذلك نحصل على slid show .
  • في النهاية يجب ان نقوم باعداد الموقع Remote site لتحميله على السيرفر .
تم بعونه تعالى
 
السياحة | الاستضافة | السيارات





Powered by vBulletin
Copyright ©2000 - 2016, Jelsoft Enterprises Ltd

سياسة الخصوصية
hosting