مطور Mtwer

vista-design · #1 30-01-2010, 02:35 AM

بسم الله الرحمن الرحيم

فى هذا الموضوع راح أرد على اى استفسارات من الاعضاء خاصة بهذا الدرس

أخوكم vista-design

توقيعي

عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

abo omar · #2 30-01-2010, 12:31 PM

السلام عليكم
اولا اخي معذرة لتتطفلي

هل ستقيم بعد دورة css دورة php
يعني تحويل القالب الى برمجة

والسلام عليكم

فارس الكلمة · #3 30-01-2010, 03:05 PM

بارك الله في كيا فيستا

الف شكر يالغالي

vista-design · #4 30-01-2010, 03:21 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة abo omar

السلام عليكم
اولا اخي معذرة لتتطفلي

هل ستقيم بعد دورة css دورة php
يعني تحويل القالب الى برمجة

والسلام عليكم

سوف نتعرض خلال الدورة لبعض الدروس المتعلقة بphp
ولكن ليس بتعمق
فالمهم فى الدورة هو اجادة استخدام احدث الامكانيات فى تصميم المواقع
وتهيئتها ليتم اضافة اللغة البنائية php والتى راح تحاكى قواعد البيانات

توقيعي

عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

hugooo · #5 30-01-2010, 07:52 PM

السلام عليكم

هذا تطبيقي :

هذا كود html :

كود:

<!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="author" content="">
 <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
	<title>درس تخطيط صفحة تمهيدا لتصميمها </title>
</head>

<body>

<div id="container">
   <div id="header">
   
     <img src="../layout/11111.jpg"> 

     <form>
     <input type="text" name="username">
     اليوزر

     <input type="password" name="password">
     الباسورد
     </form>

   </div>

   <div class="spacer"></div>


   <div id="navbar">
       <a href="index.html?home">الرئيسية </a>
       <a href="index.html?forum">المنتدى</a>
       <a href="http://up.mtwer.com/">مركز التحميل</a>
       <a href="mailto:vista-design@email.com">اتصل بنا</a>
   </div>

   <div id="main">
       <div id="leftcolumn">
           <h1>مرحبا</h1>
           <h2>8 january 2010</h2>
           <p>اكتب مقالك هنا</p>
      </div>
      
      <div id="rightcolumn">
          <h3>الأقسام </h3>
            القسم العام </br>
			القسم الأدبي </br>
			قسم الفوتوشوب </br> 
      </div>
          
      <div class="spacer"></div>

    </div>
    
      <div id="border">
	      <a href="http://www.mtwer.com/vb/">
	        خريطة الموقع
		  </a>
	  </div>         
    
    <div id="footer">© 2010 vista-design </div>
    
</div> 

</body>
</html>

وهذا كود css :

كود:

/* ------------------------------
css vista-design layout
هذا خاص بالتنسيق الرئيسى من الصفحة من خطوط ونوع الخطوط وتأثر مرور الماوس
------------------------------ */
body{background:#d7d7d7; 
     font-family:tahoma, Helvetica, sans-serif; 
	 font-size:12px; 
	 margin:20px; 
	 padding:0;
    }

input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}

a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}

/* ------------------------------
PAGE STRUCTURE
هذا هو التغيير المهم اللى راح يقسم الصفحة كما هو موضح
------------------------------ */



#container{background:#b7d3f3; width:800px; height:auto; border:1px solid; margin:0 auto;}

#header{background:#f06eaa; border:1px solid;width:auto;display:block;height:60px;}
#header form{float:right;text-align:right; padding:5px 10px;}

#navbar{background:#fffeaa; text-align:right; font-size:small ; width:auto; border:1px solid; display:block; height:30px;}
#navbar a{height:28px; line-height:28px; padding:0 4px; display:inline;}

#main{border:1px solid;width:auto; display:block; padding:10px 0;}


#rightcolumn{background:#ffffff; width:100px ;border:1px solid;height:300px; margin-right:20px; float:right; text-align:right;
padding-right:3px;}
#rightcolumn h3{text-align:center;}


#leftcolumn{background:#ffffff; width:590px ;border:1px solid;height:300px; text-align:right; margin-left:10px; padding:3px 5px 3px 10px; float:left;}

#border{background:#fffeaa; height:auto; border:1px solid black; text-align: center;}

div.spacer{clear:both; height:10px; display:block;}



#footer{background:#f06eaa; width:auto; display:block; padding:10px 5px 9px 3px; font-size:11px; color:#e1e1e1;}

أتمنى يطلع صح ،،

vista-design · #6 31-01-2010, 12:53 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة hugooo

السلام عليكم

هذا تطبيقي :

هذا كود html :

كود:

<!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="author" content="">
 <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
	<title>درس تخطيط صفحة تمهيدا لتصميمها </title>
</head>

<body>

<div id="container">
   <div id="header">
   
     <img src="../layout/11111.jpg"> 

     <form>
     <input type="text" name="username">
     اليوزر

     <input type="password" name="password">
     الباسورد
     </form>

   </div>

   <div class="spacer"></div>


   <div id="navbar">
       <a href="index.html?home">الرئيسية </a>
       <a href="index.html?forum">المنتدى</a>
       <a href="http://up.mtwer.com/">مركز التحميل</a>
       <a href="mailto:vista-design@email.com">اتصل بنا</a>
   </div>

   <div id="main">
       <div id="leftcolumn">
           <h1>مرحبا</h1>
           <h2>8 january 2010</h2>
           <p>اكتب مقالك هنا</p>
      </div>
      
      <div id="rightcolumn">
          <h3>الأقسام </h3>
            القسم العام </br>
			القسم الأدبي </br>
			قسم الفوتوشوب </br> 
      </div>
          
      <div class="spacer"></div>

    </div>
    
      <div id="border">
	      <a href="http://www.mtwer.com/vb/">
	        خريطة الموقع
		  </a>
	  </div>         
    
    <div id="footer">© 2010 vista-design </div>
    
</div> 

</body>
</html>

وهذا كود css :

كود:

/* ------------------------------
css vista-design layout
هذا خاص بالتنسيق الرئيسى من الصفحة من خطوط ونوع الخطوط وتأثر مرور الماوس
------------------------------ */
body{background:#d7d7d7; 
     font-family:tahoma, helvetica, sans-serif; 
	 font-size:12px; 
	 margin:20px; 
	 padding:0;
    }

input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #dedede; padding:4px 0; margin-bottom:10px;}

a:link, a:visited{color:#0033cc;}
a:hover{text-decoration:none;}

/* ------------------------------
page structure
هذا هو التغيير المهم اللى راح يقسم الصفحة كما هو موضح
------------------------------ */



#container{background:#b7d3f3; width:800px; height:auto; border:1px solid; margin:0 auto;}

#header{background:#f06eaa; border:1px solid;width:auto;display:block;height:60px;}
#header form{float:right;text-align:right; padding:5px 10px;}

#navbar{background:#fffeaa; text-align:right; font-size:small ; width:auto; border:1px solid; display:block; height:30px;}
#navbar a{height:28px; line-height:28px; padding:0 4px; display:inline;}

#main{border:1px solid;width:auto; display:block; padding:10px 0;}


#rightcolumn{background:#ffffff; width:100px ;border:1px solid;height:300px; margin-right:20px; float:right; text-align:right;
padding-right:3px;}
#rightcolumn h3{text-align:center;}


#leftcolumn{background:#ffffff; width:590px ;border:1px solid;height:300px; text-align:right; margin-left:10px; padding:3px 5px 3px 10px; float:left;}

#border{background:#fffeaa; height:auto; border:1px solid black; text-align: Center;}

div.spacer{clear:both; height:10px; display:block;}



#footer{background:#f06eaa; width:auto; display:block; padding:10px 5px 9px 3px; font-size:11px; color:#e1e1e1;}

أتمنى يطلع صح ،،

تطبيق ممتاز
وجرب تسوى قوائم جديدة يسار وفوق وتحت
وجرب ........
بالتوفيق

توقيعي

عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

العلم نور · #7 31-01-2010, 02:23 PM

السلام عليكم ورحمة الله وبركاته
تم بحمد الله الانتهاء من تطبيق الدرس السادس

ولكن واجهتني بعض المشاكل وهي كالأتي :-

ظهور الصفحة بأشكال مختلفة في عدة متصفحات مثل الفايرفوكس طلع غير مرتب وأما بالاكسلبور طلع ميه ميه 100%

حاولت أغير لون الناف باك ومشى معي واجهتني لون الروابط ولو غيرت لون الرابط رايح تتغير جميع الروابط وهذه مشكلة فكيف أجعل روابط في مكان لها ألوان خاصة

و جزاك الله خير
إن شاء الله نستمر في الدورة المباركة

رابط الصفحة

vista-design · #8 01-02-2010, 12:43 AM

اقتباس:

المشاركة الأصلية كتبت بواسطة العلم نور

السلام عليكم ورحمة الله وبركاته
تم بحمد الله الانتهاء من تطبيق الدرس السادس

ولكن واجهتني بعض المشاكل وهي كالأتي :-

ظهور الصفحة بأشكال مختلفة في عدة متصفحات مثل الفايرفوكس طلع غير مرتب وأما بالاكسلبور طلع ميه ميه 100%

