أخوية - تعليم تصميم المواقع باستخدام برنامج Front Page و الشرح الكامل للغة HTML

أخوية (http://www.akhawia.net/forum.php)

- التصميم والجرافيكس والحركات الشيك (http://www.akhawia.net/forumdisplay.php?f=21)

تعليم تصميم المواقع باستخدام برنامج Front Page و الشرح الكامل للغة HTML

تصميم مواقع الويب عمل فني ابداعي يستطيع المصمم من خلاله التعبير عن فنه من خلال التصاميم و الالوان و الرسوم و النصوص التي يضيفها ويجب ان يلبي رغبات و احتياجات طيف واسع من المستخدمين الذين يتصفحون الموقع لذا يحتاج المصمم الى دراسة مختلف نوعيات المستخدمين المحتملين للموقع و التعرف عليهم بهدف توجيه تصميم الموقع على نحو يحقق مطالب هؤلاء المستخدمين

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

1 . يجي ان تكون الواجهات سهلة الاستخدام ولها اسماء ذات دلالة مباشرة و وضاحة عن محتواها

2 . يجب ان تكون القوائم بسيطة و مختصرة

3 . يجب ان تكون الصفحات تفاعلية

4 . يجب ان تساعد الصفحة الرئيسية المستخدم المبتدئ على الوصول الى اي معلومة يطلبها

5 . يجب ان لا يسبب التصفح ازعاجا للمستخدم ( خط صغير صعب القراءة - صور متحركة بسرعة )

6 . يجب ان يكون الموقع سريع التحميل و ان يكون التجول بين مختلف صفحاته سهلا و سريعا

7 . يجب تحديث الموقع و معلوماته باستمرار

8 . يجب اشراك المستخدمين في عمليه تقويم الموقع و السماح لهم باعطاء ملاحظاتهم من خلال اضافة صفحة خاصة للآراء .
.

يمكن تقسيم عمليه تصميم الموقع الى قسمين اساسيين

1 . يشمل الاول البرمجيات المستخدمة في عمليه التصميم و التنفيذ مثل لغة HTML و برنامج Front Page ( و هو الذي سنتعلمه )

2 . يشمل الثاني ادوات الاختبار اي المتصفحات مثل Internet Explorer او Fire Fox

قبل كل شي لازم يكون مثبت عالجهاز برنامج Front Page و هو يأتي ضمن حزمة برمجيات Office

و اذا بدكن ممكن تحملوه من هون

- ابو شريك هاي الروابط الي بيحطوها الأعضاء ما بتظهر ترى غير للأعضاء، فيعني اذا ما كنت مسجل و كان بدك اتشوف الرابط (مصرّ ) ففيك اتسجل بإنك تتكى على كلمة سوريا -

- ابو شريك هاي الروابط الي بيحطوها الأعضاء ما بتظهر ترى غير للأعضاء، فيعني اذا ما كنت مسجل و كان بدك اتشوف الرابط (مصرّ ) ففيك اتسجل بإنك تتكى على كلمة سوريا -

:ss:

نذكر فيما يلي اوامر لغة HTML

1 . الاوامر البنيوية : هذه الاوامر تعرف الملف النصي كملف HTML كما تعطي بعض المعلومات عن محتواه

2 . اوامر تنسق المقاطع : يتم بوساطتها تحديدي بداية و نهاية كل مقطع

3 . اوامر تنسيق المحارف : تفيد بتطبيق عدة انماط على الاحرف ( عريض , مائل ......... )

4 . اوامر تنسيق القوائم : تعالج لغة HTML عدة اشكال من القوائم مثل القوائم المنقطة و المرقمة

5 . اوامر الروابط الفائقة : تسمح باعطاء المعلومات ال ضرورية للانتقال من جزء الى آخر بنفس الوئيقة

6 . الاوامر الخاصة بادراج عناصر خارجية : يمكن من خلالها الربط مع عناصر متعددة الوسائط ( صور , صوت , فيديو )

الخطوة الاولى لانشاء ملف HTML

ان المؤثر البنيوي الاول هو <HTML> و هو يدل على بداية مستند HTML بينما يشار الى نهاية المستند بالرمز <HTML/>

و هكذا فإن النص بأكمله يجب ان يكون محصورا بين هذين المؤثرين مثال :

و داخل هذا الصندوق المحدد بين هذين المؤثرين نجد قسمين اساسيين للمستند هما الترويسة و الجسد

الترويسة Header

تحدد بين المؤثرين <HEAD> و <HEAD/> و يكتب بداخلها عنوان الوثيقة

و لكن يجب كتابة العنوان بين مؤثري العنوان <title> و </title> مثال :

الجسد Body

يأتي جسم المستند الذي يحتوي على نص المستند بعد الترويسة و يتحدد بمؤثري البداية و النهاية و هما
<body> و <body/> مثال

ان اوامر لغة HTML يتم احاطتها دائما بالاشارتين >< و هذه الاوامر تدعى وسوم

يمكن كتابة الوسوم بالاحرف الصغيرة او الكبيرة

عندما تكتب الوسوم الخاصة بصفحة الويب عليك ان تدرك ان كل وسم يدل على حدث بالنسبة لبرنامج التصفح

فبالنسبة لبرنامج التصفح يدل الوسم <html> الى ان الملف يتضمن مستند html و يقوم المتصفح بفتح ملف من هذا النوع و يعالج جميع الوسوم الواردة فيه

ملاحظة هامة

ان النص الذي تكتبة بين <title> و <title/> يمثل العنوان الذي سيظهر في الشريط العلوي لنافذة برنامج التصفح فقط

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

اقتباس:

كاتب النص الأصلي : Sarita (مشاركة 1126182)

اهلين ساريتا / يعدمني ياكي على هالصورة :lol:

:xالرابط لا يعمل:x

اقتباس:

كاتب النص الأصلي : aljgd (مشاركة 1171269)

:xالرابط لا يعمل:x

عزيزي انت طبّق التعليمات ببرنامج المفكرة مبدئيا و احفظ الملف بامتداد htm

مثال : page.htm

حلو كتير كتير ... تابع انا معك !!

الموضوع حلو

وممكن اساعدك فيه

لانه في عندي معلومات كثيرة عن ال HTML

بس ليش توقفت عن الكتابة واكمال الموضوع ؟؟؟

مشكوووووووووووووووووووور يا ابو شريك

شكرا على هذا الدرس:lol:

مشكوووووووووووووووووووووو وووووووووووووووووووووووور ررررررررررررررررررر

شكرا على البرنامج

البرنامج رائع مع الشرح

شكرا على البرنامج