اذهب الي المحتوي
منتديات ياللا يا شباب
عاشق الصداقه

شرح انشاء موقع احترافي بالصور

Recommended Posts

كيفية عمل موقع كالمجله

 

افتح الفتوشوب ثم اضغط على file ثم new ثم ضع المقاسات المطلوبه 770 في 600 واضغط على ok .

magazeeen1.jpg

اضف طبقه جديده .

magazeeen2.jpg

اختار الاداة الموضحه بالصوره Rounded Rectangle tool ثم قم بعمل اطار بالعمل مع ترك فراغات يمين ويسار وفوت وتحت

الطبقه الأولى

magazeeen3.jpg

magazeeen4.jpg

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

التاليه >>> وأهم شي لاتنسى انك تحفظ الاستايل بعدما تنتهي من وضع القيم والحفظ يكون بالضغط على New style ومن ثم ستجده

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

magazeeen5.jpg

magazeeen6.jpg

magazeeen7.jpg

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

magazeeen8.jpg

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

magazeeen9.jpg

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

magazeeen10.jpg

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

بالنافذه كما بالصوره .

magazeeen11.jpg

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

magazeeen12.jpg

ثم اضغط على صورة الطبقه الثانيه كلك يمين واختار select layer transparency راح يتم تحديد الطبقه الثانيه بأكملها ...

magazeeen13.jpg

ثم اذهب الى قائمة select بالاعلى واختر منها inverse راح ينقلب التحديد معانا ثم اذهب الى نافذة الطبقات واضغط على الطبقه

الثالثه ((طبقة التحديد اللي عملناه بالاعلى)) ثم اذهب الى قائمة Edit واختر منها Cut راح تلاحظ ان الشكل اصبح اكثر اناقه من

السابق شاهد الصوره .

magazeeen14.jpg

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

magazeeen15.jpg

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

اعلى الى اسفل .

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen16.jpg

وسيصبح هكذا

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen17.jpg

الحين طال عمر روح لنافذة الاستايلات واضغط على الاستايل اللي حفظناه

magazeeen11.jpg

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

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen18.jpg

والحين روح للطبقه الثانيه بنافذة الطبقات واضغط كلك يمين واختار select layer transparency راح يتم تحديد الطبقه الثانيه

بأكملها ...

magazeeen13.jpg

ثم اذهب الى قائمة select بالاعلى واختر منها inverse راح ينقلب التحديد معانا ثم اذهب الى نافذة الطبقات واضغط على الطبقه

الرابعه ((طبقة التحديد اللي عملناه بالأسفل)) ثم اذهب الى قائمة Edit واختر منها Cut راح تلاحظ ان الشكل اصبح اكثر اناقه من

السابق شاهد الصوره .

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen19.jpg

والحين انتهينا من تصميم الشكل الاساسي للعمل ان شاء الله ... نروح على طووول ونضغط على قائمة file ثم save as وتظهر لك

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

الزر save كما بالرقم ((3)) .

magazeeen20.jpg

 

 

ثم ستشاهد ام تم حفظ التصميم كصوره بالمكان الذي حفظتها به >> انظر شكل التصميم ..

magazeeen21.jpg

الآن اذهب الى قائمة file واضغط على open واختار الصوره اللي حفظتها ... راح فتح التصميم كاملا بشاشة الكمبيوتر لديك !!

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

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen22.jpg

ثم نذهب الى قائمة Edit ونختار Cut

ثم اذهل لقائمة file واختر New واضغط ok !!

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

نفس مقاسات التحديد اذا قمنا بنسخه او قصّه لذلك لاعليك الا ان تضغط ok .

magazeeen23.jpg

الآن اذهب الى قائمة Edit واختر Paste وراح تشوف ان التحديد اللي حددناه وقصّيناه اصبح جاهز عندنا بدون زياده ولا نقصان

وبدون اي مشاكل .... وهو الآن بمثابة الشكل العلوي للتصميم .... ونقوم بحفظه بإسم header ونختار الامتداد jpg .

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen24.jpg

والآن نرجع لتصميمنا الاساسي ونقوم بتحديد التصميم من الأسفل ثم نذهب الى قائمة Edit ونختار Cut ثم اذهل لقائمة file واختر

New واضغط ok كما فعلنا سابقا .... ثم نذهب الى قائمة Edit ونختار Paste يعني نلصق اللي قصّيناه من التصميم ... ويصبح كما

بالصوره التاليه

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen25.jpg

ثم نقوم بحفظه بإسم footer ونختار الامتداد jpg .

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

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen26.jpg

ثم نذهب الى قائمة Edit ونختار Cut ثم اذهل لقائمة file واختر New واضغط ok ثم نذهب الى قائمة Edit ونختار Paste وينتج