حاولت أغير لون الناف باك ومشى معي واجهتني لون الروابط ولو غيرت لون الرابط رايح تتغير جميع الروابط وهذه مشكلة فكيف أجعل روابط في مكان لها ألوان خاصة

و جزاك الله خير
إن شاء الله نستمر في الدورة المباركة

رابط الصفحة

ما شاء الله تطبيق روعه روعه
ابداع

وبالنسبة لاستفسارك
لو راجعت الدرس وراجعت جملة انتبه راح تعرف ان هذه الابعاد ليست المثاليه فهى فقط لتكون واضحه كاملة لمن يرى الواجهه
لكن عندما تبدأ باستغلال الواجهة باضافة المقالات والاقسام وملاها
راح تحتاج تغيير لبعض القيم كما قلت فى الدرس

وسؤالك الثانى

لازم كل جزء مدرج فى div خاص به بid خاص به ان يتم التعديل عليه

يعنى انت سوى div لاى جزء تريده فى الصفحة
واعطيه id
ثم عدل عليه من css
سواء للخلفية
او الخطوط

واصل ابداعك .....كل ماطبقت اكثر راح تطور مهاراتك اكثر
بالتوفيق

توقيعي

عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

المحقق كونـــان · #9 03-02-2010, 08:52 PM

أخوي فيستا مساء الخير

من يوم وضعت الدرس وانا اكتب الكود واعدل لين انعفص مخي

وقلت لازم اعرف وش معنى الاكواد وحدة وحدة والحمدلله كلها عرفت وش معناها وعملها بس باقي حاجي ما عرفتها صعبت علي شوي اللي هي باللون الأحمر

كود:

font-family:tahoma, Helvetica, sans-serif;
<a href="index.html?home"></a>

ياليت تقولي وش تفيد فيه انا عارف انها سهله

بس مبتدئ

وهذا تطبيقي

بس فيه حاجه صغينوطه ان اول شيء جاء textbox وبعدين جاء اسم المستخدم كيف اخليها اسم المستخدم وبعدين textbok يعني زي كذا

هذا كود HTML

كود:

<!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="author" content="">
	<link rel="stylesheet" type="text/css" href="style.css" media="screen">

	<title>شبكة الجهني دوت كوم</title>
</head>

<body>
<div id="container">
<div id="header"><img src="رابط اللوجو">
<form>
اسم المستخدم : <input type="text" name="UserName">
كلمة المرور : <input type="text" name="PassWord"></form></div>


<div class="spacer"></div>


<div id="navbar"><a href="index.html?home">الرئيسية</a>
<a href="index.html?forum">المنتدى</a>
<a href="mailto:conan_@windowslive.com">أتصل بنا</a></div>

<div id="main">
<div id="rightcolumn"><h3>الأقسام </h3>
اكتب الأقسام </div>

<div id="leftcolumn">
<h1>اضف مقال</h1>
<h2>8 january 2010</h2>
<p>اكتب مقالك هنا</p></div></div>

<div id="footer">© 2010 AL-Johani.com </div>



</div>
</body>
</html>

وهذا كود CSS الساحره

كود:



#container{width: 800px; height: auto; border: 1px solid;border-color: navy; margin: 0 auto; color: navy;}

#header{border: 1px solid;border-color: navy; width: auto; height: 70px;; display: block; margin: 0;}

#header form{float: right; text-align: right; padding: 5px 10px; border-color: navy;}

#navbar{border-color: navy; text-align: right ; width: auto; border: 1px solid; padding: 0px 6px ; font-size: small; display: block; height: 30px;}

#main{border: 1px solid;border-color: navy; height: 360px;}

#rightcolumn{width:115px ;border:1px solid;border-color: navy; height:340px; margin-right:10px; float:right; text-align:right;padding-right:3px; margin-top: 8px;}
#rightcolumn h3{text-align:center;}

#leftcolumn{width:630px ;border:1px solid;border-color: navy; height:335px; text-align:right; margin-left:10px; padding:3px 5px 3px 10px; float:left; margin-top: 8px;}

#footer{width:auto; display:block; padding:10px 5px 9px 3px; font-size:11px; color:navy; border-color: navy;}


div.spacer{clear: both;display: block; height: 10px; border-color: navy;}

تحياتي كونـــان

cava · #10 03-02-2010, 09:35 PM

السلام عليكم

تم التطبيق

مثال حي لتطبيقي

CAVA

كود الصفحة

كود:

<!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="author" content="">
 <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
	<title>CAVA </title>
	<style>
<!--
BODY {

	border: solid 1px #90AFC0;
scrollbar-3dlight-color: #FFEBD9;scrollbar-arrow-color: #AA5100;scrollbar-darkshadow-color: #AA5100;scrollbar-face-color: #FFB756;scrollbar-highlight-color: #efefef;scrollbar-shadow-color: #000000;scrollbar-track-color: #FFEBD9;


}
SELECT {
	WIDTH: 400px
	font-size: 11px;
	font-family: "Tahoma", MS Sans Serif;
                     color: #000000;
}
.button
{
	background: url('http://up.mtwer.com/images/default/btn_bg.gif') repeat-x;
	border: 1px outset;
	color: #000000;
	font-style:normal; font-variant:normal; font-weight:bold; font-size:11px; font-family:tahoma, verdana, geneva, lucida, lucida grande, arial, helvetica, sans-serif

}

.input_blur
{
font: 12px tahoma, geneva, lucida,lucida grande, arial, helvetica, sans-serif;
padding: 0px;
border: solid 1px #90AFC0;
height:20px;
width:100px;
}
.textarea_blur
{
font: 12px tahoma, geneva, lucida,lucida grande, arial, helvetica, sans-serif;
padding: 0px;
border: solid 1px #90AFC0;
}
-->
</style>
</head>
	<body>

