هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟

لنتابع
سنلقي نظرة نظرة على تنسيقات ملفات الصور الرئيسية الشائعة وعلى ميزاتهم
الفريدة بالاضافة الى نقاط القوة والضعف في كل واحد منهم
يسيطر على على الويب نوعان من ملفات الصور :
تنسيق تبادل الرسومات Graphic Interchange Format واختصارها
(gif) .
مجموعة محترفي الصور المترابطة Joint Picture Experts
Group واختصارها (jpeg or jpg) .
وكلا النوعين يملك مميزات مرغوبة للاستخدام في ويب .. فالتنسيق gif يعمل بشكل رائع مع الصور ذات الالوان الصلبة
القليلة ، والصور ذات الخطوط مثل الشعارات التي نصممها لتوضع في اعلى
الصفحة فعندما نقوم بتصميم شعار ما فانه سحتوي على خطوط صغيرة وكتابات
واحيانا الوانا فعندما نضغط هذا التصميم ونقوم بتصغير حجمه جدا يجب ان لا
يخسر اي شيء من موجودات الصورة ويجب ان يظهر تماما كما قمنا بتصميمة فليس
امامنا الا تنسيق gif ليحفظ هذا الشيء لنا .. وكذلك فان gif
تتعامل مع قصاصات الفيديو وايضا تتعامل بشكل جيد مع النصوص الصغيرة في
الصور وايضا له ميزة هامة جدا هو انه يقوم بضغط ملف الصورة وذلك حتى يختزل
حجمها ولكن من دون ضياع اي شيء منها لذلك يعتبر تنسيقا (Format) بدون ضياع
(lossless) .. كذلك عندما نقوم بتصميم الصور ذات الخلفية الشفافة فبالتأكيد
باننا سنحفظ هذه الصورة بالتنسيق gif لانه يسمح
لنا بذلك بينما التنسيقات الاخرى لا يمكن ان نقوم بها بهذا العمل .. وايضا
الصور المتحركة فبالتاكيد ان تنسيقها هو ال gif
لانها تتدعم الصور المتحركة بعكس التنسيقات الاخرى .. لكن ال gif تستخدم
لوحة الالوان الصغيرة ذات ال 265 مما يجعلها غير مناسبة لانتاج صور كبيرة
في جودة الصور الفوتوغرافية .
اما ال التنسيق jpg فإنه يعمل بشكل رائع مع الصور
ذات الجودة العالية مثل الصور الفوتوغرافية .. يمكنه تمثيل صور مشكلة من
16 مليون لون مختلف على الاكثر .. طبعا لا يمكنه ترجمة اي لون من الوانه
بشكل شفاف .. يستخدم تخطيط ضغط افضل من الذي يستخدمه ال gif . ويقوم بانتاج
ملفات افضل واصغر حجما من التي يستطيع gif انتاجها
هذا بالنسبة للصور الملونة لكن اذا اردنا تنسييق ملفات صور في الاصل تحوي
اللونين الابيض والاسود فان مخطط تنسيق الملف jpg لن يكون مناسبا لها عندها
تكون ال gif افضل .
ويبقى لدينا تنسيق ملف رسوم الشبكة المحمولة Portable
Network Graphice واختصارها هو PNG
هو تم استحداثه في وقت ما ليحل محل تنسيق ال GIF
ولكنه فشل لانه غير قادر على دعم تخزين الصور المتحركة لذلك لم يؤدي المهمة
التي انتج لالجلها نهائيا وهو أن يحل محل GIF ..
ولكنه بشكل عام يملك امكانية ضغط تفوق ال GIF
تتراوح بين 10 الى 30 بالمئة .. ويعتمد على لوحة الوان تحوي الوانا حقيقية
تفوق ال 16.7 مليون لون وهنا تفوق فيه على الغير وفيه ايضا دعم مخصص لدرجات
اللون الرمادي .
الى هنا اعتقد ان هذه النظرة الموجزة على التنسيقات بشكل عام كافية لتأخذ
فكرة عنها .
عندما تنشأ صورة وتريد اختيار تنسيقها او تريد تغيير نوع تنسيق صورة تتوجه
الى احد برامج الصور كالفوتوشوب مثلا عند ضغطك على ال حفظ الصورة save as
تحت كلمة file name يوجد كلمة format اذا اسدلت السهم بجانبها ستظهر لك
اختيارات التنسيقات كاملة كما هو موضح في الصورة التالية :

http://fwt.txdnl.com/4-10/j/o/jordan_am/yasminah10.JPG

