• Dubai, UAE
  • +971 54 408 4441
  • moe.rayan@gmail.com
كيفية عمل موقع بالـ CSS + dreamweaver + photoshop من البداية إلى النهاية

كيفية عمل موقع بالـ CSS + dreamweaver + photoshop من البداية إلى النهاية

بسم الله الرحمن الرحيم
في هذا الدرس راح يكون عن “طريقة تصميم موقع من البداية إلى النهاية”

الدرس ليس منقول_فقد تم كتابته من قبلي..أي إستفسار..فريق العمل جاهز للرد

شوف المثال

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

متطلبات الدرس – تقدر تنزل الملف كامل في المرفقات
برنامج الفوتوشوب بشرط ان تكون ملم بأساسيات الفوتوشوب (ملف الفوتوشوب بالمرفقات)
برنامج عملاق التصميم دريم ويفر أو اي برنامج محرر نصوص (يجب أن تكون ملم بأساسيات الـ CSS وبالتالي سنتعلم انا وإياكم بعض تقنيات وأساسيات الـ CSS

نبدأ العمل بفتح صفحة جديدة بالفوتوشوب (العرض:1000 بيكسل ,الارتفاع:800)

نختار اللون #469dff للخلفية .. وبالضغط على Alt+delete لتلوين الخلفية

تقدر تختار أي لون يعجبك او تنسق الخلفية على راحتك بس انا راح استخدم اللون الازرق الفاتح
اعمل لير جديد ، تأكد ان المسطرة ظاهرة بالفوتوشوب (view>Rulers) أو بالضغط على (Ctrl+R)
اختر أداة التحديد Rectangle
حدد مثل هذا الشكل ولونه أبيض
المقاسات : العرض:900
الارتفاع:200

الآن وقت المرح
حدد لير الهيدر
اختار اداة ال Lasso tool
ظاهرة معك في الصورة
وحدد الهيدر بشكل يقارب اللي الظاهر في الصورة

وبالضغط على ديليت
وثم (Ctrl+D) لإلغاء التحديد

شوف الصورة التالية

أعطيها ظل بنفس الخيارات اللي في الصورة ، او اللي يعجبك

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

الخط المستخدم PT Bold Arch
نكمل الهيدر
سوي لير جديد
نرسم الاشكال التالية باستخدام الفرشاة
اسم الفرشاة المستخدمة Vector_Swirl_Set01_by_pixelchemist3need

بعد مانرسم الاشكال نروح على نفس ليرات الاشكال..Blend Options>>inner shadow

طيب .. خلصنا الهيدر..

افتح لير جديد
ارسم التالي
اختر اداة ال rectangle tool
وارسم مستطيل كما في الصورة

وباستخدام اداة الLasso tool
اعد نفس الحركة اللي سويناها في الهيدر ومن
blending options>>drop shadow
angle:-90
يصبح لدينا الشكل التالي

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

نرسم الفوتر

اعمل لير جديد
ارسم التالي
باستخدام الـ Lasso tool
ومن ثم الضغط على Delete

من Blending Options>>drop shadow

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

اخفي الخلفية بالضغط على العين

القص هنا راح يختلف شوية
راح نقص صورة صورة
لأن الصور فيها ظل

اخفي جميع الصور
وابقي الهيدر
ندمج ليرات الهيدر بالضغط على Ctrl+shift+E

والذهاب الى
Image>>Trim
واحفظ الصورة كـ head.png
كرر عملية القص
احفظ الصورة اعلى البادي
كـ bodytop.png
الفوتر
Footer.png

خلصنا من الفوتوشوب

نروح للدريم ويفر
أو اي محرر نص

بالضغط على Ctrl+J
تفتح الدايلوج لخصائص الصفحة

ونبدا بالخلفية

لما تضغط اوك
وتاخذ نظرة على الكود
تلاقي كود ظهر

body {
background-color: #469dff;
}

ايام ال HTML 3 راااحت
وجا وقت ال HTML 4
HTML 4 ابتكرو استخدام الستايل Cascading Styles Sheet CSS ولها فوائد كثيرة من اهمها
انك تفصل الستايل عن الموقع..يعني لو جيت تعمل صفحة ثانية اضافية للموقع مش راح تحتاج تكتب الكود من اول وجديد

المهم خلينا في الشغل
نضيف الكود التالي margin:0

قبل لا نتعمق
يجب انك ترتب موقعك شوف انا كيف مرتب الموقع

موقعنا يتكون من هاذي العناصر
1.الحاوية
2.الهيدر
3.القائمة
4.المحتويات
5.الفوتر
شغلنا مرتب الموضوع كله راح يكون سهل انشالله
نبدا بالحاوية
من شريط القائمة اعمل التالي Text>>CSS Styles>>New

اضغط ok
وسمي الستايل Styles.css

———

الغي Same for all

اضغط ok
راح يظهر عندك مثل الصورة
الكود اللي يربط الصفحة مع الستايل

وملف الستايل مفتوح فوق

انتقل لملف الستايل
راح يكون عندك كود مثل هذا
#wrapper {
width: 903px;
}

وانت بملف الستايل
اضغط Shift+F11
اضغط على #wrapper لتحديده
وضغط على add property

واختار margin
ثم اكتب 0 auto في مكان النص

طيب خلينا نرتب الكود
نرجع لملف الـ HTML ونقص كود البادي
ونلصقه بملف الستايل

نرجع لملف الـ HTML
ونمسح الكود هذا كامل
بنفس ملف الـ html
راح ندخل اول tag وراح يكون الحاوية #wrapper
من القائمة Insert>>layout object >>Div Tag
ال ID رابر (wrapper) المفروض انها تكون في موجودة

اضغط ok
المفروض يكون الكود بهذا الشكل

خلصنا الحاوية

2.الهيدر

ننتقل لمرحلة الهيدر
من القائمة
Text>>CSS styles>>New
نفس الطريقة اللي سوينا فيها الحاوية

نغير شوي في الخيارات

نحدد مكان صورة الهيدر
طبعا نحدد no-repeat

عرض الهيدر 903
ارتفاعه 208


نرجع لملف ال HTML
Insert>>Layout Objects>>Div Tag
وتختار #header

لاتنسى تمسح
‘Content for id “wrapper” Goes Here’ and insert the header div here
يصير عندنا الكود التالي

<div id="wrapper">
<div id="header">Content for id "header" Goes Here</div>
</div>

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

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

3.القائمة
طيب
خلينا نكتب كود القائمة

هذا كود القائمة بملف الHTML

<body>
<div id="wrapper">
<div id="header">
</div>
<ul id="menu">
<li><a href="#">الرئيسية</a></li>
<li><a href="#">الاخبار</a></li>
<li><a href="#">نبذة عنا</a></li>
<li><a href="#"> الإتصال بنا</a></li>
</ul>
</div>
 
 
</body>

نروح لملف الستايل
نكتب الكود التالي

#menu 	{
 
list-style:none;
position:relative;
top:-14px;
}

List-styleمشان نلغي التنقيط

طيب خلينا ننسق القائمة

#menu li {
display:inline;
float:right;
font-family:Tahoma;
font-weight:bold;
}

Display:inline;
يعني خليهم بخط واحد افقي
Float:right
خليها من اليمين لليسار
Font
نوع الخط ووزنه عريض

#menu li a	{
text-decoration:none;
padding:0px 20px;
margin:0px;
color:white;
width:100px;
}

Text-decoration
الرابط مخطوط واحنا نبغي نلغي هذا التنسيق
Padding:0px 20px;
المساحة اللي بين الكلمات
Padding:top right;
يعني المساحة فوق 0
والمساحة بينهم 20 بيكسل

الباقي واضح
صار عنا الشكل التالي

لما تختبر شغلك ..تأكد انك تختبر على اكثر من متصفح..انا اختبر بfirefox و internetExplorer و googleChrome
الان
خلصنا القائمة

4.المحتويات
افتح ملف الستايل

نرفع الصورة body top

#bodytop	{
background:url(images/bodytop.png) no-repeat;
width:903px;
height:60px;
position:relative;
top:-10px;
left:-3px;
}

طيب نريد خلفية المحتويات تكون باللون الابيض
نكتب الكود التالي

#content	{
width:898px;
height:500px;
background-color:white;
position:relative;
top:-17px;
left:2px;
}

نرجع لملف الHTML
ونكتب الTags راح يكونو داخل tag الحاوية اسفل tag الهيدر
كالتالي

<body>
<div id="wrapper">
<div id="header"></div>
<ul id="menu">
<li><a href="#">الرئيسية</a></li>
<li><a href="#">الاخبار</a></li>
<li><a href="#">نبذة عنا</a></li>
<li><a href="#"> الإتصال بنا</a></li>
</ul>
<div id="bodytop"></div>
<div id="content"></div>
</div> <!-- end of wrapper -->
</body>

اصبح لدينا الشكل التالي

آخر شي وهو الفوتر

#footer	{
width:910px;
height:84px;
background:url(images/footer.png) no-repeat;
position: relative;
top:-10px;
margin:-100px auto 0;
}

قبل ماضيف الTag
صيف هذا الكود للستايل

#clearfooter {
height:84px;
clear:both;
}

وروح لكود الحاوية #container
ضيف هذا السطر

margin-bottom:-84px;

وهو لترك مساحة ارتفاعها 84 بيكسل للفوتر
يعني كود الرابر راح يكون كالتالي

#wrapper {
width: 903px;
height:auto;
margin: 0 auto;
margin-bottom:-84px;
}

افتح ملف الHTML
وضيف الTags
Tag الفوتر
ضيفه بعد اغلاق Tag الحاوية

 <!-- end of wrapper -->
<div id="footer"></div>

وTag كلير فوتر #clearfooter
ضيفه قبل اغلاق tag الحاوية
اي

<div id="content"></div>
<div id="clearfooter"></div>
<!-- end of wrapper -->

الموقع عندنا جاهز وباقي ادخال المحتويات
وهذا شي راجع الكم

في حال اردت ادخال محتويات
ارجع لوسم ال content
مثال

<div id="content"><p>هذا اول موقع لي </p></div>

بحمدالله انتهيناا
لاتتردد بالسؤال عن اي شيء غير واضح

تحياتي

5 آراء على “كيفية عمل موقع بالـ CSS + dreamweaver + photoshop من البداية إلى النهاية”

  1. انا عايز اعمل موقع ومش عارف ازاى

  2. foxlion قال:

    لو كان الشرح بالفيديو يكون افضل علي العموم تسلم الايادي منننحرمش من جديدك

  3. مايد قال:

    سلام عليكم

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

  4. tina قال:

    ur so talented !! and u made the process seems easier ! nice work babe =P keep it up

    1. admin قال:

      you are so welcome baby

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *