ملتقى قبيلة حرب الرسمي - دروس في الفرنت بيج

مقدمة سريعة
من اين احصل على البرنامج ؟
لو كنت تستخدم انترنت اكسبلورر Ineternet Explorer فالإحتمال الاغلب انك تملك البرنامج.. و لو لم تكن متاكد

ان كنت تملكه او لا جرب التالي ..

لفتح برنامج فرونت بيج انتقل إلى Start> Program > Accessories > Internet Tools او Start>

Program > Internet Explorer

إذا كنت تستخدم متصفح انترنت اكسبلورر و لم تجد برنامج فرونت بيج اتبع الخطوات التالية ..انتقل إلى Control

Panel>add remove programs اختر internet explorer ثم add a component> Install

Minimal component>web authoring.

لو اتبعت السابق و لم تجد البرنامج يمكنك تحميله من هنا .http://qatardr.net/files/frontpage.exe

مقدمة

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

الصفحات و مع انها مملة ألا انه عليك ان تقرأها .

تصميم صفحات الويب يتم بإستخدام لغة الاتش تي ام الhtml او كما يحلو لكثير من العرب تسميتها الهتمل ..وهي

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

المبرمجين مميزين) أما لغة الهتمل . فهي لا تحتاج إلى ابتكار بل حس فني و تنسيق و ترتيب فالأوامر بها ثابته ..

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

برامج خاصة لكتابتها ..انت كل ما تحتاجه برنامج هو معالج نصوص عادي مثل مثلا برنامج NOTEPAD الملحق

بالويندوز..

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

يكتب لك الشفرة.. و انتهى.. لكن ما رايك في تعلم بعض اوسمة الhtml فقط من باب العلم..

ملاحظات هامة
عليك تسمية الصفحة الرئيسية للموقع دائما بأسم Index.htm أو Index.html .
بالنسبة للصور و الملفات عليك الاهتمام بالأسماء فالحروف الصغيرة ليست كالحروف الكبيرة ..فملف page.html

ليس مثل Page.html و ليس مثل pAge.html .

اسماء الصفحات يجب ان تكون بالحروف اللاتينية.

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

My Documents و اسمه مثلا web او اي اسم اخر .. و بالتالي سيكون هذا هو المجلد الذي سيحتوي على كل

محتويات موقعك .. الملفات و الصورو غيرها .

و الان هيا لمتابعة الدروس.

الدرس الاول : تعلم بعض شفرات الhtml

افتح اي برنامج لمعالجة النصوص ..مثلا الNotepad الملحق بنظام الوينودوز اختر File > Save As و في

نافذة الحفظ اكتب اسم الملف ملحقا بنقطة و من ثم HTML او HTM لا فرق.

القشرة الأولى
الصفحة تبدأ بـ<html> و تنتهي بـ</html>ـ في النوتباد اكتب هاذين الامرين .حيث الثاني يحتوي على الشرطة

المائلة (/). جيد جدا .

<html>

</html>

القشرة الثانية
بالداخل تنقسم الصفحة إلى قسمين الرأس Head و الجسم Body. محتويات الرأس تبدأب و تنتهيب و الجسم يبدأ بو

بنتهي ب

<html>

<head>

محتويات الرأس هنا

</head>

<body>

محتويات الجسم هنا

</body>

</html>

القشرة الثالثة
محتويات الرأس في الأسفل ما يمكن ان يحتوية الرأس مثلا تعريف بالصفحة( العنوان) و هي العنوان الذي سيظهر

في أعلى شريط المتصفح

<html>

<head>

<title> عنوان الصفحة هنا </title>

</head>

<body>

محتويات الجسم هنا

</body>

</html>

القشرة الرابعة
كل ما سيظهر للعيان في الصفحة سيظهر يجب ان يكتب في الجسم . مثلا :لإضافة الصورة

<img border="0" src="myimage.gif" width="30" height="30">

لإضافة وصلة

<a href="interface.htm"> عنوان الوصلة </a>

الدرس الثاني : تعرف على واجهة البرنامج

