طراحی وب سایت قابل فهم: استفاده از موزیک در صفحه

برای قرار دادن صدا و موزیک در صفحه دو راه وجود دارد: راه اول این است که شما می توانید یک لینک به فایل موزیک ایجاد کنید تا افراد بتوانند آنرا دانلود کنند و سپس به آن گوش دهند. راه دوم جاسازی کردن موزیک در صفحه است.

در ابتدا به اولین روش می پردازیم:

فرض کنید می خواهیم یک فایل صوتی با نام example.mid را در صفحه قرار دهیم. در صورتی که فایل در همان پوشه صفحه قرار داشته باشد می توانیم به این صورت عمل کنیم:

<a href="example.mid">متن لینک موزیک</a>

به این طریق می توان یک لینک به یک فایل موزیک ایجاد کرد. در این مثال ما از یک فایل MIDI استفاده کردیم، همین کار را می توان با فایلهایی با پسوند، wav و aud و اغلب فرمتهای صوتی انجام داد. کاربر پس از باز شدن صفحه لینکی مشابه زیر را خواهد دید که با کلیک کردن بر روی آن دانلود فایل موزیک شروع می شود.

احتمالاً پس از اتمام داتلود فایل پنجره جدیدی باز می شود و شروع به پخش فایل می کند. کاربر بسته به plug-in هایی که دارد ممکن است توانایی جلو و عقب بردن موزیک و متوقف کردن آنرا نیز داشته باشد. در این حالت کاربر توانایی ذخیره فایل صوتی را مانند یک تصویر دارد. کاربر می تواند پنجره جدید را ببندد و به ادامه بازدیدش از سایت بدون صدای موزیک بپردازد. مشکل این روش این است که کاربر باید لینک موزیک را کلیک کند و صبر کند تا آن دانلود شود. البته این مسئله در مواقعی که شما آهنگهای زیادی در صفحه خود دارید می تواند به کاربر کمک کند تا آهنگ مورد علاقه خود را پیدا کند.

جاسازی موزیک در صفحه:

این روش برای پخش یک آهنگ در صفحه روش مناسبی است چون به کاربر اختیارات بیشتری نسبت به یک لینک می دهد. در این روش می تان رابط صدا در صفحه را طوری تنظیم کرد که به صورت خودکار شروع به پخش موزیک کند و یا موزیک را تکرار کند یا آنرا فقط یک بار پخش کند. برای اجرای این روش باید از تگ EMBED استفاده کنید. این تگ مانند تگ عکس مورد استفاده قرار می گیرد. ابتدا باید منبع صدا را مشخص کنیم و بعد در صورت نیاز به تگ فرمانهایی را بافزاییم.

برای نمونه به تگ زیر نگاه کنید:

این تگ به مرورگر می گوید تا فایل صوتی را همان جایی که شما تگ را قرار داده اید در صفحه قرار دهد. در این روش نیز شما مجبور نیستید صرفاً از فایلهای MIDI استفاده کنید و می توانید از فرمتهای دیگر استفاده کنید. همانطور که می بینید در این تگ فرمان " "=src مشخص کننده محل قرار گیری فایل صوتی در سایت شما است. شما می توانید از آدرس کامل فایل در اینجا استفاده کنید یا اگر فایل و صفحه ای که می خواهید فایل در آن شنیده شود در یک پوشه هستند می توانید از نام فایل استفاده کنید.

برای مثال در این روش شما چیزی شبیه این را خواهید دید:

شما می توانید به این تگ فرمانهایی اضافه کنید تا بهتر بتوانید صدای خروجی همچنین ظاهر صفحه را کنترل کنید. در اینجا تعدادی از این فرمانها آورده شده است که می توانید از آنها استفاده کنید:

width :
این فرمان تعیین کننده عرض فایل صوتی در صفحه است. شما با قرار دادن یک عدد در مقیاس پیکسل بین دو دابل کوت این فرمان می توانید تعیین کنید فایل شما با چه میزان عرض در صفحه به نمایش درآید.

height :
این فرمان تعیین کننده ارتفاع فایل صوتی در صفحه است. شما با قرار دادن یک عدد در مقیاس پیکسل بین دو دابل کوت این فرمان می توانید تعیین کنید فایل شما با چه میزان ارتفاع در صفحه به نمایش درآید. معمولاً برای این فرمان از ارتفاع 60 پیکسل استفاده می شود.

"autostart="true :
مرورگر را وادار می کند تا بلافاصله پس از بارگذاری صفحه شروع به پخش فایل صوتی کند. شما می توانید این گزینه را با قرار دادن مقدار false به جای true غیر فعال کنید. معمولاً این گزینه به طور پیش فرض غیر فعال است.