معانا مثل هذا

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen27.jpg

ونقوم بحفظه بإسم bottom ونختار الامتداد jpg .

ستلاحظ الآن أن اصبح لدينا 3 صور للتصميم هي :

الشكل العلوي

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.header.jpg

شكل المنتصف

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.bottom.jpg

الشكل السفلي

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.footer.jpg

والحين بدينا بالجد !!!

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

الى نتيجه مرضيه .

عملية تقصيص التصميم

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

المتصفح لــذلك لابد من التركيز في هذه النقطه بشكل قوي .

الحين روح لقائمة window ثم اختر منها info ((نافذة مقاسات التصميم)) من خلالها تستطيع تقطيع التصميم بدقه فائقه وبأحجام

متساويه وللعلم النافذه هذي هي اللي نعتمد عليها بجميع تصاميمنا بأخذ المقاسات بدقه متناهيه ... انظر الصوره

magazeeen28.jpg

الرقم 1 هو عرض التحديد .

الرقم 2 هو ارتفاع التحديد .

اذا مافهمت شنو نقصد راح تفهم معانا حاليا .......

اضغط على قائمة File ثم open ثم افتح الصوره اللي حفظناها بإسم header تبع الشكل العلوي ... ثم اختر اداة التحديد

magazeeen29.jpg

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

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen30.jpg

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

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

Edit واختر منها Paste ... وسيظهر لنا هكذا

hl.jpg

والآن احفظ الصوره بالضغط على file ثم save as واعطه اسم hl وقائمة format اختر منها الامتداد الموضح بالصوره

magazeeen31.jpg

ثم قم بتحديد الجزء الأيمن من الشكل واعطه نفس مقاسات الجزء الأيسر اللي قلنا لك احفظها بورقه جانبيه كما هذه الصوره

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen32.jpg

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

Edit واختر منها Paste ... وسيظهر لنا هكذا

hr.jpg

ثم قم بحفظ الصوره بإسم hr .

والآن قم بتحديد جزء عريض نوعا ما من الشكل حتى يصبح بمثابة بنر للتصميم ونكتب عليه اسم موقعنا مثلا او اي شيء نريد تابع كما

بالصوره

magazeeen33.jpg

يتبع

.

.

.

 

 

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

 

Edit واختر منها Paste ... وسيظهر لنا هكذا

 

97e737e595.jpg

 

ثم قم بحفظ الصوره بإسم hb .

 

والآن بقي لدينا شيء أخير بالنسبه للشكل العلوي وهو تحديد جزء صغير حتى نضعه كخلفيه للشكل العلويه وهذا ينفعنا بأن اذا حدث

 

تمدد للتصميم لا يتشوه نهائيا ... تابع التحديد بالصوره

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen34.jpg

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

 

Edit واختر منها Paste ... وسيظهر لنا هكذا

 

hback.jpg

 

ثم قم بحفظ الصوره بإسم hback .

 

والآن انتهينا من تقطيع الشكل العلوي للتصميم واصبح لدينا 4 صور خاصه بالشكل العلوي وهي كالتالي :

 

hl.jpg

 

hr.jpg

 

97e737e595.jpg

 

hback.jpg

 

 

 

والآن بعدما انتهينا من الشكل العلوي راح نأخذ الشكل السفلي ونقطعه كما فعلنا بالشكل العلوي تماما !!!

 

اضغط على قائمة File ثم open ثم افتح الصوره اللي حفظناها بإسم footer تبع الشكل السفلي ... ثم اختر اداة التحديد

magazeeen29.jpg

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

 

الصوره

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen35.jpg

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

 

Edit واختر منها Paste ... وسيظهر لنا هكذا

 

fl.jpg

 

ثم قم بحفظ الصوره بإسم fl .

 

ثم حدد الجزء الأيمن من الشكل واعطه العرض كما بالشكل التالي :

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen36.jpg

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

 

Edit واختر منها Paste ... وسيظهر لنا هكذا

 

fr.jpg

 

ثم قم بحفظ الصوره بإسم fr .

 

والآن طال عمرك حدد جزء من الصوره ليصبح بمثابة بنر سفلي للتصميم يفيدنا في أن نكتب كلمة حفظ الحقوق او اسم المصمم او غير

 

ذلك حسب رغبتك ... تابع التحديد

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen37.jpg

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

 

Edit واختر منها Paste ... وسيظهر لنا هكذا

 

5a528c5791.jpg

 

 

يتبع

.

.

 

 

 

ثم قم بحفظ الصوره بإسم fb .

 

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

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen38.jpg

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

 