لنتابع في الفقرة التالية ان شاء حديثنا عن ملفات الصور .
تحياتي

نسيت ان اورد ملاحظة في الفقرة السابقة عن
تنسيق ال PNG انه يملك ميزات شفافية اكثر من ال GIG ولكن مشكلته انه غير
مدعوم في جميع المستعرضات اي انه لا يعمل في المستعرضات الغير مدعومة به مع
ان شعبيته تتنامى بسرعة

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

كود HTML:
<img src="12.jpg" alt="شرح موجز للصورة" border="2" width="303" height="280">
انتبه جيدا للاتي واتقنه فهو يغيب عن اذهان بعض المصممين مما
يرهقهم
دائما ما ندرج صور في صفحات الويب ثم نقوم بكتابة نص بجانبها احيانا اريد
ان يبدأ النص المدرج بجانب من الحد العلوي للصورة او من الجانب الوسطي
للصورة او من الاسفل او اريد النص ان يحيط بالصورة كاملة يأخذ المعرّف img
داخل وسمه عدة سمات منها ال aling التي تحدد محاذاة الصورة ال aling تتضمن القيم LIFT و RIGHT هما يقومان بمحاذاة الصورة الى الهامش الايسر او
الايمن بينما يتدفق النص حول الصورة اخترت على سبيل المثال المحاذاة left فيصبح الكود هكذا :

كود HTML:
<img src="12.jpg" align=left alt="شرح موجز للصورة" border="2" width="303" height="280" >

لاحظ بداخله ال :

كود HTML:
align=left

وابدأ بالكتابة بجانب الصورة لتصبح هكذا :
http://www.freewebtown.com/jordan_am/yasminah25.htm

انظر كيف ان الصورة اتجهت للهامش اليساري من الصفحة وكيف انني عندما كتبت
بجانبها فإن النص احاط بها كاملا .. وكذلك لو اخترت القيمة RIGHT نفس
النتيجة باستثناء ان الصورة تتجه الى الهامش اليمني .
كذلك ال aling تحوي القيم التالية top و texttop و middle و absmiddel و baseline و bottom و absbottom .
قم مثلا بتجربة اعطاء السمة aling قيمة ال middle ستجد ان الكتابة بجانب الصورة تبدأ من المحاذاة
التي بمنتصف الصورة وهكذا قم بتجربتهم جميعا ...
هناك طبعا سمات اخرى كالفيديو وخرائط الصور سنرجئها الى حين دخولنا في
برنامج الفرونت بيج ان شاء الله .
اكتفي بهذا القدر عن الصور ومعرّف ال img لانتقل في الفقرة التالية ان شاء
الله الى بحث اخر وهو النماذج Forms.
تحياتي

