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

كيف تصمم موقعك على الشبكة

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

# لفتح مشروع جديد file =< new =< web =< Ok.

# لرؤية ملفات موقعك اضغط علىNavigation (يسار الصفحة) اضغط مرتين على الملف index.htm (الذي يعتبر الصفحة الرئيسية لموقعك) لتقوم بتحريره.

# لإنشاء صفحة جديدة في الموقع file =< new =< page.

# هناك ثلاث وضعيات تستطيع من خلالها رؤية عملك هي كالتالي:

1-Normal :لرؤية وضع التصميم للصفحة مع إمكانية التعديل عليه

2-HTML :لرؤية التركيب الداخلي للصفحة تمكنك من إضافة أكواد داخلها

3-Preview :لرؤية الوضع الذي ستظهر فيه الصفحة لا يمكن التعديل عليه

هذه الوضعيات تجدها أسفل الصفحة

# يفضل في تصميم الصفحات التعامل مع الجداول في جميع التنسيقات وذلك لعدة أسباب قد يكون من أهمها ما يلي :1- حصر الكتابة 2- تنسيق العمل 3- تعدد الألوان

# تستطيع الكتابة في البرنامج وتعديلها وتلوينها تماماً كما في برنامج Word

# تستطيع أيضاً إضافة صور على صفحتك (يفضل عدم الإكثار من الصور لأنها تثقل الصفحة)

Insert =< Picture =< from file أو clip art

# تستطيع أيضاً إضافة أصوات وأفلام وعروض فلاشية

Insert =< Advanced =< Plug-in =< ثم حدد عرض فلاش مثلاً ثم Ok

# إدراج كتابة متحركة Insert =< component =< marquee =< اكتب النص وغير الخصائص التي تريد مثل من اليمين لليسار والعكس ولون خلفية النص وغيرها.

# الارتباط هو جملة أو كلمة أو حتى صورة تستطيع الضغط عليها لتـنقلك إلى صفحة أخرى أو صورة أو برنامج أو موقع آخر.

# كيف تضع الارتباط؟ أولاً حدد النص أو الصورة (التي تريد وضع الارتباط عليها) ثم اضغط من القوائم على Insert =< hyperlink (يكفيك عن هذا ctrl+K ) =< اكتب عنوان الارتباط (أو حدده من إحدى صفحاتك أومن ملفاتك أو اجعله عنوان بريد أو صفحة جديدة)

# تستطيع أيضاً تحديد الصفحة التي سيخرج عليها الارتباط مثل صفحة جديدة أو نفس الصفحة

# تستطيع تغيير خلفية الصفحة وألوان الارتباطات واسم الصفحة ووضع صورة في الخلفية بالضغط على format =< background (يكفيك عن هذا الضغط بالزر الأيمن عل الصفحة ثم الضغط على
Page Properties ) ستخرج لك هذه الصفحة

# وتستطيع أيضاً تغيير اسم الصفحة ووضع صوت في خلفيتها وتغيير هدف
الإطار الافتراضي :هي الصفحة التي يتجه إليها الرابط مثل نفس الصفحة أو في صفحة جديدة تستطيع عمل ذلك بالضغط على format =< background =< من أعلى الصفحة اخترGeneral كما هو مبين في الصورة التالية

# كما أن من المهم معرفة الأمرMargins(format =< background =< من أعلى الصفحة اخترMargins) وهو يقوم بضبط مسافة الهوامش أفقياً وعمودياً مما يعط الصفحة مظهراً جميلاً حيث تكون الأطراف موزونة تماماً مع الإطار وذلك فقط في وضع عرض 800X600 تستطيع التعرف على خصائص الأمر من خلال هذه الصورة أسفل

# ما أهمية الجداول؟ كما ذكرنا فيما سبق أهمية الجداول فإنك لا تستطيع تنظيم عملك بدونها ولن يظهر العمل بشكل مرتب إلا بمعرفة التعامل معها

# بعد أن عرفنا كيف ندرج جدول نستطيع زيادة عدد الخلايا الأفقية عن طريق ضغط زر النقلTab أو بالضغط على الجدول بالزر الأيمن ثم Insert Row أما العمودية Insert Column

# لتغــيير خصائـص الجدول اضغط عليه بالزر الأيمن ثم Table Properties تستطيع منهـــا تعيين وضع الكتابة مثلاً في وسط الخلية أو يمينها أو أعلاها,أيضاً تستطيع تحديد المسافة الفاصلة بين خليتين وتغيير لون حدود الخلايا وحدود الجدول وخلفية لجدول أو وضع صورة في خلفيتها وتحديد بعض المؤثرات على إطار الجدول

# تستطيع تطبيق ذلك على خلية واحدة فقط عن طريق الضغط عليها بالزر الأيمن ثمCell Properties

(ولأكثر من خلية واحدة ظلل الخلايا ثمCell Properties لتغير خصائص هذه الخلايا جميعاً)

# تستطيع عن طريق أدوات الجدول عمل بعض التغييرات عليه مثل دمج الخلايا وتقسيمها وإدخال خلية جديدة ومحو من خطوط الجدول وتقسيم الأعمدة والصفوف بالتساوي وغيرها انظر أدوات الجداول في هذه الصورة

