آموزش طراحی وب سایت قسمت 4 و 5 - طراحی قالب

آموزش طراحی وب سایت قسمت 4 و 5

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

آموزش مقدماتی تا پیشرفته طراحی صفحات وب با HTML

کلیات

یکی از مهمترین ویژگی های صفحات وب به عنوان یک ابزار اطلاع رسانی برخورداری از توانایی به کاربردن صوت و تصویر برای ارایه اطلاعات و جذاب کردن مطالب ارایه شده به مشتریان است افزودن صوت و تصویر به صفحات وب علاوه بر بالا بردن جذابیت صفحات  باعث تاکید بر محتوای صفحات  نیز خواهد شد و از طرف دیگر صوت و تصویر با ایجاد ارتباط تعاملی با مخاطب باعث جلب نظر مشتری به نقاط مختلف سایت میشود در این واحد کار علاوه بر معرفی اصول به کار گیری شناسه های مهم و کاربردی دستورات مرتبط با تصاویر و اصوات در صفحات وب به مسایل مرتبط  با نحوه قرار دادن و به کار گیری متن و تصویر با یکدیگر و فرمت های صوتی و تصویری رایج در وب اشاره خواهیم کرد .

آموزش طراحی وب سایت

به کار گیری شناسه های مهم و کاربرد تگ های تصاویر

یکی از عناصری که باعث جذابیت در وب سایت می شود عنصر عکس یا همان image است . عکس ها زیبایی خاصی به صفحات می بخشند ولی از طرف دیگر تولید دردسر هم میکنند اگر شما تعداد زیادی عکس در یک صفحه بگذارید یا از عکس هایی با حجم زیاد استفاده کنید ان موقع است که بیننده باید مدت طولانی را صرف کند تا صفحه سایت شما را به طور کامل ببیند و همین موضوع باعث از دست دادن یک بیننده میشود که این یک نمره منفی به حساب می اید همان طور که می دانید در ایران و بسیاری از کشور های دیگر به علت پایین بودن سرعت اینترنت دیدن صفحات سنگین بسیار عذاب اور است .پس همیشه تا جایی که میتوانید صفحه را سبک کنید تا برای بیننده خسته کننده نباشد یک سایت موفق سایتی است که بیننده زیاد داشته باشد .مانند همه عناصر داخل صفحه عنصر عکس هم تگ خاص خود را دارد که تگ <img> است و تگ پایان دهنده یا مکمل هم ندارد اما برای مشخص کردن فایل عکس و ادرس دهی ان باید از شناسه ای به نام src در داخل تگ استفاده کنید اگر یک عکس داخل دایر کتوری وب سایت شما باشد دیگر نیازی به ادرس کامل نیست و فقط اسم دایر کتوری و اسم فایل با پسوند مشخصه ان عکس نوشته می شود ولی اگر می خواهید عکسی را از وب سایت دیگری در صفحه خود بگذارید باید ادرس ان وب سایت و دایر کتوری که عکس در ان قرار گرفته و اسم کامل ان فایل را بنویسید .شکل ساده درج تگ تصویر به صورت زیر است :<img      src  = “URL >

مقدار URL در اصل ادرس به همراه نام فایل تصویر است و نام فایل تصویر یاد شده نیز می تواند بجای عبارت URL قرار گیرد به عنوان مثال : <img             src   =”Logo.gif>

در این مثال فایل تصویری Logo.gif در پوشه ای که صفحه وب در ان قرار دارد موجود است و با این تگ تصویر یاد شده در صفحه به نمایش در خواهد امد

  • شناسه های width و height در تگ <img> :

کاربرد شناسه های width و height تعیین پهنا و ارتفاع نمایش تصویر است اگر از این شناسه ها در صفحات وب استفاده نکنید مرورگر ابتدا تصویر را بار گذاری کرده و سپس ارتفاع و پهنای ان را یافته و در نهایت نمایش می دهد با نوشتن مقادیر ی غیر از مقادیر واقعی ارتفاع و پهنای تصویر می توانید ابعاد تصویر فراخوانی شده را تغییر دهید به مثال بعد توجه کنید :