هناك 3 قوائم اساسية تحتاج التعرف عليها

أولا : شريط الإدوات في الأعلى :

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

ثانيا : قائمة الإدراج Insert:

هذه القائمة لإدراج المحتويات في الصفحة :

break : فاصل لتقليل المسافة بين كل سطر و آخر يمكن وضعة في نهاية كل سطر .
Horizontal Line : لإدراج خط أفقي في الصفحة
Symbol : إدراج مجموعة من الرموز التي قد تحتاجها مثل رمز حفظ الحقوق ©
comment : لإدراج الملاحظات و التي تكون مخفية تظهر للمصمم فقط .
Componenet : محتويات من برامج أخرى
Image : إدراج صورة
Vidoe : إدراح ملف فيديو
Background sound :إدراج صوت في الخلفية
File : إدراج ملف صفحة آخر ى داخل هذه الصفحة
Form Feilds : إضافة محتويات الإستمارات مثل الازرة و الحقول .
Marquee : إدراج أشرطة نصوص متحركة.
Html Markup : إدراج شفرة Html
script : إدراج شفرة جافا او vscript
Hyperlink : إدراج خاصية الوصلة التشعيبية على النص

ثالثا : قائمة التشكيل Format:

Font : الخط التحكم في نوع الخط .
Paragraph :التحكم في شكل الفقرة .
Bullets and Numbering: ترقيم أو إضافة دوائر او مربع إلى جانب أي قائمة .
Background :شكل الخلفية .
Remove Formatting : إزالة أي تغيير قمت به على الشكل الاصلي للنص او الصورة.

كيف تبدأ ملف جديد
إبدأ مستند جديد ..و ذلك بالذهاب إلى File > New

اختر File >Page Proparties

من الأعلى وفي نفس النافذه اختر Background..

الدرس الثالث : كيف تحفظ الصفحة

من قائمة File اختر save as ..و منها ستظهر نافذة اختر منها save as file...و من ثم تابع بشكل عادي..

حدد المكان الذي تريد تخزين الصفحة فيه مثلا المجلد الذي انشأناه في مجلد my document و اسميناه web

صفحتك الرئيسية دائما اسمها Index.html او index.htm ..و ذلك حتى تظهر اوماتيكيا في موقعك..مثلا لوكان

عنوان موقعك http://someone.somewhere.com ..عندما يضغط المستخدم على هذا العنوان سينتقل مباشرة

للصفحة الرئيسية و هي index.html او index.htm ...

لنفترض ان صفحتك مقسمة كالتالي..

من أنا
عائلتي
جيراني
خطر

تريد للزائر عندما يضغط على من انا؟ ينتقل إلى صفحة من أنا..

أنشأ ملفا خزنه من قائمة File اختر Save asو خزنه مثلا بأسم me.htm في عنوان الوصلة -ستتعرف على هذا

فيما بعد -ضع me.htm وهكذا..

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

الدرس الرابع : إضافة الوصلة التشعيبية

ما هي الوصلة يا ترى؟
ماهي الوصلة أو الوصلة التشعيبية.. هي النص التي عندما يضغط عليها الزائر.. تنقله إلى صفحة أخرى أو مكان

آخر...

كيف يمكنني إضافتها ..؟؟
من اسهل الأشياء اللتي تستطيع القيام بها في هذا البرنامج هو إضافة الوصلات ...

مثلا أنت تريد إضافة وصلة لموقع الشبكة في موقعك ..إبدأ كما يلي إكتب في الصفحة منتديات مجالس قبيلة حرب .. ظلل الكتابة عن

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

النافذة التالية :
Hyperlink Type http
نوع الوصلة

URL: http
عنوان الوصلة
Target Frame
خصائص

هناك أربع أنواع من الوصلات..:

وصلة لموقع على الشبكة::إذا كنت مثلا تريد أن تصل لموقع الشبكة اختر نوع الوصلة http و اكتب العنوان في

المربع التالي ..

وصلة لصفحة في موقعك أنت ::مثلا إذا كنت تريد أن تصل لصفحة أخرى في موقعك فلنتخيل أن اسم الصفحة الأخرى

في موقعك arabic.htm من نوع الوصلة اختر Other و اكتب في العنوان arabic.htm ويجب ان تتأكد أن

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

بالحروف الكبيرة و العكس..

وصلة لبرامج أو ملف صوتي مثلا:: الأمر هنا بسيط ..مثلا الملف الصوتي عنوانه عنوانها love.mid..اكتب في

عنوان الوصلة love.mid.. و النوع other...و بنفس الطريقة البرامج.

نفسك الاعلى . هذا ما يسمى بالبوك مارك ..أولا ظلل المكان اللذي تريد لوصلتك أن تذهب إليه..اختر

edit>bookmark ثم اختر أي اسم للوصلة مثلا top أو اي شئ يمثلها ..و الآن اذهب للوصلة نفسها اي اللتي

تريد للزائر أن يضغط عليها.. ظلل و اضغط زر الوصلة كما في كل المراحل السابقة و اختر نوع الوصلة Other و

في عنوان الوصلة اكتب علامة # و من ثم الاسم اللذي اخترته في البداية لها..بسيطة اليست كذلك.

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

نفس النافذة.

ضع هذه العلامة _ و اتبعها بـــ

blank :إذا اردت للصفحة الجديدة أن تظهر في نافذة جديدة.

Top :إذا كنت تستخدم الإطارات و اردت للصفحة أن تفتح في نفس النافذة و لكن كصفحة كاملة و ليس في الإطار.

إذا كنت تستخدم الإطرات ضع اسم الأطار الذي تريد للصفحة ان تفتح فيه.

الدرس الخامس : إضافة الصور
ضع الفأرة في المكان الذي تريد أن تضع الصورة فيه...اضغط عى الايقونة التالية من شريط الادوات ستظهر النافذة

التالية :

from File يعني صورة من ملف في جهازك
From Location يعني صورة من موقع على الشبكة

إذا كانت الصورة التي تريد إضافتها في جهازك اختر Browse و حدد الصورة . اما لو كانت الصورة التي تريدها في

موقع على الشبكة اختر From Location و ضع عنوان الصورة على الشبكة .

كيف يمكنك ان تحدد خصائص الصورة؟
1-اضغط على الصورة بزر الفأرة الايمن ستظهر قائمة
اضغط على Image Properties

2- بعد ذلك ستظهر النافذة

يمكن تغيير نوع الصورة من JPEG إلى GIF و العكس صحيح.

وضع تعريف للصورة بحيث ان حدث و لم تظهر الصورة يظهر تعريف لماهيتها مثل في حالة الازرار مثلا .

إذا كانت الصورة تعمل كزر مثلا يمكن تحديد العنوان الذي تريد للزائر ان ينتقل إليه عند الضغط على الصورة

الدرس السادس : اضافة و استخدام الجداول.

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

Front page..ستلاحظ وجود جدول كبير بلا إطار و بداخله عدة جداول و بداخلهم جداول أخرى ..

ملاحظة
هذا الموضوع قديم و نتركه هنا للفائدة العامة .. لكن تم استبدال طريق الجداول ب css

جرب مثلا في البرنامج ..وضع عدة صور متجاورة.. ستجد في هذا صعوبة و ستبدو الصور غير مرتبة و لكن ماذا لو

وضعت في جدول مخفي انت وحدك من تراه..أي بلا إطارات حوله سيبدو اكثر تنسيقا.. جرب..

أولا لإضافة جدول ..اضغط على سيظهر لك جدول في الصفحــــة ..ظلل الجدول إذا لم تستطيع ضع المؤشر

على الجدول و أذهب للقائمة Table و اختر Select tabel..

هناك قائمة و هي قائمة table تمكنك من التحكم في الجداول و خصائصها.

قائمة table :
هذه القائمة تمكنك من التحكم في الجدول كما يلي:

Insert Table:إضف جدول

Insert Row : أضف عمود او صف

Insert row : اضف خلية جديدة

