دورة في تصميم موقع بالفوتو شوب والفرونت بيج

[alsoq]

السلام عليكم

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

سوف ابداء في الدرس اليوم ان شاء الله

اخوكم
السوق

[راعي الدتسن]

جزاك الله خيرر ..
متابع

[alsoq]

السلام عليكم
اول شي قومو بتنزيل الفرونت بيج من النت
جهزو الفوتو شوب

بعد تنزيل الفرونت بيج نختار من اليمين

http://qtr-design.com/alsoq/d1.jpg

ختار من الاشكل ما يناسبنا للتصميم

http://qtr-design.com/alsoq/d2.jpg

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

نجيب ورقة و قلم و نخطط شكل موقعنا برسم توضيحي مثل هذه المخططات

http://my.eqla3.com/psd/memo/website%20school/layout.jpg

( تصميم الموقع الثابت )

http://my.eqla3.com/psd/memo/website%20school/memosite1.jpg

صمموا بهذا الشكل / هيدر ، فوتر ، ازرار ، شريط أخبار ، مربع أساسي ، خلفية ، ممكن تضيفوا مربع البحث
لا تكثروا أشياء كثيره بالهيدر و الفوتر يعني لو بس الأسم بشكل مرتب و بالآخر حفظ حقوق التصميم
مربع الأساسي خلوه يكون كبير بشكل يناسب ان الكلام بعدين راح ينعرض فيه

( تصميم الموقع المتمدد )

http://www.monsterup.com/upload/1273265169111.jpg

درس اليوم تكمله فوتوشوب ( التقطيع )
بسيط جداً خاصه للي صمموا ع نفس توزيع تصميمي
التقطيع يكون نفس الشي

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

( تقطيع الموقع الثابت و المتمدد )

http://www.monsterup.com/upload/1273552279743.jpg

آخر شي كاتبه نحفظ خلفية كل موقع بمجلد الصور الخاصه فيه
المتمدد إحفظوها بس بالمتمدد / الثابت إحفظوها بالإثنين عشان الدرس الجاي بنصمم مدخل و ندرجها خلفيه للموقعين زي المواقع اللي إضفتها هنا ( الإثنين لهم نفس المدخل و مستخدمين نفس الصور )
لا حد يصمم مدخل هالحين خلوه للدرس الجاي بس بوضح كبف نحفظ الخلفيات و وين


درس اليوم تكمله للتصميم شي إضافي مو أساسي بالموقع
تصميم المدخل فقط شكل تجميلي + خلفية ( بدون تقطيع )
و اليوم كمان بنبدأ نشتغل ع الفرونت بيج عشان نربط درس اليوم بالملف اللي قطعناه من درس 2

و الناتج يكون عندنا مجلدين للموقعين كل مجلد فيه صفحة الويب و مجلد image


تصميم مدخل الموقع intro

http://my.eqla3.com/psd/memo/website%20school/intro_des.jpg
هنا فائدة الخلفية اللي قلت لكم إحفظوها بالمجلدين
ع إعتبار تصميم الموقعين نفس اللون و الشكل فتصميم المدخلين بيكون نفسه
نحفظ صورة المدخل و الخلفيه بمجلد الصور الخاص بكل موقع

--

تنسيق المدخل بالفرونت بيج و ربطه بواجهة الموقع

http://my.eqla3.com/psd/memo/website%20school/intro_front.jpg

ضروري يكون تقطيعنا بالدرس اللي فات 100 % عشان نربط الصفحه
و ضروري صفحة المدخل نسميها index
و طبقوا نفس الشي للموقعين

بداية فعليه بالفرونت بيج

تنسيق الموقع الثابت بالفرونت بيج
http://my.eqla3.com/psd/memo/website%20school/openinfrontpage1.jpg

نحفظ على نفس صفحة الواجهه بمجلد الثابت لأنا ربطناها بالمدخل

تنسيق الموقع المتمدد بالفرونت بيج

http://my.eqla3.com/psd/memo/website%20school/openinfrontpage2.jpg

نحفظ على نفس صفحة الواجهه بمجلد المتمدد لأنا ربطناها بالمدخل

و المسارات و اسماء الصفحات و اي شي نحفظه بأسماء إنجليزية


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

http://my.eqla3.com/psd/memo/website%20school/mainframe1.jpg

لمحة سريعه الصفحة الفرعية
http://my.eqla3.com/psd/memo/website%20school/webpage1.jpg

إعملوا بس صفحة main هي اللي تهمنا بهذا الدرس
بشرح الفديو موجود أوضح

البرنت يكون من المتصفح و كثروا كلام عشان يظهر السكرول بار
ضروري و مهم تحفظوا الصفحة اللي عملناها بإسم انجليزي مثل انا كتبت main
و بعد الربط إحفظوا على نفس الواجهه


--

مربع كلمة الموقع الرئيسية للموقع المتمدد

http://my.eqla3.com/psd/memo/website%20school/mainframe2.jpg

[بـارود]

الفرونت بيج ؛
من أمتع البرامج اللي اشتغلت عليها قبل
لكن الحين نسيت كل شي :secret:

مشكور أخوي السوق على الشرح ..

[alsoq]

يتابع تكمله السابق



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

ربط الصفحات الفرعية بواجة الموقع الثابت و المتمدد

http://my.eqla3.com/psd/memo/website%20school/linkwebpage.jpg

درس اليوم مكونات الويب
( اضافة شريط أخبار متحرك + مربع للبحث + طريقة إدراج ملفات الفلاش )

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

مكونات الويب [ شريط الأخبار ]

http://my.eqla3.com/psd/memo/website%20school/news.jpg

مكونات الويب [ مربع البحث ]

http://my.eqla3.com/psd/memo/website%20school/Search.jpg

مكونات الويب [ إدراج الفلاش ]

http://my.eqla3.com/psd/memo/website%20school/flash.jpg

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


تلوين السكرول بار ( يوافق متصفح إكسبلور )

http://my.eqla3.com/psd/memo/website%20school/Scrollbar.jpg

الكود المستخدم

<STYLE>BODY {
scrollbar-base-color: #306490;
scrollbar-arrow-color: #6292ba;
scrollbar-track-color: #6292ba;

}

تغيير شكل الماوس ( يوافق متصفح إكسبلور )

http://my.eqla3.com/psd/memo/website%20school/cursors.jpg

الموقع للماوس
http://myspacecursor.net/

تركيب ساعة فلاشية

http://my.eqla3.com/psd/memo/website%20school/clock.jpg

اختر اي موقع ساعات فلاش

http://www.wretch.cc/blog/isamarabbit

تركيب عداد الزوار

http://my.eqla3.com/psd/memo/website%20school/webcounter.jpg

http://amazingcounters.com/

اخوكم
السوق

[alsoq]

ولو فيه اي اسؤال اطرحه بنفس الموضوع للفاده للجميع

[ابو صقر]

الله يجزاك الخير

[Abo Ahmed]

ولو فيه اي اسؤال اطرحه بنفس الموضوع للفاده للجميع

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

تحياتي، وبارك الله فيك..

[alsoq]

الفرونت بيج 2003
الفوتو شوب صدار 8 الفوتو شوي ما تغير الجديد فيه فلاتر زياده واحلى

[حميداني]

موضوع جميل السوق , جزاك الله خير على هالمجهود الواضح

[Abo Ahmed]

الفرونت بيج 2003
الفوتو شوب صدار 8 الفوتو شوي ما تغير الجديد فيه فلاتر زياده واحلى

مشكورين طال عمرك..

[ولد العلي]

جزاك الله خير

[blk_tiger]

مشكووور جزاك الله خير