مثال :

<img  src  ="mysite.com/images/logo.gif"width="276"height  ="110">

در مثال یاد شده تصویر Logo.gif که در پوشه images سایت mysite قرار دارد در ابعاد 276 و ارتفاع 110 پیکسل به نمایش در خواهد امد توصیه می شود که در زمان استفاده از تصاویر حتما ابعاد ان را با کمک شناسه های width و height  مشخص کنید در این حالت مرور گر قبل از فراخوانی تصویر میزان فضای لازم برای قرار دادن تصویر در صفحه را پیش بینی و قبل از نمایش کلی صفحه چهار چوب کلی نمایش صفحه را مشخص خواهد کرد . در هنگام استفاده از تصاویر در صفحات وب میتوان یک متن یا عبارت متنی را جایگزین تصویر قرار گرفته در صفحه کرد این کازر به دو دلیل صورت میگیرد : یکی این که می توان متن را در حالی جایگزین تصویر کرد که در زمان قرار گرفتن اشاره گر ماوس نوشته ای در کنار ان به عنوان توضیح تصویر درج شده ظاهر شود دیگر این که در صورتی که مرورگر توانایی نشان دادن تصاویر را نداشت یا کاربر اجازه این کار را به مرورگر نداد مرورگر متنی را بجای توضیح تصویر ظاهر کند .

در مثال زیر ساختار تگ قرار دادن تصویر با شناسه های مربوط اورده شده است :

<img src=  "Images/sample.Jpg"   border  ="0"  width  ="250"  height  ="185"  alt="our  sample"   title  ="This  ts  our  sample   picture">

همانطور که ملاحظه می کنید شناسه border برای اندازه قاب تصویر به کار می رود شناسه های width و height پهنا  و ارتفاع تصویر را بر حسب پیکسل نشان می دهند شناسه alt برای جایگزین شدن متن به جای تصویر (در حالت عادی به عنوان متن کنار اشاره گر ماوس در زمان قرار گرفتن روی تصویر )  شناسه  title برای نمایش متن در زمان قرار گرفتن اشاره گر ماوس روی تصویر به کار می رود  .

مثال : فرض کنید تصویری به نام  logo.gif در پوشه images  از پوشه Myweb قرار دارد این تصویر را با تگ <img>  در صفحه قرار گیرد شناسه title در تگ <img > طوری تعریف شده است که با قرار گرفتن ماوس روی تصویر نوشته کوتاه Hello Class ظاهر شود شکل تگها برای انجام این کار به صورت زیر خواهد بود .

<html>
<head>
<title>logo  sample page </title>
<head/>
<body>
<"p  align="center>
<img   bordea="0"   src="images/logo.gif"   width="227" height="184"   title="hello  Class"></p>t
<body/>
<html/>

مثال: در این مثال شناسه border در تگ <img> طوری تعریف شده است که حاشیه دور تصویر 5پیکسل شود شکل تگها برای انجام این کار به صورت بعد خواهد بود .

<html>
<head>
<title> logo   sample  page </title>
<head/>
<body>
<"p   align="center>
<img  border ="5"  src="images/logo.gif"  width="227" height ="184"  title="Hello  Class"></p>t
<body/>
<html/>

در صورتی که مرور گر بنا به دلایل مختلف قادر به نمایش تصویر نباشد متن و عبارتی که با کمک شناسه alt تعیین شده است نمایش داده خواهد شد همچنین در اغلب در اغلب مرور گرها با قرار گرفتن ماوس روی یک تصویر متن در نظر گرفته شده با گزینه alt نمایش داده می شود

در مرورگرIE شناسه alt عمل شناسه title را نیز به عهده دارد .

  • تصاویر زمینه :