السلام عليكم ورحمة الله وبركاته
كنت قد اوردت في نهاية الحديث السابق اني ساتكلم هنا عن النماذج Forms
ولكن عدلت عن الموضوع حيث ساورده ضمن سياق اخر ان شاء الله ..
الان باعتقادي انني اوردت اهم الامور المتعلقة ب ال html واعتقد انك الان
في طريقك لاتقان هذه اللغة ..وهناك بعض الامور اغفلتها اعود اليها في نهاية
هذا البحث ان شاء الله او اوردها ضمن لغات اخرى لان هناك تطورات وتطورات
حدثت واصبحت معتمدة عالميا .. وكلها تدعم لغة ال html وتساعدها و تمكن
المستعرض من عرض صفحاتك بكل ثقة واطمئنان من غير ان يكون فيه اخطاء .. ما
الذي يعنينا بكل هذا ؟!
الذي يعنينا ان صفحاتك التي سيتم عرضها على المستعرضات ستكون اكثر انتظاما
على جميع المستعرضات من غيراستثناء اي كالمسطرة .. وايضا لا ننسى مستعرضات
الاجهزة المحمولة وقارئات الشاشة فانا عندما اريد تصميم موقع ان يكون اسرع
تحميلا على مختلف الاجهزة فهذا كله كيف يتم .؟!
يتم عن طريق ال css ساقول لك انك في الدروس البسيطة الماضية انك كنت صانع
ويب بسيط ولكن مع ال css انت الان في طريقك الى الاحترافية والنجومية في
التصميم ..
اعلم ان الاشخاص الذين سياتون لرؤية موقعك وتصفحه يستخدمون جميع المستعرضات
الموجودة حتى وان كنت انت لا تستخدمها .. ومن ثم اذا انتقلت بعد احترافك
التصميم للعمل به فبالتاكيد انك ستقدم عمل لزبونك يكون تمام التمام وعال
العال على كل المستعرضات .. فكثيرا ما تقلق المصممين الاتصالات الصباحية
والمسائية من الزبائن بان هناك خطا قد حدث .
احيانا ان كنت تستعمل متصفح الاكسبلورر وتقوم بانشاء موقع ويب يظهر تماما
كما تريد وكما صممته .. لكن حاول ان تستعرض الموقع او الصفحة على متصفح
الفايرفوكس ستجد فروق كبيرة وان هناك بعض الاوامر لم يستجب لها المتصفح
فايرفوكس .. كيف يحدث هذا ولماذا ؟!
لان المستعرضات المختلفة كالفايرفوكس تعالج شيفرة html بطريقة مختلفة بمعنى
انه اذا كان لديك بعض اخطاء هنا وهناك في شيفرة ال html او استخدمت اللغة
بطريقة غير صحيحة فان بعض المستعرضات تكون متسامحة وتبذل قصارى جهدها
لعرضها بالطريقة الصح ولكن هناك مستعرضات اخرى كالفايرفوكس وال IE تعالج
شيفرة ال HTML بطريقة مختلفة . . فهي غير متسامحة مع الاخطاء التي في
شيفرتك ولا تكسب الرهان بعرض الموقع على كل المتصفحات بطريقة واحدة الا اذا
كانت شيفرتك خالية من الاخطاء نهائيا . وعندما نبدأ باضافة العرض التقدمي
CSS الى ال HTML سوف تزداد الفروقات حدة ااذا لم تكن شيفرة html صحيحة .
اذا طريق الخلاص هو التزامك بالمعايير ( Standard Compliant) .
ماذا نقصد بالمعايير "توحي كلمة معايير ان هناك شروط معينة لعملك متفق
عليها عالميا " ؟!
حتى تعرف ما اقصد لا بد ان نقوم بجولة معا عن تاريخ html واصداراته ..
اول اصدار لل html كان html 1.0.2.0 فكانت ايامها بدائية وكان كل شخص يملك
صفحة خاصة لم تكن تابه كثيرا للشكل معها المهم انها صفحة في الويب ..
ثم جاءت الحروب "حروب الستعرضات (Browser wars) " فقد دخلت المستعرضات
Netscape و Microsoft في حروب باردة من سيسطر منها على العالم ؟! حيث قامت
كل شركة باضافة ملحقات لتحافظ على تفوقها مما اوقع مطوري الويب بعملية
ارباك وبمشاكل لا حصر لها .. حيث كان المصممين يضطرون الى تصميم صفحتين
واحدة خاصة Netscape والثانية خاصة ب Internet Explorer ..
ولم تنتهي حرب المستعرضات الا عندما تدخلت في النهاية World Wide Web
Consortium لايقاف هذه الحرب وانقاذ ما يمكن انقاذه فقامت بتقديم خطة تقوم
على تنظيم العالم من خلال انشاء معيار html واحد وعلى الجميع ان يلتزم بها .
ماهي خطتها ؟ فصل بنية html عن العرض التقدمي وبذلك ظهرت لغتان احداهما
للبنية HTML 4.0 والاخرى للعرض التقدمي CSS واقنعت مصنعي المستعرضات انه من
الافضل لهم ان يتبنوا هذا المعيار .. وبالفعل عمل بالخطة هذه لكن مع بعض
التغييرات .
في عام 1999 دخلت HTML 4.1 وكانت الامور معها هادئة وكانت تعرض محتويات
صفحاتك على جميع المستعرضات بصورة حسنة .
لكن العالم طبعا في تطور دائم وخاصة التكنولوجيا يجب ان تتطور مع الحياة
فظهرت اخيرا ال XHTML 1.0
وهي تمثل اتحاد ال HTML مع لغة توصيف اخرى وهي XML .
والمولود هذا XHTML
ورث من والديه شعبية ال HTML وقابلية التوسع والصرامة من XML .. لفهمها
اكثر سوف نقوم فيما بعد بانشاء صفحات ويب باستعمال ال XHTML .
فانت عندما تقوم بكتابة لغة ال HTML القديمة فان المستعرض يستدعي وضعا
عنده يسمى " الوضع الغريب" وسبب تسميتها ان هناك الكثير من الاشياء
الغريبة التي قد تحدث على هذه الصفحات .
فيجب اخبار المتصفح مسبقا ماهي نسخة HTML التي تستخدمها حتى يعلم القواعد
التي يجب عليه ان يعملها لعرض الصفحة . كيف يتم ذلك ؟ ! الامر سهل ليس عليك
الا اضافة سطر واحد في اعلى ملفات HTML :

