صفحة 255 - كتاب المهارات الرقمية - الصف 9 - الفصل 1 - المملكة العربية السعودية

📚 إدراج صورة في متجر إلكتروني

المفاهيم الأساسية

لا توجد مصطلحات جديدة محددة في هذه الصفحة.

خريطة المفاهيم

```markmap

إنشاء متجر إلكتروني باستخدام LocalWP

مرحلة التخطيط

تحديد الهدف من المتجر

اختيار اسم المجال

مرحلة التصميم

إنشاء نموذج أولي

تحرير صفحات المتجر الإلكتروني

#### حذف بعض الصفحات

#### تحرير صفحة "حول"

##### الوصول للوحة تحكم ووردبريس

##### تغيير اسم "صفحة النموذج" إلى "حول"

##### خطوات تحرير صفحة "حول"

###### 1. من لوحة التحكم (Dashboard)، اضغط على قسم صفحات (Pages)، وابحث عن صفحة حول (About)، ثم اضغط على زر تحرير (Edit).

###### 2. حدد النص واحذفه لإضافة النص الذي تريده.

###### 3. اكتب بعض المعلومات عن المتجر ثم غير خلفية (Background) الخاصة بالمكون.

###### 4. أضف معلومات "اتصل بنا" (Contact us) بنفس الطريقة.

#### تصميم الصفحة الرئيسية

##### تضمين قائمة التنقل

##### تضمين شعار واسم المتجر

##### تغيير صورة الصفحة الرئيسة

###### من قسم "صفحات"، انتقل إلى "الصفحة الرئيسة" ثم اضغط على "تحرير"

###### اضغط على مُكوّن الصورة، ثم اضغط على زر "استبدال"

###### اضغط على زر "رفع"، واختر الصورة، ثم اضغط على "فتح"

###### اضغط على زر "محاذاة"، ثم اضغط على "عرض واسع"

###### اضغط على زر "تبديل الارتفاع الكامل"، وغير "عامة الغشاء" من قسم "اللون"

##### إضافة رسالة ترحيبية إلى الصفحة الرئيسية

###### تحرير نص في موقع المتحرر الإلكتروني

####### 1. انتقل إلى المكون الذي تريد تحريره، واضغط على زر "محاولة استعادة مكون" الخاص بالرئيسية.

####### 2. اكتب النص الذي سيظهر في الصفحة الرئيسية (مثل: "مرحباً بك في متجرنا الإلكتروني").

####### 3. حدد النص، ثم اجعله عريضاً (Bold).

####### 4. حدد المكونات الأخرى من الصفحة إذا كنت لا تريد استخدامها، واضغط على زر "الخيارات".

####### 5. اضغط على "إزالة المكون (فقرة)".

####### 6. اضغط على "Remove Media & Text (فقرة)".

#### إدارة الصفحات في لوحة التحكم

##### تسجيل الدخول إلى لوحة التحكم

###### نموذج تسجيل الدخول

###### رسالة خطأ عند إدخال كلمة مرور خاطئة

##### عرض قائمة الصفحات

###### تصفية الصفحات حسب الحالة (الكل، المنشورة، المسودات)

###### البحث في الصفحات

###### عرض تفاصيل الصفحة (العنوان، الكاتب، التاريخ)

##### إضافة صفحة جديدة

##### تحرير صفحة موجودة

###### تعديل عنوان الصفحة ومحتواها

###### تحديد صفحة رئيسية وترتيبها

###### اختيار قالب الصفحة

###### التحكم في السماح بالتعليقات

###### تحديد حالة الصفحة (نشر، مسودة) ورؤيتها

###### معاينة الصفحة وحفظها

#### إدراج صورة جديدة في المحرر

##### اختيار الصورة من الجهاز

###### اختيار ملف الصورة (مثل Riyadh_Saudi_Arabia.jpg) من مجلد الصور

##### فتح الصورة

###### الضغط على زر 'Open' (فتح) لإدراج الصورة في المحرر

##### تغيير عرض الصورة

###### من قائمة خيارات المحاذاة والعرض، اختيار 'عرض واسع' (أقصى عرض 1200px)

##### استخدام أيقونة المحاذاة

###### النقر على أيقونة تغيير المحاذاة في شريط أدوات المكون العلوي

##### ضبط إعدادات المكون الجانبية

###### ضبط النص البديل وحجم الصورة من القائمة الجانبية اليسرى

###### الضغط على زر تحديث (Update) لحفظ التغييرات

#### تحويل صفحة إلى مسودة

##### خيارات إدارة المكونات

###### إلغاء المزيد من الإعدادات

###### تحديد المكون الأب (غلاف)

###### نسخ المكون

###### تكرار

###### إدراج قبل

###### إدراج بعد

###### نقل إلى

###### تحرير كـ HTML

###### تأمين

###### تجميع

###### إزالة المكون (فقرة)

##### إعدادات الصفحة العامة

###### التاريخ والوقت (مثال: 15 مارس 2023، 11:16، UTC+0)

###### النشر على نطاق محلي (مثال: my-giftshop.local)

###### إعدادات الرابط

###### إعدادات النموذج (مثال: Saad، كتاب)

###### إعدادات المراجعات

###### الصورة البارزة

###### مناقشة

###### خصائص السمة

#### إعدادات المكونات والصفحة

##### خيارات زر الإعداد (Setting)

###### المكونات

###### صفحة

###### ابدأ ببناء مكونات لكل الحكايا

###### فترة

###### اللون

###### نص

###### خلفية

###### رابط

###### الخطوط

###### حجم التراصي

####### XXL

####### XL

####### L

####### M

####### S

###### أبعاد

##### محتوى صفحة "متجرنا"

###### يبيع ملابس وإكسسوارات مصنوعة يدوياً في السعودية وصديقة للبيئة

###### تشجيع ودعم الحرفيين

###### مفهوم صفر نفايات: التخلص من المنتجات المهدرة أو غير الضرورية

###### جميع المنتجات مصممة ومصنعة 100% في السعودية

##### محتوى صفحة "اتصل بنا"

###### التواصل عبر وسائل التواصل الاجتماعي

#### إضافة صورة في صفحة "حول"

##### 1. اضغط على زر "إضافة مكون" (Add Block)، ثم اختر خيار "صورة" (Image).

##### 2. اضغط على زر "رفع" (Upload)، اختر الصورة، ثم اضغط على "فتح" (Open).

##### 3. اضغط على أداة "قص" (Crop)، اختر نسبة العرض إلى الارتفاع "مربع" (Square)، ثم اضغط على "تطبيق" (Apply).

##### 4. من زر "محاذاة" (Align)، اختر "عرض واسع" (Wide width).

#### إدراج صورة جديدة في المحرر (استكمال)

##### اختيار الصورة من الجهاز

###### اختيار ملف الصورة (مثل handmade_clothes.jpeg) من مجلد الصور

##### فتح الصورة

###### الضغط على زر 'Open' (فتح) لإدراج الصورة في المحرر

##### تغيير عرض الصورة

###### من قائمة خيارات المحاذاة والعرض، اختيار 'عرض واسع' (أقصى عرض 1200px)

##### استخدام أيقونة المحاذاة

###### النقر على أيقونة تغيير المحاذاة في شريط أدوات المكون العلوي

##### ضبط إعدادات المكون الجانبية

###### ضبط النص البديل وحجم الصورة من القائمة الجانبية اليسرى

###### الضغط على زر تحديث (Update) لحفظ التغييرات

##### خيارات تعديل الصورة في شريط الأدوات العلوي

###### استبدال (Replace)

###### تطبيق إلغاء (Apply Cancel) لتغيير نسبة العرض إلى الارتفاع

####### الأصلي (Original)

####### مربع (Square)

####### منظر أفقي (Landscape)

###### محاذاة (Align) لتحديد موضع الصورة

####### محاذاة لليسار (Align left)

####### محاذاة للوسط (Align center)

####### محاذاة لليمين (Align right)

###### خيارات عرض الصورة

####### بدون أقصى عرض 650px (No max width 650px)

####### عرض واسع أقصى عرض 1200px (Wide display max width 1200px)

####### عرض كامل (Full display)

```