برای به کار بردن یک تصویر از نوع  gif یا Jpg به عنوان تصویر زمینه در یک صفحه وب از شناسه background در تگ <body> استفاده کنید شکل کلی این شناسه با استفاده از یک فایل تصویری به نام bg.gif که در پوشه images از پوشه  Myweb قرار دارد در زیر اورده شده است :

< "body  background =  "images/bg.gif >

مثال: فرض کنید تصویری به نام bg.gif در پوشه images از پوشه Myweb قرار دارد این تصویر رابا شناسه back ground از تگ <body> به عنوان تصویر زمینه قرار گیرد شکل تگ ها برای انجام این کار به صورت زیر خواهد بود .

<html>
<head>
<title>background  sample  page </title>
<head/>
< "body  background="images/bg.gif>
<body/>
<html/>

نحوه چیدمان تصاویر متعدد در صفحه و قرار دادن متن در اطراف عکس

روش های متعددی برای چیدمان تصاویر متعدد در صفحه وجود دارد مهم ترین این روش ها استفاده از جدول است که در واحد کار بعدی در خصوص تراز بندی و طرح بندی صفحه وب با کمک جداول بحث خواهیم کرد روش دیگر برای چیدمان تصاویر استفاده از تگ <p> به همراه شناسه ”  “=align در تگ <img> است .  با استفاده از خصوصیات ارتفاع (height) و پهنا (width)می توانید اندازه یک عکس را داخل صفحه کنترل کنید مقیاس اندازه گیری ارتفاع و پهنا برحسب پیکسل (Pixel) است اگر شما این خصوصیات را کنترل نکنید عکس در اندازه اصلی خود ظاهر می شود به طور مثال می خواهید عکسی را وارد کنید که در صفحه به اندازه 212×210 پیکسل فضا اشغال کند در این صورت از تگ زیر استفاده خواهیم کرد :

<  "img  src="images/duck.gif"  height="210"  width="212>

مثال: فرض کنید تصویری به نام duck.gif در پوشه images از پوشه MYweb قرار دارد ارتفاع و پهنای این تصویر با شناسه های width  و height به ابعاد 212 در 210 پیکسل تعریف شده است شکل تگها برای انجام این کار به صورت زیر خواهد بود

<html>
<head>
<title> 212 x 210  image   size </title>
<head>  <body/>
<  "img  src="images/ duck.gif"  height="210"   width="212>
<body>  </html/>

در مورد واحد پیکسل یا در صد ذکر این نکته ضروری است که مرورگر وب ابعاد صفحه وب فراخوانی شده را براساس تفکیک پذیری صفحه نمایشگر کامپیوتر (Resolution) از گوشه سمت چپ و بالی صفحه بطرف گوشه سمت راست و پایین صفحه وب می خواند برای تعیین ابعاد محتویات هر صفحه وب از واحد پیکسل (1 پیکسل معادل 0/04 سانتی متر است ) استفاده میکند مرورگر این توانایی را نیز دارد که نسبت ابعاد محتویات داخل هر صفحه وب (شامل جداول , تصویر و …) را براساس نسبت در صد ابعاد یک پنجره مرور گر اندازه گرفته و نمایش دهد .شما میتوانید محل قرار گرفتن عکس را نسبت به عناصر اطراف ان با شناسه  align در تگ <img> تعیین کنید و می توانید مقادیر  left,  right , top , middle , bottom را برای این خصوصیت به کار ببرید فرض کنید می خواهید یک متن بعد از عکس و در طرفین عکس قرار بگیرید در این صورت از تگی مانند تگ زیر استفاده خواهید کرد :

<img  src="images/duck. gif"   align="middle">  this  is  a  middle  aligned  text>