كود HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
تضاف في اعلى المستند هكذا

كود HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title> </title>
</head>

<body>

</body>

</html>
لنشرحها حتى نفهم ما ورد فيها ، لاحظ معي اننا افتتحنا قوس الوسم
> واتبعناه فورا باشارة تعجب !

كود HTML:
<!DOCTYPE
لاحظ ان هذا ليس عنصر HTML لاننا وضعنا اشارة التعجب بعد فتح قوس
الوسم وهو شيء مختلف عن عناصر ال HTML .. اذا هذه تخبر المتصفح نوع المستند
لهذه الصفحة .
ثم جاءت بعدها كلمة HTML وهي تعني ان HTML هي النصر الجذر لصفحتنا .
ثم كلمة PUBLIC وهي تعني ان المعيار هو HTML 4.01 متوفر بشكل واسع .
ثم : "-//W3C//DTD HTML 4.01 Transitional//EN" تبين لنا اننا نستخدم
HTML 4.01 وان هذا التوصيف مكتوب باللغة الانكليزية . هذه الجملة بالكامل
تفيد المستعرض اننا ملتزمون بالمعيار .
اذا نستنتج مما سبق ان HTML 4.01 تمثل معيار HTML الاكثر دعما بين
المستعرضات وهذا عندما نستعمل في الدروس القادمة ال CSS لا تظهر لنا اخطاء
في بعض المستعرضات او تظهر بشكل سيء .
بقي هنا شيء وهو اضافة العلامة <meta> في ال head وسوف نضعها كسطر
اول داخل العنصر head
فان كنت تستعمل اللغة الانكليزية في موقعك فعليك ان تضيف هذا السطر :

كود HTML:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1>
واللغة العربية

كود HTML:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
طيب الى هنا اعتقد انه كافي كمقدمة .. لنبدأ بمتعة التصميم وكما قلت
فانت الان فقط في طريقك الى الاحتراف في الفقرات القادمة ان شاء الله سنبدأ
بتصميم موقع معا .
ارجو ان يكون ما قدمته الان واضحا ويسير .
تحياتي

اعود من جديد لمتابعة الموضوع الرائع ,,

بالنسبة للرد رقم (71),,,

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

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

بالنسبة للرد رقم (73_72),,

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

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

بالنسبة للرد رقم (74_75),,,

اعتقد ان ما ورد في تلك الفقرتين عن الاصول المتبعة في اختيار الصور
والالوان , واخذ بعين الاعتبار المستخدمين الذين قد لا يملكون اجهزة
بمواصفات عالية او بتلك المواصفات التي نملكها نحن بمعنى مراعاة اختيار
(اللون والصورة) وتطبيق ما احتوت تلك الفقرتين من ملاحظات تهدف في النهاية
لايجاد موقع متزن باتزان الامرين ,, لهو السبيل الامثل للخروج من مغالطات
استعمال الالوان والصور ,,

ولا يسعني الا ان اقف وقفة تقدير لتبيان هذين الامرين وهذا ان دل على شيء
انما يدل على الحرص لتقديم معلومة كاملة خالية من النقص ,,

بالنسبة للرد (77_78_79),,

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

بالنسبة للرد (82),,

طبعا سوف يبدأ الاحتراف قريبا كما ذكرت صاحبة الموضوع باستخدام css وهنا لن
اتكلم كثيرا لوضح ماهية فالدروس المفصلة ستشرح لكم اهمية css ,,

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

اقل ما قد اقوله انه قريبا سيصبح لنا ارشيف رائع يخص عملية التصميم ومرجع
لا يمكن اغفاله والاستغناء عنه بل ادعوا كل ما لهم اهتمام او ان كان ما ذكر
موضوع تخصصه الاحتفاظ بتلك الصفحات فهي كنز في عالم التصميم ,,,

السلام
عليكم ورحمة الله وبركاته ..
لنبدأ بتجهيز البيئة المناسبة للعمل ..
اولا يجب ان يكون لديك برنامج ال EditPlus الاخ مجدي قام باحضار البرنامج
لنا جزاه الله كل خير .. اضغط على اللينك التاي وقم بتحميل البرنامج
وتثبيته .. السيريال نمبر مرفق بداخل الفايل ..

http://rapidshare.com/files/10260411...Hanchi2oOo.rar
بعد تثبيت البرنامج ستظهر لك ايقونته على الديسك توب كهذه :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah111

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah111