<div id="container">
   <div id="header">
   
     <div align="center"></div>
		<div align="center">
			<table border="0" width="95%" cellspacing="0" cellpadding="0">
				<tr>
					<td background="mtwer_03.gif" width="651">
					<img border="0" src="http://www.mtwer.com/mtwer/mtwer_02.gif" width="645" height="147" align="left"></td>
					<td background="http://www.mtwer.com/mtwer/mtwer_03.gif">&nbsp;</td>
					<td width="348">
					<img border="0" src="http://www.mtwer.com/mtwer/head.jpg" width="342" height="147" align="right"></td>
				</tr>
			</table>
		</div>

   </div>

   <div class="spacer">
	<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Times New Roman; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium">
	<span class="Apple-style-span" style="color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; font-size: 12px">
	<table cellpadding="0" cellspacing="0" dir="rtl" width="85%">
		<tr>
			<td width="10%" style="font-size: 12px; color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; " align="right">
			<p align="right">
			<img border="0" src="http://www.mtwer.com/mtwer/loginbox_ar.gif" alt="حسابك الخاص"></td>
			<td width="20%" style="font-size: 12px; color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; " align="right">
			<p align="right">اسم المستخدم :</td>
			<td width="15%" style="font-size: 12px; color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; " align="right">
			<div id="username" style="width: 102px; opacity: 0.7; ">
				<p align="right">
				<input class="input_blur" name="username0" onblur="FadeOut('username',0);this.className='input_blur'" onfocus="FadeIn('username',0);this.className='input_focus'" type="text" style="font: normal normal normal 12px/normal tahoma, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgb(144, 175, 192); border-right-color: rgb(144, 175, 192); border-bottom-color: rgb(144, 175, 192); border-left-color: rgb(144, 175, 192); height: 20px; width: 100px; "></div>
			</td>
			<td width="15%" style="font-size: 12px; color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; " align="right">
			<p align="right">كلمة المرور :</td>
			<td width="15%" style="font-size: 12px; color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; " align="right">
			<div id="password" style="width: 102px; opacity: 0.65; ">
				<p align="right">
				<input class="input_blur" id="passwordfield" name="password" onblur="FadeOut('password',0);this.className='input_blur'" onfocus="FadeIn('password',0);this.className='input_focus'" type="password" style="font: normal normal normal 12px/normal tahoma, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgb(144, 175, 192); border-right-color: rgb(144, 175, 192); border-bottom-color: rgb(144, 175, 192); border-left-color: rgb(144, 175, 192); height: 20px; width: 100px; "></div>
			</td>
			<td width="5%" style="font-size: 12px; color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; " align="right">
			<p align="right">
			<a onclick="md5utf();login.submit();" style="color: rgb(24, 117, 220); text-decoration: none; font-size: 11px; font-family: Tahoma, 'MS Sans Serif'; cursor: pointer; ">
			<img border="0" src="http://www.mtwer.com/mtwer/login_ar.gif" alt="تسجيل الدخول"></a></td>
			<td width="20%" style="font-size: 12px; color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; " align="right">
			<p align="right">[<a style="color: rgb(24, 117, 220); text-decoration: none; font-size: 11px; font-family: Tahoma, 'MS Sans Serif'; " href="http://www.mtwer.com/index.php?action=restorepassword"><span class="Apple-converted-space">&nbsp;</span>فقدت 
			كلمة المرور؟</a><span class="Apple-converted-space">&nbsp;</span>]</td>
		</tr>
	</table>
	</span></span></div>


   <div id="navbar">
       <p align="center">
       <strong>
		<a style="color: #1875DC; text-decoration: none; font-size: 11px; font-family: Tahoma, 'MS Sans Serif'" href="http://www.mtwer.com/vb/">
		الرئيسية</a> |
		<a href="http://www.mtwer.com/index.php?action=newaccount">
		<span style="font-family: Tahoma, 'MS Sans Serif'; font-size: 11px; color: #1875DC; text-decoration: none">
		مركز المعلومات</span></a> | <a href="http://up.mtwer.com/">
		<span style="font-family: Tahoma, 'MS Sans Serif'; font-size: 11px; color: #1875DC; text-decoration: none">
		مركز التحميل</span></a> | <a href="http://www.mtwer.com/vb/ads.php">
		<span style="font-family: Tahoma, 'MS Sans Serif'; font-size: 11px; color: #1875DC; text-decoration: none">
		للاعلان في مطور</span></a></strong><p align="center">
       &nbsp;</div>

   <div id="main">
       <div id="leftcolumn">
           <div align="center">
			<center>
			<table dir="rtl" cellSpacing="0" cellPadding="0" width="577">
				<tr>
					<td vAlign="top" width="577" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
					<table width="100%">
						<tr>
							<td vAlign="top" width="100%" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
							<center>
							<div align="center">
								<table dir="rtl" cellSpacing="0" cellPadding="0" width="560" border="0">
									<tr>
										<td colSpan="3" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
										<table cellSpacing="0" cellPadding="0" width="100%" border="0">
											<tr>
												<td width="19" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
												<img height="36" src="http://www.mtwer.com/mtwer/mtwer_065.gif" width="34" border="0"></td>
												<td background="http://www.mtwer.com/mtwer/mtwer_042.gif" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
												<p align="center"><strong>اخر 
												المقالات</strong></td>
												<td width="17" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
												<img height="36" src="http://www.mtwer.com/mtwer/mtwer_035.gif" width="34" border="0"></td>
											</tr>
										</table>
										</td>
									</tr>
									<tr>
										<td width="15" background="tjmel_069.gif" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
										<img height="21" src="http://www.mtwer.com/mtwer/tjmel_069.gif" width="15" border="0"></td>
										<td width="97%" bgColor="#efefef" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
										<table style="BORDER-COLLAPSE: collapse" borderColor="#efefef" width="100%" border="1">
											<tr>
												<td style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
												<font color="red"><b>
												<font color="black" size="-1">
												<center>
												<table cellSpacing="0" cellPadding="0" width="99%" border="0">
													<tr>
														<td>
														<table class="grid" cellSpacing="0" cellPadding="0" width="100%" align="center" border="0">
															<tr>
																<td>
																<table cellSpacing="1" cellPadding="4" width="100%" border="0">
																	<tr>
																		<td class="normal" vAlign="top" width="100%" colSpan="3">
																		<div id="msg780802">
																			<table style="TABLE-LAYOUT: fixed">
																				<tr>
																					<td>
																					<div id="to_hidd">
																						<div style="FONT-WEIGHT: normal; FONT-SIZE: 18px; COLOR: blue; FONT-FAMILY: ; TEXT-ALIGN: center">
																							<img class alt="مصر والجزائر امم افريقيا" src="http://www.yallakora.com/pictures/main/gomaa-egypt40029-1-2010-0-20-23.jpg"> 

																							<p>&nbsp;</p>
																							<p><strong>الجزائر (أ ش أ):</strong></p>
																							<p>أبرزت وسائل الأعلام الجزائرية&nbsp;الاثنين نبأ فوز المنتخب المصري ببطولة الأمم الأفريقية للمرة الثالثة على التوالي، والسابعة فى تاريخه، وهو ما لم يحققه أى منتخب من قبل بعد فوزه على منتخب غانا 1- صفر.</p>
																							<p>وتحت عنوان &quot;الفراعنة يتوجون للمرة الثالثة على التوالى &quot;، قالت صحيفة &quot;صوت الأحرار &quot; الصادرة صباح الاثنين إن المنتخب المصرى دخل الأحد التاريخ الأفريقى من بابه الواسع بتتويجه بلقب كأس أفريقيا للامم للمرة الثالثة على التوالى والسابعة فى تاريخه بعدما تغلب على نظيره الغانى بهدف دون رد تحت أنظار كل من السويسرى جوزيف بلاتر رئيس الفيفا والكاميرونى عيسى حياتو رئيس الأتحاد الأفريقى.</p>
																							<p>من جهتها، قالت صحيفة &quot;جزائر نيوز&quot; تحت عنوان &quot;مصر ترفع الكأس الإفريقية للمرة السابعة&quot; إن المنتخب المصري أحرز لقبه الإفريقي الثالث على التوالي والسابع في تاريخه، إثر فوزه على المنتخب الغاني بملعب 11 نوفمبر بلواندا، بهدف وحيد سجله البديل جدو في الدقيقة 85.</p>
																							<p>وأوضحت أن البداية كانت قوية من كلا الطرفين اللذين حاولا تسجيل هدف السبق وقد اغتنم المنتخب المصري الفرصة بواسطة البديل جدو بعد تبادل الكرة بينه وبين زيدان، ليسكن &quot;جدو&quot; الكرة في شباك المنتخب الغاني، ويتوج بذلك المنتخب المصري بكأس إفريقيا.</p>
																							<p>كما أشارت صحيفتا &quot; لوكودييان دى أوران و ليبرتى &quot; الناطقتين بالفرنسية فى عددهما الصادر الاثنين تحت عنوان &quot;مصر تتوج للمرة الثالثة &quot; إلى أن حارس المرمى عصام الحضرى له دور كبير فى حصول مصر على التاج الأفريقي للمرة السابعة والثالثة على التوالى. </p>
																							<p>من جهته، ذكر موقع الإذاعة الجزائرية أن المنتخب المصري توج بكأس إفريقيا الـ27 بأنجولا، وأتى التتويج المصري في أعقاب فوز الفراعنة بهدف دون مقابل على المنتخب الغاني الشاب بهدف مهاجمها محمد ناجي جدو، مشيرة إلى أن مصر حققت إنجازا تاريخيا غير مسبوق بفوزها بالبطولة للمرة الثالثة على التوالى والسابعة فى تاريخها .</p>
																							<p>&nbsp;</p>
																							<p><font color="#ff0000">المصدر :</font></p>
																							<p><a href="http://www.yallakora.com/arabic/YK_news/details.aspx?id=110983&Catid=1&region">http://www.yallakora.com/arabic/YK_news/details.aspx?id=110983&amp;Catid=1®ion</a>=</div>
																					</div>
																					</td>
																				</tr>
																			</table>
																		</div>
																		</td>
																	</tr>
																</table>
																</td>
															</tr>
														</table>
														</td>
													</tr>
												</table>
												</center></font></b></font>
<SCRIPT>
						function CheckForm()
						{
						if(document.getElementById('file1')) { if(document.getElementById('file1').value=="") { alert('يجب ملء حقل ملف 1'); document.getElementById('file1').focus; return false; } } 

if(document.getElementById('file1').value=='')
{

}
else
{
if(document.getElementById('categoryidfield1').value=='') { alert('يجب ملء حقل اسم التصنيف 1'); document.getElementById('categoryidfield1').focus; return false; }
 if(document.getElementById('passkey1').disabled==false) { if(document.getElementById('passkey1').value=='') { alert('يجب ملء حقل كلمة مرور للحماية؟ 1'); document.getElementById('passkey1').focus; return false; } } 
}


						}</SCRIPT>
												<br>
&nbsp;</td>
											</tr>
										</table>
										</td>
										<td width="14" background="tjmel_105.gif" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
										<img height="31" src="http://www.mtwer.com/mtwer/tjmel_105.gif" width="14" border="0"></td>
									</tr>
									<tr>
										<td colSpan="3" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
										<table cellSpacing="0" cellPadding="0" width="100%" border="0">
											<tr>
												<td width="15" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
												<img height="27" src="http://www.mtwer.com/mtwer/mtwer_159.gif" width="34" border="0"></td>
												<td background="http://www.mtwer.com/mtwer/mtwer1_151.gif" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
												&nbsp;</td>
												<td width="26" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
												<img height="27" src="http://www.mtwer.com/mtwer/mtwer_139.gif" width="34" border="0"></td>
											</tr>
										</table>
										</td>
									</tr>
								</table>
							</div>
							</center></td>
						</tr>
					</table>
					</td>
				</tr>
			</table>
			</center></div>
			<div align="center"> 
	&nbsp;<table border="0" cellpadding="0" cellspacing="0" width="560" dir="rtl"> 
		<tr> 
			<td colspan="3"> 
			<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
				<tr> 
					<td width="19"> 
					<img border="0" src="http://www.mtwer.com/mtwer/mtwer_065.gif" width="34" height="36"></td> 
					<td background="http://www.mtwer.com/mtwer/mtwer_042.gif"> 
					<p align="center"><a name="visitorsupload" title="visitorsupload"></a>
					<strong><span lang="ar-sa">الأقسام</span> </strong></td> 
					<td width="17"> 
					<img border="0" src="http://www.mtwer.com/mtwer/mtwer_035.gif" width="34" height="36"></td> 
				</tr> 
			</table> 
			</td> 
		</tr> 
		<tr> 
			<td width="15" background="mtwer/tjmel_069.gif"> 
			<img border="0" src="http://www.mtwer.com/mtwer/tjmel_069.gif" width="15" height="21"></td> 
			<td width="97%" bgcolor="#E1E1E2"><center>			<table cellpadding="4" style="border-collapse: collapse" width="100%"> 
				<tbody> 
					<tr> 
						<td width="33%" height="50"> 
