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

مشاهدة النسخة كاملة : دروس في تصميم المواقع عن طريق الـ (FrontPage)


يافع
05-16-2004, 04:46 AM
السلام عليكم ورحمة الله وبركاته ...

الحمد لله ، والصلاة على رسول الله.

هذه مقدمة إلى أحبتي في المنتدى عن البرنامج المشهور لتصميم وإدارة مواقع الانترنت.

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

لم يسبق أن قام احد بتصميمه...

وسيكون متدرج الصعوبة ...

ومدعوم بالصور ( :D لا تخافون لن تختفي الصور بعون الله)

البرنامج سهل العثور عليه ...

فقط بعد ان تنتهي من صلاة العشاء في المسجد الجامع اصرخ في الناس...

حدى معه الفرونت بيج.... :)

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

تركيب الفرونت بيج ماهو صعب ... سهل جداً ...

بعد ما تنتهي من التركيب افتح البرنامج...

طبعاً لن نقوم في هذا المقام بشرح كيفية فتح وإغلاق وحفظ الملفات ....

فكما يبدو ان أكثركم يعرف هذه الطريقة ...

افتح برنامج الفونت بيج

الفرونت بيج الذي عندي باللغة العربية .... السموحة لمن عنده اللغة الاعنجليزية..

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

انصح انك تعمل ملف خاص تضع فيه محتويات تصميم الصفحة...

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

الصـــــــــــــــــورة (http://www.goldmohamed.com/lesson/images/frontpage/1/1frontpage_1.jpg)

بعض الأحيان تكون هناك صفحة مفتوحة .. إذا كان كذلك فلا تفتح صفحة جديدة.


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

حيث ان هذه العملية صعبة (للبعض)

ولا تستعمل في التصاميم الراقية (مع انه يمكن استعمالها في ذلك)

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

وتنقسم طريقة التحكم بطول وعرض الجدول إلى نوعين..

النوع الأول أن نقوم بعطاء الجدول مقاس نسبي للمتصفح عن طريق النسبة المئوية....

مثلا لو قلنا ان عرض الجدول سيكون %100 فأن الجدول سيستخدم عرض المتصفح كاملاً...

مهما كان حجم متصفح الانترنت....

وهذه الطريقة تستعمل في منتدى التبيان....

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

ويمكنك مشاهدة المثال على ذلك في الموقع الذهبي

www.goldmohamed.com


عندما نقوم بالتصميم في الفرونت بيج هناك طريقتا ... سهلة وصعبة..

الطريقة السهلة هي أن تصمم الموقع من خلال الأدوات الظاهرة.

الطريقة الصعبة هي ان تصمم الموقع من خلال الشفرات .

في هذا الدرس سنسلك الطريق السهل.

شاهد الصورة لتبين مجالات العمل في الفرونت بيج

الصـــــــــــــــــورة (http://www.goldmohamed.com/lesson/images/frontpage/1/1frontpage_2.jpg)


لكي نقوم بعمل جدول او إدراج جدول في الصفحة من القائمة العلوية نختار

جدول >> إدراج >>>جدول

شاهد الصورة

الصـــــــــــــــــورة (http://www.goldmohamed.com/lesson/images/frontpage/1/1frontpage_3.jpg)
بعد ذلك ستظهر لك صندوق إدراج الجدول ... مثل هذه الصورة

الصـــــــــــــــــورة (http://www.goldmohamed.com/lesson/images/frontpage/1/1frontpage_4.jpg)
انتبه معي......

أولا حدد عدد الصفوف ...... طبعاً الصفوف تكون افقية....

ثم حدد عدد الأعمدة ... طبعاً عمودية ....

بعد ذلك المحاذاة .... .. هل تريد ان يكون الجدول في الوسط او اليمين او الشمال.

حجم الحدود .....

الحد صفر لن يظهر حدود الجدول ...

الحد واحد سيظهر حد خفيف ....

وهكذا....

نطاق الخلية .... هي المسافة بين الخلية وعنصر الخلية..

المسافة بين الخلايا ... هي التباعد بين الخلية وأختها..

اتجاه الجدول ..... هي بالأصح اتجاه عناصر الجدول ...

العرض .......كيفية ومقاس العرض.....

قم بوضع هذه المعطيات في الجدول


الصفوف = 3

الأعمدة = 3

المحاذاة = توسيط

حجم الحدود = 0

نطاق الخلية = 3

مسافة بين الخلايا = 3

اتجاه الجدول = من اليمني إلى اليسار

تحديد العرض = 777 بالبكسل

الصـــــــــــــــــورة (http://www.goldmohamed.com/lesson/images/frontpage/1/1frontpage_5.jpg)

بعد ذلك سيظهر الجدول ......

سنقوم بعملية تلوين ...... يمكنك التلوين على حسب مزاجك ....

حرك مؤشر المواس إلى الخلية الوسطى في الصف الأول ثم اكبس الزر اليمين واختار خصائص الخلية

الصـــــــــــــــــورة (http://www.goldmohamed.com/lesson/images/frontpage/1/1frontpage_6.jpg)
ثم اختار لون الخلفية فضي

الصـــــــــــــــــورة (http://www.goldmohamed.com/lesson/images/frontpage/1/1frontpage_7.jpg)
اكتب في الخلية نفسها ... هذه العبارة

>>>>> الدليل الإسلامي للكل <<<<<

لاحظ ان الخلية قد اتسعت .... ونحن لا نريد ذلك ....

الصـــــــــــــــــورة (http://www.goldmohamed.com/lesson/images/frontpage/1/1frontpage_8.jpg)

كل ما عليك فعله لتصغير الخلية او جعل جميع الخلايا متساوية هو..

********************************
1- تحديد الاعمدة.
الصـــــــــــــــــورة (http://www.goldmohamed.com/lesson/images/frontpage/1/1frontpage_9.jpg)
2- الذهاب من القائمة العلوية إلى

جدول >> توزيع الأعمدة بشكل متساو
الصـــــــــــــــــورة (http://www.goldmohamed.com/lesson/images/frontpage/1/1frontpage_10.jpg)
********************************

بعد ذلك يمكنك توسيط الخط ......

قم بمط وسحب الجدول وتغير اللون كي يكون بهذا الشكل

الصـــــــــــــــــورة (http://www.goldmohamed.com/lesson/images/frontpage/1/1frontpage_11.jpg)

ثم اكتب في الخلايا ونسق عن طريق النقاط والخطوط ليكون الشكل هكذا
الصـــــــــــــــــورة (http://www.goldmohamed.com/lesson/images/frontpage/1/1frontpage_12.jpg)
قم بحفظ الملف في المجلد المعد ....

هذا وإلى اللقاء في الدرس القادم ....

أخوكم المسكين محمد :)

التبيان . كوم
05-17-2004, 05:55 PM
جزاك الله خير

درس ممتع


الله يبارك فيك

وننتظر البقية
:)

يافع
05-17-2004, 08:53 PM
شكراً على مرورك أخي الحبيب التبيان . كوم
:)