برمجة وتصميم المواقع باستخدام CSS، مبتدىء

Website Design Programming With CSS, Beginnerمقدمة

في هذه الدورة، سنتعرف على أحدث اصدار من لغة تصميم صفحات النت، CSS3، باستخدام فيجول ستوديو 2015. فهي اللغة المستخدمة لتغيير نمط صفحات الويب وواجهات المستخدم المكتوبة بلغة HTML و XHTML. . حيث ستتعلم كيف تصمم موقعك ليكون ذا مظهر احترافي. حيث سنبدأ بتنسيق النص، والعمل مع الألوان والتدرجات، وتكوين صور الخلفية. ثم إضافة عناصر التصميم مثل الظلال والحدود، والأزرار، والتنقل بين القوائم لتحسين تجربة المستخدم، وتحسين صفحات الويب الخاصة بك مع التحويلات والانتقالات والرسوم المتحركة.

 

Website Design Programming With CSS, Beginner

In this course, you will learn the latest version of Cascading Style Sheets, CSS3, with Visual Studio 2015. As it’s the language used to change the style of web pages, and user interface, of HTML, XHTML langs. You will learn how to design your site, to have a professional view. We will start with format text, work with colors and gradients, and create background images. Then add design elements like shadows and borders, buttons, and navigation menus to improve the user experience, and enhance your web pages with Transforms, transitions, and animation

.

CSS3 Pic 02

أهداف الدورة Course Objectives

عربي English
المحددات Asterisk Selector
اللون، الأزرار، الحدود Color, Buttons, Border
الملاحة والتخطيط Navigation And Layout
التخطيط، والمحتوى والشعار Layout, Content & Logo
التحويل والرسوم المتحركة (تحريك الأجسام) Transform & Animation
استعلام الميديا Media Query

.

CSS3 Pic 12

لمن هذه الدورة The course is for

عربي English
لمن يريد تعلم تصميم المواقع for who wants to learn web design
لمصممي المواقع Web Designers
للمبرمجين Web Programmers

.

CSS3 Pic 11

برنامج ومحاور الدورة Course Program

يوم 1: مقدمة Day 1: Introduction
المحدد في css3 1. Selector & New For Cc3
المحددات Selectors
مقدمة إلى CSS3 Introduction to CSS3
المحدد: النجمة Asterisk Selector
المحدد: الهوية والفئة ID & Class Selectors
المحدد: مسبقا Predefined Selectors
المحدد: الوارث Descendant Selector
المحدد: الوارث أكثر تفصيلاً Descendant More
المحددات Selectors Continued
شبه الفئات Pseudo-Classes
الحوم والتركيز Hover & Focus
القائمة وفئة التصفير List & Clear Class
المحدد: متقدم Advanced Selectors
الجديدة في CSS3 New for CSS3
الظلال Shadows
الإدراجات Insets
الستروك Stroke
النقل Shift
. .
يوم 2: اللون، الأزرار، الحدود Day 2: Color, Buttons, Border
الضبابية Blurring
الشفافية Transparency
اللون، الأزرار، الحدود 2. Color, Buttons, Border
اللون والتدرجات Color And Gradients
اللون Color
التدرج الخطي Linear Gradient
التدرج الأفقي Horizontal Gradient
التدرج القطري Diagonal Gradient
التدرج الشعاعي Radial Gradient
خلفية الصور Background Images
الجمع بين الصور Combining Images
الأزرار والظلال Buttons And Shadows
تصميم زر Button Design
إنشاء زر Create Button
تعديل زر Modify Button
مقدمة إلى الظلال Intro to Shadows
خلق الظلال Create Shadows
الظلال الداخلية Inner Shadows
الحدود والتنقلات Borders And Navigations
الحدود Borders
. .
يوم 3: الملاحة والتخطيط Day 3: Navigation And Layout
قطر الحدود Border Radius
الدوائر Circles
حدود الصورة Image Radius
الملاحة Navigations
نمط ورقة التنقل Nav Style Sheet
قائمة التنقل الأساسية Basic Nav Menu
الملاحة والتخطيط 3. Navigation And Layout
الملاحة و CSS3 Navigations And CSS3
تطبيق CSS3 إلى القائمة Applying CSS3 to the Menu
الحدود والتدرج Border & Gradient
تحوم والتركيز Hover & Focus
المزيد من التنقل ونموذج الصندوق More Nav And The Box Model
القائمة المنسدلة Drop Down Menu
عرض القائمة الفرعية Display Submenu
تحديد قائمة وحدات Define List Items
تحرير العناصر العليا Edit the Top Items
تحرير المنسدلة Edit the Drop Down
نموذج الصندوق The Box Model
نموذج مربع لCSS3 Box Model for CSS3
. .
يوم 4: تخطيط، والمحتوى والشعار Day 4: Layout, Content & Logo
تحديد المواقع والتخطيط Positioning And Layout
الموقع Positioning
تحديد المواقع النسبي Relative Positioning
تحديد الموقع المطلق والثابت Absolute & Fixed Positioning
تحديد المواقع اللزجة Sticky Positioning
تخطيط – أخذ ملاحظات Layout – Taking Notes
ملاحظات التخطيط More Layout Notes
التخطيط، والمحتوى والشعار 4. Layout, Content & Logo
بداية التخطيط Beginning The Layout
إعادة تعيين CSS Reset CSS
PXs أو EMS PXs or EMs
ورقة النمط The Style Sheet
ورقة النمط و صفحة الفهرس Style Sheet & Index Page
الملاحة والمحتوى Navigation And Content
تخطيط الإنتقال Layout Navigation
تحوم الإنتقال Navigation Hover
صفحة الفهرس The Index Page
المحتوى The Content
أعمدة المحتوى Content Columns
محاذاة النص والحشو Text Alignment & Padding
. .
يوم 5: تحويل والرسوم المتحركة Day 5: Transform & Animation
تخطيط التذييل والشعار Layout Footer And Logo
مراجعة التخطيط والإضافات Layout Review & Additions
بداية التذييل Beginning the Footer
روابط التذييل Footer Links
استكمال التذييل Completing the Footer
إضافة الشعار Adding the Logo
التحويل والرسوم المتحركة(تحريك الأجسام) 5. Transform & Animation
التحولات Transformations
خصائص التحول Transformation Properties
التدوير، والمصفوفة، والترجمة Rotate, Matrix, & Translate
التحجيم والانحراف Scaling & Skewing
تحويل الصور Transforming Images
تحويل النص Transforming Text
تحويل الأزرار Transforming Buttons
التحولات والرسوم المتحركة Transitions And Animations
مقدمة إلى التحولات Intro to Transitions
ترميز التحولات Coding Transitions
انتقال الحافلة The Bus Transition
الكرة النازلة The Descending Ball
. .
اليوم 6: استعلام الميديا Day 6: Media Query
كرات متعددة Multiple Balls
الرسوم المتحركة(تحريك الأجسام) Animations
الإطارات الرئيسية Key Frames
الرسوم المتحركة معلومات متقدمة Advanced Animation
تحريك زر Animating a Button
الإضافة في التحولات Add in Transitions
إضافة الفئات الخاصة Add Pseudo-Classes
تحديد الحركة Define the Animation
الاستعلام عن الميديا 6. Media Query
الاستعلام عن الميديا Media Queries
المفردات والمكونات Vocabulary & Components
التنبه لبعض الامور More to Consider
كتابة الاستعلام عن الميديا Coding Media Queries
الاستعلام عن الميديا 320PX Media Query – Break Pt 320px
الاستعلام عن الميديا 320PX – صورة، تذييل Break Pt 320px – Image, Footer
الاستعلام عن الميديا 320PX – التعديل، 480px Break Pt 320px – Tweak, 480px
الاستعلام عن الميديا 480px – التذييل، 768px Break Pt 480px – Footer, 768px

.

course trainer 1

المدرب Trainer

حسين ناجي الصفافير Hussain Naji Al-Safafeer

للتواصل، الضغط على الرابط التالي:

About

CSS3 Pic 09

.

الوسائل التدريبية Requirements for Trainee

عربي English
جهاز عرض أو شاشة كبيرة Projector or big monitor
حاسب Computer

.

CSS3 Pic 07

المتطلبات لكل متدرب Training Instruments

عربي English
معرفة مبسطة بلغة HTML Basic knowledge In HTML

.

CSS3 Pic 06

تفاصيل الدورة Course Details

اسم الدورة – عربي Course Arabic Name برمجة وتصميم المواقع باستخدام CSS، مبتدىء
اسم الدورة – انجليزي Course English Name Website Design Programming With CSS, Beginner
المستوى Level مبتدىء/Beginner
اللغات التي يمكن أن تعرض به الدورة Spoken Languages عربي / English
مسمى الوظيفة للمتدرب Job title for the Trainee-AR مصمم مواقع
مسمى الوظيفة للمتدرب بالانجليزي Job title for the Trainee-En Website Designer & Programmer
المجال Subject برمجة حاسب
الفرع SubSubject Websites
عدد المتدربين # of trainees 15-20
عدد الايام # of Days 6
عدد الساعات في اليوم الواحد # of hours per Day 3
مجموع الساعات Sum of Hours 18
سعر الدورة Course Price
الفئة المستهدفة Target group مبرمجي المواقع والمبتدئين في البرمجة
متطلبات الدورة Requirements معرفة عامة بـ html
صفحة تفاصيل Course Link https://traineralsafafeer.wordpress.com/2016/03/01/website-design-programming-with-css-beginner

.

CSS3 Pic 04

دورات مشابهة Similar Courses

الدورات المتوفرة للتدريب Training Courses

برمجة المواقع باستخدام HTML + CSS، مبتدىء – Website programming with HTML + CSS, Beginner

.

CSS3 Pic 03

.

Advertisements

About Hussain Naji Hussain Al-Safafeer

Hussain Naji Hussain Al-Safafeer, Computer Developer (Programmer), about me تفصيل أكثر عني, https://daughterhusband.wordpress.com/more-about
هذا المنشور نشر في ويب Web, دورات Courses وكلماته الدلالية , , , , , . حفظ الرابط الثابت.

2 Responses to برمجة وتصميم المواقع باستخدام CSS، مبتدىء

  1. التنبيهات: كيف تعمل موقعك الخاص (مدونة) بدون تكلفة، مبتدىء | المدرب حسين ناجي الصفافير

  2. التنبيهات: برمجة المواقع باستخدام جي كويري jQuery، مبتدىء | المدرب حسين ناجي الصفافير

اترك رد

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

شعار وردبرس.كوم

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   /  تغيير )

Google photo

أنت تعلق بإستخدام حساب Google. تسجيل خروج   /  تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   /  تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   /  تغيير )

Connecting to %s