<li> 
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">
<span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-size: 13px; text-align: -webkit-right; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">
<a style="color: rgb(24, 24, 141); text-decoration: none; " href="http://www.mtwer.com/vb/dev57.html">
<strong>دورة تصميم المواقع بإسلوب المحترفين web2.0</strong><span class="Apple-converted-space">&nbsp;</span></a></span></span></td>
						<td width="33%" height="50"> 
<li> 
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">
<span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-size: 11px; text-align: -webkit-right; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">
<b>
<a style="color: rgb(24, 24, 141); text-decoration: none; " href="http://www.mtwer.com/vb/dev25.html">
دورة ادارة السيرفرات (المستوى الأول)</a></b>,<span class="Apple-converted-space">&nbsp;</span></span></span></td>
						<td width="33%" height="50"> 
<li> 
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">
<span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-size: 11px; text-align: -webkit-right; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">
<b>
<a style="color: rgb(24, 24, 141); text-decoration: none; " href="http://www.mtwer.com/vb/dev29.html">
دورة برمجة الـ PHP (المستوى الأول)</a></b>,<span class="Apple-converted-space">&nbsp;</span></span></span></td></tr><tr>
						<td width="33%" height="122"> 
<li> 
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">
<span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-size: 11px; text-align: -webkit-right; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">
<b>
<a style="color: rgb(24, 24, 141); text-decoration: none; " href="http://www.mtwer.com/vb/dev31.html">
دورة تطوير منتديات الـ vBulletin</a></b>,<span class="Apple-converted-space">&nbsp;</span></span></span></td>
						<td width="33%" height="122"> 
<li> 
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">
<span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-size: 11px; text-align: -webkit-right; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">
<b>
<a style="color: rgb(24, 24, 141); text-decoration: none; " href="http://www.mtwer.com/vb/dev32.html">
دورة تصميم ستايلات منتديات الفي بي vBulletin</a></b>,<span class="Apple-converted-space">&nbsp;</span></span></span></td>
						<td width="33%" height="122"> 
<li> 
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">
<span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-size: 11px; text-align: -webkit-right; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">
<b>
<a style="color: rgb(24, 24, 141); text-decoration: none; " href="http://www.mtwer.com/vb/dev37.html">
دورة تعلم لغة الهتمل HTML</a></b></span></span></td></tr> 
				</tbody> 
			</table></center></td> 
			<td width="14" background="mtwer/tjmel_105.gif"> 
			<img border="0" src="http://www.mtwer.com/mtwer/tjmel_105.gif" width="14" height="31"></td> 
		</tr> 
		<tr> 
			<td colspan="3"> 
			<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
				<tr> 
					<td width="15"> 
					<img border="0" src="http://www.mtwer.com/mtwer/mtwer_159.gif" width="34" height="27"></td> 
					<td background="http://www.mtwer.com/mtwer/mtwer1_151.gif">&nbsp;</td> 
					<td width="26"> 
					<img border="0" src="http://www.mtwer.com/mtwer/mtwer_139.gif" width="34" height="27"></td> 
				</tr> 
			</table> 
			</td> 
		</tr> 
	</table> 
</div>  
			<p align="center">&nbsp;</p> 
      </div>
		<div align="center">
			<table border="0" width="75%" cellspacing="0" cellpadding="0">
				<tr>
					<td background="mtwer_18.gif">
					<img border="0" src="mtwer_17.gif" width="388" height="76"></td>
					<td width="4"></td>
					<td background="mtwer_18.gif" width="599">
					<img border="0" src="http://www.mtwer.com/mtwer/mtwer_19.gif" width="600" height="76"></td>
				</tr>
			</table></div>

    </div>
    
</div> 

<p align="center"><font style="FONT-SIZE: 11px" face="tahoma" color="#ff9900">
جميع الحقوق محفوظة 2010 ©</font></p>

</body>
</html>

كود ال css

كود:

/* ------------------------------
css vista-design layout
هذا خاص بالتنسيق الرئيسى من الصفحة من خطوط ونوع الخطوط وتأثر مرور الماوس
------------------------------ */
body{font-family:tahoma, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;}

input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}

a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}

/* ------------------------------
PAGE STRUCTURE
هذا هو التغيير المهم اللى راح يقسم الصفحة كما هو موضح
------------------------------ */



#container{width:800px; height:auto; border:1px solid; margin:0 auto;}

#header{border:1px solid;width:auto;display:block;height:60px;}
#header form{float:right;text-align:right; padding:5px 10px;}

#navbar{text-align:right; font-size:small ; width:auto; border:1px solid; display:block; height:30px;}
#navbar a{height:28px; line-height:28px; padding:0 4px; display:inline;}

#main{border:1px solid;width:auto; display:block; padding:10px 0;}


#rightcolumn{background:#ffffff;width:100px ;border:1px solid;height:300px; margin-right:20px; float:right; text-align:right;
padding-right:3px;}
#rightcolumn h3{text-align:center;}


#leftcolumn{background:#ffffff;width:590px ;border:1px solid;height:300px; text-align:right; margin-left:10px; padding:3px 5px 3px 10px; float:left;}



div.spacer{clear:both; height:10px; display:block;}



#footer{width:auto; display:block; padding:10px 5px 9px 3px; font-size:11px; color:#666666;}

عندي مشكتين وعندي سؤال

اولا المشكلتين :

المشكلة الاولي:

الصفحة تظهر تمام بالاكسبلور

لكن اذا فتحتها بمتصفح جوجل كروم

البرواز بيكون مو مظبوط

المشكلة الثانية

عندما ارفع ملف style.css

الصفحة تتشوه تماما

ثانيا السؤال :

عندي سؤال وياريت تجاوبني عليه بكل صراحة لان الاجابه راح هتفيدني كتير

بخصوص ال css

انا حتي الان لا اسطتيع التعديل علي كو ال css

انا اقوم باخذ احدي كودcss الاعضاء واضعه عندي

لاني بصراحة حتي الان لا اعرف كيفية التعديل

يعني كود ال css

الذي وضعته الان في رده

اخذته من احد الاعضاء

لكن صفح ال html اسطتيع التعديل عليها الحمد لله عندي خبرة بها

فهل العيب مني ؟

ام ال css فعلا صعبة ؟

ام ماذا ؟

اتمني الاجابة بكل صراحة

بانتظار الرد

محجووب · #11 03-02-2010, 10:31 PM

السلام عليكم

الف شكر لك اخي على جهودك الأكثر من رائعه

وبصراحة الشرح واضح مع ان تواجهني احيانا بعض المشاكل يمكن لأن الموضوع شوي جديد علي بس ارجع للدروس عادة وتنحل المشاكل

وهذا تطبيقي اتمنى انه يكون صحيح اتمنى لو في اي اخطاء ابلاغي حتى استفيد من الاخطاء واقوم بتعديها في المرات القادمة ان شاء الله

هذا كود الصفحه html

هناك مشكله في الترميز في الكود ولكن عدلت على الترميز حتى يدعم اللغة العربيه عند تشغيل الموقع

كود بلغة HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 
 <link rel="stylesheet" type="text/css" media="screen" href="style.css"; charset="widowse-1256" />
 <title>&Ecirc;&Oslash;&Egrave;&iacute;&THORN; &Ccedil;&aacute;&Iuml;&Ntilde;&Oacute; &Ccedil;&aacute;&Oacute;&Ccedil;&Iuml;&Oacute; </title>
</head>
<body>
<div id="container">
<div id="header" style="width: 798px; height: 120px">
<div id="logo"><img src="vista_logo[5].png" width="76" height="72"/></div>
<div id="form">
<form>
&Ccedil;&aacute;&iacute;&aelig;&Ograve;&Ntilde;: 
  <input type="text" name="username">&nbsp;&nbsp;&nbsp;
 
&Ccedil;&aacute;&Egrave;&Ccedil;&Oacute;&aelig;&Ntilde;&Iuml;: <input type="password" name="password"></form>
</div></div>
<div id="navbar">
<a rel="nofollow" href="index.html?home">&Ccedil;&aacute;&Ntilde;&AElig;&iacute;&Oacute;&iacute;&Eacute; </a><a rel="nofollow" href="index.html?forum">&Ccedil;&aacute;&atilde;&auml;&Ecirc;&Iuml;&igrave;</a>
<a href="mailto:ee2005@hotmail.com.com">&Ccedil;&aacute;&atilde;&szlig;&Ecirc;&Egrave;&Eacute;</a>
<a href="mailto:vista-design@email.com">&Ccedil;&Ecirc;&Otilde;&aacute; &Egrave;&auml;&Ccedil;</a>
</div>
<div id="main">
<div id="leftcloumn">
<h1>&Ccedil;&Ouml;&Yacute; &atilde;&THORN;&Ccedil;&aacute;</h1>
<h2>8 january 2010</h2>
<p>&Ccedil;&szlig;&Ecirc;&Egrave; &atilde;&THORN;&Ccedil;&aacute;&szlig; &aring;&auml;&Ccedil;</p>
</div>
<div id="rightcolumn">
<h3>&Ccedil;&aacute;&Atilde;&THORN;&Oacute;&Ccedil;&atilde; </h3>
&Ccedil;&szlig;&Ecirc;&Egrave; &Ccedil;&aacute;&Atilde;&THORN;&Oacute;&Ccedil;&atilde; 
</div>
 
