الجزء الثالث: كود 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="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

رمز Code

كود:
<div id="content-top-shadow"></div>
هذا الـ div راح نستغله وراح نقوم بعمل ظل تجميلى فوق مربع العرض للمحتوى

ثانيا: ul id tabs

رمز Code
كود:
<ul id="tabs">
				<li id="previous">
					<a href="#previous" title="Previous">&lt;</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">&gt;</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">&lt;</a>
						<a href="#next" title="Next" id="next-slide">&gt;</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 خاص بظل تجميلى كما فعلنا سابقا.

رمز Code
كود:
<div id="content-bottom-shadow"></div>
		<div id="footer">
			<div id="footer-image"></div>
			<p id="footer-text">
				Copyright &copy; 2010 vistacompany.org<br />
				All Rights Reserved
			</p>
		</div>

والان خلونا نشوف كود الصفحة بالكامل بعد تجهيزها.

رمز 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">&lt;</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">&gt;</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">&lt;</a>
						<a href="#next" title="Next" id="next-slide">&gt;</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 &copy; 2010 vistacompany.org<br />
				All Rights Reserved
			</p>
		</div>
	</body>
</html>
تبقى لنا الجزء الاخير وهو كود css وبعض الحركات فى التصميم اللى سويناه
فى جزء التصميم لننتهى من هذا الدرس ويكون لنا الناتج النهائى ان شاء الله