"loop="true :
این فرمان مرورگر را وادار می کند پس از به اتمام رسیدن فایل دوباره از اول آنرا اجرا کند، و این عمل تا هنگامی که صفحه باز است یا کاربر دکمه توقف را کلیک نکرده است ادامه پیدا می کند. شما می توانید با قرار دادن false به جای true این گزینه را غیر فعال کنید. البته معمولاً این گزینه به صورت پیش فرض غیر فعال است.

"hidden="true :
این فرمان به مرورگر دستور مخفی کردن رابط گرافیکی پخش صدا را می دهد. در این صورت کاربران نمی توانند برنامه ای را که صدا را پخش می کند و همچنین دکمه های کنترل آنرا ببینند. در این صورت صدا تا زمانی که به پایان نرسیده یا تا زمانی که تنظیم شده باشد پخش می شود و کاربر نمی تواند از پخش آن جلوگیری کند. این گزینه با قرار دادن false به جای true غیر فعال می شود. به صورت پیش فرض هم این گزینه غیر فعال است.

این هم تگ سازنده مثال بالا:

اصول نوشتن لیستهای کشویی برای استفاده در فرمهای HTML

لیستهای کشویی (Select)

برای ساختن لیستهای کشویی که به کاربران اجازه می دهد یک یا چند گزینه موجود در لیستی را در یک فرم انتخاب کند باید از تگ <select> استفاده کنیم. گزینه های موجود در این تگ بین <option> و <option/> قرار می گردند و پس از گزینه ها تگ پایانی لیست به صورت <select/> نوشته می شود.

در اینجا می توانید یک نمونه از کدی را که با آن یک لیست کشویی ساخته می شود مشاهده کنید:

<select name="someName">
<option value="value 1" >گزینه اول</option>
<option value="value 2">گزینه دوم</option>
<option value="value 3">گزینه سوم</option>
</select>

در این قسمت می توانید لیست مربوط به کد بالا را ملاحظه کنید:

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

از شناسه های زیر می توان در تگ <select> استفاده کرد:

name :
از این شناسه برای تخصیص یک نام به لیست استفاده می شود.

size :
این شناسه مشخص می کند چه تعدادی از گزینه ها در یک زمان قابل مشاهده باشند. در واقع رتفاع لیست را بر حسب تعداد گزینه ها مشخص می کند. مقدار این شناسه باید عددی بزرگتر از صفر باشد.

"multiple="multiple :
در صورتی که این شناسه به تگ <select> اضافه ضود بازدید کننده می تواند بیش از یک گزینه از گزینه های لیست را انتخاب کند.

"disabled="disabled :
این شناسه لیست را برای کاربر غیر فعال می کند و در نتیجه گزینه های آن امکان انتخاب شدن ندارند.

برای مشاهده لیست در حالت غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را مشاهده کنید:

حالت مورد نظر شما : فعال غیر فعال

کادر متنی نمونه :

از رویداد های زیر هم می توانیم در تگ <select> استفاده کنیم:
onfocus, onblur, onchange

وارد کردن گزینه ها به لیست با تگ <option>

برای ساختن گزینه هایی که در لیست نمایش داده می شود باید از تگ <option> استفاده کنیم. با استفاده از مقداری که برای این تگ با استفاده از شناسه value تعریف می کنیم می توانیم در اطلاعات ارسال شده فرم گزینه انتخاب شده توسط بازدید کننده را تشخیص دهیم.

برای تگ <option> هم می توانید از شناسه هایی استفاده کنید که در این جا مشاهده می کنید:

value :
این گزینه مشخص کننده متنی است که در صورت انتخاب شدن گزینه مربوطه به عنوان مقدار لیست کشویی به صفحه action ارسال می شود.

"selected="selected :
از این گزینه برای مشخص کردن گزینه ای که به هنگام باز کردن صفحه به صورت پیش فرض انتخاب شده است استفاده می شود. در صورتی که برای هیچکدام از گزینه های موجود در لیست از این شناسه استفاده نشده باشد گزینه اول به عنوان گزینه پیش فرض استفاده می شود.

استفاده از رویداد های زیر در تگ <option> مجاز است:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

دسته بندی گزینه های لیست های کشویی با استفاده از <optgroup>

اگر یک لیست کشویی طولانی دارید توانید برای سهولت کار برای بازدید کننده گزینه های مرتبط با هم را در یک دسته قرار دهید به صورتی که از سایر گزینه ها جدا باشند. برای انجام این کار می توانید از تگ <optgroup> استفاده کنید. با استفاده از این تگ می توانید گزینه های مورد نظر خود برای یک دسته را بین <optgroup> و <optgroup/> قرار دهید.

کد زیر یک نمونه از لیست کشویی را نشان می دهد که گزینه ها در آن دسته بندی شده اند:

<select>
<optgroup label="عنوان گروه اول">
<option value ="some value "> گزینه اول در گروه اول </option>
<option value ="saab"> گزینه دوم در گروه اول </option>
</optgroup>
<optgroup label="عنوان گروه دوم">
<option value ="mercedes"> گزینه اول در گروه دوم </option>
<option value ="audi"> گزینه دوم در گروه دوم </option>
</optgroup>
</select>

