تصميم مواقع الانترنت من الصفر حتى الاحتراف - الصفحة 2 - منتديات ArabiaWeather.Com

العودة   منتديات ArabiaWeather.Com > المنتديات العامة (استراحة المنتدى) > المنتدى التقني > منتدى التصوير والجرافيك و التصميم

الملاحظات

منتدى التصوير والجرافيك و التصميم يختص بما هو جديد في عالم التصوير والكاميرات والجرافيك و التصميم من برامج و تقنيات جديدة

الاخبــــار

رد

[ 09-04-2008 ]   رقم المشاركة 11

 

 

الصورة الرمزية yasminah

تاريخ التسجيل: Jul 2008

رقم العضوية: 103

المشاركات: 1,196

الدولة/المدينة: عمان/طريق المطار

الارتفاع عن سطح البحر: 933 متر

شكراً: 210
تم شكره 445 مرة في 70 مشاركة

افتراضي

هل دخلت يوما الى موقع ويب جذاب واحببت ان يكون لك مثله ؟ بل ويحمل توقيعك انت ؟
هل فكرت يوما بصفحات الويب وكيفية عملها ؟
هل قمت بعملية بحث على صفحات النت فوجدت مواضيع كثيرة تحمل نفس عنوان هذا الموضوع دخلت اليه يملؤك التفاؤول وخرجت منه صفر اليدين وانت تشعر بالدوار ؟
وحزنت لان صاحب الموضوع شرح كثيرا وكثيرا واغفل نقطة مهمة الا وهي من أين ابدأ وكيف أبدأ ؟
تراهم يتحدثون ويتناقشون ينطقون بلغة تشعر انك لا تفهم منها شيء وكانها طلاسم ولكن في داخلك احببت ان تتعلمها ؟
هل اثقلت كاهل مكتبتك بالكتب التي قمت بشرائها عن عالم التصميم ولكنك بعد القراءة اصابك الملل واليأس ؟
انا هنا اقول لك لا ترمي تلك الكتب فقريبا جدا ان شاء الله بعد قرائتك لموضوعنا هذا ستعود لها لتجد المتعة في قرائتها ثانية بعد ان حلت الاحجية لديك .
هذه المقدمة ليست بطويلة فكثير من الناس يرددون هذه الجمل والعبارات امامي ..
هل انت جاهز الان حتى تعلم اين كيف ستبدأ ؟! وكن على يقين بأنك ستنجح بمشيئة الله في النهاية وبل في البداية ايضا ..


الخطوة الاولى :
الخطوة الاولى هنا اخترتها ان تكون عملية ويتبعها الشرح التعليمي ..
اذهب فورا الى start ومنه الى Programs ومنه الى Accessories واختر ال Notepad
والصورة المرفقة للتوضيح

نقره لعرض الصورة في صفحة مستقلة

اضغط على ال Notepad وقم بنسخ الكود التالي كما هو والصقه في المتصفح

كود HTML:
<html>
<head>
</head>
<body>
</body>
</html>

نقره لعرض الصورة في صفحة مستقلة

الان اذهب الى علامة ال x اعلى الصفحة لاغلاقها واضغط عليها ستخرج لك ملاحظة تسألك عن حفظ هذه الصفحة كالتالي اضغط على yes

نقره لعرض الصورة في صفحة مستقلة

الحفظ الان يحتاج الى خطوتين
نقره لعرض الصورة في صفحة مستقلة

رقم واحد : حدد المسار الذي تريد ان تحفظ الفايل به
ورقم 2 file name او اسم الفايل مهم جدا جدا فهو اول خطوة صحيحة نحو الاتجاه الصحيح للعمل نلاحظ ان اسم الفايل الموجود هو *.txt طبعا هنا سنغير الاسم والامتداد لكن اذا حفظناه كما هو سنجد ان الملف حفظ txt عادي .
قم بمسح العبارة وضع اسم الفايل أي اسم او احرف تريدها مثال انا وضعت اسم الملف : yasminah.html لاحظ الدوت بعد اسم ياسمينة وقبل ال html فالمهم هو html.

نقره لعرض الصورة في صفحة مستقلة

