دة برنامج تصميم المواقع و شرح استخدامة و شكرااااا

Dreamweaver
دروس تعرفك على برنامج :
Dreamweaver
برنامج تصميم المواقع




بسم الله الرحمن الرحيم


إنّ ما يعرفه الجميع عن برنامج الـ Macrodedia Dreamveaverهو أنه برنامج قوي يحتوي على أدوات قوية لتصميم
صفحات المواقع على الويب.. ولكن قد لا يكون الأغلبية قد اطلعوا على المميزات الجديدة لتحرير الصور في برنامج
ال دريم ويفر.. والتي تم اضافتها في النسخ الجديدة التي تم اطلاقها مؤخرا..

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

التعريف بأدوات تحرير الصور في دريم ويفر إم إكس:
من التأثيرات المتوفرة في برنامج دريم ويفر إم إكس لمعالجة الصور شكل (1) :




شكل(1)

* القص / Crop :
حيث يتم تصغير مساحة الصورة الأصلية.. وذلك بقص الأجزاء الغير مهمة منها للتركيز على ما هو مطلوب.

* إضافة العينات (pixels) / Resample:
ويتم ذلك بتكرار إضافة صف من البيكسلات وأخذ أقرب الألوان بعد قيامنا بتغييرات في قياس الصورة ( سواء بتكبيرها أو تصغيرها)..
وهذا يؤثر في درجة وضوح الصورة.. ويتم ذلك فقط في الصور ذات الإمتداد jpeg. و gif. .. واستخدام هذه الأداة يعمل على زيادة
(عند التكبير) أو تقليل (عن التصغير) حجم الصورة الأصلي.

* درجة الوضوح / Brightness/Contrast:
حيث يتم تغيير درجة وضوح البيكسلات في الصورة.. وهذا يؤثر على إضاءة، ظلال ولون الصورة.. وعادة ما تستخدم
هذه الأداة عندما تكون الصورة داكنة أو فاتحة جدا.

* حدة الصورة / Sharpen:
عامل تصفية لزيادة حدة الأطراف ويؤثر بشكل خاص على الخطوط الخارجية للعنصر المصور، ويتركز عمله بالعنصر
أقل مما يمس عامل التصفية العادي.

إن أدوات تحرير الصور في دريم ويفر تنتطبق فقط على الصور ذات الامتداد jpeg.
و gif.

كيفية استخدام كل أداة:




شكل(2)
ملاحظات قبل البدأ :

عند اختيار الصورة في دريم ويفر والتي ترغب في إجراء التغييرات عليها.. سوف تتغير لوحة المفاتيح properties panel
1- والموجودة أسفل نافذة العمل.. إلى لوحة مفاتيح تحوي جميع الأدوات الخاصة بالصور شكل(2).

2- لتغيير مقاس الصورة ( أي تكبيرها أو تصغيرها).. قم بوضع الماوس عند الأماكن المحددة على الصورة وهي بالشكل ▪ ..
3- واضغط بشكل مستمر على زر الفأرة الأيسر وقم بالسحب سواء للتكبير أو التصغير.. سوف تلاحظ عند إجراء هذا التغيير..
4- أن الأرقام الموجودة في خانتي الطول H والعرض W قد تغيرت.. كذلك تستطيع تغيير مقاس الصورة بتغيير الأرقام الموجودة
5- في هاتين الخانتين .. ولكن حجم الملف الأصلي لن يتغير بهذه العملية، ستجد حجم الملف على يسار هاتين الخانتين ..
6- ولكي تعيد الصورة إلى ما كانت عليه.. قم بالضغط على زر الـ refresh الموجود في لوحة الخصائص شكل (3).




شكل(3)

