ابحث في مواضيع المجلة

Translate

‏إظهار الرسائل ذات التسميات مايكروسوفت اكسبريشن ويب. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات مايكروسوفت اكسبريشن ويب. إظهار كافة الرسائل

2015-06-17

6- مشهد الـ code الشيفرة | القليل من Microsoft Expression Web | html

عودة لـ فهرس المواضيع (    Microsoft Expression Web  )
الدرس السابق : ( Expression-Web )

سنركز في هذا الدرس على مشهد الـ شفرة Code



قد تحتاج إلى معرفة القليل من لغة 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

page Editor Options, page Editor Options,



page Editor Options, page Editor Options,


page Editor Options, page Editor Options,


سأفتح الآن صفحة 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- وسوم نصيةوهي تتعلق بالتعداد , جد درس خاص بها هنا :
الوسوم الأساسية للتعداد الرقمي والنقطي   )

الدرس التالي 7 (   Microsoft Web  )

2015-06-16

4- اختبار الموقع على العديد من المتصفحات |Microsoft Expression Web

فهرس المواضيع (    Microsoft Expression Web  )

الدرس السابق:  (  صورة | رابط تشعبي| المعاينة على المتصفح | جدول   )

ملاحظة: أي تنسيق تقوم به أعمل بعده (حفظ save ) قبل المعاينة.


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

1-انترنت اكسبلورر Internet Explorer
2-فيرفوكس Mozilla Firefox
3- قوقل كروم Google Chrome
4-آبل سفاري Apple Safari
5- أوبرا  Opera Browser


كيف أضيف متصفح غير موجود على اكسبريشن ويب؟
file
 preview in browser
Edit prowser list
Add
فيظهر مربع حوار
نسمي المتصفح الجديد
browse
لنجلب برنامج المتصفح الجديد , مثلا لو كان على قرص الـ c نذهب إلى مكانه programs files
نختاره
open
ok
نجده اندرج ضمن القائمة وينبغي علينا وضع علامة صح  ok


 adding different browsers - Edit browser list
Edit Browser List

How to add browser
Add browser

الدرس التالي: Microsoft Expression Web

2015-06-15

إنشاء ملفات داخل ملف الموقع | صفحات| صورة- Microsoft Expression Web

 

هنا نقوم بتطبيق ما تعلمناه في هذه الدروس
- انشئ موقع جديد 
- صورة | رابط تشعبي | المعاينة على المتصفح

التطبيق
أنشأت ملف على سطح المكتب وأسميته cool

Microsoft Expression Web For Dummies

من البرامج فتحت برنامج مايكروسوفت اكسيبريشن ويب
من قائمة site
new site
General
Empty site
Browse لجلب الملف الذي اسميته cool وهوعلى سطح المكتب
كلك مرتين
open
ok

سأنشئ الآن بداخله ثلاثة ملفات مهمة :
1) ملف الصور
 2) ملف css
3) ملف الجافا سكريبت   JS


وذلك من لوحة folder list حيث يظهر الملف الذي أعمل عليه
كلك يمين
new
folder
اسميه image
ثم نفس الطريقة واسمي الملف JS
ثم نفس الطريقة واسمي الملف css


Microsoft Expression Web For Dummies


سأنشيء صفحة رئيسية :
أيضا كلك يمين على الملف الأساسي
new
html
سأتركها كما هي defaul.html
سأقوم بنفس الطريقة لانشاء صفحتين أيضا
جيب الحرص على جعل الامتداد .html سأسميها    contact_us.html  وهي لـ (اتصل بنا)
والثالثة About_Us.html  وهي لـ (عن الموقع)



Microsoft Expression Web For Dummies
تعلم اكسبريشن ويب

ملاحظة: لفتح موقع موجود مسبقا , من قائمة site
open site
نجلبه من مكانه
open

الآن سأنشئ أرتباطات تشعبية اربط الصفحات ببعضها :
سأجعل الروابط نصية وسأبدأ بإنشائها في الصفحة الرئيسية
سأختار من اللوحة صفحة default والتي اعتبرها الرئيسية وساكتب بداخله 3 نصوص
Main page | Contact Us | About

Expression Web 4 Quick Reference Guide

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

Expression Web 4 Quick Reference Guide

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


سأجرب رؤية ما قمت به على المصفح :
file
preview in prowser
سأختار متصفح firefox
Ok

مايكروسوفت اكسبريشن ويب


سأضيف صورة إلى الصفحة :
يجب أن اذهب  إلى المجلد cool على سطح المكتب واضع الصورة قبل استخدامها في اكسبريشن ويب
ويجيب أن أضعها في مجلد الصور الخاص بها image
أذهب إلى مايكرسوفت اكسبريشن ويب وافتح مجلد الصور لاجدها
اسحبها
يظهر مربع حوار لكتابة نص بديل للصور و الوصف إن شئت يمكن تركها كما هي لكن الافضل كتابة اسم على الاقل للصورة لتجدها محركاته البحث في حال تم نشر الموقع
- ملاحظة / يمكن التحكم بحجم الصورة بسحب اطرافها

سأنشئ الأن رابط خارجي :
سأكتب في الصفحة الرئيسية نصا كالتالي :
اذهب على موقع صيد الفؤاد , وسأجعل الرابط على عبارة ( صيد الفؤاد )
insert
hyperlink
طبعا لن أدرج الصفحات الظاهرة في مربع الحوار
سأكتب في الفراغ عنوان الموقع الخارجي http://www.saaid.net
ثم ok
تطبيق الرابط التشعبي الداخلي
تطبيق الرابط التشعبي الداخلي

سأجعل الرابط الخارجي يفتح في صفحة جديدة وذلك :
كلك يمين عليه
خصائص الرابط Hyperlink Properties
Target Frame
New Window
Ok
Ok
فتح الرابط في نافذة جديدة
فتح الرابط في نافذة جديدة


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

2015-05-28

كيف أنشئ جدول من خلال برنامج مايكروسوفت اكسبريشن ويب microsoft expression web


Microsoft Expression Web 4 Step by Step, HTML5, HTML,


Sams Teach Yourself


Studio 4 Web Professional
تلوين خلفية الجدول
Microsoft Expression Web For Dummies
تلوين خلفية الجدول بواسطة برنامج مايكروسوفت اكسبريشن ويب



عادة إذا صممت في ويب اكسبريشن فإن ينشئ اسلوب ورقة انماط متتالية css , لذلك سأجعله يبدو يدويا فما ينشؤه في قسم الرأس سآخده إلى وسم الجدول كتطبيق فردي.

العمود الأول العمود الثاني
A D
B E
C F





بالنسبة للجدول السابق فهذا هو الكود الذي استخدمته له , مع العلم انه لا يوجد فيه تفاصل كثيره كثبات الخلايا, و نوع الحدود ..الخ
لاحظ أن الوسم الثنائي tr يرمز إلى الصف , وtd إلى العمود.

<body>
<table style="background-color: #FFFF00; width: 100%; width: 461px; height: 209px ; border: 1px solid #FF0000">
<tr>
<td >العمود الأول</td>
<td >العمود الثاني</td>
</tr>
<tr>
<td >A</td>
<td >D</td>
</tr>
<tr>
<td >B</td>
<td >E</td>
</tr>
<tr>
<td >C</td>
<td >F</td>
</tr>
</table>
</body>


هنا فيديو رائع يشرح طريقة إنشاء الجدول والتعامل معه في برنامج مايكروسوفت اكسبريشن:







Related Posts Plugin for WordPress, Blogger...