در اینجا می توانید لیست ساخته شده با کد بالا را مشاهده کنید:

استفاده از شناسه زیر در تگ <optgroup> الزامی است :

label :
این شناسه برای هر گروه از گزینه ها یک عنوان یا برچسب مشخص می کند که در لیست در بالای هر گروه نمایش داده می شود و آن گروه را از سایر گزینه ها جدا می کند.

از رویدادهای زیر می توانید در تگ <optgroup> استفاده کنید:
tabindex, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

کادر متنی با بیش از یک سطر (Text Area)

کادر های متنی با بیش از یک سطر (Text Area)

از یک Text Area کاربران می توانند برای وارد کردن تعداد نامحدودی کاراکتر در بیش از یک سطر وارد کنند. بهتر است تا برای متنهای طولانی به جای Text Box از Text Area استفاده کنید تا کاربران راحتتر بتوانند متن خود را مشاهده کنند و یا آنرا ویرایش کنند.

برای ایجاد Text Area باید از تگ <textarea> استفاده کنید. این تگ بر خلاف تگ <input> یک تگ پایانی دارد و باید به وسیله تگ <textarea/> بسته شود. در مثال زیر می توانید کد مربوط به یک Text Area را مشاهده کنید:

<textarea name="someName" cols="40" rows="3">
این متن به صورت متن داخلی کادر نمایش داده می شود
</textarea>

می توانید نتیجه کد بالا را در اینجا مشاهده کنید:

همانطور که مشاهده می کنید متنی که بین تگ ابتدایی و تگ پایانی یک Text Area نوشته شود به صورت پیش فرض در کادر Text Area نمایش داده می شود.

در اینجا می توانید برخی از شناسه های قابل استفاده در تگ <textarea> را مشاهده کنید:

cols :
این شناسه عرض کادر را بر حسب تعداد کاراکتر تعیین می کند. مقدار این شناسه باید عددی مثبت باشد. البته این عرض بستگی به اندازه فونت تعریف شده برای صفحه و مرورگر دارد. استفاده از این شناسه برای تگ <textarea> الزامی است.

rows :
این شناسه مشخص کننده تعداد سطرهای قابل مشاهده در کادر است. این مقدار هم باید عددی مثبت باشد. استفاده از شناسه rows برای تگ <textarea> الزامی است.

name :
از این شناسه می توان برای اختصاص دادن یک نام مشخص به textarea استفاده کرد.

"readonly="readonly :
این شناسه کادر را به صورت فقط خواندنی در می آورد و کاربر نمی تواند متن موجود در کادر را تغییر دهد.

"disabled="disabled :
این شناسه کادر را به صورت غیر فعال در می آورد و بازدید کننده نمی تواند متن موجود در آن را تغییر دهد یا آنرا انتخاب کند. (این رفتار بسته به مرورگر متفاوت است)

برای مشاهده کادر در حالات فقط خواندنی (readonly) و غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در Text Area زیر مشاهده کنید:

حالت مورد نظر شما : فقط خواندنی غیر فعال

کادر متنی نمونه :

کادر کلمه عبور و فیلدهای مخفی در طراحی فرمهای HTML

کادر کلمه عبور (Password)

احتمالاً تا به حال به سایتی برخورد کرده اید که برای ورود به آن نیاز به کلمه عبور داشته باشید. شما مسلماً تمایل ندارید وقتی کلمه عبور خود را وارد می کنید کلمه عبور شما نمایش داده شود و دیگران قادر به مشاهده آن باشند. به همین دلیل معمولاً سایتها برای اینکه کلمه عبور کاربران در هنگام پر کردن فرم نمایش داده نشود از نوعی کادر ورودی استفاده می کنند که کاملاً شبیه کادری است که برای وارد کردن متن استفاده می شود (Text Box) با این تفاوت که به جای نمایش کاراکترهای کلمه عبور به جای هر کاراکتر از یک نقطه یا ستاره (بستگی به مرورگر دارد) نمایش می دهد.

برای ساختن کادر کلمه عبور می توانید از کد زیر استفاده کنید:

کادر به دست آمده مانند زیر است. می توانید متنی را در آن بنویسید و نتیجه را مشاهده کنید:

همانطور که در کد بالا مشاهده می کنید ما از شناسه "size="30 برای این کادر استفاده کردیم. تقریباً همه شناسه هایی که برای کادرهای متنی استفاده می شوند در مورد کادر کلمه عبور هم قابل استفاده هستند.

فیلدهای مخفی (Hidden Fields)

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

در کد بالا شما می توانید مقدار مورد نظر خود را در قالب شناسه value به صفحه action ارسال کنید بدون اینکه در صفحه نمایش داده شود.

طراحی وب سایت قابل فهم

۱۳۸۹ آذر ۱۰, چهارشنبه

استفاده از موزیک در صفحه