مثال: فرض کنید تصویری بنام duck.gif در پوشه images از پوشه Myweb قرار دارد ارتفاع و پهنای این تصویر را با شناسه های width و height به ابعاد 212 در 210 پیکسل تعریف کرده اید و می خواهید متن This is a middle aligned text در بخش میانی تصویر مورد نظر مشاهده شود شکل تگها برای انجام این کار به صورت زیر خواهد بود .

<html>
<head>
<title>Text   align</title>
<head/>
<body>
<img      src="images/duck.gif"      heigh="210"        width="212"  align="middle">  thisis a  middle   aligned   text
<body/>
<html/>

دو شناسه  hspace و vspace در تگ <img> حاشیه و فضای خالی دور تصویر را ایجاد می کنندکهhspace برای ایجاد حاشیه چپ و راست عکس و vspace برای ایجاد حاشیه بالا و پایین تصویر به کار می روند عددی که وارد می کنید در مقیاس پیکسل است .

مثال : فرض کنید تصویری به نام duck.gif  در پوشه images از پوشه Myweb قرار دارد ارتفاع و پهنای این تصویر را با شناسه های Width و height به ابعاد 130 در 123 پیکسل تعریف کرده اید و می خواهید حاشیه متنها و سایر عناصر صفحه از اطراف عکس 50 پیکسل باشد شکل تگها برای انجام این کار به صورت زیر است .

<html>
<head>
<title>Image   space</title>
<head/>
<body>
<img     src ="images/duck.gif"       hspace="50"         vspace="50"      width="130"   height="123"   align="middle">
This    is     Text<p>This     is   Text   </p>
<body/>
<html/>

نکته:

  • برای این که تصویر در یک خط جدید قرار گیرد قبل از تگ استفاده از تصویر یک نتگ  p یا br تایپ کنید
  • صفحات و تصاویر درون انها را به گونه ای طراحی کنید که مدت زمان  download انها از 10 ثانیه تجاوز نکند یکی از روش ها این است که برای هر یک از تصاویر بزرگ یک نمونه کوچک تهیه کرده و درون صفحه قرار دهید و سپس به بیننده اجازه دهید که تصویر دلخواه خود را انتخاب کرده و نمونه بزرگ ان را تماشا کند .
  • با استفاده از شناسه border تصاویر خود را درون کادر قرار دهید این شناسه به صورت border = “nنوشته میشود n مقدار ضخامت کادر بر حسب پیکسل است
  • برای مشاهده عملکرد اصلی شناسه های  alt و titl کافی است در تنظیمات IE گزینه نمایش تصویر را غیر فعال کنید .

تصاویر کوچک

تصاویر بزرگ یا تصاویر متعدد با حجم زیاد برای کاربران خسته کننده هستند چرا که هر یک از تصاویر متعدد یا یک تصویر بزرگ باید در کامپیوتر کاربر (که معمولابه وسیله مودم به اینترنت متصل شده است )بارگذاری شود از طرف دیگر همه کاربران از مانیتور یا نمایشگرهای 21 اینچ استفاده نمی کنند در صورتی که ارتفاع و پهنای تصاویر به کار رفته بیش از 480 در 300 پیکسل باشد کاربران برای دیدن تمتم عکس مجبور خواهند بود از نوار پیمایش استفاده کنند .در طراحی موثر یک صفحه با تصاویر بزرگ بهتر تصاویر کوچکی در صفحه جای گذاری شده و به تصاویر بزرگتر پیوند داده شوند .

تصاویر بزرگ

استفاده از تصاویر بزرگو با حجم زیاد مگر در موارد بسیار استثنایی کاربرد چندانی در وب ندارد در صورت نیاز به استفاده از تصاویر بزرگ در صفحات وب طراحان معمولا این صفحات را به به وسیله نرم افزار های ویرایشگر تصاویر نظیر فتو شاپ به چند تصویر کوچک برش زده و با نامهای متوالی در پوشه تصاویر (images) در کنار صفحه وب ذخیره  می کنند .

تگ<HR>

