تعلم تصميم المواقع ...من الصفر للمبتدئين

السلام عليكم و رحمة الله و بركاته

بارك الله فيكم على هذه الدروس المفيدة جداً جداً.

و جزاكم الله خير الجزاء إن شاء.

أخوكم المهندس ميثم من العراق.

هاي ايجماعة ازيكوا :D

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

ندخل في الدرس على طول :)

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

هانستعمل في الدرس ده الصورة دي

دوسوا عليها بزرار الماوس الايمن (right click ) واعملولها save على الكمبيوتر وحطوها في الفولدر اللى فيه الصفحة بتاعتكوا

دلوقتي الكود الاساسي اللى بنستخدمه للصور هو <img>

يعني بنكتب كده مثلا في الجسم بتاع الكود

<BODY>
<IMG>
</BODY>

بس لازم في الكورس نحدد المكان بتاع الصورة ال (source ) وكمان الحجم بتاعها زي كده

<BODY>
<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101>
</BODY>

بس خلوني انوه عن حاجة مش بس ال source بيحدد انهى صورة هاتتضاف لكن كمان بيحدد مكان الصورة فين (على الكمبيوتر)

ال source اللى احنا عاملينه في الكود اللى فات SRC="chef.gif" معناه ان البراوزر هايدور على الصورة اللى اسمها chef.gif في الفولدر اللى حاطين فيه الصفحة بتاعتنا

وهاحط دلوقتي مخطط بيوضح لما مكان الصورة يبقى مش في الفولدر بتاع الصفحة ازاي تكتب الكود انا عن نفسي مش بحب الطريقة دي لانها صعبة وبتودي لمتاهات فاسهل اي صورة احب اضيفها احطها في الفولدر واريح دماغي B)

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

فيه attribute حلو قوي للصورة وهو alt وده بيقى بالشكل ده

<IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 ALT="Chef">

ده بيخليك لنا اليوزر يقف على لاصورة تطلعه رسالة وفي المثال اللى فات الرسالة هي Chef

معلش ده درس بسيط هاكلمه لما ارجع ان شاء الله

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

هاي ياجماعة ازيكوا

نخش في الدرس

عايزاكوا تجربوا الكود ده

<BODY>
<IMG SRC="chef.gif">
</BODY>

هايكون الشكل اللى ظاهر لنا كده

زي مانتوا شفتوا البراوزر بيعرف حجم الصورة ايه . طب ليه نزعج نفسنا بالأبعاد بقى مادام هو بيعرف حجم الصورة

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

لكن من غير الأبعاد ساعة لما يجي البراوزر يفتح الصورة هايوقف اللودينج ( التحميل ) بتاع الصفحة ويحمل الصورة وبعد مالاصورة تتحمل يرجع يحمل الصفحة

أرجو أني أكون عرفت أوضح الفرق

هاي ياجماعة إزيكوا

شوفتوا السرعة درس ورا اللى قبليه على طول :D

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

نبتدي الدرس

هانعمل لينك على موقع ال Yahoo

هانكتب كود عادي جدا ونشوف هانحوله إزاي غلى لينك اوك

<BODY>
Go to Yahoo!
</BODY>

هايكون المنظر كده

هانضيف حوالين كلمة Yahoo الكود او الوسم بتاع الوصلة (anchor )

<BODY>
Go to <A>Yahoo!</A>
</BODY>

برضه هنلاقى ان اننا ماعملناش حاجة

كل اللى هانعمله خطوة واحد وبعدين الوصلة هاتبقى شغلاة ومية مية

هانكتب ال url أو بالعربي يعن يالعنوان بتاع الصفحة

<BODY>
Go to <A HREF="http://www.yahoo.com/">Yahoo!</A>
</BODY>

وهايكون اللينك شغال بالمنظر ده

وألف مبروك على اللينك :D

طب لو انت عايز اللينك بتاعك يبقى إيميل

عادي جدا سهلة مووووووت برضه

التغيرر في الكود بسيط جدا أهو

<BODY>
Send me <A HREF="mailto:forrest@bubbagump.com">Mail!</A>
</BODY>

وهايبقى اللينك كده

