انشاء موقع متكامل

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

سنخصص هذا الدرس لتصميم صفحة لموقع انترنت ومنها نستطيع ان نستمر لتصميم موقع بالكامل بعد ان تبدأون بطرح الاسئلة لنجيب وندعمكم بالقدر الذي نستطيع باذنه تعالى ...
نبدا الدرس على بركة الله تعالى :
البرامج المطلوبة للاستمرار في الدرس :
* برنامج Dreamwaver
* برنامج Photoshop
* برنامج Flash
1- تحديد هوية الموقع :
لكي نبني او نصمم موقع بشكل صحيح ، يجب نرسم قبل كل شيء الخريطة على ورقة .
كيف نرسمها ؟
بمعنى يجب ان نخطط للموقع كيف سيكون شكله ...
- هل هو موقع اخباري ليكون كمجلة تعرض اخبار متغيرة مفي الانترنت ؟
- هل هو موقع اطفال ؟
- هل هو موقع تجاري وبياناته ثابتة تقريبا ولن يحتاج الى تحديث مستمر ؟
- هل هو موقع شخصي ؟
المهم يجب ان نحدد هوية الموقع نقبل ان نبدأ اي شيء ...
2- رسم الخريطة : نبدأ الان بالتخطيط للخريطة ورسمها ...
- هل نريد ان يظهر الموقع بهيئة رسمية هندسية ، بحيث ان اجزاءه منتظمة فقط؟
- هل نريد ان يظهر الموقع بطريقة فنية ، بحيث ان نختار اجزاءه كيفية ، فنية ، غير
منتظمة ؟
- مالاشياء التي سنحتاج اليها في الموقع او في صفحاته ؟
* هل سنحتاج الى شريط اخباري متحرك ؟
* هل سنحتاج الى مساحة لوضع اعلان متحرك في صفحات الموقع ؟
* هل نرغب في وضع شعار خاص بالمصمم اسفل الصفحة او في مكان ما ؟
* كم عدد المفاتيح التي يجب ان اضعها الموقع ؟
* هل ستكون المفاتيح مرسومة بالفوتوشوب ؟
* هل ستكون المفاتيح مرسومة بالفلاش فقط حتى تكون متحركة ؟
* هل ستكون المفاتيح عبارة عن نص يكتب في Dreamwaver فقط ؟
* هل سنحتاج الى عداد ، يحسب عدد الزوار للموقع ؟
* هل سنحتاج سجل زوار ؟
* هل سنحتاج اعداد قائمة Form يستطيع زوار الموقع تعبئة بياناتها وارسالها ؟
* هل سنحتاج الى وضع مراقبة على الموقع بحيث نستطييع معرفة كل زائر ومن اي
بلد ؟
* هل نحتاج الى معرفة كم زائر يتواجد حاليا في الموقع ؟
* هل نحتاج الى ظهور اعلان (Popup) يظهر مع ظهور الصفحة في المقدمة ؟
* وماذا سنحتاج بعد (يجب تسجيله على الورق).
- يتبع-

3- التنفيــذ :
لكي نقرر التنفيذ ، يجب ان نبدأ تماما وكالاتي :
* نستخدم برنامج الـDreamwaver
* نبدأ بترتيب طبقات (Layers) ونعطي لكل طبقة لون ، فقط لتمييزها ...
بحيث ان الطبقات التي اتحدث عنها هي مساحات نحجزها لغرض بناء الموقع بما يخدم الاجزاء التالي :
* طبقة مخصصة للـ Header وهي المساحة التي تقع في اعلى الموقع لوضع اسم الموقع ، او الاعلان او الاثنين معا .
* طبقة الى يمين الصفحة لوضع المفاتيح فيها .
* طبقة في اعلى الصفحة اسفل من الـ Header ، لأستخدامه كشريط اخباري لاحقا .
* طبقة اسفل من الشريط الاخباري لوضع اعلان .
* طبقة اخرى الى جوار الطبقة التي نذكرها اعلاه لوضع اعلان اخر للموقع .
* طبقة وسط الصفحة لاستغلالها في وضع النصوص (كالتعريف بالموقع).
* طبقة اسفل الصفحة لوضع شعار المصمم .
نخزن الملف بصيغة index
وستصبح هذه هي الصفحة الرئيسية للموقع .
-بتبع-


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


1- نبدا العمل بالدريم ويفر Dreamwaver ... فبعد تشغيل البرنامج نبدأ العمل بملف جديد، بالضغط على المفتاح CTRL+N ..

والان نضغط على العبارة Create كما في الصورة ...

2- بعد ان يظهر لنا ملف (صفحة بيضاء) ، نستطيع تأسيس وبناء وتصميم صفحة لموقع ،
من اعلى يسار البرنامج وحسب ماستشاهد في الصورة التالية ، اضغط على العبارة Common ، لاظهار شريط الطبقات Layout ...