Edit واختر منها Paste ... وسيظهر لنا هكذا

 

fback.jpg

 

ثم قم بحفظ الصوره بإسم fback .

 

 

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

 

fl.jpg

 

fr.jpg

 

5a528c5791.jpg

 

 

fback.jpg

 

 

 

والحين شنو بقى لنا ما قطّــعناه ؟

بقى طال عمرك شكل المنتصف وهو أسهل مرحله من التقطيع !!!

 

اضغط على قائمة File ثم open ثم افتح الصوره اللي حفظناها بإسم bottom تبع الشكل السفلي ... ثم اختر اداة التحديد

magazeeen29.jpg

 

قم بتحديد الجزء الأيسر كما تعودنا سابقا >>> لاحظ لابد وأن يكون العرض بنفس المقاس اللي حفظناه <<< تذكــر شنو قلنا .

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen39.jpg

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

 

Edit واختر منها Paste ... وسيظهر لنا هكذا

 

left.jpg

 

ثم قم بحفظ الصوره بإسم left .

 

 

والآن قم بتحديد الشكل من الجزء الأيمن وايضا بنفس العرض كما بالصوره :

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen40.jpg

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

 

Edit واختر منها Paste ... وسيظهر لنا هكذا

 

right.jpg

 

ثم قم بحفظ الصوره بإسم right .

 

 

والآن انتهينا من تقطيع شكل المنتصف >> أرأيت ما أسهله << ونتج لدينا صورتان فقط !! وهما كالتالي :

 

left.jpg

 

right.jpg

 

 

وأبشرك الحين انتهينا من التقطيع ودووووووخة الراس ولله الحمد ... وبقى عندنا شلون نركب الصور اللي قطعناها بحيث يصبح

 

التصميم كشكل المجله .

 

لااااااااااااا تستعجل على رزقك كل شي بوقته حلوووو وجااااااي بالطريق كل شي ان شاء الله ... تابع معنا

 

الحين روح الى برنامج الفرونت بيج وافتحه

Microsoft FrontPage

اضغط كلك يمين بمنتصف الصفحه واختر خصائص الصفحه

magazeeen41.jpg

ثم من التبويب عام اكتب اسم موقعك كما مبين لك بالصوره

 

d10b39799c.jpg

 

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

magazeeen43.jpg

ثم اضفط على صورة اضافة الجداول وتضيف جدول ذو 9 خانات بحيث يكون 3 بالاعلى و 3 بالمنتصف و 3 بالاسفل شاهد الصوره

magazeeen44.jpg

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

magazeeen45.jpg

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

magazeeen46.jpg

سوف يصبح الجدول هكذا وبدون حدود

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen47.jpg

نقوم بسحب العمود الأيمن الى اقصى اليمين وايضا نسحب العمود الأيسر الى اقصى اليسار كما مبين لك بالصوره

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen48.jpg

وسيصبح شكل الجدول هكذا

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen49.jpg

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

 

بالضغط على الرمز هذا

magazeeen50.jpg

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

magazeeen51.jpg

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

magazeeen50.jpg

ثم اختر الصور اللي عطيناها اسم hl

 

والآن عزيزي حط الماوس فوق الخليه العلويه بالمنتصف ومن الأعلى اضغط على اداة التوسيط

magazeeen52.jpg

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

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen53.jpg

ثم اضغط على استعراض واختر الصوره اللي بإسم hback

magazeeen54.jpg

والحين حبيبي خلي مؤشر الماوس بالخليه اللي بالنص العلويه واضغط على اداة ادراج الصوره

magazeeen50.jpg

واختر الصوره اللي قلنا عليها تعتبر بنر للشكل العلوي وتكتب عليها اسم موقعك >>> هل تتذكرها ؟؟

تحمل الاسم hb قم باختيارها واضغط على ادراج

والآن انتهينا من تركيب صور الشكل العلوي وستظهر لك كما الشكل التالي :

 

 

 

 

 

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.06c55548b1.jpg

 

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

 

right وهذه الخليه تفيدنا بأن (( مهما زاد ارتفاع الصفحخ سيتم تعبأة الخليه بهذه الصوره )) .

 

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

 

بإسم left .

وشاهد كيف أصبح التصميم :

 

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.bee18e3756.jpg

 

والآن نذهب للخليه اليمنى بالأسفل ونحط الماوس فوق الخليه ونضغط بالماوس ضغط واحده حتى يصبح المؤشر بداخل الخليه ثم نختار

 

اداة ارداج الصور

magazeeen50.jpg

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

 

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.4af5b30a0b.jpg

 

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

 

اضغط على اداة ادراج الصور

magazeeen50.jpg