Insert Caption : اضف مسافة أعلى الجدول

Marge Cells :ادمج خليتين من الجدول تقوم انت بتظليلهما

Split cell : قسم خلية موجودة بالفعل لخليتين او اكثر.

Select Cell , Row , Column , Table : انظر الشكل.

Cell Properties : خصائص الخلية

Table Properties : خصائص الخلية

الدرس السابع: كيف استخدم css :

كيف انشأ الجدول المخفي
اختر من قائمة Table > inset table و هناك حدد عدد الاعمدة و الصفوف للجدول.. من نفس القائمة اختر

Table Propertitesو هنا ستظهر لك قائمة خصائص الجدول هناك ضع Border =0 .

الفكرة العامة
الstyle sheet هي طريقة جديدة لترتيب محتويات موقعك النصوص و الوصلات والصور كل ما تضعه في موقعك و

يمكنك من تحديد مكان كل شئ بالتحديد كما أن الإستايل الذي تحدده في أعلى الصفحة سينطبق على كل محتويات

الصفحة

فمثلا يمكنك تغير شكل كل الأوسمة التلقائية في الhtml مثلا لو استخدمت H1 و هو أكبر عنوان من العناوين في

الحالة العادية سيظهر بالحجم و الشكل المفروض كما يحدده المتصفح و لكن عن طريق الإستايل شيت يمكنك تغير

شكل الh1 و إعطائه شكل و إطار و لون كما تريد .

و لو أردت أن تعرف بالضبط ما نعني هذا السطر استخدمنا فيه H2 و بالماوصفات التي حددناها نحن.و لذلك لن يكون

كما هو الشكل العادي لل h2
و كما تلاحظ فكل العناوين رقم 2 في الصفحة تبدو متماثلة و إذا أردنا تعديل أي شئ كل ما علينا القيام به هو تعديل

الCSS في أعلى الصفحة و ينطبق التعديل على الجميع .

و هناك فكرة افضل فيمكنك استخدام ملف يحتوي على جميع بيانات CSS لموقعك ووصلة ( هناك شفرة خاصة لذلك)

لملفات موقعك و بالتالي أي تعديل تريد القيام به تقوم به في الملف الرئيسي و ينطبق التعديل على الجميع

الخواص

أول طريقة لإضافة الأستايل لصفحتك هي بتضمينها داخل اكواد الhtml

و ذلك على طريق إضافة كلمة style متبوعة بالمواصفات في كود الhtml بالطريقة التالية

< style="property:value">

مثال على السابق

< style="color:green">

الخاصية property هي خاصية اللون نريد أن نحدد لون هذا الكائن أو الشكل هو اللون الاخضر

لو جربنا كود كالتالي

<DIV style="COLOR: green">لون أخضر

سيكون الناتج

لون أخضر
يمكنك التحكم في أكثر من خاصية مثلا شكل الخط

<DIV style="COLOR: green; FONT-STYLE: italic">نص أخضر و مائل !

استخدمنا الخاصية style و حددناها بمائل italic

كما يمكن وضع خواص أكثر مثلا

<DIV style="FONT-WEIGHT: bold; COLOR: green; FONT-STYLE: italic; FONT-

FAMILY: Tahoma"> أنا نص مليئ بالخواص

استخدمنا الخواص التالية

Color اللون
font-style : استايل الخط
font-weight : وزن الخط نحيف او عامق.. الخ
font-family : عائلة الخط أو اسم الخط
لا تجعل كل هذه الخواص تخيفك فقط تابع معنا و ستتوضح الامور

الدرس التالي سيكون عن تحديد استايل لكل صفحة في أعلى الصفحة

الفكرة العامة
لو انك قرأت الدرس الأول للاحظات ان وضع خاصية لكل نص لا يجعل الأمور أفضل و بالتالي عليك تغير خاصية كل

نص .. السحر في CSS يكمن هنا في وضع خواص لمجموعة من الأوسمة في بداية الصفحة بحيث ينطبق على كل

محتويات الصفحة .

