في هذا الدرس سوف تتعلم كيفية إضافة أيقونات الوسائط SVG وإنشاء ارتباطات من تلك الرسومات من أجل الاستفادة الكاملة من جميع الميزات التي يقدمها دريم ويفر سنقوم بإنشاء موقع لذلك سنذهب إلى القائمة موقع وسننشئ موقعًا جديدًا سنقوم بتسمية هذا الموقع باسم الوسائط سنضغط على أيقونة المجلد للتصفح للبحث عن مجلد وسننتقل إلى أي حيث توجد ملفات الدروس للوحدة السادسة وهناك مجلد باسم الوسائط Social Media سنقوم بتحديد هذا المجلد ثم ننتقل إلى الإعدادات المتقدمة على اليسار سنفتح إعداداتنا المتقدمة وننقر على فئة المعلومات المحلية لمجلد الصور الافتراضي لدينا سنضغط على البحث عن مجلد وسنختار مجلد الصور في هذا المجلد وسنضغط على الزر حفظ لذا في لوحة الملفات أعلى اليمين لدينا الآن موقع الوسائط الخاص بنا الآن ملفات SVG هي ملفات رسوم متجهة قابلة للتطوير فماذا يعني ذلك؟ حسنًا، على عكس ملفات JPEG وPING وهي صور تم إنشاؤها باستخدام المربعات أو البيكسل لمعلومات اللون تستخدم ملفات SVG معلومات متجهة لذا فإن النقاط والمقاطع لإنشاء تلك الرسومات أفضل شيء في SVG هو أنها قرار مستقل فماذا يعني ذلك؟ حسنًا، هذا يعني أنه يمكنك جعلها كبيرة كما تريد أو صغيرة كما تريد ولا تفقد الجودة أبدًا الآن لقد بحثت في جوجل عن متجهات مجانية للوسائط واكتشفت على الويب بعض الرسومات المتجهة بالأبيض والأسود التي فتحتها في برنامج إليسترتور واستخدمت ميزة تصدير الأصول وحفظتها كملفات SVG بعد أن أضفت ألواني الخاصة إلى تلك الرسومات لذا يمكنك إخراج ملفات SVG من أدوبي إليسترتور الآن بالعودة الي دريم ويفر سنقوم بفتح ملف التعليمات البرمجية البسيطة سننتقل إلى العرض الحي وعندما ننتقل إلى العرض الحي هذا هو الملف الذي عملنا عليه سابقًا وسننزل إلى ما بعد كلمة "العتاد" وسننتقل إلى العرض تصميم لذا في الجزء العلوي، سننتقل من العرض حي إلى تصميم سنقوم بالتمرير لأسفل وبعد كلمة العتاد سنضغط على مفتاح إدخال وسنكتب تابعنا وبمؤشرنا في كلمة تابعنا سننزل إلى اللوحة خصائص وسنغير هذه الخاصية إلى عنوان 2 لتتناسب مع العناوين الفرعية الأخرى الموجودة على صفحتنا ثم نضغط على مفتاح إدخال إذا انتقلنا إلى لوحة الملفات الخاصة بنا ونضغط على السهم الموجود على يسار الصور يمكننا أن نرى أنه في مجلد الصور لدينا يوجد مجلد SVG وهناك ثلاث أيقونات للوسائط الخاصة بنا ستلاحظ وجود أيقونة التعليمات البرمجية بجانب كل واحدة من تلك الرسومات وليس أيقونة الرسم التي اعتدنا على رؤيتها لذلك لا يمكننا النقر والسحب على أحد هذه الأيقونات لأننا عندما نفعل ذلك يأتي كارتباط إلى التعليمات البرمجية الفعلية وهي ملف SVG لذلك سأحذف ذلك يجب أن نذهب إلى قائمة "إدراج" لإدراج صورة والتأكد من أنك في مجلد الصور وسننتقل إلى SVG وسنختار Facebook SVG، FB SVG وسنضغط على "موافق" الآن عندما نفعل ذلك ونحن في العرض تصميم نحصل على هذه الأيقونة الصغيرة الغريبة بعد كلمة تابعنا ولكن إذا انتقلنا إلى طريقة العرض تصميم وقمنا بتغيير ذلك إلى العرض الحي ونقوم بالتمرير لأسفل، يمكننا أن نرى أنها كبيرة جدًا لذلك سنقوم بالنقر فوقها وفي أسفل لوحة خصائصنا لدينا نفس الخصائص التي نمتلكها لأي من صورنا لذا سنضع 50 بكسل فقط وننقر على مفتاح الإدخال وذلك يجعلها جميلة وصغيرة لما نحتاجه الآن مع الصور المستندة إلى البيكسل عليك حقًا أن تقلق بشأن الحجم تريد وضع تلك الصور بأقرب ما يمكن للحجم الذي ستستخدمه قدر الإمكان لأن متصفح الويب يجب أن يعالج الصورة الأكبر حجمًا حتى إذا قمت بتصغيرها في دريم ويفر لذلك سننتقل إلى العرض الحي ونعود إلى العرض تصميم وسنضع المؤشر بعد تلك الصورة مباشرةً وسنضغط على شريط المسافة سنذهب إلى قائمة إدراج ثم الصور وسننتقل إلى مجلد SVG وسنختار twitter.svg وسنضغط على "موافق" الآن تأتي صورتنا كعنصر نائب صغير وقبل أن ننتقل إلى العرض الحي سنضع العرض والارتفاع بمقدار 50 بيكسل وعندما ننتقل إلى العرض الحي ونقوم بالتمرير إلى الأسفل ها هما الصورتان لأزرار الوسائط الخاصة بنا سننتقل إلى لوحة الملفات الخاصة بنا وسننقر نقرًا مزدوجًا فوق الفهرس ويمكننا أن نرى أسفل المستند الخاص بنا ليس لدينا أيقونات وسائط لذلك سنعمل مع أيقونات الوسائل الخاصة بنا الآن، إذا نقرنا على هذا الشريط الأخضر الداكن يمكننا أن نرى أن هناك عندما نكون في العرض الحي، توجد فقرة تم تطبيق الفئة أيقونة الوسائط عليها سننتقل إلى العرض تصميم الخاص بنا وبمؤشرنا هناك سنذهب إلى قائمة "إدراج" لإدراج صورة سنحدد ملف Facebook SVG ونفتحه الآن مرة أخرى، نحصل على نفس المظهر هنا إذا ذهبنا إلى العرض الحي وقمنا بالتمرير لأسفل فإننا نرى صورتنا كبيرة ليست كبيرة مثل الصورة في المستند الأخير لكنها لا تزال كبيرة بما يكفي لتناسب تلك المنطقة إذن حاوية هذه الصورة تحدد جزئيًا كم هي كبيرة الآن سنذهب هنا إلى الفئة لأن هذا المستند يحتوي بالفعل على بعض العناصر المضمنة في CSS لذلك إذا نقرنا على هذه الفئة ونختار الصورة المصغرة للوسائط للفئة يمكننا أن نرى كيف أنها تقوم بتوسيطها وجعلها مناسبة بشكل جيد في تلك المنطقة ويمكننا القيام بذلك من العرض الحي الآن مع الصور الموجودة في المستند الأخير وبهذه الصورة هنا الآن كل ما يفعلونه هو إظهار أيقونة فيس بوك ولكن يمكنك أن تحويل أي صورة الي ارتباط في الوحدة الخامسة لإنشاء الارتباط أنشأنا الارتباطات من النص لكننا هنا سنتحدث عن كيفية إنشاء الارتباطات من الرسومات لذلك إذا تم تحديد تلك الصورة ويمكننا أن نقول هنا في منطقة المحدد لدينا لقد اخترنا تلك الصورة أسفل مصدر صورتنا مباشرةً في منطقة الارتباط الخاصة بنا، يمكننا فقط كتابة سننشئ رابطًا مطلقًا http://www.facebook.com وليس لدينا صفحة فعلية على فيس بوك ننتقل إليها، لذلك سنقوم بإخراجها إلى موقع فيس بوك نفسه ونضغط على مفتاح إدخال وهذا سيطبق هذا الارتباط على صورتنا في هذا الدرس تعلمت كيفية إضافة ملفات SVG كأيقونات الوسائط وكيفية تغيير حجمها وكيفية إنشاء ارتباطات منها