ثم اختر الصوره اللي تحمل الاسم fl واضغط على ادراج ... وشاهد الآن كيف أصبح الشكل :

 

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.c66801aaca.jpg

 

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

magazeeen52.jpg

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

 

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

 

مهما تمدد التصميم او كبرت مقاسات الشاشه راح يتمدد تلقائيا وبدون مشاكل ان شاء الله >>> شاهد الصوره :

 

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.c07efd1ef1.jpg

 

 

بتبع

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

الف شكر ليك يا تامر على الشرح الجميل دا

يعطيك العافيه على الموصوع

تسلم ايدك

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

 

 

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

magazeeen50.jpg

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

 

المصمم او المبرمج وهكــذا ... شاهد الآن كيف أصبح شكل التصميم

 

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.d143debb7f.jpg

 

والآن ولله الحمد انتهينا من تركيب الإطار كاملا للمجله >>> وراح تلاحظ بأن لون الصفحه أبيض ومغاير عن لون التصميم !! فما الحل ؟

 

افتح الفوتوشوب ثم افتح التصميم اللي عملناه ثم من صندوق الأدوات بالاسفل اضغط على اداة ادارة الألوان التي تحمل الرقم 1 بالصوره

 

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

 

الكود المحدد بالصوره التاليه

magazeeen61.jpg

ثم اذهب للفرونت بيج بالصفحه الخاصه بتصميمنا واضغط على HTML

magazeeen62.jpg

ستجد الكود التالي

bgcolor="#FFF7DE"

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

لاحظ أن كود اللون هو المحدد باللون الأزرق بالصوره التاليه :

 

38cfc2af5e.jpg

 

ثم ارجع لتصميمنا وستلاحظ انه تم تغيير لون الخلفيه

 

 

 

 

 

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.33606e4d87.jpg

 

ملاحظه : اذا لم تجد كود اللون تستطيع انت كتابته بالشكل التالي :

bgcolor="#FFF7DE"

وضعه بعد كلمة BODY العلويه بحيث سيصبح هكذا كامل الكود :

 

 

والآن اصبح الاطار جاهزا وأصبحت الألوان متناسقه مع صور التصميم ... كلااااااااام حلو وجميل ويشجع اننا نكمل مع بعض التطبيق .

 

 

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

 

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

 

بس هذا !!

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

 

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

magazeeen65.jpg

 

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

magazeeen66.jpg

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

 

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

magazeeen11.jpg

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

magazeeen67.jpg

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

 

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

magazeeen20.jpg

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

 

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

magazeeen68.jpg

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

 

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

magazeeen69.jpg

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

 

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

magazeeen70.jpg

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

 

Paste .

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

 

m1.jpg

 

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

magazeeen71.jpg

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

 

Paste .

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

 

m2.jpg

 

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

magazeeen72.jpg

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

 

Paste .

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

 

m3.jpg

 

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

 

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

magazeeen73.jpg

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

magazeeen45.jpg

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

magazeeen46.jpg

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

 

 

 

 

magazeeen75.jpg

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

magazeeen76.jpg

وستلاحظ انه تم تقسيم الخليه اللي بالمنتصف الى خليتان !!

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

 

magazeeen78.jpg

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

 

magazeeen73.jpg

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

magazeeen46.jpg

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

 

magazeeen50.jpg

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

magazeeen81.jpg

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

 

بإسم m3 .

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

 

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

وسيصبح هكذا

magazeeen82.jpg

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

magazeeen83.jpg

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

 

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

 

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

m1.jpg

 

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

 

التاليه

magazeeen84.jpg

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

 

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

 

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

 

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

 

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

magazeeen85.jpg

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

magazeeen86.jpg

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

magazeeen52.jpg

واكتب اي عباره مثلا القائمة الرئيسيه .

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

 

 

 

 

 

 

469282bd57.jpg

 

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

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.f44b639316.jpg

 

راح أقولك أبشر والحين نسوي الإطارات مع بعض :

 

روح للفوتوشوب وافتح التصميم اللي سويناه

magazeeen65.jpg

ثم اختر هذه الأداة

magazeeen66.jpg

ثم اضف طبقه جديده ثم قم برسم مستطيل وقم بإعطائه الاستايل اللي حفظناه

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

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen89.jpg

 

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

 

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

magazeeen20.jpg

ثم قم بفتح الصوره اللي حفظناها للتو من الخيار file ثم open ثم اختر الصوره اللي حفناها .

ثم اختر اداة التحديد

magazeeen29.jpg

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