3- عند إجراء التأثيرات الخاصة بمعالجة الصور وهي القص، إضافة العينات، درجة الوضوح وحدة الصورة.. فإن هذا سيؤثر
على الملف الأصلي للصورة.. لذى عليك أن تتأكد قبل إجراء هذه العمليات، أن يكون لديك نسخة احتياطية من الصورة.
وسوف يقوم البرنامج قبل البدأ بإجراء أي تغيير بتنبيهك.. وذلك عن طريق ظهور رسالة تحذيرية شكل (4).. وللتراجع عن
أي تغيير عليك بالضغط على أيقونة التراجع الموجودة في شريط standard.. أو من خلال القائمة edit>undo.


شكل(4)
إذا كنت لا ترغب بظهور الرسالة التحذيرية في كل مرة قم باختيار
ا لمربع الموجود بجانب الجملة ” لا تظهر هذه الرسالة مرة أخرى“

القص / Crop :
ل إجراء عملية القص على الصورة.. قم أولا بتحديدها ومن لوحة الخصائص.. اضغط على أيقونة القص / Crop .. سوف
تظهر لك رسالة تحذير شكل (4).. اضغط موافق ok .. وقم بتحديد الجزء الذي ترغب في اختياره شكل (5).. ومن ثم
اضغط مرتين بزر الفأرة الأيسر داخل المربع أو اضغط على مفتاح الإدخال Enter.. وللتراجع عن الخطوة السابقة اضغط على أيقونة التراجع undo.




شكل(5)

إضافة العينات (pixels) /Resample :
ستلاحظ عند إضافة أي صورة للصفحة أنك غير قادر على استخدام هذه الأداة عليها حيث ستجدها باللون الرمادي أي أنها غير مفعله..
وعند تغييرك لمقاس الصورة بتكبيرها أو تصغيرها.. ستلاحظ تغير لون الأيقونة وهذا يعني قدرتك على استخدامها.. اضغط على أيقونة
Resample .. ولاحظ أن حجم الملف سوف يتغير بعدها، حجم الملف ستجده في أعلى الزاوية اليسرى لِلَوحة الخصائص.

درجة الوضوح / Brightness/Contrast:
قم باختيار الصورة.. ثم اضغط على الأيقونة الخاصة.. ستظهر نافذة للقيم قم بتغيير brightness و contrast .. إما بسحب
المنزلق لكل منهما .. أو بتغيير القيم داخل مربع القيم .. ولاحظ التغيير الذي سيظهر على الصورة شكل (6).




شكل(6)

حدة الصورة / Sharpen:
قم باختيار الصورة.. ثم اضغط على أيقونة Sharpen.. ستظهر نافذة أخرى بالقيمة قم بتغييرها إما بسحب المنزلق.. أو بتغيير
القيمة من مربع القيم .. ولاحظ التغيير على الصورة شكل (7).




شكل(7)
ستلاحظ وجود مربع بجانب كلمة معاينة (preview) في
نافذة Brightness/Contrast و أيضا Sharpen.. اختيارك له يسمح
لك بمشاهدة التغييرات فور تغير القيم مباشرة.. وبإلغائك
ا لاختيار.. لن تتمكن من ملاحظة التغييرات إلا بعد إغلاق النافذة
~:: نهايةالدرس ::~

أ سأل الله لكم التوفيق.. واسمحولنا على أي خطأ..
ولا تنسونا من صالح دعائكم..























بسم الله الرحمن الرحيم
عمل موقع ويب في دريم ويفر
أخذنا شرحا سريعة على واجهة البرنامج، وفصلنا بعض الأشياء الضرورية، قمنا بعمل صفحة وعايناها في المستعرض.
لكن هل قمنا بعمل موقع؟ إلى الآن.. لا
موقع الوب في دريم ويفر عبارة عن مجلد نقوم بتعريفه في دريم ويفر وبذلك نستطيع إدارة موقعنا، والتحكم به يصبح سهلا.. كيف؟
إن موقع الوب في دريم ويفر يحتوي على جميع صفحات الموقع وغيرها من الوسائط والعناصر، كل هذا سيعرض في دريم ويفر مما يسهل عمليات الحذف وتغيير الأسماء والأماكن، هذا يسهل على دريم ويفر تجديد الروابط المكسورة.
أيضا يسهل ذلك معاينة وإدارة الملفات على السيرفر من خلال دريم ويفر.
1. لعمل موقع ويب في دريم ويفر اتبع الآتي:
Site>Manage Sites