<div class="spacer"></div>
</div>
<div id="footer">© 2010 vista-design</div>
</div>
</body>
</html>

وهذا ملف الاستايل

كود بلغة HTML:

/* ------------------------------
css vista-design layout
??? ??? ???????? ??????? ?? ?????? ?? ???? ???? ?????? ????? ???? ??????
------------------------------ */
body{font-family:tahoma, Helvetica, sans-serif; font-size:12px; background:#d8e6ec url(img36.jpg) repeat-x; margin:20px; padding:0;}
input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:20px; color:#ffffff;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #514d4d; padding:4px 0; margin-bottom:10px;}
a:link, a:visited{color:#514d4d;}
a:hover{text-decoration:none;}
/* ------------------------------
PAGE STRUCTURE
??? ?? ??????? ????? ???? ??? ???? ?????? ??? ?? ????
------------------------------ */
 
#container{width:800px; height:auto; border:1px solid; margin:0 auto;}
#header{border:1px solid;width:auto;display:block;height:60px;}
#header form{float:right;text-align:right; padding:5px 10px;}
#navbar{text-align:right; font-size:small ; width:auto; border:1px solid; display:block; height:30px;}
#navbar a{height:28px; line-height:28px; padding:0 4px; display:inline;}
#main{border:1px solid;width:auto; display:block; padding:10px 0;}

#rightcolumn{width:100px ;border:1px solid;height:300px; margin-right:20px; float:right; text-align:right;
padding-right:3px;}
#rightcolumn h3{text-align:center;}

#leftcolumn{width:590px ;border:1px solid;height:300px; text-align:right; margin-left:10px; padding:3px 5px 3px 10px; float:left;}

div.spacer{clear:both; height:10px; display:block;}
 
#footer{width:auto; display:block; padding:10px 5px 9px 3px;
border:solid

الصور المرفقة

Untitled-2.jpg‏ (15.6 كيلوبايت, المشاهدات 4)

ghada · #12 04-02-2010, 06:56 PM

انى عارفغ ان الدرس خاص بالقوالب
بس لانى بطبق الدرس ودروس سابقة لكم من هذا المنتدى الرائع لتعلم تصميم المواقع ع عندى سوالللاخ فيستا
الان انى صممت صفحات باستخدام php واتش تى ام ال و ماي اس كيو ال

وظهرت البيانات بشكل طبيعي ماشي الحال
السوال من شان اسحب بيانات من القاعدة الي الصفحة

اما تضهر البينات بشكل عمودى او اوفقي ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟ فقط
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#C0C0C0" width="100%" id="AutoNumber14" height="198">
<tr>
<td width="40" height="21" bgcolor="#153E7E" >


Tehama Laptops
</TD>
<td width="40" height="19" bgcolor="#153E7E" >
</TD>
<td bgcolor="#153E7E" >
</TD>
</tr>
<?php

$link=mysql_connect("localhost","root","");
$m=mysql_db_query("tehama1","select * from laptops ");
//$row=mysql_fetch_array($m);
while($row=mysql_fetch_row($m))
{
echo "<tr>";
echo '<TD width="150" height="100">';
echo '<img src="./images/'.$row[3].'" >';
echo"</td>";
echo '<TD width="150" height="100" >';
echo "" ;
echo "";
echo $row[4];
echo "" ;
echo " ";
echo "" ;
echo $row[1];
echo " " ;
echo "</TD>" ;
echo '<td width="35" height="20" bgcolor="#153E7E" >';
echo "" ;
echo "" ;
echo $row[2];
echo "</TD>" ;
echo "</TR>";
echo '<td >';
echo "" ;
echo "" ;
echo "----------------------------";
echo "</TD>" ;
echo "</TR>";
}
mysql_close;

?>
</table>انى اريد ين يظهروا بشكل عمودين والصفوف حسب ما موجود بالقاعدة
الرجاء الرد علي للاهمية

vista-design · #13 04-02-2010, 09:37 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة المحقق كونـــان

أخوي فيستا مساء الخير

من يوم وضعت الدرس وانا اكتب الكود واعدل لين انعفص مخي

وقلت لازم اعرف وش معنى الاكواد وحدة وحدة والحمدلله كلها عرفت وش معناها وعملها بس باقي حاجي ما عرفتها صعبت علي شوي اللي هي باللون الأحمر

كود:

font-family:tahoma, Helvetica, sans-serif;
<a href="index.html?home"></a>

ياليت تقولي وش تفيد فيه انا عارف انها سهله

بس مبتدئ

وهذا تطبيقي

بس فيه حاجه صغينوطه ان اول شيء جاء textbox وبعدين جاء اسم المستخدم كيف اخليها اسم المستخدم وبعدين textbok يعني زي كذا

هذا كود HTML

كود:

<!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="author" content="">
	<link rel="stylesheet" type="text/css" href="style.css" media="screen">

	<title>شبكة الجهني دوت كوم</title>
</head>

<body>
<div id="container">
<div id="header"><img src="رابط اللوجو">
<form>
اسم المستخدم : <input type="text" name="UserName">
كلمة المرور : <input type="text" name="PassWord"></form></div>


<div class="spacer"></div>


<div id="navbar"><a href="index.html?home">الرئيسية</a>
<a href="index.html?forum">المنتدى</a>
<a href="mailto:conan_@windowslive.com">أتصل بنا</a></div>

<div id="main">
<div id="rightcolumn"><h3>الأقسام </h3>
اكتب الأقسام </div>

<div id="leftcolumn">
<h1>اضف مقال</h1>
<h2>8 january 2010</h2>
<p>اكتب مقالك هنا</p></div></div>

<div id="footer">© 2010 AL-Johani.com </div>



</div>
</body>
</html>

وهذا كود CSS الساحره

كود:



#container{width: 800px; height: auto; border: 1px solid;border-color: navy; margin: 0 auto; color: navy;}

#header{border: 1px solid;border-color: navy; width: auto; height: 70px;; display: block; margin: 0;}

#header form{float: right; text-align: right; padding: 5px 10px; border-color: navy;}

#navbar{border-color: navy; text-align: right ; width: auto; border: 1px solid; padding: 0px 6px ; font-size: small; display: block; height: 30px;}

#main{border: 1px solid;border-color: navy; height: 360px;}

#rightcolumn{width:115px ;border:1px solid;border-color: navy; height:340px; margin-right:10px; float:right; text-align:right;padding-right:3px; margin-top: 8px;}
#rightcolumn h3{text-align:center;}

#leftcolumn{width:630px ;border:1px solid;border-color: navy; height:335px; text-align:right; margin-left:10px; padding:3px 5px 3px 10px; float:left; margin-top: 8px;}

#footer{width:auto; display:block; padding:10px 5px 9px 3px; font-size:11px; color:navy; border-color: navy;}


div.spacer{clear: both;display: block; height: 10px; border-color: navy;}

تحياتي كونـــان

بالنسبة ل sans-serif فهى عائلة او مجموعة من الخطوط
وتشمل الخطوط الاتية :
arial
verdana
tahoma

وفائدتها انك ممكن تحدد اكتر من نوع خط فيها حتى يظهر بالشكل اللى يريده
فى حال كان المتصفح عنده لايدعمه فيظهر بشكل خط اخر
ولعلك تشوف فى المحرر هنا فى المنتدى خاصية الخطوط نفس الفكرة

-----------

سؤالك الثانى:
حتى تعكس لابد ان تعطى امر الfloat
ليكون اتجاه المنطقة من اليمين لليسار

كود:

float:right;

والتطبيق ممتاز
وانا احترم من يجرب يكتب الكود بيده
حتى لو هتخطأ
المهم انك حاولت وجربت وفهمت القصة كيف ماشية

توقيعي

عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

vista-design · #14 04-02-2010, 09:43 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة cava

السلام عليكم

تم التطبيق

مثال حي لتطبيقي

CAVA

كود الصفحة

كود:

<!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="author" content="">
 <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
	<title>CAVA </title>
	<style>
<!--
BODY {

	border: solid 1px #90AFC0;
scrollbar-3dlight-color: #FFEBD9;scrollbar-arrow-color: #AA5100;scrollbar-darkshadow-color: #AA5100;scrollbar-face-color: #FFB756;scrollbar-highlight-color: #efefef;scrollbar-shadow-color: #000000;scrollbar-track-color: #FFEBD9;


}
SELECT {
	WIDTH: 400px
	font-size: 11px;
	font-family: "Tahoma", MS Sans Serif;
                     color: #000000;
}
.button
{
	background: url('http://up.mtwer.com/images/default/btn_bg.gif') repeat-x;
	border: 1px outset;
	color: #000000;
	font-style:normal; font-variant:normal; font-weight:bold; font-size:11px; font-family:tahoma, verdana, geneva, lucida, lucida grande, arial, helvetica, sans-serif

}

.input_blur
{
font: 12px tahoma, geneva, lucida,lucida grande, arial, helvetica, sans-serif;
padding: 0px;
border: solid 1px #90AFC0;
height:20px;
width:100px;
}
.textarea_blur
{
font: 12px tahoma, geneva, lucida,lucida grande, arial, helvetica, sans-serif;
padding: 0px;
border: solid 1px #90AFC0;
}
-->
</style>
</head>
	<body>

<div id="container">
   <div id="header">
   
     <div align="center"></div>
		<div align="center">
			<table border="0" width="95%" cellspacing="0" cellpadding="0">
				<tr>
					<td background="mtwer_03.gif" width="651">
					<img border="0" src="http://www.mtwer.com/mtwer/mtwer_02.gif" width="645" height="147" align="left"></td>
					<td background="http://www.mtwer.com/mtwer/mtwer_03.gif">&nbsp;</td>
					<td width="348">
					<img border="0" src="http://www.mtwer.com/mtwer/head.jpg" width="342" height="147" align="right"></td>
				</tr>
			</table>
		</div>

   </div>

   <div class="spacer">
	<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Times New Roman; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium">
	<span class="Apple-style-span" style="color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; font-size: 12px">
	<table cellpadding="0" cellspacing="0" dir="rtl" width="85%">
		<tr>
			<td width="10%" style="font-size: 12px; color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; " align="right">
			<p align="right">
			<img border="0" src="http://www.mtwer.com/mtwer/loginbox_ar.gif" alt="حسابك الخاص"></td>
			<td width="20%" style="font-size: 12px; color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; " align="right">
			<p align="right">اسم المستخدم :</td>
			<td width="15%" style="font-size: 12px; color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; " align="right">
			<div id="username" style="width: 102px; opacity: 0.7; ">
				<p align="right">
				<input class="input_blur" name="username0" onblur="FadeOut('username',0);this.className='input_blur'" onfocus="FadeIn('username',0);this.className='input_focus'" type="text" style="font: normal normal normal 12px/normal tahoma, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgb(144, 175, 192); border-right-color: rgb(144, 175, 192); border-bottom-color: rgb(144, 175, 192); border-left-color: rgb(144, 175, 192); height: 20px; width: 100px; "></div>
			</td>
			<td width="15%" style="font-size: 12px; color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; " align="right">
			<p align="right">كلمة المرور :</td>
			<td width="15%" style="font-size: 12px; color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; " align="right">
			<div id="password" style="width: 102px; opacity: 0.65; ">
				<p align="right">
				<input class="input_blur" id="passwordfield" name="password" onblur="FadeOut('password',0);this.className='input_blur'" onfocus="FadeIn('password',0);this.className='input_focus'" type="password" style="font: normal normal normal 12px/normal tahoma, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-color: rgb(144, 175, 192); border-right-color: rgb(144, 175, 192); border-bottom-color: rgb(144, 175, 192); border-left-color: rgb(144, 175, 192); height: 20px; width: 100px; "></div>
			</td>
			<td width="5%" style="font-size: 12px; color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; " align="right">
			<p align="right">
			<a onclick="md5utf();login.submit();" style="color: rgb(24, 117, 220); text-decoration: none; font-size: 11px; font-family: Tahoma, 'MS Sans Serif'; cursor: pointer; ">
			<img border="0" src="http://www.mtwer.com/mtwer/login_ar.gif" alt="تسجيل الدخول"></a></td>
			<td width="20%" style="font-size: 12px; color: rgb(114, 114, 114); font-family: Tahoma, 'MS Sans Serif'; " align="right">
			<p align="right">[<a style="color: rgb(24, 117, 220); text-decoration: none; font-size: 11px; font-family: Tahoma, 'MS Sans Serif'; " href="http://www.mtwer.com/index.php?action=restorepassword"><span class="Apple-converted-space">&nbsp;</span>فقدت 
			كلمة المرور؟</a><span class="Apple-converted-space">&nbsp;</span>]</td>
		</tr>
	</table>
	</span></span></div>


   <div id="navbar">
       <p align="center">
       <strong>
		<a style="color: #1875DC; text-decoration: none; font-size: 11px; font-family: Tahoma, 'MS Sans Serif'" href="http://www.mtwer.com/vb/">
		الرئيسية</a> |
		<a href="http://www.mtwer.com/index.php?action=newaccount">
		<span style="font-family: Tahoma, 'MS Sans Serif'; font-size: 11px; color: #1875DC; text-decoration: none">
		مركز المعلومات</span></a> | <a href="http://up.mtwer.com/">
		<span style="font-family: Tahoma, 'MS Sans Serif'; font-size: 11px; color: #1875DC; text-decoration: none">
		مركز التحميل</span></a> | <a href="http://www.mtwer.com/vb/ads.php">
		<span style="font-family: Tahoma, 'MS Sans Serif'; font-size: 11px; color: #1875DC; text-decoration: none">
		للاعلان في مطور</span></a></strong><p align="center">
       &nbsp;</div>

   <div id="main">
       <div id="leftcolumn">
           <div align="center">
			<center>
			<table dir="rtl" cellSpacing="0" cellPadding="0" width="577">
				<tr>
					<td vAlign="top" width="577" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
					<table width="100%">
						<tr>
							<td vAlign="top" width="100%" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
							<center>
							<div align="center">
								<table dir="rtl" cellSpacing="0" cellPadding="0" width="560" border="0">
									<tr>
										<td colSpan="3" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
										<table cellSpacing="0" cellPadding="0" width="100%" border="0">
											<tr>
												<td width="19" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
												<img height="36" src="http://www.mtwer.com/mtwer/mtwer_065.gif" width="34" border="0"></td>
												<td background="http://www.mtwer.com/mtwer/mtwer_042.gif" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
												<p align="center"><strong>اخر 
												المقالات</strong></td>
												<td width="17" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
												<img height="36" src="http://www.mtwer.com/mtwer/mtwer_035.gif" width="34" border="0"></td>
											</tr>
										</table>
										</td>
									</tr>
									<tr>
										<td width="15" background="tjmel_069.gif" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
										<img height="21" src="http://www.mtwer.com/mtwer/tjmel_069.gif" width="15" border="0"></td>
										<td width="97%" bgColor="#efefef" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
										<table style="BORDER-COLLAPSE: collapse" borderColor="#efefef" width="100%" border="1">
											<tr>
												<td style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
												<font color="red"><b>
												<font color="black" size="-1">
												<center>
												<table cellSpacing="0" cellPadding="0" width="99%" border="0">
													<tr>
														<td>
														<table class="grid" cellSpacing="0" cellPadding="0" width="100%" align="center" border="0">
															<tr>
																<td>
																<table cellSpacing="1" cellPadding="4" width="100%" border="0">
																	<tr>
																		<td class="normal" vAlign="top" width="100%" colSpan="3">
																		<div id="msg780802">
																			<table style="TABLE-LAYOUT: fixed">
																				<tr>
																					<td>
																					<div id="to_hidd">
																						<div style="FONT-WEIGHT: normal; FONT-SIZE: 18px; COLOR: blue; FONT-FAMILY: ; TEXT-ALIGN: center">
																							<img class alt="مصر والجزائر امم افريقيا" src="http://www.yallakora.com/pictures/main/gomaa-egypt40029-1-2010-0-20-23.jpg"> 

																							<p>&nbsp;</p>
																							<p><strong>الجزائر (أ ش أ):</strong></p>
																							<p>أبرزت وسائل الأعلام الجزائرية&nbsp;الاثنين نبأ فوز المنتخب المصري ببطولة الأمم الأفريقية للمرة الثالثة على التوالي، والسابعة فى تاريخه، وهو ما لم يحققه أى منتخب من قبل بعد فوزه على منتخب غانا 1- صفر.</p>
																							<p>وتحت عنوان &quot;الفراعنة يتوجون للمرة الثالثة على التوالى &quot;، قالت صحيفة &quot;صوت الأحرار &quot; الصادرة صباح الاثنين إن المنتخب المصرى دخل الأحد التاريخ الأفريقى من بابه الواسع بتتويجه بلقب كأس أفريقيا للامم للمرة الثالثة على التوالى والسابعة فى تاريخه بعدما تغلب على نظيره الغانى بهدف دون رد تحت أنظار كل من السويسرى جوزيف بلاتر رئيس الفيفا والكاميرونى عيسى حياتو رئيس الأتحاد الأفريقى.</p>
																							<p>من جهتها، قالت صحيفة &quot;جزائر نيوز&quot; تحت عنوان &quot;مصر ترفع الكأس الإفريقية للمرة السابعة&quot; إن المنتخب المصري أحرز لقبه الإفريقي الثالث على التوالي والسابع في تاريخه، إثر فوزه على المنتخب الغاني بملعب 11 نوفمبر بلواندا، بهدف وحيد سجله البديل جدو في الدقيقة 85.</p>
																							<p>وأوضحت أن البداية كانت قوية من كلا الطرفين اللذين حاولا تسجيل هدف السبق وقد اغتنم المنتخب المصري الفرصة بواسطة البديل جدو بعد تبادل الكرة بينه وبين زيدان، ليسكن &quot;جدو&quot; الكرة في شباك المنتخب الغاني، ويتوج بذلك المنتخب المصري بكأس إفريقيا.</p>
																							<p>كما أشارت صحيفتا &quot; لوكودييان دى أوران و ليبرتى &quot; الناطقتين بالفرنسية فى عددهما الصادر الاثنين تحت عنوان &quot;مصر تتوج للمرة الثالثة &quot; إلى أن حارس المرمى عصام الحضرى له دور كبير فى حصول مصر على التاج الأفريقي للمرة السابعة والثالثة على التوالى. </p>
																							<p>من جهته، ذكر موقع الإذاعة الجزائرية أن المنتخب المصري توج بكأس إفريقيا الـ27 بأنجولا، وأتى التتويج المصري في أعقاب فوز الفراعنة بهدف دون مقابل على المنتخب الغاني الشاب بهدف مهاجمها محمد ناجي جدو، مشيرة إلى أن مصر حققت إنجازا تاريخيا غير مسبوق بفوزها بالبطولة للمرة الثالثة على التوالى والسابعة فى تاريخها .</p>
																							<p>&nbsp;</p>
																							<p><font color="#ff0000">المصدر :</font></p>
																							<p><a href="http://www.yallakora.com/arabic/YK_news/details.aspx?id=110983&Catid=1&region">http://www.yallakora.com/arabic/YK_news/details.aspx?id=110983&amp;Catid=1®ion</a>=</div>
																					</div>
																					</td>
																				</tr>
																			</table>
																		</div>
																		</td>
																	</tr>
																</table>
																</td>
															</tr>
														</table>
														</td>
													</tr>
												</table>
												</center></font></b></font>
<SCRIPT>
						function CheckForm()
						{
						if(document.getElementById('file1')) { if(document.getElementById('file1').value=="") { alert('يجب ملء حقل ملف 1'); document.getElementById('file1').focus; return false; } } 

if(document.getElementById('file1').value=='')
{

}
else
{
if(document.getElementById('categoryidfield1').value=='') { alert('يجب ملء حقل اسم التصنيف 1'); document.getElementById('categoryidfield1').focus; return false; }
 if(document.getElementById('passkey1').disabled==false) { if(document.getElementById('passkey1').value=='') { alert('يجب ملء حقل كلمة مرور للحماية؟ 1'); document.getElementById('passkey1').focus; return false; } } 
}


						}</SCRIPT>
												<br>
&nbsp;</td>
											</tr>
										</table>
										</td>
										<td width="14" background="tjmel_105.gif" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
										<img height="31" src="http://www.mtwer.com/mtwer/tjmel_105.gif" width="14" border="0"></td>
									</tr>
									<tr>
										<td colSpan="3" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
										<table cellSpacing="0" cellPadding="0" width="100%" border="0">
											<tr>
												<td width="15" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
												<img height="27" src="http://www.mtwer.com/mtwer/mtwer_159.gif" width="34" border="0"></td>
												<td background="http://www.mtwer.com/mtwer/mtwer1_151.gif" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
												&nbsp;</td>
												<td width="26" style="font-size: 12px; color: #727272; font-family: Tahoma,'MS Sans Serif'">
												<img height="27" src="http://www.mtwer.com/mtwer/mtwer_139.gif" width="34" border="0"></td>
											</tr>
										</table>
										</td>
									</tr>
								</table>
							</div>
							</center></td>
						</tr>
					</table>
					</td>
				</tr>
			</table>
			</center></div>
			<div align="center"> 
	&nbsp;<table border="0" cellpadding="0" cellspacing="0" width="560" dir="rtl"> 
		<tr> 
			<td colspan="3"> 
			<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
				<tr> 
					<td width="19"> 
					<img border="0" src="http://www.mtwer.com/mtwer/mtwer_065.gif" width="34" height="36"></td> 
					<td background="http://www.mtwer.com/mtwer/mtwer_042.gif"> 
					<p align="center"><a name="visitorsupload" title="visitorsupload"></a>
					<strong><span lang="ar-sa">الأقسام</span> </strong></td> 
					<td width="17"> 
					<img border="0" src="http://www.mtwer.com/mtwer/mtwer_035.gif" width="34" height="36"></td> 
				</tr> 
			</table> 
			</td> 
		</tr> 
		<tr> 
			<td width="15" background="mtwer/tjmel_069.gif"> 
			<img border="0" src="http://www.mtwer.com/mtwer/tjmel_069.gif" width="15" height="21"></td> 
			<td width="97%" bgcolor="#E1E1E2"><center>			<table cellpadding="4" style="border-collapse: collapse" width="100%"> 
				<tbody> 
					<tr> 
						<td width="33%" height="50"> 
<li> 
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">
<span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-size: 13px; text-align: -webkit-right; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">
<a style="color: rgb(24, 24, 141); text-decoration: none; " href="http://www.mtwer.com/vb/dev57.html">
<strong>دورة تصميم المواقع بإسلوب المحترفين web2.0</strong><span class="Apple-converted-space">&nbsp;</span></a></span></span></td>
						<td width="33%" height="50"> 
<li> 
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">
<span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-size: 11px; text-align: -webkit-right; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">
<b>
<a style="color: rgb(24, 24, 141); text-decoration: none; " href="http://www.mtwer.com/vb/dev25.html">
دورة ادارة السيرفرات (المستوى الأول)</a></b>,<span class="Apple-converted-space">&nbsp;</span></span></span></td>
						<td width="33%" height="50"> 
<li> 
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">
<span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-size: 11px; text-align: -webkit-right; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">
<b>
<a style="color: rgb(24, 24, 141); text-decoration: none; " href="http://www.mtwer.com/vb/dev29.html">
دورة برمجة الـ PHP (المستوى الأول)</a></b>,<span class="Apple-converted-space">&nbsp;</span></span></span></td></tr><tr>
						<td width="33%" height="122"> 
<li> 
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">
<span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-size: 11px; text-align: -webkit-right; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">
<b>
<a style="color: rgb(24, 24, 141); text-decoration: none; " href="http://www.mtwer.com/vb/dev31.html">
دورة تطوير منتديات الـ vBulletin</a></b>,<span class="Apple-converted-space">&nbsp;</span></span></span></td>
						<td width="33%" height="122"> 
<li> 
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">
<span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-size: 11px; text-align: -webkit-right; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">
<b>
<a style="color: rgb(24, 24, 141); text-decoration: none; " href="http://www.mtwer.com/vb/dev32.html">
دورة تصميم ستايلات منتديات الفي بي vBulletin</a></b>,<span class="Apple-converted-space">&nbsp;</span></span></span></td>
						<td width="33%" height="122"> 
<li> 
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'Times New Roman'; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; ">
<span class="Apple-style-span" style="font-family: tahoma, verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; font-size: 11px; text-align: -webkit-right; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; ">
<b>
<a style="color: rgb(24, 24, 141); text-decoration: none; " href="http://www.mtwer.com/vb/dev37.html">
دورة تعلم لغة الهتمل HTML</a></b></span></span></td></tr> 
				</tbody> 
			</table></center></td> 
			<td width="14" background="mtwer/tjmel_105.gif"> 
			<img border="0" src="http://www.mtwer.com/mtwer/tjmel_105.gif" width="14" height="31"></td> 
		</tr> 
		<tr> 
			<td colspan="3"> 
			<table border="0" cellpadding="0" cellspacing="0" width="100%"> 
				<tr> 
					<td width="15"> 
					<img border="0" src="http://www.mtwer.com/mtwer/mtwer_159.gif" width="34" height="27"></td> 
					<td background="http://www.mtwer.com/mtwer/mtwer1_151.gif">&nbsp;</td> 
					<td width="26"> 
					<img border="0" src="http://www.mtwer.com/mtwer/mtwer_139.gif" width="34" height="27"></td> 
				</tr> 
			</table> 
			</td> 
		</tr> 
	</table> 
</div>  
			<p align="center">&nbsp;</p> 
      </div>
		<div align="center">
			<table border="0" width="75%" cellspacing="0" cellpadding="0">
				<tr>
					<td background="mtwer_18.gif">
					<img border="0" src="mtwer_17.gif" width="388" height="76"></td>
					<td width="4"></td>
					<td background="mtwer_18.gif" width="599">
					<img border="0" src="http://www.mtwer.com/mtwer/mtwer_19.gif" width="600" height="76"></td>
				</tr>
			</table></div>

    </div>
    
</div> 

<p align="center"><font style="FONT-SIZE: 11px" face="tahoma" color="#ff9900">
جميع الحقوق محفوظة 2010 ©</font></p>

</body>
</html>

كود ال css

كود:

/* ------------------------------
css vista-design layout
هذا خاص بالتنسيق الرئيسى من الصفحة من خطوط ونوع الخطوط وتأثر مرور الماوس
------------------------------ */
body{font-family:tahoma, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;}

input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}

