هذا المقال عبارة عن مقال توضيحي لبعض الأمور الأساسية في تصميم المواقع مقدمة من الأخ عوض الذييبي أحدى موظفي شركة
ClickApps
ماهو المقصود بتصميم المواقع ؟ (web design )
يمكن تقسيم تصميم الموقع إلى مرحلتين:
Frontend -: وتحوي لغات التصميم Html , Css ,JavaScript بالإضافة إلى برنامج تصميم الواجهات (أدوبي فوتوشوب).
Backend-: وتحوي لغات البرمجة PHP, ASP.NET بالإضافة إلى قواعد البيانات.
3. السالم عليكم ورحمة هللا وبركاته...
مرحبا أخي الكريم
ماهو المقصود بتصميم المواقع ( )web design؟
يمكن تقسيم تصميم الموقع إلى مرحلتين:
:Frontendوتحوي لغات التصميم Html , Css ,JavaScriptباإلضافة إلى برنامج تصميم الواجهات (أدوبي فوتوشوب).
:Backendوتحوي لغات البرمجة PHP, ASP.NETباإلضافة إلىقواعد البيانات.
:Frontend
يقصد به معالجة الموقع في كل جوانبه الشكلية من خالل تصميم الواجهات
بإحدى برامج التصميم الجرافيكي من ثم برمجتها بلغة , html, css
, JavaScript
ويمكن تصنيف مرحلة فرونت إند إلى 3 مراحل هي:
1- مرحلة تصميم الواجهات:
تصميم الواجهات هو كل ما يخص المظهر والشكل العام للموقع كالجرافيك
والتخطيط والتقسيم لكل صفحة وعمل تنسيق على كل عناصر الصفحة من
نصوص وصور وأيقونات وألوان، المستخدمة في التصميم، حيث يتم تصميم
الموقع من الصفحة الرئيسية والصفحات الداخلية للموقع كامل.
إذن للقيام بمرحلة تصميم الموقع كرسومات فإننا نحتاج إلى برامج التصميم
الجرافيكي وأشهرها هو برنامج الفوتوشوب.
.( 5( Adobe Photoshop cs
يمكنك تعلم برنامج الفوتوشوب من خالل دورة كامل من هذا الرابط:
3
4. 71/http://www.tahaworld.com/courses/course
للحصول على أيقونات يمكن استخدامها في التصميم يمكنك زيارة هذا الموقع
المجاني:
/http://www.iconfinder.com
باإلضافة إلى موقع جميل يحوي قوالب لمعظم تصنيفات المواقع بتصاميم
رائعة:
/http://www.templatemonster.com
2- مرحلة تحويل الواجهات الرسوميةإلى صفحة ويب:
بعد التصميم نقوم بعملية تقطيع الموقع ويقصد بها عملية تقطيع الواجهة إلى
صور منفردة من ثم تجميعها على شكل صفحة ويب باستخدام لغة HTML
+ CSS
مثال:
أيقونة فيس بوك تم أخذها من واجهة الموقع بعد تصميمها على شكل
صورة.
إلظهار هذه األيقونة على صفحة الويب فإننا نحتاج إلى تاق خاص بالصورة
بلغة :html
>”<imgsrc=”faceook.jpg
لغة htmlمسؤولة عن عرض عناصر الصفحة دون تنسيق كامل، أما
القدرة على التحكم بكل جزء في التصميم فهي مهمة لغة cssفهي مسؤولة
عن تنسيق العناصر وإعطاء جماليات للتصميم.
4
5. بعد إظهار أيقونة الفيس بوك على صفحة الويب نقوم مثال بإعطائها موقع
محدد في الصفحة من خالل خاصية المحاذاة بلغة .css
;Flout: right
عندها تظهر األيقونة في يمين الصفحة وهكذا..
3- مرحلة إعطاء الصفحة شكال تفاعليا:
وهذا من خالل لغة JavaScript
منها يمكن عمل زر متفاعل أول صور متحركة وغيرها من األحداث
التفاعلية التي تجعل المستخدم أكثر تفاعال وثقة بالموقع.
( يمكنك تعلم لغة html + css +JavaScriptمن خالل هذا الموقع
المبسط جدا:
/http://www.w3schools.com
كانت تلك مقدمة بسيطة عن تصميم المواقع، تبقت المرحلة الثانية من تصميم
الموقع نوضحها في المواضيع القادمة إن شاء هللا.
5