# تستطيع عمل الكثير من المؤثرات على الصور مثل زيادة الإضاءة وخفضها كذلك تباينها وكذلك قلبها وتناظرها وعدم ضبطها مع الكتابة وجعلها فوق النص أو خلفه كذلك تحويلها من ملونة إلى أبيض وأسود ووضع إطار لها وجعلها أو جزء منها كرابط وجعلها مصغرة وبالنقر عليها تتحول إلى مكبرة وإدراج نص داخلها كل ذلك يكون عن طريق أدوات الصور Pictures

# ما هي الإطارات وما عملها؟ هي صفحة واحدة تقوم بضم أكثر من صفحة داخلها مثلاً صفحة يمنى وصفحة يسرى كما في بعض المواقع مثل الردادي (www.raddadi.com) مما يسهل العمل في الصفحات وبشكل منظم

# لن تستطيع عمل هذه الصفحة إلا في وضع Page يسار الصفحة ثم بالضغط على
 File => new => page => من أعلى الصفحة Frames Pages تم حدد نوع الإطار

# تستطيع عمل الكثير من الإطارات عن طريق أن الصفحة الواحدة الموجودة داخل إطار تحوي أكثر من إطار أيضاً أو عن طريق كتابتها بلغة هتمل أو تستطيع الحصول عليها من بعض المواقع التي تقوم بصناعة الإطارات مثل موقع أفضل خليجي (www.topgulf.net)

# الكود هو عبارة عن شفرة أو أوامر مبرمجة يستطيع المتصفح تحليلها وتحويلها إلى مرئيات مثلاً هناك أكواد تجعل الكتابة تخرج من أسفل إلى أعلى والعكس مما يسمح للمصمم الإبداع في تنظيم صفحته

# ينقسم الوضع التركيبي للصفحةhtml إلى قسمين هما قسم الرأس يكون بين الواصفتين<head>و<head>
وقسم الجسم ويكون بين الواصفتين <body>و<body> قسم الرأس لن يظهر في الرؤية إذا وضع الكود صحيحاً أما عند لصق الكود في الجسم (البدي) يجب التأكد من من موضع ظهوره بدقة

# بإمكانك إضافة كود إما عن طريق رؤية التصميم html والبحث عن موضع الكود الصحيح إما في الهيد أو البدي أو كليهمـا قد يكــون أحياناً بينهمــا وهناك طريقة أخرى لإضافة الكود عن طريق  Insert => Advanced => HTML ولكن لن تستطيع رؤية الكود في وضع التصميم Normal

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

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

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

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

# في حال نسيانك لبياناتك تستطيع طلبها على بريدك حيث تضع اسمك وعن

# هناك أكثر من طريقة لإرسال موقعك إلى الشركة من بينها:

1- عن طريــق برنامـج فرنت بيـــج File => Publish web => ثم تكتب اســم المستضـيف ثم تضغط  Publishثم تكتب اسمك ورقمك السري ثم موافق قد يطلب بعض الأحيان إعادة الخطوات يجب أن تتصل بالإنترنت وقت الإرسال سيقوم بإرسال جميع الصفحات وتغيير روابطها وحتى تحريرها إذا كنت قد عدلت في التصميم يعاب على هذه الطريقة البطء في الإرسال

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

3-عن طريق المتصفح حيث تستطيع الاطلاع على ملفات موقعك كما لو كنت تطلع على ملفات جهازك وتكون على النحو التالي افتح المتصفح واكتب في مكان العنوان هذا الاسم

ftp://username:password@ftp..com/

#username=اسم موقعك بدون wwwومع com  
#password=رقمك السري 
#ftp..com=الإف تي بي التابع للشركة 
 
و إليك أسماء ftp: بعض شركات الاستضافة
ftp.freeservers.com شركة فري سيرفر
ftp.xoom.com شركة إكسوم
ftp.cnnt.netشركة الأوائل العربي

# كما أرسلت ملفاتك إلى الشركة فإنك تستطيع تعديلها بنفس

# أولاً وقبل كل شيء تنظيم الموقع والاهتمام بتصميمه ووضع فكر جديدة فيه والاهتمام بما يحتويه من معلومات وأن لا تكون الصفحات ثقيلة في التحميل مما يزعج الزوار كثيراً  وفيما سبق ذكرنا أن مما يثقل الموقع الأكواد وتختلف حسب نوع الكود كذلك الصور وخاصة الكبيرة منها لذلك عند ما تريد وضع صور في موقعك يراعى أن يكون الحجم صغيراً وعلى امتداد gif أو jpg تستطيع عمل ذلك ببرامج الرسم كل ما سبق مما يجذب الزوار لموقعك ولكن كيف سيتعرفون على الموقع

# هناك كثير من الطرق لعرض موقعك على المتصفحين منها تبادل الإعلانات مع المواقع ونشر الموقع في محركات البحث العالمية ووضع واصفات الميتا تاج في صفحات موقعك والتي تسهل لمحركات البحث التعرف على موقعك سوف تجد هذه الخدمات والكثير غيرها في كثير من المواقع مثل الردادي أو دليل الخدمات المجانية من موقع الدكتور نت ( http://www.qatardr.net/free )

اطبع الصفحة