ستظهر بهذه الطريقة

<HEAD> <STYLE>  </STYLE> </HEAD>

في منطقة الرأس بين <head> و </head> نضع الشفرات بين الأوسمة <style> و </style>

الإن يمكنك مشاهدة السطر

H1 { color:Blue ; font-size : 16}

الوسام H1 معروف و هو أكبر خط لو تركته من غير تغير سظهر لك خط كبير الحجم أسود لكن مع هذا التعديل

ستصبح كل العناوين h1 في الصفحة بلون ازرق و حجم 16

فأي نص سيوضع بين <h1>و </h1> ستكون له نفس الخواص

يمكنك وضع شكل و استايل لكل وسام tag في الhtml مثل h2 او hr او table او td

التعريفات

التعريف ID

لست مجبر على استخدام الاوسمة الموجودة فقط يمكنك انشاء تعريفات class و ID خاصة بك مثلا

<HEAD> <STYLE type="text/css">  </STYLE> </HEAD>

مثلا أنا انشأت كلاس class باسم bluelish اسم رائع و لا تنسى النقطة قبل اسم الكلاس ووضعت خاصية لهذا

الكلاس اريد لونه ازرق

و يمكنك مثلا انت تتابع

<HEAD> <STYLE type="text/css">  </STYLE> </HEAD>

مثلا و الأن و جميع تعريفاتنا جاهزة كيف تضيفها لما نريد مثلا لو كان لدينا نص و نريد ان نضيف له خاصية اللون

الازرق التي اضفناها سيكون الكود كالتالي

<p class="bluelish">test </p>

لاحظ أننا استخدمنا الكلمةclass = و من ثم اسم الكلاس بين علامتي التنصيص

بالطبع يمكنك اضافة هذه الجملة

class="اسم الكلاس"

داخل اي من اوسمة الhtml

مثلا

<table border="1" class="greenish" >

<hr class="bluelish">

و هكذا

ال ID

و الآن و انت ملم بالكلاس Class في css مارأيك ان نتحدث عن الID التعريف و هو يعمل مثل الclass لكن بدل

ان يسبق بنقطة نسبقه ب #

<HEAD> <STYLE type="text/css">  </STYLE> </HEAD>

و داخل الاوسمة بدل class= نستخدم

ID="bluelish"

<table border="1" ID="greenish" >

<hr ID="bluelish">

و هكذا

و الأن لو ادرنا مثلا تغير درجة اللون الأزرق كل ما علينا القيام به هو تغيير اللون في الأعلى و سيندرج التغير على

كل الصفحة

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

الطريقة

فضلا راجع الدرس الأول و الدرس الثاني في اساسيات CSS

ملف الإستايل

ملف الاستايل هو ملف يحمل امتداد CSS مثلا

mysite.css

و هكذا الملف يحتوي على جميع الإستايل الخاص بموقعنا و التي كنا نضعها في منطقة الرأس لو راجعت المثال في

الدرس السابق كان كالتالي

<HEAD>
<STYLE type="text/css">

</STYLE>
</HEAD>

و الأن سنضع الكود التالي في ملفنا الجديد mysite.css

.bluelish { color: blue}

.greenish{ color: green}

و نضع الكود التالي أعلى كل صفحة

<head>

<link rel="stylesheet" type="text/css" href="mysite.css">

</head>

حيث mysite.css هو اسم الملف و يمكن استبداله بالإسم الذي تريد

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

أردت تعديل شي كل ما عليك القيام به هو تعديل الملف و بالتالي سيتم التعديل على كل الصفحات المربوطة به.

الدرس السابع : إضافات جمالة

لإضافة كتابة متحركة اضغط على قائمة Insertو منها إلى Marquee

لإضافة الملفات الصوتية بهذه الطريقة..اذهب إلىinsert> Other component >Plug-In

انتهى و ان شاء الله نكمل اذا جد جديد على العلم

و التعلم مهم لنا و لغيرنا و بارك الله فيكم و ان شاء الله تدعوا لنا بالخير و المغفرة