نقاط مهمة

• توضح الصفحة خطوات اختيار صورة من جهاز الكمبيوتر (مثل `handmade_clothes.jpeg`) وإدراجها في محرر موقع إلكتروني.
• تظهر أدوات تحرير الصورة بعد إدراجها، مثل خيارات تغيير نسبة العرض إلى الارتفاع (أصلي، مربع، أفقي).
• توضح خيارات التحكم في عرض الصورة على الصفحة (عرض واسع، عرض كامل) ومحاذاتها (يسار، وسط، يمين).

This section shows a sequence of screenshots illustrating an image upload process within a web interface, likely for an e-commerce platform.

Screenshot 1: A file explorer window titled 'Open' is displayed. It shows a folder structure on the left and file previews on the right. The current path is 'Pictures > E-shop'. A file named 'handmade_clothes.jpeg' is selected, indicated by a blue highlight. The 'File name:' field also shows 'handmade_clothes.jpeg'. Buttons for 'Open' and 'Cancel' are visible.

Screenshot 2: Focus shifts to a web interface element, likely a toolbar or menu, indicated by the number '5'. It contains several icons: a three-dot menu, 'استبدال' (Replace), an 'A' icon, a link icon, alignment icons, an up arrow, and a picture icon. This toolbar appears above an image preview.

