السلام عليكم ورحمه الله وبركاته
درسنا النهارده من اجمل الدروس واكثرها امتاع
يحتاج الى تركيز وبعده سيخرج منكم الابداع
نبدأ على بركه الله
اولا : الوصلات التشعبيه Links......
تعتبر الوصلات التشعبيه احد الركائز الاساسيه لتصميم المواقع فعن طريقها نربط صفحات الموقع ببعضها ويمكن ان نتفرع من الموقع الحالى الى موقع اخر جديد
كثيرا نزور المواقع ونتنقل داخلها من صفحه الى اخرى بسهوله كان نبدأ بالصفحه الرئيسيه ثم ننتقل الى الاقسام كماهو الحال فى المواقع والمنتديات
طبعا تصميماتنا السابقه اعتمدت كلها على صفحه واحده لكن دلوقتى هنصمم اكتر من صفحه ونربطهم ببعض وننتقل بينهم
لعمل وصلة استخدم الوسم
وباضافه الخاصية href لتحديد الوجهة التى سنتحول اليها، الوجهة قد تكون صفحة html وعندها يبدأ العنوان بـ http:
مثال:
كود هتمل:
<a href="http://www.microsoft.com/">موقع مايكروسوفت</a><br>
وبتحليل السطر السابق نجد ان :
1- الموقع الذى نريده ان يفتح
"http://www.microsoft.com/" 2- الكلمه التى بالضغط عليها ستفتح الموقع الذى حددناه وهى
موقع مايكروسوفت اذن بالضغط على جمله "موقع مايكروسوفت" سفتح لنا صفحه بالموقع الذى كتبناه
وقد يكون عنوان موقع ftp وعندها يبدأ بـ ftp: وهى اختصار file transfer protocol
وهو خاص برفع الملفات والبرامج من الكمبيوتر للانترنت ونستطيع تحميل الملفات والبرامج منه
وقد يكون بريدا إلكترونيا وعندها يبدأ بـ mailto:
مثال:
كود هتمل:
<a href="mailto:emailname@hotmail.com">My E-mail</a>
وبتحليل السطر السابق:
1- اسم الايميل الذى سترسل له الرساله ويكتب بعد mailto:
emailname@hotmail.com 2- الكلمه التى بالضغط عليها ستفتح شاشه لكتابه نص الرساله وارسالها الى الايميل المحدد
My E-mail وعند الضغط عليها يظهر الشكل الاتى:
يوجد أيضا استخدام آخر للوسم ِA باستعمال الخاصية name بدلا من href (يمكن استعمال الإثنين معا)، وبعد ذلك تستطيع أن تدرج وصلة عادية تشير إلى المكان الذي به
، وذلك بجعل خاصية href الوصلة العادية تشير إلى الإسم المحدد في name مسبوقا بعلامة #، مثال ذلك إذا أردت أن تضع وصلة تقودك إلى جزء معين من الصفحه الحاليه ، ستقوم بعمل
كود هتمل:
<a name="myname"></a>
في المكان المطلوب، ثم تدرج وصلة في أي مكان آخر كالتالي
كود هتمل:
<a href="#myname">إسمي</a>
مثال :
افتحوا صفحه نوت باد وضعوا فيها هذا الكود وجربوا تضغطوا على اخر كلمه والتى ستنقلكم الى بدايه الصفحه لانى وضعت كود تحدي العلامه اسفل body يعنى كدا انا حطيت العلامه انها عند الضغط على asdasd هنروح لمكان العلامه الا وهو اعلى الصفحه
كود هتمل:
<html>
<head>
</head>
<body>
<a name="ub"></a>
<a href="mailto:emailname@hotmail.com">My E-mail</a>
<br>
بسم الله الرحمن الرحيم
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<a href="#ub">asdasd</a>
</body>
</html>
، ويمكنك أيضا عمل ذلك عبر الصفحات المختلفه للموقع من صفحه إلى صفحه آخرى بحيث تحدد بالضبط المكان الذي تريده من الصفحه الوجهة هكذا
كود هتمل:
<a href="home.html#myname">بدايه الصفحه الرئيسيه</a>
وبتحليل الكود نجد ان :
احنا مثلا فى صفحه اسمها عناوين الاخبار ونريد منها ان نذهب الى مكان ملاحظه ما فى صفحه تفاصيل الاخبار
نفعل الاتى فى صفحه تفاصيل الاخبار نزرع وصله تعريفيه كمتغير ثابت يرمز للمكان الذى نريد الانتقال اليه وليكم مثلا بهذا الشكل
كود هتمل:
<a name="details1"></a>
احنا كدا عملنا زى علامه محدد للمكان دا واصبح عنوان مميز ة طبعا السطر دا بيتكتب فى صفحه تفاصيل الاخبار
نيجى فى صفحه عناوين الاخبر ونحط رابط ينقلنا للعنوان المميز اللى حددنا فى الصفحه السابقه ولكن لازم نحدد اسم الصفحه وبعده # وبعدها عنوان العلامه المميزه
كود هتمل:
اضغط هنا للذهاب الى تفاصيل الخبر</a><a href="news.html#details1>
وبالتالى عند الضغط على هذه الجمله سنحول الى مكان العلامه فى الصفحه الاخرى والسطر دا بيتكتب فى كود صفحه عناوين الاخبار
من غير ما تشتتوا نفسكم انا هعملكم كود عملى ومنه هتعرفوا ايه المقصود
هنفتح صفح نوت باد ونسميها news.html
ونضع فيها هذا الكود ولاحظوا قبل بدايه كل خبر انا وضعت العلامه التى تشير اليه
كود هتمل:
<html>
<head>
</head>
<body bgcolor=black>
<center>
<font color=white size=5>
تفاصيل الاخبار
</font>
<br>
<br>
<p align=right>
<a name="address1">
<font color=yellow size=5>
على ذمة الدراسة .. ضع صورة طفلك في "المحفظة" لمواجهة السرقة
</font><br>
<font color=white size=5>
ثبتت دراسة اجراها باجثون بريطانيون أن النظر إلى صور الأطفال الرضع داخل حافظات النقود يجعل المرء أكثر أمانة. وأشارت دراسة إلى أن الأشخاص الذين عثروا على حافظات نقود كانوا أكثر ميلا لردها لأصحابها عندما كان بهذه الحافظات صور لأطفال.و قام الباحثون خلال التجربة بتوزيع 240 حافظة نقود بشكل عشوائي في أنحاء متفرقة واحتوت 40 حافظة منهم على صورة لأطفال وكانت النتيجة أن أكثر الحافظات ردت حيث عاد 35 حافظة .
</font><br>
<font color=yellow size=5>
<a name="address2">القبض على لص متخصص في سرقة الأحذية الحريمي بالإكراه
</font><br>
<font color=white size=5>
ألقت الشرطة الألمانية القبض على سارق متخصص في الأحذية الحريمي بعد أن طرح سيدة أرضًا في الشارع ونزع الحذاء من قدميها. وارتكب اللص بيتر الذي يبلغ من العمر 27 عاما ، 8 سرقات للأحذية الحريمي واستخدم خلالها العنف في نزع الأحذية مما تسبب في إصابات بأيادي وأقدام ووجوه الضحايا. وتمكنت الشرطة من اعتقال اللص عقب تشكيل مجموعات بحث .
</font><br>
<font color=yellow size=5>
<a name="address3"> بنت البدينة "سمينة"
</font><br>
<font color=white size=5>
وجدت دراسة بريطانية حديثة أن هناك علاقة قوية بين بدانة الأمهات وبناتهن، مشابهة لتلك التي بين الرجال البدناء وأولادهم الذكور. وتبين للباحثين عقب دراسة أجروها على 226 عائلة أن احتمال ولادة الأم البدينة لابنة سمينة مثلها هو عشر مرات أكثر من احتمال ولادة إمرأة نحيفة لابنة بدينة، وبأن احتمال إنجاب الأب البدين لأولاد ذكور وبدناء مثله هو ست مرات أكثر من احتمال ولادة الأب النحيف لابن بدين.
</font><br>
<font color=yellow size=5>
<a name="address4"> "ملوك الجن" تتصل بالبشر عبر هواتفهم الخلوية
</font><br>
<font color=white size=5>
اعلنت الشرطة في شمال بنجلاديش انها القت القبض على عشرات المخادعين احتالوا على الناس ، ونهبوا اموالهم عن طريق الاتصال بهم على هواتفهم الخلوية والادعاء انهم من الجن ويتمتعون بقدرات خارقة. وكان المخادعين يجمعون المعلومات الشخصية في شأن ضحاياهم قبل الاتصال بهم والتحدث معهم "بلهجة تشبه اللهجة العربية"، ويدعون انهم من الجن الآتين من السماء، ويطلبون من الضحايا ارسال الاموال إلى مكان محدد، مهددينهم بحلول مصيبة عائلية في حال رفضوا الانصياع لطلبهم.
</font><br>
<font color=yellow size=5>
<a name="address5"> إذاعة خاصة بالمطلقات فقط في مصر
</font><br>
<font color=white size=5>
أيام قليلة وينطلق على شبكة الانترنت راديو خاص للمطلقات فقط، يتم بثه من خلال مدونة "عايزة اتطلق" لصاحبتها محاسن صابر، والهدف من المدونة الاهتمام بمشاكل المطلقات في مصر والعمل على تغيير الصورة السلبية الموجودة في المجتمع الآن، وتقيم المحطة نشاطها على أربعة برامج رئيسية، أهمها برنامج "يا مفهومين بالغلط يا إحنا" ويناقش أبرز ما تعانيه المطلقة مع الرجال فى المجتمع، يذكر ان هناك أكثر من 400 الف حالة طلاق في مصر سنويا.
</font></p>
</font>
</body>
</html>
ثم نعمل صفحه نوت باد اخرى جديده ونسميها address.html
ونضع فيها عناوين الاخبار
ومع كل خبر نضع امامه رمز العلامه علشان لما نضغط عليه ينقلنا الى تفاصيل الخبر الخاص به فى الصفحه الاخرى
كود هتمل:
<html>
<head>
</head>
<body bgcolor=black>
<center>
<font color=white size=5>
عناوين الاخبار
<br>
فى حاله الرغبه بقراءة اى خبر اضغط عليه
<br>
<p align=right>
<a href="news.html#address1"> على ذمة الدراسة .. ضع صورة طفلك في "المحفظة" لمواجهة السرقة</a>
<br>
<a href="news.html#address2">القبض على لص متخصص في سرقة الأحذية الحريمي بالإكراه</a>
<br>
<a href="news.html#address3"> بنت البدينة "سمينة"</a>
<br>
<a href="news.html#address4"> "ملوك الجن" تتصل بالبشر عبر هواتفهم الخلوية</a>
<br>
<a href="news.html#address5"> إذاعة خاصة بالمطلقات فقط في مصر</a>
</p>
</font>
</body>
</html>
وبهذا عندما نكون فى صفحه عناوين الاخبار وبالضغط على اى بر يفتح لنا تفاصيله فى الصفحه الاخرى
طبقوها عملى وسترون النتيجه كالاتى:
يمكنك أيضا عمل وصلة إلى أعلى المستند بوضع #top في الخاصية href. فى نفس الصفحه وهذه كفيله ان تنقلك من اسفل الصفحه الى اعلاها
يارب يكون الجزء دا سهل عليكم
نكمل الدرس::
نيجى لنقطه عمل تنقل من صفحه الى اخرى داخل موقعنا اللى بنصممه حاليا
نفرض اننا بنصمم صفحتنا mypage.html وعايزين اننا ننتقل منها الى صفحه تانيه مش هنحتاج اننا نكتب بعد href اسم الموقع زى ما عملنا فى موقع مايكروسوفت فى اول الدرس
كل اللى هنحتاجه اننا نكتب اسم الصفحه مباشره طالما ان الصفحات موجوده مع بعضها فى فولدر واحد
يعنى من صفحه mypage.html نقدر نفتح صفحه تانيه وليكن mypage2.html بكنابه هذا السطر فقط
كود هتمل:
<a href="mypage2.html"> الانتقال الى صفحتى الثانيه</a>
اما لو كانت الصفحه اللى هننتقل اليها موجوده فى فولدر اخر فى نفس فولدر الصفحه الاولى يبقى نكتب مساره بالظبط زى الصور
كود هتمل:
<a href="pages/mypage2.html"> الانتقال الى الصفحه الثانيه</a>
نفس الحكايه هى هى حكايه مسار الصور اللى اتعلمناها فى الدروس السابقه
طيب اكيد بتسألوا هو الانتقال من صفحه للتانيه بيكون عن طريق جمله او كلمه نكتبها ونضغ عليها وبس
هقولهم لا .... كمان الصور تقدر تعمل نفس النتيجه ونضغط على الصوره وتفتح لنا صفحه تانيه او موقع تانى
والكود بيكون بالشكل دا
كود هتمل:
<a href="http://www.microsoft.com/"> <img src="/images/sample.gif"></a><br> <a href="http://www.microsoft.com/"> <img src="/images/sample.gif" border="0"></a><br> <img src="/images/sample.gif" border="3">
والنتيجه
--------------------------------------------------------------------------
ثانيا الجداول:
تعتبر الجداول من أهم مكونات صفحات HTML، وجميع التصاميم الإحترافية تستفيد من الجداول لتصميم الصفحة وتوزيع الكائنات عليها وتشكيلها في القالب الذي يريدونه، يتم إدراج الجدول بالوسم table وداخل الجدول يجب إدراج صفوف tr وداخل الصفوف توجد البيانات td، يمكن وضع إطار للجدول بالخاصية border حيث نحدد فيه سماكة الإطار المطلوب 0 تعني دون إطار، القيمة الإفتراضية للإطار هي 0.
كود هتمل:
<table border="1">
<tr>
<td>الصف الاول - الخانه الاولى
<td>الصف الاول - الخانه الثانيه
</tr>
<tr>
<td>الصف الثانى - الخانه الاولى
<td>الصف الثانى - الخانه الثانيه
</tr>
</table>
والنتيجه:
يمكنك أيضا التحكم بالمسافة بين الخلايا بواسطة الخاصية cellspacing، والمسافة بين الحدود الداخلية للخلايا ومحتويات الخلايا بواسطة الخاصية cellpadding.
كود هتمل:
<table cellspacing="10" cellpadding="20" border="1">
<tr>
<td>الخليه الاولى</td>
<td>الخليه الثانيه</td>
</tr>
</table>
النتيجه:
يمكن التحكم بعرض الجدول بالخاصية
width
وارتفاعه بالخاصيهheight
وكلاهما يأخذ قيما مطلقة أو نسب مؤية، ويمكن استخدام هذه الخصائص في الخلايا td.
أيضا وعند إعطاء الخلايا قيما نسبية فإنها تحسب بالنسبة للصف الذى هى فيه
كود هتمل:
<table width="100%" height="100%" border="1">
<tr>
<td width="100" height="40%">الخليه الاولى
<td width="100%" height="40%">الخليه الثانيه
</tr>
<tr>
<td width="100" height="60%">الخليه الاولى
<td width="100%" height="60%">الخليه الثانيه
</tr>
</table>
والنتيجه
يمكن التحكم بلون خلفية الجدول بالخاصية bgcolor ويمكن تعيين صورة في الخلفية بالخاصية background، يمكن استعمال هذه الخواص في الخلايا td أيضا، وعند تعيين قيمة bgcolor للجدول مختلفة عن قيمة أحد الخلايا فإن لون الخلية سيطغى على لون الجدول في تلك الخلية، لأن الخلية موجودة فوق الجدول في ترتيب الطبقات.
كود هتمل:
<table border="1" background="image.jpg" width="90%" height="80%">
<tr>
<td bgcolor="Yellow">الخليه الاولى
<td>الخليه الثانيه
</tr>
</table>
النتيجه:
يمكن التحكم بمحاذاة محتوى الخلية أفقيا بالخاصية align ورأسيا بالخاصية valign، في الخاصية align القيمة left تعني محاذاة لليسار و rigth لليمين و center بالمنتصف و justify للضبط الكلي تجعل الأسطر مساوية في الطول، أما الخاصية valign فتأخد القيمة top للأعلى، bottom للأسفل middle للمنتصف.
كود هتمل:
<table border="1" width="90%" height="80%">
<tr>
<td align="right" valign="bottom">الخليه الاولى
<td align="left" valign="top">الخليه الثانيه
</tr>
</table>
والنتيجه:
يمكن أيضا وضع جدول داخل جدول، عن طريق وضع الجدول في أحد الخلايا td، وهنا يحسب عرض الجدول الداخلي النسبي بالنسبة لعرض الخلية التي تحتويه والموجودة في الجدول الخارجي.
كود هتمل:
<table width="95%" border="1">
<tr>
<td>الجدول الاول - الخليه الاولى
<td>
<table border="1">
<tr>
<td>الجدول الثانى - الخليه الاولى
<td>الجدول الثانى - الخليه الثانيه
</tr>
</table>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td>الجدول الثالث - الخليه الاولى
<td>الجدول الثالث - الخليه الثانيه
</tr>
</table>
<td>الجدول الرابع - الخليه الاولى
</tr>
</table>
والنتيجه:
يمكن أيض دمج الخلايا رأسيا بالخاصيةrawspan وأفقيا بالخاصية colspan، حيث تحدد في كل منهما عدد الخلايا التي يجب دمجها في الخلية الحالية، وتستخدم هذه الخصائص في الخلايا td.
كود هتمل:
<table border="1">
<tr>
<td rowspan="2" colspan="2">الخليه الاولى
<td>الخليه الثانيه
<td>الخليه الثالثه
</tr>
<tr>
<td rowspan="3">الخليه الرابعه
<td colspan="2">الخليه الخامسه
</tr>
<tr>
<td>الخليه السادسه
<td>الخليه السابعه
<td>الخليه الثامنه
<td>الخليه التاسعه
</tr>
</table>
والنتيجه
انا عارفه ان اخر الدرس والجزأ الخاص بالجداول تعبكم شويه
عارفه هتقولوا مش شويه دا كتيررررررررررررر
بس معلش لازم نتعلم صح وصدقونى كل حرف هيفيدكم للى هيكمل فى المجال دا
والدرس دا مهم جداااااااااااااااااا كل المواقع بتعتمد عليه ولا يخلوا منه اى موقع محترف
نيجى للواجب
وشدوا حيلكم امامكم اسبوع كامل
التصميم المره دى بسيط جدا ومش هتقل عليكم
لانكم مطالبين تجربوا كل الدرس عملى
الواجب كالاتى :
هنكمل على مثال صفحه الاخبار news.html
وصفحه العناوين address.html
بحيث يكونوا بالشكل دا
اولا صفحه عناوين الاخبار:
تتضمن الجداول والتنقل من عنوان الخبر الى مكان تفاصيله فى الصفحه التانيه
وفى النهايه جمله تفتح الصفحه الاخرى مباشره
ثانيا صفحه تفاصيل الاخبار:
وفى النهايه جمله تعيدنا الى الصفحه الخاصه بالعناوين
وسانزل لكم رابط تحميل الدرس لاجهزتكم غدا باذن الله
الدرس الخامس من( الجزء الاول ) من دورة تعليم تصميم المواقع
رد مع الاستدلال
كتبت بواسطة اسيرة الشوق1
الروابط المفضلة