تكامل HTML5 في Dreamweaver

Name: تكامل HTML5 في Dreamweaver
Author: Patti Scully-Lane

يمكنك بسهولة إضافة ملفات الفيديو والصوت والرسوم المتحركة إلى صفحاتك في دريم ويفر باستخدام مجموعة وظائف HTML5. يتيح لك ذلك إنشاء وإضافة محتوى صوتي ومرئي جذاب…

شاهد الدرس الأول مجانًا — احصل على وصول كامل إلى جميع الدروس الـ3.

اطلب عرضًا توضيحيًا تسجيل الدخول

دورة تدريبية: عند الطلب

في هذا الدرس سوف تتعلم كيفية إضافة فيديو HTML5 إلى صفحة في أدوبي دريم ويفر الآن، قبل أن نبدأ علينا إنشاء موقع لهذه الوحدة ولذا سننتقل إلى القائمة موقع، ثم إلى موقع جديد سنقوم بالنقر فوق رمز المجلد هنا الآن لقد قمت بالفعل بوضع مجلد الوسائط للوحدة السادسة من مجلد ملفات الدرس على سطح المكتب حتى يسهل علىّ استخدامه لذلك ستنتقل إلى موقع المجلد الخاص بك وسنضغط على الزر تحديد المجلد سأقوم بتسمية هذا، وسائط الوحدة السادسة وسنضغط على الزر حفظ الآن، إذا لم تقم بإنشاء موقع أو إذا كنت تريد المزيد من المعلومات حول سبب استخدامنا للمواقع بشكل عام يمكنك العودة إلى الوحدة الأولى لإدارة المواقع في دريم ويفر ومعرفة المزيد عن العمل باستخدام المواقع من لوحة الملفات هنا على اليمين سنقوم بفتح المستند featured hike الآن في هذه الصفحة، لدينا featured hike وشلالات Danforth Falls وبها منطقة شلال رائعة حقًا لذا ما نريد فعله هو أننا لا نريد مجرد وضع صورة هنا لكننا نريد وضع مقطع فيديو هنا إذاً ما سنفعله هو أننا سنتأكد من أننا في العرض design وهنا على اليمين سنضغط في الجانب الأيمن وللتأكد من أنك في المكان الصحيح انظر لأسفل هنا في شريط الحالة في الأسفل ويمكنك أن ترى، ينص الجانب aside وأيضاً الحرف الأيمن right article وإذا رأيت ذلك ستعلم أنك في المكان الصحيح باستخدام HTML في الماضي اعتدنا أن نتخطى حلقات التكرار من أجل وضع مقطع فيديو على الصفحة ولكن الآن في HTML5، أصبح الأمر سهلاً للغاية لذلك سوف ننتقل إلى اللوحة إدراج هنا على اليمين سنختار HTML من القائمة المنسدلة في الجزء العلوي من اللوحة وسنقوم بالتمرير لأسفل نحو الجزء السفلي لفيديو HTML5 وسنضغط على ذلك هذه مجرد خطوة واحدة، تضع عنصرًا نائبًا هناك ولكن هنا في لوحة الخصائص هذا هو موقع جميع المعلومات التي نحتاجها لكي يعمل هذا الفيديو بالفعل سننتقل إلى لوحة الملفات انقر مرة أخرى على لوحة الملفات تلك والميزة الأولى وربما الأكثر أهمية في لوحة الخصائص هي المصدر لذلك هذا هو أهم شيء علينا القيام به سنذهب إلى قائمة الوسائط الخاصة بنا في ملفاتنا سنفتح ذلك لأننا سنستخدم أيقونة الهدف أيقونة نقطة الهدف الصغير هذا، على يمين المصدر وسننقر عليها ونسحبها مرة أخرى الي ملف فيديو الشلال الآن، لأن لدينا عنصرًا نائبًا هنا هذا المكان العنصر النائب صغير جدًا وإذا تركناه على هذا النحو هذا هو الحجم الذي سيكون عليه مقطع الفيديو وهو صغير نوعًا ما إذاً سننزل إلى العرض وسنحدد العرض بمقدار 300 والارتفاع بمقدار 500 وهذا هو المكان الذي سيكون فيه الفيديو الخاص بنا عندما يكون لديك مقطع فيديو على الصفحة إذا تركنا الأمر على هذا النحو، عند تحميل صفحتنا فإن ما سيراه كل مشاهدينا سيكون مربع أسود لذلك أسفل المصدر مباشرةً لدينا القدرة على استخدام ما يسمى الملصق والملصق هو مجرد صورة لما قد تراه بمجرد بدء تشغيل الفيديو لذا، سنعود إلى لوحة الملفات وهذه المرة سنفتح مجلد الصور الخاص بنا سنقوم بالتمرير لأسفل والملصق الخاص بنا سنستخدم أيقونة الهدف سنضغط على هذه الأيقونة سنقوم بسحبها إلى صورة waterfall.PNG هذه صورة لذلك الشلال نريد بعض النصوص الاحتياطية لذا، في حالة عدم تمكن أحدهم من رؤية مقطع الفيديو الخاص بنا يمكننا كتابة فيديو عن الشلالات Danforth Falls خلال الربيع، بعد هطول الأمطار لذلك الماء تتموج وفي أسفل اليسار، لدينا خيارات مختلفة أولًا، لدينا عناصر تحكم، لذا يمكننا الاختيار ما إذا كان بإمكان مشاهدينا وقف التشغيل مؤقتًا أم لا أو تشغيل هذا الفيديو أو حتى إعادة تشغيله لذا، سنترك عناصر التحكم محددة لديك أيضًا القدرة على تحديد التشغيل التلقائي وبمجرد تحميل الصفحة، سيتم تشغيل الفيديو الآن، هذا هو الشيء المتعلق بذلك إذا كنت تريد أن تعمل هذه الميزة فعليًا في المتصفح بعض المتصفحات الحديثة لا تحب ميزة التشغيل التلقائي هذه ولكن إحدى الطرق لتفادي المشكلة هو النقر فوق هذا الزر كتم الصوت الآن، كل ما قمنا به، الكثير من المعاينة التي قمنا بها للصفحات من خلال العرض live لدينا وإذا ذهبنا إلى العرض live يمكننا رؤيته أنه يأخذ وقتاً لكن هذا ليس أفضل مكان لمعاينة الفيديو الخاص بك سنذهب إلى القائمة ملف ثم حفظ وسأذهب إلى المتصفح الخاص بي وسأضغط على Ctrl + O أنا على جهاز كمبيوتر شخصي إذا كنت تستخدم جهاز Mac فستضغط على command + O وسيسمح لنا ذلك بفتح ملف ويجب أن نخرج إلي موقع مجلد وسائط الوحدة السادسة وسننقر نقرًا مزدوجًا على هذا ملف فيديو featured hike لفتحه حتى تتمكن من رؤية أن الفيديو قد بدأ والآن هو قيد التشغيل ولكن من الأشياء التي يسلبها التشغيل التلقائي نوعاً ما هو صوت الشلال لذلك يجب أن يعرف المشاهد بادئ ذي بدء، أن هناك صوت وثانيًا، يجب أن يعرف إنه يمكنه إعادة تشغيل هذا الصوت ثم ينقر فوق زر التشغيل هذا حتى يمكنك سماع هذا الصوت سأعود إلى دريم ويفر لذلك يجب أن تقرر ما إذا كنت تريد تشغيل الفيديو الخاص بك أم لا، وتريد تشغيله تلقائيًا في البداية أم لا إذا كنت تريد ذلك، هل تحتاج إلى الصوت أم أنه من الجيد أن يتم كتم الصوت؟ وهل ستمنح المستخدم التحكم في تشغيل الفيديو وإيقافه مؤقتًا؟ في هذا الدرس، تعلمت كيفية إضافة فيديو HTML5 إلى صفحة في أدوبي دريم ويفر

