{حصريًا .. دورة تصميم موقع شخصي }الجزء الاول

eng_haysem · من طرف eng_haysem في السبت أغسطس 09, 2008 5:47 pm

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

•“{دورة تصميم موقع شخصي}“•۫

انتهيت من إعداد هذه الدورة { و هي أول دورة أقوم بها } مؤخرا و أتمنى أن تكون هذه الدورة مفيدة و ممتعة للجميع

الخطوات التي سنتبعها في دورتنا

• تصميم الموقع

• تقطيع التصميم

• التعديل و الإخراج بالفرونت بيج

• رفع التصميم على الموقع

---------------------------------------------------------------------------------------------------------------------------------------------------
• أولا التصميم

~ في تصميم الموقع يجب أن تراعي الدقة في التنسيق و الألوان لإخراج الموقع بشكل ممتاز

~ و حتى نتجنب نفور الزائر من موقعنا يجب اختيار ألوان هادئة - منعشة او مقبولة لدى الغالبيّة من الناس ..

~ لا تكثر من استخدام الصور في التصميم و الفرش بصورة كبيرة , فالتصميم الهادئ هو الأفضل ..

~ أن كنت تود أن يتناسب التصميم مع جميع الشاشات باختيار عرض التصميم 778 او 777 و الطول متاح

و هنا سوف نقوم بتصميم يناسب شاشات بدقة 1024 × 768

قبل البدء في التصميم سوف أرشدك لبعض المخططات التي تساعدك في التصميم

و التي بناءًا عليها تستند في تصميمك ..

.المخطط الأول

.المخطط الثاني

.المخطط الثالث

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

كهذه المجموعة

سأقوم بالتصميم تبعا للمخطط الأول ..

{ يرجى من الجميع التطبيق تبعا للمخطط المختار في الدورة أولا ثم الرجوع للمخططات الثانية على حسب رغبتكم }

و الآن نبدأ بأول خطواتنا بسمِ اللّه ..

1. افتح عمل جديد بمقاس 900 × 900

2. قم بتصميم الموقع على حسب المخطط الأول الموضح هنا

مثال قمت بعمل هذا التصميم ..

----------------------------------------------------------------------------------------------------------------------------------------------------

• ثانيا التقطيع

3. الآن نقوم باختيار أداة التقطيع

ونقوم بعمل مقارب لهذا

منطقة الكتابة من الضرورة ان يكون التقطيع دقيق حتى يضبط الموقع
استعن بالصورة ..

لتسهيل التقطيع قمت بتلوين أغلب الأجزاء كتوضيح للعملية

4. نقوم بعمل مجلد خاص للموقع لوضع جميع ملفاته فيه

مثلا اذهب إلى desktop سطح المكتب و اعمل مجلد جديد باسم

My site

5. نرجع للتصميم و نقوم بحفظ التصميم كالتالي :

نختار save for web

لا ننسى صيغة الصور يفضل أن تكون jpeg

6.ثم نقوم بتغيير نوع الحفظ إلى

html and images

داخل المجلد الذي عملناه في سطح المكتب

----------------------------------------------------------------------------------------------------------------------------------------------------

• ثالثا التعديل و الإخراج

8. نفتح برنامج الفرونت بيج

9. نقوم بفتح مجلد من القائمة file ثم

open file

10.نذهب الى مجلدنا my site من سطح المكتب

سنجد مجلدين index و

image

index= الصفحة الرئيسية

images =مجلد الصور التي قطعناها و هي صور الصفحة الرئيسية

11.سنتجاهل الآن مجلد الصور و نفتح

index

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

نأتي الآن للتعديل ..

13 . انقر في المساحة الخالية بجانب التصميم

14.و اختار توسيط للتصميم بنفس أداة توسيط الخط

15. سنقوم في هذه الخطوة بتغيير عنوان الموقع و وصفه و خلفيته , اتبع الصورة

اذهب الى منتطقة فاضية { باللون الأبيض } كالسابقة و رايت كلك

ثم

16. نذهب الى العناوين
اعلى صندوق الحوار و نختار General , نغير عنوان الصفحة من title و
الحقلين الآتيين لوصف الموقع و كلمات البحث

17.انتقل للعنوان التالي Formatting و اختر لونا يناسب صفحتك و اختر موافق

Ok

{ العناوين التالية سنتركها لتكتشف مضمونها بنفسك ..=)

18. انظر إلى النتيجة الآن

19. نقوم بحذف صورة منطقة الكتابة الزرقاء ( مكان الكتابة } كالتالي

20. نقوم بوضع مؤشر الفأرة داخل المنطقة المحذوفة

21. من القائمة العلوية نختار insert ثم Inline frame

و نضغط زر

new page

22. نرجع إلى مجلدنا My site و نفتح مجلد

images

23. الصورة التي حذفناها نبحث عنها و نضع مؤشر الفأرة على الصورة لأخذ الطول والعرض الخاص بها

و نسجله في note pad أو أي شيء مناسب لك ..

24. نرجع للفرونت بيج و نضغط ضغطتين على Inline frame ليظهر لنا صندوق الحوار الخاص به ..

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

Show border

ليظهر بالشكل هذا

25. هذه الخطوة سنقوم بعمل صفحات الموقع الفرعية .. افتح صفحة جديدة خالية

26. اول صفحة هي صفحة الإضافات و الاخبار الخ .. , اكتب ماتريد فيه و غير خلفية الصفحة الى خلفية الكتابة الزرقاء

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

و هناك طرق كثيرة اخرى .. كأخذ الكود من برنامج Smart color او بالفرونت بيج ..

28 . بعد ذلك نقوم بحفظ الصفحة داخل مجلدنا My site { لا تحفظه داخل images }

سم الصفحة updates.htm و احفظها بعد ذلك ..