3- نبدأ بتصميم الصفحة بتوزيع طبقات ، بحيث ان كل طبقة ستحتوي على شيء يكتمل به الموقع ، فقد تحتوي الطبقة على (مفتاح ، نص مكتوب ، سكربت ، صورة ، صورة متحركة ....الخ)

4- نرسم اول طبقة في اعلى الصفحة (ويجب ان تكون ملامسة الى اعلى يسار زاوية الشاشة)..
وستحتوي هذه الطبقة رأس الصفحة (كأسم الموقع) Header .

5- نعطي لهذه الطبقة ولأي طبة سنضعها في الفصحة الحالية لون لكي نميزها عن باقي الطبقات التي سنضعها في الصفحة ...

6- الان نبدأ بتوزيع وتصميم شكل الصفحة برسم بقية الطبقات لتحتوي كل طبقة جزئ من التصميم .
ولكن يجب ان تكتب اسم للصفحة وهذا ماجده قد وضعنا عليه اشارة الرقم (1) في الصورة التالية ...

7- يكون من الجميل ان ننهي الصفحة بوضع شعار او عبارة في اسفلها ، وفي الصورة التالية تلاحظون بانني وضعت طبقة استعدادا لوضع شعار او عبارة (كان تقول ، تصميم فلان الفلاني ، او جميع محتويات الصفحة او الموقع محفوظة لدى صاحب الموقع)..

8- والان تستطيع الضغط على اطار (حافة) اي طبقة قد وضعتها في الصفحة ، ويمكنك بعدها استعراض المواصفات (طول وعرض الطبقة بالنقط Pixel) ..


9- الان لوضع صورة في مقدمة الموقع كأسم الموقع او عنوان للموقع ، اضغط وسط الطبقة (في داخل الطبقة) ، واحضر الصورة التي تريد وضعها ...

10- بعد احظار الصورة بالخطوة اعلاه سنجدها في مكانها كما موضح ادناه (ملاحظة ، بعد تحديد الطبقات في الدريم ويفر ، يجب اعداد الصور والمفاتيح والاعلانات التي سنضعها في الطبقات المخصصة لها ، في الفوتوشوب ، بحيث يكون قياس الصورة التي سنستخدمها جاهز تماما بحيث لانضطر الى تغييره في الدريم ويفر).

11- ماذا كان قياس الصورة التي احظرناها غير متسب (اقل او اكثر) ، نستطيع تغيير ذلك من خلال شريط المواصفات اسفل الدريم ويفر باضافة العرض والارتفاع .

12- على سبيل المصال بعد احظار صورة وتغيير مقاساتها ، ستحصل على النتيجة التالية ..

بحيث قمت بتغيير المواصفات كما يأتي ...

13- نستطيع كتابة أي نص في أي طبقة اخرى ، كأن نكتب عبارة ما ، او هذه المساعة للاعلان ...

14- يبقى لنا الان اضافة المفاتيح ... نضغط على الطبقة المخصصة لوضع المفاتيح فيها ومن ثم نبدأ باضافة المفتاح الواحد بعد الاخر ...


15- نختار المفتاح .... لاحظاره الى مكانه المخصص ...


16- بالضغط على مفتاح Enter نستطيع ان ننزل لسطر جديد ووضع مفتاح آخر ...

17- بعد وضع المفاتيح ، يبقى لنا وضع الرابط لكل مفتاح .
فالرابط ممكن ان يكون رابط لفتح صفحة أخرى من الموقع فنكتب فقط اسم الصفحة(على سبيل المثال page_2.html) ، او نكتب رابط موقع بالكامل ويجب ان يبدأ الرابط بالعبارة (http://www) ، على سبيل المثال (http://www.iraqcyber.com) ، فبدون كتابة الحروف (http://) لن يعمل الرابط ..

18- عند الضغط على المفتاح لفتح موقع آخر مثلا (وليس صفحة) ، بالامكان ان نجعل وجود الصفحة الرئيسية للموقع باقية امامنا ، وظهور صفحة الموقع التي كنا نريدها تظهر ايضا ، هذا يتم من خلال وضع رابط الموقع ، واختيار (Blank)

19- الى هذه المرحلة نكون انتهينا من التصميم لأول صفحة ، نخزن الملف باسم
index


20- لتصميم صفحة اخرى تابعة للموقع ، كصفحة ثانية مثلا ، نخزن الملف الحالي باسم اخر وعلى سبيل المثال (page_2) . ونغير المحتويات ...
وبعد تغيير المحتويات يصبح لدينا صفحتين ، نبدأ بوضع الروابط على المفاتيح بما نحتاج اليه ...

[center]

جزاك الله كل الخير يا بسام