این تگ از نوع تگهای بدون مکمل بوده و نیازی به تگ <HR/> ندارد این تگ برای ایجاد خط افقی در صفحه برای جدا کردن بخش های مختلف صفحه به کار می رود ساختار کلی تگ <HR> در زیر اورده شده است :

hr  align+”    ”    color=”    ”    dir=”    ”   noshade=”    ”    size=”   ”   width=”   “>t>

شناسه align مقادیر  Justify , left , right و center را میگیرد شناسه color رنگ خط افقی را برحسب مقادیر ترکیب رنگهای سبز , قرمز , ابی (به پایان همین واحد کار مراجعه کنید ) و شناسه dir مقادیر ltr و rtl را میگیرد که ltr به معنی چپ به راست (چین چین) و rtl به معنی راست به چپ (راست چین ) است شناسه noshade بدون مقدار و برای حذف سایه خط افقی است شناسه size پهنای خط افقی را بر حسب واحد پیکسل یا نسبت در صد خط به پهنای صفحه وب را مشخص کرده و شناسه width ارتفاع (ضخامت) خط افقی را بر حسب واحد پیکسل یا نسبت درصد خط به پهنای صفحه وب معین می کند

مثال: فایلی با تگهای زیر با نام horizontwo.htm در پوشه Myweb ایجاد و اجرا کنید .

<html>
<head>
<title>Horizontal  Line</title>
<head/>
<body>
<"HR    color="#FF0000"   width="350>
<body/>
<html/>

مثال:فایلی با تگهای زیر با نام horizonthree.htm در پوشه Myweb ایجاد و اجرا کنید

<html>
<head>
<title>Horizontal   Rule</title>
<head/>
<body>
<hr   noshade   size="5"   width="350"   color="#FF3300"><br>
<"hr   color="#000080"   dir="   "    color="#000080>
<hr    align="left"     dir="dir="left"             size="1"     width="320"   color="C0C0C0>
<"hr   align="right"     dir="right"      size="1"    width="600"   color="#CC0099>
<body/>
<html/>

نکته:شناسه های مشابه در تگهای مختلف مقادیر مختلفی می گیرند به بیان دیگر مقدار یک شناسه در یک تگ با مقدار همان شناسه در تگ دیگر متفاوت است به عنوان مثال شناسه align در تگ <p> مقادیر left, Justify, center و right را میگیرد در حالی که همین شناسه (align) در تگ <table> مقادیر left , center و right را می گیرد درباره تگ <table> و شناسه های ان در واحد کار بعدی صحبت خواهیم کرد .

انواع فرمتهای صوتی تصویری به کار رفته در وب

مساله استفاده از فایلهای تصویری و ویدیویی کمی متفاوت است برای استفاده از فایلهای صوتی در صفحات وب معمولا کاربر نیازی به نرم افزارهای کمکی ( Plug-in) به همراه مرورگر ندارد در صورتی که برای استفاده از فایلهای ویدیویی کاربر به نرم افزار های کمکی به همراه مرورگر نیاز دارد از طرف دیگر در زمان استفاده از تصاویر محدودیتهایی مانند ابعاد صفحه نمایش یا درجه وضوح نمایشگر وجود دارد نحوه بارگذاری فایل صوتی میتواند متفاوت باشد فیل صوتی میتواند در صفحه وب تعبیه شده و همراه باسایر فایلها نظیر عکسها بارگذاری شود نکته مهم اینجاست که زمان بارگذاری فایلهای صوتی بزرگ زیاد است و بر خلاف فایلهای متنی برای بارگذاری و اجرا  نیاز به زمان بیشتری دارند در حالت عادی و متداول قالب صوتی Mid. در صفحات وب روی صوت زمینه صفحه وب استفاده میشوند متداولترین فایلهای صوتی در وب عبارت هستند از : wav , .mov , .snd , .au , .aif , .mid. و  اswf. اخرین قالب مربوط به فایلهای نرم افزار Flash است که بدلیل حجم کم فیل جایگزین فایلهای متداول صوتی میشوند .