Screenshot 3: A dropdown menu is shown, indicated by the number '6'. The menu is associated with the 'تطبيق إلغاء' (Apply Cancel) button from the toolbar. Options include 'الأصلي' (Original), 'مربع' (Square), and 'منظر أفقي' (Landscape). A timestamp '16:10' is also visible.

Screenshot 4: Another dropdown menu is displayed, indicated by the number '8'. This menu is likely related to image sizing or display options. It shows options like 'بدون أقصى عرض 650px' (Without max width 650px), 'عرض واسع أقصى عرض 1200px' (Wide display max width 1200px), 'عرض كامل' (Full display), and alignment options: 'محاذاة لليسار' (Align left), 'محاذاة للوسط' (Align center), 'محاذاة لليمين' (Align right).

The bottom left corner of the page shows the Ministry of Education logo and text 'Ministry of Education 2025 - 1447'. The page number '255' is also visible.

This section shows a sequence of screenshots illustrating an image upload process within a web interface, likely for an e-commerce platform. Screenshot 1: A file explorer window titled 'Open' is displayed. It shows a folder structure on the left and file previews on the right. The current path is 'Pictures > E-shop'. A file named 'handmade_clothes.jpeg' is selected, indicated by a blue highlight. The 'File name:' field also shows 'handmade_clothes.jpeg'. Buttons for 'Open' and 'Cancel' are visible. Screenshot 2: Focus shifts to a web interface element, likely a toolbar or menu, indicated by the number '5'. It contains several icons: a three-dot menu, 'استبدال' (Replace), an 'A' icon, a link icon, alignment icons, an up arrow, and a picture icon. This toolbar appears above an image preview. Screenshot 3: A dropdown menu is shown, indicated by the number '6'. The menu is associated with the 'تطبيق إلغاء' (Apply Cancel) button from the toolbar. Options include 'الأصلي' (Original), 'مربع' (Square), and 'منظر أفقي' (Landscape). A timestamp '16:10' is also visible. Screenshot 4: Another dropdown menu is displayed, indicated by the number '8'. This menu is likely related to image sizing or display options. It shows options like 'بدون أقصى عرض 650px' (Without max width 650px), 'عرض واسع أقصى عرض 1200px' (Wide display max width 1200px), 'عرض كامل' (Full display), and alignment options: 'محاذاة لليسار' (Align left), 'محاذاة للوسط' (Align center), 'محاذاة لليمين' (Align right). The bottom left corner of the page shows the Ministry of Education logo and text 'Ministry of Education 2025 - 1447'. The page number '255' is also visible. --- VISUAL CONTEXT --- **DIAGRAM**: Open Description: A standard file explorer window showing a file selection interface. Includes folder navigation, file previews, file name input, and action buttons. Data: N/A Context: Illustrates the process of selecting an image file from a local directory. **DIAGRAM**: Untitled Description: A toolbar with icons for text formatting, image manipulation, and menu options. Data: N/A Context: Shows common controls available for editing content, specifically related to image insertion or replacement. **DIAGRAM**: Untitled Description: A dropdown menu with options related to image aspect ratio or display mode. Data: N/A Context: Illustrates options for adjusting image presentation within a web page. **DIAGRAM**: Untitled Description: A toolbar similar to the first one, possibly for image editing or layout adjustments. Data: N/A Context: Shows continued access to editing tools. **DIAGRAM**: Untitled Description: A dropdown menu likely related to image sizing and alignment. Data: N/A Context: Demonstrates options for controlling image dimensions and its position on the page. **DIAGRAM**: Untitled Description: The official logo of the Ministry of Education, followed by the text 'Ministry of Education 2025 - 1447'. Data: N/A Context: Identifies the source and context of the educational material.