(( لاحظ ان التحديد يعطي فراغ بسيط من اليمين واليسار وذلك لظهور الظل اللي بالإطار واذا لم يكن هنا ظل للاطار قم بتحديد المستطيل

 

بدون ترك فراغات يمين ويسار المستطيل .. ويفضل ترك فراغ بسيط من اليمين واليسار كما بالصوره التاليه ))

magazeeen90.jpg

ثم

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

 

Paste ... وستلاحظ انه تم لصق المستطيل

 

ثم قم بتقسيم المستطيل الى 3 أجزاء (( تقطيع )) علوي وسفلي ومنتصف

magazeeen91.jpg

 

magazeeen92.jpg

 

magazeeen93.jpg

 

ثم قم بتحديد الجزء العلوي من اليسار (( لا بد من فتح نافذة info علشان نقدر نعيّن مقاسات التحديد وما يهمنا بالتحديد هو العرض فقط

 

احفظه بذاكرتك لأننا راح نرجع له بالتقصيص للمستطيل ))

magazeeen94.jpg

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

 

Paste ... ثم احفظ الصوره بأي إسم يدل على الصوره .

ثم حدد الجزء الأيمن بنفس عرض التحديد اللي عملناه ثم قم بقصه وحفظه بإسم يدل عليه .

وأيضا في المنتصف حدد عرض بسيط من الصوره حتى يصبح خلفيه وقم بقصه وحفظه بإسم يدل عليه .

وبعد ان قمت بقص الصوره العلويه للمستطيل نتج لي هذه الصور

 

frame_left_up.jpg

 

frame_right_up.jpg

 

frame_bottom_up.jpg

 

 

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

 

بأسماء تدل عليها . (( ولا تنسى أن عرض التحديد يجب ان يكون متساوي )) .

وقمت بتقصيص الجزء السفلي ونتج لي هذه الصوره

 

frame_left_down.jpg

 

frame_right_down.jpg

 

frame_bottom_down.jpg

 

 

ثم اذهب للصوره اللي بالمنتصف >>> ولا نحتاج منها سوى قص الجهه اليمنى واليسرى فقط (( ولاحظ ان العرض لابد أن يكون هو

 

نفسه بتحديدنا اللي حفظناه بذاكرتنا )) .

وقمت بالقص ونتج لي التالي :

 

frame_left.jpg

 

frame_right.jpg

 

 

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

 

تجعل المؤشر بداخله

 

 

 

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.

d4c63c89ae.jpg

 

ثم اضف جدول ذو 3 أعمده رأسيه و 3 أعده أفقيه

magazeeen44.jpg

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

magazeeen45.jpg

ثم اعمل القيم كما مبين لك بالصوره

magazeeen46.jpg

ثم اسحب العمود الأيمن الى أقصى اليمين واحسب العمود الأيسر الى أقصى اليسار وسيظهر كهذا

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.

b12d8d8e5c.jpg

ثم قم بتركيب الصور كما فعلنا سابقا وكل صوره بمكانها المناسب (( ألم أقل لك أن تضع اسم يدل على الصوره ))

شاهد كيف قمنا بتركيب الصور بالجدول

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.

c454cb94b4.jpg

والآن نقول لنفسنا هنئا لكي لقد قمتي بعمل شيء جميل ...

 

في أعلى الأطار أكتب مسمى لمحتوى الإطار >> مثلا (( جديد الموقع )) وفي المنتصف أكتب المحتويات كما في هالصوره :

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.

e60e1ef05a.jpg

 

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

 

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

 

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

فهو يعني سطر بحيث سيتم الفصل بين

 

القائمتين بسطر واحد )) ... شاهد معي الطريقه

 

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.

d1e8d130ed.jpg

 

ثم بنفس الطريقه تستطيع اضافة اطارات .

 

وبعد إضافة القوائم والإطارات اللازمه لموقعنا ... شاهد كيف اصبح الآن

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.

5e018dced3.jpg

ولاحظ أن هناك خليه فارغه في الأعلى وايضا بالأسفل >>>

أما العلويه فتستطيع وضع صور للإعلانات بها او اي روابط او نصوص محببه لك .

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

 

 

وبهذا انتهينا من التصميم والتركيب بقي لدينا حفظ العمل كصفحة ويب HTM او HTML كلتا الجملتين تفي بالغرض ..

 

 

بعد الانتهاء من اضافة القوائم والاطارات اذهب للقائمة ملف من أعلى الفرونت بيج ثم اختر حفظ بإسم وستظهر لك النافذه التاليه :

magazeeen101.jpg

 

ثم سيتم حفظ الصفحه بنفس الإسم index .

 

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

 

 

ألف مبرووووووك عليك المجله الحلوه .

 

 

