طرق تصميم موقع نت الجزءالتاني
2 مشترك
}!{ مــ،ــنــ،ـتــ،ـديــ،ــات شــ،ـبـ،ـاب الـ،ـسـ،ـاويــ،ـة }!{ :: ۩۞۩ •° الــــقــــســــم الــــتــــقــــنــــي °• ۩۞۩ :: مـنـتـدى جـديـد الـتـكـنـولـوجـيـا
صفحة 1 من اصل 1
طرق تصميم موقع نت الجزءالتاني
الارتباط التشعبي ، هو ربط صفحة او ملف بصفحة أو ملف آخر ، عندما يضغط الزائر على الارتباط ، فإن صفحة أو ملف سيعرض ، فإذا كان الملف صفحة انترنت ، فإن المتصفح (انترنت اكسبلورر ) سيفتح الصفحة ، وأما إذا كانت ملف فيديو فإن برنامج الميديا او الريل بلاير سيعمل. والارتباط التشعبي يمكن أن يكون وصلة ل:
• صفحة في نفس الموقع
• صفحة خارج الموقع
• ايميل
• سطر في نفس الصفحة
يمكن إظهار نبذة عن الارتباط على الشاشة ، بالضغط على الزر screenTip… ، عند تغيير خصائص الارتباط كما في الشكل أدناه ، الذي يوضح نافذة تغيير خصائص الارتباط التشعبي.
العرض:
سنجعل من جملة اضغط هنا ، ارتباطاً لصفحة الأخبار الموجودة في نفس الموقع.
عرض فلاشي
ملاحظة
الارتباط التشعبية لن تعمل ، إلا إذا كانت الصفحات أو الملفات الموصولة ، تحت مسمى انجليزي ، لذلك قمنا بتغيير اسماء ملفات الصفحات إلى الانجليزية
html
<a href="news.htm">اضغط هنا</a>
--------------------------------------------------------------------------------
خصائص الصفحة:
في هذا الدرس سنتعلم كيفية:
• تغيير عنوان الصفحة
• تغيير خلفية الصفحة
• تغيير اتجاه الصفحة ليكون من اليمين إلى اليسار
• تغيير تشفير الصفحة إلى العربية
من أهم خصائص الصفحة:
- اتجاه الصفحة فالخيار الافتراضي هو من اليسار إلى اليمين ، ولكي تظهر النصوص العربية بشكل مرتب ، يجب أن نغير من اتجاه الصفحة ليكون من اليمين إلى اليسار.
- تشفير الصفحة ، والخيار الافتراضي هو الانجليزية ( charset=windows-1252 ) وبالتالي لن تظهر الحروف العربية إذا لم يحددها المصمم إلا إذا قام الزائر بتغيير تشفير الصفحة ( Encoding ) بطريقة يدوية إلى العربية ( charset=windows-1256 ).
- عنوان الصفحة وهو العنوان الذي سيظهر أعلى المتصفح ، وهو أيضاً العنوان الذي سيظهر في محركات البحث ووضعه ضروري جداً لمحركات البحث ، لذا يفضل أن يدل على محتوى الصفحة.
العرض:
سنغير عنوان الصفحة ، الخلفية ، اتجاه الصفحة وكذلك تشفير الصفحة.
عرض فلاشي
html
تغيير اتجاه الصفحة
<html dir="rtl">
تغيير تشفير الصفحة
<meta **********="Content-Type" content="****/html; charset=windows-1256">
تغيير عنوان الصفحة
<title>أهلاً وسهلاً بكم في مكنون</title>
تغيير خلفية الصفحة
<body bgcolor="#FFFF99">
--------------------------------------------------------------------------------
الصور:
في هذا الدرس سنتعلم كيفية:
• ادراج صورة
• تنسيق محاذاة الصورة
• جعل صورة كأيقونة أو وصلة
• وضع الصور في المجلد الصحيح
عملية ادراج الصور عملية سهلة ، والعرض التالي سيوضح ذلك ، ولكن أهم أمر في الصورة ، أن تكون المساحة التي تأخذها في الذاكرة صغيرة ، وذلك حتى يتم تنزيل الصفحة وفتحها بسرعة ، وأن لا نكثر من الصور في الصفحة ، فالصفحة المملوءة بالصور ، ستكون بطيئة جداً ، وبالتالي سيمل الزائر وسيغلقها ، أمر آخر نوع الصورة يجب أن يكون بامتداد Gif أو jpeg ، وكل له خاصيته فالصور الطبيعية يفضل ان تكون بامتداد Jpeg أما الصور المتحركة أو الصور ذات الألوان المحددة أو الأيقونات فيجب أن تكون بامتداد Gif .
العرض:
سنضع نصاً مكون من ثلاث فقرات في صفحة الصور، وسندرج صورة محاذية لليمين ومتداخلة مع النص ، وكذلك سنجعل من صورة أيقونةً للدخول إلى صفحة الأخبار.
عرض فلاشي
ملاحظة:
يجب أن تسمى الصور بأسماء انجليزية أما العربية فلن تعرض في أغلب السيرفرات
أمر آخر يجب نقل الصور إلى مجلد images الموجود داخل مجلد الموقع وذلك حتى نضمن ظهور الصور الموجودة. والعرض التالي سيبين ذلك ، والسبب ، لأننا عادة ما نختار صور موجودة في مجلد خارج مجلد الموقع ، والملفات التي ستنقل إلى السيرفر هي الملفات الموجودة في مجلد الموقع ، ولكن قبل هذا العرض يجب أن تحفظ عملك في صفحة الصور حتى تظهر الصور أمامك تحت مجلد الموقع.
عرض فلاشي
html
الصورة الكبيرة
<img border="0" src="images/noUserPic.jpg" align="right">
الأيقونة
<a href="news.htm"><img border="0" src="images/aurep.gif" align="absmiddle"></a>
--------------------------------------------------------------------------------
الجداول:
في هذا الدرس سنتعلم كيفية:
• انشاء جدول
• تغيير خصائص الجدول والتعرف عليها
تعتبر الجداول من الوسائل المهمة جداً في تصميم المواقع ، وتعلمها ضرورة من ضرورات التصميم ، والجدول يتكون من خلايا ، وبإمكانك تغيير خصائص الجدول بشكل عام ، كما يمكنك تغيير خاصية كل خلية من خلايا الجدول ، ومن خصائص الخلية أو الجدول ، لون الخلفية ، لون الحدود ، المحاذاة ، حجم سمك الحد وغيرها الكثير.
=== يتبــــــــع الجزء الثالث ===
• صفحة في نفس الموقع
• صفحة خارج الموقع
• ايميل
• سطر في نفس الصفحة
يمكن إظهار نبذة عن الارتباط على الشاشة ، بالضغط على الزر screenTip… ، عند تغيير خصائص الارتباط كما في الشكل أدناه ، الذي يوضح نافذة تغيير خصائص الارتباط التشعبي.
العرض:
سنجعل من جملة اضغط هنا ، ارتباطاً لصفحة الأخبار الموجودة في نفس الموقع.
عرض فلاشي
ملاحظة
الارتباط التشعبية لن تعمل ، إلا إذا كانت الصفحات أو الملفات الموصولة ، تحت مسمى انجليزي ، لذلك قمنا بتغيير اسماء ملفات الصفحات إلى الانجليزية
html
<a href="news.htm">اضغط هنا</a>
--------------------------------------------------------------------------------
خصائص الصفحة:
في هذا الدرس سنتعلم كيفية:
• تغيير عنوان الصفحة
• تغيير خلفية الصفحة
• تغيير اتجاه الصفحة ليكون من اليمين إلى اليسار
• تغيير تشفير الصفحة إلى العربية
من أهم خصائص الصفحة:
- اتجاه الصفحة فالخيار الافتراضي هو من اليسار إلى اليمين ، ولكي تظهر النصوص العربية بشكل مرتب ، يجب أن نغير من اتجاه الصفحة ليكون من اليمين إلى اليسار.
- تشفير الصفحة ، والخيار الافتراضي هو الانجليزية ( charset=windows-1252 ) وبالتالي لن تظهر الحروف العربية إذا لم يحددها المصمم إلا إذا قام الزائر بتغيير تشفير الصفحة ( Encoding ) بطريقة يدوية إلى العربية ( charset=windows-1256 ).
- عنوان الصفحة وهو العنوان الذي سيظهر أعلى المتصفح ، وهو أيضاً العنوان الذي سيظهر في محركات البحث ووضعه ضروري جداً لمحركات البحث ، لذا يفضل أن يدل على محتوى الصفحة.
العرض:
سنغير عنوان الصفحة ، الخلفية ، اتجاه الصفحة وكذلك تشفير الصفحة.
عرض فلاشي
html
تغيير اتجاه الصفحة
<html dir="rtl">
تغيير تشفير الصفحة
<meta **********="Content-Type" content="****/html; charset=windows-1256">
تغيير عنوان الصفحة
<title>أهلاً وسهلاً بكم في مكنون</title>
تغيير خلفية الصفحة
<body bgcolor="#FFFF99">
--------------------------------------------------------------------------------
الصور:
في هذا الدرس سنتعلم كيفية:
• ادراج صورة
• تنسيق محاذاة الصورة
• جعل صورة كأيقونة أو وصلة
• وضع الصور في المجلد الصحيح
عملية ادراج الصور عملية سهلة ، والعرض التالي سيوضح ذلك ، ولكن أهم أمر في الصورة ، أن تكون المساحة التي تأخذها في الذاكرة صغيرة ، وذلك حتى يتم تنزيل الصفحة وفتحها بسرعة ، وأن لا نكثر من الصور في الصفحة ، فالصفحة المملوءة بالصور ، ستكون بطيئة جداً ، وبالتالي سيمل الزائر وسيغلقها ، أمر آخر نوع الصورة يجب أن يكون بامتداد Gif أو jpeg ، وكل له خاصيته فالصور الطبيعية يفضل ان تكون بامتداد Jpeg أما الصور المتحركة أو الصور ذات الألوان المحددة أو الأيقونات فيجب أن تكون بامتداد Gif .
العرض:
سنضع نصاً مكون من ثلاث فقرات في صفحة الصور، وسندرج صورة محاذية لليمين ومتداخلة مع النص ، وكذلك سنجعل من صورة أيقونةً للدخول إلى صفحة الأخبار.
عرض فلاشي
ملاحظة:
يجب أن تسمى الصور بأسماء انجليزية أما العربية فلن تعرض في أغلب السيرفرات
أمر آخر يجب نقل الصور إلى مجلد images الموجود داخل مجلد الموقع وذلك حتى نضمن ظهور الصور الموجودة. والعرض التالي سيبين ذلك ، والسبب ، لأننا عادة ما نختار صور موجودة في مجلد خارج مجلد الموقع ، والملفات التي ستنقل إلى السيرفر هي الملفات الموجودة في مجلد الموقع ، ولكن قبل هذا العرض يجب أن تحفظ عملك في صفحة الصور حتى تظهر الصور أمامك تحت مجلد الموقع.
عرض فلاشي
html
الصورة الكبيرة
<img border="0" src="images/noUserPic.jpg" align="right">
الأيقونة
<a href="news.htm"><img border="0" src="images/aurep.gif" align="absmiddle"></a>
--------------------------------------------------------------------------------
الجداول:
في هذا الدرس سنتعلم كيفية:
• انشاء جدول
• تغيير خصائص الجدول والتعرف عليها
تعتبر الجداول من الوسائل المهمة جداً في تصميم المواقع ، وتعلمها ضرورة من ضرورات التصميم ، والجدول يتكون من خلايا ، وبإمكانك تغيير خصائص الجدول بشكل عام ، كما يمكنك تغيير خاصية كل خلية من خلايا الجدول ، ومن خصائص الخلية أو الجدول ، لون الخلفية ، لون الحدود ، المحاذاة ، حجم سمك الحد وغيرها الكثير.
=== يتبــــــــع الجزء الثالث ===
الشبح(مُشْرفِ قِسِمْ الَرَوٌائِع الآدَبَيِةِ) -
عدد الرسائل : 496
العمر : 35
مزاجي :
انصر رسول الله :
تاريخ التسجيل : 21/03/2008
نسيم البحر:: Angels Fire :: -
عدد الرسائل : 363
انصر رسول الله :
مجموعة الاوسمة :
تاريخ التسجيل : 19/03/2008
}!{ مــ،ــنــ،ـتــ،ـديــ،ــات شــ،ـبـ،ـاب الـ،ـسـ،ـاويــ،ـة }!{ :: ۩۞۩ •° الــــقــــســــم الــــتــــقــــنــــي °• ۩۞۩ :: مـنـتـدى جـديـد الـتـكـنـولـوجـيـا
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى