السلام عليكم و رحمة الله
أخواني أريد أن أطرح عليكم مادة جديدة فمن يريد الإنظمام لهذه المادة الرجاء المشاركة
أريد أن أبدأ بتصميم موقع شخصي
Portfolio
من البداية وحتى الإنتهاء منه
سيتم إستخدام البرامج التالية
photoshop
Dreamweaver CS3 or CS4
Java Script
Css web 2
و المادة ستكون طويلة نوعاً ما.
فمن يجد في نفسة الإستفادة من هذه المادة الرجاء المشاركة
وشكرا
Submit you design
hereيللا أنا معاك ;)
و عليكم السلام و رحمة الله تعالى و بركاته
من المتابعين القراء
:)
cornerofart كتب:السلام عليكم و رحمة الله
أخواني أريد أن أطرح عليكم مادة جديدة فمن يريد الإنظمام لهذه المادة الرجاء المشاركة
أريد أن أبدأ بتصميم موقع شخصي
Portfolio
من البداية وحتى الإنتهاء منه
سيتم إستخدام البرامج التالية
photoshop
Dreamweaver CS3 or CS4
Java Script
Css web 2
و المادة ستكون طويلة نوعاً ما.
فمن يجد في نفسة الإستفادة من هذه المادة الرجاء المشاركة
وشكرا
سوف أكون من المتابعين إن شاء الله لك وأتمنى أن تبدأ بالدروس والله يعطيك العافية ،،،
من المتابعين :)
معك متابعا وان استطعت مساعدا فلن ابخل
يالا احنا معاك
السلام عليكم ورحمة الله وبركاته
في البداية أود أن اعتذر من الجميع لتأخري عليكم بهذه المادة
بسم الله نبدأ
اولاً من المؤكد أن الجميع يعلم عن برنامج الدريم ويفر
هو برنامج محرر لكتابة النصوص و الكود.
و أيضا لرفع المادة مباشرة على الموقع و معالجتها أونلاين
والآن مع التصميم
تصميم الموقع سيكون على الشكل التالي وسيتم رفع التصميم جاهز كاملا مع الصفحات الداخلية بعد الإنتهاء من التاتوريال
طبعا انا عامل هذا التصميم لتحديث الموقع الخاص بي و لكن هو الآن لكم ولكل من يريد العمل عليه شو بدكم أحسن من هيك ههه
أنا الآن مستخدم برنامج الدريم ويفر الإصدار الأخير
Adobe dreamweaver cs4
و الي بده ينزله يزور الموقع التالي
www.e51g.com
الآن الي بده بالبداية تنزيل الدرس الفايل المرفق مع الدرس
والآن نبدأ بالشرح المصطلحات التالية
<head>
يعني بداية صفحة الكود .. ولا تظهر بالتصميم و يكون من تحتها غالبا كود التعريب و اللغات
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head> إشارة إغلاقها
<title> وهذه تعني إسم الصفحة الويب التي تكون ظاهرة فقط في أعلى صفحة المتصفح </title> إشارة إغلاقها ويكون من تحت هذا اللينك دائماً روابط إستدعاء الجافا و الستايل شيت JS and Css <body> أما هذه فتعني من هنا تبدأ الصفحة بالتصميم و الظهور امام المشاهد وهي تظم كل ما تحتويه الصفحة من معلومات و بيانات و إشارة إغلاقها تكون </body> <div> وهو البديل ال <table> فمن المؤكد أنه أثبت جدارته بالربط بينه وبين الستايل شيت <table> هو جدول يمكن إعطائه بعض القليل ما يعطى لل <div> من الستايل شيت و يكون البدأ بالتيبل عادتاً في التصميم
و الآن عند عمل
New project HTML
ستكون شكل الصفحة على النحو التالي:
ومكتوب بها التالي:
<!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>Untitled Document</title>
</head>
<body>
</body>
</html>
نذهب إلى قائمة Files على يمين الشاشة
وذلك لتثبيت الموقع في ملف واحد.
نضغط على كبسة manage sites
الموجودة بأعلى القائمة
فتظهر لنا القائمة التالية
نكبس زر New
فتظهر قائمة صغيرة يوجد بها خيارين
الأول لعمل مكان يعتبره البرنامج بأنه أونلاين
والآخر من أجل التعديل و الرفع مباشرة على الهوست (الموقع)
نحن الآن نحتاج الخيار الأول
بعد إختيارنا له ستظهر لنا قامة كبيرة وذلك لوضع البيانات الخاصة بالموقع ومكانه في الجهاز
بالمكان المظلل بالأزرق نضع إسم المشروع
و الثاني نتركه فارغ لأننا نعمل أونلاين عليه فهو لوضع مكان المشروع في الهوست
بنعمل متابعة next
تظهر لنا قائمة فيها خيارين إما إما أن نختار السيرفر للعمل الجماعي
أو عدم إختيار السيرفر وللأسف الشديد أنا لا أملك سيرفر فنختار الخيار الأول وهو:
و نعمل متابعة
تظهر القائمة الأخيرة ولله الحمد وهي الي بدنا إياها
وهو تحديد مكان المشروع
من هنا يمكن إختيار مكان المشروع فأنا مختار مكانه الدرايف D
كما هو واضح بالصورة
و في النهاية بعد عمل متابعة NEXT
يكون هناك خيار واحد هو من القائمة نضع لاشيء من القائمة
None
بدلاً من
Local/Network
وبنعمل متابعة و هيك بنكون خلصناالخطوة الاولى للعمل
و بعد ذلك تظهر القائمة بالخيارات التي إخترناها و نعمل
Done تم إنجازه
و الآن نذهب إلى قامة
File
نعمل رايت كليك بالفأرة
Right click
و نعمل ثلاث فولدرات
الأول بإسم
images
و الثاني بإسم
js
وتعني جافا سيكربت
و الثالث بإسم
css
و بالنهاية يا رب يكون الشرح مفهوم أخواني الي عنده أي إستفسار بإمكاني إعادة المادة 100 مرة و 101 انا مش مستعد :)
غداً إن شاء الله سنكمل المشوار و لكن سيكون الدرس أكثر إفادة فاليوم كان فقط للتدرب على إنشاء ملف لإحتواء السايت
وشكرا
وغداً سنبدأ بعمل التصميم للموقع و الإنتهاء منه هو الستايل شيت إن شاء الله
تم تعديل هذه المشاركة بواسطة cornerofart في 7 مارس 2009 في 06:09
Submit you design
hereخالد_الحوراني كتب:يللا أنا معاك ;)
أشكرك وجزاك الله خير أخي خالد
merouane كتب:و عليكم السلام و رحمة الله تعالى و بركاتهمن المتابعين القراء
:)
أشكرك كثيرا على الرد الجميع
ناجي بن علي كتب:سوف أكون من المتابعين إن شاء الله لك وأتمنى أن تبدأ بالدروس والله يعطيك العافية ،،،
السلام عليكم
أشكرك على الرد الجميل و أنا أعتذر عن الإطالة بالدروس وذلك لأسباب خاصة شغلتني
وشكرا
ahmad123 كتب:من المتابعين :)
شكرا لك
Mohamed-Riadh كتب:معك متابعا وان استطعت مساعدا فلن ابخل
شكرا لك و شكرا على إهتمامك
اسامه حمدان كتب:يالا احنا معاك
الله يبارك فيك
apt كتب:ان شاء الله نستفيد منكم.
يا رب و إن شاء الله لن أبخل عليكم ولا بمعلمومة
medovish2007 كتب:توكل علي اللهمتابع
ومساهم ان شاء الله :happy:
أشكرك على إهتمامك و إن شاء الله تكون من المساهمين
Submit you design
hereاليوم الثاني وهو شرح الـــ
HTML + CSS
أكيد بالبداية رايحين نبدأ بـ
HTML
و بالأخص بالبداية وهو أكيد رايح يكون سر بينا :)
أول شي بنعمل تيبل
Table
بنروح على قائمة :
Insert ---- > Table
يعني
و بنعمل ثلاثة بالطول
يعني
الآن الخيار الأول هو أفقي أم عمودي فإحنا إخترناه عمودي
و الخيار الثاني
table width
مشان تحتار المساحة و أنا إخترتها بالمية و حطيت القيمة مية بتصير 100% و فل الفل
ليش السبب هو إنه إذا كانت الشاشة كبيرة أكثر من الــ 1024 مثلا أو
widescreen
فأكيد الموقع رايح يخرب شكله و ما حد راح يطلع فيه أما هيك فبكون لجميع الشاشات بكبر و بصغر معها
الآن الخيار الثالث و الرابع و الخامس الي تحت بعضهم بنحط كل واحد فيهم فقيمته صفر : لا تسألني ليش لأني رايح أحكيلك أكيد :) ولو
الــ boarder thickness
هو حجم عرض التيبل
boarder padding
وهو لمساحة بعد الكلام و المواضيع عن التيبل من الداخل طبعاً
cell spacing
وهو بعد الداتا و الكلام من الخارج و كمان لعمل للعب بشكل التيبل إذا بدنا نظهره
و الآن فتح معايا لأنه بدأ الشغل ..... صحصح يا نايم
بسم الله
الآن بالبداية بتفتح القائمة الي فوق تاعت الكود الموجود فيها الكود و بنكتب فيها و بالمكان هذا بالتحديد
<link href="css/main.css" rel="stylesheet" type="text/css" />
و نحط هذا الكود وهو فايل إستدعاء السي أس أس الي إحنا حنعمله بإسم
main.css
و حنحطه بالمكانه وهو بالفولد الي عملنا للسي أس أس و سميناه بالدرس الماضي
css
و الآن بنروح على القائمة التالية
و الآن رايحة تطلع إلنا قائمة بالشكل التالي و القائمة هاي من خلالها إحنا بنسوي السي أس أس و نعطيها القيم بس أكيد مش دايماً لأننا راحين نصير نكتبها بإيدينا إن شاء الله
بنعطي إسم الستايل
body
بالمكان الفارغ و بنعمل
ok
الستايل هذا مشان التيبل الي عملناه
والآن من القائمة الي فتحت أمامنا بعنوان
CSS Rule
ما بدنا نختار الفونت ولا إشي بنروح على القائمة من الجنب و بنختار
background
وبنخلي اللون أسود
و بعدين بنروح على القائمة الي تحتها بإسم
box
من خلالها بنلاقي قائمتين
padding , margin
بنختار
margin
وبنخلي قيمته 0
و بنعمل أوكي
الآن بدنا نودع هذه القائمة بصراحة لأني ما بحبها و بحس الواحد فيها إنه مبتدأ
بدنا نكتب بإيدينا و نتعبلنا شوي
الآن لاحظ إلتساق التيبل بأعلى الصفحة
و هذا الي بدنا إياه مشان نوزع الموقع بالشكل الصحيح
و الآن يا صديقي في قائمة بالأعلى إسمها
main.css
و الي عنده الفيرجن القيدم
يعمل أوبن للسي أس أس الي موجود بالفولدر
الآن رايح تلاحظ بالسي أس أس فقط القيم الي أعطيناها للصفحة
وهو
body
هذا البودي بتحكم بالصفحة و مقياسها و بعدها من الأعلى و الأسفل و غيرو و غيراتو
الآن بنروح على آخر السطر و بنعمل إنتر
*** ملاحظة أنا بعتذر إذا كنت ممل بالشرح بس بهمني المبتدأ برضو يفهمني و يتعلم
و بنكتب
.main_div
هذا أول تاج tag
بنعمله مشان نوزع الديزاين
و بنفتح قوس
{و بنكتب القيم التالية
هذا فقط للون الخلفية background-color: #222222;
مفتاح الكود هو
{و إغلاقه هو
}
الرموز التالية
.
هو مفتاح الكلاس
class
#
هو مفتاح الآي دي
id
خلينا لهون مشان ما تضيع
و الآن بنروح على الاتش تي أم أي
و بنعمل التالي
و بنختار الكلاس و بتفتح إلنا القائمة تاعت السي أس أس و بنختار
.main_div
و بنعمل مسافة و نختار
align="center"
عذرا فأنا لا أريد أن أطيل عليكم و أشق عليكم بهذا الدرس لأنه بصراحة مطلفة يوجد الكثير من الزوار ما بعرفوا شو هذا الي بنسوي فيه و الي بعرف يمكن يعرف قليل جدا
فالمعلومة بالكلام و القرآة و التطبيق و النظر إلى الصور هو تلقين فقط يتم نسيانه بسرعة ولن يجد نفعاً و لكن سأبدأ من هذا الدرس حتى نهاية المشروع بتصويره فيديو لكي يتم مشاهدته سريعا
و أطلب من القائمين على هذا المتندى الطيب بفتح مجال لي أن أرسل الملف مرفوع على الموقع "مساحة تتسع للتحميل ما لا يقل عن 15 ميغا "
فإن كان ذلك غير ممكن فعلى الجميع الترقب يوم الجمعة صباحا ففي هذا المكان من المنتدى سيكون فيه الروابط التي سيتم تحميلها عن طريق الرابدشير
و الله ولي التوفيق
وشكرا و أعتذر مرة أخرى لجميع
Submit you design
hereالسلام عليكم و رحمة الله وبركاته
أخواني أنا اليوم أنجزت الدرس الفيديو التعليمي لكيفية صنع الموقع الشخصي
لكن قبل تنزيله الرجاء إنكم تعذروني إذا كان في عندي أي خطأ أو الصوت مش مناسب
لأني بدأت بتسجيل الفيديو الساعة 3 و ثلث صباحاً و حتى الخامسة و النصف تقريباً صباحاً فكنت طافي = نعسان مستوي من النعس :wacko:
و كمان أنا أول مرة بعمل فيديو تعليمي فشجعوني مش تضحكوا علي :lol:
و أخيرا بدي أحكي إنه أنا مش ويب ديزاينر أنا
Senior Graphic Animator /3D -2D
بس حبيت أتعلم الويب و شغله و الحمد لله ربنا أكرمني
الآن هذا هو الرابط
http://rapidshare.com/files/208884095/corn...on_One.mov.html
الملف بشتغل على الكويك تايم
حجم الملف
88 ميغا
بعد شهر بنتهي هذا الرابط على الرابيدشير
وشكرا
المشروع باسفل مع المرفقات
الرجاء تنزيله و العمل عليه كمان إتفقنا
تم تعديل هذه المشاركة بواسطة cornerofart في 14 مارس 2009 في 01:18
Submit you design
hereمشكور أخي الكريم على هذا المقال ... ولكن لي طلب , لو أمكن رفع الفيديو على اليوتيوب لسهولة تفحص المحتوى فعملية تحميل الملف ويعمل على الكويك تايم ربما تكون مرهقه
اقتباسرأي شخصي :)
والله يعطيك العافية وننتظر المزيد بارك الله لك
CMS Sfhati , Website Generator
نظام إدارة المحتوى صفحتي ... جربه الآن
bastr3 كتب:مشكور أخي الكريم على هذا المقال ... ولكن لي طلب , لو أمكن رفع الفيديو على اليوتيوب لسهولة تفحص المحتوى فعملية تحميل الملف ويعمل على الكويك تايم ربما تكون مرهقهوالله يعطيك العافية وننتظر المزيد بارك الله لك
إن شاء الله قريبا... و أشكرك على الرد الإيجابي :D
بس على فكرة يمكن تنام لأني كنت شبه نايم و أنا بشرح ...
تم تعديل هذه المشاركة بواسطة cornerofart في 17 مارس 2009 في 01:30
Submit you design
hereالسلام عليكــم ورحمـة الله وبركاتــه ،،
وانا كمان معاكم اود مشاركتكم للاستفاده
:lol:
توكل علي الله
انت محصلتش
جامد طحن
جاااااااااااااااااااااااااااااااااااااااااااااااااااااااامد
رجاء مراسلتى
cornerofart كتب:السلام عليكم و رحمة الله
أخواني أريد أن أطرح عليكم مادة جديدة فمن يريد الإنظمام لهذه المادة الرجاء المشاركة
أريد أن أبدأ بتصميم موقع شخصي
Portfolio
من البداية وحتى الإنتهاء منه
سيتم إستخدام البرامج التالية
photoshop
Dreamweaver CS3 or CS4
Java Script
Css web 2
و المادة ستكون طويلة نوعاً ما.
فمن يجد في نفسة الإستفادة من هذه المادة الرجاء المشاركة
وشكرا
أنا من أول المشاركين إن شاء الله.
ومتي ستبدأ المادة
ممكن مراسلتى او اضافتى عندك انا معاك إن شاء الله
تم تعديل هذه المشاركة بواسطة justjoojoo في 2 ديسمبر 2009 في 05:14