مساله افزایش سرعت بارگذاری سایت طراحی شده در مورد فایلهای گرافیکی مصداق بیشتری میابد  فایلهای گرافیکی علاوه برایجاد قالب های بزرگ برای طراحان خود دامهای پنهانی را نیز برسر راه انها قرار می دهند تنها تعداد کمی از قالبهای تصویر به وسیله مرورگرها حمایت می شوند که هر یک از انها مزایا و معایب خاص خود را دارا هستند و هر یک از قالبهای مفید و مقرون به صرفه نیز محدودیتهای جدیی دارند به همین دلیل طرح مجبور به رقابت و مبارزه برای ایجاد تصاویر جذابی می شوند که بطور سریع بارگذاری شوند متداولترین فایلهای تصویری دارای قالبهای
gif , .Jpg , .png. هستند .

نکته قابل توجه اینجاست که تنها قالبهای gif. و Jpg. به وسیله بیشتر مرورگرها حمایت می شوند و قالبهای دیگر نیز برای اجرا و نمایش نیاز به نرم افزارهای کمکی به نام Plug-ins دارند فرمتهای متعدد صوتی برای استفاده در وب به وسیله طراحان وب مورد استفاده قرار می گیرند که از ان جمله می توان به فرمتهای Au , .Wav , .AIF. و Mid.  اشاره کرد .

 AIF.: این فرمت به وسیله شرکت Apple برای تولید و ذخیره سازی فایلهای صوتی با کیفیت بالا ایجاد شده است این فرمت از فایلهای صوتی به وسیله گروه نرم افزارهای محصول شرکت سیلیون گرافیک و سایر نرم افزارهای حرفه ای صوتی مورد استفاده قرار می گیرد .

Wav. : این فرمت فایل صوتی به وسیله شرکت مایکرو سافت به عنوان فایلهای صوتی و استاندارد ایجاد شده است و پسوند فایلهای دارای این فرمت Wav. است.

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

Mid.: فرمت صوتی Mid. اغلب برای پخش ریتم های موسیقی و شبیه سازی مختلف و نیز ایجاد اصوات بازی های رایانه ای مورد استفاده قرار می گیرد .

به طور کلی فرمت AIF. در کامپیوترهای Apple فرمت Wav. در کامپیوترهای مبتنی بر سیستم عامل های مایکرو سافت فرمت Au. در سیستم عامل های یونیکس و فرمت Mid. در بیشتر کامپیوترهای شبکه اینترنت مورد استفاده قرار می گیرند معمولا فرمت صوتی Mid. کم حجم ترین فرمت صوتی مورد استفاده در وب به شمار می رود .

GIF

یک قلب فایل مستقل است که به نمایش 256 رنگ در ویندوز و 216 رنگ در سیستم عامل مکینتاش محدود می شود GIF مناسب ترین و متداول ترین قالب فایل گرافیکی در وب است GIF به عنوان یک قالب بسیار کم حجم و انعطاف پذیر مورد توجه بسیاری از طراحان وب قرار می گیرد از متداولترین نسخه های این فایل می توان به Gif 89a و Gif 87a اشاره کرد .

خصوصیات مهم فایل های GIF به قرار زیر است :

Animation: از سال 1989 نسخه ای از فایل های GIF به طراحان مختلف این مکان رادارد که رشته متوالی از تصاویر پیاپی در یک فایل واحد را اجرا کنند این انیمیشن ها بدون نیاز به نرم افزار Plog-in قابل اجرا هستند .

Interlacing: این ویژگی قابلیت نمایش تدریجی فایل ذدر زمان بارگذاری تصویر است فایل های GIF این قابلیت را دارند که در صورت تنظیم و ذخیره شدن فایل با خاصیت Interlace در زمان بار گذاری در مرورگر به تدریج با کامل شدن تصویر به نمایش در ایند .

