كيف تصنع صفحة وب Interface

شرح برامج » دروس في الفتوشوب والفلاش » كيف تصنع صفحة وب Interface

كيف تصنع صفحة وب Interface			أضيف في: 22-3-1427هـ
تصميم المواقع بالفوتوشوب .. الدرس اليوم راح يكون سهل بالنسبه لمستخدمين الفوتوشوب .. و يحتاج شوي مهارة و دراية بالفرونت بيج اذا امكن مع انه يكتفي في الحدود البسيطة بالفوتو فقط . اول شي جهزي لك تصميم واجهة موقع يفضل في حالة المبتدئين تصميم بسيط قبل كل شي مثل مثل هذا التصميم .. طبعا هذا مصغر ليكن في الحسبان ان تصميمك لا يتجاوز 770 بكسل عرضا ..، و 570 طولا او براحتك ما تفرق الطول كثير .. الان ندخل على التصميم في الفوتوشوب .. و نصمم التصميم الذي نريده باي شكل كان .. ملاحظة / وانتي تصممين حاولي ان تكون الاطراف من جميع الجهات بنفس درجة اللون لا يكون فيها تدرج او منطقه افتح من منطقه او لون يختلف عن لون .. في جميع الاطراف 1- اضغطي Ctrl + R ستظهر لك مسطرة العمل في جوانب التصميم . . اقتربي بالماوس منها ثم اسحبي و استمري في الضغط على الزر ، ستظهر لك خط تقسيمي .. ( سواء بالطول او بالعرض ) . حددي المنطقه التي تريدين تفريغها وقصها .. بحسب التصميم المتواجد لديك .. طبعا فكرة التقطيع تعتمد على .. مكان الازرار و منطقة الكتابة .. حددنا الازرار و حددنا مكان الكتابة .. الان وصلنا للمرحلة الي تليها .. فيه أداة في شريط الادوات بها الشكلSlice Tool .. لما تختارينه بيطلع لك فوق في الاعلى زر بها الشكل اضغطي عليه .. بعض الضغط عليه راح تلاحظين انه تم قص التصميم بها الطريقة الان بنفس الادة ابدئي بتحديد المناطق الي ما تحتاجين فيها قص كثير مثل منطقه الكتابة و منطقة الصور الجانبية .. مثل كذا .. ملاحظة .. وقت القص بالنسبة لمنطقة الكتابة .. حاولي دائما ان لايكون فيها صور من النوع الذي لو تكرر افسد الشكل .. ( يفضل دائما ان تكون منطقة مستوية خالية من اي شي .. ) -------------- الان بامكانك حفظ العمل .. اذهبي الى File >> Save as web و بعدها احفظي العمل ملاحظة // احفظي العمل بحروف انقليزية .. ستجدين ظهر لك في المكان الذي تم الحفظ فيه مجلد images + صفحة html بنفس اسم التصميم .. --------------------------- المطلوب منك الان هو .. الذهاب للصفحة و ضغط الزر الايمين للفأرة .. بعدها اختاري تعديل او edit حسب جهازك سيفتح لك برنامج الفرونت بيج .. و سنبدا من جديد التعديل حتى يصبح جاهزا للكتابة .. ---------------------------------- اول ما تفتحين التصميم بالفرونت بيج راح تلاحظين .. * التصميم جاي على يسار الصفحة * لون الخلفية ابيض . ---------------------------------- الان علينا اعداد لون الخلفية لانه يختلف عن العمل اضغطي رايت كلك ثم Page Properties وحاولي تغيل لون الخلفية سيظهر لك مربع الالوان اختاري منه More ثم اختاري اداة القطارة .. واقتربي من طرف التصميم لتحصلي على نفس الدرجة ( كما تم شرحة سابقا ) --------------------------------- الان اضغطي على التصمي بالزر الايسر للفارة و اختاري Table Properties من بين الخواص يوجد Alignment اختاري منها Center سيصبح الان التصميم بالمنتصف .. --------------------------------------- الان بقي ان نفرغ منطقه لكتابة الان اختاري الصورة التي سيكون مكانها الكتابة .. اضغطي عليها مرتين وانسخي اسمها .. ( سنستخدمها الان كخلفية لصفحة اخرى .. ) افتحي صفحة جديدة بالفرونت بيج و قومي بوضع الصورة السابقة على شكل خلفية صورة لها .. سيتتكرر لا عليك منها .. اكتبي اي شي في هذه الصفحة وليكن ( بسم الله الرحمن الرحيم ) واحفظي الصفحة باسم home.htm لكن يجب ان يكون في نفس مكان عملنا . ------------------------------------------- عودي للعمل في التصميم السابق و امسحي الصورة التي في مكان العمل بعد مسحها .. اضغطي الزر اليسار للفاره واختاري Cell properties و اعملي للخلية خلفية بنفس الصورة السابقة من براوز = ابحثي عن اسم الصورة و اضغطي اوكي .. يجيب ان تضعي علامة صح في المربع use background picture --------------------------------------- الان من شريط الادوات بالاعلى اختاري Insert > Inline Frame</B> بعد اختيارك لهذه الخاصية سيظهر لك مربع بهذا الشكل .. اضغطي عليه مرتين ستفتح لك خواصه Name هذا اسم الاطار الذي نعمل عليه الان ليكن ft initial page الصفحة التي سيتم عرضها >> اكتبي home.htm الان و عدلي المقاسات من Frame size ضعي علامة صح على المربعين و حددي المقاسات وانتبهي يجب ان تكون بالبكسل في اغلب الاحيان ناخذ نفس مقاسات الصورة التي كانت موجوده .. scrollbars هذي اختاري منها if needed او اذا كنتي لا تريدين الشريط ان يظهر never ازيلي علامة الصح من show border بامكانك تعديل مقاسات الاطار بتمديده مع اطرافه ------------------------ بعد ان يتم اخذ مقاسات مظبوطه له لم يبقى سوى اللنكات.. ------------------------- مثلا في صفحة من انا كما هو معروف كيف تضعين لنك للصورة ولكن قبل ان تنهي لما تسوين لنك للصورة او الكلمة على شكل لنك .. بتطلع لك هاي النافذة اختاري منها Target Frame بعدها بتظهر لك هالنافذة طبعا لاننا سمينا الاطار السابق باسم ft فهاهو طلع لنا ضمن الاطارات الترقت .. اختاريه بعدين حطي علامة صح تحت عشان يصير هو الاساسي كل ما حطيتي لنك يفتح لك بداخله .. و بكذا انتهيناااااا
الكاتب: فتيات للابد

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