طب أفرض مثلا انت عايز تجبر المتصفح أنه لما يدوس على اللينك اللى فيه الإيميل يكون العنوان بتاع الرسالة عنوان معين

مثلا العنوان بتاع الرسالةيكون contact me

هانعمل تغيير بسيط في الكود وهايبقى

<A HREF="mailto:forrest@bubbagump.com?subject:Contact me!">

في سؤال دلوقتي ممكن يخطر في بال كتير منكوا

إزاي أشيل الخط الأزرق اللى بيبقى تحت اللينك

بصوا هو تكنيكياص ده مش بيحصل بلغة الهتمل ده بيحصل بحاجة اسمها Style Sheets

لكن لو حطيط الكود اللى جاي مابين الكود بتاع ال HEAD أي براوز بيدعم ال Style Sheets هايظهر اللينكات من غير الخط اللى تحتيهم

الكود أهو

<style type="text/css"><!-- 
a:link, a:visited, a:active {text-decoration: none} 
--></style>

عشان نكمل موضوع اللينكات برضه لازم نذكر ان احنا ممكن نعمل الصور لينكات

لو حبينا نعدل على المثال بتاع Yahoo كل اللى هانعمله اننا هانشيل كلمة Yahoo وهانحط بدالها كود الصورة <IMG> للصورة اللى احنا عايزنها

مثال

<BODY>
Go to <A HREF="http://www.yahoo.com/"><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101></A>
</BODY>

وهايظهر الكود بالشكل ده

ممكن ناس تحب تشيل المربع الأزرق اللى بيظهر حوالين الصورة

الطريقة سهلة قوي انك تخلى الbroder بتاع الصورة بصفر

<BODY>
Go to <A HREF="http://home.netscape.com/"><IMG SRC="chef.gif" WIDTH=130 HEIGHT=101 BORDER=0></A>
</BODY>

سؤال مهم برضه ممكن يتسأل إزاي احطلينك على فايل بحيث أن الناس لما تدوس على اللينك يعمل دونلود للفايل ده (downloading the file )

خلونا نفترض ان عندنا كام فايل من نوع .doc عايزين نخلى الناس تعرف تعملهم داونلود

ببساطة جداً نكتب اسم الفايلز بدل عنوان الصفحة بتاعة الموقع

<A HREF="myresume.doc">Download my resume</A>
<BR><A HREF="mybio.doc">Download my autobiography</A>

سؤال تاني ممكن يبقى مفيد لبعض الناس

إزاي أخلى اللينك يفتح في صفحة تانية

يعني لما الناس تدوس على لالينك يفتح في صفحة تانية غير اللى انا شغال عليها

ببساطة برضه هانضيف للكود TARGET="_blank"

وهايبقى الكود كده

Go to <A HREF="http://home.netscape.com/" TARGET="_blank">Netscape!</A>

وأشوفكوا على خير إن شاء الله في الدرس اللى جاي

ماتخافوش مش بعيد إن شاء الله :lol:

انا من المتابعين

الشرح رائع

وبستفيد فعلا

لان هالكورس معي لغة اتش تي ام ال

وتابع واحنا وراك خيو

:

شمس

web designer و H@mis عاملين شغل حلو ما شاء الله :)

يلة الناس بعد متخلص html تيجى عندنا القسم تاخد كورس php

و على حسابى المرادى :lol:

السلام عليكم

الاول كل سنة وانتم طيبين

والف الف الف الف الف شكر على المجهود الرااااااااااااااااائع ده

عقبال ما ندخل فى الجافا او ال php

بس راح اكون ان شاء الله خلصت كتير ومشيت لوحدى لعل وعسى افهم :)

الله يجزيكم خير بصراحة اخوكم

ايجى وان

مممممممم

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

وعموما اي حد عنده اسفسار ف اي حاجة احنا تحت امركو في اي وقت ان شاء الله

good luck

هاميس

انا دخلت وما وجدت شىء

هو فى حاجة بجد ولا انا اللى معرفتش

اكيد انا صح

اه صح

طيب انا هاخش تانى بس بعد ما تقولى انه فى الكتاب وانتى بنفسك شوفتيه

دمتم لنا

webdesigner كتب:

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

good luck

←

اااااه دى مؤامرة :lol:

اوكى مفيش مانع بس الدروس فى القسم عندنا إن شاء الله :)