2. من النافذة Manage Sites اضغط New، ومن القائمة المنسدلة اختر Site.
ملاحظة: في النسخة الأقدم من MX سيكون ذلك هكذا: Site>New Site

3. لديك في أعلى النافذة Site Definition لديك خياران Basic و Advanced سنختار هنا Basic.

4. في مربع الإسم أكتب اسم موقعك وسيكون عنوان موقعنا هنا My Web.

5. اضغط Next.

6. الآن سيسألك إذا ما كنت تريد استخدام لغة برمجة معينة في حالتنا طبعا لن نستخدم ذلك اختر No.

7. اضغط Next.

8. في هذه النافذة يعطيك خياران:
• الأول: عمل الموقع محليا ثم رفعه إلى سيرفر
• الثاني: عمل الموقع على السيرفر حالا
9. اختر الخيار الأول لأننا سنتعلم كيف نرفع الموقع لاحقا.

10. واختر أين ستضع مجلد الموقع، في حالتنا سنستخدم المجلد الذي قمنا بإنشاءه وهو myweb، وهذا عندي:
D:My Documentsmyweb

11. اضغط Next.

12. كيف تتصل بموقعك يعطيك خيارات:
• None لا شيء.
• FTP عن طريق بروتوكول FTP.
• Local/Network إذا كنت تستخدم مجلد في شبكة أو على سيرفر في جهازك.
• RDS إذا كنت تتصل بموقعك عن طريق RDS.
• SourceSafe Database إذا كنت تتصل بموقعك عن طريق SourceSafe Database.
• WebDAV إذا كنت تتصل بموقعك عن طريق WebDAV.
a. في حالتنا سنستخدم FTP (لمن لديه موقع يدعم الـFTP) وعليه يجب ملء البيانات التي سيطلبها البرنامج كما تعطيك الشركة المستضيفة.
b. وأيضا سنستخدم Local/Network لرفع موقعنا على سيرفر موجود في الجهاز (لمن ليس لديه موقع) لكن أيضا في حالتنا سنخزنه في مجلد آخر بجانب الأول باسم lacal_myweb:
D:My Documentslacal_myweb
13. اضغط Next

14. سيسألك عما إذا كنت تريد عمل دخول وخروج للملف اختر No هذه الوظيفة مهمة لمن يعمل مع مجموعة على الإنترنت للتأكد من عدم دخول أكثر من شخص للملف الواحد.

15. اختر No كما قلنا و اضغط Next

16. سيعرض لك معلومات موقع اضغط Done

17. ثم Done

18. ماذا لو أننا نريد تعديل بعض المعلومات في موقع الوب الذي أنشأناه؟

19. لعمل ذلك إذهب إلى Site>Manage Sites ومنها حدد My Web إذا كان هناك أكثر من موقع.

20. اضغط على زر Edit

21. عدل المعلومات المطلوبة (في حالتنا لن نعدل على الموقع شيء).

22. ثم Done




نم مهارتك في استخدام دريم ويفر
لنجر بعض التمارين السريعة لننم مهارتنا في استخدام هذا البرنامج ولنشعر بالحرية عند تحرير صفحات مواقعنا فيه.
لنقم بعمل صفحة في موقع الوب الذي أنشأناه، نغير خصائصها، ونضع فيها بعض العناصر من كتابة وصور، لحظة! لا تنشئ الصفحة كما تعلمت سابقا.. سنتعلم طريقة جديدة، لنتابع الخطوات التالية:
1. من نافذة الملفات Files تأكد أنك في الموقع المطلوب (My Web).
2. وهناك اضغط بيمين الفأرة في أي مساحة فاضية ومن القائمة المنسدلة اختر New File
3. سمها page.htm
4. افتحها عن طريق النقر المزدوج عليها، أو بز الفأرة اليمين ومنها Open
5. أسفل البرنامج هل ترى لوحة الخصائص؟ هناك نعم.. اضغط على Page Properties
6. غير المعلومات حسب الصورة التالية:

