loulou ange
10-30-2013, بتوقيت غرينيتش 01:39 PM
الجزء الاول: تنبيهات + التخطيط الشامل + نصائح قبل تطبيق الدرس مفصل
ننتقل معكم اخوانى الاعضاء مشتركى الدورة إلى أقوى وأطول درس مفصل راح تشوفه على النت بإذن الله ...
تم تجهيز هذا الدرس مفصل فى 8 أيام متواصلة بمعدل 5 ساعات يوميا
أكثر من تصميم الموقع نفسه اللى راح نتكلم عنه :eek:
الدرس مفصل راح يكون مٌطول, لذلك لابد من قراءة الدرس مفصل مرة واثنين وثلاثة
وبتركيز شديد ........
والدرس مفصل مقسم خمسةأجزاء:
1-التخطيط للموقع وتحديد المطلوب فيه .
2- التصميم والتقطيع للموقع على الفوتوشوب.
3- ملفات الموقع وصفحاته html وشرح طريقة أكوادها بالتفصيل الممل +jquery
3- ملف الcss الخاص بالموقع وشرح طريقةه بالتفصيل الممل.
5- المثال العملى وتجربة الموقع الذى تم تنفيذه بحمدالله
تنبيهات هامه جدااااااا قبل تطبيق الدرس مفصل:
1-الدرس مفصل لابد من قراءتة مرة واثنين وعشرة وعدم التسرع فى التطبيق الا قبل
فهم كل جزء بإمعان
2- الدرس مفصل ليس لتعليمك مهارات الفوتوشوب, فتطبيقك لابد اون تكون على دراية باستخدام الفوتوشوب, وهذه لها دروس منفصلة خارج الدورة يمكن التعلم منها
3- الدرس مفصل راح تستفيد منه حركات جديدة فى الفوتوشوب
4- الدرس مفصل لا يهمنى فيه ان يكون الناتج النهائى لتطبيق دقيق,
لكن ما يهمنى ان تفهم الفكرة فقط, فالاحتراف لن يأتى من درس مفصل واحد
فلابد من التطبيق واعمال اكثر من تصميم
ملاحظه اخيرة : فكرة الدرس مفصل مقتبسة من احد مطورى الويب الاجانب
وهذا هو مٌعرفه على موقع devian art (http://fixxxxx.deviantart.com)
وهو شخص محترف جدا ويعمل باحد الشركات الكبرى بالusa وعجبنى طريقة تصميمه, واحببت ان اتعلم منه, لانه اقل ما يقال عنه انه professional
-------------------------------
الجزء الثانى: التصميم على الفوتوشوب
اولا: تنبيهات هامه جدااااااا قبل تطبيق الدرس مفصل
1-الدرس مفصل لابد من قراءتة مرة واثنين وعشرة وعدم التسرع فى التطبيق الا قبل
فهم كل جزء بإمعان
2- الدرس مفصل ليس لتعليمك مهارات الفوتوشوب, فتطبيقك لابد اون تكون على دراية باستخدام الفوتوشوب, وهذه لها دروس منفصلة خارج الدورة يمكن التعلم منها
3- الدرس مفصل راح تستفيد منه حركات جديدة فى الفوتوشوب
4- الدرس مفصل لا يهمنى فيه ان يكون الناتج النهائى لتطبيق دقيق,
لكن ما يهمنى ان تفهم الفكرة فقط, فالاحتراف لن يأتى من درس مفصل واحد
فلابد من التطبيق واعمال اكثر من تصميم
التصميم والتقطيع للموقع على الفوتوشوب.
نبدأ على بركة الله .......
اولا قبل كل شىء : لابد ان تعود نفسك فى جزء من هذا الدرس مفصل على كثرة التطبيق قبل انتاج الناتج النهائى
لانك لازم تثق انك راح تخطىء مره واثنين وعشرة قبل ان تجيد كل نقطة بالدرس مفصل
وانا نفسى فيه بعض عدم الاحترافية , وقد اكون لم اغطى بعض النقط فى شرح طريقة
الدرس مفصل بحكم ان الدرس مفصل يمكن من اطول الدروس اللى كتبتها على النت للان
منذ 3 سنوات منذ تعلقى بموضوع تطوير الويب
قبل تطبيقك : سوف يكون الناتج النهائى لملف psd بالشكل الاتى:
اولا: افتح الفوتوشوب وقم بعمل جديد
بمقاسات 1600 فى 1200 بكسل
قبل المباشرة فى العمل, لابد ان يكون شغلنا منظم ودقيق
لذلك سنحتاج لاستخدام المسطرة فى الفوتوشوب
اختار view من فوق ثم rulers
ولا تنسى ان نختار مقاس المسطرة بالبكسل
ثم سنقوم باستخدام المسطرة بعمل خطوط ارشادية فى تصميمنا
قم بعمل خطوط ارشاية بالظبط مثل انا مسوى
نبدأ من الان بعمل شغلنا........
اولا: تصميم القائمة العلوية status bar
اختار اداة رسم مستطيل rectangle tool ثم ارسم مستطيل فى الاعلى
بطول 50 بكسل
شوف....
ثم باستخدام اداة التدرج gradient tool سنقوم بعمل تدرج لهذا المستطيل
قم بعمل لير جديدة ثم قم بدمجها بعمل create clipping mask
ثم قم بعمل التدرج
بعد ذلك سنقوم بالكتابة على هذا الشريط العلوى status bar
ملاحظه هامه: فى التصميم سوف تلاحظ اننا سوف نكتب كلمات واشياء كثيرة
لكن عند الانتقال لدرس مفصل الhtml سوف تكون هذه الكلمات فى ملف html الخاص بالصفحة وليس مجرد كلمات مكتوبة على الصور
حتى يسهل تغييرها لاى كلمات فيما بعد
لذا وج التنبيه .......
نقوم الان بكتابة كلمة الترحيب
شوف عند الخط الارشادى 400 اكتب كلمة الترحيب
بعد ذلك سوف نقوم بعمل مستطيل خاص بالازرار الثلاثة:
دخول - خريطة الموقع - الاتفاقية
قم باختيار اداة رسم مستطيل ذو حواف دائرية rounded rectangle tool
ثم ارسم مستطيل من اول الخط الارشادى 600 الى الخط الارشادى 800
اختار اى لون بكيفيك , فانا لا يهمنى جمال التصميم الان بقدر ان تفهم الفكرة
لا تنسى الخط الفاصل بين الكلمات الثلاثة يمكنك عمله
بضغط shift + الزر اللى بجانب زر المسح backspace فوق enter
وشوف الحين الطبقتين الخاصة بهذ المستطيل:
قم باضافة بعض التأثيرات عليه........
الحين انتهينا من هذا.......
نكمل ......
الحين نسوى مستطيل البحث
اولا اختار custom shape tool لنقوم بعمل صورة مكبر
وباختيار نفس الاداة السابقة rounded rectangle tool
قم بعمل مستطيل واضف له بعض التأثيرات
انتهينا الحين من الجزء العلوى ...........
------------------------------------------------------------
ننتقل للجزء الموجود أسفل الجزء العلوى وهو الheader
قم باختيار اى صورة ثم اجبلها للفوتوشوب
ثم قم بنقلها لصفحة عملك اللى انت شغال عليها حاليا
وقم بتسيق طولها باستخدام ctrl+t بحيث تكون بداية الصورة
عند الخط الارشادى 50 ونهايتها عند 300
ولاخظ ان طبقة هذه الصورة سوف نقوم بعمل create clipping mask
للجزء العلوى
ثم سنقوم بالكتابة عليها عند الخط الارشادى 400
تمام الحين انتهينا من الهيدر header بكل سهولة ........
---------------------------------------------------------
ننتقل للجزء الاهم وهو المحتوى content
سوف نقوم برسم مستطيل باستخدام الاداة rectangle tool
ولكن قبل الرسم قم بعمل هذه الخطوط الارشادية
وقم برسم المستطيل عند هذه الابعاد
ثم قم برسم الخطوط الارشادية هذه ايضا حتى تحدد حدود كل شىء
شوف هذه الصورة لتفهم قصدى
فى مربع السلايد شو الخاص بعمل عرض سلايد شو
اجلب اى صورة , وقم بتظبيط مقاساتها بحيث تكون ابعادها داخل الخطوط الارشادية اللى قمنا بعملها فى الصورة السابقة
والحين سنقوم بعمل لير جديدة وراح تكون خاصة بعمل مستطيل ليعرض لنا
تعريف للصور كتابيا......
اختار اداة rounded rectangle tool
وارسم المستطيل , ثم باستخدام polygonal tool وجعل الجوانب 3
قم برسم مثلث بحيث يكون خاص بعمل السابق والتالى للصور
الحين خلصنا من السلايد شو......
----------------------------------------------------
ننتقل لكتابة كلمة رئيسية للموقع
ليست مهمه كثير....
شوف.....
-------------------------------------------------------
ننتقل لعمل الازرار الرئيسية للموقع.......
سوف نقوم بعمل مربعات حتى تكون عبارة عن ازرار الموقع
قم باستخدام اداة rectangle tool برسم المربعات الاتية
ولا تنسى ان تترك مسافة بسيطة بين كل مربع
ولا تنسى ايضا ان تقوم بعمل خط ارشادى حتى تكون الازرار على عرض واحد
يمكنك تكرار الطبقات بعمل ctrl+j
ملاخظه: فى اول زر على اليمين لو ليك خبرة فى الفوتوشوب,يمكنك استخدام
اداة الpen tool لحذف حدود اى زر
شوف
المهم....بعد رسم الازرار راح يصبح الشكل كالاتى:
بعد عمل هذه الازرار
قم بتجميل لير كل زر فى مجلد واحد
ثم بعد ذلك قم بالكتابة على كل زر, واضافة زر السابق والتالى
كما فعلنا سابقا......
تبقى لنا الفوتر.......
قم بعمل خط ارشادى
ثم اختار اى صورة مثل ما سوينا فى الهيدر header بالظبط
وضعه فى اسفل التصميم
اخر شىء سوى خلفية للصفحة
وذلك بعمل لير جديدة ووضعها اول لير(يعنى اول لير من اسفل)
وقم بجعل لونها ابيض يميل الى الرصاصى برقم #f3f1f3
بهيك نكون انتهينا من هذا الجزء
--------------------------------------
الجزء الثالث: كود code html
أولا:التخطيط للموقع وتحديد المطلوب فيه .
دائما تعودى عزيزى العضو, انه عندما تريد ان تقوم بتصميم وبرمجة موقع
ان تضع فى مخيلتك الفكرة التى تود عملها فى الموقع وتحدد المتطلبات اللى راح أسويها, واحفظ انى راح أسوى كذا وكذا وكذا.....الخ
وأيضا احضر ورقة وقلم وقم برسم شكل تصويرى لفكرة الموقع اللى راح تسويه قبل المباشرة فى العمل.
ومن منطلق هذا الكلام , راح أضع لكم مخطط الموقع اللى راح أسويه بإذن الله
شوف الصورة:
الصورة تتحدث عن نفسها ;)
فأنا قمت بعمل تخطيط للافكار اللى راح نسويها سويا بإذن الله
راجع المخطط ثم انتقل للمرحلة الثانية من الدرس مفصل معى..........
ثالثا: ملفات الموقع وصفحاته html وشرح طريقة أكوادها
دعونا نبدأ بتخطيط الموقع بhtml
راح أشرح طريقة كود code html الخاص بالموقع اللى راح نسويه بالتفصيل الممل
وعليك كل جزء تتعود تكتبه وتعرف فكرة الكود code.....
نبدأ بكتابة اول كل صفحة كما قلنا سابقا + الترميز
وتعريف بالميتا اللى راح بنضع فيها كلمات تخص محتوى موقعك
حتى تتعرف محركات البحث على محتوى موقعك .
وأيضا نكتب الكلمات الدلالية keywords الخاصة بموقعك
وتكتب تعريف باسم صاحب الكود code او الموقع author
شوف الكود code:
رمز Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <**** ************"Content-Type" content="text/html; charset=windows-1256" /> <**** name="keywords" content="vista-design, mtwer, advphp, برمجة, تصميم, دعم فنى" /> <**** name="description" content="موقع مطور التعليمى للدورات التعليمية المتخصصة لمطورين الويب!" /> <**** name="author" content="vista-design" /> <**** name="robots" content="all" /> <title>الموقع الشامل تطبيقا لدورة تصميم المواقع بإسلوب المحترفين </title> </head> <body> <!-- الكود code الرئيسى للموقع راح يٌكتب هنا --> </body> </html>
بعد هيك فيك ملفات خاصة بjquery راح نضيفها بين وسمى style لاحقا....
ننتقل بعد هيك للكود code الرئيسى اللى راح نقوم بعمله
وكل تعاملنا راح يكون بين وسمى body
ملاحظه: راجع الصورة فى الأعلى ثم تابع مرة أخرى معى....
اولا: div id status الخاص بخانة تسجيل الدخول ولنكات الموقع ومحرك بحث الموقع
أولا: الفكرة:
div id status بداخله : 1- div id statuscontent : خاص بفورم البحث
2- div id statuscommands : خاص برسالة الترحيب + لنكات الموقع
شوف فكرة الكود code:
رمز Code:
<div id="status"> <div id="statuscontent"> <form>فورم البحث راح نكتب كود codeه هنا</form> <div id="statuscommands"> راح نكتب رسالة ترحيب الموقع +لنكات الموقع </div> </div> </div>
الحين نريد كتابته كاملا ومنسق : فراح يكون هيك:
رمز Code:
<div id="status"> <div id="statuscontent"> <form action="#" method="post" id="search-form"> <p> <input type="text" name="query" value="بحث" /> <input type="submit" name="submit" value="Search!" /> </p> </form> <div id="statuscommands"> <p id="welcome">أهلا وسهلا,</p> <p id="actionlinks"> <a href="#" title="Login">دخـول</a> <a href="#" title="faqs">التعليمات</a> <a href="#" title="contactus">اتصل بنا</a> </p> </div> </div> </div>
وهذه صورته:
خلصنا من اول div وهو status
ننتقل للdiv اللى بعده
شوف صورة المخطط وكمل معى........
ثانيا: div id header الخاص بلوجو وعنوان الموقع.
الفكرة: div id header بداخله : -div خاص بعنوان الموقع واللوجو
شوف الكود code:
رمز Code:
<div id="header"> <div id="logo"> <h1><a href="#" title="home">vista-design</a></h1> <h2>technology</h2> </div> </div>
وهذه صورته:
http://i45.tinypic.com/28i9llk.png
وخلصنا من div الهيدر header
نكمل.......
ننتقل للdiv اللى بعده
ثالثا: div id content الذى يشمل ثلاثة div
div content-top-shadow -1
ul id tabs-2
div id message-3
div id slideshow-4
اولا: div content-top-shadow
رمز Code:
<div id="content-top-shadow"></div>
هذا الdiv راح نستغله وراح نقوم بعمل ظل تجميلى فوق مربع العرض للمحتوى
ثانيا: ul id tabs
رمز Code:
<ul id="tabs"> <li id="previous"> <a href="#previous" title="Previous"><</a> </li> <li id="home" class="current"> <a href="#home" title="Home">الرئيسية</a> </li> <li id="portfolio"> <a href="#portfolio" title="Portfolio">العروض</a> </li> <li id="about"> <a href="#about" title="About">عن الموقع</a> </li> <li id="contact"> <a href="#contact" title="Contact">اتصل بنا</a> </li> <li id="next"> <a href="#next" title="Next">></a> </li> </ul>
هذا الul خاص بازرار الموقع الرئيسية
من الرئيسية والعروض وعن الموقع واتصل بنا
,واكيد من معرفتك من html تعرف ان ul هى خاصة بعمل لست لاى شىء ازرار مقالات ترتيب ....الخ
ثالثا: بنسبة لdiv الmessage و الslideshow
سوف نقوم باحاطتهم فى div وراح نسميه wrapper
رمز Code:
<div id="page-wrapper"> <!-- SLIDESHOW --> <div id="slideshow"> <div id="slides"> <a href="#portfolio.work1" title="شاهد التفاصيل" class="thumb default-slide"> <img src="./img/slideshow/1.png" alt="Flex Engine Web Design" class="slideshow-image" /> </a> <a href="#portfolio.work2" title="شاهد التفاصيل" class="thumb"> <img src="./img/slideshow/2.png" alt="Concept Labs Portfolio" class="slideshow-image" /> </a> <a href="#portfolio.work3" title="شاهد التفاصيل" class="thumb"> <img src="./img/slideshow/3.png" alt="Everlast Studio" class="slideshow-image" /> </a> </div> <div id="slideshow-commands"> <a href="#previous" title="Previous" id="previous-slide"><</a> <a href="#next" title="Next" id="next-slide">></a> <h4> <a href="#portfolio.work1" title="شاهد التفاصيل" id="slide-title"> Flex Engine Web Design </a> </h4> </div> </div> <!-- MESSAGE --> <div id="message"> <h3>We build great websites!</h3> <p> <strong> تم افتتاح هذا الموقع لتعليم المستخدم العربى كيفية البرمجة وقد راعينا فى هذا الموقع تقديم الدروس بإسلوب شيق لا يجعل القارىء يشعر بالملل من قراءة الدروس وأتمنى من الله تعالى ان يكون الموقع رسالة سامية اجازى بها أمام الله تعالى فى الدنيا والاخره اخوكم محمد <center> vista-design</center> </strong> </p> <p id="contact-info"> <span id="phone">+20 10 23 45 67 89</span> <span id="address"> egypt-cairo<br /> vistacompany.org<br /> </span> </p> </div> </div>
طبعا div الرسائل سوف نعرض اى رسالة عن الموقع مثلا كلمة عن عروض الموقع...عناوين .....اخبار....الخ
وبالنسبة لdiv السلايد شو راح يكون مخصص لعرض صور لاعمال الموقع وووالخ
اخيرا: نختم كود code الصفحة بdiv الفوتر الخاص بالحقوق, مسبوقا بdiv خاص بظل تجميلى كما فعلنا سابقا.
رمز Code:
<div id="content-bottom-shadow"></div> <div id="footer"> <div id="footer-image"></div> <p id="footer-text"> Copyright © 2014 vistacompany.org<br /> All Rights Reserved </p> </div>
والان خلونا نشوف كود code الصفحة بالكامل بعد تجهيزها.
رمز Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <**** ************"Content-Type" content="text/html; charset=windows-1256" /> <**** name="keywords" content="Roadside, Studio, Design, Web, Icons, Logos" /> <**** name="description" content="Roadside Studio is a web design agency that makes beautiful websites!" /> <**** name="author" content="Felix Boyeaux" /> <**** name="robots" content="all" /> <link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css" /> <!--[if IE 7]> <link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/ie7.css" /> <![endif]--> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/cycle.js"></script> <script type="text/javascript" src="js/slideshow.js"></script> <script type="text/javascript" src="js/cufon.js"></script> <script type="text/javascript" src="js/myriadpro.font.js"></script> <script type="text/javascript"> Cufon.replace('h1, h2, h3, h5'); </script> <title>vista-design</title> </head> <body> <!-- STATUS BAR --> <div id="status"> <div id="statuscontent"> <form action="#" method="post" id="search-form"> <p> <input type="text" name="query" value="بحث" /> <input type="submit" name="submit" value="Search!" /> </p> </form> <div id="statuscommands"> <p id="welcome">أهلا وسهلا,</p> <p id="actionlinks"> <a href="#" title="Login">دخـول</a> <a href="#" title="faqs">التعليمات</a> <a href="#" title="contactus">اتصل بنا</a> </p> </div> </div> </div> <!-- HEADER --> <div id="header"> <div id="logo"> <h1><a href="#" title="home">vista-design</a></h1> <h2>technology</h2> </div> </div> <!-- CONTENT --> <div id="content-top-shadow"></div> <div id="content"> <!-- TABS --> <ul id="tabs"> <li id="previous"> <a href="#previous" title="Previous"><</a> </li> <li id="home" class="current"> <a href="#home" title="Home">الرئيسية</a> </li> <li id="portfolio"> <a href="#portfolio" title="Portfolio">العروض</a> </li> <li id="about"> <a href="#about" title="About">عن الموقع</a> </li> <li id="contact"> <a href="#contact" title="Contact">اتصل بنا</a> </li> <li id="next"> <a href="#next" title="Next">></a> </li> </ul> <!-- PAGE WRAPPER --> <div id="page-wrapper"> <!-- SLIDESHOW --> <div id="slideshow"> <div id="slides"> <a href="#portfolio.work1" title="شاهد التفاصيل" class="thumb default-slide"> <img src="./img/slideshow/1.png" alt="Flex Engine Web Design" class="slideshow-image" /> </a> <a href="#portfolio.work2" title="شاهد التفاصيل" class="thumb"> <img src="./img/slideshow/2.png" alt="Concept Labs Portfolio" class="slideshow-image" /> </a> <a href="#portfolio.work3" title="شاهد التفاصيل" class="thumb"> <img src="./img/slideshow/3.png" alt="Everlast Studio" class="slideshow-image" /> </a> </div> <div id="slideshow-commands"> <a href="#previous" title="Previous" id="previous-slide"><</a> <a href="#next" title="Next" id="next-slide">></a> <h4> <a href="#portfolio.work1" title="شاهد التفاصيل" id="slide-title"> Flex Engine Web Design </a> </h4> </div> </div> <!-- MESSAGE --> <div id="message"> <h3>We build great websites!</h3> <p> <strong> تم افتتاح هذا الموقع لتعليم المستخدم العربى كيفية البرمجة وقد راعينا فى هذا الموقع تقديم الدروس بإسلوب شيق لا يجعل القارىء يشعر بالملل من قراءة الدروس وأتمنى من الله تعالى ان يكون الموقع رسالة سامية اجازى بها أمام الله تعالى فى الدنيا والاخره اخوكم محمد <center> vista-design</center> </strong> </p> <p id="contact-info"> <span id="phone">+20 10 23 45 67 89</span> <span id="address"> egypt-cairo<br /> vistacompany.org<br /> </span> </p> </div> </div> </div> <div id="content-bottom-shadow"></div> <div id="footer"> <div id="footer-image"></div> <p id="footer-text"> Copyright © 2014 vistacompany.org<br /> All Rights Reserved </p> </div> </body> </html>
تبقى لنا الجزء الاخير وهو كود code css وبعض الحركات فى التصميم اللى سويناه
فى جزء التصميم لننتهى من هذا الدرس مفصل ويكون لنا الناتج النهائى ان شاء الله
------------------------
الجزء النهائى : التقطيع والcss
ها قد أوشكنا أعضاءنا الكرام ما بدأنا به فى تصميمنا
وفى هذا الدرس مفصل سوف نتعرف على كيفية تقطيع التصميم وماذا راح نأخذا منه
وماذا سوف نتركه.... ثم بعد مرحلة التقطيع سوف اشرح طريقة ملف css الخاص بالتصميم.... ثم فى النهاية يكون لنا الناتج النهائى وهو موقعنا الاحترافى
بأذن الله.........
اولا: التقطيع :
تنبيه: قبل البدأ يجب ان تعلم ان مقاسات كل جزء راح اقطعه هى متوافقة مع تصميمى انا, وفى حالة كان تصميمك يختلف فى المقاسات عن تصميمى , يمكنك تعديله من ملف css لاحقا وراح اشرح طريقة ذلك
افتح الفوتوشوب على القالب template اللى كنا سوينه فى الجزء الاول من هذا الموضوع
1- راح نقطع خلفية البار العلوى وراح تكون مقاساته 1x50
استخدام الاداة slice tool لتقطع الجزء هذا , ويمكنك تعديل المقاس باختيار الاداة الثانية من نفس الزر slice select tool
---------------------------------
2- تقطيع مستطيل مربع البحث
ثم بتقطيعه بالظبط بحيث يكون مقاساته 179x24
---------------------------------
3-تقطيع صورة الهيدر header
قم بتقطيع صورة الهيدر header بالكامل كما بالصورة
---------------------------------
4-تقطيع المستطيل الخلفى للنكات العلوية
ايضا نفس الشىء ......لا تنسى ان تحذف اسم اللنكات اللى قمنا بكتابتها لاننا سوف نكتبها بملف html
---------------------------------
5- تقطيع المستطيل السفلى اسفل السلايد الشو
ايضا نفس الشىء......لا تنسى ان تحذف اسم اللنكات اللى قمنا بكتابتها لاننا سوف نكتبها بملف html
---------------------------------
6- تقطيع جزء اللنكات الرئيسية ....
لاحظ ان هذا الجزء لابد ان تكون مقاساته دقيقه جدا وسوف نعرف لاحقا ذلك
هذا القطعه سوف نحتاج لتكرارها , حتى يتغير شكل اللنك بمرور الماوس
لذلك , قم بفتح عمل جديد بمقاسات
ثم قم بسحب القطعه اللى قمنا بتقطيعها , طبعا بعد حفظ العمل على هيئة save for web لينتج لك الصور المقطعه
وقم بتكرارها مثل الصورة الاتية ثم احفظها
---------------------------------
بهيك ينتهى جزء التقطيع واعتقد ان سهل, ولابد تتدرب كثير
لانك لن تتقن الموضوع من اول مرة نهائيا
كرر مرة واثنين وثلاثة لحد ما تظبط
ننتقل الان لملف الcss وشرح طريقةه .....
طبعا انا قمت بشرح طريقة كل جزء فى ملف css فى كل كود code فوقه راح تجد الشرح طريقة
قم بمراجعه الكود code بالكامل لتعرف كيفية التعديل على الجزء الذى تريده
حسب مقاسات تصميمك الذى قمت بتقطيعه
رمز Code:
@import url('reset.css'); @import url('typography.css'); body { background-color: #f8f8f8; margin: auto; width: 100%; } /* البار العلوى من خلفية وعمل حد سفلى وتحديد طوله وعرضة بكامل عرض الشاشة */ div#status-bar { background: url('../img/status-bar-bg.png') repeat-x; border-bottom: 2px groove #ffffff; height: 40px; width: 100%; } /*تحديد حوف مابداخل البار العلوى من البحث واللنكات والترحيب وتحديد عرضهم*/ div#status-bar-content { margin: 10px auto 0px auto; width: 800px; } /*تحديد عرض عبارة الترحيب واللنكات من العرض للكلى للبار العلوى */ div#status-bar-commands { width: 400px; } /* عمل فلوت لمستطيل البحث لليمين وتحديد عرضه*/ form#search-form { float: right; width: 200px; } /*عمل فلوت لعبارة الترحيب باليسار وتحديد عرضه والمحاذاة العلوية */ p#welcome { float:left; padding-top: 7px; width: 150px; } /*تحديد مستطيل اللنكات من خلفية وطول وحافة ومحاذاة وعرض*/ p#action-bar { background: url('../img/action-bar-bg.png') no-repeat; height: 14px; margin-left:200px; padding: 8px 28px; width: 168px; } /*القيام باضافة علامة | قبل كل لنك وبعده */ p#action-bar a:before { content: ' | '; } p#action-bar a[title="اتفاقية"]:after { content: ' |'; } /*لاستبدل مستطيل البحث العادى بالصورة اللى سوينها وهذا الكود code مهم جدا*/ form#search-form input[type="text"] { background: url(../img/search-field.png) no-repeat; border:none; height:20px; padding: 5px 0px 0px 30px; width:170px; } /*كود code مهم جدا لالغاء ظهور زر بحث القديم الاعتيادى ليظهر بدله مستطيل البحث فقط*/ form#search-form input[type="submit"] { display: none; } /* Header */ /*كود code الهيدر header من خلفية ولونه فى حاله عدم ظهور الصورة والحافة السفلية وارتفاعه وعرضه */ div#header { background: url('../img/header-image.png') no-repeat center; background-color: #6eb9cc; border-bottom: 2px ridge #ffffff; height: 250px; width: 100%; } /*هذا الكود code مهم جدا وخاص باللوجو النصى للموقع ولاحظ شىء مهم جدا ان عرض هذا اللوجو هو محدد كجزء من عرض الصورة ككل وليس من عرض الشاشة التى ترى من خلالها الموقع اى ان 800 هى 800 من 1600 اللى هو عرض الصورة الاصلية للهيدر */ div#logo { margin: auto; padding-top: 35px; width: 800px; } /* الجزء الخاص بالمحتوى من اللنكات والمقدمة والسلايد شو */ div#content { margin: auto; padding-bottom: 50px; position: relative; width: 800px; } /*تحديد صورة الظل العلوى اضافة من عندى*/ div#content-top-shadow { background: url('../img/content-top-shadow.png') repeat-x; height: 20px; width: 100%; } /*تحديد اضافة الظل السفلى */ div#content-bottom-shadow { background: url('../img/content-bottom-shadow.png') repeat-x; clear: both; height: 20px; width: 100%; } /* الراب الذى يحيط السلايدشو واللنكات والمقدمة ولاحظ شىء مهم وهو overflow width لابد ان تكون دقيقة حسب مقاس تصميمك والا سوف يخرب تصميمك */ div#page-wrapper { background-color: #ffffff; border: 1px solid #bababa; clear: both; height: 233px; margin-top: 75px; overflow: hidden; padding: 15px; width: 768px; } /* السلايد شو وسوينا فولت له داخل الراب لليسار وحددنا عرضه */ div#slideshow { border-right: 1px solid #b2b2b2; float: left; padding-right: 15px; width: 375px; } /*خصائص الصور التى تعرض بداخل السلايد ولاحظ ان عرضها هو نفس عرض الصورة*/ div#slides { border: 1px solid #a7a7a7; height: 200px; width: 370px; } div#slides a.thumb { display:none; } div#slides a.default-slide { display:block; } /*خاص بالمستطيل اسفل السلايد شو الذى يظهر به كل كلمة */ div#slideshow-commands { background: url('../img/commands-bg.png') no-repeat; height: 19px; left: 15px; padding: 3px 25px; position: relative; width: 290px; } /*خاص بزر السابق ولاخظ هذا الكود code لابد ان يكون دقيق جدا حتى يكون الزر مفعل بمجرد مرور الماوس عليه*/ a#previous-slide { background: url('../img/commands-previous-slide.png') no-repeat; display: block; float: left; height: 12px; margin-top: 2px; text-indent: -9000px; width: 9px; } /*نفس السابق ولكن التالى*/ a#next-slide { background: url('../img/commands-next-slide.png') no-repeat; display: block; float: right; height: 12px; margin-top: 2px; text-indent: -9000px; width: 9px; } div#slideshow-commands h4 { margin-top:1px; width:100%; } /* اللنكات الرئيسية والمقدمة */ div#message { margin-left: 410px; width: 350px; } div#message h3 { margin-bottom: 20px; } p#contact-info span { display: block; } span#phone { background: url('../img/phone-icon.png') no-repeat 0px 1px; float: left; margin-top: 25px; padding-left: 35px; width: 125px; } span#address { background:url('../img/address-icon.png') no-repeat 160px 30px; padding:5px 0px 0px 195px; } /* اللنكات الرئيسية (الازرار)مهم جدااااااا هذا الكود code ولابد ان اشرح طريقةه بالتفصيل) */ ul#tabs { margin-top: 30px; position: absolute; right: 0px; top: -65px; } ul#tabs li { background: url('../img/tabs-sprite.png') no-repeat; float: left; height: 35px; margin-right: 1px; width: 70px; } ul#tabs li a { display: block; height: 100%; text-indent: -9000px; width: 100%; } ul#tabs li#previous { background-position: 0px 0px; width:80px; } ul#tabs li#previous:hover { background-position: 0px -40px; } ul#tabs li#previous.current, ul#tabs li#previous:active { background-position: 0px -80px; } /*العادية الحالة فى الزر*/ ul#tabs li#home { background-position: -80px 0px; } /*عليه الماوس مرور عند الزر*/ ul#tabs li#home:hover { background-position: -80px -40px; } /*عليه الضغط عند الزر*/ ul#tabs li#home.current, ul#tabs li#home:active { background-position: -80px -80px; } ul#tabs li#portfolio { background-position: -150px 0px; } ul#tabs li#portfolio:hover { background-position: -150px -40px; } ul#tabs li#portfolio.current, ul#tabs li#portfolio:active { background-position: -150px -80px; } ul#tabs li#about { background-position: -220px 0px; } ul#tabs li#about:hover { background-position: -220px -40px; } ul#tabs li#about.current, ul#tabs li#about:active { background-position: -220px -80px; } ul#tabs li#contact { background-position: -290px 0px; } ul#tabs li#contact:hover { background-position: -290px -40px; } ul#tabs li#contact.current, ul#tabs li#contact:active { background-position: -290px -80px; } ul#tabs li#next { background-position: -360px 0px; width: 65px; } ul#tabs li#next:hover { background-position: -360px -40px; } ul#tabs li#next.current, ul#tabs li#next:active { background-position: -360px -80px; } /* الفوتر */ div#footer-image { background: url('../img/footer-image.png') no-repeat center #6eb9cc; border-top: 2px groove #ffffff; border-bottom:2px ridge #ffffff; height:50px; width:100%; } p#footer-text { background: url('../img/content-top-shadow.png') repeat-x; height: 37px; padding-top: 13px; width: 100%; }
مثال عملى:
فى النهاية , اليكم الناتج النهائى لتصميمنا
شاهد الموقع بصورة حية ........
انتظر حتى يتم تحميل الموقع بالكامل
(http://advphp.com/web2/temp/)
ملاحظه: فيه جزء فى ملف الcss لابد ان اشرح طريقةه بالتفصيل حتى تفهم الطريقة
وهو الجزء الخاص بالازرار, لان هذا الجزء يحتاج دقة بالغة
وبالاخص شرح طريقة خاصية background-postion
شوف الصورة
اتمنى تكونوا فهمتوا الفكرة
ملفات الموقع مرفقة بالموضوع .......
أتمنى تكونوا استفدتوا من الدرس مفصل ولو بالقليل
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif temp.zip (http://www.traidnt.net/vb/attachments/458065d1266873264-temp.zip) (966.3 كيلوبايت, عدد مرات المشاهدة 230 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
ننتقل معكم اخوانى الاعضاء مشتركى الدورة إلى أقوى وأطول درس مفصل راح تشوفه على النت بإذن الله ...
تم تجهيز هذا الدرس مفصل فى 8 أيام متواصلة بمعدل 5 ساعات يوميا
أكثر من تصميم الموقع نفسه اللى راح نتكلم عنه :eek:
الدرس مفصل راح يكون مٌطول, لذلك لابد من قراءة الدرس مفصل مرة واثنين وثلاثة
وبتركيز شديد ........
والدرس مفصل مقسم خمسةأجزاء:
1-التخطيط للموقع وتحديد المطلوب فيه .
2- التصميم والتقطيع للموقع على الفوتوشوب.
3- ملفات الموقع وصفحاته html وشرح طريقة أكوادها بالتفصيل الممل +jquery
3- ملف الcss الخاص بالموقع وشرح طريقةه بالتفصيل الممل.
5- المثال العملى وتجربة الموقع الذى تم تنفيذه بحمدالله
تنبيهات هامه جدااااااا قبل تطبيق الدرس مفصل:
1-الدرس مفصل لابد من قراءتة مرة واثنين وعشرة وعدم التسرع فى التطبيق الا قبل
فهم كل جزء بإمعان
2- الدرس مفصل ليس لتعليمك مهارات الفوتوشوب, فتطبيقك لابد اون تكون على دراية باستخدام الفوتوشوب, وهذه لها دروس منفصلة خارج الدورة يمكن التعلم منها
3- الدرس مفصل راح تستفيد منه حركات جديدة فى الفوتوشوب
4- الدرس مفصل لا يهمنى فيه ان يكون الناتج النهائى لتطبيق دقيق,
لكن ما يهمنى ان تفهم الفكرة فقط, فالاحتراف لن يأتى من درس مفصل واحد
فلابد من التطبيق واعمال اكثر من تصميم
ملاحظه اخيرة : فكرة الدرس مفصل مقتبسة من احد مطورى الويب الاجانب
وهذا هو مٌعرفه على موقع devian art (http://fixxxxx.deviantart.com)
وهو شخص محترف جدا ويعمل باحد الشركات الكبرى بالusa وعجبنى طريقة تصميمه, واحببت ان اتعلم منه, لانه اقل ما يقال عنه انه professional
-------------------------------
الجزء الثانى: التصميم على الفوتوشوب
اولا: تنبيهات هامه جدااااااا قبل تطبيق الدرس مفصل
1-الدرس مفصل لابد من قراءتة مرة واثنين وعشرة وعدم التسرع فى التطبيق الا قبل
فهم كل جزء بإمعان
2- الدرس مفصل ليس لتعليمك مهارات الفوتوشوب, فتطبيقك لابد اون تكون على دراية باستخدام الفوتوشوب, وهذه لها دروس منفصلة خارج الدورة يمكن التعلم منها
3- الدرس مفصل راح تستفيد منه حركات جديدة فى الفوتوشوب
4- الدرس مفصل لا يهمنى فيه ان يكون الناتج النهائى لتطبيق دقيق,
لكن ما يهمنى ان تفهم الفكرة فقط, فالاحتراف لن يأتى من درس مفصل واحد
فلابد من التطبيق واعمال اكثر من تصميم
التصميم والتقطيع للموقع على الفوتوشوب.
نبدأ على بركة الله .......
اولا قبل كل شىء : لابد ان تعود نفسك فى جزء من هذا الدرس مفصل على كثرة التطبيق قبل انتاج الناتج النهائى
لانك لازم تثق انك راح تخطىء مره واثنين وعشرة قبل ان تجيد كل نقطة بالدرس مفصل
وانا نفسى فيه بعض عدم الاحترافية , وقد اكون لم اغطى بعض النقط فى شرح طريقة
الدرس مفصل بحكم ان الدرس مفصل يمكن من اطول الدروس اللى كتبتها على النت للان
منذ 3 سنوات منذ تعلقى بموضوع تطوير الويب
قبل تطبيقك : سوف يكون الناتج النهائى لملف psd بالشكل الاتى:
اولا: افتح الفوتوشوب وقم بعمل جديد
بمقاسات 1600 فى 1200 بكسل
قبل المباشرة فى العمل, لابد ان يكون شغلنا منظم ودقيق
لذلك سنحتاج لاستخدام المسطرة فى الفوتوشوب
اختار view من فوق ثم rulers
ولا تنسى ان نختار مقاس المسطرة بالبكسل
ثم سنقوم باستخدام المسطرة بعمل خطوط ارشادية فى تصميمنا
قم بعمل خطوط ارشاية بالظبط مثل انا مسوى
نبدأ من الان بعمل شغلنا........
اولا: تصميم القائمة العلوية status bar
اختار اداة رسم مستطيل rectangle tool ثم ارسم مستطيل فى الاعلى
بطول 50 بكسل
شوف....
ثم باستخدام اداة التدرج gradient tool سنقوم بعمل تدرج لهذا المستطيل
قم بعمل لير جديدة ثم قم بدمجها بعمل create clipping mask
ثم قم بعمل التدرج
بعد ذلك سنقوم بالكتابة على هذا الشريط العلوى status bar
ملاحظه هامه: فى التصميم سوف تلاحظ اننا سوف نكتب كلمات واشياء كثيرة
لكن عند الانتقال لدرس مفصل الhtml سوف تكون هذه الكلمات فى ملف html الخاص بالصفحة وليس مجرد كلمات مكتوبة على الصور
حتى يسهل تغييرها لاى كلمات فيما بعد
لذا وج التنبيه .......
نقوم الان بكتابة كلمة الترحيب
شوف عند الخط الارشادى 400 اكتب كلمة الترحيب
بعد ذلك سوف نقوم بعمل مستطيل خاص بالازرار الثلاثة:
دخول - خريطة الموقع - الاتفاقية
قم باختيار اداة رسم مستطيل ذو حواف دائرية rounded rectangle tool
ثم ارسم مستطيل من اول الخط الارشادى 600 الى الخط الارشادى 800
اختار اى لون بكيفيك , فانا لا يهمنى جمال التصميم الان بقدر ان تفهم الفكرة
لا تنسى الخط الفاصل بين الكلمات الثلاثة يمكنك عمله
بضغط shift + الزر اللى بجانب زر المسح backspace فوق enter
وشوف الحين الطبقتين الخاصة بهذ المستطيل:
قم باضافة بعض التأثيرات عليه........
الحين انتهينا من هذا.......
نكمل ......
الحين نسوى مستطيل البحث
اولا اختار custom shape tool لنقوم بعمل صورة مكبر
وباختيار نفس الاداة السابقة rounded rectangle tool
قم بعمل مستطيل واضف له بعض التأثيرات
انتهينا الحين من الجزء العلوى ...........
------------------------------------------------------------
ننتقل للجزء الموجود أسفل الجزء العلوى وهو الheader
قم باختيار اى صورة ثم اجبلها للفوتوشوب
ثم قم بنقلها لصفحة عملك اللى انت شغال عليها حاليا
وقم بتسيق طولها باستخدام ctrl+t بحيث تكون بداية الصورة
عند الخط الارشادى 50 ونهايتها عند 300
ولاخظ ان طبقة هذه الصورة سوف نقوم بعمل create clipping mask
للجزء العلوى
ثم سنقوم بالكتابة عليها عند الخط الارشادى 400
تمام الحين انتهينا من الهيدر header بكل سهولة ........
---------------------------------------------------------
ننتقل للجزء الاهم وهو المحتوى content
سوف نقوم برسم مستطيل باستخدام الاداة rectangle tool
ولكن قبل الرسم قم بعمل هذه الخطوط الارشادية
وقم برسم المستطيل عند هذه الابعاد
ثم قم برسم الخطوط الارشادية هذه ايضا حتى تحدد حدود كل شىء
شوف هذه الصورة لتفهم قصدى
فى مربع السلايد شو الخاص بعمل عرض سلايد شو
اجلب اى صورة , وقم بتظبيط مقاساتها بحيث تكون ابعادها داخل الخطوط الارشادية اللى قمنا بعملها فى الصورة السابقة
والحين سنقوم بعمل لير جديدة وراح تكون خاصة بعمل مستطيل ليعرض لنا
تعريف للصور كتابيا......
اختار اداة rounded rectangle tool
وارسم المستطيل , ثم باستخدام polygonal tool وجعل الجوانب 3
قم برسم مثلث بحيث يكون خاص بعمل السابق والتالى للصور
الحين خلصنا من السلايد شو......
----------------------------------------------------
ننتقل لكتابة كلمة رئيسية للموقع
ليست مهمه كثير....
شوف.....
-------------------------------------------------------
ننتقل لعمل الازرار الرئيسية للموقع.......
سوف نقوم بعمل مربعات حتى تكون عبارة عن ازرار الموقع
قم باستخدام اداة rectangle tool برسم المربعات الاتية
ولا تنسى ان تترك مسافة بسيطة بين كل مربع
ولا تنسى ايضا ان تقوم بعمل خط ارشادى حتى تكون الازرار على عرض واحد
يمكنك تكرار الطبقات بعمل ctrl+j
ملاخظه: فى اول زر على اليمين لو ليك خبرة فى الفوتوشوب,يمكنك استخدام
اداة الpen tool لحذف حدود اى زر
شوف
المهم....بعد رسم الازرار راح يصبح الشكل كالاتى:
بعد عمل هذه الازرار
قم بتجميل لير كل زر فى مجلد واحد
ثم بعد ذلك قم بالكتابة على كل زر, واضافة زر السابق والتالى
كما فعلنا سابقا......
تبقى لنا الفوتر.......
قم بعمل خط ارشادى
ثم اختار اى صورة مثل ما سوينا فى الهيدر header بالظبط
وضعه فى اسفل التصميم
اخر شىء سوى خلفية للصفحة
وذلك بعمل لير جديدة ووضعها اول لير(يعنى اول لير من اسفل)
وقم بجعل لونها ابيض يميل الى الرصاصى برقم #f3f1f3
بهيك نكون انتهينا من هذا الجزء
--------------------------------------
الجزء الثالث: كود code html
أولا:التخطيط للموقع وتحديد المطلوب فيه .
دائما تعودى عزيزى العضو, انه عندما تريد ان تقوم بتصميم وبرمجة موقع
ان تضع فى مخيلتك الفكرة التى تود عملها فى الموقع وتحدد المتطلبات اللى راح أسويها, واحفظ انى راح أسوى كذا وكذا وكذا.....الخ
وأيضا احضر ورقة وقلم وقم برسم شكل تصويرى لفكرة الموقع اللى راح تسويه قبل المباشرة فى العمل.
ومن منطلق هذا الكلام , راح أضع لكم مخطط الموقع اللى راح أسويه بإذن الله
شوف الصورة:
الصورة تتحدث عن نفسها ;)
فأنا قمت بعمل تخطيط للافكار اللى راح نسويها سويا بإذن الله
راجع المخطط ثم انتقل للمرحلة الثانية من الدرس مفصل معى..........
ثالثا: ملفات الموقع وصفحاته html وشرح طريقة أكوادها
دعونا نبدأ بتخطيط الموقع بhtml
راح أشرح طريقة كود code html الخاص بالموقع اللى راح نسويه بالتفصيل الممل
وعليك كل جزء تتعود تكتبه وتعرف فكرة الكود code.....
نبدأ بكتابة اول كل صفحة كما قلنا سابقا + الترميز
وتعريف بالميتا اللى راح بنضع فيها كلمات تخص محتوى موقعك
حتى تتعرف محركات البحث على محتوى موقعك .
وأيضا نكتب الكلمات الدلالية keywords الخاصة بموقعك
وتكتب تعريف باسم صاحب الكود code او الموقع author
شوف الكود code:
رمز Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <**** ************"Content-Type" content="text/html; charset=windows-1256" /> <**** name="keywords" content="vista-design, mtwer, advphp, برمجة, تصميم, دعم فنى" /> <**** name="description" content="موقع مطور التعليمى للدورات التعليمية المتخصصة لمطورين الويب!" /> <**** name="author" content="vista-design" /> <**** name="robots" content="all" /> <title>الموقع الشامل تطبيقا لدورة تصميم المواقع بإسلوب المحترفين </title> </head> <body> <!-- الكود code الرئيسى للموقع راح يٌكتب هنا --> </body> </html>
بعد هيك فيك ملفات خاصة بjquery راح نضيفها بين وسمى style لاحقا....
ننتقل بعد هيك للكود code الرئيسى اللى راح نقوم بعمله
وكل تعاملنا راح يكون بين وسمى body
ملاحظه: راجع الصورة فى الأعلى ثم تابع مرة أخرى معى....
اولا: div id status الخاص بخانة تسجيل الدخول ولنكات الموقع ومحرك بحث الموقع
أولا: الفكرة:
div id status بداخله : 1- div id statuscontent : خاص بفورم البحث
2- div id statuscommands : خاص برسالة الترحيب + لنكات الموقع
شوف فكرة الكود code:
رمز Code:
<div id="status"> <div id="statuscontent"> <form>فورم البحث راح نكتب كود codeه هنا</form> <div id="statuscommands"> راح نكتب رسالة ترحيب الموقع +لنكات الموقع </div> </div> </div>
الحين نريد كتابته كاملا ومنسق : فراح يكون هيك:
رمز Code:
<div id="status"> <div id="statuscontent"> <form action="#" method="post" id="search-form"> <p> <input type="text" name="query" value="بحث" /> <input type="submit" name="submit" value="Search!" /> </p> </form> <div id="statuscommands"> <p id="welcome">أهلا وسهلا,</p> <p id="actionlinks"> <a href="#" title="Login">دخـول</a> <a href="#" title="faqs">التعليمات</a> <a href="#" title="contactus">اتصل بنا</a> </p> </div> </div> </div>
وهذه صورته:
خلصنا من اول div وهو status
ننتقل للdiv اللى بعده
شوف صورة المخطط وكمل معى........
ثانيا: div id header الخاص بلوجو وعنوان الموقع.
الفكرة: div id header بداخله : -div خاص بعنوان الموقع واللوجو
شوف الكود code:
رمز Code:
<div id="header"> <div id="logo"> <h1><a href="#" title="home">vista-design</a></h1> <h2>technology</h2> </div> </div>
وهذه صورته:
http://i45.tinypic.com/28i9llk.png
وخلصنا من div الهيدر header
نكمل.......
ننتقل للdiv اللى بعده
ثالثا: div id content الذى يشمل ثلاثة div
div content-top-shadow -1
ul id tabs-2
div id message-3
div id slideshow-4
اولا: div content-top-shadow
رمز Code:
<div id="content-top-shadow"></div>
هذا الdiv راح نستغله وراح نقوم بعمل ظل تجميلى فوق مربع العرض للمحتوى
ثانيا: ul id tabs
رمز Code:
<ul id="tabs"> <li id="previous"> <a href="#previous" title="Previous"><</a> </li> <li id="home" class="current"> <a href="#home" title="Home">الرئيسية</a> </li> <li id="portfolio"> <a href="#portfolio" title="Portfolio">العروض</a> </li> <li id="about"> <a href="#about" title="About">عن الموقع</a> </li> <li id="contact"> <a href="#contact" title="Contact">اتصل بنا</a> </li> <li id="next"> <a href="#next" title="Next">></a> </li> </ul>
هذا الul خاص بازرار الموقع الرئيسية
من الرئيسية والعروض وعن الموقع واتصل بنا
,واكيد من معرفتك من html تعرف ان ul هى خاصة بعمل لست لاى شىء ازرار مقالات ترتيب ....الخ
ثالثا: بنسبة لdiv الmessage و الslideshow
سوف نقوم باحاطتهم فى div وراح نسميه wrapper
رمز Code:
<div id="page-wrapper"> <!-- SLIDESHOW --> <div id="slideshow"> <div id="slides"> <a href="#portfolio.work1" title="شاهد التفاصيل" class="thumb default-slide"> <img src="./img/slideshow/1.png" alt="Flex Engine Web Design" class="slideshow-image" /> </a> <a href="#portfolio.work2" title="شاهد التفاصيل" class="thumb"> <img src="./img/slideshow/2.png" alt="Concept Labs Portfolio" class="slideshow-image" /> </a> <a href="#portfolio.work3" title="شاهد التفاصيل" class="thumb"> <img src="./img/slideshow/3.png" alt="Everlast Studio" class="slideshow-image" /> </a> </div> <div id="slideshow-commands"> <a href="#previous" title="Previous" id="previous-slide"><</a> <a href="#next" title="Next" id="next-slide">></a> <h4> <a href="#portfolio.work1" title="شاهد التفاصيل" id="slide-title"> Flex Engine Web Design </a> </h4> </div> </div> <!-- MESSAGE --> <div id="message"> <h3>We build great websites!</h3> <p> <strong> تم افتتاح هذا الموقع لتعليم المستخدم العربى كيفية البرمجة وقد راعينا فى هذا الموقع تقديم الدروس بإسلوب شيق لا يجعل القارىء يشعر بالملل من قراءة الدروس وأتمنى من الله تعالى ان يكون الموقع رسالة سامية اجازى بها أمام الله تعالى فى الدنيا والاخره اخوكم محمد <center> vista-design</center> </strong> </p> <p id="contact-info"> <span id="phone">+20 10 23 45 67 89</span> <span id="address"> egypt-cairo<br /> vistacompany.org<br /> </span> </p> </div> </div>
طبعا div الرسائل سوف نعرض اى رسالة عن الموقع مثلا كلمة عن عروض الموقع...عناوين .....اخبار....الخ
وبالنسبة لdiv السلايد شو راح يكون مخصص لعرض صور لاعمال الموقع وووالخ
اخيرا: نختم كود code الصفحة بdiv الفوتر الخاص بالحقوق, مسبوقا بdiv خاص بظل تجميلى كما فعلنا سابقا.
رمز Code:
<div id="content-bottom-shadow"></div> <div id="footer"> <div id="footer-image"></div> <p id="footer-text"> Copyright © 2014 vistacompany.org<br /> All Rights Reserved </p> </div>
والان خلونا نشوف كود code الصفحة بالكامل بعد تجهيزها.
رمز Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <**** ************"Content-Type" content="text/html; charset=windows-1256" /> <**** name="keywords" content="Roadside, Studio, Design, Web, Icons, Logos" /> <**** name="description" content="Roadside Studio is a web design agency that makes beautiful websites!" /> <**** name="author" content="Felix Boyeaux" /> <**** name="robots" content="all" /> <link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/style.css" /> <!--[if IE 7]> <link rel="stylesheet" media="screen" type="text/css" title="Style" href="css/ie7.css" /> <![endif]--> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/cycle.js"></script> <script type="text/javascript" src="js/slideshow.js"></script> <script type="text/javascript" src="js/cufon.js"></script> <script type="text/javascript" src="js/myriadpro.font.js"></script> <script type="text/javascript"> Cufon.replace('h1, h2, h3, h5'); </script> <title>vista-design</title> </head> <body> <!-- STATUS BAR --> <div id="status"> <div id="statuscontent"> <form action="#" method="post" id="search-form"> <p> <input type="text" name="query" value="بحث" /> <input type="submit" name="submit" value="Search!" /> </p> </form> <div id="statuscommands"> <p id="welcome">أهلا وسهلا,</p> <p id="actionlinks"> <a href="#" title="Login">دخـول</a> <a href="#" title="faqs">التعليمات</a> <a href="#" title="contactus">اتصل بنا</a> </p> </div> </div> </div> <!-- HEADER --> <div id="header"> <div id="logo"> <h1><a href="#" title="home">vista-design</a></h1> <h2>technology</h2> </div> </div> <!-- CONTENT --> <div id="content-top-shadow"></div> <div id="content"> <!-- TABS --> <ul id="tabs"> <li id="previous"> <a href="#previous" title="Previous"><</a> </li> <li id="home" class="current"> <a href="#home" title="Home">الرئيسية</a> </li> <li id="portfolio"> <a href="#portfolio" title="Portfolio">العروض</a> </li> <li id="about"> <a href="#about" title="About">عن الموقع</a> </li> <li id="contact"> <a href="#contact" title="Contact">اتصل بنا</a> </li> <li id="next"> <a href="#next" title="Next">></a> </li> </ul> <!-- PAGE WRAPPER --> <div id="page-wrapper"> <!-- SLIDESHOW --> <div id="slideshow"> <div id="slides"> <a href="#portfolio.work1" title="شاهد التفاصيل" class="thumb default-slide"> <img src="./img/slideshow/1.png" alt="Flex Engine Web Design" class="slideshow-image" /> </a> <a href="#portfolio.work2" title="شاهد التفاصيل" class="thumb"> <img src="./img/slideshow/2.png" alt="Concept Labs Portfolio" class="slideshow-image" /> </a> <a href="#portfolio.work3" title="شاهد التفاصيل" class="thumb"> <img src="./img/slideshow/3.png" alt="Everlast Studio" class="slideshow-image" /> </a> </div> <div id="slideshow-commands"> <a href="#previous" title="Previous" id="previous-slide"><</a> <a href="#next" title="Next" id="next-slide">></a> <h4> <a href="#portfolio.work1" title="شاهد التفاصيل" id="slide-title"> Flex Engine Web Design </a> </h4> </div> </div> <!-- MESSAGE --> <div id="message"> <h3>We build great websites!</h3> <p> <strong> تم افتتاح هذا الموقع لتعليم المستخدم العربى كيفية البرمجة وقد راعينا فى هذا الموقع تقديم الدروس بإسلوب شيق لا يجعل القارىء يشعر بالملل من قراءة الدروس وأتمنى من الله تعالى ان يكون الموقع رسالة سامية اجازى بها أمام الله تعالى فى الدنيا والاخره اخوكم محمد <center> vista-design</center> </strong> </p> <p id="contact-info"> <span id="phone">+20 10 23 45 67 89</span> <span id="address"> egypt-cairo<br /> vistacompany.org<br /> </span> </p> </div> </div> </div> <div id="content-bottom-shadow"></div> <div id="footer"> <div id="footer-image"></div> <p id="footer-text"> Copyright © 2014 vistacompany.org<br /> All Rights Reserved </p> </div> </body> </html>
تبقى لنا الجزء الاخير وهو كود code css وبعض الحركات فى التصميم اللى سويناه
فى جزء التصميم لننتهى من هذا الدرس مفصل ويكون لنا الناتج النهائى ان شاء الله
------------------------
الجزء النهائى : التقطيع والcss
ها قد أوشكنا أعضاءنا الكرام ما بدأنا به فى تصميمنا
وفى هذا الدرس مفصل سوف نتعرف على كيفية تقطيع التصميم وماذا راح نأخذا منه
وماذا سوف نتركه.... ثم بعد مرحلة التقطيع سوف اشرح طريقة ملف css الخاص بالتصميم.... ثم فى النهاية يكون لنا الناتج النهائى وهو موقعنا الاحترافى
بأذن الله.........
اولا: التقطيع :
تنبيه: قبل البدأ يجب ان تعلم ان مقاسات كل جزء راح اقطعه هى متوافقة مع تصميمى انا, وفى حالة كان تصميمك يختلف فى المقاسات عن تصميمى , يمكنك تعديله من ملف css لاحقا وراح اشرح طريقة ذلك
افتح الفوتوشوب على القالب template اللى كنا سوينه فى الجزء الاول من هذا الموضوع
1- راح نقطع خلفية البار العلوى وراح تكون مقاساته 1x50
استخدام الاداة slice tool لتقطع الجزء هذا , ويمكنك تعديل المقاس باختيار الاداة الثانية من نفس الزر slice select tool
---------------------------------
2- تقطيع مستطيل مربع البحث
ثم بتقطيعه بالظبط بحيث يكون مقاساته 179x24
---------------------------------
3-تقطيع صورة الهيدر header
قم بتقطيع صورة الهيدر header بالكامل كما بالصورة
---------------------------------
4-تقطيع المستطيل الخلفى للنكات العلوية
ايضا نفس الشىء ......لا تنسى ان تحذف اسم اللنكات اللى قمنا بكتابتها لاننا سوف نكتبها بملف html
---------------------------------
5- تقطيع المستطيل السفلى اسفل السلايد الشو
ايضا نفس الشىء......لا تنسى ان تحذف اسم اللنكات اللى قمنا بكتابتها لاننا سوف نكتبها بملف html
---------------------------------
6- تقطيع جزء اللنكات الرئيسية ....
لاحظ ان هذا الجزء لابد ان تكون مقاساته دقيقه جدا وسوف نعرف لاحقا ذلك
هذا القطعه سوف نحتاج لتكرارها , حتى يتغير شكل اللنك بمرور الماوس
لذلك , قم بفتح عمل جديد بمقاسات
ثم قم بسحب القطعه اللى قمنا بتقطيعها , طبعا بعد حفظ العمل على هيئة save for web لينتج لك الصور المقطعه
وقم بتكرارها مثل الصورة الاتية ثم احفظها
---------------------------------
بهيك ينتهى جزء التقطيع واعتقد ان سهل, ولابد تتدرب كثير
لانك لن تتقن الموضوع من اول مرة نهائيا
كرر مرة واثنين وثلاثة لحد ما تظبط
ننتقل الان لملف الcss وشرح طريقةه .....
طبعا انا قمت بشرح طريقة كل جزء فى ملف css فى كل كود code فوقه راح تجد الشرح طريقة
قم بمراجعه الكود code بالكامل لتعرف كيفية التعديل على الجزء الذى تريده
حسب مقاسات تصميمك الذى قمت بتقطيعه
رمز Code:
@import url('reset.css'); @import url('typography.css'); body { background-color: #f8f8f8; margin: auto; width: 100%; } /* البار العلوى من خلفية وعمل حد سفلى وتحديد طوله وعرضة بكامل عرض الشاشة */ div#status-bar { background: url('../img/status-bar-bg.png') repeat-x; border-bottom: 2px groove #ffffff; height: 40px; width: 100%; } /*تحديد حوف مابداخل البار العلوى من البحث واللنكات والترحيب وتحديد عرضهم*/ div#status-bar-content { margin: 10px auto 0px auto; width: 800px; } /*تحديد عرض عبارة الترحيب واللنكات من العرض للكلى للبار العلوى */ div#status-bar-commands { width: 400px; } /* عمل فلوت لمستطيل البحث لليمين وتحديد عرضه*/ form#search-form { float: right; width: 200px; } /*عمل فلوت لعبارة الترحيب باليسار وتحديد عرضه والمحاذاة العلوية */ p#welcome { float:left; padding-top: 7px; width: 150px; } /*تحديد مستطيل اللنكات من خلفية وطول وحافة ومحاذاة وعرض*/ p#action-bar { background: url('../img/action-bar-bg.png') no-repeat; height: 14px; margin-left:200px; padding: 8px 28px; width: 168px; } /*القيام باضافة علامة | قبل كل لنك وبعده */ p#action-bar a:before { content: ' | '; } p#action-bar a[title="اتفاقية"]:after { content: ' |'; } /*لاستبدل مستطيل البحث العادى بالصورة اللى سوينها وهذا الكود code مهم جدا*/ form#search-form input[type="text"] { background: url(../img/search-field.png) no-repeat; border:none; height:20px; padding: 5px 0px 0px 30px; width:170px; } /*كود code مهم جدا لالغاء ظهور زر بحث القديم الاعتيادى ليظهر بدله مستطيل البحث فقط*/ form#search-form input[type="submit"] { display: none; } /* Header */ /*كود code الهيدر header من خلفية ولونه فى حاله عدم ظهور الصورة والحافة السفلية وارتفاعه وعرضه */ div#header { background: url('../img/header-image.png') no-repeat center; background-color: #6eb9cc; border-bottom: 2px ridge #ffffff; height: 250px; width: 100%; } /*هذا الكود code مهم جدا وخاص باللوجو النصى للموقع ولاحظ شىء مهم جدا ان عرض هذا اللوجو هو محدد كجزء من عرض الصورة ككل وليس من عرض الشاشة التى ترى من خلالها الموقع اى ان 800 هى 800 من 1600 اللى هو عرض الصورة الاصلية للهيدر */ div#logo { margin: auto; padding-top: 35px; width: 800px; } /* الجزء الخاص بالمحتوى من اللنكات والمقدمة والسلايد شو */ div#content { margin: auto; padding-bottom: 50px; position: relative; width: 800px; } /*تحديد صورة الظل العلوى اضافة من عندى*/ div#content-top-shadow { background: url('../img/content-top-shadow.png') repeat-x; height: 20px; width: 100%; } /*تحديد اضافة الظل السفلى */ div#content-bottom-shadow { background: url('../img/content-bottom-shadow.png') repeat-x; clear: both; height: 20px; width: 100%; } /* الراب الذى يحيط السلايدشو واللنكات والمقدمة ولاحظ شىء مهم وهو overflow width لابد ان تكون دقيقة حسب مقاس تصميمك والا سوف يخرب تصميمك */ div#page-wrapper { background-color: #ffffff; border: 1px solid #bababa; clear: both; height: 233px; margin-top: 75px; overflow: hidden; padding: 15px; width: 768px; } /* السلايد شو وسوينا فولت له داخل الراب لليسار وحددنا عرضه */ div#slideshow { border-right: 1px solid #b2b2b2; float: left; padding-right: 15px; width: 375px; } /*خصائص الصور التى تعرض بداخل السلايد ولاحظ ان عرضها هو نفس عرض الصورة*/ div#slides { border: 1px solid #a7a7a7; height: 200px; width: 370px; } div#slides a.thumb { display:none; } div#slides a.default-slide { display:block; } /*خاص بالمستطيل اسفل السلايد شو الذى يظهر به كل كلمة */ div#slideshow-commands { background: url('../img/commands-bg.png') no-repeat; height: 19px; left: 15px; padding: 3px 25px; position: relative; width: 290px; } /*خاص بزر السابق ولاخظ هذا الكود code لابد ان يكون دقيق جدا حتى يكون الزر مفعل بمجرد مرور الماوس عليه*/ a#previous-slide { background: url('../img/commands-previous-slide.png') no-repeat; display: block; float: left; height: 12px; margin-top: 2px; text-indent: -9000px; width: 9px; } /*نفس السابق ولكن التالى*/ a#next-slide { background: url('../img/commands-next-slide.png') no-repeat; display: block; float: right; height: 12px; margin-top: 2px; text-indent: -9000px; width: 9px; } div#slideshow-commands h4 { margin-top:1px; width:100%; } /* اللنكات الرئيسية والمقدمة */ div#message { margin-left: 410px; width: 350px; } div#message h3 { margin-bottom: 20px; } p#contact-info span { display: block; } span#phone { background: url('../img/phone-icon.png') no-repeat 0px 1px; float: left; margin-top: 25px; padding-left: 35px; width: 125px; } span#address { background:url('../img/address-icon.png') no-repeat 160px 30px; padding:5px 0px 0px 195px; } /* اللنكات الرئيسية (الازرار)مهم جدااااااا هذا الكود code ولابد ان اشرح طريقةه بالتفصيل) */ ul#tabs { margin-top: 30px; position: absolute; right: 0px; top: -65px; } ul#tabs li { background: url('../img/tabs-sprite.png') no-repeat; float: left; height: 35px; margin-right: 1px; width: 70px; } ul#tabs li a { display: block; height: 100%; text-indent: -9000px; width: 100%; } ul#tabs li#previous { background-position: 0px 0px; width:80px; } ul#tabs li#previous:hover { background-position: 0px -40px; } ul#tabs li#previous.current, ul#tabs li#previous:active { background-position: 0px -80px; } /*العادية الحالة فى الزر*/ ul#tabs li#home { background-position: -80px 0px; } /*عليه الماوس مرور عند الزر*/ ul#tabs li#home:hover { background-position: -80px -40px; } /*عليه الضغط عند الزر*/ ul#tabs li#home.current, ul#tabs li#home:active { background-position: -80px -80px; } ul#tabs li#portfolio { background-position: -150px 0px; } ul#tabs li#portfolio:hover { background-position: -150px -40px; } ul#tabs li#portfolio.current, ul#tabs li#portfolio:active { background-position: -150px -80px; } ul#tabs li#about { background-position: -220px 0px; } ul#tabs li#about:hover { background-position: -220px -40px; } ul#tabs li#about.current, ul#tabs li#about:active { background-position: -220px -80px; } ul#tabs li#contact { background-position: -290px 0px; } ul#tabs li#contact:hover { background-position: -290px -40px; } ul#tabs li#contact.current, ul#tabs li#contact:active { background-position: -290px -80px; } ul#tabs li#next { background-position: -360px 0px; width: 65px; } ul#tabs li#next:hover { background-position: -360px -40px; } ul#tabs li#next.current, ul#tabs li#next:active { background-position: -360px -80px; } /* الفوتر */ div#footer-image { background: url('../img/footer-image.png') no-repeat center #6eb9cc; border-top: 2px groove #ffffff; border-bottom:2px ridge #ffffff; height:50px; width:100%; } p#footer-text { background: url('../img/content-top-shadow.png') repeat-x; height: 37px; padding-top: 13px; width: 100%; }
مثال عملى:
فى النهاية , اليكم الناتج النهائى لتصميمنا
شاهد الموقع بصورة حية ........
انتظر حتى يتم تحميل الموقع بالكامل
(http://advphp.com/web2/temp/)
ملاحظه: فيه جزء فى ملف الcss لابد ان اشرح طريقةه بالتفصيل حتى تفهم الطريقة
وهو الجزء الخاص بالازرار, لان هذا الجزء يحتاج دقة بالغة
وبالاخص شرح طريقة خاصية background-postion
شوف الصورة
اتمنى تكونوا فهمتوا الفكرة
ملفات الموقع مرفقة بالموضوع .......
أتمنى تكونوا استفدتوا من الدرس مفصل ولو بالقليل
الملفات المرفقة
http://www.traidnt.net/vb/images/attach/zip.gif temp.zip (http://www.traidnt.net/vb/attachments/458065d1266873264-temp.zip) (966.3 كيلوبايت, عدد مرات المشاهدة 230 مرة)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