اقتباس

اااااه دى مؤامرة 

اوكى مفيش مانع بس الدروس فى القسم عندنا إن شاء الله

ممممممممم

اوكي بس عاوزين رشوة عشان نقبل نيجي :lol: ...

وكمان و وافقنا المواصلات لغاية عندكو عليك انت :P ... الواحد بيكسل يتنقل لحتة تانية (h) (h)

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

ايها الشعب ..

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

ولذلك نطلب من حضراتكم التوجه لصناديق الاقتراع ووضع صوتك لما تري انه الافضل ..

في رايك ... نحط الدروس درس درس ..يعني نستني لما تقراوه ونحط اللي بعده ..وهيكون بانتظام ..كل يوم خميس مثلا ... وهذا الراي متمثل في العضو webdesigner رمز الحوووت

ولا نحط الدروس كلها مرة واحده زي معملت الاخت هاميس... وطبعا هي اللي بتمثل الراي ده ..رمز اللبانة :D

وسيقوم كل مرشح بتوضيح برنامجه الانتاخبي في موعد اقصاه غدا قبل بدء الاقتراع ...

ياريت تختاروا تحبوا من النظامين دول ..لان انا شايف النظام الاول هو الاحسن .وهاميس بتقول الراي التاني .. وطبعا زي متحبو انتم هنعمل ...

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

انا هوضح رايي (برنامجي الانتاخبي (h) ) وهي كمان توضح رايها عشان تختارو ..

اعتقد -بالتجربة - من الافضل انها تبقي درس ونشوف تطبيقاتكم عليه واسئلتكم ونجاوبها وتستفيدوا من اخطاء بعض وبعدين نحط اللي بعده ...مرة اومرتين اسبوعيا زي مانتو عاوزين ...

يبقي في شوية interaction ...ويبقي الموضوع اكثر جذبا ومش ممل ...

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

وطبعا اكيد مهم تجميع الدروس كلها ..ده ممكن نعمله ف الاخر بعد منتعلم مع بعص نجمع الدروس كلها علي بعض...

ده رايي المتواضع...واللي جايبه بالتجربه لاني مجرب النظام ده علي منتدي تاني وكانت النتايج فوق الممتازة .... وعملنا مع بعض حاجات لزيزة ..

ومستنين مؤتمر المرشح المنافس يوضح رايه للشعب:rolleyes: ...واللي ممكن يكون احسن من رايي بكتير ... وانا بحترم رايها جدا ... وانتو اللي ليكو الاختيار زي متحبو ...

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

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

http://us.f1.yahoofs.com/bc/41fa3796_faa2/...ftqFNDBHWmLfNwr

أنا أنا رمز اللبانة :angry: :angry:

مكانش العشم خالص :( :( :(

على العموم ماعلينا

أنا قررت اخوض المعركة

انا بقى بقول في البرنامج الانتخابي بتاعي

أنا كنت بقول ان الموضوع اللى بنكتب فيه دلوقتي عايزاه يبقى مرجع :rolleyes:

لانى اول مادخلت المنتدى ماكنتش اعرف حاجة :blink:

وكنت عايزة دروس اقراها واتعلم منها تكون وافية فدخلت على الموضوع لقيت الرغي كتير والدروس

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

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

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

وفين لما الأخ مصطفى يحن علينا :lol: :lol:

فقلت ياريت الموضوع يبقى كله الدروس ورا بعضيها عشان اللى عايز يتعلم في وقت كويس افرض مثلا

واحد اتعلم الدرس كويس ومش عنده اسئلة وعايز يتنقل على المستوى للى بعده لا لازم يستنى لما الناس

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

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

نظام ردوا والا :lol:

بس ياجماعة الموضوع في كلمتين انا من رأيي ان الموضوع ده يبقى مرجع للدروس بتاعت المبتدئين

ويعدين اي حد مسموحله انه يسال في اي وقت

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

غير ده للفصول التفاعلية يعني اللى عايز بقى تفاعل وواجبات وحاجات من دي هايلاقى الموضوع اللى

عايزه برضه

والف شكر

ونعتذر عن الرغي الكتير

طبعا لازم ارد علي الافتراءات والاشاعات المضلله اللي بيروجها الاخرين ...

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

وهو ده السبب الي خلاني اطلب منك تحطي الدروس ...... ومكانش قصدي وقتها تحطيهم كلهم ورا بعض..لان لو علي ككده كنت اقدر احطهم انا وخلاص مش هتتعبني !!

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

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

ونظام التفاعل ده بيدي جذب اكتر للتعلم وبيطلع نتايج كويسة ...

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

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

اما مشروعك الاخير فده كنت ناوي اني اقوله كاقتراح يكون حل وسط ..وده ف رايي احسن حلل ..

علي فكرة يهاميس... احنا بنكلم نفسنا ومحدش هنا اصلا يقرا حاجة !!!! :lol: :lol: ولو فضل الحال كده كل واحد فينا وخلاص هيدي صوته ..وطبعا صوت الراجل مثل صوت الانثيين .. :lol: :lol:

انا عايزة اقول حاجة والله

انا لا عندي برنامج انتخابي ولابتاع انتوا والله اللى هاتقولولى اعمله هاعمله مش معترضة بس حد يعبرنا

ثانيا اكيد فكرتك مفيدة لناس كتير حتى لو انا ماكنتش بحب الطريقة دي بس فيه ناس كتير بتحبها والله انا اسفة اني اللى سببت المشكلة دي اني حطيت الدروس دي مرة واحدة بس كان المفروض تفهمنى

دلوقتي ماعلينا

المهم ان محدش بيرد علينا

فانا شايفة ان المشرفين يشوفلنا حل يعني يإما الموضوع ده يتقفل ويتغير عنوانه ويتعدل فيه علىاساس انه رجع عشان نبتدي السلسلة الدروس اللى بتقول عليها على نضافة ومية بيضا :rolleyes:

السلام عليكم و رحمة الله

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

الاخ webdesigner

و الاخت H@mis

على مجهودهم الرائع و اسلوبهم المتميز و السهل على المبتدئين امثالي

بالنسبة لبرامجكم الانتخابية :

في الحقيقة انتم وضعتمونا في حيرة لان كلتا الطريقتين لهما مزايا و عيوب كما ذكرتم

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

و شكرا لكم

و نحن في انتظاركم على احر من الجمر

السلام عليكم ورحمة الله وبركاته

اخى webdesigner اشكرك من اعماق قلبى على هذه الدروس الرائعة

والمزيد من التقدم ان شاء الله

بالتوفيق

revenger

السلام عليكم ورحمة الله وبركاته

طبعا انا كمان بحب اشكر h@mis بجد المجهود ده كان رائع رائع وساعدنى كتير جدا جدا جدا

وربنا يكرمك يا رب

revenger

السلام عليكم

ياجماعة والله يمكن اكون اول صوت او لا بس انا فى الحقيقة

مع طريقة الاخ webdesigner انا حاسس انها طريقة جميلة

طبعا ده مع شديد احترامى للاختh@mis وانا طبعا متاكد اللى انتوا بتعملو ده فى مصلحتنا لان هدفكم هو مساعدتنا باكبر قدر من الامكان واحنا والله مقدرين ده

وربنا يكرمكم يا رب

revenger

الأخ revenger شكرا جدا على الرد

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

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

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

السلام عليكم مع اني طرحت رايي في كيفية وضع الدروس

الا انه يبدو لي من رد الاخت H@mis انها لم تقرا المشاركة

اقتباس

حسستنا اننا مش بنكلم نفسينا

عموما لا بئس و اكرر رايي ان تقررو انتم الكيفية المناسبة لوضع الدروس

و ننتظر منكم ان تكملوا الدروس

ولكم جزيل الشكر وان شاء الله تكون في ميزان حسناتكم

معلش ايجماعة ادركت اخيرا ان اللينك مش شغال مش عارفة ليه

يالا على العموم اللينك الجديد أهو

اللينك ده للناس اللى مش قرت ده السورس اللى حاطه منه الدروس

الف شكر على المجهود الجبار والرائعيا اخت اميس انتى معنا منذ البدايه لكن انا لا اعمل لما توقفتى عن الشرح وانى انا وجميع المبتدائين مثلى نريد التعمل منك بالشرح الوفى .وشكرا