اترك باقي الخيارات كما هي واضغط على save

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


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



  رد مع اقتباس
الأعضاء الذين قالوا شكراً لـ yasminah على المشاركة المفيدة:
[ 09-04-2008 ]   رقم المشاركة 12

 

 

الصورة الرمزية yasminah

تاريخ التسجيل: Jul 2008

رقم العضوية: 103

المشاركات: 1,196

الدولة/المدينة: عمان/طريق المطار

الارتفاع عن سطح البحر: 933 متر

شكراً: 210
تم شكره 445 مرة في 70 مشاركة

افتراضي

الان لنشرح ما قمنا به سابقا من الناحية العلمية .. ونستعرض معنا الكود الذي كتبناه معا في التمرين السابق وهو :

كود HTML:
<html>
<head>
</head>
<body>
</body>
</html>
ابتدأنا كتابة المستند بكلمة html داخل قوسين زاوية < > لتصبح <html> هذا يسمى بمعرّف البداية اي اننا اخبرنا هنا متصفح الويب انه هنا يبدأ عنصر ال html .. وكنا قد انهينا المستند بنفس الكلمة ولكن زدنا قبلها داخل القوسين الشحطة المائلة / <html/> وهي علامة اقفال المعرّف وهنا نخبر متصفح الويب انه انتهى هذا العنصر بعد ان اقفلناه

ما معنى كلمة html

يتم انشاء كافة صفحات ويب باستخدام لغة النص التشعيبي (Hypertext Markup Language)
واختصارها هو html وهي تماما لاصق تلتصق فيها صفحات الويب مع بعضها البعض ..
لغة ال html تعد لغة مرتة وقوية و في نفس الوقت هي لغة سهلة الفهم وليست معقدة ولا تحتاج الى ادوات خاصة بل يكفينا كما راينا في مثالنا استخدام برنامج المفكرة Notepad الذي يخص نظام الويندوز .
ولغة ال html تحتاج في داخلها الى مجموعة من المعرفات تصف كيفية تنظيم العناصر على الصفحة مثلا تنظيم النص الصور الخ .. والتي سنأتي علي اهمها بالتفصيل لاحقا ان شاء الله..

في داخل العنصر html وضعنا معرّفين اساسيين وهما head و body هما الرأس والجسد لصفحة الويب
فالمعرف head يتضمن معلومات العنوان الذي يصف المستند ويصف بالتالي محتويات صفحة الويب هذه التي اقوم بانشائها "سنأتي على شرحها بالتفصيل .. فأنا مثلا عندما اقوم بتصميم صفحة اقوم بتصنيفها انها موقع شخصي فيه شعر وموسيقى وتصميم الخ واسم الصفحة وهذه لا تظهر للعيان وانما احتاجها للارتباط على مواقع البحث
وعنصر ال body وفيه تكون كافة محتويات صفحة الويب التي تظهر للعيان كالخطوط والصور وتنظيم الصفحة والجداول الخ .. ايضا سناتي على شرحها بالتفصيل .
ولا حظ ايضا اننا كتبنا المعرفين داخل اقواس زاوية .. ووضعنا لهما معرّف البداية <head> ومعرف النهاية
</head> وكذلك الامر ينطبق على المعرف head
نستنج مما سبق ان
-المعرف html هو الذي يحيط بكامل المستند
-المعرف head هو الذي يتضمن معلومات عنوان المستند
-المعرف body هو الذي يحيط بمكونات صفحة ويب .
لنعد الان الى الصفحة البيضاء الخالية التي قمنا بتأسيسها لا يحزنك انها فارغة فقريبا ستمتلىء وتصبح صفحة البداية لموقعك القادم ان شاء الله ..
غدأ ان شاء الله نكمل مع تطبيق جديد .
تحياتي



  رد مع اقتباس
الأعضاء الذين قالوا شكراً لـ yasminah على المشاركة المفيدة:
[ 09-04-2008 ]   رقم المشاركة 13

 

 

الصورة الرمزية TORNADO

تاريخ التسجيل: Aug 2008

رقم العضوية: 145

المشاركات: 2,451

الدولة/المدينة: Amman

