(4) تصميم موقع كالمجله بكل دقه واحتراف ، كيفية عمل موقع


(4) تصميم موقع كالمجله بكل دقه واحتراف ، كيفية عمل موقع


تكملة للجزء الثالث ...


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

وايضا اين اطار قائمة المحتوياااااات ؟

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

روح للفوتوشوب وافتح صورة التصميم اللي عملناه أول شي



ثم اختر الأداة التاليه :



ثم قم بعمل مربع ليس كبير ولا صغير يعني متوسط الحجم حتى يكون بمثابة شكل للقائمه ثم نعطيه خصائص الاستايل اللي حفظناه

بنافذة الاستايلات



وسيصبح شكل المربع كهذا



ثم قم بحفظ العمل بالضعط على File ثم save as ثم قم بتسمية الصوره اي اسم ومن امام كملة format اختر الامتداه الموضح لك

بالصوره التاليه بالرقم 1 ثم اضغط على save



ثم بعد ذلك افتح الصوره اللي حفظتها بالضغط على File ثم Open ثم اختر الصوره اللي قمت بحفظها للتو ... ثم من صندوق الأدوات

اختر أداة التحديد وقم بتحديد المربع اللي عملناااااااه بمثل هالتحديد



ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ولا تغيير بالمقاسات نهائيا ثم اضغط على

قائمة Edit واختر منها Paste وراح تشوف بأن تم لصق المربع اللي حددناه كما هو



والآن طال عمرك نقوم بتقصيصه ... والتقصيص للمربع من اسهل ما يكون !!

قم بتحديد المربع من الأعلى



ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها

Paste .
ثم قم بحفظ الصوره بإسم m1 ومن امام خيار format اختر الامتداد jpg .



ثم قم بتحديد المربع من الاسفل



ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها

Paste .
ثم قم بحفظ الصوره بإسم m2 ومن امام خيار format اختر الامتداد jpg .



ثم قم بتحديد المربع من الوسط



ثم من قائمة Edit اختر Cut ثم اذهب الى قائمة File واختر New واضغط على ok مباشرة ثم اضغط على قائمة Edit واختر منها

Paste .
ثم قم بحفظ الصوره بإسم m3 ومن امام خيار format اختر الامتداد jpg .



الآن انتهينا من تصميم القائمه ... نرجع الى الفرونت بيج الى صفحتنا اللي قمنا بتركيب التصميم عليها

نضغط بالخليه اللي بالمنتصف حتى يصبح المؤشر بداخله ثم نضيف جدول ذو 3 صفوف



ثم نضغط كلك يمين بداخل الجدول ونختار خصائص الجدول



وتعمل القيم التاليه



سيصبح شكل هكذا



ثم بالخليه اللي بالنص اضغط كلك يمين واختر منها تقسيم الخلايا



ثم ستظهر لك نافذه اعمل كما مبين لك بالنافذه التاليه ثم اضغط موافق



وستلاحظ انه تم تقسيم الخليه اللي بالمنتصف الى خليتان !!
ثم قم بسحب العمود اللي يفصل الخليتان الى اليمين حتى يصبح عندنا كما بالشكل التالي :



ثم اضغط كلك يمين بالخليه اليمنى اللي بالمنتصف واختر منها خصائص الخليه ثم ستظهر لك نافذه من امام الخيار محاذاة عموديه اختر

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



والآن اجعل المؤشر بداخل الخليه اليمنى اللي بالمنتصف



ثم اضف جدول ذو 3 خلايا



ثم اضغط كلك يمين بداخل الجدول واختر خصائص الجدول واعمل كما مبين لك



ثم ستلاحظ انه اصبح هكذا



والآن بنفس الجدول ومن داخل الخليه السفليه اختر اداة ادراج الصور



ثم اختر الصوره اللي حفظناها عندما قمنا بتقصيص المربع تبع القائمه اللي يحمل الاسم m2 سيصبح هكذا



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

بإسم m3 .
ثم ستلاحظ انه تم تعبئة الخليه بكاملها واصبحت الصوره خلفيه للخليه ومهما اصبح تمدد بالخليه فلن يظهر لك سوى الصوره اللي

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



والآن من الخليه العلويه اضغط كلك يمين من داخلها واختر خصائص الخليه ثم اضغط استعراض واختر الصوره اللي تحمل الاسم m1



جميل جدا >>> ولــكن لو تلاحظ ان الخليه العلويه فيها شي غلط !!! ان ارتفاعها مو نفس ارتفاع الصوره الاصليه !!

تعال معااااااي علشان نكتشف أين الخلل والمشكله ....

اذهب للفوتوشوب ثم اضغط على القائمه File ثم اختر Open ثم افتح الصوره اللي تحمل الاسم m1



بعد فتح الصوره اضغط على القائمة image ثم اختر الخيار Image Size ثم ستظهر لك نافذة حجم الصوره ومقاساتها كما الصوره

التاليه



وما يهمنا بهذه النافذه هو اكتشاف ارتفاع الصوره فقط !!! من الخيار Height المظلل ستجد مقاس ارتفاع الصوره المطلوبه ولاحظ ان

مقاس ارتفاع الصوره لدينا الآن هو 53 ولاحـــظ أيضا أنه لابد من وضع الخيار في القائمه اللي على جنب على pixles ....

كل ما عليك هو حفظ رقم ارتفاع الصوره في ذاكرتك !!

والآن نرجع للفرونت بيج والى الخليه العلويه ونضغط كلك يمين بداخلها ثم نختار خصائص الخليه ثم من امام الخيار تحديد الإرتفاع نضع

علامة صح ونكتب الرقم اللي حفظناه بذاكرتنا ثم نقوم بتأشير الخيار بالبكسل ... كما بالصوره



ثم شاهد ماذا حدث



والآن اترك المؤشر داخل الخليه واضغط على اداة التوسيط



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



والحين أكيد راح تسأل >> المجلة غالبا يصير لها اطارات بداخل الصفحه ؟؟ وللحين مااااااا شفنا هالاطارات ؟!





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









...........