وإنتهينا ولله الحمد من الدرس المتعب والجميل ومن طبّق هذا الدرس سأبصم له بالعشره انه قادر على تصميم استايل للمنتدى بكل

 

سهوله او تصميم استايل لأي سكربت يواجهه دون صعووووووبات ... لأن أصعب التصاميم وأكثرها دقه هي التصميم كالمجله حيث

 

يتطلب صبرا كثيرا ودقه بالعمل مع شوية احترافيه .

 

وتمنياتي لكم بالتوفيق

 

ودعواتكم ... منقول بتصرف مع الشكر لأبوليالي

وأرجو أن ينال إعجابكم .. وتجدون منه الفائده المرجوه

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

الله ينور يا كرينك !!!!!!! :D

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

ميه ميه يا رجاله والله حاجه كده بالصلى على النبى

 

ربنا يوفقنا جميعا................

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر
الله ينور يا كرينك !!!!!!! :D

 

وعليك حبيبى العارف .. شرفنى مرورك يا سكر :llll:

 

ميه ميه يا رجاله والله حاجه كده بالصلى على النبى

 

ربنا يوفقنا جميعا................

 

عليه الصلاة والسلام ..

وشكراً لمرورك وردك يا منسى .. ربنا ما يحرمنيش من ردودك حبيبى :llll:

 

شكرا يا مان

 

العفو أخى الغالى ... وأهلاً بيك فى المنتدى :llll: .. ان شاء الله تكون استفدت منه وعجبك .. :llll:

وياريت نشوف مشاركاتك دايماً .. :smile:

 

:llll: تحياتى :llll:

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

وإياكم أخى الحبيب ..

نتمنى فقط أن ننال رضاؤكم

 

تحياتى لك :red:

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

واياكم حبيبى .. وكل سنه وانت طيب

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

شكرا لك اخي عاشق الصداقة

 

لكن عندي مشكلة الصور معظمها مش ظاهر *** الظاهر انها متشالة من السيرفر بتاعها

تم تعديل بواسطه egycool

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

موضوع عبقري بجد احمد

 

 

 

ربنا يكرمك ديما و يجعل خدمتك لأخوانك في ميزان حسناتك

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

رااائج جداا يا اخي

تسلم ايديك

بارك الله فيك

و اسال الله ان يزيدك من بحور علمه و معرفته

تقبل اجمل تحياتي

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

بارك الله فيكم جميعاً للمرور

ومرحباً بأحبائى / ابراهيم محمد ، sosdes بالمنتدى .. أتمنى ان تجدوا الفائده وتفيدو بما لديكم

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

وشكراً جزيلاً لمروركم ودعاؤكم

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

 

 

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

magazeeen50.jpg

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

 

المصمم او المبرمج وهكــذا ... شاهد الآن كيف أصبح شكل التصميم

 

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.d143debb7f.jpg

 

والآن ولله الحمد انتهينا من تركيب الإطار كاملا للمجله >>> وراح تلاحظ بأن لون الصفحه أبيض ومغاير عن لون التصميم !! فما الحل ؟

 

افتح الفوتوشوب ثم افتح التصميم اللي عملناه ثم من صندوق الأدوات بالاسفل اضغط على اداة ادارة الألوان التي تحمل الرقم 1 بالصوره

 

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

 

الكود المحدد بالصوره التاليه

magazeeen61.jpg

ثم اذهب للفرونت بيج بالصفحه الخاصه بتصميمنا واضغط على HTML

magazeeen62.jpg

ستجد الكود التالي

bgcolor="#FFF7DE"

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

لاحظ أن كود اللون هو المحدد باللون الأزرق بالصوره التاليه :

 

38cfc2af5e.jpg

 

ثم ارجع لتصميمنا وستلاحظ انه تم تغيير لون الخلفيه

 

 

 

 

 

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.33606e4d87.jpg

 

ملاحظه : اذا لم تجد كود اللون تستطيع انت كتابته بالشكل التالي :

bgcolor="#FFF7DE"

وضعه بعد كلمة BODY العلويه بحيث سيصبح هكذا كامل الكود :

 

 

والآن اصبح الاطار جاهزا وأصبحت الألوان متناسقه مع صور التصميم ... كلااااااااام حلو وجميل ويشجع اننا نكمل مع بعض التطبيق .

 

 

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

 

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

 

بس هذا !!

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

 

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

magazeeen65.jpg

 

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

magazeeen66.jpg

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

 

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

magazeeen11.jpg

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

magazeeen67.jpg

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

 

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

magazeeen20.jpg

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

 

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

magazeeen68.jpg

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

 

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

magazeeen69.jpg

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

 

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

magazeeen70.jpg

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

 

Paste .

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

 

