أحدث المواضيع

تطبيق مشاريع HTML CSS | ورشة تصميم موقع انترنت : الدرس الخامس : كيف تصمم موقع متكامل : HTML5 : CSS3 : Photoshop :Dreamwaver

تطبيق مشاريع HTML CSS | ورشة تصميم موقع انترنت ::: الدرس الخامس :::

كيف تصمم موقع متكامل

تطبيق مشاريع HTML CSS | هذه الدورة هي ورشة عمل لتصميم موقع متكامل معتمدين فيه على ماتعلمناه في الدورات السابقة HTML5 و CSS3 
( الكود بعد الفيديو )


تطبيق مشاريع HTML CSS | ورشة تصميم موقع انترنت : الدرس الخامس : كيف تصمم موقع متكامل : HTML5 : CSS3 : Photoshop :Dreamwaver
تطبيق مشاريع HTML CSS | ورشة تصميم موقع انترنت : الدرس الخامس : كيف تصمم موقع متكامل : HTML5 : CSS3 : Photoshop :Dreamwaver


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DeveWebe Site</title>
<style>
#wrapper 
 {
  height:900px;
  width: 960px;
  margin-left:auto;
  margin-right:auto;
 }

#header 
 {
  height:250px;
  width:960px;
  }
#nav
 { 
 height:50px;
 width:960px;
  }
#content 
  height:500px;
  width:960px;
}

#side
  width:320px;
  height:400px;
  float:left;
}

#main
{
width:620px;
height:400px;
float:right;
margin-top:5px;
}

#footer 
{
width:960px;
height:100px;
background-color:#ccc;
border-radius:25px;
position:relative;
margin:3px;
}

#ulnav
 {
  list-style-type:none;
  margin:0px;
  padding:5px 65px 5px 25px;
 }
#linav
{
 display:inline;
 float:right;
 margin:5px;
 padding: 5px 25px 5px 25px;
}

#liside 
{
margin:5px;
padding:spx;
}

#ulside
{
list-style-type:none;
margin:0px;
padding:5px;
}

#pmain
{
font-size:18px;
font-family:Tahoma, Geneva, sans-serif;
text-align:justify;
direction:rtl;
}

#pfooter 
{
font-family:Tahoma, Geneva, sans-serif;
text-align:justify;
padding:5px;
direction:rtl;
}

h3
{
font-family:Tahoma, Geneva, sans-serif;
text-align:justify;
direction:rtl;
color:#00f;
}

.link
 opacity:0.4;
}

.link:hover 
{
 opacity:1;
}
</style>


</head>

<body>
<div id="wrapper">
 <div id="header">
    <img src="img/header.jpg" height="250" width="960" style="border-radius:25px;"  />
    </div>
    
    <div id="nav">
 <ul id="ulnav">
    <li id="linav"><a href=""><img class="link" src="img/main_button.jpg" height="50" width="80" /></a> </li>
    <li id="linav"><a href=""><img class="link" src="img/sub_button.jpg"  height="50" width="80" /></a> </li>
    <li id="linav"><a href="http://www.devewebe.com/"><img class="link" src="img/site_button.jpg"  height="50" width="80" /></a> </li>
    <li id="linav"><a href="http://www.youtube.com/user/TheDeveloperGeeks"><img class="link" src="img/tube_button.jpg"   height="50" width="80"/></a> </li>
    <li id="linav"><a href="https://www.facebook.com/the.developer.geeks"><img class="link" src="img/face_button.jpg"  height="50" width="80" /></a> </li>
    <li id="linav"><a href="https://twitter.com/DeveWebe"><img class="link" src="img/twitter_button.jpg"   height="50" width="80"/></a> </li>

    
    </ul>
    </div>
    
    <div id="content">
     <div id="main">
      <h3>كيف تبدأ مشروعك الخاص </h3>
        <p id="pmain">
        نعم ان أول خطوة لك هي ان تطرح كل الاسئلة استخدم كل كلمات التساؤل في اللغة العربية التي تعرفها لماذا ماهو كيف متى اين ... الخ . ويجب - وأشدد على يجب - عليك ان تجد اجابة لكل هذه الأسئلة وإلا لاتكمل هذه السلسلة وبالطبع لاتكمل هذه الفكرة كلها 


أن نجاح المشروع الخاص بك يعتمد على مدى مرونة وإصرار صاحبه على النجاح، والوقت الكافي الذي ‏يعطيه للتخطيط، وجمع المعلومات، وتحقيق التوازن بين الحماس ومواجهة أوجه القصور في المشروع
        </p>
        <h3> هل يجب ان تبدأ مشروعك الخاص؟ </h3>
        <p id="pmain">
        هذا أهم سؤال اطلاقاً وان كانت اجابتك غير صحيحة وغير واضحة لاتخدع نفسك وتوقف عن القراءة الان بل واقلع عن الفكرة نهائياً.

قبل ان تجيب هل تتوقع انك ستصبح رئيس نفسك ؟ وستنام وتستيقظ حسب رغبتك ؟ وستربح كل المردود المادي لوحدك ؟ وستنفذ الاعمال بأقل التكاليف ؟ وانك بنفس قدراتك في مكان عملك الحالي ستقوم بعمل خاص ؟ وستعمل ساعات أقل وبربح أكثر ؟

هل اجبت بنعم ! 

اذا توقف عن القراءة ارجوك لاتكمل قراءة السلسلة ولاتفكر ابداً ببدء مشروعك الخاص.

واذا اجبت بلا اذا اكمل.
        </p>
     
     </div>
        
     <div id="side">
       <ul id="ulside">
        <li id="liside"><img src="img/flight-radarرادار-طائرات-.jpg" height="95" width="290" /> </li>
            <li id="liside"><img src="img/quantum-computing-الحوسبة-الكمية.jpg" height="95" width="290" /></li>
            <li id="liside"><img src="img/البث-المباشر-من-محطة-الفضاء-الدولية-ISS-live.jpg" height="95" width="290" /></li>
            <li id="liside"><img src="img/دورة_jquery.jpg" height="95" width="290" /></li>
       </ul>
        
     </div>
    </div>
    
    <div id="footer">
    <p id="pfooter">موقع المطور DeveWebe هو موقع يهدف الى زيادة المحتوى العربي الاحترافي على الانترنت كماً ونوعاً ويقدم دورات مجانية في تصميم وبرمجة المواقع وفي مجالات آخرى كادارة الاعمال والمشاريع الصغيرة بالاضافة الى العديد من الخدمات العلمية والبحثية والدراسات المتخصصة في عدة مجالات
    </p>
     
    </div>
</div>


</body>
</html>


تطبيق مشاريع HTML CSS | ورشة تصميم موقع انترنت ::: الدرس الخامس :::

كيف تصمم موقع متكامل


المطور WebeDeve Designed by Templateism | MyBloggerLab Copyright © 2014

يتم التشغيل بواسطة Blogger.