الارتفاع عن سطح البحر: 900 - 1000 متر

شكراً: 2,074
تم شكره 3,033 مرة في 318 مشاركة

افتراضي

اشكرك بداية موفقة وسلسة ,,

ونحن بانتظار المزيد..




  رد مع اقتباس
[ 09-04-2008 ]   رقم المشاركة 14

 

 

الصورة الرمزية موســى

تاريخ التسجيل: May 2008

رقم العضوية: 11

المشاركات: 6,053

الدولة/المدينة: jerusalem

الارتفاع عن سطح البحر: 750 متر

شكراً: 0
تم شكره 13 مرة في 12 مشاركة

افتراضي

الى الاخت ياسمينة اذا اردت نماذج فعندي الكثير من html حتى java script لانو تخصصي هذا المجال ولغات برمجية اخرى ....ولكن اصعب ما هو موجود عملية تصميم الجداول بلغلة html فهي تقلب الراس قليلا
شكرا لك ...على الموضوع
انا حاولت رفع ملف من تصميمي لكني فشلت يجب ان ابحث عن وسيلة رفع للمنتدى...




قال تعالى:"اذ قال يوسف لابيه يا ابت اني رايت احد عشر كوكبا والشمس والقمر رايتهم لي ساجدين"

صدق الله العظيم
لا حول ولا قوة الا بالله العلي العظيم


نقره لعرض الصورة في صفحة مستقلة

نقره لعرض الصورة في صفحة مستقلة
  رد مع اقتباس
[ 09-04-2008 ]   رقم المشاركة 15

 

 

الصورة الرمزية yasminah

تاريخ التسجيل: Jul 2008

رقم العضوية: 103

المشاركات: 1,196

الدولة/المدينة: عمان/طريق المطار

الارتفاع عن سطح البحر: 933 متر

شكراً: 210
تم شكره 445 مرة في 70 مشاركة

افتراضي

الاخ MotasemCom اشكر متابعتك ..
الاخ موسى لم افهم تماما كلمة " عندي نماذج" هل تقصد انها صفحات من تصميمك انت ؟ ان كانت كذلك نعم نحب ان نطلع على بعض منها بالنسبة للجافا سكريبت هي من ضمن اللغات التي سأعرج عليها من ضمن هذا الموضوع مع بعض الشروحات لها ومازال الوقت مبكرا عليها .. بالنسبة لموضوع الجداول لا اعلم اين الصعوبة التي تجدها فيها ولكن للجداول اسرار ان عرفتها واتقنتها طوعتها لك وبالتاكيد ان اي تصميم لا يخلو ابدا من الجداول ولنا وقفة مطولة معها ان شاء الله بالنسبة لملف التصميم الخاص بك عليك ان ترفعه على اي موقع مجاني خاص للتصميم وهنا سازودك بلينك لموقع مجاني وهو اكثر من رائع بامكانك ان تقيم عليه موقع خاص بك وكنت ساطرحه ايضا في فقرات اخرى واشرح طريقة التسجيل به وكيفية رفع الملفات اليه ولكن بامكانك الان استخدامه
http://www.freewebtown.com




  رد مع اقتباس
[ 09-04-2008 ]   رقم المشاركة 16

 

 

الصورة الرمزية yasminah

تاريخ التسجيل: Jul 2008

رقم العضوية: 103

المشاركات: 1,196

الدولة/المدينة: عمان/طريق المطار

الارتفاع عن سطح البحر: 933 متر

شكراً: 210
تم شكره 445 مرة في 70 مشاركة

افتراضي

الخطوة الثانية
توجه الى المكان الذي قمت بحفظ الصفحة السابقة فيه "اي الصفحة التي أنشاتها في التمرين السابق " والتي اسميتها انا على سبيل المثال yasminah افتح الصفحة توجه الى view في اعلى الصفحة ومنه الى source اضغط سيفتح لك المستند النصي الخاص بهذه الصفحة والذي قمت بإنشائه في التمرين السابق
نقره لعرض الصورة في صفحة مستقلة

نقره لعرض الصورة في صفحة مستقلة

الان قم بتظليل المحتويات الموجودة بالمستند ومن ثم ديليت وانسخ الكود التالي والصقه مكانه

كود HTML:
<html>
<head>
<title>my web</title> 
</head>
<body bgcolor=blue>
</body>
</html>
اغلق الصفحة من علامة الاكس بالاعلى سيظهر لك مربع يسالك هل ترغب في حفظ التغييرات اضفط yes وقم بتحديث الصفحة من refresh
سترى ان خلفية الصفحة اصبح لونها ازرق ..

http://www.freewebtown.com/jordan_am/yasminah.html



  رد مع اقتباس
الأعضاء الذين قالوا شكراً لـ yasminah على المشاركة المفيدة:
[ 09-04-2008 ]   رقم المشاركة 17

 

 

الصورة الرمزية موســى

تاريخ التسجيل: May 2008

رقم العضوية: 11

المشاركات: 6,053

الدولة/المدينة: jerusalem

الارتفاع عن سطح البحر: 750 متر

شكراً: 0
تم شكره 13 مرة في 12 مشاركة

افتراضي

شكرا لكي
هدا النموذج العندي لعبة صغيرة او مجرد تسلية ...
عليك ادخال الاسم بحروف صغيرة وتضغط ارسال سوف يظهر مربع انه اسم جيد واذا ادخلت اسم بحروف كبيرة يظهر لك انه غير فعال ... للمبتدئين فقط
http://www.freewebtown.com/mousa909/name.html

والكود في المرفقات
تصميم موسى



الملفات المرفقة
نوع الملف: txt name.txt‏ (1.4 كيلوبايت, المشاهدات 2)

قال تعالى:"اذ قال يوسف لابيه يا ابت اني رايت احد عشر كوكبا والشمس والقمر رايتهم لي ساجدين"

صدق الله العظيم
لا حول ولا قوة الا بالله العلي العظيم


نقره لعرض الصورة في صفحة مستقلة

نقره لعرض الصورة في صفحة مستقلة
  رد مع اقتباس
[ 09-04-2008 ]   رقم المشاركة 18

مراسل طقس الاردن في جرش

 - متنبئ جــــــــوي مُحتــــــــــرف - -Pro Forecaster-

 

الصورة الرمزية SNOW

تاريخ التسجيل: May 2008

رقم العضوية: 2

المشاركات: 1,977

الدولة/المدينة: جرش

الارتفاع عن سطح البحر: 600 - 700 متر

شكراً: 108
تم شكره 267 مرة في 54 مشاركة

افتراضي

بداية موفقة اختي ياسمينة ..... وفي إنتظار التالي
مع التحية




بقدر الكد تكتسب المعالي ** ومن طلب العلى سهر الليالي
يغوص البحر من طلب الآلىء ** ويحظى بالسيادة والنوال
ومن طلب العلا من غير كد ** أضاع العمر في طلب المحال


*** *** ***


وما من كاتب الا سيفنى ** ويبقي الدهر ما كتبت يداه
فلا تكتب بخطك غير شيء ** يسرك يوم القيامة ان تراه
  رد مع اقتباس
[ 09-04-2008 ]   رقم المشاركة 19

 مشرف قسم الطقس

 

الصورة الرمزية رامي 72

تاريخ التسجيل: Aug 2008

رقم العضوية: 150

المشاركات: 1,013

الدولة/المدينة: عمّان

الارتفاع عن سطح البحر: 930

شكراً: 1,219
تم شكره 1,152 مرة في 130 مشاركة

افتراضي

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

موضوع رائع اخت ياسمينة




  رد مع اقتباس
[ 09-04-2008 ]   رقم المشاركة 20

 

 

الصورة الرمزية yasminah

تاريخ التسجيل: Jul 2008

رقم العضوية: 103

المشاركات: 1,196

الدولة/المدينة: عمان/طريق المطار

الارتفاع عن سطح البحر: 933 متر

شكراً: 210
تم شكره 445 مرة في 70 مشاركة

افتراضي

اهلا بكم جميعا مرة اخرى
شرح الخطوة الثانية

لنلقي نظرة مرة اخرى على الكود :

كود HTML:
<html>
<head>
<title>my web</title> 
</head>
<body bgcolor="blue">
 </font>
