http://i48.tinypic.com/2jaetxi.jpg
5- تقطيع المستطيل السفلى اسفل السلايد الشو
ايضا نفس الشىء...... لا تنسى ان تحذف اسم اللنكات اللى قمنا بكتابتها لاننا سوف نكتبها بملف html
http://i47.tinypic.com/33m7xx1.jpg
6- تقطيع جزء اللنكات الرئيسية ....
لاحظ ان هذا الجزء لابد ان تكون مقاساته دقيقه جدا وسوف نعرف لاحقا ذلك
http://i49.tinypic.com/2cgoa45.jpg
هذا القطعه سوف نحتاج لتكرارها , حتى يتغير شكل اللنك بمرور الماوس
لذلك , قم بفتح عمل جديد بمقاسات
http://i50.tinypic.com/33fc9dx.jpg
ثم قم بسحب القطعه اللى قمنا بتقطيعها , طبعا بعد حفظ العمل على هيئة save for web لينتج لك الصور المقطعه
وقم بتكرارها مثل الصورة الاتية ثم احفظها
http://i46.tinypic.com/zlao1u.jpg
بهيك ينتهى جزء التقطيع واعتقد ان سهل, ولابد تتدرب كثير
لانك لن تتقن الموضوع من اول مرة نهائيا
كرر مرة واثنين وثلاثة لحد ما تظبط
ننتقل الان لملف الــ css وشرحه .....
طبعا انا قمت بشرح كل جزء فى ملف css فى كل كود فوقه راح تجد الشرح
قم بمراجعه الكود بالكامل لتعرف كيفية التعديل على الجزء الذى تريده
حسب مقاسات تصميمك الذى قمت بتقطيعه
رمز 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: ' |'; }
/*لاستبدل مستطيل البحث العادى بالصورة اللى سوينها وهذا الكود مهم جدا*/
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;
}
/*كود مهم جدا لالغاء ظهور زر بحث القديم الاعتيادى ليظهر بدله مستطيل البحث فقط*/
form#search-form input[type="submit"] { display: none; }
/* Header */
/*كود الهيدر من خلفية ولونه فى حاله عدم ظهور الصورة والحافة السفلية وارتفاعه وعرضه */
div#header {
background: url('../img/header-image.png') no-repeat center;
background-color: #6eb9cc;
border-bottom: 2px ridge #ffffff;
height: 250px;
width: 100%;
}
/*هذا الكود مهم جدا وخاص باللوجو النصى للموقع ولاحظ شىء مهم جدا ان عرض هذا اللوجو هو محدد كجزء من عرض الصورة ككل
وليس من عرض الشاشة التى ترى من خلالها الموقع
اى ان
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;
}
/*خاص بزر السابق ولاخظ هذا الكود لابد ان يكون دقيق جدا حتى يكون الزر مفعل بمجرد مرور الماوس عليه*/
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;
}
/* اللنكات الرئيسية (الازرار)مهم جدااااااا هذا الكود ولابد ان اشرحه بالتفصيل) */
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%;
}[/code]
مثال عملى:
فى النهاية , اليكم الناتج النهائى لتصميمنا
شاهد الموقع بصورة حية ........
انتظر حتى يتم تحميل الموقع بالكامل
ملاحظه:
فيه جزء فى ملف الــ css لابد ان اشرحه بالتفصيل حتى تفهم الطريقة
وهو الجزء الخاص بالازرار, لان هذا الجزء يحتاج دقة بالغة
وبالاخص شرح خاصية background-postion
شوف الصورة
http://i50.tinypic.com/kdvb83.jpg
اتمنى تكونوا فهمتوا الفكرة
ملفات الموقع مرفقة بالموضوع
أتمنى تكونوا استفدتوا من الدرس ولو بالقليل
