- الرئيسية
- ما الجديد !
-
الصفحات▼
الصفحات
ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90%
-
06-01-2011 03:13 صباحاً
-
معلومات الكاتب -
اولاً : أحب أن أتقدم بإعتذاري إلي كل زوار و أعضاء و مشرفي و مديري المنتدي الكرام عن هذه
الغيبة الطويلة.....و كما وعدتكم عدت بقوي و بأقوي و أشمل موضوع في تاريخ نسخ المنتديات العربية و العالمية...........
لكل من أراد دعم النسخة و لم يحترف التصميم بعد....و لم يجيد تصميم الإستايلات أو التقطيع أو التوزيع أو حتي أضافة اللمسات الجمالية النهائية للإستايل...
أقدم لكم الشرح الشامل و الكامل الذي لم يحدث من قبل لصنع إستايل للنسخة من بداية تعلم تصميم النسخة في الفوتوشوب مروراً بالتقطيع و التوزيع بالفرونت بيج أو الديم ويفر مع شرح أساسيات كل منهما و شرح الـ Html و التوزيع بالــcssـ مروراً بالتعديل علي الـCssـ ثم اللمسات الإحترافية النهائية من تعديل القوالب و التأطير و غيره الكثير و الكثير سيكون الموضوع الأشمل و الأول من نوعه
حيث يدخله من لا يعرف شئ عن التصميم
يخرج محترف تصميم إستايلات الـPbboardــ بنسبة تتعدي الـ90%
سيقسم الشرح لأكثر من جزء و لن يتم في نفس الوقت (هذه مجرد مقدمة أو إعلان) و سيتم وضع الدروس تباعاً إن شاء الله...
● هناك موضوع لمتابعة المشاكل و التطبيقات علي الشرح ●
■ ملحوظة : هذا الموضوع ليس مكاناً لطرح الأسئلة علي الشرح بل الأسئلة و المشاكل و التطبيقات تطرح في الموضوع السابق ذكره
[frame=1]■ ●○ الفهرس ○●■[/frame]
[frame=7]
■مقدمة عن التصميم و الفرق بين تصميم موقع و تصميم إستايل (للمبتدئين)
■الفوتوشوب مقدمة و تاريخ (زيادة علم فقط)
■الفوتوشوب (للمبتدئين)
■الفوتوشوب (لمسات إحترافية)
■تصميم الإستايل بالفوتوشوب و تقطيعه (مره متمدد بعواميد و مره غير متمدد بدون عواميد)
■ شرح الـHTML + بعض الأكواد الجديده من HTML 5
■ شرح الـCSS + بعض الوسوم الجديده
■ مقدمة عن برامج تحرير المواقع (Front page - Dream waver)
■ شرح الـFront page (للمبتدئين)
■شرح الـDream waver (للمبتدئين)
■ توزيع الإستايل (HTML)
■ توزيع الإستايل (CSS)
■ تعديل ملف الـ CSS
■ لمسات جمالية في ملف الـCSS
■ تعديل القوالب و المسات الجمالية فيها
■ بعض الإضافات و الجماليات
■ بعض المشاكل الشائعه و حلولها
■ الختام ■[/frame]
أتمني أن نكون عند حسن الظن أسألكم الدعاء
-
تم تحرير الموضوع بواسطة :isma3eliano بتاريخ: 13-02-2012 05:12 مساءً
سبب التعديل : التنسيق
-
-
ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90%06-01-2011 03:14 صباحاً [1]
-
معلومات الكاتب
-
■ مقدمة عن التصميم و الفرق بين تصميم موقع و تصميم إستايل (للمبتدئين) ■
التصميم...هو أول ما يراه المستخدم و الزائر و عضو الموقع أو المنتدي فهو الشئ الذي يجذبه أولاً للموقع قبل المحتوي و هو الذي يعطي إنطباع أولي للزائر سواء بالإيجاب أو السلب و هو (الأساس أن يكون) يعكس محتوي الموقع في أغلب الأحوال سواء كان مختص ببرامج أو ألعاب أو عام ...إلخ و هو يعكس إحترافية المصمم و يفضل عدم إستخدام الكثير من الفاشات أو الأشياء الإحترافية المبالغ فيها لأنه يثقل التصميم و هذا غير مميز في كل الأحوال فالمبالغه في الشئ غير جيده مهما كانت جميله.
أما عن الفرق بين تصميم موقع و منتدي..فهو أن تصميم الموقع يكون تصميم صور و فلاشات ثم ترتيبها و وضعها بإستخدام برنامج مثل الفرونت بيج أو الدريم ويفر أما المنتدي فيصمم بهذه الخطوات :
- تصميم الإستايل بالفوتوشوب
- تصميم فلاشات إذا أردنا
- توزيع التصميم علي الفرونت بيج
- توزيعه علي القوالب الخاصة بنسخة المنتدي
- تعديل الـ CSS و بعض القوالب إذ أردت
-
تم تحرير المشاركة بواسطة :isma3eliano بتاريخ:07-02-2011 01:58 مساءً
-
-
ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90%06-01-2011 03:15 صباحاً [2]
-
معلومات الكاتب
-
■ الفوتوشوب مقدمة و تاريخ (زيادة علم فقط) ■
يعد برنامج الفوتوشوب من أقوى برامج تحرير ومعالجة الصور من إصدار شركة ADOBE وكان الاصدار الرسمي الاول لهذا البرنامج في عام 1990 ، الفوتوشوب عبارة عن برنامج معالج للصور ببساطة كان يستخدم في التعديل على الصور وإضافة بعض اللمسات والرتوشات على الصور اي كانوا يأخذون الصور من الكاميرا ويعالجونها بواسطة الفوتوشوب ومع مرور الزمن تطور هذا البرنامج واضيفة له خصائص جديدة ووظائف عديدة حتى يلبي رغبة مستخدميه وشيئ فشيئ اصبح الفوتوشوب البرنامج القوي ذو الإمكانيات الكبيرة التي يلبي احتياجات المستخدمين سواء مصورين او مصممين أو رسامين أو متعلمين حيث اصبح من خلاله تستطيع إنشاء صفحات الويب الشخصية وكذالك عمل واجهات ولوحات المحلات وكذالك معالجة الصور المسحوبة عن طريق الاسكنر أو الملتقطه بواسطة الكاميرا
الفوتوشوب هو أحد برامج شركة أدوبي الشهيرة .. وهذا البرنامج هو برنامج خاص بعمل الرسوميات ، وهو البرنامج الأول في العالم من ناحية القوة وكثرة المستخدمين وكثرة الدرس بالانترنت له ، هذا البرنامج يمكنك من إنشاء الصور والتصاميم التي يمكنك استعمالها فيما تريد من أمورك . Adobe Photoshop tutorials الفوتوشوب برنامج أكثر من رائع لما له من المميزت والقدرات الفائقة واللا محدودة في معالجة الصور ووضع الإضافات عليها بدون أية صعوبات وبواقعية شديدة جداً.... بمجرد إدخالك الصورة إلى الفوتوشوب فإنك تبدأ في بناء عمل فني له لمستك وشخصيتك وذلك من خلال إضافة المزيد من الرسوم عليها أو بدمج الصورة مع صور أخرى أو من خلال قص أجزاء ووضعها مع أجزاء أخرى كما أنك تستطيع تصحيح الألوان وزيادة السطوع والحدة او زيادة التعتيم فيها لتحصل في النهاية على لوحة فنية تجسد خيالك وإبداعك ومهارتك في التصميم لكي تعرضها على الانترنت أو لعرضها بإستخدام البرامج الخاصة بعرض الشرائح أو بطباعتها . Adobe Photoshop tutorials ويقوم الفوتوشوب بتحويل الصورة إلى نقط مربعة صغيرة تسمى البكسلات ويسمى الرسم بالكامل أو الصورة ... صورة نقطية . والبكسل هو أصغر عنصر في الصورة وتقاس درجة وضوح الصورة بعدد البكسلات الموجودة في البوصة المربعة ومثال على ذلك ( إذا كانت درجة وضوح الصورة هي 28 نقطة - بكسل - في البوصة فهذا بعني أن كل بوصة في الصورة تحتوي على 28 صفاً و 28 عموداً من البكسلات أي ما يساوي 784 بكسل وبهذه الطريقة تستطيع معرفة درجة الوضوح للصورة ) . Adobe Photoshop ولهذا البرنامج تأثريات رائعه وفوائد رائعه في مجالات عده : Adobe Photoshop - قد يشاهد البعض منا بعض الاعلانات المتواجدة في الصحف أو الاعلانات المعلقة في الشارع أو إذا كنت من رواد كرة القدم قد تجد تلك الاعلانات هناك وقد تتسآئل عن كيفية تصميم هذه الاعلانات وماهو البرنامج الذي تم تصميم هذه الاعلانات به , والاجابة أن هناك برامج عديدة ولكن أيضا الفوتوشوب يؤدي الغرض وبشكل احترافي Adobe Photoshop - ربما تمنيت تصميم شعار لمصنعك أو شركتك أو لنادي ثقافي أو رياضي داخل جامعتك أو حتى لموقع على الانترنت ستجد الفوتوشوب يؤدي الغرض . Adobe Photoshop - قد تكون لك اهتمامت في تصميم المواقع ولكن ببرامج التصميم العادية كالفرونت بيج وهذا البرنامج لايرضي غرورك من ناحية التلوين والاشكال والمظهر الخارجي للموقع ولكن الفوتوشوب يوفر لك بعض الاداوت المساعدة في تصميم المواقع وهذه نماذج لبعض المواقع المصممة بالفوتوشوب أو ربما رغبت في إضافة بعض التأثيرات على صورك الخاصة .. كإعادة الشباب لكهل أو عجوز وذلك بإزالة التجاعيد من الوجه... كما يمكن للفوتوشوب إعادة ترميم الصور القديمة والمتكسرة وتلوينها وجعلها تنبض بالحياة والألوان
كان هناك بروفيسور يدعى " جلين كنول " في جامعة ميتشيجان ، كان جلين مولع بالصور فأنشأ معمل في سرداب منزله ، كذلك كان يعشق التكنلوجيا و مأسور بظهور الكمبيوتر الشخصي ، كان له إبنان توماس و جون و رثا صفات والدهم ، اهتما بالمعمل و اضافا جهاز Apple II plus للمعمل ...
توماس كان يهوى التصوير و إظهار الصور و توازن الألوان ، و بينما كان توماس يتعلم معالجة الصور في معمل والده ، كان جون يعبث بالكمبيوتر الشحصي لوالده الذي تم استبداله بجهاز ماكنتوش في عام 1984 م و ذلك كان إنجاز مهم لجون ، توماس كان مهتما بمعالجة الصور و بدأ باستخدام الكمبيوتر في المعالجة الرقمية ففي عام 1987م اقتنى توماس جهاز Apple Macintosh Plus ليساعده في شهادة الدكتوراه " معالجة الصور الرقمية " هنا بدأ نواة البرنامج الشهير فوتوشوب ، حيث أن الجهاز الجديد لم يلبي احتياجات توماس في تدرج الألوان فقام بكتابة دالة Subroutine لحل مشكلة تدرج الألوان في الصور الرقمية ، بدأ جون و توماس بتكثيف عملهم و توحيد جهودهم في جمع تلك الأكواد المتناثرة لإنشاء برنامج متكامل لمعالجة الصور الرقمية ، سعادة توماس و جون بما حققوه دفعهم لطلب المزيد ، كالقدرة على تخزين الصور بصيغ مختلفة ، و إمكانية فتح ملفات الصور في برماج أخرى و طباعتها ، و غير ذلك من أفكار جديدة ، بعد عدة أشهر من المحاولات تم إنتاج Image Pro في عام 1988 م ، لكن بعد ذلك بدأت بع العراقيل التي أخرت ظهور الفوتوشوب كانشغال جون بانتظار مولودة الجديد و حاجتهم لدعم المادي ، ظلت محاولاتهم البسيطة الى أن طرح جدن فكرة عرض ما وصلوا إليه للشركات ، شركة واحدة فقط أبدت الاهتمام الجدي بالبرنامج و هي شركة Barney Scan ، و هنا بداية الفوتوشوب حيث تم إصدار أول نسخه من Adobe Photoshop1.0 في فبراير 1990م بعد الاتفاق مع مجموعة Adobe ، و منذ ذلك الحين بدأ تطور البرنامج الى أن تم إصدار Photoshop8.0 هذ العام
و هاهي حكاية تحول معمل بسيط في سرداب منزل عائلة كنول إلى أشهر برنامج لمعالجة الصور
الرقمية !
م تم اصدار اول برنامج بسيط جدا واطلقوا عليه اسم Display
توالد الخبرات بعد ذلك وقاما بعمل نسخة محدثة من هذا البرنامج واطلقوا عليه Image Pro
وكان من نفس السنة ايضاً 1987 م .
وتعاقدوا بهذا البرنامج مع شركة بيرني سكان BarneyScan لتوزيع البرنامج مع منتجاتها.
وفي عام 1989 تعاقدوا مع شركة ادوب Adobe ببيع حقوق البرنامج لها .
في عام 1990 تم عمل الإصدار الأول والنسخة الأولى من برنامج الفوتوشوب Adobe Photoshop
صورة اول نسخة من برنامج الفوتوشوب Apple ماكنتوش فقط .
في نفس العام 1990 تم تطوير النسخة وعمل الاصدار الثاني (نظام الماكنتوش فقط) Apple
وهذه صورة عن الاصدار الثاني :
بعد ذلك ظهر الاصدار 2.5.1 ليعمل على انظمة البي سي وعلى نظام الويندوز .
في عام 1994 م تم اصدار النسخة الثالثة من البرنامج وبه خصائص اللير
وهذه صورة له :
تم التطوير بعد ذلك الى النسخة الرابعة من البرنامج وذلك في سنة 1996 م
صورة للنسخة الرابعة :
في عام 1998 تم اصدار النسخة النهائية من الإصدار الخامس الذي حقق نجاح كبير
وهنا النسخة 5.5 مع دعم اتصال انترنت .
في عام 2001 تم عمل النسخة الجبارة من الفوتوشوب وسمي بالاصدار السادس
وكان من افضل البرامج في ذلك الوقت
وبعد ذلك تم اصدار النسخة الجبارة النسخة السابعة من هذا البرنامج مع برنامج Image ready
وكان من اهم البرامج المتخصصة بالصور وصيغهآ .
Creative Studio
من افضل النسخ
واختصارة CS تم عمل هذه النسخة الجبارة في عام 2004 م ويعتبر هو النسخة الثامنة من البرنامج
وفي عام 2006 تم انزال النسخة التاسعة من البرنامج او ما يعرف CS 2
واصدار النسخة العاشر او ما يعرف بـ Cs 3
وADOBE PHOTOSHOP CS4
و في عام 2010 - 2011
نزول النسخة الأقوي حتي الآن CS5
-
تم تحرير المشاركة بواسطة :isma3eliano بتاريخ:22-10-2011 05:15 صباحاً
-
-
ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90%06-01-2011 03:16 صباحاً [3]
-
معلومات الكاتب
-
[frame=7]■ الفوتوشوب (للمبتدئين) ■[/frame]
ما لم أشرحه .. قد لا نستخدمه في الشرح و قد نقوم بشرحه مفصلاً فيما بعد
-
تم تحرير المشاركة بواسطة :isma3eliano بتاريخ:22-10-2011 01:02 مساءً
-
-
ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90%06-01-2011 03:18 صباحاً [4]
-
معلومات الكاتب
-
تم تحرير المشاركة بواسطة :isma3eliano بتاريخ:31-10-2011 02:07 صباحاً
-
-
ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90%06-01-2011 03:19 صباحاً [5]
-
معلومات الكاتب
-
تم تحرير المشاركة بواسطة :isma3eliano بتاريخ:13-02-2012 06:17 صباحاً
-
-
ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90%06-01-2011 03:20 صباحاً [6]
-
معلومات الكاتب
-
[frame=7]■ شرح الـHTML + بعض الأكواد الجديده من HTML 5 ■[/frame]
سأستعين في الشرح بهذا الموقع - الأشهر عالمياً -
http://www.w3schools.com/html/
تتكون الـ HTML من Tags
منها من يكون له بداية و نهاية كهذا الذي يبدأ به الـHTML
CODE<html> </html>و أيضاً ما يقفل في نفس الTag لا يتكون إلا من Tag واحد مثل
Tag الصورة
CODE<img src="..." />
ماذا تحتاج لتبدأ كتابة HTML ؟
تحتاج أي محرر نصوص كالـNotebad مثلاً - سنقوم بإستخدامه -
البداية ...
قم بفتح الـNotebad و قم بكتابة التالي
CODE<html> <head> </head> <body> </body> </html>
ثم قم بالحفظ كما في الصورة
لنحلل سويًا ما كتبناه من أكواد
نلاحظ التالي :
كل Tag يتكون من مقدمة و نهاية Tag للمقدمة و Tag للنهاية ..مثل..
CODE<p>Paragraph</p>
هذا مثلاً Tag الفقرة Paragaph فالمقدمة [p] و النهاية نزود / بعد > و هكذا .
هناك شئ آخ بسيط لاكن مميز
عندما نكتب أي أكواد HTML نكتبها هكذا
CODE<html> <head> </head> <body> <p> The ISlam </p> </body> <html>
- نلاحظ التالي :
- الـhtml indent : و هو أن نراعي مسافة بين كل كون وما بداخله من أكواد فالـ<html> داخله الـ<head> و الـ<body> و الـ<body> داخله الـ[p] و الـ[p] داخله The ISlam
- الترتيب : ترتيب الأكواد بمعني أن كل كود يكون داخله الآخر بين قفل الكود وفتحه فتفتح الكود ثم تقفله قبل فتح أي كون آخر داخله أو خارجه يعني تكتب <html> ثم </html> و بينهما <head> ثم </head> ولا تكتب <html> ثم <head> ثم تغلق الإثنين </head> ثم </html> قد تعتقد أن هذا أسهل لكن فيما بعد سيجلب لك الكثير من المشاكل لا يوجد أفضل من النظام .
كما أتفقنا أي ملف HTML ممكن أن يكتب في الـNotepad أو أي محرر نصوص
و يتم حفظة بصيغة .html كما في الصور السابقة
و أتفقنا أيضًا أن أي ملف Html يتكون من
CODE<htm> <head> </head> <body> </body> </html>
و يكون داخل الـ<head> يتم وضع أكواد معينه سنبدأ بها إن شاء الله
و هذه الأكواد لا تظهر في الصفحة
أما داخل الـ<body> يكون هناك كل ما يظهر في الصفحة من نصوص وصور .. إلخ
سنبدأ في شرح الأكواد للـ HTML
نبدأ من أعلي الـ <head>
يكون ما بداخل الـ<Head>
كما ذكرنا سابقًا كل ما لا يظهر في الصفحة من محتوي و هذه أهم أكواد الـ <head>
هذا هو العنوان الذي يظهر في المتصفح في الأعلي
CODE<title>ISMa3eliano.Com</title>
هذا هو الـ Encoding وهو خاص بالكلام و اللغة الأفضل تبقيه هكذا
CODE<meta http-**="Content-Type" content="text/html; charset=utf-8" />
هذا هو الـFavicon وهي الصورة التي تظهر في الموقع في الأعلي علي المتصفح نفسه بجوار العنوان Title
CODE<link rel="shortcut icon" href="images/ico.png" />
هذه الأكواد هامه جدًا بخصوص محركات البحث فهي التي تدل المحركات كجوجل علي محتوي الموقع وهذا مثال تضع ما تريد من كلمات بينها فاصله كما هو موضح لكن لا تضع كلمات كثيرة حاول تكون مناسبه وموجزة مثلًا 15 كلمة لأن الكلمات الزيادة تؤثر بشكل عكسي
CODE<meta name="keywords" content="تيشرتات,ملابس,شرابات,تصميمات,هادفة, ,بالعربي,باللغة,العربية,مريحة,معاني,امل,تفاؤل,نهضة,حلم,قديمة,M3any,msr,egypt,مصر,الثورة,store" />
هذا هو الـوصف للموقع وهو أيضًا مفيد لمحركات البحث وأعتقد علي حسب علمي أنه أيضًا يجب أن لا يطول حتي لا يجئ بشكل عكسي
CODE<meta name="description" content="معاني تيشرت .. نقدم كل ما هو هادف، تصميمات جديدة باللغة العربية،بايدى عابرة، خامات متميزة مريحة في الاستخدام." />
هذا هو الـ Css وسنقوم بدراسة الـcss لاحقًا في هذا الموضوع إن شاء الله
CODE<link rel="stylesheet" type="text/css" href="css/style.css" />
بعد الإنتهاء من الـ <head>
نغلقه </head>
ونبدأ في محتوي الصفحة نفسه
<body>
أولًا : ما هو الـ <body> و ما محتوياته
<body> هو tag يبدأ و يغلق في
<body>
المحتوي
</body>
و كما ذكرنا سلفًا هو الـTag الذي بداخله كل محتويات الـHtml
التي تظهر في الصفحة نفسها
مثل:صور و نصوص .. إلخ
أكواد الـ<body> كثيرة جدًا لا يمكن حصرها ..
فسنقوم بشرح أهمها والأساسي منها
ملحوظة : لست مُطالب بحفظ كل أكواد الـHtml بل أحفظ أهمها بالممارسه ليس إلا
أما الباقي فجوجل موجود
جاري إكمال الشرح....
[frame=1]HTML 5[/frame]
تحميل جميع الصور HTML5
-
تم تحرير المشاركة بواسطة :isma3eliano بتاريخ:22-02-2012 03:35 مساءً
-
-
ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90%06-01-2011 03:22 صباحاً [7]
-
معلومات الكاتب
-
تم تحرير المشاركة بواسطة :isma3eliano بتاريخ:11-07-2011 03:02 مساءً
-
-
ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90%06-01-2011 03:23 صباحاً [8]
-
معلومات الكاتب
-
تم تحرير المشاركة بواسطة :isma3eliano بتاريخ:11-07-2011 03:02 مساءً
-
-
ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90%06-01-2011 03:25 صباحاً [9]
-
معلومات الكاتب
-
-
ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90%06-01-2011 03:28 صباحاً [10]
-
معلومات الكاتب
-
-
ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90%06-01-2011 03:30 صباحاً [11]
-
معلومات الكاتب
-
-
ادخل مبتدأ تخرج محترف تصميم إستايلات PBBoard بنسبة تزيد عن 90%06-01-2011 03:32 صباحاً [12]
-
معلومات الكاتب