الرئيسيةأحدث الصورالتسجيلدخول
   ديزاين ستارز على الفيس بوكديزاين ستارز على تويترقناة ديزاين ستارز على اليوتيوبخلاصات ديزاين ستارز
درس html تصميم تخطيط وجداول للموقع

    ديزاين ستارز | Design Stars :: اقسام ديزاين ستارز الادارية :: ارشيف ديزاين ستارز - مواضيع بدون اقسام - مواضيع غير متاحة :: سله المهملات - مواضيع مهملة - مواضيع لا ترتقى بنا
شاطر | 
 

 درس html تصميم تخطيط وجداول للموقع

استعرض الموضوع التالي استعرض الموضوع السابق اذهب الى الأسفل 

مواضيع مماثلة

+
كاتب الموضوعمحتوى الموضوع

inception

inception

عضو جديد



الـجنس : ذكر

نقاط التقييم : -1

عدد المشاركات : 103

نقاط الشراء : 0 Point

طلبات التصميم : 10:0

تاريخ التسجيل : 12/03/2011

نقاط المشاركه : 5153



http://MOAMMAL.GLOBSPOT.COM http://twitter.com/#!/des_stars

مُساهمةموضوع: درس html تصميم تخطيط وجداول للموقع    درس html تصميم تخطيط وجداول للموقع  Icon_minitime2011-03-14, 10:20 am

  
درس html تصميم تخطيط وجداول للموقع
وضعت الدرس بلغتين ليسهل فهمة لأنه تقريباً صعب الفهم

اللغة الأنجليزية
Creating Site Layout By Using Tables


درس html تصميم تخطيط وجداول للموقع  Imgad?id=CPn1xKyg9o2i4gEQyAEYyAEyCF909lcCKfsP
We’re going to build a website that has a navigation menu along the left hand side. In order to do that, we need a “main” table that has two columns – one reserved for the navigation menu and the other for the content. Note that we’re going to add borders to our table to make it visible, but main tables generally do not have any borders. We’re then going to define the width of our table as “100%” to ensure it fits the screen in all screen resolutions and browser windows. We’re also going to define a width for our navigation menu – it can be both fixed or a percentage depending on your personal taste. We’ll set it to a fixed value of 120 pixels for this particular example.
Let’s write down the HTML code for our “main” table:


<TABLE border=0 cellSpacing=1 cellPadding=10 width="100%" bgColor=#cccccc>

<TR>
<td bgColor=#f9f9f9 align=left>

 
الموضوع الاصلى : درس html تصميم تخطيط وجداول للموقع       المصدر : منتديات ديزاين ستارز     الكاتب : inception
 
الرجوع الى أعلى الصفحة اذهب الى الأسفل

inception

inception

عضو جديد



الـجنس : ذكر

نقاط التقييم : -1

عدد المشاركات : 103

نقاط الشراء : 0 Point

طلبات التصميم : 10:0

تاريخ التسجيل : 12/03/2011

نقاط المشاركه : 5153



http://MOAMMAL.GLOBSPOT.COM http://twitter.com/#!/des_stars

مُساهمةموضوع: رد: درس html تصميم تخطيط وجداول للموقع    درس html تصميم تخطيط وجداول للموقع  Icon_minitime2011-03-14, 10:26 am

  
درس html تصميم تخطيط وجداول للموقع
باللغة العربية
إنشاء تخطيط الموقع باستخدام الجداول



الفعلي من موقع الويب الخاص بك ، ومكان لوضع بعض الإعلانات ، ورسومات وشعار. وهناك عدد قليل من الطرق يمكننا ترتيب هذه البنود ، ونحن ذاهبون لتغطية واحد منهم في هذا الدرس.
أول موقع الخاص تخطيط




ونحن في طريقنا لبناء موقع على شبكة الانترنت يحتوي على الملاحة القائمة على طول الجانب الأيسر. ولكي نفعل ذلك ، نحن بحاجة إلى "الرئيسية" جدول يحتوي على عمودين -- واحدة محفوظة لقائمة التنقل وغيرها من المحتوى. علما أننا ذاهبون الى إضافة حدود إلى طاولتنا لجعله مرئيا ، ولكن الجداول الرئيسية عموما ليس لدينا أي حدود. ونحن في طريقنا ثم لتحديد عرض الجدول لدينا باسم "100 ٪" لضمان تناسبها الشاشة في جميع القرارات الشاشة ونوافذ المتصفح. ونحن في طريقنا أيضا لتحديد العرض لدينا الملاحة القائمة -- أنه يمكن أن يكون على حد سواء الثابتة أو نسبة مئوية تبعا لذوقك الشخصي.سنقوم تعيينها إلى قيمة ثابتة من 120 بكسل على سبيل المثال هذا وجه الخصوص.

دعونا كتابة الكود لدينا طاولة "الرئيسية" :
<html>
<head>



<رئيس />
<body>

<الجدول الحدود = "1" العرض = "100 ٪" >
<tr>
<الدفتيريا العرض = "80" >
سوف الملاحة القائمة اذهب هنا
</ الدفتيريا>
<td>
ومحتوى الموقع اذهب هنا
</ الدفتيريا>
<طن تبريد />
<الجدول />

<الهيئة />
</ هتمل>

وسوف الكود أعلاه توليد الناتج أدناه :
<TABLE style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" border=1 width="100%">

<TR style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" width=80>سوف الملاحة القائمة اذهب هنا</TD>
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">ومحتوى الموقع اذهب هنا</TD></TR></TABLE>

الآن ، يمكننا أن نضيف جدولا إضافية إلى العمود الأيسر لتشكيل قائمة التنقل. سنقوم أيضا تعيين "الحدود" سمة من الجدول "الرئيسية" إلى "0" (صفر) من أجل جعل موقعنا تبدو ألطفدرس html تصميم تخطيط وجداول للموقع  Icon_smile

Sidenote : وضع جدول داخل جدول آخر يسمى "التعشيش الجداول." الجداول المستخدمة هي متداخلة بشكل كبير لإنشاء مواقع الويب المصممة بعناية.

نسخ ولصق الكود التالي في المفكرة الخاصة بك على شكل موقع بسيط مع الملاحة القائمة على اليسار :
<html>
<head>



<رئيس />
<body>

<الجدول الحدود = "0" العرض = "100 ٪">
<tr>
<tdwidth="80">

<tableborder="1">
<tr>الرئيسية <td></ الدفتيريا> </ طن تبريد>
<td>+ Page1 </ الدفتيريا> </ طن تبريد>
<td>+ Page2 </ الدفتيريا> </ طن تبريد>
<td>+ Page3 </ الدفتيريا> </ طن تبريد>
<td>+ الخ... </ الدفتيريا> <آر />
<الجدول />


</ الدفتيريا>
<td>
ومحتوى الموقع اذهب هنا
</ الدفتيريا>
<طن تبريد />
<الجدول />

<الهيئة />
</ هتمل>

وسوف الكود أعلاه إنشاء قائمة التنقل :
<TABLE style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" border=0 width="100%">

<TR style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" width=80><TABLE style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" border=1>

<TR style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">الصفحة الرئيسية</TD></TR>
<TR style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">page1</TD></TR>
<TR style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Page2</TD></TR>
<TR style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Page3</TD></TR>
<TR style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">الخ...</TD></TR></TABLE></TD>
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">ومحتوى الموقع اذهب هنا</TD></TR></TABLE>

ويمكننا أن نضيف شعار والرسومات بعض الإعلانات أو إلى الجزء الأعلى من الصفحة لدينا. لذلك نحن نذهب لإضافة صف آخر إلى الجزء الأعلى من الجدول هدفنا الرئيسي :
<html>
<head>



<رئيس />
<body>

<tableborder="0" width="100٪">
<tr>
<tdheight="40"> شعارك </ الدفتيريا>
<td>يمكنك وضع الإعلانات هنا أو الرسومات </ الدفتيريا>
<طن تبريد />

<tr>
<tdwidth="80">

<tableborder="1">
<tr>الرئيسية <td></ الدفتيريا> </ طن تبريد>
<td>+ Page1 </ الدفتيريا> </ طن تبريد>
<td>+ Page2 </ الدفتيريا> </ طن تبريد>
<td>+ Page3 </ الدفتيريا> </ طن تبريد>
<td>+ الخ... </ الدفتيريا> <آر />
<الجدول />

</ الدفتيريا>
<td>
ومحتوى الموقع اذهب هنا
</ الدفتيريا>
<طن تبريد />
<الجدول />

<الهيئة />
</ هتمل>

وسوف الكود أعلاه إنتاج تخطيط موقع بسيط ولكن الكامل :
<TABLE style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" border=0 width="100%">

<TR style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" height=40>شعارك</TD>
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">يمكنك وضع الإعلانات هنا أو الرسومات</TD></TR>
<TR style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" width=80><TABLE style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px" border=1>

<TR style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">الصفحة الرئيسية</TD></TR>
<TR style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">page1</TD></TR>
<TR style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Page2</TD></TR>
<TR style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">Page3</TD></TR>
<TR style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">الخ...</TD></TR></TABLE></TD>
<td style="PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px">ومحتوى الموقع اذهب هنا</TD></TR></TABLE>

إذا كنت تتمتع هذا الدرس ، الرجاء الارتباط به درس html تصميم تخطيط وجداول للموقع  Icon_smile





أرجوا انكم فهمتوا الدرس ههه

 
الموضوع الاصلى : درس html تصميم تخطيط وجداول للموقع       المصدر : منتديات ديزاين ستارز     الكاتب : inception
 
الرجوع الى أعلى الصفحة اذهب الى الأسفل
 

درس html تصميم تخطيط وجداول للموقع

استعرض الموضوع التالي استعرض الموضوع السابق الرجوع الى أعلى الصفحة 
صفحة 1 من اصل 1
درس html تصميم تخطيط وجداول للموقع  Empty

تذكر قول الله تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )


درس html تصميم تخطيط وجداول للموقع  Empty
صلاحيات هذا المنتدى:لاتستطيع الرد على المواضيع في هذا المنتدى
ديزاين ستارز | Design Stars :: اقسام ديزاين ستارز الادارية :: ارشيف ديزاين ستارز - مواضيع بدون اقسام - مواضيع غير متاحة :: سله المهملات - مواضيع مهملة - مواضيع لا ترتقى بنا-
درس html تصميم تخطيط وجداول للموقع  Empty

الاتصال بنا -الاعلان لدينا - بيان الخصوصية - أعلى
شات -منتديات الريان سوفت التكنولوجية - منتديات حبيبى - حروف -  تبادل نصى