دورة : صمم موقعك خطوة بـ خطوة

يمكنك بعد إتمام هذه الدورة ، تصميم موقع بسيط لك على الشبكة


# إنشاء الجداول والتعامل معها :
في الحقيقة ... ُمرَتكَز صفحات الويب وأساسها .. هي الجداول !! قد تقول لي كيف .. أنا لا أرى تلك الجداول ، ولماذا الجداول ؟ بالنسبة لعدم رؤيتك لتلك الجداول فهذا راجع إلى مصمم الصفحة نفسه ، كثير من مصمي الصفحات يجعلون سمك جداولهم ( 0 ) لذلك فهي تبدو لك غير مرئية ... عموما ً ... قد يقول قائل لماذا أستعمل الجداول ؟ في الحقيقة ، استعمال الجداول ... يجعل من موقعك موقعا ً مرتبا ً ومنظما ً بمعنى الكلمة ، فالصورة موضوعة في خلية والنص في خلية لذا ، فأنا أضمن أن محتويات الموقع لن تتداخل ولن تتزحزح يمنة ويسرة .. # - طريقة إدراج جدول في الفرونت بيج : الطريقة بسيطة ... تجد في القائمة العلوية في البرنامج خيار اسمه Table طبق ما في هذه الصورة

بعد اختيارك خيار Table ستجد أن نافذة خرجت لك ... بالنظر إلى الأرقام الموجودة على الشل المجاور نجد أن :
- الرقم 1 : عدد الصفوف ، يمكنك وضع عدد الصفوف التي تريدها في جدولك بوضع القيمة في المربع المقابل لهذه الكلمة . - الرقم 2 : نفس السابقة ، ولكن هذا الخيار خاص بـ عدد الأعمدة . - الرقم 3: المحاذاة ، ويفضل جعلها Center أي توسيط . - الرقم 4: مقاس الحدود ، لو أردت أن يكون الجدول غير مرئي ( شفاف ) بالنسبة للزوار عليك جعل القيمة 0 . - الرقم 5 : تحديد عرض الجدول ، ويحبذ أن يكون العرض 765 بيكسل لأن هذا القياس هو الأنسب لمعظم شاشات العرض حاليا ً .
قمت بإدراج جدول يخدمني وفق الخطة واخترت أن يكون ذلك الجدول بـ 3 أعمدة و 3 صفوف . وقد جعلته شفافا ً ... ظهر لي الشكل التالي :

وبعد تقسيم عناصر الخطة على خلايا الجدول ، أظن أن الأفضل أن يكون التالي :

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

# كتابة النصوص والتعامل معها : في الواقع .. هذه الخطوة من أسهل الأمور في برنامج الفرونت بيج ، حيث تشابه طريقة التعامل مع النصوص في هذا البرنامج طريقة التعامل مع النصوص في برنامج الوورد ... لكتابة نص في مكان ما في صفحتك .. توجّه للخلية التي تريد الكتابة فيها ، وقم بالضغط هناك وستجد أن مؤشر الفارة بدأ الوميض ، عندها ابدأ بكتابة النص بشكل طبيعي جدا ً . نأتي الآن لمسألة تنسيق النصوص ، عليك إذا أردت أن تنسق نصا ً ما ، تحديده أولا ً ومن ثم تطبيق المؤثرات عليه . الشكل التالي قد يساعدك في فك رموز بعض الأزرار :) .


# إدراج الصور ومكونات ويب :
نفس الطريقة أعلاه ... لإدراج صورة في مكان معين .. اذهب بموشر الفأرة إلى الخلية التي تريد أن تُدرج فيها الصورة أو مكون الويب (( مثال : النص التمريري )) ، واختر التالي : Insert > Picture > From File ومن ثم عليك اختيار الصورة من ملف images الذي وضعنا فيه الصور التي سنستخدمها في الموقع . أما لإدراج نص تمريري هذا هو النص التمريري :) أنا عارف إنك راح تسأل وش هو النص التمريري فتوجه كذلك إلى Insert واختر منها Web component ستظهر لك قائمة اختر منها :

استخرج لك نافذة خصائص النص التمريري ، اكتب ما تريد في المربع الأبيض (( ستجد مؤشر الفأرة يومض ))

لكي تواصل اضغط هنا