Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ماهو الويب ديزاين؟

22,350 views

Published on

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

Published in: Education

ماهو الويب ديزاين؟

  1. 1. ‫ماهو الويب ديزاين؟‬ ‫1‬
  2. 2. ‫عوض عبد هللا الذييبي‬ ‫مصمم ويب‬ ‫2‬
  3. 3. ‫السالم عليكم ورحمة هللا وبركاته...‬ ‫مرحبا أخي الكريم‬ ‫ماهو المقصود بتصميم المواقع ( ‪ )web design‬؟‬ ‫يمكن تقسيم تصميم الموقع إلى مرحلتين:‬ ‫ ‪ :Frontend‬وتحوي لغات التصميم ‪Html , Css ,JavaScript‬‬‫باإلضافة إلى برنامج تصميم الواجهات (أدوبي فوتوشوب).‬ ‫‪ :Backend‬وتحوي لغات البرمجة ‪ PHP, ASP.NET‬باإلضافة إلى‬‫قواعد البيانات.‬ ‫:‪Frontend‬‬ ‫يقصد به معالجة الموقع في كل جوانبه الشكلية من خالل تصميم الواجهات‬ ‫بإحدى برامج التصميم الجرافيكي من ثم برمجتها بلغة , ‪html, css‬‬ ‫, ‪JavaScript‬‬ ‫ويمكن تصنيف مرحلة فرونت إند إلى 3 مراحل هي:‬ ‫1- مرحلة تصميم الواجهات:‬ ‫تصميم الواجهات هو كل ما يخص المظهر والشكل العام للموقع كالجرافيك‬ ‫والتخطيط والتقسيم لكل صفحة وعمل تنسيق على كل عناصر الصفحة من‬ ‫نصوص وصور وأيقونات وألوان، المستخدمة في التصميم، حيث يتم تصميم‬ ‫الموقع من الصفحة الرئيسية والصفحات الداخلية للموقع كامل.‬ ‫إذن للقيام بمرحلة تصميم الموقع كرسومات فإننا نحتاج إلى برامج التصميم‬ ‫الجرافيكي وأشهرها هو برنامج الفوتوشوب.‬ ‫.( 5‪( Adobe Photoshop cs‬‬ ‫يمكنك تعلم برنامج الفوتوشوب من خالل دورة كامل من هذا الرابط:‬ ‫3‬
  4. 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. 5. ‫بعد إظهار أيقونة الفيس بوك على صفحة الويب نقوم مثال بإعطائها موقع‬ ‫محدد في الصفحة من خالل خاصية المحاذاة بلغة ‪.css‬‬ ‫;‪Flout: right‬‬ ‫عندها تظهر األيقونة في يمين الصفحة وهكذا..‬ ‫3- مرحلة إعطاء الصفحة شكال تفاعليا:‬ ‫وهذا من خالل لغة ‪JavaScript‬‬ ‫منها يمكن عمل زر متفاعل أول صور متحركة وغيرها من األحداث‬ ‫التفاعلية التي تجعل المستخدم أكثر تفاعال وثقة بالموقع.‬ ‫( يمكنك تعلم لغة ‪ html + css +JavaScript‬من خالل هذا الموقع‬ ‫المبسط جدا:‬ ‫/‪http://www.w3schools.com‬‬ ‫كانت تلك مقدمة بسيطة عن تصميم المواقع، تبقت المرحلة الثانية من تصميم‬ ‫الموقع نوضحها في المواضيع القادمة إن شاء هللا.‬ ‫5‬
  6. 6. ‫مع خالص الشكر والتق‬ ‫6‬

×