متوسط مقدِّم الخدمة : Patti Scully-Lane 3 الدروس · 21m باللغات: العربية, الألمانية, الإنجليزية, الإسبانية, الفرنسية, البرتغالية, الأوردية, Chinese

وصف الدورة

يمكنك بسهولة إضافة ملفات الفيديو والصوت والرسوم المتحركة إلى صفحاتك في دريم ويفر باستخدام مجموعة وظائف HTML5. يتيح لك ذلك إنشاء وإضافة محتوى صوتي ومرئي جذاب إلى موقعك الحالي. في هذه الدروس، ستتعرف أيضًا على أن طريقة العرض Live لا تصل إلا بعيدًا عند معاينة الملفات في دريم ويفر. تتيح لك ميزة معاينة الوقت الفعلي أن ترى كيف ستبدو صفحاتك في نافذة المتصفح الفعلية.

ما ستتعلمه

إضافة فيديو HTML5 إلى صفحاتك في Dreamweaver
إدراج ملفات صوتية في موقعك القائم
إدراج تحريك HTML5 لإنشاء محتوى مرئي جذاب
إضافة الفيديو والصوت والتحريك باستخدام مجموعة وظائف HTML5
معاينة الصفحات في نافذة متصفح فعلية باستخدام ميزة المعاينة في الوقت الفعلي

النقاط الرئيسية

يتيح لك Dreamweaver إضافة الفيديو والصوت والتحريك إلى صفحاتك باستخدام مجموعة وظائف HTML5.
تتيح لك إضافة محتوى HTML5 الصوتي والمرئي إنشاء وسائط جذابة لموقعك القائم.
تبلغ طريقة العرض المباشر حدودها عند معاينة الملفات في Dreamweaver.
تتيح لك ميزة المعاينة في الوقت الفعلي رؤية كيفية ظهور صفحاتك في نافذة متصفح فعلية.
معاينة صفحاتك في متصفح أمر مهم ولا ينبغي الاكتفاء بطريقة العرض المباشر.

الأسئلة الشائعة

ما الذي يغطيه هذا المقرر؟

يغطي كيفية إضافة الفيديو والصوت والتحريك إلى صفحاتك في Dreamweaver باستخدام مجموعة وظائف HTML5، وكيفية معاينة الصفحات باستخدام ميزة المعاينة في الوقت الفعلي.

ما الدروس المضمَّنة في هذا المقرر؟

يتضمن المقرر ثلاثة دروس: إضافة فيديو HTML5، وإضافة ملفات صوتية، وإدراج تحريك HTML5.

ما المهارات التي سأكتسبها من هذا المقرر؟

ستطور مهارات في Adobe Dreamweaver وHTML5 وHTML5shiv ومحتوى الويب التفاعلي والتطوير التفاعلي للويب وإنشاء صفحات ويب تفاعلية.

لماذا يُركِّز المقرر على المعاينة في المتصفح؟

لأن طريقة العرض المباشر تبلغ حدودها عند معاينة الملفات في Dreamweaver، تتيح لك ميزة المعاينة في الوقت الفعلي رؤية كيفية ظهور صفحاتك في نافذة متصفح فعلية.