a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}

/* ------------------------------
PAGE STRUCTURE
هذا هو التغيير المهم اللى راح يقسم الصفحة كما هو موضح
------------------------------ */



#container{width:800px; height:auto; border:1px solid; margin:0 auto;}

#header{border:1px solid;width:auto;display:block;height:60px;}
#header form{float:right;text-align:right; padding:5px 10px;}

#navbar{text-align:right; font-size:small ; width:auto; border:1px solid; display:block; height:30px;}
#navbar a{height:28px; line-height:28px; padding:0 4px; display:inline;}

#main{border:1px solid;width:auto; display:block; padding:10px 0;}


#rightcolumn{background:#ffffff;width:100px ;border:1px solid;height:300px; margin-right:20px; float:right; text-align:right;
padding-right:3px;}
#rightcolumn h3{text-align:center;}


#leftcolumn{background:#ffffff;width:590px ;border:1px solid;height:300px; text-align:right; margin-left:10px; padding:3px 5px 3px 10px; float:left;}



div.spacer{clear:both; height:10px; display:block;}



#footer{width:auto; display:block; padding:10px 5px 9px 3px; font-size:11px; color:#666666;}

عندي مشكتين وعندي سؤال

اولا المشكلتين :

المشكلة الاولي:

الصفحة تظهر تمام بالاكسبلور

لكن اذا فتحتها بمتصفح جوجل كروم

البرواز بيكون مو مظبوط

المشكلة الثانية

عندما ارفع ملف style.css

الصفحة تتشوه تماما

ثانيا السؤال :

عندي سؤال وياريت تجاوبني عليه بكل صراحة لان الاجابه راح هتفيدني كتير

بخصوص ال css

انا حتي الان لا اسطتيع التعديل علي كو ال css

انا اقوم باخذ احدي كودcss الاعضاء واضعه عندي

لاني بصراحة حتي الان لا اعرف كيفية التعديل

يعني كود ال css

الذي وضعته الان في رده

اخذته من احد الاعضاء

لكن صفح ال html اسطتيع التعديل عليها الحمد لله عندي خبرة بها

فهل العيب مني ؟

ام ال css فعلا صعبة ؟

ام ماذا ؟

اتمني الاجابة بكل صراحة

بانتظار الرد

تطبيق رائع
وبالنسبة لمشكلتك
ياريت تراجع جملة انتبه اللى ذكرتها فى الموضوع
فالابعاد هذه فقط للمشاهدة
ولابد من التعديل عليها مرة اخرى
وهذا لن تأتى من اكتساب الخبرة وتجربة عمل مخطط اكثر من مرة ......

-------

