18-02-2010, 01:06 PM
|
| |  | مسؤول قسم الدورات
 | | تاريخ التسجيل: 04-05-2008
المشاركات: 1,612
| |
 [الدرس الثانى عشر3] تطبيق كامل لتصميم موقع احترافى الجزء الثانى الhtml
نستكمل معكم اخوانى الكرام اجزاء درس تصميم موقع كامل كتطبيقا للدروس
السابقة وراح يكون هذا الجزء خاص بكود صفحة الموقع html
الدرس راح يكون مٌطول, لذلك لابد من قراءة الدرس مرة واثنين وثلاثة
وبتركيز شديد ........
نبدأ على بركة الله :
أولا:التخطيط للموقع وتحديد المطلوب فيه .
دائما تعودى عزيزى العضو, انه عندما تريد ان تقوم بتصميم وبرمجة موقع
ان تضع فى مخيلتك الفكرة التى تود عملها فى الموقع وتحدد المتطلبات اللى راح أسويها, واحفظ انى راح أسوى كذا وكذا وكذا.....الخ
وأيضا احضر ورقة وقلم وقم برسم شكل تصويرى لفكرة الموقع اللى راح تسويه قبل المباشرة فى العمل.
ومن منطلق هذا الكلام , راح أضع لكم مخطط الموقع اللى راح أسويه بإذن الله
شوف الصورة:
الصورة تتحدث عن نفسها 
فأنا قمت بعمل تخطيط للافكار اللى راح نسويها سويا بإذن الله
راجع المخطط ثم انتقل للمرحلة الثانية من الدرس معى..........
ثالثا: ملفات الموقع وصفحاته html وشرح أكوادها
دعونا نبدأ بتخطيط الموقع بhtml
راح أشرح كود html الخاص بالموقع اللى راح نسويه بالتفصيل الممل
وعليك كل جزء تتعود تكتبه وتعرف فكرة الكود.....
نبدأ بكتابة اول كل صفحة كما قلنا سابقا + الترميز
وتعريف بالميتا اللى راح بنضع فيها كلمات تخص محتوى موقعك
حتى تتعرف محركات البحث على محتوى موقعك .
وأيضا نكتب الكلمات الدلالية keywords الخاصة بموقعك
وتكتب تعريف باسم صاحب الكود او الموقع author
شوف الكود:
كود: <!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>
<!-- الكود الرئيسى للموقع راح يٌكتب هنا -->
</body>
</html>
بعد هيك فيك ملفات خاصة بjquery راح نضيفها بين وسمى style لاحقا....
ننتقل بعد هيك للكود الرئيسى اللى راح نقوم بعمله
وكل تعاملنا راح يكون بين وسمى body
ملاحظه: راجع الصورة فى الأعلى ثم تابع مرة أخرى معى....
اولا: div id status الخاص بخانة تسجيل الدخول ولنكات الموقع ومحرك بحث الموقع
أولا: الفكرة:
div id status بداخله : 1- div id statuscontent : خاص بفورم البحث
2- div id statuscommands : خاص برسالة الترحيب + لنكات الموقع
شوف فكرة الكود:
كود: <div id="status">
<div id="statuscontent">
<form>فورم البحث راح نكتب كوده هنا</form>
<div id="statuscommands">
راح نكتب رسالة ترحيب الموقع +لنكات الموقع
</div>
</div>
</div>
الحين نريد كتابته كاملا ومنسق : فراح يكون هيك:
كود: <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 خاص بعنوان الموقع واللوجو
شوف الكود:
كود: <div id="header">
<div id="logo">
<h1><a href="#" title="home">vista-design</a></h1>
<h2>technology</h2>
</div>
</div> وهذه صورته:
وخلصنا من div الهيدر
نكمل.......
ننتقل لل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
كود: <div id="content-top-shadow"></div>
هذا الdiv راح نستغله وراح نقوم بعمل ظل تجميلى فوق مربع العرض للمحتوى
ثانيا: ul id 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>
هذا الul خاص بازرار الموقع الرئيسية
من الرئيسية والعروض وعن الموقع واتصل بنا
,واكيد من معرفتك من html تعرف ان ul هى خاصة بعمل لست لاى شىء ازرار مقالات ترتيب ....الخ
ثالثا: بنسبة لdiv الmessage و الslideshow
سوف نقوم باحاطتهم فى div وراح نسميه 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 السلايد شو راح يكون مخصص لعرض صور لاعمال الموقع وووالخ
اخيرا: نختم كود الصفحة بdiv الفوتر الخاص بالحقوق, مسبوقا بdiv خاص بظل تجميلى كما فعلنا سابقا.
كود: <div id="content-bottom-shadow"></div>
<div id="footer">
<div id="footer-image"></div>
<p id="footer-text">
Copyright © 2010 vistacompany.org<br />
All Rights Reserved
</p>
</div>
والان خلونا نشوف كود الصفحة بالكامل بعد تجهيزها.
كود: <!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 © 2010 vistacompany.org<br />
All Rights Reserved
</p>
</div>
</body>
</html>
تبقى لنا الجزء الاخير وهو كود css وبعض الحركات فى التصميم اللى سويناه
فى جزء التصميم لننتهى من هذا الدرس ويكون لنا الناتج النهائى ان شاء الله
|
مواضيع جديدة في قسم دورة تصميم المواقع بإسلوب المحترفين web2.0 
دخول الاعضاء
العرض العادي