ما فائدة هذا البرنامج ؟ البرنامج هذا هو برنامج تحرير مستندات خاص بلغات
البرمجة .. استطيع ان انشىء على سبيل المثال بداخله ملف خاص بلغة ال php
وحفظه وتحريرها ايضا بامتداداها وغيرها من اللغات .. حاجتنا له هنا حتى
نستطيع ان ننشىء مستند css وفيما بعد من اجل ملفات الجافا سكريبت ايضا ..
لندعه الان جانبا وسنعود عليه لننشىء فيه اول مستند css .
لنتابع تجهيز بيئة العمل ..
قم بالتوجه الى مجلد My Documents ومنه الى مجلد My Web Sites ان لم يكن
لديك هذا المجلد قم بانشائه انت في داخل مجلد ال Documents وقم بتسميته ب
My Web Sites حيث سيكون هذا المجلد خاص بكل ما يخصك من تصميم المواقع :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah112

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah112

ايضا قم بنفس العملية بداخل مجلد My Web Sites وانشىء فايل اخر قم بتسميته
بما تريد فهو سيكون الفايل الخاص بموقعك الاول اسميته انا على سبيل المثال
web1 ... الان في داخل هذا الفايل الجديد سيكون عملنا وسننشىء الفايلات
الخاصة بموقعنا الجديد ..
في داخل فايل web1 ساقوم بانشاء مجلد وسنقوم بتسميته ب images

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah113

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah113

طبعا من المجلد واضح انه خاص بصور الموقع .. في اخر الموضوع يوجد فايل
مضغوط قم بتحميله وهو خاص بصور الموقع قم بفك الضغط وافرغ محتوياته في داخل
مجلد ال images هكذا يصبح لدينا الصور الخاصة بالموقع جاهزة .
الان سنبدأ بانشاء صفحة ال index الخاصة بالموقع .. ماهي صفحة الانديكس
ولماذا سميناها بهذا الاسم ؟
ال index هي الصفحة الرئيسية للموقع يجب ان يكون اسمها index عندما اقوم
برفع ملف الموقع الى سيرفر في الانترنت فان هذه الصفحة ستتمركز تلقائيا
لتكون صفحة البداية لموقعك الخاص .
قم بإنشاء مستند html من ال Notepad كما تعلمنا طبعا سابقا .. وسنبدأ بوضع
العناصر الاساسية فيها :

كود HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=1256">
<title></title>
</head>

<body>

</body>

</html>
طبعا سنعود لشرح هرم المستند .. الان قم بحفظ المستند كما هو مبين في
الصورة التالية :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah114

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah114

رقم 1 : عند كلمة save in نختار المجلد الذي قمنا بانشائه وهو web1 .
رقم 2 و3 : عند ال file name نضع اسم المستند index.html .
رقم 4 : نضغط save .

ستظهر الصفحة بالفايل هكذا :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah115

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah115

الان سنتوجه الى برنامج ال EditPlus 3 الذي قمت بتحمليه اضغط عليك دبل كليك
سيفتح معك البرنامج توجه الى كلمة file ومن ثم الى new ومن ثم الى others
كما هو موضح :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah116

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah116

عند الضغط على others ستخرج لنا نافذة فيها عدة لغات سنختار منها ال css
كما هو موضح :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah117

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah117

ثم نضغط ok .. ستفتح بالطبع صفحة فارغة في البرنامج الان سنحفظها فارغة كما
هي لاننا سنعود اليها بعد شرح ال css لنبدأ بالعمل بها ان شاء الله .
عملية حفظها سنتوجه الى كلمة file في اعلى البرنامج ونختار منها save as
ولنرى الخطوات التي سنقوم بها بحفظ المستند :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah118

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah118

رقم 1 : عند كلمة save in نختار المجلد الذي قمنا بانشائه وهو web1 .
رقم 2 و3 : عند ال file name نضع اسم المستند stylesheet .
رقم 4 و5 لا تغيير عليهم وانما دعهم كما هم وادرجت ارقام عندهم لتلاحظ عند
كلمة save as type ستحفظ لنا الملف بامتداد ال css .
اضغط save توجه الى الملف ستجد ان مستند ال css قد ظهر عندك في المجلد
كالتالي :

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah119

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ - صفحة 2 Yasminah119

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

» كيفية انشاء موقع خاص لك على النت مجانا
» تريد ان يكون لك منتداك الشخصي ؟ تفضل
» للمغاربة "موقع هام جدا"
» تصميم موقع خاص بالتعريف عن الرسول صلى الله عليه وسلم
» درس تصميم موقع بالفوتوشوب بالتفصيل الممل