بالنسبة لسؤالك

الcss سهله والله
بس لها عيب واحد
هى انها محتاجه تطبيق كثير جدا
ولابد ان تعرف مشاكل الcss مع المتصفحات المختلفة
حتى تتجنبها فى تعاملك مع الكود ليتوافق مع كافة المتصفحات
ولعل اكبر مشكلة فى css هو الاكسبلورر,كارثة اسميها بالنسبة لcss
ولابد يتم عمل له احترام وعمل كود خاص بهذا المتصفح العجيب اللى انقرض
من زمان ومازال الكثير منا يستخدم ال6 حتى الان

لو تريد فهم الcss جيدا
انصحك مثلا بالحبث عن قوالب جاهزه لمواقع
وفتح ملف css الخاص بها
ورؤية كيفية عملها

عندك قوالب template monster
رائعة وقوية ومنظمة
وانا اتعلمت منها كثيرا

توقيعي

عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

vista-design · #15 04-02-2010, 09:48 PM

اقتباس:

المشاركة الأصلية كتبت بواسطة محجووب

السلام عليكم

الف شكر لك اخي على جهودك الأكثر من رائعه

وبصراحة الشرح واضح مع ان تواجهني احيانا بعض المشاكل يمكن لأن الموضوع شوي جديد علي بس ارجع للدروس عادة وتنحل المشاكل

وهذا تطبيقي اتمنى انه يكون صحيح اتمنى لو في اي اخطاء ابلاغي حتى استفيد من الاخطاء واقوم بتعديها في المرات القادمة ان شاء الله

هذا كود الصفحه html

هناك مشكله في الترميز في الكود ولكن عدلت على الترميز حتى يدعم اللغة العربيه عند تشغيل الموقع

كود بلغة HTML:

<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
 
 <link rel="stylesheet" type="text/css" media="screen" href="style.css"; charset="widowse-1256" />
 <title>&ecirc;&oslash;&egrave;&iacute;&thorn; &ccedil;&aacute;&iuml;&ntilde;&oacute; &ccedil;&aacute;&oacute;&ccedil;&iuml;&oacute; </title>
</head>
<body>
<div id="container">
<div id="header" style="width: 798px; height: 120px">
<div id="logo"><img src="vista_logo[5].png" width="76" height="72"/></div>
<div id="form">
<form>
&ccedil;&aacute;&iacute;&aelig;&ograve;&ntilde;: 
  <input type="text" name="username">&nbsp;&nbsp;&nbsp;
 
&ccedil;&aacute;&egrave;&ccedil;&oacute;&aelig;&ntilde;&iuml;: <input type="password" name="password"></form>
</div></div>
<div id="navbar">
<a rel="nofollow" href="index.html?home">&ccedil;&aacute;&ntilde;&aelig;&iacute;&oacute;&iacute;&eacute; </a><a rel="nofollow" href="index.html?forum">&ccedil;&aacute;&atilde;&auml;&ecirc;&iuml;&igrave;</a>
<a href="mailto:ee2005@hotmail.com.com">&ccedil;&aacute;&atilde;&szlig;&ecirc;&egrave;&eacute;</a>
<a href="mailto:vista-design@email.com">&ccedil;&ecirc;&otilde;&aacute; &egrave;&auml;&ccedil;</a>
</div>
<div id="main">
<div id="leftcloumn">
<h1>&ccedil;&ouml;&yacute; &atilde;&thorn;&ccedil;&aacute;</h1>
<h2>8 january 2010</h2>
<p>&ccedil;&szlig;&ecirc;&egrave; &atilde;&thorn;&ccedil;&aacute;&szlig; &aring;&auml;&ccedil;</p>
</div>
<div id="rightcolumn">
<h3>&ccedil;&aacute;&atilde;&thorn;&oacute;&ccedil;&atilde; </h3>
&ccedil;&szlig;&ecirc;&egrave; &ccedil;&aacute;&atilde;&thorn;&oacute;&ccedil;&atilde; 
</div>
 
<div class="spacer"></div>
</div>
<div id="footer">© 2010 vista-design</div>
</div>
</body>
</html>

وهذا ملف الاستايل

كود بلغة HTML:

/* ------------------------------
css vista-design layout
??? ??? ???????? ??????? ?? ?????? ?? ???? ???? ?????? ????? ???? ??????
------------------------------ */
body{font-family:tahoma, helvetica, sans-serif; font-size:12px; background:#d8e6ec url(img36.jpg) repeat-x; margin:20px; padding:0;}
input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:20px; color:#ffffff;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #514d4d; padding:4px 0; margin-bottom:10px;}
a:link, a:visited{color:#514d4d;}
a:hover{text-decoration:none;}
/* ------------------------------
page structure
??? ?? ??????? ????? ???? ??? ???? ?????? ??? ?? ????
------------------------------ */
 
#container{width:800px; height:auto; border:1px solid; margin:0 auto;}
#header{border:1px solid;width:auto;display:block;height:60px;}
#header form{float:right;text-align:right; padding:5px 10px;}
#navbar{text-align:right; font-size:small ; width:auto; border:1px solid; display:block; height:30px;}
#navbar a{height:28px; line-height:28px; padding:0 4px; display:inline;}
#main{border:1px solid;width:auto; display:block; padding:10px 0;}

#rightcolumn{width:100px ;border:1px solid;height:300px; margin-right:20px; float:right; text-align:right;
padding-right:3px;}
#rightcolumn h3{text-align:center;}

#leftcolumn{width:590px ;border:1px solid;height:300px; text-align:right; margin-left:10px; padding:3px 5px 3px 10px; float:left;}

div.spacer{clear:both; height:10px; display:block;}
 
#footer{width:auto; display:block; padding:10px 5px 9px 3px;
border:solid

تمام التطبيق بارك الله فيك اخوى

توقيعي

عالم مطورى الويب لتعليم برمجة وتصميم المواقع
www.advphp.com

أدوات الموضوع
مشاهدة صفحة طباعة الموضوع أرسل هذا الموضوع إلى صديق
انواع عرض الموضوع
العرض العادي الانتقال إلى العرض المتطور الانتقال إلى العرض الشجري

المواضيع المتشابهه
الموضوع	كاتب الموضوع	المنتدى	مشاركات	آخر مشاركة
الدرس السادس عشر : شرح كيفية الاشتراك فى القنوات من خلال قائمة SubScriptions	Gaf_8008	دورة يوتيوب، تعلم اليوتيوب، شرح YouTube	20	12-05-2011 06:12 PM
درس عمل تخطيط لصفحة والزوايا المستديرة layout+rounded corners ب css	vista-design	لغات برمجة مواقع PHP, ASP, Java Script, Perl	5	27-04-2011 12:13 PM
مناقشــة الدرس الخامس دروس فيديو مكثفة للتطبيــق	vista-design	دورة تصميم المواقع بإسلوب المحترفين web2.0	15	04-02-2010 11:28 PM
[الدرس السادس] كيفية عمل تخطيط لصفحةlayout تمهيدا لتصميمها ب css	vista-design	دورة تصميم المواقع بإسلوب المحترفين web2.0	0	30-01-2010 02:32 AM

مطور Mtwer

روابط مفيدة ننصح بزيارتها

روابط مهمة

من خدماتنا

خيارات الاعضاء والزوار