div هو وسم ثنائي , يُستخدم للتقسيم. حيث يسمح لنا بتقسم الصفحة في الجسم body
ممكن أن يكون هناك قسم للشعار , وقسم للأيقونات الاجتماعية , والمحتويات , banner, والشريط الجانبي الأيمن والشريط الأشفل , والـ footer .. الخ.
سنقوم بعمل 4 أقسام:
1- العنوان banner
2- خط الجانب الأيسر left hand side bar
3- المحتويات content area
4- القدم footer
لتطبيق الأقسام سأضع في الجسم :
<div> </div>
<div> </div>
<div> </div>
<div> </div>
سأكتب بداخلها :
<div> أهلا وسهلا بكم</div>
<div> هنا الجانب الأيسر </div>
<div> المقالات</div>
<div>أسفل الصفحة </div>
لحد الآن تبدو كأنها نصوص عادية
لتعريفها أكثر وإيضاح أنها أقسام بالفعل سنتحاج إلى سمةالهوية
id=""
ومعروف أن السمات تُكتب داخل وسم الفتح , سنقوم بتسمية هويات الأقسام أي اسم , لكن الأفضل باسم القسم المعني:
<div id="banner"> أهلا وسهلا بكم</div>
<div id="sideBar"> هنا الجانب الأيسر </div>
<div id="content"> المقالات</div>
<div id="footer">أسفل الصفحة </div>
تساعد الهويات على إعطاء صفات للرأس , للجانب ..الخ.
كالعرض , واللون .. لذا سنحتاج إلى معرفة شيء عن css .
هناك أيضا عنصر (وسم ) اسمه span وهو تقريبا يعمل كـ وسم div
كلاهما يصيغان قسم فريد , وكلاهما يحتاجان إلى سمة هوية id للتسمية كما تسمى البنايات في الحي.
لكن الفرق هو:
- أن dive هو على مستوى الـ block بُنية
- أن span هو على مستوى الأسطر
على سبيل المثال لنستبدل الوسم السابق div بـ span
<span id="banner"> أهلا وسهلا بكم</span>
<span id="sideBar"> هنا الجانب الأيسر </span>
<span id="content"> المقالات</span>
<span id="footer">أسفل الصفحة </span>
النتيجة أن العبارات اصبحت على سطر واحد, أي نعم أصبحت كل عبارة في قسم لكن ليس على شكل (كتلة) .
هناك ما يسمى بـ attributes أي (سمات) بعبارة أخى خصائص الوسم.
name="value"
أي اسم السمة ثم يساوي ثم بين علامتي تنصيص القيمة سواء قيمة عددية أو نصية كعنوان موقع أو اسم ملف صفحة
سمة رابط :
يحتاج وسم الرابط إلى سمة أي خاصية , وهذه السمات عادة تكتب داخل وسم الفتح , وبعدها علامة يساوي = ثم التنصيص الذي يُكتب بداخله "القيمة" كـ عنوان الصفحة المراد ربطها بالنص.
مثال:
<ahref="index.html"> أهلا وسهلا</a>
أي أن عبارة أهلا وسهلا أصبحت رابط .
حيث href تخبر المتصفح أين يذهب الزائر عند الضغط على الرابط
كذلك الحال عن الرغبة في ربط موقع خارجي لكن سنستبدل الصفحة index.html بـ عنوان الموقع الخارجي
مثال:
<ahref="http://www.w3schools.com"> موقع برمجة</a>
من الأخطاء التي قد يقع فيها البعض هي نسيان علامتي التنصيص.
سمة فتح الرابط في نافذة جديدة :
- تكتب هذه السمة أيضا داخل وسم الفتح بعد الرابط
- السمة هي target="_blank"
انتبه للشرطة التحتية قبل كلمة blank
وسم الصورة :
img وهي سمة ثنائية أي لها فتح وإغلاق
- لدى وسم الصورة سمات وهي سمة المصدر ثم يساوي ثم بين علامتي تنصيص القيمة
عندما تكتب src في مايكروسوفت اكسبريشن تظهر علامة صغير تلقائيا لجلب صورة من الجهاز
مثال:
<img src="../ويب/punctuation.png"> </img>
هناك ملاحظات : أنه لا يوجد محتويات بين وسمي الصورة الفتح والاغلاق لان التطبيق اصبح داخل وسم الفتح
على وسم إغلاق الصورة حيث يمكن إغلاقها ليس بوسم الاغلاق
</img>
وإنما يمكن وضع شرطة مائلة داخل وسم الفتح نفسه بعد مسافة بسيطة مثال:
<img src="../ويب/punctuation.png" />
لكن قد لا تعمل الطريقة الثانية مع كل المتصفحات
لربط رابط بالصورة , سيكون نفس طريقة ربط النص , ولكن بدلا من النص نجلب الصورة
تذكر طريقة ربط النص هنا
<ahref="index.html"> أهلا وسهلا</a>
ما ستقوم به الآن هو: (كتابة وسم الصورة داخل وسم الرابط)
كتابة وسم الرابط ثم بداخله
بدلا من عبارة أهلا وسهلا ستطبق كود الصورة
وسم الصف tr أيضا ثنائي وهو اختصار لعبارة table row
وسم العمود td أيضا ثنائي لـ لبيانات الخلية وهو اختصار لعبار table data وسم th وهو أيضا للصف الريئسي (لست مضطرا لاستخدامه) لـ رأس الخلية وهو عادة يُستخدم للأعمدة الأولى وهو اختصار لـ عبارة table header
مثلا لإنشاء 3 صفوف في الجدول ستحتاج إلى كتابة الوسم الثنائي tr ثلاث مرات فتحا وإغلاقا
<table> <tr> </tr>
<tr> </tr>
<tr> </tr>
</table>
إلى الآن أصبح الجدول يحتوي على صفوف , إذا هي محتويات وسم الجدول .
فسيكون الجدول كالتالي :
لو لاحظت النصوص في الصف الأول (فواكة , خضروات, الحلويات, اللحوم) ليست بالضبط كما في الجدول السابق فهي تبدو هنا أكبر
الفواكه
الخضروات
الحلويات
اللحوم
برتقال
كوسة
شوكلاته
دجاج
موز
كزبرة
دونات
سمك
طبعا كانت تلك الطريقة يدوية لمعرفة وسوم إنشاء جدول , مع العلم أن ما يميز مايكروسوفت اكسبريشن هو وجود قائمة اسمها table خاصة بالجدول ولونه وعدد صفوف.. الخ
قد تحتاج إلى معرفة القليل من لغة html وهي لغة سهلة للتعلم. لا تقلق لست مضطرا إلى اتقاها فقط القليل منها.
على الأقل من 20 - 30 وسم من وسوم html
وبعض قواعد كتابة html .
لنتأكد من إعدادات مايكروسوفت اكسبريشن ويب للصفحة المنشأة سنزيل علامة صح من 3 مربعات ألا وهي:
من قائمة tools
page editor options
intellSense
- في قسم Auto insert
أزل علامة الصح من مربعي
clost tag
HTML attribute value quotes
- في قسم Code Hyperlinks
أزل علامة الصح من المربع الأول
Enable Code Hyperlinks for following elements
Ok
سأفتح الآن صفحة index الرئيسية
تذكر أن لديك مشهدين
- مشهد التصميم design
- مشهد الكود code
مشهد التصميم design - مشهد التكويد code
سأضغط على الـ code لتظهر لي الشيفرة المُعدة افتراضيا, سأحددها , ثم امسحها.
عليك أن تفهم هناك نوعين من وسوم html وهما :
1- التركيبية أو (البنيوية) Structural tags
مثل سوم البنية الأساسية للمنزل , اسميته منزل لانها كأعمدة تركيب المنزل. وهنا أعمدة إنشاء الموقع الاكتروني.
2- المعنوية أو (اللفظية) Semantic tags
مثل وسم النص , وسم العنوان , وسم التعداد | أي تلك التي لها علاقة تقريبا بـ texts النصوص.
الوسم tag : هو عبارة عن كود يخبر المتصفح ما يقوم به العنصر.
- وله فتح وإغلاق
مثلا وسم المقطع لكتابة جملة أو نص هو التالي :
<p> </p>
تغلق الوسم بـ slash أي الشرطة المائلة
تحصر النص أو المقطع بداخل هذين الوسمين . مثال:
<p> أهلا وسهلا بكم </p>
وسم العناوين الرئيسية هو :
<h1> </h1> وكل ما يكبر الرقم , يصغر الخط .
الوسو التركيبية أو (البنيوية) Structural tags
علينا معرفة أهم الوسوم البنوية الأساسية , وهي : الشسفرة الرئيسة html الرأس head , الجسم body
ما تبدأ به عادة عند تصميم أي صفحة نتية بلغة html هنا ( الوسوم البنيوية )
- لا يهم الفراغات البيضاء في صفحة الشيفرة فهي للتصميم فقط. .
- أي شيء تضعة في الرأس فسيكون في المتصفح. مثلا : لغة التنسيق css , العنوان على الشريط , الكلمات المفاحية
- أما ما تضعه في الجسم فهو الذي يراه الزوار . مثلا المحتويات كالمقالات والجداول والعناوين الرئيسية , والصور
داخل الرأس head :
وسم العنوان الظاهر على شريط المتصفح ولا أعني عناوين المقالات الظاهر في الصفحة.
<title> </title>
- طبعا ما ذكرت هو عندما تنشيء صحة بشكل يدوي , أما ما يميز ويب إكسبريشن هو أنه في حال نسيت مثلا وسم الإغلاق فسيخبرك بوجود خطأ في شيفرتك بظهور الوسم باللون الأحمر محددا بالأصفر.
الفرق بين وسوم البنية , والمعنى هو :
البنوية : تعرف التركيب للشيفرة والـ outline
المعنوية : تعرف المحتويات
- لا يمكن أبدا أن تكون الوسوم المعنوية بداخل وسم قسم الرأس head
- يمكنك من خلال برنامج microsoft expression web أن تكتب في مشاهدة design وتراها في مشاهدة code
وسوم القائمة :
النوع الأول: وسم التعداد الرقمي ol
النوع الثاني: وسم التعداد لكن بدون أرقام ul فقد يكون نقطي
وبداخلها لكل تعداد il- وسوم نصيةوهي تتعلق بالتعداد , جد درس خاص بها هنا :
( الوسوم الأساسية للتعداد الرقمي والنقطي )
سنبدأ بالعمل على المشروع ..
لنجعله موقع فارغ.
ونبقي على والملفات
سننشيء صفحتين فقط
الرئيسية
و ال index
سيكون لدينا مراحل لتطوير هذا الموقع , وإذا كنت شتنشئ تصميمك الخاص ستحتاج إلى خطة تتبعها.
لا تقلق على التصميم , ما تقلق عليه هو المحتويات (صور , معلومات , جداول )
عادة يجب أن تحضر ( الصفحة الرئيسية , اتصل بنا , عن الموقع , المنتجات ... الخ )
عليك أن تأخذ بعين الاعتبار 3 أمور من جمع المحتويات و كيف ترتب المحتويات و العمل على المخطط
لن تحتاج إلى موهبة فنية لتصمم مظهر موقعك كل ما تحتاجه معرفة الأقسام الأساسية وأماكن تعيينها.
إجراءات :
1- تركيب الصفحة html
2- المحتويات ( النص , الصور, الروابط )
3- الأسلوب css
نتعلم كيف نضيف نص , صور , روابط تشعبية نصية وصورية , روابط داخلية أو خارجية , جداول
بالنسبة للكتابة , سنفتح الصفحة التي أنشأنها لنجرب الكتابة فيها.
ملاحظة:
إذا كنت تريد نسخ نص من مايكروسوفت وورد وكان منسقا بـ الألوان وأحجام الخطوط ..الخ. وانت لا تريده منسق فيمكنك لصقه على المفكرة notepad ومن ثم تنسخة المفكرة إلى برنامج مايكروسوفت أوفيس. (ليكون خال من الألوان والتنسيقات الأخرى)
إضافة صورة لصفحة ويب : (طريقتين)
قبل أن تضيف أي صورة لصفحة ويب يجب أن تكون محفوظة في ملف الصور.
الطريقة الأولى:
لذا سأذهب إلى مكان ملف الموقع والذي بداخله ملف الصور لاضع صورة بداخلة, ثم أعود لبرنامج اكسبريشن ويب لاجدها في الملف تلقائيا, وإن لم نجدها نختار من قائمة view الخيار refresh . ولكن انتبه قبل عمل refresh يجب أن تكون قد ضغطت على الملف المعني وهو ملف الصور حتى لا تذهب تنسيقاتك الأخر. لان هذا الخيار هو للتجديد.
الطريقة :
نسحب الصورة من الملف إلى مكان العمل على الصفحة.
فيظهر مربع حوار Accessibilty Properties
Alternate text النص البديل , وهو جيد لمحركات البحث لتعرف مسمى الصورة.
Long description الوصف الطويل: إن شئنا يمكننا كتابة وصف أطول للصورة أو تركه فارغا
نضغط Ok
فتندرج الصورة:
الطريقة الثانية :
من قائمة from file < picture < insert
( ثم نختار الصورة من المكان المحفوظة فيه )
الرابط التشعبي : قد يكون الرابط داخلي أو خارجي فالداخلي يخص صفحات موقعك والخارجي لمواقع أخرى.
(روابط داخلية : أي تربط صفحات من داخل الموقع ذاته )
- قبل القيام بذلك سننشئ مزيدا من الصفحات , سأنشئ صفحة (حول ) واسميها about.html
- يمكن جعل الرابط على النص , أو الصور
- مثلا سأكتب الصفحة الرئيسية ثم اضع شرطة أو خط عمودي مثلا هكذا:
الصفحة الرئيسية | عن موقعنا | اتصل بنا
ثم أعلم على عبارة ( الصفحة الرئيسية ) لاجعلها رابط .
من قائمة insert - ثم نختار hyper link
حدد العبارة - hyperlink - insert
ليظهر مربع حوار يوجد بها الصفحات التي أنشأناها داخل ملف الموقع , وعليه فإن نص ( الصفحة الرئيسية ) سأختار له صفحة index.html
ملاحظة:
إذا اخطأت وأردت الرجوع حركة فستجد زر التراجع من قائمة Edit - ثم undo Typing
وكذلك الحال مع بقية النصوص لجعلها على شكل رابط.
النصوص السابقة التي ربطنها تشعبيا هي صفحات أساسية لذا سأنسخها وأنقلها إلى الصفحات الاخرى .
كيف أرى ما قمت به على المتصفح ؟ file breview in prowser نختار المتصفح الذي نريد ان نرى عليه
إنشاء رابط خارجي :
- نحدد النص
- insert
- hyperlink
- يظهر مربع حوار بدالخه صفحات داخلية , لكننا لا نريدها بل سنلصق مكان العنوان عنوان الرابط الخارجي.
- ok
نلصق رابط الموقع الخارجي ثم نضغط ok
كيف اجعل الرابط يفتح في صفحة جديدة مع بقائي في نفس الصفحة ؟
ساضغط على الرابط كلك يمين
- hyperlink properties
- target frame
- new window نافذة جديدة
- ok
- ok
يمكنك معاينة الحركة على المتصفح بعد الحفظ , file -save
file -preview in prowser
كيف أجعل الصورة على شكل رابط ؟
إذا أردنا جعلها رابط تشعبي فإننا نضغط عليها وبنفس الطريقة من قائمة insert
Hyperlink
نلصق عنوان الموقع في الفراغ
وليفتح في نافذة جديدة
Target fram
New Window
Ok
Ok
تستخدم الجداول لهدفين :
- وضع المعلومات في صفوف وأعمدة
- للتصميم Layout أي إن الصفحة عبارة عن صفوف وأعمده فالصف الأول مثلا نجده فيه الرأس header والصف الوسطي للمحتويات و الأعمدة الجانبية و الصف السفلي للـ footer .
كيف ننشئ جدول ؟
من قائمة table
insert table
تظهر نافذة لملئ معلومات كعدد الصفوف rows وعدد الأعمدة columns
مثلا سأجعل عدد الأعمدة 3 وعدد الصفوف 4
نملأ الجدول بالبيانات
نسحب أطراف الأعمدة لتصغيير الحجم
لا تقلق من حجم الجدول والاعمدة لانها إلى الان تتغير بحجم النص سنتعلم كيف نثبتها في الدروس القادمة .
نتعلم في هذا الدرس : أن الموقع عبارة عن مجموعة ملفات داخل ملف رئيسي
كيف ننشئ موقع جديد من خلال برنامج مايكروسوفت اكسبريشن ويب. والذي يتطلب ملف أساسي .
كما نتعلم كيف ننشيء ملفات أخرى للموقع لترتيب ملف خاص بـ الصور وورقة التنسيق scc , وملف الجافا, والصفحات ..الخ.
html = تركيب الموقع structure
css = التنسيق presentation
JS = الحركة action
إنشاء الملف الرئيسي : هناك فيدوات مفيدة تشرح طريقة عمل والتعامل مع مايكرسوفت اكسبريشن ويب ومنها قناة Joshua Kywn حيث يُقدم لنا 21 , أول فيدو عبارة عن مُقدمة عن البرنامج والهدف منه وما إلى ذلك , لذلك سأبدأ بالتعليق على الفيديو الثاني :
التعليق على الفيديو :
-
يشرح طريقة التعامل مع القوائم وتثبيتها بالضغط على علامة الدبوس دون
إزالتها وذلك يُتيح لك مزيد من المساحة مع إبقاء تلك اللوحة لحين الحاجة
لاستخدامها.
- collapse أي : يسقط , ينهار ,collapsed هابط , واقع
- ما يهم معرفته أولا في اكسبريشن وب هو إنشاء موقع , ومعرفة إنشاء صفحات بداخله .
- كل موقع يجب أن يكون بداخل ملف مثلا اسمه Local stite folder أو كما يسميه البعض local root folder
مثلا: سأذهب إلى سطح المكتب وأنشئ عليه ملف فارغ اسميه sample site
سيكون هو الملف الذي نضع بداخله كل ما يخص موقعنا الذي سننشؤه.
- نعود إلى برنامج اكسبريشن وب , ومن قائمة
site
new site
general
Empty site
لجلب الملف الذي أنشأناه من مكانه مثلا كما انشأته على سطح المكتب Browse
نضغط دبل كلك لتأكد أن ما سنقوم به سيكون داخل الملف الذي اخترناه
open
ok هنا نجد الملف في لوحة (قائمة الملف)
Folder list
- لاحظ أنك إذا ضغطت على لوحة folder list ستجد الامتداد الكامل لمكان هذا الملف. والذي يُسمى الملف الفرعي أو المحلي.
- أسوأ ما قد تقوم به عند العمل على إنشاء موقع هو إضافة صفحات وصور بشكل غير مرتب لذا فيُقترح بإنشاء ملفات لترتيب الصفحات والصور.
إنشاء الملفات (ملف صور) , (ملف ورقة أنماط css), (ملف الجافا سكريبت JS ) :
-يمكننا
إنشاء هذه الملفات بالذهاب إلى الملف الذي أنشأنها أو يمكن القيام بذلك من
داخل برنامج مايكروسوفت اكسبريشن وب أيضا. وذلك من خلال اللوحة المخصصة
للملفات وهي
folder list
كلك يمين على اسم الملف
جديد new
ملف folder
ثم نسمي الملف , مثلا سنسميه images وسيكون مخصص للصور
- إن شئت فإنه بالإمكان أيضا فتح ملف الصور وفتح ملفات أخرى بداخلة للترتيب.
- بنفس الطريقة سأنشئ ملف واسميه css, ملف مهم خاص بأكواد أوراق الأنماط سنتعلم عنه لاحقا.
- أيضا سأنشئ ملف مهم واسميه javascript أو باختصار JS
وهكذا يمكننا انشاء ما نشاء من الملفات كتلك الخاصة بالمستندات وغيرها.
إنشاء صفحة : والآن سنحتاج إلى إنشاء صفحة لموقعنا, فكيف ذلك؟
- بنفس الطريقة السابقة لكن سنختار HTML
folder list
كلك يمين على الملف الرئيسي
new-->HTML
-نسميها index.html لاحظ أن الامتداد هو نقطة ثم html
إنشاء صفحة داخل ملفات الموقع
قوانين التسميات:
- يجب أن تكون الأسماء للملفات والصفحات بالحروف الصغيرة .
- قد تسبب الأحرف الكبيرة مشاكل لذا يجب الابتعاد عن استخدامها.
- يمكن استخدام الارقام - يمنع استخدام المسافة بين كلمتين
- ابتعد عن الرموز (كالنسبة المئوية , والدولار ..الخ)
- هناك رمزين فقط يمكن استخدامهما في التسمية هما الداش /, و الشرطة التحتية فقط_ . رغم ذلك ينصح بتجنبهما لانهما تأخذان مساحة من اسم الملف, أو اسم الصفحة.
- تُعد HTML اللغة الأساسية التي نستخدمها لإنشاء تركيب صفحاتنا.
- في سلسلة الفيدوهات هذه سنتعاملة مع 3 لغات مختلفة, وبشكل أساسي HTML و CSS , وقليلا من Javascript -هناك أربعة خصائص لأي موقع ويب :
1- الخصائص التركيبية . (مثلا سيكون التركيب هنا HTML )
2- مظهر الموقع (وهو يتعلق بـ css )
أ- التنسيق ب-الموضع (مكان التنسيق)
3- المحتوى ( المقالات , الروابط, الصور , المستندات..الخ)
4- الحركة action , ما يحدث عن ضغط الأزرار وهكذا , وغالبا هذا يخص الجافا سكريبت JavaScript .
لماذا نستخدم الامتدادات عند تسمية الصفحات والمستندات ..الخ ؟
الامتداد هو ما يُخبرنا بنوع المستند. مثال
page.html صفحة نوع امتدادها html
here.PDF ملف امتداده pdf
وهكذا.
لذا عند إنشاءصفحة ويب تركيبها هو لغة html :
يجب أن نكتب اسم الصفحة ثم نقطة ثم html
عند إنشاء صفحة تنسيق بلغة css
يجب علينا بعد تسميتها أن نكتب نقطة ثم css
عند إنشاء صفحة بلغة الجافا سكريبت
نسميها ثم نقطة ثم نكتب الاختصار js
يمككنا تسمية صفحات الويب أي اسم نريد , لكن عادة فإن الصفحة الرئيسية يجب أن يكون اسمها index.html
قلة من المواقع تسمي الرئيسية default.html أو home.html
* * واجهتني مشكلة في الروابط التشعبية لذلك سأدعها default كما هي
عندما نتنتهي من العمل على الموقع :
من القائمة site
close
يوجد في قائمة ملف file زري open و close
لكتهما لاغلاق صفحات ويب أو إغلاق ملف ما.
لكن ما ذكر عملة من قائمة site هو لإغلاق الموقع بأكملة وليس فقط الصفحات.
الفرق بين قائمتي site و file :
هي أن قائمة site تساعدك على إنشاء موقع .
أما file فهي عادة لإنشاء صفحات أو ملفات , وليس لها علاقة بإنشائ موقع كامل.
وعليه لفتح موققع قد أنشاته أذهب إلى قائمة site
open site
إذا أردت حذف الموقع من القائمة ولم ترد العمل عليه بعد ذلك:
site
manage site list
remove
done
أي موقع ستعمل عليه سيكون مضافا تلقائيا لقائمة المواقع ,
لكن بنفس الطريقة إن شئت فيمكن إضافة موقع جدي بتعليم علامة الصح أو إن لم تكن موجودة بالضغط على add
ثم اختيار الملف الرئيسي للموقع الجديد لبدء العمل أو التعديل عليه.
ستجد بعض المعلومات التالية بعضها وليس كلها مُترجمة من أحد المصادر المُشار إليها:
ما الذي يقوم به الإصدار الأخير من مايكروسوفت اكسبريشن ويب؟
يقوم بإنشاء أو تحرير صفحات الويب
يمكن تحديثه إلى أحدث حزمة خدمة / تحديث
يقوم بإنشاء أو تحرير النصوص
من خلاله يمكن إنشاء وتحرير، واختبار CSS
الاتصال بأي من مواقع الويب الخاص بك أو الشبكة الداخلية
يقوم بإنشاء ملفات HTML أو CSS محلية
يمكن اختباره مع العديد من المتصفحات متعددة مع بنقرة واحدة
يمكن من خلاله إنشاء قوالب.
في حينكانالسابق منه هومايكروسوفتفرونت بيج،فليس هناكتشابه فيالخصائص والقدرات. حيث يتفوق مايكرسوفت إكسبرشن بكثير على مايكروسوفتفرونت بيج.
منتج مُستقل مُفيد لتصميم صفحة الويب :
ليس جزءا من مجموعة مايكروسوفت أوفيس إلا أنه مُنتج مستقل مُفيد لتصميم لصفحات الويب.
أعترف أني كنت مستخدم لبرنامج فرونت بيج ويب مؤلفا وناشرا أدوات. بالرغم أنه لم يكن مثاليا إلا أنني استخدمته لسنوات. الآن قد عزلت مايكروسوفت المنتج لأكثر من عدة سنوات. إن بديل فرونت بيج أفضل منه بألف مرة. كان على المنتج أن يكون مثل فرونت بيج حيث لا يُمكن أن يُنافس بمميزات أدوات نشر وتحرير مواقع الويب. كما علينا ألا ننسى أن امتدادات فرونت بيج غير الشهيرة أنها كانت لا يجب أن يتم تنصيبها على خادم ويب لأجل أن يعمل الفرونت بيج بشكل لائق. حتى وإن تم تنصيبها فإنه لا يمكن الاعتماد عليها وطالما قادة إلى التشويش و أشياء لا تعمل كما هو مُتوقع.
إن مايكروسوفت إكسبريشن ويب يُعد بديلا ممتاز. على الرغم بإنها ليست أخبار حول جودته وإصدراه إلا أنني ظننت أن علي أن أضيفه لـ (لهب بيجز) لأنه بدا أنه لطالما تذمرت من مايكروسوفت كما يفعل العديد, أو لربما كنت أحد هؤلاء الأشخاص الذين كانوا ضد التغيير. على العكس, لست ضد التغير إلا أنني أؤمن بالمقولة"إن لم يكن مكسورا فلا تصلحه". بدا شريط القوائم بالنسبة لي جيدا ألا أن فرونت بيج موهن في الواقع. رقم واحد, لا توجد امتدادات تحتاج جانب الخادم.
العديد من الخصائص المفيدة في إكسبريش ويب :
لدى اكسبريشن العديد من الخصائص التي قد أدرجها في المستقبل ولكن في الوقت الحالي, أعرف أن بإمكاني ذكر القليل من أنها التغييرات التي وجدتها جيدة جدا. لم تكن امتدادات فرونتبيج إلا مُعرقلة وثقيلة. كانت في كثير من الأحيان تقوم بهذه الأشياء. أيضا هناك إضافة جذابة في مايكروسوفت اكسبريشن ألا وهي المقدرة على إضافة العديد من أنواع البرمجة وبالتالي إمكانية التعرف على ملفات و امتدادات شيفرة PHP.
بدء العمل على اكسبرشن ويب:
عندما نفتح برنامج اكسبرشن ويب سنجد أمامنا لوحات العمل. إن لم تجدها يمكنك إظهارها بالضغط على تبويب panels
من هذه الإلواح :
1- اللوحة الكبيرة . توجد في الوسط , والتي عادة سننشئ بها صفحة الوب.
2- لوحة صندوق الأدوات toolbox وهو الصندوق الذي توجد به الوسوم.
3- لوحة تطبيق الأنماط apply styles وهي أنماط css
4- لوحة قائمة الملف Folder List وهي اللوحة الخاصة بـ الصفحات النشطة.
5- لوحة خصائص الوسم Tag Properties وهي اللوحة الخاصة بإضافة سمات إلى الشفرة نفسها.
يُعد إنشاء موقع ويب في اكسبرشن وب كـ (مجلد ) توجد به كل الملفات اللازمة لانشاء صفحات وب مُترابطة ببعضها. قرص صلب = خادم أقصد أنك قد تعمل على ملفات صفحات الويب في كمبيوترك فتحفضها على قرص صلب لكنها في الحقيقة لم تظهر بعد على الانترنت حتى تنقلها (تودعها) إلى خادم.
كيف أقوم بإنشاء موقع جديد ,أو أفتح موقع موجود , أو استيراد محتوى من خلال برنامج اكسبريشن وب ؟
باستعمال قائمة موقع site .
هل أستطيع تنسيق صفحة ورقة أنماط مُتتالية css من خلال برنامج مايكروسوفت اكسبرشن ويب ؟
طبعا ! فهذه احد مميزات هذا الرنامج. وذلك من :
- ملف file
- جديد new
- صفحة page
* فيظهر مبربع حوار جديد new
- تخطيطات Css Layout
إدراج رسوم من خلال برنامج اكسبرشن ويب:
عادة وعند إدراج صورة ما في اكسبرشن وب فإن وسم <a> سيظهر تلقائيا.
أهم نقطتين هنا بخصوص الصور هما:
1- معرفة استيراد مجلد صور.
2-وضع صور في صفحة.
3- إضافة صورة خلفية للقسم.
ملاحظة : من مميزات برنامج اكسبريشن أنه يظهر رمز مثلث بداخله علامة تعجب عند وجود خطأ في الأكواد وتجد تحت الوسم الخاطئ خط أحمر متعرج أما إن لم يجد خطأ فستظهر علامة نوته خضراء تعني ان الأكواد سليمة.