7. ثم OK
8. أكتب أي نص بعنوان كما قمنا به سابقا:

9. حدد العنوان وغيره إلى H2 كما تعلمت سابقا.
10. حدد النص وغير اللون إلى #006666، والحجم إلى 14 px، والنوع إلى Times New Roman
11. أسفل النص ضع الصورة التي قمت بوضعها في صفحة index.htm ولكن هذه المرة قم بنسخها إلى مجلد images داخل مجلد myweb.
هذا المجلد لحفظ الصور بداخله.
12. احفظ الصفحة واستعرضها.. ثم أغلقها.

بسم الله الرحمن الرحيم
التعامل مع الجداول:
إن الجداول هي من أهم الأدوات التي يستخدمها مصممو المواقع، فلا تجد موقعا رتبت في الصور، والنصوص والخلفيات وغيرها من الوساءط دون استخدام الجداول.
إن الجدول عبارة عن مجموعة من الصفوف الأفقية والأعمدة، التي تستطيع دمجها وفصلها وترتيبها في برنامج دريم ويفر.
إن برنامج دريم ويفر يتيح لك التعامل مع الجداول بسهولة حتى الخبراء في تصميم الموقع يتيع لهم دريم ويفر أداوة قوية لتقطيع الجدوال.
1. عمل جدول جديد
من قائمة الإدراج إضغط على زر الجدول و حدد القيم كما في الصورة التالية:

2. لتعديل هذا الجدول سواء بدمج إحدى خلايا هذا الجدول مع الأخرى أو في إنشاء خلايا جديدة
حدد أول ثلاث خلايا في الجدول وبزر الفأرة الأيمن اختر من القائمة المنسدلة:
Table>Merge cell
لتقسيم خلية نختار أول خلية من اليمين من الصف الثاني
Table>Split cell
اترك القيم كما هي و اضغط ok
3. على أحد خطوط الجدول سيتغير شكل مؤشر الفأرة، الآن إضغط ضغطة واحدة بزر الفأرة الأيسر
سيتحدد الجدول بخط أسود.
من لوحة الخصائص properties غير القيم حسب الصورة التالية:

4. للكتابة داخل الجدول نضغط بمؤشر الفأرة في أي خلية نريد الكتابة فيها ونكتب بشكل عادي كما تعلمنا سابقا و كذلك الحال عند إدراج الصور.
مثلا ضع صورة في الخلية الأولى من السطر الثاني و نكتب في الخلية الثانية من السطر الثاني كلمة محمد، ومن لوحة الخصائص اختر وضعية النص العمودية سواء في الأعلى أو الأسفل أو الوسط.





القوالب Templates:
1. لعمل قالب template جديد إتبع الآتي:
File>New
و من النافذة اختر Template ومنه HTML

2. لعمل Editable Region
Insert>Template objects>Editable region
احفظ القالب بأي أسم (مثلا 1)
3. لإدراج قالب إلى صفحة قم بالتالي
Modify>Template>Apply template to page
4. ومن الـ Editable regionأكتب أي نص بداخله وأدرج أي صورة
5. لتعديل القالب افتحه
File>Open
ومن النافذة اختر القالب الذي قمت بحفظه.
غير فيه ما شئت (مثلا ضع في الأسفل الحقوق والسنة) ومن ثم قم بحفظه.

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

أكتب فيه عنوان الصفحة المراد الإنتقال إليها.
3. أو بالضغط على صورة المجلد لفتح نافذة، ومنها اختر الصفحة المراد الإنتقال إليها.
4. هنا أداة جميلة تسما point-to-file وهي عبارة عن مؤشر.
طريقة عمل هذا المؤشر هي بعد تحديدك للنص المراد عمل رابط له اضغط على هذا المؤشر، وقم بسحبه مع استمرار الضغط إلى أي صفحة في لوحة الملفات على اليمين:

5. ذاك بالنسبة للكلمة الأولى أما بالنسبة للثانية فبعد تحديدك لها اضغط بيمين الفأرة على الكلمة ومن القائمة المنسدلة اختر Make link، ستظهر لك نافذة منها اختر الصفحة المراد الإنتقال إليها.
6. الآن حدد الكلمة الثالثة واضغط على زر الربط من شريط الإدراج واكتب الرابط في مربع النص Link، أو إضغط على المجلد الأصفر.
7. ينطبق ما ذكر في النقطة السابقة على الربط للبريد الإلكتروني .
8. ويمكنك عمل النقطتين السابقتين دون تحديد نص وذلك بتحديد النص في مربع النص Text.
9. أخيرا لعمل روابط للصور استخدم الطرق في النقط 2،3،4.



رفع الموقع:
سبق أن وضحنا كيفية الإتصال بالموقع لرفع ملفاتنا، طبعا بعد التأكد من جاهزية موقعك لنشره على الإنترنت، قم بتوضيح طريقة اتصالك بالملقم Server بالطرق التي وضحناها سابقا، والطريقة الأشهر هي عن طريق بروتوكول FTP، لاحظ الصورة التالية:

طبعا هذه المعلومات يعطيك إياها مزود خدمة الإستضافة والذي قمت بحجز مساحة لديه.
1. في البداية نحتاج لعمل اتصال من لوحة الملفات اضغط على هذا الزر لعمل اتصال ، بعد نجاح الإتصال سيغدو بهذا الشكل .
2. لرفع الملفات اختر الملفات المراد رفعها أو المجلد بأكمله، اضغط على الزر ذو السهم الأزرقPut والذي يعني Upload، وذلكبعد التأكد من أنك في الـLocal view.
3. لتنزيل الملفات، اختر الملفات المراد تنزيلها أو المجلد بأكمله، اضغط على الزر ذو السهم الأخضر Get الذي يعني Download، وذلكبعد التأكد من أنك في الـRemote view.
4. لقطع الإتصال إضغط على زر الإتصال ، سيتغير شكله إلى الوضع العادي .
هذا بالنسبة لطريقة FTP أما الطريقة الأخرى فهي:
Local/Network إذا كنت تستخدم مجلد في شبكة أو على سيرفر في جهازك.
ببساطة نحدد مجلد السيرفر على الجهاز أو الشبكة (قمنا بهذه الخطوة في الدرس الثالث الخيار b) ثم Put.
طرق أخرى لرفعالمواقع:
RDS إذا كنت تتصل بموقعك عن طريق RDS.
إختصار لـ Remote Development Services، تحتاج هذه الطريقة إلى Server ColdFusion أو على جهاز يعمل به الـ ColdFusion، ويتم الوصول إليه عن طريق HTTP.
SourceSafe Database إذا كنت تتصل بموقعك عن طريق SourceSafe Database.
يجب أن تثبت النسخة السادسة أو أعلى من Microsoft Visual SourceSafe وهو لتخزين شيفرة المصدر والملفات النصية ومحتويات المواقع.
WebDAV إذا كنت تتصل بموقعك عن طريق WebDAV.
إختصار لبرتوكول Web-based Distributed Authoring and Versioning، وهو شكل لامتداد HTTP، يسمح هذا البروتوكل بتحرير وتنظيم الملفات على جهاز سيرفر، وتحتاج إلى سيرفر يدعم هذا البرونوكول كسيرفر IIS أو أباتشي.