Dooem
24-09-2007, 09:15 PM
بسم الله الرحمن الرحيم
هذا موضوع يشمل مواضيع مميزه في الشبكه يقنعك با الابتعاد عن الجدال في تصميمك واستخدام التصميم بcss او بطريقة الانماط
كلنا نعلم أن استخدام الجداول من أول و أهم المهارات التى يتعلمها مصمم المواقع
فيتعلم كيف يقوم بإنشاء جداول لتنسيق الصفحة، و يضع الكثير من الجداول بداخل بعضها (nested tables) حتى يحصل على الشكل الذى يريده
و لكن هل سألت نفسك، هل هذه هى أفضل وسيلة لتنسيق الصفحات؟
لنجيب عن هذا السؤال دعنى أسألك سؤالا آخر، هل كانت لديك صفحة كبيرة مليئة بالجداول و أردت أن تعدل شيئًا فى الكود؟
لابد أنك قد وجدت الكثير من <td> , </td> , <tr> , </tr> فلا تعلم كل واحد منها لأى خلية فى أى جدول
و ماذا لو عدلت فى الكود، و عن طريق الخطأ وضعت <td> فى غير مكانها؟
يتغير شكل الصفحة تمامًا و ينهار التصميم، فتحاول البحث هنا و هناك عن مكان هذا الـ <td> البائس
و قد يحالفك الحظ، أو ينتهى الأمر بإعدة تصميم الصفحة من البداية !!
مأساة ...
أما المشكلة الحقيقية فهى حين تتجرأ و تفكر فى تغيير تصميم موقعك كله ...
عليك استخراج البيانات من الجداول فى كل الصفحات و إعادة تعبئتها فى جداول جديدة للتصميم الجديد
سنفترض أن موقعك متوسط الحجم (مثلا 200 -500 صفحة)
أظن الموضوع متعب لدرجة أنك قد تتوب عن فكرة تغيير الموقع أصلا !!
إذن فنحن متفقون على أنه على الرغم من أن الجداول تقوم بتنسيق الصفحات بشكل مناسب و لكنها ليست الحل الأمثل
و لكن ما البديل؟
قبل أن أجيب دعنى أسألك، هل يمكنك أن تخبرنى ،بنظرة الخبير (دون رؤية الكود) ما أقل عدد من الجداول يمكن أن تحتويه صفحة مثل هذه:
http://www.csszengarden.com
كم قلت؟
:)
لا يوجد بها أية جداول على الإطلاق
لا تصدق؟
افتح كود الصفحة و تأكد بنفسك
و ماذا عن هذه الصفحة؟
http://www.csszengarden.com/?cssfile=/151/151.css&page=0
و هذه؟
http://www.csszengarden.com/?cssfile=/096/096.css&page=6
و هذه؟
http://www.csszengarden.com/?cssfile=/148/148.css&page=0
و هذه؟
http://www.csszengarden.com/?cssfile=/149/149.css&page=0
وهذه؟
http://www.csszengarden.com/?cssfile=/088/088.css&page=7
افتح تلك الصفحات و تأكد منها و سأنتظرك هنا حتى تعود...
حسنًا ، هل عدت؟ ما رأيك؟
ليست المفاجأة أن هذه الصفحات لا تحتوى على جداول فحسب، و لكن أن كل الصفحات السابقة لها نفس كود HTML تمامًا !!!
كل الفرق بينها أن لكلٍ منها ملف css مختلف
كل التغيير فى الألوان و الصور و التنسيق و الخط ...إلخ موجود فى ملف واحد هو ملف css
ذلك الموقع يوجد به أكثر من 150 تصميم مختلف لنفس صفحة HTML !!
و هل فتحت كود الصفحة؟ كيف يبدو؟
كود بسيط و واضح هكذا
<p class="p1">بعض النص هنا</p>
فقط بلا تعقيدات و لا
<table width="100%" align="center" border="1">
<tr>
<td>بعض النص هنا</td>
</tr>
<table>
انظر كيف تبدو الصفحة دون css
http://www.csszengarden.com/zengarden-sample.html
إذن كيف استطاعوا فعل هذا؟
يستخدم هذا الموقع تقنية css positioning، حيث يستخدم كود html بسيط و يضع النص داخل وسوم (tags) مثل p , div , span , h1 , ul , li , ...إلخ
ثم يحدد فى ملف css كيف يبدو النص داخل هذه الوسوم
و بالتالى يظل الكود بسيطًا ، سهل التعديل، خفيف و سريع التحميل
ثم ماذا لو أردت أن تقوم بتغيير تصميم الموقع بأكمله؟
لن تمس صفحة html واحدة
كل ما عليك تعديل ملف css واحد و يتغيير تمامًا شكل الموقع كله
بهذه الطريقة تكون قد فصلت تمامًا المحتوى عن التصميم و سهلت التعديل فيهما، و هذا هو الاتجاه فى الفترة القادمة ، و هذا ما أشارت إليه توصيات www.w3c.org
فالجداول كان المقصود من وجودها عرض بيانات مجدولة و ليس تنسيق الصفحات
لن أخوض هنا فى تفاصيل كيفية تطبيق هذه الطريقة ، و إنما يهدف هذا الموضوع إلى لفت الانتباه إلى هذه التقنية، و أترك التفاصيل لهذه الروابط:
0000000000000000000000000000000
فاصل اعلاني -------------------------------------------
ِشاهد فن الفوتوشوب
WIDTH=425 HEIGHT=350
0000000000000000000000000000000
عدنــــــــــــــــــــا
هذه بعض المواقع التى تعطى فكرة بسيطة عن CSS
http://www.westciv.com/style_master/academy/css_tu torial/
http://www.brainjar.com/css/using/
http://www.wpdfd.com/editorial/basics/index.html
http://www.createwebmagic.com/css101/whati...fb329 4e84ea30a0
http://www.communitymx.com/content/article...A8701 3F0E8B6A50
http://www.digital-web.com/articles/css_101/
http://www.w3.org/TR/CSS21/
و هذه بعض المواقع لمناقشة الموضوعات الأكثر تقدمًا
http://css.maxdesign.com.au/index.htm
http://www.brainjar.com/css/positioning/
http://www.digital-web.com/articles/conver..._a_page_to_css/
http://www.w3.org/TR/REC-CSS2/box.html
http://www.positioniseverything.net/index.php
http://cssvault.com/resources.php
هذه مواقع تقدم تنسيق جاهز للصفحات بأشكال مختلفة يمكنك استخدامها مباشرة
http://intensivstation.ch/css/template.php
http://www.glish.com/css/#techniques
http://www.bluerobot.com/web/layouts/
http://www.thenoodleincident.com/tutorials...sson/ boxes.html
http://www.wannabegirl.org/firdamatic/
و هذه صفحات بها الكثير من الروابط الأخرى
http://www.dezwozhere.com/links.html
http://www.d.umn.edu/itss/support/Training...desig n/css.html
http://www.cbel.com/style_sheets/
و هذا موقع رائع به الكثير من المقالات التى غيرت نظرتى لتصميم المواقع
http://www.alistapart.com/topics/css/
و موقع سردال كان من المواقع العربية الرائدة فى تبنى هذه التقنية
http://www.serdal.com/css
و هذا ملف لشرح CSS باللغة العربية
( إعداد : سامى محمود الرباعية )
http://www.cb4a.com/book/netpro/CSS/css.htm
و هذا موقع يقدم دروسًا باللغة العربية
http://www.c4arab.com/showasection.php?lssid=115
و هذه مواقع أخرى مفيدة
http://www.w3schools.com/css/default.asp
http://www.htmlhelp.com/reference/css/
هذا كتاب من أفضل الكتب التى صدرت فى هذا المجال
More Eric Meyer on CSS
http://babyblue.thuthao.info/modules.php?n...=arti cle&sid=53
و الآن، هل ستظل تستخدم الجداول؟
بعد الفاصل هناك طرق سهله للاستخدام css بسهوله
0000000000000000000000000000000
فاصل اعلاني----------------------------------------
موقع اكوودا رائع
http://www.dhtmlgoodies.com
يسير على نهج dynamicdrive
0000000000000000000000000000000
عدنــــــــــــــــــــــ ـــا
درس تحويل ملف بي اس دي الى الى سي اس اس في اقل من
30 ثانيةاقدم لكم درس خفيف وسريع وهو تحويل ملف بي اس دي الى الى سي اس اس في اقل من
30 ثانية :nice:
اولا نقوم بإستيراد الموقع اللي صممناه على الفوتوشوب من خلال
قائمة file ثم open ونحدد الفايل
http://pxlwork.com/img/px1.gif
http://pxlwork.com/img/px2.gif
المرحلة الثانية نقوم بتعديل الفايل عبر ايميج ريدي : من قائمة file نختار Edit in imageready
http://pxlwork.com/img/px3.gif
المرحلة الثالثة تقطيع الصفحة من خلال اداة sliceTool
http://pxlwork.com/img/px4.gif
بعد الانتهاء من تقطيع الملف نقوم بوضع اعدادات slice قبل تصدير الملف الى html
من خلال الذهاب الى قائمة file ثم output settings ثم نختار slice
http://pxlwork.com/img/px5.gif
المرحلة الخامسة نغير الـ Generate Table الى Generate CSS ثم نحدد Referenced
.. طبعا هذا نتركه للخبراء
http://pxlwork.com/img/px6.gif
المرحلة السادسة تصدير الفايل الى HTML من خلال File ثم Save Optimized As
http://pxlwork.com/img/px7.gif
المرحلة الاخيرة انتهينا من تصدير الملف ولنتأكد يمكننا فتح الاكسبلور ا اي متصفح ونذهب الى
السورس لمشاهدة النتيجة .. يبقى علينا تعديل الملف بواسطة اي برنامج محرر مثل الدرم ويفر او الفرونت بيج
http://pxlwork.com/img/px8.gif
المرحلة السادسة تصدير الفايل الى HTML من خلال File ثم Save Optimized As
http://pxlwork.com/img/px7.gif
المرحلة الاخيرة انتهينا من تصدير الملف ولنتأكد يمكننا فتح الاكسبلور ا اي متصفح ونذهب الى
السورس لمشاهدة النتيجة .. يبقى علينا تعديل الملف بواسطة اي برنامج محرر مثل الدرم ويفر او الفرونت بيج
http://pxlwork.com/img/px8.gif
اخير يوفر Dreamweaver CS3
الكثير من الاشكال لاخراج موقعك تصميم متوافق وسلس بcss
http://seifss.000webhost.com/files/bm3nviuhj76xk9k 5hs4g.gif
http://seifss.000webhost.com/files/3ngz3w2ufxar6e1 bxxlj.gif
اذا ييستاهل الموضوع نبي تقييمك
هذا موضوع يشمل مواضيع مميزه في الشبكه يقنعك با الابتعاد عن الجدال في تصميمك واستخدام التصميم بcss او بطريقة الانماط
كلنا نعلم أن استخدام الجداول من أول و أهم المهارات التى يتعلمها مصمم المواقع
فيتعلم كيف يقوم بإنشاء جداول لتنسيق الصفحة، و يضع الكثير من الجداول بداخل بعضها (nested tables) حتى يحصل على الشكل الذى يريده
و لكن هل سألت نفسك، هل هذه هى أفضل وسيلة لتنسيق الصفحات؟
لنجيب عن هذا السؤال دعنى أسألك سؤالا آخر، هل كانت لديك صفحة كبيرة مليئة بالجداول و أردت أن تعدل شيئًا فى الكود؟
لابد أنك قد وجدت الكثير من <td> , </td> , <tr> , </tr> فلا تعلم كل واحد منها لأى خلية فى أى جدول
و ماذا لو عدلت فى الكود، و عن طريق الخطأ وضعت <td> فى غير مكانها؟
يتغير شكل الصفحة تمامًا و ينهار التصميم، فتحاول البحث هنا و هناك عن مكان هذا الـ <td> البائس
و قد يحالفك الحظ، أو ينتهى الأمر بإعدة تصميم الصفحة من البداية !!
مأساة ...
أما المشكلة الحقيقية فهى حين تتجرأ و تفكر فى تغيير تصميم موقعك كله ...
عليك استخراج البيانات من الجداول فى كل الصفحات و إعادة تعبئتها فى جداول جديدة للتصميم الجديد
سنفترض أن موقعك متوسط الحجم (مثلا 200 -500 صفحة)
أظن الموضوع متعب لدرجة أنك قد تتوب عن فكرة تغيير الموقع أصلا !!
إذن فنحن متفقون على أنه على الرغم من أن الجداول تقوم بتنسيق الصفحات بشكل مناسب و لكنها ليست الحل الأمثل
و لكن ما البديل؟
قبل أن أجيب دعنى أسألك، هل يمكنك أن تخبرنى ،بنظرة الخبير (دون رؤية الكود) ما أقل عدد من الجداول يمكن أن تحتويه صفحة مثل هذه:
http://www.csszengarden.com
كم قلت؟
:)
لا يوجد بها أية جداول على الإطلاق
لا تصدق؟
افتح كود الصفحة و تأكد بنفسك
و ماذا عن هذه الصفحة؟
http://www.csszengarden.com/?cssfile=/151/151.css&page=0
و هذه؟
http://www.csszengarden.com/?cssfile=/096/096.css&page=6
و هذه؟
http://www.csszengarden.com/?cssfile=/148/148.css&page=0
و هذه؟
http://www.csszengarden.com/?cssfile=/149/149.css&page=0
وهذه؟
http://www.csszengarden.com/?cssfile=/088/088.css&page=7
افتح تلك الصفحات و تأكد منها و سأنتظرك هنا حتى تعود...
حسنًا ، هل عدت؟ ما رأيك؟
ليست المفاجأة أن هذه الصفحات لا تحتوى على جداول فحسب، و لكن أن كل الصفحات السابقة لها نفس كود HTML تمامًا !!!
كل الفرق بينها أن لكلٍ منها ملف css مختلف
كل التغيير فى الألوان و الصور و التنسيق و الخط ...إلخ موجود فى ملف واحد هو ملف css
ذلك الموقع يوجد به أكثر من 150 تصميم مختلف لنفس صفحة HTML !!
و هل فتحت كود الصفحة؟ كيف يبدو؟
كود بسيط و واضح هكذا
<p class="p1">بعض النص هنا</p>
فقط بلا تعقيدات و لا
<table width="100%" align="center" border="1">
<tr>
<td>بعض النص هنا</td>
</tr>
<table>
انظر كيف تبدو الصفحة دون css
http://www.csszengarden.com/zengarden-sample.html
إذن كيف استطاعوا فعل هذا؟
يستخدم هذا الموقع تقنية css positioning، حيث يستخدم كود html بسيط و يضع النص داخل وسوم (tags) مثل p , div , span , h1 , ul , li , ...إلخ
ثم يحدد فى ملف css كيف يبدو النص داخل هذه الوسوم
و بالتالى يظل الكود بسيطًا ، سهل التعديل، خفيف و سريع التحميل
ثم ماذا لو أردت أن تقوم بتغيير تصميم الموقع بأكمله؟
لن تمس صفحة html واحدة
كل ما عليك تعديل ملف css واحد و يتغيير تمامًا شكل الموقع كله
بهذه الطريقة تكون قد فصلت تمامًا المحتوى عن التصميم و سهلت التعديل فيهما، و هذا هو الاتجاه فى الفترة القادمة ، و هذا ما أشارت إليه توصيات www.w3c.org
فالجداول كان المقصود من وجودها عرض بيانات مجدولة و ليس تنسيق الصفحات
لن أخوض هنا فى تفاصيل كيفية تطبيق هذه الطريقة ، و إنما يهدف هذا الموضوع إلى لفت الانتباه إلى هذه التقنية، و أترك التفاصيل لهذه الروابط:
0000000000000000000000000000000
فاصل اعلاني -------------------------------------------
ِشاهد فن الفوتوشوب
WIDTH=425 HEIGHT=350
0000000000000000000000000000000
عدنــــــــــــــــــــا
هذه بعض المواقع التى تعطى فكرة بسيطة عن CSS
http://www.westciv.com/style_master/academy/css_tu torial/
http://www.brainjar.com/css/using/
http://www.wpdfd.com/editorial/basics/index.html
http://www.createwebmagic.com/css101/whati...fb329 4e84ea30a0
http://www.communitymx.com/content/article...A8701 3F0E8B6A50
http://www.digital-web.com/articles/css_101/
http://www.w3.org/TR/CSS21/
و هذه بعض المواقع لمناقشة الموضوعات الأكثر تقدمًا
http://css.maxdesign.com.au/index.htm
http://www.brainjar.com/css/positioning/
http://www.digital-web.com/articles/conver..._a_page_to_css/
http://www.w3.org/TR/REC-CSS2/box.html
http://www.positioniseverything.net/index.php
http://cssvault.com/resources.php
هذه مواقع تقدم تنسيق جاهز للصفحات بأشكال مختلفة يمكنك استخدامها مباشرة
http://intensivstation.ch/css/template.php
http://www.glish.com/css/#techniques
http://www.bluerobot.com/web/layouts/
http://www.thenoodleincident.com/tutorials...sson/ boxes.html
http://www.wannabegirl.org/firdamatic/
و هذه صفحات بها الكثير من الروابط الأخرى
http://www.dezwozhere.com/links.html
http://www.d.umn.edu/itss/support/Training...desig n/css.html
http://www.cbel.com/style_sheets/
و هذا موقع رائع به الكثير من المقالات التى غيرت نظرتى لتصميم المواقع
http://www.alistapart.com/topics/css/
و موقع سردال كان من المواقع العربية الرائدة فى تبنى هذه التقنية
http://www.serdal.com/css
و هذا ملف لشرح CSS باللغة العربية
( إعداد : سامى محمود الرباعية )
http://www.cb4a.com/book/netpro/CSS/css.htm
و هذا موقع يقدم دروسًا باللغة العربية
http://www.c4arab.com/showasection.php?lssid=115
و هذه مواقع أخرى مفيدة
http://www.w3schools.com/css/default.asp
http://www.htmlhelp.com/reference/css/
هذا كتاب من أفضل الكتب التى صدرت فى هذا المجال
More Eric Meyer on CSS
http://babyblue.thuthao.info/modules.php?n...=arti cle&sid=53
و الآن، هل ستظل تستخدم الجداول؟
بعد الفاصل هناك طرق سهله للاستخدام css بسهوله
0000000000000000000000000000000
فاصل اعلاني----------------------------------------
موقع اكوودا رائع
http://www.dhtmlgoodies.com
يسير على نهج dynamicdrive
0000000000000000000000000000000
عدنــــــــــــــــــــــ ـــا
درس تحويل ملف بي اس دي الى الى سي اس اس في اقل من
30 ثانيةاقدم لكم درس خفيف وسريع وهو تحويل ملف بي اس دي الى الى سي اس اس في اقل من
30 ثانية :nice:
اولا نقوم بإستيراد الموقع اللي صممناه على الفوتوشوب من خلال
قائمة file ثم open ونحدد الفايل
http://pxlwork.com/img/px1.gif
http://pxlwork.com/img/px2.gif
المرحلة الثانية نقوم بتعديل الفايل عبر ايميج ريدي : من قائمة file نختار Edit in imageready
http://pxlwork.com/img/px3.gif
المرحلة الثالثة تقطيع الصفحة من خلال اداة sliceTool
http://pxlwork.com/img/px4.gif
بعد الانتهاء من تقطيع الملف نقوم بوضع اعدادات slice قبل تصدير الملف الى html
من خلال الذهاب الى قائمة file ثم output settings ثم نختار slice
http://pxlwork.com/img/px5.gif
المرحلة الخامسة نغير الـ Generate Table الى Generate CSS ثم نحدد Referenced
.. طبعا هذا نتركه للخبراء
http://pxlwork.com/img/px6.gif
المرحلة السادسة تصدير الفايل الى HTML من خلال File ثم Save Optimized As
http://pxlwork.com/img/px7.gif
المرحلة الاخيرة انتهينا من تصدير الملف ولنتأكد يمكننا فتح الاكسبلور ا اي متصفح ونذهب الى
السورس لمشاهدة النتيجة .. يبقى علينا تعديل الملف بواسطة اي برنامج محرر مثل الدرم ويفر او الفرونت بيج
http://pxlwork.com/img/px8.gif
المرحلة السادسة تصدير الفايل الى HTML من خلال File ثم Save Optimized As
http://pxlwork.com/img/px7.gif
المرحلة الاخيرة انتهينا من تصدير الملف ولنتأكد يمكننا فتح الاكسبلور ا اي متصفح ونذهب الى
السورس لمشاهدة النتيجة .. يبقى علينا تعديل الملف بواسطة اي برنامج محرر مثل الدرم ويفر او الفرونت بيج
http://pxlwork.com/img/px8.gif
اخير يوفر Dreamweaver CS3
الكثير من الاشكال لاخراج موقعك تصميم متوافق وسلس بcss
http://seifss.000webhost.com/files/bm3nviuhj76xk9k 5hs4g.gif
http://seifss.000webhost.com/files/3ngz3w2ufxar6e1 bxxlj.gif
اذا ييستاهل الموضوع نبي تقييمك