Arabic (العربية/عربي) translation by Muhammad Hakim Almadani (you can also view the original English article)
مرحباً بك مرة أخرى! في هذا الجزء من البرنامج التعليمي نحن على وشك أن يكون الترميز لدينا التصميم إلى HTML والتي توضح بعض خصائص النمط المغلق فيسبوك التي سوف تعطيها هذا المظهر الأصلي. حتى عصا معي، وجعل نفسك فنجان من الشاي والترميز سعيدة!
مقدمة
مرحبا بكم في الجزء 2 من التصميم والتعليمات البرمجية تطبيق فيسبوك أصلية. في المادة الأخيرة بحثنا وراء الكواليس في بعض عمليات التفكير المعنية مع إنشاء تطبيق فيسبوك نظرة الأم ويشعر. على الرغم من أننا لم يذهب إلى قدر كبير من التفصيل حول التصميم الفعلي لذلك في فوتوشوب؛ ونحن يناقش كيف فيسبوك مبادئ التصميم يمكن أن تساعدك مع تصميم التطبيق الخاص بك. لبلدي على سبيل المثال اخترت لإعادة إنشاء بلوق ويبديسيجنتوتس + كتطبيق فيس بوك. أنا على افتراض أن كنت كل مريحة بما يكفي في Photoshop لتكرار ذلك أو مصممة خصيصا لإنشاء تصميم مظهر الأصلي الخاص بك.
ما عليك إنشاء
في هذا الجزء من البرنامج التعليمي نحن على وشك أن يكون الترميز هذا التصميم إلى HTML والتي توضح بعض خصائص النمط المغلق فيسبوك التي سوف تعطيها هذا المظهر الأصلي. حتى عصا معي، وجعل نفسك فنجان من الشاي والترميز سعيدة!
الخطوة 1: عدم إعداد هو إعداد للفشل
أنها دائماً فكرة جيدة للبدء مع قليلاً من التخطيط إلى الأمام. البعض منكم سوف ترغب في تصميم التخطيط الخاص بك في Photoshop بينما البعض منكم الذين هم على ثقة بما فيه الكفاية سوف تريد القفز مباشرة من أسلاك محيطة إلى علامة HTML/CSS حتى. شخصيا أنا دائماً مثل لإنشاء ما أنا ذاهب ليكون الترميز في Photoshop أولاً كما أنه يعطيني فكرة بصرية قوية فيما يتعلق بما أنا ذاهب ليكون الترميز. فإنه يمكن أيضا في متناول اليدين في المستقبل عندما تريد تحديث التطبيق الخاص بك. يمكن أن تكون أسهل بكثير لترتيب ووضع تصور الأمور في Photoshop مما يمكن أن يكون عليه في محرر التعليمات البرمجية الخاصة بك.
في بعض الأحيان أود أيضا إلى طباعة بي السلكي ووضع علامة على أبعاد عليها بقلم. وهذا أيضا يجعل الحياة أسهل عندما أنا أشعر بترميز الأشياء حتى. كما تذهب على طول أنا متأكد سوف يأتي مع الأساليب الخاصة بك وطرق للقيام بهذه الأشياء، وجزء من ذلك هو إيجاد السبيل الأفضل الذي يناسبك.
الخطوة 2: هيكل التطبيق
الطريقة لدى مجلد منظم على النحو التالي (وهذا إلى حد كبير لي الطريقة القياسية لتحديد الأمور بالنسبة كل مشروع). يمكن أن تنقذ نفسك الكثير من الوقت بمجرد إنشاء هذا القالب في مجلد فارغ على القرص الثابت الخاص بك ونسخ فإنه في كل مرة تقوم بإنشاء مشروع جديد
- css
- شبيبة
- الصور
- index.html
الخطوة 3: علامات HTML
1 |
|
2 |
<!DOCTYPE HTML>
|
3 |
<html>
|
4 |
<head>
|
5 |
<meta charset="utf-8"> |
6 |
<title>Design and Code an integrated Facebook App</title> |
7 |
|
8 |
<link rel="stylesheet" type="text/css" href="https://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css"> |
9 |
<link rel="stylesheet" type="text/css" href="css/style.css"> |
10 |
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> |
11 |
<script src="js/myjava.js" type="text/javascript"></script> |
12 |
|
13 |
|
14 |
</head>
|
15 |
|
16 |
<body>
|
17 |
</body>
|
18 |
</html>
|
إعداد لدينا تشمل
ينبغي لهذا المشروع لقد استعملت حاولت doctype HTML5، التي أعتقد أن معظمكم الآن. لإعادة تعيين CSS بي أنا لقد المرتبطة بإعادة تعيين CSS ياهو من مكتبة يوي. إذا كنت غير معتاداً إعادة المغلق، في أبسط أشكاله فإنه يمكن وصفها بأنها:
ورقة أنماط للحد من التضارب المستعرض في أشياء مثل مرتفعات الخط الافتراضي، والهوامش وأحجام الخطوط من عناوين إلخ
لا أريد الخوض في الكثير من التفاصيل حول هذا في هذا البرنامج التعليمي ولكن يمكنك العثور على مزيد من المعلومات بخصوص هذا في قراءة المقطع أدناه إضافية.
بعد إعادة تعيين لقد مرتبطة ثم إلى بلدي ملف CSS الذي أنا كنت المسمى 'style.css'. لقد ثم تابعت ذلك بتضمين أحدث مسج وتضمين لبلدي ملف javascript الذي الأول يكون اسمه 'myjava.js' (على الرغم من أننا سوف يكون إنشاء هذا الملف في الجزء التالي من البرنامج التعليمي). هذا الملف سوف تسمح لنا بالقيام بتصفية البحث وتغيير محتوى لدينا علامات تبويب الصفحات
إعداد صفحة
1 |
|
2 |
<body>
|
3 |
<div class="wrapper"> |
4 |
|
5 |
<div class="maincontent"> |
6 |
|
7 |
<div class="tab_container"> |
8 |
</div><!--End Tab Container --> |
9 |
|
10 |
</div><!--End Main Content--> |
11 |
|
12 |
<div class="sidebar"> |
13 |
</div><!--End Sidebar--> |
14 |
|
15 |
</div><!--End Wrapper --> |
16 |
|
17 |
|
18 |
</body>
|
في حين إنشاء نسخة html من التطبيق فيسبوك لدينا أود أن نضع كل شيء في مجمع وهذا 760px على نطاق واسع. هذا فقط للتأكد من أن أنا باق في 760px؛ عرض لوحة الرسم القماشية فيسبوك يتيح التطبيق الخاص بك على الجلوس. ثم إزالة هذا المجمع والمغلق لأنه قبل وضعه في فيس بوك.
مرة واحدة لدينا الإعداد لدينا يشمل و 'المجمع' ومن ثم الوقت نتحرك على اللبنات الأساسية للتطبيق لدينا. في هذا المثال بسيط نسبيا كما لدينا فقط divs 'الشريط الجانبي' و 'مينكونتينت'. لذلك سنقوم تطبيق الفئات بنفس الاسم. يمكنك، إذا أردت، استخدام 'معرف' بدلاً من 'فئات' كما لن تتكرر هذه الحالات div. بيد شيئا، التي تختار دائماً ل (على الرغم من أنني متأكد من أن نختلف بعض) استخدام الفئات في معظم البنود. أنا نادراً ما تستخدم لمعرف أجد أنه بالقيام بذلك فقط استمر على بسيطة بالنسبة لي. ابدأ يجب أن نتساءل عما إذا كان لقد أعطيت شيئا 'معرف' أو 'فئة'. هذا يمكن أن تأتي في شكل ملحوظ مفيد خاصة عند البدء في دمج مسج في التطبيقات الخاصة بك. على الرغم من أن تنظر في ما إذا كان من الممكن قبل بدء تشغيل الترميز أنه بالتأكيد لن تحتاج إلى استخدام معرف في أي مكان.
فإنه من المستحسن دائماً إنهاء كتل العلامات الخاصة بك مع تعليق الختامي تفيد الانتهاء من أي جزء من العلامات أيضا. بهذه الطريقة أنت تعرف أين ينتهي كل قسم. يجب أن اعترف كنت في وقت متأخر جداً في اعتماد هذا الأسلوب وفي بعد فوات الأوان كان يمكن أن ينقذ نفسي ساعات طويلة من الاضطرار إلى واد طريقي من خلال أكوام من التعليمات البرمجية في محاولة لمعرفة أين كتل معينة تبدأ وتنتهي.
الخطوة 4: المحتوى الرئيسي
1 |
|
2 |
<div class="maincontent"> |
3 |
|
4 |
<div class="logo"><img src="images/logo.png" width="379" height="60" alt="webdesigntuts+ logo"></div> |
5 |
|
6 |
<ul class="tabs"> |
7 |
<li><a href="#tab1">All</a></li> |
8 |
<li><a href="#tab2">About</a></li> |
9 |
<li><a href="#tab3">Write For Us</a></li> |
10 |
<li><a href="#tab4">Other Blogs</a></li> |
11 |
</ul>
|
12 |
|
13 |
<div class="tab_container"> |
14 |
<div id="tab1" class="tab_content"> |
15 |
|
16 |
<div class="post"> |
17 |
</div><!--End Blog Post--> |
18 |
|
19 |
<div class="post"> |
20 |
</div><!--End Blog Post--> |
21 |
|
22 |
</div><!--End Tab 1--> |
23 |
|
24 |
<div id="tab2" class="tab_content"> |
25 |
</div><!--End Tab 2 --> |
26 |
|
27 |
<div id="tab3" class="tab_content"> |
28 |
</div><!--End Tab 3 --> |
29 |
|
30 |
<div id="tab4" class="tab_content"> |
31 |
</div><!--End Tab 4 --> |
32 |
|
33 |
</div><!--End Tab Container --> |
34 |
|
35 |
</div><!--End Main Content--> |
36 |
|
37 |
<div class="sidebar"> |
38 |
</div><!--End Sidebar--> |
39 |
</div><!--End Wrapper --> |
لهذا التطبيق لم أكن أعتقد أنه من الضروري استخدام رأس فقط لبيت الشعار حتى لقد وضعت هذا في الجزء العلوي من div 'مينكونتينت' في جانبها div مع فئة تسمى 'شعار'. وهذا هو ثم تليها قائمة غير مرتبة لعلامات التبويب. لقد أعطيت علامات التبويب اسم فئة من؛ نعم تفكر في ذلك 'علامات التبويب'. وهذه سيكون بمثابة لدينا شريط القوائم التبويب الذي سيتم عرض صفحات مختلفة من التطبيق بلوق لدينا.
يتم تغليف صفحات التطبيق بلوق لدينا داخل حاوية div, التي قد أعطيت فئة من 'tab_container'. داخل هذا ثم يكون divs الأربعة (واحد لكل صفحة علامة التبويب/). لقد أعطيت كل أربعة من هذه فئة تسمى 'tab_content' مع كل واحد منها بعد الفئة الخاصة به لموقفه داخل الصفحة. علامة التبويب الأولى قد طبقة إضافية من 'tab1'، والثاني 'tab2'، والثالث 'tab3' إلخ. ستستخدم هذه الأسماء فئة فردية لمساعدتنا على تحديد كل علامة تبويب في الجزء التالي من البرنامج التعليمي عندما ننفذ مسج.
الخطوة 5: كل التدوينات
1 |
|
2 |
<div class="tab_container"> |
3 |
<div id="tab1" class="tab_content"> |
4 |
|
5 |
|
6 |
|
7 |
<div class="post"> |
8 |
<h3><a href="#">Designing For, and As, a Color-Blind Person</a></h3> |
9 |
<span class="postInfo">by <a href="#">Connor Turnbull</a> on Jul 22nd 2011 with 2 comments</span> |
10 |
<p>Color blindness is a mild disability through which the affected experience a decreased ability to distinguish colors from others. This can be a real drawback for anyone in the design field since color theory is an integral feature in successful design, and a lot of decisions are based on the feeling and emotion derived from...</p> |
11 |
<a class="more" href="#">Read More</a> |
12 |
<span class="line"></span> |
13 |
<a href="#">12 Likes 14 Comments Share</a> |
14 |
<span class="line"></span> |
15 |
</div><!--End Blog Post--> |
16 |
|
17 |
</div><!--End Tab 1--> |
الفردية بلوق وظيفة فئة بعنوان "ما بعد" ويقع في div مع فئة 'tab1' سوف تكون علامة التبويب هذه على الصفحة الافتراضية. ثم هذا يحتوي على علامات الارتساء وتمتد عدة مما سيتيح لنا أن تتمكن عناصر النمط مثل صاحب البلاغ تاريخ ومدونة باللون الأزرق الأصلي على غرار facebook. بعد الانتهاء من هذا شعبة 'آخر' نحن مجرد نسخ ولصقه لبقية الوظائف. لا تسرف وتسد في التعليمات البرمجية الخاصة بك، والحفاظ عليها حوالي ثلاث أو أربع كهذا سوف تعطينا فكرة عن كيف سيكون الشكل والمظهر. لقد أيضا خلق فترة زمنية مع الفئة 'الخط' الذي هو ببساطة خط أفقي سوف نستخدم في جميع أنحاء التطبيق.
الخطوة 6: علامات التبويب الأخرى
لدينا "علامات تبويب الصفحات" الأخرى تتكون أساسا من علامات h3 والربط والفقرة:
1 |
|
2 |
<div id="tab2" class="tab_content"> |
3 |
|
4 |
<h3>About</h3> |
5 |
<p>Webdesigntuts+ is a blog made to house and showcase some of the best web design tutorials and articles around. We publish tutorials that not only produce great results and interfaces, but explain the techniques behind them in a friendly, approachable manner.</p> |
6 |
<p>Web design is a booming industry with a lot of competition. We hope that reading Webdesigntuts+ will help our readers learn a few tricks, techniques and tips that they might not have seen before and help them maximize their creative potential!</p> |
7 |
<p><strong>Webdesigntuts+ is part of the Tuts+ Network</strong></p> |
8 |
|
9 |
</div><!--End Tab 2 --> |
الخطوة 7: عامل تصفية البحث
1 |
|
2 |
<form action="" method="get"> |
3 |
<input name="search" class="search" placeholder="Filter webdesigntuts+ posts"> |
4 |
</form>
|
في الجزء العلوي من الشريط الجانبي لدينا بحثنا عن تصفية الموقع--وهذا يتكون من نموذج بسيط. سنجعل هذا التشغيلية في الجزء التالي من البرنامج التعليمي باستخدام jQuery. ثم تبعتها الشكل خط أفقي آخر، ونص الفقرة تمتد عرض لدينا عدد 'يحب'.
خطوة 8: مثل ألفيس بوك والزر
1 |
|
2 |
<a class="button left" href="http://webdesign.tutsplus.com/" target="_blank"><span class="buttonimage left"></span>Website</a> |
3 |
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=253432341349745&xfbml=1"></script><fb:like href="http://apps.facebook.com/fbtuttts"layout="button_count" width="75" show_faces="true" action="like" font="lucida grande"></fb:like> |
4 |
<a class="button right" href="#"><span class="buttonimage left"></span>Logout</a> |
لحسن الحظ بالنسبة لنا، فيسبوك جعلت سوبر بسيطة إدراج زر مثل التطبيق لدينا. يمكنك إنشاء التعليمات البرمجية لنفسك مثل زر أو أي من تلك الاجتماعية المكونات الإضافية الأخرى في Facebook Developer Plugins. بمجرد لقد تم إنشاؤها في التعليمات البرمجية، جعله html الخاص بك. قد ترغب في إضافة بعض المغلق على وضعها، ولكن في هذه الحالة فإنه ليس من الضروري
الخطوة 9: علامة التبويب رؤوس
1 |
|
2 |
<div class="tabHeader">Categories</div> |
3 |
|
4 |
<ul>
|
5 |
<li><a href="#">Sample Cat 1</a></li> |
6 |
<li><a href="#">Sample Cat 2</a></li> |
7 |
<li><a href="#">Sample Cat 3</a></li> |
8 |
<li><a href="#">Sample Cat 4</a></li> |
9 |
<li><a href="#">Sample cat 5</a></li> |
10 |
</ul>
|
11 |
|
12 |
<div class="tabHeader">A Little Bit About Us</div> |
إذا كنت قد قرأت الجزء الأول من هذا البرنامج التعليمي (إذا كنت قد جعلت من هذا الآن وأنا على التخمين لديك) ثم سوف سمعتم لي الحديث عن إعادة استخدام. هذه الرؤوس التبويب تعريف ذلك أكثر من أي جزء آخر من التعليمات البرمجية الخاصة بنا. ومع فيسبوك أننا قادرون على إعادة استخدام هذه الرؤوس التبويب وتنفيذها بسهولة كبيرة. أنها تأتي في مفيد حقاً إذا كنت تريد إضافة مقطع إضافية سريعة للموقع.
الخطوة 10: المغلق
1 |
|
2 |
Code Block showing tabs headers |
الآن حان الوقت للانتقال إلى التصميم لدينا إتش تي أم ال. بسبب التصميم بسيطة فيسبوك ليس هناك الكثير المغلق. لقد كسرت فإنه إلى أجزاء لتتمكن من إلقاء نظرة على. من المهم أيضا نشير في هذه المرحلة أن ألفيس بوك يمكن أن يكون مزعج عندما يتعلق الأمر بالاختبار والتغيير والتبديل المغلق الخاص بك كما أنها مخابئ، بمعنى أنه عندما تقوم بتحميل نسخة جديدة من ورقة الأنماط الخاصة بك فإنه لا يزال يجعل القديم. على الرغم من عدم الكمال؛ وكان الحل اعتدت لإضافة '؟ الإصدار = 1' في نهاية ورقة الأنماط المضمنة في ملف الفهرس. في كل مرة تقوم بتحديث المغلق وتحميل لديك أيضا لتحديث رقم الإصدار في ملف الفهرس.
الخطوة 11: الإعداد
نبدأ المغلق عن طريق إنشاء برنامج التضمين واثنين من الفئات التي أضفت دائماً أن يكون قادراً على تعويم عناصر اليسار أو اليمين.
1 |
|
2 |
/*-----------------------------------------------------------------------------------*/
|
3 |
/* Setup
|
4 |
/*-----------------------------------------------------------------------------------*/
|
5 |
.wrapper{ |
6 |
width: 760px; |
7 |
height:200px; |
8 |
margin-left:auto; |
9 |
margin-right:auto; |
10 |
padding-top:20px; |
11 |
|
12 |
|
13 |
}
|
14 |
.right{ |
15 |
float:right; /* A class I always add to float items right */ |
16 |
}
|
17 |
.left{ |
18 |
float:left; /* To float items left*/ |
19 |
}
|
الخطوة 12: بناء كتل
اللبنات الأساسية للمحتوى الرئيسية كما يلي:
1 |
|
2 |
/*-----------------------------------------------------------------------------------*/
|
3 |
/* Setup
|
4 |
/*-----------------------------------------------------------------------------------*/
|
5 |
.wrapper{ |
6 |
width: 760px; |
7 |
height:200px; |
8 |
margin-left:auto; |
9 |
margin-right:auto; |
10 |
padding-top:20px; |
11 |
|
12 |
|
13 |
}
|
14 |
.right{ |
15 |
float:right; /* A class I always add to float items right */ |
16 |
}
|
17 |
.left{ |
18 |
float:left; /* To float items left*/ |
19 |
}
|
20 |
|
21 |
/*-----------------------------------------------------------------------------------*/
|
22 |
/* Building Blocks
|
23 |
/*-----------------------------------------------------------------------------------*/
|
24 |
|
25 |
/*-----------------------------------------------------------------------------------*/
|
26 |
/* Typography
|
27 |
/*-----------------------------------------------------------------------------------*/
|
28 |
|
29 |
|
30 |
/*-----------------------------------------------------------------------------------*/
|
31 |
/* Tabs
|
32 |
/*-----------------------------------------------------------------------------------*/
|
33 |
|
34 |
/*-----------------------------------------------------------------------------------*/
|
35 |
/* Buttons
|
36 |
/*-----------------------------------------------------------------------------------*/
|
37 |
|
38 |
/*-----------------------------------------------------------------------------------*/
|
39 |
/* Extra Components
|
40 |
/*-----------------------------------------------------------------------------------*/
|
الخطوة 13: الطباعة
ربما واحدة من أهم أجزاء CSS للتطبيق فيسبوك لدينا. تحصل على هذا الخطأ، وأنها سوف تفسد تأثير الأصلية للتطبيق الخاص بك. إلقاء نظرة حول ألفيس بوك واختر أحجام الخطوط الأكثر ملاءمة للاحتياجات الخاصة بك.
1 |
|
2 |
/*-----------------------------------------------------------------------------------*/
|
3 |
/* Typography
|
4 |
/*-----------------------------------------------------------------------------------*/
|
5 |
|
6 |
a{ |
7 |
cursor: pointer; |
8 |
color: #3B5998; |
9 |
text-decoration: none; |
10 |
}
|
11 |
a:hover{ |
12 |
text-decoration: underline; |
13 |
}
|
14 |
strong{ |
15 |
font-weight:bold; |
16 |
}
|
17 |
em{ |
18 |
font-style:italic; |
19 |
}
|
20 |
h3{ |
21 |
font-size: 16px; |
22 |
font-weight:bold; |
23 |
line-height: 1.1em; |
24 |
margin-bottom:5px; |
25 |
}
|
26 |
.postInfo{ |
27 |
display:block; /* Spans are inline element so needs to be changed to block in order for the margin to work */ |
28 |
color:#808080; |
29 |
margin-top:5px; |
30 |
margin-bottom:10px; |
31 |
}
|
32 |
p{ |
33 |
font-size: 12px; |
34 |
line-height: 1.5em; |
35 |
margin-bottom:18px; |
36 |
}
|
37 |
.line{ |
38 |
display:block; |
39 |
width:100%; |
40 |
height:1px; |
41 |
background-color:#ccc; |
42 |
margin-top:5px; |
43 |
margin-bottom:5px; |
44 |
}
|
45 |
.more{ |
46 |
color:#3B5998; |
47 |
font-weight:bold; |
48 |
|
49 |
}
|
50 |
.likesCount{ |
51 |
font-size:16px; |
52 |
font-weight:bold; |
53 |
}
|
الخطوة 14: علامات التبويب
1 |
|
2 |
/*-----------------------------------------------------------------------------------*/
|
3 |
/* Tabs
|
4 |
/*-----------------------------------------------------------------------------------*/
|
5 |
ul.tabs { |
6 |
margin: 0; |
7 |
padding: 0; |
8 |
float: left; |
9 |
list-style: none; |
10 |
height: 19px; /*--Set height of tabs--*/ |
11 |
border-bottom: 1px solid #E2E2E2; |
12 |
border-left: 1px solid #E2E2E2; |
13 |
width: 100%; |
14 |
margin-bottom:20px; |
15 |
}
|
16 |
ul.tabs li { |
17 |
float: left; |
18 |
margin: 0; |
19 |
padding: 0; |
20 |
height: 18px; /*--Minus 1px from the height of ul--*/ |
21 |
line-height: 18px; /*--aligns text within the tab--*/ |
22 |
border: 1px solid #E2E2E2; |
23 |
margin-bottom: -1px; /*--Pull the list item down 1px--*/ |
24 |
overflow: hidden; |
25 |
position: relative; |
26 |
background: #f2f2f2; |
27 |
margin-right:5px; |
28 |
min-width:73px; |
29 |
text-align:center; |
30 |
|
31 |
}
|
32 |
ul.tabs li:first-child{ /*--Removes the left border from the first child of the list--*/ |
33 |
border-left:none; |
34 |
|
35 |
}
|
36 |
ul.tabs li a { |
37 |
text-decoration: none; |
38 |
color: #333333; |
39 |
display: block; |
40 |
font-size: 11px; |
41 |
|
42 |
padding-right:5px; |
43 |
padding-left:5px; |
44 |
|
45 |
outline: none; |
46 |
}
|
47 |
ul.tabs li a:hover { |
48 |
background: #fff; |
49 |
}
|
50 |
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ |
51 |
background: #fff; |
52 |
border-bottom: 1px solid #fff; |
53 |
color:#3B5998; |
54 |
}
|
55 |
ul.tabs li.active a{ |
56 |
color:#3B5998; |
57 |
}
|
الخطوة 15: أزرار
آخر جزءا لا يتجزأ من المغلق لتطبيقات فيسبوك من الأزرار. أنا متأكد سوف تحتاج إلى استخدام عدد قليل من هذه حول تطبيقات الخاصة بك. لقد أنشأنا هذه لا تستخدم زر، ولكن بدلاً من ذلك علامة ارتساء مع فئة تمتد داخله للصورة.
1 |
|
2 |
/*-----------------------------------------------------------------------------------*/
|
3 |
/* Buttons
|
4 |
/*-----------------------------------------------------------------------------------*/
|
5 |
.button{ |
6 |
background-color:#ECEEF5; |
7 |
border:1px solid #CAD4E7; |
8 |
text-decoration:none; |
9 |
-webkit-border-radius: 3px; |
10 |
-moz-border-radius: 3px; |
11 |
border-radius: 3px; |
12 |
padding: 2px 3px 2px 2px; |
13 |
margin-right:5px; |
14 |
}
|
15 |
.button:hover{ |
16 |
border:1px solid #9DACCE; |
17 |
text-decoration:none; |
18 |
|
19 |
}
|
20 |
.buttonimage{ |
21 |
background:url(../images/icon.png); |
22 |
color: #3B5998; |
23 |
display: block; |
24 |
width:12px; |
25 |
height:12px; |
26 |
margin-right:3px; |
27 |
margin-top:1px; |
28 |
margin-bottom:1px; |
29 |
margin-left:2px; |
30 |
|
31 |
}
|
الخطوة 16: المكونات الإضافية
1 |
|
2 |
/*-----------------------------------------------------------------------------------*/
|
3 |
/* Extra Components
|
4 |
/*-----------------------------------------------------------------------------------*/
|
5 |
.logo{ |
6 |
width:379px; |
7 |
height:60px; |
8 |
margin-left:auto; |
9 |
margin-right:auto; |
10 |
margin-bottom:26px; |
11 |
position: relative; |
12 |
-moz-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7); |
13 |
-webkit-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7); |
14 |
box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7); |
15 |
}
|
16 |
.search{ |
17 |
padding: 1px 5px 2px 0; |
18 |
margin-bottom:20px; |
19 |
width:240px; |
20 |
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ |
21 |
-moz-box-sizing: border-box; /* Firefox, other Gecko */ |
22 |
box-sizing: border-box; /* Opera/IE 8+ */ |
23 |
}
|
24 |
.tabHeader{ |
25 |
background-color: #F2F2F2; |
26 |
border-top: solid 1px #E2E2E2; |
27 |
padding: 4px 5px 5px; |
28 |
margin-top:15px; |
29 |
margin-bottom:10px; |
30 |
}
|
31 |
.profileimage{ |
32 |
float:left; |
33 |
margin-right: 5px; |
34 |
}
|
الاستنتاج...
حتى أنه يوجد لدينا، لدينا الآن التطبيق فيسبوك لدينا مشفرة تصل إلى HTML/CSS. أمل أن تستمتع قراءة هذا الجزء من البرنامج التعليمي، وأن لديك الآن فهم كبير على كيف يمكن ترجمة أنماط فيسبوك إلى CSS. بالنظر في واستخدام عدد قليل خصائص CSS فيسبوك نحن حقاً قادرة على فهم كيف مجرد بضعة أسطر من التعليمات البرمجية في الأماكن الصحيحة التي يمكن أن تعطي التطبيق لدينا أن نظرة الأم ويشعر، الذي سوف تجلس بشكل مريح داخل ألفيس بوك والتمسك بمبادئ التصميم في فيس بوك.
في الجزء التالي من البرنامج التعليمي ونحن سوف تعلم كيفية تنفيذ هذا الأمر إلى أمام أن يكون تطبيق مدونة أصلية. سنقوم به هذا استخدام YQL والفيس بوك الرسم البياني API. أنا سوف أيضا يظهر لك بضعة تلميحات ونصائح تتبيل يصل التطبيق الخاص بك مع بعض الخير مسج حلوة. لذا حتى الجزء التالي، سعيد الترميز اللمحات!
مزيد من الروابط & الموارد
By