Transparency: این ویژگی باعث می شود که تصویر ذخیره شده از ساختار رنگ زمینه صفحه وبی که در ان قرار گرفته است تبعیت کند به عبارت ساده تر با تغییر رنگ زمینه صفحه وب رنگ زمینه تصویر GIF با خاصیت Transparency هم تغییر خواهد کرد .

JPEG

عکس های JPEG نسبت به فایل های GIF از رنگ های بیشتر و به همین نسبت حجم بالاتری برخوردار هستند به همین دلیل در مدت زمان طولانی تری نسبت به فایل GIF مشابه خود بارگذاری می شوند این فایل ها حداکثر تا 16/7 میلیون رنگ را پشتیبانی می کنند (24 بیت رنگی ) ولی فراموش نکنید که بیشتر کاربران فقط توانایی دیدن 8 بیت رنگ را دارند .

فیلهای JPEG به طور اتو ماتیک فشرده شده و در زمان بارگذاری از حالت فشردگی خارج می شوند البته درجات فشردگی (Compression) بیشتر منجر به افت کیفیت نهایی تصویر خواهد شد نحوه نمایش یک فایل JPEG در مرورگرها و سیستم عامل های مختلف نیز متفاوت است .

JPEG 2000: این قالب فایل جدید به منظور توسعه ویژگی های فشردگی JPEG تولید شده است در این نوع فایل JPEG فشرده سازی در اثر یک  فناوری مواج به وجود می اید و همین امر باعث حفظ کیفیت نسبی تصاویر می شود .

تصاویر JPEG نظیر GIF دارای خاصیت Progressive هستند که شبیه خاصیت Interlacing است .

PNG

این قالب فایل گرافیکی به عنوان یک قالب جدید برای گرافیک وب ایجاد شده است تصاویر PNG بهترین ترکیب از ویژگی های JPG و GIF را در یک قالب واحد دارا هستند با وجود این که W3C از سال 1996 استفاده از این قالب را پیشنهاد کرده است و به دلیل فنی هنوز به اندازه GIF از این قالب فایل استفاده نمی شود .

افزودن صوت و تصویر به صفحه وب

فایلهای صوتی با سایر عناصر به کار رفته در وب تفاوت های اساسی دارند برای دریافت فایل های صوتی کاربران محدودیتهایی نظیر اندازه مانیتور  , سیستم عامل و ….را ندارند در وب فایلهای صوتی به دوروش مورد استفاده قرار می گیرند یکی اینکه فایل صوتی در کامپیوتر کاربر بارگذاری و سپس اجرا شود و دیگر اینکه فایل صوتی به صورت پیوسته (stream) فراخوانی و اجرا شود باید توجه داشت که زمان بارگذاری فایلهای صوتی بزرگ بیشتر از فایلهای متنی بزرگ است .

قالب صوتی wav. را می توان به عنوان صدای زمینه در زمان بارگذاری صفحه یا کلیک کاربر روی یک تصویر یا دکمه استفاده کرد از نظر کیفی ,کیفیت صدا با فرمت wav. از mid. بهتر است از نظر حجم معمولا فایلهای حجیم و سنگین برای بار گذاری در وب مناسب نیستند .

قالب صوتی mid. را نیز میتوان به عنوان صدای زمینه در زمان بارگذاری صفحه یا کلیک کاربر روی یک تصویر یا دکمه استفاده کرد از نظر کیفی کیفیت صدا با فرمت mid. از wav. کمتر است ولی حجم این فایلها برای وب بسیار مناسب است فایلهای صوتی یکی از سنگین ترین عناصر در وب از لحاظ حجم هستند که باید در انتخاب انها بیشتر دقت کنید چون هر چه فایل سنگین تر باشد بارگذاری ان و همچنین صفحه وب کندتزر و خسته کننده تر خواهد شد .