m1.jpg

 

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

magazeeen71.jpg

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

 

Paste .

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

 

m2.jpg

 

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

magazeeen72.jpg

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

 

Paste .

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

 

m3.jpg

 

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

 

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

magazeeen73.jpg

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

magazeeen45.jpg

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

magazeeen46.jpg

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

 

 

 

 

<A class=bbc_url title="ربط خارجى" href="

http://www.sakr1.com/vb/ext.php?ref=http://www.l5s.net"'>http://www.sakr1.com/vb/ext.php?ref=http://www.l5s.net"'>http://www.sakr1.com/vb/ext.php?ref=http://www.l5s.net"'>http://www.sakr1.com/vb/ext.php?ref=http://www.l5s.net" rel="nofollow external">magazeeen75.jpg

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

magazeeen76.jpg

وستلاحظ انه تم تقسيم الخليه اللي بالمنتصف الى خليتان !!

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

 

<A href="http://www.sakr1.com/vb/ext.php?ref=http://www.l5s.net" target=_blank>magazeeen78.jpg

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

 

<A href="http://www.sakr1.com/vb/ext.php?ref=http://www.l5s.net" target=_blank>magazeeen73.jpg

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

magazeeen46.jpg

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

 

<A href="http://www.sakr1.com/vb/ext.php?ref=http://www.l5s.net" target=_blank>magazeeen50.jpg

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

magazeeen81.jpg

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

 

بإسم m3 .

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

 

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

وسيصبح هكذا

magazeeen82.jpg

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

magazeeen83.jpg

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

 

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

 

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

m1.jpg

 

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

 

التاليه

magazeeen84.jpg

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

 

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

 

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

 

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

 

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

magazeeen85.jpg

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

magazeeen86.jpg

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

magazeeen52.jpg

واكتب اي عباره مثلا القائمة الرئيسيه .

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

 

 

 

 

 

 

469282bd57.jpg

 

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

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.f44b639316.jpg

 

راح أقولك أبشر والحين نسوي الإطارات مع بعض :

 

روح للفوتوشوب وافتح التصميم اللي سويناه

magazeeen65.jpg

ثم اختر هذه الأداة

magazeeen66.jpg

ثم اضف طبقه جديده ثم قم برسم مستطيل وقم بإعطائه الاستايل اللي حفظناه

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

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.magazeeen89.jpg

 

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

 

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

magazeeen20.jpg

ثم قم بفتح الصوره اللي حفظناها للتو من الخيار file ثم open ثم اختر الصوره اللي حفناها .

ثم اختر اداة التحديد

magazeeen29.jpg

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

(( لاحظ ان التحديد يعطي فراغ بسيط من اليمين واليسار وذلك لظهور الظل اللي بالإطار واذا لم يكن هنا ظل للاطار قم بتحديد المستطيل

 

بدون ترك فراغات يمين ويسار المستطيل .. ويفضل ترك فراغ بسيط من اليمين واليسار كما بالصوره التاليه ))

magazeeen90.jpg

ثم

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

 

Paste ... وستلاحظ انه تم لصق المستطيل

 

ثم قم بتقسيم المستطيل الى 3 أجزاء (( تقطيع )) علوي وسفلي ومنتصف

magazeeen91.jpg

 

magazeeen92.jpg

 

magazeeen93.jpg

 

ثم قم بتحديد الجزء العلوي من اليسار (( لا بد من فتح نافذة info علشان نقدر نعيّن مقاسات التحديد وما يهمنا بالتحديد هو العرض فقط

 

احفظه بذاكرتك لأننا راح نرجع له بالتقصيص للمستطيل ))

magazeeen94.jpg

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

 

Paste ... ثم احفظ الصوره بأي إسم يدل على الصوره .

ثم حدد الجزء الأيمن بنفس عرض التحديد اللي عملناه ثم قم بقصه وحفظه بإسم يدل عليه .

وأيضا في المنتصف حدد عرض بسيط من الصوره حتى يصبح خلفيه وقم بقصه وحفظه بإسم يدل عليه .

وبعد ان قمت بقص الصوره العلويه للمستطيل نتج لي هذه الصور

 

frame_left_up.jpg

 

frame_right_up.jpg

 

frame_bottom_up.jpg

 

 

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

 

بأسماء تدل عليها . (( ولا تنسى أن عرض التحديد يجب ان يكون متساوي )) .

وقمت بتقصيص الجزء السفلي ونتج لي هذه الصوره

 

frame_left_down.jpg

 

frame_right_down.jpg

 

frame_bottom_down.jpg

 

 

ثم اذهب للصوره اللي بالمنتصف >>> ولا نحتاج منها سوى قص الجهه اليمنى واليسرى فقط (( ولاحظ ان العرض لابد أن يكون هو

 

نفسه بتحديدنا اللي حفظناه بذاكرتنا )) .

وقمت بالقص ونتج لي التالي :

 

frame_left.jpg

 

frame_right.jpg

 

 

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

 

تجعل المؤشر بداخله

 

 

 

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.

d4c63c89ae.jpg

 

ثم اضف جدول ذو 3 أعمده رأسيه و 3 أعده أفقيه

magazeeen44.jpg

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

magazeeen45.jpg

ثم اعمل القيم كما مبين لك بالصوره

magazeeen46.jpg

ثم اسحب العمود الأيمن الى أقصى اليمين واحسب العمود الأيسر الى أقصى اليسار وسيظهر كهذا

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.

b12d8d8e5c.jpg

ثم قم بتركيب الصور كما فعلنا سابقا وكل صوره بمكانها المناسب (( ألم أقل لك أن تضع اسم يدل على الصوره ))

شاهد كيف قمنا بتركيب الصور بالجدول

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.

c454cb94b4.jpg

والآن نقول لنفسنا هنئا لكي لقد قمتي بعمل شيء جميل ...

 

في أعلى الأطار أكتب مسمى لمحتوى الإطار >> مثلا (( جديد الموقع )) وفي المنتصف أكتب المحتويات كما في هالصوره :

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.

e60e1ef05a.jpg

 

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

 

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

 

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

فهو يعني سطر بحيث سيتم الفصل بين

 

القائمتين بسطر واحد )) ... شاهد معي الطريقه

 

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.

d1e8d130ed.jpg

 

ثم بنفس الطريقه تستطيع اضافة اطارات .

 

وبعد إضافة القوائم والإطارات اللازمه لموقعنا ... شاهد كيف اصبح الآن

wol_error.gifتم تصغير الصوره ,لمشاهدة الصوره بحجمها الأصلي أضغط هنا.

5e018dced3.jpg

ولاحظ أن هناك خليه فارغه في الأعلى وايضا بالأسفل >>>

أما العلويه فتستطيع وضع صور للإعلانات بها او اي روابط او نصوص محببه لك .

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

 

 

وبهذا انتهينا من التصميم والتركيب بقي لدينا حفظ العمل كصفحة ويب HTM او HTML كلتا الجملتين تفي بالغرض ..

 

 

بعد الانتهاء من اضافة القوائم والاطارات اذهب للقائمة ملف من أعلى الفرونت بيج ثم اختر حفظ بإسم وستظهر لك النافذه التاليه :

magazeeen101.jpg

 

ثم سيتم حفظ الصفحه بنفس الإسم index .

 

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

 

 

ألف مبرووووووك عليك المجله الحلوه .

 

 

وإنتهينا ولله الحمد من الدرس المتعب والجميل ومن طبّق هذا الدرس سأبصم له بالعشره انه قادر على تصميم استايل للمنتدى بكل

 

سهوله او تصميم استايل لأي سكربت يواجهه دون صعووووووبات ... لأن أصعب التصاميم وأكثرها دقه هي التصميم كالمجله حيث

 

يتطلب صبرا كثيرا ودقه بالعمل مع شوية احترافيه .

 

وتمنياتي لكم بالتوفيق

 

ودعواتكم ... منقول بتصرف مع الشكر لأبوليالي

وأرجو أن ينال إعجابكم .. وتجدون منه الفائده المرجوه

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

السلام عليكم أخي الناشر الكريم وين الصور

كاتبين الصور مصغرة اضغط على الرابط للتكبير ولما نضغط على الرابط بيدخلنا على موقع الصقر وتعا دور إذا بتلاقي الصور

كيف أشوف الصور مشان أقدر أستفيد أكثر من الموضوع جزاك الله خيراً

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

مرحباً أخى الفاضل (شام) ،،

الموضوع منقول كما هو موضح بأسفل الموضوع :

 

منقول بتصرف مع الشكر لأبوليالي

 

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

تحيتى

شارك هذه المشاركه


رابط المشاركه
شار ك علي موقع اخر

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

يجب ان تكون عضوا لدينا لتتمكن من التعليق

انشئ حساب جديد

سجل حسابك الجديد لدينا في الموقع بمنتهي السهوله .

سجل حساب جديد

♥ تسجيل دخول ♥

هل تمتلك حساب بالفعل ؟ سجل دخولك من هنا.

♥ سجل دخولك الان ♥

×
×
  • اضف...

Important Information

By using this site, you agree to our Terms of Use, اتفاقيه الخصوصيه, قوانين الموقع, We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue..