Untitled 1
 
m1 m
شبكة نساء الجنة الإسلامية عدد الضغطات : 1,992
عدد الضغطات : 2,303


awlstyle-2 awlstyle-3 awlstyle-1
awlstyle-5
العودة   |: معهد أول ستايل :| > منتدي تطوير المواقع > منتدي تطوير المواقع
تحديث الصفحة [ الحلقة الثانية ] كيفية وشكل التصميم الخاص بالويب 2.0
التعليمـــات التقويم اجعل كافة الأقسام مقروءة
awlstyle-4
awlstyle-7 awlstyle-6
awlstyle-9 awlstyle-10 awlstyle-8


إضافة رد
صفحة 1 من 2 1 2
 
أدوات الموضوع انواع عرض الموضوع
awlstyle-2 awlstyle-3 awlstyle-1
awlstyle-5
قديم 06-05-2008, 12:59 AM   #1 (permalink)

 







 
Abo_ELleal غير متواجد حالياً
بيانات موقعي
اسم الموقع: |: معهد أول ستايل :|
إصدار المنتدى: VB 3.8.0
 
Neww [ الحلقة الثانية ] كيفية وشكل التصميم الخاص بالويب 2.0


السلام عليكم ورحمة الله وبركاتة
كيف حالكم اخواني الكرام
واهلاً ومرحباً بكم في الحلقة الثانية من حلقات تعريب وتعليم شكل وتصنيع الويب 2.0

تكلمنا في الحلقة السابقة والتي هي الحلقة الاولي وتجدها علي الرابط الاتي
[الحلقة الأولي ]الويب 2 ما له وما عليه [ما هو - طريقته - تصميمه - شرحه كامل ]

عن تعريف بالويب 2.0 وكل ما له وما عليه
ولكن توقفنا كثيراً هذه المرة لنفكر في كيفية عرض هذا الدرس وكيفية شرحه للجميع

ولكن قررنا البدء فيه وفوراً لاكمال باقي الحلقات التعريفية بالويب 2.0

الان لكي نبدأ في درس تصميم الويب 2.0 يجب ان يكون لدينا برنامجين مهمين وهما

Adobe Photoshop extend CS3


للتحميل من خلال الروابط
برنامج

Microsoft Expression Web


للتحميل
طيب الان حملنا البرنامجين ما الذي يتبقي لنتوكل علي الله
لا يتبقي إلا ان يكون ذهنك صافياً ومركز معي جداً

قبل اي شيء يعتمد الويب 2.0 علي تقليل الجداول والصور بشكل كبير
كذلك الاناقة وبساطة الاستخدام قبل اي شيء خفه التصفح
لذلك دائماً ما تجد التصميم هيدر + فووتر فقط
والان علي بركة الله نبدأ مشوارنا

اولاً افتح برنامج الفوتوشوب
ثم افتح صفحة جديدة واضظبط مقاسها كما بالصورة القادمة



الان ارسم مستطيل .. وسوي به ما في الشكل من تدرجات وخلافة


وهذا شكل اخر وتدرج حاد اخر


للاسف اغلب المصممين وليس كلهم يعتقدون ان هذه التدرجات هي الويب 2.0 ولكن للاسف ليس هي وانما يشملها كل ما وضعناه في موضوعنا السابق وخصوصاً ان يكون متوافق مع المعايير القياسية

شوف الان الهيدر والفووتر بشكل مبسط وجميل وانيق
ويمكنك ان تختار الوان كثيرة وجيدة وكلها تبع الويب 2.0
وسيساعدك هذا الموقع جداً
http://www.colorschemer.com/schemes/




الان وبعد هذا التصميم المبسط جداً
يمكننا التقطيع والتقطيع يكون عبارة عن جزئين " هيدر " وفووتر "

وبعد التقطيع نبدأ المرحلة الاصعب وركزوا معي جيداً لانها سهلة جداً رغم انها الاصعب
والمرحلة هي جعل التصميم بعد تركيبه متوافق مع المعايير العالمية القياسية World Wide Web Consortium

شوف قبل اي شي بعد فتح برناج Front Page وبرنامج Expression Web

وهذه صورة للمقارنة بينهم


يا ريت الكل يركز في الصورة السابقة وملاحظة اكواد البرنامجين في البداية

شوف هنا الكود كامل في الـ Front Page بعد تركيب الهيدر فقط



وشوف هنا بعد تركيب الهيدر في برنامج Microsoft Expression Web



طبعاً الفرق فظيع بين الاثنين

ولنأتي بعد تركيب الفووتر في الـ Front Page



وشوف هنا بعد تركيب الفووتر في برنامج Microsoft Expression Web



ونأتي للفاجعة الكبري بالنسبة لفحص الصفحتين لمطابقتهما للمواصفات القياسية علي موقع World Wide Web Consortium

الكل سيقول ما في اكواد من الاساس حتي نجد اخطاء ولكن انظر للنتيجة

شوف برنامج Microsoft Expression Web




ونشوف الـ Front Page



طيب هل تريد ان تري الكودين

أرفقت لكم الملفين بالمرفق

+ هذه الاكواد
كود الـ Front Page
كود PHP:
<html dir="rtl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>شبكة أول ستايل</title>
</head>
<body>
<div align="center">
 <table border="0" width="777" dir="rtl" cellspacing="0" cellpadding="0">
  <tr>
   <td><img border="0" src="images/sa_01.gif" width="777" height="210"></td>
  </tr>
 </table>
</div>
<div align="center">
 <table border="0" width="777" cellspacing="0" cellpadding="0" dir="rtl">
  <tr>
   <td><img border="0" src="images/sa_03.gif" width="777" height="43"></td>
  </tr>
 </table>
</div>
</body>
</html> 
كود Microsoft Expression Web
كود PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>شبكة أول ستايل </title>
<style type="text/css">
.style1 {
 text-align: center;
}
</style>
</head>
<body>
<center>
<table style="width: 777px" dir="rtl" cellspacing="0" cellpadding="0">
 <tr>
  <td class="style1">
  <img alt="الهيدر" src="images/sa_01.gif" width="777" height="210" /></td>
 </tr>
</table>
<table style="width: 777px" dir="rtl" cellspacing="0" cellpadding="0">
 <tr>
  <td>
  <img alt="الفوووتر" src="images/sa_03.gif" width="777" height="43" /></td>
 </tr>
</table>
</center>
</body>
</html> 
قسماً بالله هذا الدرس ما رأيت مثله ومن تعبي الخالص
واتمني منكم التطبيق والتدقيق جيداً
لان الحلقة المقبلة عن SEO وعن كل ما بها

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

يرجي عند النقل ذكر المصدر
معهد اول ستايل ومعهد ترايدنت

اتمني اكون افدتكم
أخوكم

 

الموضوع الأصلي : [ الحلقة الثانية ] كيفية وشكل التصميم الخاص بالويب 2.0     -||-     المصدر : |: معهد أول ستايل :|     -||-     الكاتب : Abo_ELleal
الملفات المرفقة

: web2.0.zip‏
: 983 بايت
: zip
: 4
: اضغط هنا





التوقيع

  1. التعلم ليس بالامر الصعب ولكن ركز وتلقي المعلومة جيداً
  2. المعهد ملك للجميع وليس لفرد واحد سلطة عليه
  3. الحب والاخلاص سبب نهوض الكثير فلنحب بعضنا ونخلص لبعضنا البعض
   
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
رد مع اقتباس
awlstyle-4
awlstyle-7 awlstyle-6
awlstyle-9 awlstyle-10 awlstyle-8

awlstyle-2 awlstyle-3 awlstyle-1
awlstyle-5
قديم 06-05-2008, 06:05 PM   #2 (permalink)
:: أميرة المعهد ::
:: AWLSTYLE ::
 
الصورة الرمزية ماكي

 
افتراضي رد: [ الحلقة الثانية ] كيفية وشكل التصميم الخاص بالويب 2.0
يعطيك العافية اخي ابو الليل
تحيتي واحترامي




التوقيع

   
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
رد مع اقتباس
awlstyle-4
awlstyle-7 awlstyle-6
awlstyle-9 awlstyle-10 awlstyle-8

awlstyle-2 awlstyle-3 awlstyle-1
awlstyle-5
قديم 06-05-2008, 08:47 PM   #3 (permalink)

 







 

Mohammed Hassan غير متواجد حالياً
بيانات موقعي
اسم الموقع: شبكة أول ستايل
إصدار المنتدى: VB 3.8.1
 
افتراضي رد: [ الحلقة الثانية ] كيفية وشكل التصميم الخاص بالويب 2.0
رائع رائع بكل ما تحمل الكلمة

وبأنتظار الحلقة الثالثة ان شاء الله

تقبل مروري يا بو حسن +++ تقييم




التوقيع


   
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
رد مع اقتباس
awlstyle-4
awlstyle-7 awlstyle-6
awlstyle-9 awlstyle-10 awlstyle-8

awlstyle-2 awlstyle-3 awlstyle-1
awlstyle-5
قديم 31-08-2009, 12:39 PM   #6 (permalink)
:: عضو مجتهد ::
 
الصورة الرمزية ميكرو

 
افتراضي رد: [ الحلقة الثانية ] كيفية وشكل التصميم الخاص بالويب 2.0
يا هلا اخوي الغالي ابو الليل


هذا جميل جدا وانتظرني في الجديد عن web 2 ان شا الله


يجب ان نتجه الى web 2 لعل معظم المواقع الاجنبية تتجه له ولكن العربية ...

ان شا الله ساساعد في هذا الموضوع فالحصيلة العلمية لدي فيه ليست بسيطة

ننتظرك وانا ساكون جاهز لاكمل معك



موضوع مميز بحق موضوع رائع جدا

احلى تقييم لاحلى استاذ بالدنيا + احلى تقييم لافضل موضوع رايته من قبل


يعطيك العافية




التوقيع

: : شكر خاص جداً لمعهد يستحق الشكر : :

:.:.:.: معهد اول ستايل لمن ارايد ان يكون له موقع كامل :.:.:.:

|:.:.:|تحيةً الى إدارة معهد أول ستايل الغالي |:.:.:|
منتديا ميكرو
   
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
رد مع اقتباس
awlstyle-4
awlstyle-7 awlstyle-6
awlstyle-9 awlstyle-10 awlstyle-8

awlstyle-2 awlstyle-3 awlstyle-1
awlstyle-5
قديم 26-08-2010, 11:29 AM   #8 (permalink)
:: عضو ::
 
الصورة الرمزية ابو فاطمة

 







 
Users Flag!
ابو فاطمة غير متواجد حالياً
بيانات موقعي
اسم الموقع: منتديات ابو فاطمة الاسلامية
إصدار المنتدى: VB 3.8.1
 
افتراضي رد: [ الحلقة الثانية ] كيفية وشكل التصميم الخاص بالويب 2.0
عليكم السلام ورحمة الله وبركاته


تسلم ياعيني عليك ياالغالي لاطول علينا بالدرس الثالث ان شاء الله متحمسين




التوقيع

   
Digg this Post!Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
رد مع اقتباس
awlstyle-4
awlstyle-7 awlstyle-6
awlstyle-9 awlstyle-10 awlstyle-8

إضافة رد
صفحة 1 من 2 1 2
Submit Thread >  Submit to AddThisTo Submit to Digg Submit to Reddit Submit to Furl Submit to Del.icio.us Submit to Google Submit to Yahoo! This Submit to Technorati Submit to StumbleUpon Submit to Spurl Submit to Netscape  < Submit Thread

« تسريع المنتدى وتقليل اخطأء الاستايل | [الحلقة الأولي ]الويب 2 ما له وما عليه [ما هو - طريقته - تصميمه - شرحه كامل ] »

الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع
العرض العادي العرض العادي

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك
BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة
الانتقال السريع


الساعة الآن 09:42 AM.

Powered by vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 ,
Ads Management Version 3.0.0 by Saeed Al-Atwi

a.d - i.s.s.w


Alexa Group By SudanSon

ضع ايميلك ليصلك كل جديد في شبكتنا:

Delivered by FeedBurner
خريطة الموقع

معاً لعهد جديد بالداخلية ولنرجع مصرنا آمنة 
 |: معهد أول ستايل :| RSS Feeds - الاتصال بنا - المعلن - |: معهد أول ستايل :| - الأرشيف - إحصائيات الإعلانات - الأعلى
FOOTER-2
FOOTER-1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59