MIME: هنگامی که یک فایل صوتی یا تصویری (معمولی یا متحرک) به صفحه اضافه شود و مرورگر به تنهایی قادر به پخش ان نباشد باید یه کمک یک برنامه کاربردی دیگر این کار را انجام دهد مرورگرها توسط اطلاعاتی که از فایل دریافت می کنند می توانند تشخیص دهند که چه برنامه ای را باید برای پخش ان فایل صدا بزنند که اطلاعات را MIME میگویند .

افزودن فایل صوتی به زمینه صفحه – پخش آهنگ آنلاین در سایت

با اضافه کردن تگ <bgsound> به تگهای صفحه وب می توانید اهنگ یا صدایی را در زمینه صفحه وارد کنید تا هنگامی که بیننده صفحه را باز می کند ان فایل بدون نیاز به برنامه کاربردی دیگری پخش شود این تگ در حال حاضر کاربرد زیادی ندارد چون فقط مرورگر اینترنت اکسپلورر نسخه هی 5.5 به پایین ان را پشتیبانی می کنند این تگ دارای دو خصوصیت src برای ادرس دهی فایل صوتی و loop برای کنترل تکرار دفعات پخش است .

<“bgsound   src=”mymusic.mid”  loop=”2>

یکی دیگر از فایل های اضافه کردن فایل صوتی به یک صفحه وب از طریق قرار دادن تگ ایجاد پیوند و تگ <a> است که بیینده با کلیک کردن روی ان لینک می تواند ان فایل را روی هارد دیسک خود ذخیره کند یا ان را از همان جا اجرا کند , البته در مرورگر اینترنت اکسپلورر نسخه 6.0 ابتدا پیغامی ظاهر می شود که اگر دکمه Yes را کلیک کنید ان فایل توسط خود مرورگر پخش خواهد شد در تگ لینگ باید از خصوصیت href برای ادرس دهی استفاده کنید فقط دقت کنید که پسوندها را درست بنویسید.

<a href="musics/mysong.wav"> music   file  </a>

یکی از مهمترین راههایی که می توان فایل صوتی را به صفحه اضافه کرد از طریق تگ <object> است یکی از مزایایی که این تگ دارد این است که می توانید یک متن را بین تگ اغازین و پایانی اضافه کنید تا اگر مرورگر نتوانست ان فایل را بشناسد نوشته مذکور در صفحه نمایان شود در این تگ برای ادرس دهی از خصوصیت data وبرای تعیین MIME ان فایل از خصوصیت type استفاده می شود همچنین از خصوصیت width و height برای کنترل ارتفاع و پهنای لوگوی برنامه پخش کننده فایل استفاده می شود  و می توان در صورت لزوم  انها را برابر با عدد صفر قرار داد تا لوگو در صفحه ظاهر نشود .

<object data ="musics / mysound . wav" MIME ="audio / wav"   >
Your   browser doesn support this audio format</object>

تکنیک دیگر برای افزودن یک فایل مالتی مدیا به صفحه از طریق تگ <embed> است این تگ استاندارد W3C نیست و در بیشتر مرورگرها اجرا نمی شود از خصوصیت src برای ادرس دهی فایل و برای کنترل ارتفاع وپهنای لوگوی برنامه کمکی می توانید از خصوصیت width وheight استفاده کنید این تگ دارای خصوصیات autostart وloop است که با کمک flash یا true مقدار دهی می شوند .

نکته: 

  • تگ<bgsound> داخل تگ دارای مکمل <head> است .
  • تگ<bgsound> یک تگ بدون مکمل است و نیاز به تگ <bgsound/> ندارد.
  • معمولا فایلهای loop , .Wav یا تکرار نمیگیرند .
  • برای مرورگر Netscape به جای تگ بالا از تگ زیر استفاده کنید :
<"embed  = "file name.mid"  hidden= "true"   autostart ="auto>

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

یک نظر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *