المساعد الشخصي الرقمي

مشاهدة النسخة كاملة : أكاديمية المربد: الدرس الثالث



روان أم المثنى
13/05/2009, 12:42 PM
http://sor.w2hm.com/files/image/e/9.gif






الأخوات الكريمات الاخوة الأفاضل في مربدنا العزيز

أعتذر عن تأخري في إدراج درس الأسبوع الماضي

وأسأل الله أن يكون درسنا اليوم واضحا وممتعا للجميع


http://islamic333.jeeran.com/Line_drss3.GIF

أيها الأحبة.. حيث أن تصميم المواقع هو أساس دورتنا هذه،

وحيث أن برنامج الفوتوشوب هو برنامج مساعد..

لذا لم نتوسع كثيرا في مجال الفوتوشوب العريض،

ومن أراد التوسع في ذلك البرنامج الجميل يمكنه متابعة

سلسلة تعليم الفوتوشوب مع الأخت رزان إن شاء الله

والتي سنعمل عليها بقدر المستطاع إذا قدر الله لنا ذلك..

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

وأشهرها فرونت بيج FrontPage أو البرنامج البديل له (صورة طبق الأصل) Web Designer

بالإضافة للغات التصميم..

لهذا.. أتمنى أن تطيب لكم المتابعة.,.,.,.,.,.



http://islamic333.jeeran.com/Address1.GIF

لن يكون لدينا وظيفة في آخر موضوعنا اليوم،

إنما الأهمية في هذا الدرس هو الإلمام بالتفاصيل..

فقد تمكنتم بحمد الله من تصميم واجهة مواقعكم،

لذا سنتعرف في البداية على صفحة الويب ومكوناتها..



http://islamic333.jeeran.com/Line_drss3.GIF

روان أم المثنى
13/05/2009, 12:44 PM
http://islamic333.jeeran.com/Address2.GIF



عندما تفتح أي صفحة ويب في متصفحك فإنك تشاهد مثل هذه الأجزاء

http://islamic333.jeeran.com/Drs3_1.gif



وتكتب لغة تصميم الصفحة بهذا الشكل






http://islamic333.jeeran.com/Drss3_2.jpg


لا تقلق، لن تكتب مثل هذه الشيفرة الآن....


ستحصل على صفحة ويب دون الحاجة لهذه الوسوم

حين تستخدم أحد برامج التصميم كـ FrontPage مثلا.

لكن الخوض في هذه المفاهيم الأساسية سيكون مفيداً لك، ويجنبك الكثير

من المشاكل التي قد تتعرض لها فيما بعد..

أريد أن أنوه هنا على أن الكثير من مصممي الويب لا يستخدمون برامج التصميم

الجاهزة ويحبون كتابة الشيفرات بأنفسهم لتكون صفحاتهم أكثر دقة وأكثر طاعة

للاستجابة لأوامرهم البرمجية المتقدمة، بل الكثير منهم لا يستخدم محررات شيفرة معقدة..

إنما قد يكتفون باستخدام برنامج المفكرة Notepad المرفق مع Windows لتصميم صفحاتهم..

ولو أنك حاولتَ أن تجرب كتابة مثل هذه الشيفرة وتحفظها باسم Page1.htm مثلا

ثم تفتحها لوجدت صفحة ويب جاهزة لإضافة موضوعاتك بكل بساطة:

http://islamic333.jeeran.com/Drss3_3.jpg

http://islamic333.jeeran.com/Line_drss3.GIF




http://islamic333.jeeran.com/Address3.GIF



برنامج FrontPage هو أحد برامج حزمة Office

التي نملكها جميعا ولا نستغني عنها، لكن هذه

الحزمة قد تكون ناقصة عند البعض خصوصا مع اختلاف

إصدارات أوفيس، لذا قد يلزمك تحميل الأوفيس كاملاً


سواء الإصدار 2003 أو 2007 ..


وقد وضع الأخ الكريم كنفاني – جزاه الله خيرا-في موضوعه (http://www.merbad.net/vb/showthread.php?t=13542)



رابطا لتحميل أوفيس 2007


http://islamic333.jeeran.com/Address4.GIF



إذا كنت لا تملك نسخة برنامج FrontPage في حزمة

الأوفيس لديك ولا تريد تغيير إصدار الأوفيس يمكنك

تحميل برنامج التصميم البديل web designer

والذي هو صورة طبق الأصل من برنامج FrontPage


.:.:.:.:.:.:.:.

1- في حال كان الـ windows لديك XP عليك تحميل Framework أولا من هنا (http://download.microsoft.com/download/5/6/7/567758a3-759e-473e-bf8f-52154438565a/dotnetfx.exe)

ثم قم بتحميل برنامج الـ web designer من هنا (http://download.microsoft.com/download/9/2/e/92ed6d4e-8315-4db5-a954-a953e3be3f80/WebDesigner.exe)

السريال


DDWJC-VFGHJ-7GFK6-9QK3D-PFTHW


.:.:.:.:.:.:.:.



2- إذا كنت تستخدم الـ Windows Vista لن تحتاج

إلى الـ Framework قم بتحميل البرنامج web designer فقط,,

وهذه واجهة البرنامج



http://islamic333.jeeran.com/Drss3_4.jpg


وهذا البرنامج هو الذي سأعمل عليه

ولن يختلف عن FrontPage إن شاء الله تعالى


http://islamic333.jeeran.com/Line_drss3.GIF

روان أم المثنى
13/05/2009, 12:45 PM
http://islamic333.jeeran.com/Address5.GIF



1/ افتح قائمة (ملف) ثم قم باختيار (جديد) – (صفحة).



http://islamic333.jeeran.com/Drss3_5.jpg


2/ في قسم الجزء العام general قم باختيار لغة التصميم HTML ثم OK



http://islamic333.jeeran.com/Drss3_6.jpg



http://islamic333.jeeran.com/Line_drss3.GIF



http://islamic333.jeeran.com/Address6.GIF


لغة HTML هي اختصار لجملة (Hyper Text Markup Language )

وهي لغة لتصميم صفحات الويب والمدونات على

الإنترنت ولها شيفرة خاصة تكتب على شكل وسوم تشبه هذه:




http://islamic333.jeeran.com/Drss3_7.jpg


وسوف تشاهد مثل هذه اللغة في جميع الصفحات على

الإنترنت لو أنك فتحت ملف المتصفح لأي موقع

واخترت عرض المصدر:



http://islamic333.jeeran.com/Drss3_8.jpg


هذه اللغة هي لغة .. HTML التي لا غنى لصفحة الويب عنها..


وبرامج تصميم الصفحات FrontPage أو Web Designer

هي برامج تقوم بمهمة كتابة تلك الشيفرات عوضا عنك..

وهذا ما ستراه إن شاء الله حين تصمم صفحتك الأولى..


http://islamic333.jeeran.com/Line_drss3.GIF



http://islamic333.jeeran.com/Address7.GIF


إن أهم شيء في صفحة الويب أو التصميم بشكل عام

هو التنسيق المنظم، فصفحتك هذه ستعرض لعدة مستخدمين ومتصفحين،

لذا من الأفضل دائما أن تكون منظمة يسهل البحث فيها والتعامل معها،

وكما شاهدنا في تصميم الواجهة، كان لاختيار الألوان دور مهم،

فالألوان غير المريحة للعين أو التصميم المبعثر يسبب إرباكا لمتصفح موقعك..


كثير من المصممين يستخدمون (الجداول) في تنظيم

صفحات المواقع، وإذا كنت قد تعاملت مع الجداول

في برنامج معالج النصوص Microsoft Word فلن تجد

صعوبة تذكر في التعامل مع جداول صفحة الويب.




http://islamic333.jeeran.com/Address8.GIF


http://islamic333.jeeran.com/Drss3_9.jpg


حين نضيف جدول التنسيق لصفحتنا يجب أن نجعل سُمك

إطار الجدول بمقياس (0) حتى لا يظهر إطار الجدول

للمتصفحين، ففائدة الجدول هنا هو التنظيم فقط،

ولا يقصد رسم الجدول لذاته..






http://islamic333.jeeran.com/Drss3_10.jpg


سأضيف هنا جدولا بثلاثة صفوف وثلاثة أعمدة، وبلا

لون للإطار أو الخلفية، ومقياس سُمك الإطار (0)

وأترك مسافات جدران الخلايا كما هي:





http://islamic333.jeeran.com/Drss3_11.jpg


الآن يمكنك إدراج الصور أو الكتابة داخل الجدول هكذا




http://islamic333.jeeran.com/Drss3_12.jpg


وإذا رغبت في إدراج صورة أكبر يمكنك استخدام

(دمج الخلايا) من قائمة جدول، هكذا:




http://islamic333.jeeran.com/Drss3_13.jpg


احفظ الآن


http://islamic333.jeeran.com/Drss3_14.jpg


http://islamic333.jeeran.com/Drss3_15.jpg


ثم افتح الصفحة


http://islamic333.jeeran.com/Drss3_16.jpg



http://islamic333.jeeran.com/Line_drss3.GIF


::::ختاما::::

في الدرس القادم بإذن الله تعالى سوف نقوم بتصميم المزيد من الصفحات لنبدأ مع موقع فعلي لنا

أتمنى أن تتابعوا أكاديمية المربد وتكون بخير دائما

لكم مودتي

بنت الشهباء
21/05/2009, 09:25 PM
الغالية والأخت الحبيبة روان

هذا هو تصميمي وأتمنى أن ينال إعجابك

وتحية وتقدير لهذا الجهد المتفاني
http://up3.m5zn.com/photo/2009/5/21/01/jm6pcst74.jpg/jpg

روان أم المثنى
22/05/2009, 02:29 PM
http://islamic333.jeeran.com/Line_drss3.GIF

الغالية الأثيرة

وأختي الحبيبة

التي من الله علي بأخوتها

وأنعم علي بنقاء قلبها وصفاء روحها

درة الشهباء

أسعدني تطبيقك للدرس جدا

وأتمنى أن تكون هذه السلسلة مفيدة للجميع

لك حبي العميق

http://islamic333.jeeran.com/Line_drss3.GIF

بنت الشهباء
23/05/2009, 09:36 PM
http://islamic333.jeeran.com/Line_drss3.GIF



الغالية الأثيرة


وأختي الحبيبة


التي من الله علي بأخوتها


وأنعم علي بنقاء قلبها وصفاء روحها


درة الشهباء


أسعدني تطبيقك للدرس جدا


وأتمنى أن تكون هذه السلسلة مفيدة للجميع


لك حبي العميق



http://islamic333.jeeran.com/Line_drss3.GIF



حمدا وشكرا لله يا غاليتي الحبيبة
أن تطبيقي للدرس قد أسعدك

ولا أملك ياروان إلا أن أدعو الله لك أن يسعدك سعادة وفوز الدارين
وأن لا يحرمني من صحبتك دائما أيتها الأخت الحبيبة

وجزاك الله خيرا

رزان
24/05/2009, 01:26 PM
http://www.sf7at.com/upload/uploads/images/sf7at.com3b00d6876b.gif


السلام عليكم ورحمة الله وبركاته

جزاكِ الله خيراً أختي الغالية روان

وبالتأكيد متابعة معك كل جديد

وسأحاول تطبيق الدرس في أقرب فرصة ممكنة

أطيب تحياتي لكِ


http://www.sf7at.com/upload/uploads/images/sf7at.com3b00d6876b.gif

كنفاني
28/05/2009, 11:56 AM
أم المثنى
شرح رائع جدا
أهنئك على قدراتك الرائعة
وعن نفسي أنا أعمل في هذا المجال
وأقولها وبكل أمانة لقد استفدت كثيرا من شرحك

روان أم المثنى
29/05/2009, 07:50 PM
http://img137.imageshack.us/img137/4980/37190814hr3.gif


الأخ الكريم

ثائر كنفاني

بارك الله فيك

وأسأل الله لك التوفيق في عملك

لأن الحاسوب والتصميم بخاصة عمل ممتع وفيه الكثير من الفواائد

لك احترامي
http://img137.imageshack.us/img137/4980/37190814hr3.gif