مساحة إعلانية 728×90

ad

تصميم قالب لموقع شخصي بالhtml وcss من الصفر

أبريل 01, 2021

 

 

بعد أن رأينا الكثير من قواعد تصميم المواقع بلغتي html و css في دورة تصميم مواقع الإنترنت للمبتدئين، اليوم سنقوم بتطبيق هذه القواعد لعمل قالب لموقع شخصي من الصفر.

هذا الدرس يهم كل شخص لديه معرفة مسبقة بتصميم المواقع ولو قليلا. أما بالنسبة لمن لا يعرف شيئا حول هذا الأمر بعد. المرجو مراجعة هذه الدروس:
تصميم قالب html css
شكل القالب


دروس تعلم أساسيات html

  1.  بنية صفحة ويب Web Page Structure وأدوات التصميم
  2. المعلمات markup
  3. اللوائح  lists
  4. الروابط Links 
  5. الصور Images
  6. الجداول Tables 
  7. الاستمارات Forms
  8. عناصر تقسيم صفحة ويب 
  9. اضافة مشغل الصوت والفيديو 

دروس تعلم أساسيات css

  1. تقديم: معلومات مشرح المحددات
  2. الالوان Colors
  3. النصوص texts
  4. نظام الصندوق Box Module
  5. اللوائح Lists
  6. الجداول Tables
  7. الإستمارات Forms
  8. الصور Images
  9. الهيكل Layout

هذا التصميم  بسيط وأردنا أن نبين فيه طريقة تطبيق كل ما رأيناه في الدروس الماضية. يمكنكم تحميل القالب كاملا من هنا. وغليكم الأكواد والتي تبدو قليلا مختلفة عما في الفيديو لأني قمت ببعض التحسينات عليه:

كود html:

<!DOCTYPE html>
<html>
<head>
<title>الموقع الشخصي لإبراهيم زكاغ</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<header>
<nav id="menu">
<ul>
<li><a href="#">السيرة الذاتية</a></li>
<li><a href="#">للتواصل</a></li>
<li><a href="#">خدمات</a></li>
</ul>
</nav>
<div id="logo">
<h1>إبراهيم زكاغ</h1>
<p>مدون وكاتب محتوى على الإنترنت.</p>
</div>
</header>
<main id="container">
<h2>المهارات</h2>
<a href="#">
<div class="box">
<img src="images/webd.jpg"/>
<h3>تصميم المواقع</h3>
<p>إنشاء وعمل تصميمات متميزة ومتفردة.</p>
</div>
</a>
<a href="#">
<div class="box">
<img src="images/content.jpg"/>
<h3>تحرير المحتوى</h3>
<p>كتابة مواضيع حصرية وتنافسية على الإنترنت.</p>
</div>
</a>
<a href="#">
<div class="box">
<img src="images/marketing.jpg"/>
<h3>سيو وتسويق</h3>
<p>تقنيات الإعلان على الشبكات الإجتماعية ومحركات البحث.</p>
</div>
</a>
</main>
<footer id="bottom">
<ul>
<li><a href="#"><img src="images/facebook.png"/></a></li>
<li><a href="#"><img src="images/google.png"/></a></li>
<li><a href="#"><img src="images/twitter.png"/></a></li>
</ul>
</footer>
</body>
</html>

كود css:

body{
text-align: right;
background: #000000;
background-image: url("images/back.png");
background-repeat: no-repeat;
}

@font-face{
font-family: myHeadings;
src:url(fonts/myh.ttf);
}

@font-face{
font-family: myTexts;
src:url(fonts/myt.ttf);
}
a{
text-decoration: none;
}
ul li{
list-style: none;
}

#menu ul li{
display: inline;
margin-right: 10px;
padding: 8px;
background: #E1E4EB;
}

#menu ul li:hover{
border-radius: 5px;
}

#menu ul li a{
font-family: myTexts;
font-size: 30px;
color: #000;
}
#menu ul li a:hover{
color: #BCBAC0;
font-size: 33px;
}

#logo h1{
color: #BCBAC0;
font-size: 100px;
margin: 0;
padding:0 50px 0 0;
font-family: myHeadings;
}
#logo p{
font-size: 30px;
font-family: myTexts;
color: #E1E4EB;
padding:0 100px 0 0;
margin:0;
direction: rtl;
}

#container{
margin-top: 80px;
}
#container h2{
font-size: 60px;
color: #BCBAC0;
font-family: myHeadings;
margin: 0;
padding:0;
}
.box{
width: 400px;
margin-left: 20px;
float: right;
border: 1px solid #BCBAC0;
padding: 5px;
}

.box:hover{
border: 3px solid #BCBAC0;
}

.box img{
float: right;
margin: 13px 0 0 10px;
}

.box h3{
padding:0;
margin: 0;
color: #BCBAC0;
font-family: myHeadings;
font-size: 38px;
}

.box p{
color: #E1E4EB;
font-family: myTexts;
font-size: 26px;
margin: 0;
padding:0;
line-height: 1.2em;
}

#bottom{
clear: both;
padding-top: 20px;
text-align: center;
}
#bottom img{
max-width: 20px;
}
#bottom ul li{
display: inline;
margin-left: 10px;
}

شرح طريقة عمل وتصميم قالب لموقع ويب شخصي


 

مواضيع مشابهة

أضف تعليق

ليست هناك تعليقات

الاشتراك في: تعليقات الرسالة ( Atom )
يتم التشغيل بواسطة Blogger.