افزودن عکس و ویدئو به وب دیزاینر

قبل از این که این آموزش را بیشتر به پیش ببریم ،باید به این نکته توجه داشت که تصاویر و ویدئو ها غالبه توسط تگی احاطه میشوند، بنابراین باید بتوانید تگ های زیر شاخه در وب دیزاینر را مدیریت کنیم.

نحوه ایجاد و مدیریت تگها بصورت زیر شاخه

ابتدا با کمک ابزار یک تگ ایجاد کنید. بعد از اینکه این ابزار را انتخاب و نوع تگ را از نوار آپشن انتخاب کردید، که ما اینجا گزینه پیشفرض یعنی تگ DIV را انتخاب کرده ایم، روی صفحه با موس دراگ می کنید. سپس ابزار انتخاب را برداشته و روی این تگ دبل کلیک کنید. هنگامیکه روی تگی دبل کلیک شود بصورت قرمز در خواهد آمد در این حالت دوباره ابزار را انتخاب و تگ مد نظر را انتخاب و درون تگ اول یک تگ دیگر ایجاد کنید. حالا در خارج از این دو تگ کلیک کنید. به این ترتیب شما تگی را در زیر شاخه تگ دیگر قرار داده اید. برای دسترسی به تگ زیر شاخه باید روی تگ والد دبل کلیک کرد و سپس روی تگ زیر شاخه کلیک کنید. در این حالت در بالای نوار تایم لاین میتوانید لیست شاخه ها را مشاهده کنید. این قسمت به این صورت خواهد بود Body>div>div .

افزودن عکس و ویدئو به وب دیزاینر

شما میتوانید عکس و ویدئو را به صفحه خود وارد کنید. برای اینکار ابتدا دستور file/import assets را اجرا کرده و یا از کلید میانبر Ctrl+shift+I را بزنید.

حالا میتوانید فایل مد نظر خود را انتخاب نمایید . این فایل ها در پوشه Asset در محیط کاری ظاهر میشود.

افزودن عکس ها و ویدئو ها با استفاده از دراگ آنها از کامپیوتر

ویدئو و یا عکس درخواه خود را در کامپیوتر خود انتخاب کنید و آن را به درون محیط کاری نرم افزار بکشید.

شما میتوانید در پنل های سمت چپ پنل library را انتخاب کنید، سپس در این پنل عکس های موجود در Assets را انتخاب و به درون فایل خود دراگ کنید.

در تصویر بالا ما روی عکس خود راست کلیک کرده ایم. سپس گزینه swap image را میزنیم به این ترتیب می توانیم عکس را با عکس های موجود در کتابخانه و یا عکس های روی کامپیوتر خود عوض کنیم.

همانطور که میدانید برای افزودن عکس و ویدئو میتوان از تگ عکس و ویدئو استفاده کرد. برای اینکار مراحل زیر را انجام دهید .

1. روی ابزار  کلیک کنید.
2. برای افزودن عکس از نوار آپشن ایکون را انتخاب و سپس درون تصویر یک ناحیه را دراگ کنید.
3. در قسمت Image properties طول و عرض عکس را میتوان تعیین کرد. از قسمت properties آدرس عکس را وارد کنید. اگر به این پنل بروید کادری با عنوان source را مشاهده می کنید در این کادر باید آدرس عکس را وارد کنید. این آدرس به این صورت وارد میشود /url/name.jpg
4. برای افزودن ویدئو بعد از انتخاب ابزار تگ روی ایکون در نوار آپشن کلیک کنید.
5. برای تعیین آدرس ویدئو باید از پنل properties آدرس ویدئو را انتخاب کنید.

تغییر اندازه ویدئو و عکس در وب دیزاینر

برای تغییر اندازه عکس ها و ویدئو ها هم میتوان آنها را با ابزار انتخاب و تیک زدن گزینه Transform Control مانند هر تگ دیگری تغییر اندازه دهید. همچنین میتوانید با ابزار انتخاب عکس و یا ویدئو را انتخاب کرده و سپس از پنل properties گزینه های عرض و یا ارتفاع و یا هر دو را تغییر دهید تا اندازه تصویر تغییر کند.

براي بهره مندي از مشاوره تخصصي در زمینه طراحی سایت در کرج با شرکت سارگون تماس بگيريد