هذا المقال عبارة عن مقال توضيحي لبعض الأمور الأساسية في تصميم المواقع مقدمة من الأخ عوض الذييبي أحدى موظفي شركة ClickApps ماهو المقصود بتصميم المواقع ؟ (web design ) يمكن تقسيم تصميم الموقع إلى مرحلتين: Frontend -: وتحوي لغات التصميم Html , Css ,JavaScript بالإضافة إلى برنامج تصميم الواجهات (أدوبي فوتوشوب). Backend-: وتحوي لغات البرمجة PHP, ASP.NET بالإضافة إلى قواعد البيانات.

1. ‫ماهو الويب ديزاين؟‬
‫1‬

2. ‫عوض عبد هللا الذييبي‬
‫مصمم ويب‬
‫2‬

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‬

6. ‫مع خالص الشكر والتق‬
‫6‬