طرق تصميم موقع نت الجزء الاول

تعليم تصميم المواقع عن طريق الفرونت بيج للمبتدئين


جدول المحتويات
• مقدمة.
o ما هو الفرونت بيج
o ما هو html
o لمن هذه الدروس
o متطلبات الدروس
• مجلد الموقع
• شجرة الموقع او مخطط التنقل
• النصوص
• الارتباطات التشعبية
• تحديد خصائص الصفحة
• الصور
• الجداول
• نشر الموقع

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

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

الفرونت بيج هو أحد برامج حزمة أوفيس ، ويعتبر أداة سهلة وبسيطة للمبتدئين وللمحترفين لتصميم صفحات ويب بطريقة سريعة واحترافية ، ووظيفة هذا البرنامج الرئيسة هي تحويل هيئة الصفحة كما تراها في صفحة التصميم إلى كود html.

Html (اتش تي ام ال) هي اللغة المستخدمة في تصميم المواقع وهي تقرأ من قبل المتصفح (الانترنت اكسبلورر أو نتسكيب ) وذلك لمعرفة هيئة عرض الصفحة التي ستظهر للرائي. أي أن أي صفحة تظهر في شبكة الانترنت ، مكتوبة بهذه اللغة. وتستطيع معاينة كود الصفحة المكتوبة بهذه اللغة عن طريق الضغط بالزر الأيمن ، واختيار ( view source ).

أي أن مصمم الصفحة ، يقوم بتحرير الصفحة عن طريق سلسلة من الأدوات ، ذات واجهة مرئية ، مثل تحرير الصفحة في برنامج الورد تقريباً ، بمعنى أنك ترى تصميمك وفت التصميم ، ويقوم البرنامج بدوره في تحويل التصميم إلى كود HTML .

إذا لم تفهم ما قيل كلياً فلا تقلق ، وذلك لأن الآتي سيوضح ذلك بشكل مفصل ، إذا كنت من المبتدئين في تصميم المواقع فأنت في المكان المناسب ، وإذا كنت متقدماً في هذا المجال ، فربما تستفيد منها كاستزادة أو كتذكير ، وخاصة لأن الدروس ستدعم بفلاشات توضيحية ، للبدء في هذه الدروس يجب أن يتوفر عندك برنامج فرونت بيج ( والأفضل اكس بي ).

إذا كنت مستعداً ، فلنبدأ إذاً.




--------------------------------------------------------------------------------


مجلد الموقع:

في هذا الدرس سنتعلم:
• ما هو مجلد الموقع
• كيفية انشاء مجلد الموقع

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

ملاحظة:
عادة ما يكون هذا المجلد موجوداً في المجلد (My webs ) الموجود في مجلد my ********s .


العرض:
سنقوم في هذا المثال بإنشاء مجلد موقع فارغ ، وسنسميه maknoon .

عرض فلاشي




شجرة الموقع:

في هذا الدرس سنتعلم:
• ما هي شجرة الموقع
• كيفة انشاء شجرة الموقع

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

العرض:
سننشأ شجرة الموقع كثلاث صفحات (صور ، أخبار و مواقع ) ، أسفل الصفحة الرئيسة.

عرض فلاشي



ملاحظة
غالبا ما يسمى ملف الصفحة الرئيسة index.htm ، وبهذا الاسم يعرف السيرفر ، أن هذه الصفحة هي الصفحة الرئيسة ، أو أول صفحة تفتح عند فتح الموقع ، ولكن تسمية هذه الصفحة ، يختلف من سيرفر ( مستضيف ) إلى سيرفر آخر.




--------------------------------------------------------------------------------


النصوص:

في هذا الدرس سنتعلم كيفية:
• إضافة نص
• تغيير نوع الخط
• تغيير حجم الخط
• تغيير لون الخط
• تغيير محاذاة الخط

عملية إضافة النص وتنسقيه في برنامج الفرونت بيج سهلة جداً ، وهي تشبه تقريباً العمل في برنامج الورد ، فإذا كنت متمرساً على برنامج الورد ، فعلمية تنسيق النصوص سهلة جداً عليك. والجدول التالي سيبين بعضاً من الأيقونات المستخدمة لتنسيق النصوص:

محاذاة لليمين سميك
محاذاة للوسط مائل
محاذاة لليسار مخطط


العرض:
سنكتب النص ( السلام عليكم ورحمة الله ) في الصفحة الرئيسة ، بخط ( Tahoma ) وبلون أحمر ، اما حجم الخط فهو نقطتين.

عرض فلاشي



html

<font face="Tahoma" size="2" color="#FF0000">السلام عليكم ورحمة الله </font>





--------------------------------------------------------------------------------


الارتباط التشعبي:

في هذا الدرس سنتعلم كيفية:
• تحديد جملة كارتباط تشعبي
• التعرف علىبعض أنواع الارتباط التشعبي:
o ارتباط لصفحة أخرى في الموقع
o ارتباط لصفحة خارج الموقع
o ارتباط لايميل
o ارتباط لسطر في نفس الصفحة
• تغيير نبذة الارتباط
• مسح الارتباط


=== يتبع الجزء الثاني ===