</body>
</html>
اضفنا للمعرف head احد عناصره الاساسية وهو title ولشرحه بطريقة بطريقة مبسطة هو معرف عنوان الصفحة ف head لابد ان يتضمن هذا المعرف ولاحظ ايضا اننا ابتدئنا العنصر title بمعرف بداية ونهاية <> </>

اضفنا في داخل معرف title عنوان الصفحة على سبيل المثال كتبت عنوان لهذه الصفحة my web انظر الى الشريط العلوي للمتصفح حتى ان اسم الصفحة قد ظهر لك كذلك في الشريط السفلي فهذا عمل title

نقره لعرض الصورة في صفحة مستقلة

من ثم لاحظ اننا اضفنا ضمن العنصر body عنصر وجعلناه في داخله وهو عنصر bgcolor وهي اختصار ل background color اي الخلفية الملونة هنا اعطينا امر ل body ان يلون خلفية الصفحة واسمينا اللون باسمه وهو الازرق blue ولا حظ اننا وضعنا اشارة = ( bgcolor= blue)..
بالنسبة لقيم الوان سواء في الخلفية او في النصوص او في اي مكان في الصفحة تستطيع ان تسمي اللون بعينه كما فعلنا الان مع اللون الازرق او ان تعطي قيمة رقمية بدلا عنه والقيم الرقمية للالوان تعطيكي مساحة اوسع من ناحية مشتقات الالوان فمثلا الازرق القيمة الرقمية له 3333FF ويجب ان نسبق القيمة الرقمية بإشارة #

كود HTML:
<html>
<head>
<title>my web</title> 
</head>
<body bgcolor=#3333FF>
</body>
</html>
في هذا اللينك اعددت صفحة فيها قيم الالوان تستطيع ان تجرب اللون الذي تريده قبل ان تعتمده في متصفحك قم فقط بالضغط على قيمة اللون فتتغير الخلفية في حال اعتمدت على لون ما انسخه كما هو من مربع قيمة اللون والصقه في متصفحك :

http://www.freewebtown.com/jordan_am/color.htm

لكن ماذا لو اردت ان تكون خلفية الصفحة صورة وليس لونا .. انظر الى الصفحة :

http://www.freewebtown.com/jordan_am/yasminah.html

لقد قمت بتعديل الخلفية ووضعتها صورة بدلا من الالوان

كود HTML:
<html>
<head>
<title>my web</title> 
</head>
<body  background="b5.jpg">
 </font>
</body>
</html>
هنا اعطيت ال body امرا بأني اريد ال background صورة ولاحظ ايضا اني استبدلت كلمة bgcolor ب كلمة background فالاولى خاصة بالالوان والثانية خاصة بالصورة ولاحظ ايضا ان وضعت قوسين وفتحت علامة اقتباس وضعت في داخلها اسم الصورة + الامتداد ثم اغلقت قوسين الاقتباس ولمعرفة امتداد الصورة اضغط كليك يمين على الصورة ثم الخصائص properties فيظهر لك اسم الصورة وامتدادها مثلا b5.jpg والافضل دائما استعمال الصور ذات الامتداد اما jpg او gif ولكل منهما اختصاص سناتي على ذكره لاحقا ان شاء الله .
للحصول على الخلفيات ال background تجدها في كثير من المواقع فقط اعمل عملية بحث في جوجل او غيره ليخر ج لك الكثير من المواقع التي تقدم ال background

يوجد على كل لينك background قم بتحميلهما على جهازك واجري فيهما تمرينا في متصفحك ..
http://fwt.txdnl.com/4-10/j/o/jordan_am/background2.jpg

http://fwt.txdnl.com/4-10/j/o/jordan_am/yellowback.gif

في الفقرة التالية ان شاء الله ننتقل الى الخظة الثالثة .
تحياتي



  رد مع اقتباس
الأعضاء الذين قالوا شكراً لـ yasminah على المشاركة المفيدة:
رد


أدوات الموضوع
طرق مشاهدة الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
الانتقال السريع إلى


جميع الأوقات بتوقيت GMT +3. الساعة الآن 08:03 AM.