تصميم مواقع الانترنت من الصفر حتى الاحتراف - الصفحة 6

ملفي الشخصي · [ **09-23-2008** ]

رائع جدا وخصوصا اني تعلمت المزيد بالوسم frame

وارجوا منك دائما ان تزويدنا بكل قيم الوسوم حتى نكون على اطلاع

نتابع معك المتعة في اعداد الجداول دائما بانتظار المزيد لك

ملفي الشخصي · [ **09-23-2008** ]

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

الستايل الاول على سبيل المثال اخترت البنر لبوستر احد اجزاء هاري بوتر :

وهذا الستايل الثاني :

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

تحياتي

ملفي الشخصي · [ **09-23-2008** ]

شيء جميل جدا وسنكون معك خطوة بخطوة ,,,

ننتظر بفارغ الصبر لك ,,

ملفي الشخصي · [ **09-24-2008** ]

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

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

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

بسيطة فانا هنا احتاج الى سمة سحرية تسمى colspan

كل ماعلي عمله ان ادرجها في مكان الخلية <TD>التي اريد دمجها واعطيها مقدار الخلايا التي اريد دمجها معها ..:

كود HTML:

<td colspan="2"> مندمجة</td>

الان اليك الكود كامل لتجري عليه تعديلات واضافات وتمارين ..

كود HTML:

<html dir="rtl"> <head> <title>جدول مندمج</title> </head> <body bgcolor="#FFCC99"> <div align="center"> <table border="1" bordercolor=#CC3300 width=30%> <tr> <td>عادية </td> <td colspan="2"> مندمجة</td> </tr> <tr> <td>عادية</td> <td>عادية</td> <td>عادية</td> </tr> </table> </div> </body> </html>

قمت بتوسيط الجدول في منتصف الصفحة :

كود HTML:

div align="center"

قمنا بفتح وسم ال table اضفت اليه قيمة ال border واحد ولونت الحدود bordercolor واعطيت الجدول عرض بقيمة تلاتين بالمئة width=30%

الجدول عبارة عن سطرين وثلاث خلايا .. السطر الاول الذي قمت بالدمج فيه بمقدار خليتين colspan=2

كود HTML:

<tr> <td>عادية </td> <td colspan="2"> مندمجة</td> </tr>

والسطر الثاني هو سطر عادي بثلاث خلايا :

كود HTML:

[color="red"]<tr> <td>عادية</td> <td>عادية</td> <td>عادية</td> </tr>[/color]

ثم اغلقت وسم ال table , وسم التوسط div وال body وال htm

كود HTML:

</table> </div> </body> </html>

طيب هذا بالنسبة لدمج الخلايا الافقية .. طيب ماذا لو اردت بالعكس دمج عدة صفوف مع بعضها البعض كهذه ؟!

استعملت هنا العنصر rowspan في الوسم <TD> وحددت له اني اريد دمج ثلاث خلايا عامودية :

كود HTML:

<td rowspan="3">مدمج </td>

ضع هذا الكود في مستندك وانظر اليه وقم بعمل تمارين اضافية:

كود HTML:

<table border="1" bordercolor="#800000" height=200PX> <tr> <td>صف1</td> <td>صف 2</td> </tr> <tr> <td>عادي</td> <td rowspan="3">مدمج </td> </tr> <tr> <td>عادي</td> </tr> <tr> <td>عادي</td> </tr> </table> </div> </body> </html>

في ال TABLE هنا حددت ارتفاع الجدول بالعنصر height واعطيته قيمة 200PX :

كود HTML:

<table border="1" bordercolor="#800000" height=200PX>

اذا colspan تستعمل لدمج الخلايا الافقية و rowspan تستعمل لدمج الخلايا العامودية و height احدد بها قيمة ارتفاع الجدول و width قيمة عرض الجدول .
يتبع في الفقرة التالية ان شاء الله ..

ملفي الشخصي · [ **09-24-2008** ]

نعم ياسمنية اعتقد انك الان ,ذكرتي ما قد يؤرق الطلبة

وهي عملية الدمج التي احيانا ما يفشلون بها فتختل

موازين الجدول , ولكني اعتقد ان فهم عملية الدمج واتقانها

تكمن في عملية توزيع النسب ,, نحن معك خطوة بخطو تاعبي ,,

ملفي الشخصي · [ **09-24-2008** ]

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

في هذا الجدول البسيط تحكمت انا من اين ابدا الكتابة في كل خلية :

عندما اريد الكتابة تبدأ من اعلى الخلية عند بداية الخلية في الوسم <TD>علي ان اكتب اولا الامر valign ومن ثم طبعا اشارة =تهياة للامر الاخر وهو top اي اعلى الخلية او الجدول .. فتتجه كل محتويات الخلية للاعلى بحيث تبدأ من بداية العامود او الخلية ..

كود HTML:

<td valign="top">أعلى</td>

طيب عندما اريد ان اكتب في اسفل الخلية او محتويات العامود هذا اريدها ان تكون في الاسفل ..
اكتب السمة valign واعطيها الامر bottom هكذا :

كود HTML:

<td valign="bottom">أسفل</td>

فتتجه جميع المحتويات الى الاسفل ..
وعندما اريدها في الوسط اكتب السمة valign واعطيها الامر center هكذا :

كود HTML:

<td valign="center">وسط</td>

اما التموضع هذا وضعته لاريكم كيف ان الكلمة ان لم احدد لها اتجاه فهي تبقي او تبدأ في هذا المكان من منتصف الصفحة .

اليكم الكود ال TABLE:

كود HTML:

<html > <head> <title>VALING</title> </head> <body bgcolor="#FF9999"> <div align="center"> <table border="1" bordercolor="#008080"> <tr> <td height="150">تموضع</td> <td valign="top">أعلى</td> <td valign="center">وسط</td> <td valign="bottom">أسفل</td> </tr> </table> </div> </body> </html>

اذا السمة valign تستعمل لتحديد محتويات الجدول والخلايا ، يرافقها :
top اي الى الاعلى
center في الوسط
bottom في الاسفل ..
يتبع في الفقرة القادمة ان شاء الله

ملفي الشخصي · [ **09-24-2008** ]

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

نتابع ..
طيب ماذا لو اردت ان تتجه محتويات الجدول الى اليمين او اليسار؟ او حتى الوسط ؟

انظر معي الى هذا الجدول البسيط :

لاحظ في هذا الجدول كيف تحكمت بازاحة محتوياتها في الاتجاه الذي اريد يسار ،، يمين ،، وسط .

السمة المسؤولة هنا هي align نضعها في داخل الوسم الذي نريد تحديد اتجاه محتوياتها كال <TR> او <TD> وانا هنا استعملتها داخل وسوم ال <TD> بحيث حددت لكل خلية اتجاه .

لازاحة المحتويات الى اليمين كتبت الامر align واعطيته الامر right هكذا align=right فيكون معنا الوسم التالي

كود HTML:

td align=right>يمين</td>

ازاحة المحتويات الى جهة اليسار تتطلب السمة align مضاف اليها الامر left اي اليسار هكذا align=left فيكون معنا الوسم التالي :

كود HTML:

<td align=left>يسار</td>

ازاحة المحتويات الى المنتصف نكتب السمة align ونعطيها امر center فيكون الوسم معنا هو :

كود HTML:

<td align=center>وسط</td>

وهذا هو كود ال TABLE كاملا :

كود HTML:

<div align=center> <table border="1" width="60%" bgcolor="#F305E1"> <tr> <td align=left>يسار</td> <td align=right>يمين</td> <td align=center>وسط</td> </tr> </table> </div>

يتبع ان شاء الله .

ملفي الشخصي · [ **09-24-2008** ]

align=left
align=right
align=center

و

valigne لها قيم تختلف ارجوا الانتباه لقيم الوسوم جيدا

اشكرك ياسمنية وماذا بعد ,,

ملفي الشخصي · [ **09-25-2008** ]

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

ملفي الشخصي · [ **09-25-2008** ]

اقتباس: المشاركة الأصلية كتبت بواسطة yasminah

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

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

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

الاخبــــار
إضافة خبر