نحوه ساخت فایل‌های gif وJpg برای وب

 نحوه ساخت فایل‌های gif برای وب

فایل‌های gif كارایی زیادی دارند از جمله برای استفاده در وب آنها را می‌توان تا حد امكان فشرده كرد. همانطور كه در كارهای عملی بعدی مشاهده خواهید كرد، فایل‌های gif امكان ساخت انیمشن و یا شفافیت را در عین حفظ كوچكی فایل می‌دهند. البته فایل‌های gif از تصاویر عكس بخوبی پشتیبانی نمی‌كنند. در صورتی كه مایلید تا جزئیات بیشتری از فایل‌های عكس در اختیار داشته باشید، استفاده از قالب‌بندی نوع Jpg مناسب‌تر از gif است.

  

باز كردن و ذخیره فایل در فتوشاپ  

 

فایلی كه می‌خواهید به قالب gif تبدیل كنید را در فتوشاپ باز كنید. سپس گزینه File\Save For Web را انتخاب نمائید. كادر محاوره‌ای Save For Web نمایان می‌شود و فتوشاپ یك كپی از فایل اصلی را ایجاد می‌كند و فایل اصلی را بدون اعمال تغییرات ترك می‌كند.

 

انتخاب قالب‌بندی بهینه شده فایل  

 

از اولین منوی كشویی در كادر محاوره‌ای، گزینه gif را انتخاب كنید.

 

تنظیم نوارهای لغزنده Dither و Lossy   

 

نوارهای لغزنده Dither و Lossy را انتخاب كنید. مقدار Lossy را 100 و Dither را 0 تنظیم كنید. برای كاهش اندازه فایل

حتی الامكان باید مقدار Dither را كاهش داده و مقدار Lossy را افزایش دهید. تصویر بر اساس تغییرات اعمال شده شما تغییر می‌كند. برای درك بهتری از تغییرات اعمال شده، به محیط پیش‌نمایش تصویر دقت كنید.

 

 پیش‌نمایش تنظیمات  

 

در برچسب Oplimized كلیك كنید تا نتیجه تغییرات اعمال شده به فایل را مشاهده كنید. در صورتی كه تصویر دانه دانه شد مقدار Lossy را كاهش دهید و در صورتی كه تصویر درخشان شد مقدار Dither را افزایش دهید.

  

 تعیین تعداد رنگها  

 

هدف بعدی، ایجاد یك فایل GIF با حداقل تعداد رنگ‌ها می‌باشد. مقدار 32 یا 64 (برخی فایل‌ها حتی می‌توانند از 8 و یا 4 رنگ استفاده كنند)را تعیین كنید. منوی كشویی Colors را كلیك كرده و تعداد رنگ مورد نظر را از لیست انتخاب نمائید. البته می‌توانید مقدار رنگ‌ها را با انتخاب كردن عدد مربوط در كادر و تایپ مقدار مورد نظر تعیین كنید.

 

ذخیره فایل  

 

دكمة OK را كلیك كنید تا كادر Save For Web بسته شود. كادر محاوره‌ای Optimized As Save باز می‌شود . نام و موقعیت فایل را بررسی كنید و در صورتی كه مشكلی وجود نداشت برای ذخیره فایل دكمة Save را كلیك نمائید.

 

*توجه*

استفاده از جداول 2-UP و 4-UP

اگر در خصوص چندین نوع فشرده سازی دچار شك و تردید هستید بر روی برچسب‌های 2-up و یا 4-up در كادر محاوره‌ای Save For Web كلیك كنید. این برچسب‌ها شما را قادر می‌سازند تا حالت‌های مختلف را در كنار هم مقایسه كنید و حالت مناسب را انتخاب نمائید.

 

پیش نمایش در مرورگر

در صورتی كه مطمئن نیستید فایل‌های تصویری‌تان چگونه در مرورگر دیده خواهند شد، از ویژگی Browser Preview استفاده كنید. در حالیكه هنوز در كادر Save For Web هستید می‌توانید یا بر روی دكمه Browser Preview كلیك كنید و یا از منوی Select Browser برای انتخاب نوع مرورگر استفاده كنید. دكمه و منو پائین كادر محاوره‌ای قرار دارند. در این مثال‌ها، دكمه آیكون Internet explorer را نشان می‌دهد

 

نحوه ساخت فایل‌های Jpg برای وب

قالب‌بندی و فرمت JPEG در فایل‌ها برای تصاویر دارای طیف سایه روشن همانند عكس‌ها بسیار مناسب است. اگر چه فشرده سازی باعث ایجاد حالت پیكسلی در تصویر می‌شود. ولی این حالت به سختی در عكس قابل مشاهده است. فتوشاپ دارای یك عملگر مات كننده‌ در داخل كادر محاوره‌ای JPEG می‌باشد كه استفاده از آن در برخی تصاویر مناسب است. با استفاده از این ابزار می‌توانید بسیاری از لبه‌های تیزی كه در نتیجه كاهش كیفیت در فایل Jpg ایجاد می‌شود را محو و غیرقابل مشاهده كنید.

  

باز كردن فایل در فتوشاپ  

 

گزینه File\Open را در فتوشاپ انتخاب كنید. كادر محاوره‌ای Open نمایان می‌شود. فایلی كه می‌خواهید با استفاده از فرمت Jpeg فشرده شود را انتخاب نمائید.

 

تعیین گزینه‌های Jpeg  

 

گزینه File\Save For Web را برای باز كردن كادر محاوره‌ای Save For Web انتخاب كنید. از لیست كشویی Optimized File Format گزینه JPEG را انتخاب كنید.كنترل كننده اصلی این قسمت نوار لغزنده Quality می‌باشد. این قسمت تنظیم كننده درصد فشرده‌سازی فایل بوده و متناظر با كیفیت است. این قسمت را در وضعیت high ، medium یا low قرار دهید. به یاد داشته باشید كه مقدار بالای كیفیت سبب افزایش حجم فایل می‌شود و كیفیت پائین نیز فایل كوچكی را ایجاد می‌كند.

 

 مقایسه تنظیمات بوسیلهUp-4  

 

در برچسب 4-Up كلیك كنید تا فایل را در 4 حالت مختلف مشاهده كنید. این وضعیت به شما امكان می‌دهد تا با دقت بهتری تنظیمات مورد نیاز برای فایلی با كیفیت خوب و حجم مناسب را انتخاب كنید.

 

 تنظیم نوار لغزنده Blur  

 

برچسب Optimized را برای برگشت به آن صفحه كلیك كنید و نوار لغزنده Blur را افزایش دهید تا ببینید كه آیا این تنظیمات به نرم شدن و وضوح تصویر كمك می‌كند یا خیر. OK را كلیك كنید و فایل را تغییر نام دهید تا بصورت بهینه شده و در یك فایل جداگانه ذخیره شود.

 

باز كردن مجدد فایل  

 

برای بررسی كیفیت تصویری كه ایجاد كرده‌اید گزینه File\Open را انتخاب كنید. از كادر محاوره‌ای Open فایل بهینه شده‌ای كه ایجاد كرده‌اید را انتخاب كنید. برای بررسی مجدد در كیفیت، دو تصویر را با هم مقایسه كنید تا به رنگ بندی مناسبی دست پیدا كنید.

  

آزمایش فیلتر Unsharp Mask  

 

از آنجا كه قالب‌بندی JPEG حالت نرمی در فایل‌های اصلی ایجاد می‌كنند، می‌توانید از یك فیلتر Unsharp Mask برای برگرداندن برخی جزئیات فایل استفاده كنید (هرچند انجام این كار حجم فایل را افزایش می‌دهد).

گزینه Filter\Sharpen\Unsharp Mask را انتخاب كنید. مقدار فیلد Amount را بین 50% تا 100% تعیین كنید و مقدار فیلد Radious را بین 0.7 و 1.0 قرار دهید. در صورتی كه نتیجه مورد قبول بود، برای اعمال تغییرات دكمة OK را كلیك كنید. در غیر این صورت Cancel را انتخاب نمائید.

 

* توجه *

جابجا كردن تصویر

در حالیكه در كادر Save For Web كار می‌كنید می‌توانید نشانگر ماوس را بر روی تصویر در محیط پیش نمایش جابجا كنید. در این حالت شكل نشانگر ماوس بصورت دست تبدیل می‌شود. با پائین نگه داشتن دكمة ماوس می‌توانید تصویر را جابجا كنید بطوریكه جزئیات بیشتری مشاهده شوند. همچنین امكان انتخاب ذره بین و استفاده از بزرگ نمایی و كوچك نمایی نیز وجود دارد.

 

حفظ رنگ‌های یكسان

برای حفظ یكسان‌سازی رنگ‌ها در هنگام فشرده‌سازی تصویر، گزینة ICC Profile را انتخاب كنید.

اموزشHTML

آموزش HTML

همکاران محترم فرهنگی:

آنچه که  قبل از یادگیری HTML لازم است بدانید:

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

1.      شما به یک ویرایشگر متن نیاز دارید. در ویندوز شما می توانید از برنامه Notepad استفاده کنید. از هر نرم افزار ویرایش متن دیگری استفاده کنید اما این نکته را در نظر داشته باشید که نرم افزار WordPad که در ویندوز وجود دارد و نرم افزارهایی مانند Microsoft Office Word و امثال آن برای نوشتن کدهای HTML مناسب نیستند چون در هنگام ذخیره کردن متن این نرم افزارها کدهایی را به آن اضافه می کنند.
نرم افزار Notepad را می توانید از طریق منوی استارت در قسمت Accessories پیدا کنید یا از طریق فرمان Run با تایپ notepad در کادر Open و فشار دادن دکمه Enter.

2.      شما به یک مرورگر وب به انتخاب خود نیاز دارید. می توانید از Microsoft Internet Explorer استفاده کنید که با ویندوز نصب می شود یا از Opera, Mozilla Firefox و نرم افزارهای مشابه که اغلب به صورت رایگان برای دانلود در اینترنت وجود دارند.
بهتر است صفحاتی را که می نویسید با چند مرورگر آزمایش کنید. زیرا در HTML قسمتهایی وجود دارد که مختص به یک مرورگر خاص است و با سایر مرورگرها کار نمی کند.

شما به جایی برای ذخیره کردن متن خود دارید که می تواند جایی روی هارد دیسک شما، یک فلاپی دیسک یا یک سرور باشد. البته شما برای استفاده از HTML نیاز ندارید حتماً به اینترنت متصل باشید، شما می توانید با استفاده از یک مرورگر وب در کامپیوتر خود از HTML استفاده کنید.
برای ذخیره کردن فایلی که با Notepad نوشته اید کافی است از منوی File گزینه Save As را انتخاب کرده و مسیری را برای ذخیره فایل انتخاب کنید و در کادر File Name در پایین پنجره Save As نام فایل را با پسوند html بنویسید. در آخر هم دکمه Save را کلیک کنید.

 اصول نوشتن صفحات HTML

در اینجا می خواهیم به ساختار شناسه ها یا همان تگها (tag) در HTML بپردازیم. یک تگ همیشه با علامت کوچکتر ریاضی یعنی این علامت > آغاز می شود و با علامت بزرگتر < به پایان می رسد. مثلاً تگی که باعث ایجاد زیرخط کلمات می شود اینطور نوشته می شود: این علامت را قبل از متنی که می خواهیم زیر آن خط کشیده شود قرار می دهیم. به این تگ ، تگ ابتدایی (Opening tag) می گویند، که عملیاتی را که شما می خواهید آغاز کنید شروع می کند. به منظور پایان دادن به زیرخط باید از یک تگ پایانی استفاده کنید. یک تگ پایانی با این علامت شروع می شود: />  بقیه تگ مانند تگ ابتدایی می باشد. برای درک بهتر این مطلب به مثال زیر توجه کنید:

Tags and their position

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

tags and their position

نتیجه را به این صورت می بینید:

Tags and their position

در HTML همه تگها به یک تگ پایانی نیاز ندارند. برای مثال تگی که برای وارد کردن عکس استفاده می شود  از این قبیل تگهاست، که به این صورت می باشد:

البته بعداً در مورد این تگ توضیح خواهیم داد در اینجا فقط برای مثال این تگ را آوردیم. موارد دیگری هم با این وضعیت وجود دارند مثلاً <br> که برای رفتن به خط بعدی استفاده می شود، <hr> که برای ایجاد یک خط افقی به کار می رود و <p> که برای رفتن به پاراگراف بعدی استفاده می شود.

در ضمن نیاز نیست که حتماً تگها با حروف بزرگ نوشته شوند. مثلاً <P> همان <p> است. البته در نسخه های جدیدتر HTML توصیه می شود کدهای HTML با حروف کوچک نوشته در XHTML هم نوشتن کدها با حروف کوچک الزامی است. فضای خالی هم بین تگها تأثیری ندارد. مثلاً :

         متن زیرخط دار         

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

متن زیرخط دار

به این طریق هم اگر نوشته شود فرقی نمی کند:


متن زیرخط دار

قالب پایه ای یک فایل HTML مانند زیر است. ببینید می توانید کاری را که تگهای این کد انجام می دهند حدس بزنید؟ البته همه آنها را بعداً توضیح می دهیم.

 



html قالب اصلی


هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است

برای درک بهتر این قسمت سعی کنید تگها را به صورت جفتی در نظر بگیرید (از جایی که باز می شوند تا جایی که بسته می شوند) اولین تگ <html> است که علامت شروع یک متن HTML است و تگ پایانی آن <html/> است که همانطور که ممکن است حدس زده باشید نشانه پایان متن HTML است. هر چیزی در HTML باید بین این دو تگ قرار گیرد. مانند متن، دیگر تگها، عکسها و... چون این دو تگ نشان دهنده آغاز و پایان صفحه شما هستند.

تگ بعدی <head> است. این تگ مشخص کننده بخشی است که شما باید عنوان صفحه، کلمات کلیدی، و دیگر توضیحات خود برای این صفحه را در آن قرار دهید. این بخش با <head/> به پایان می رسد. در مثال بالا تنها قسمت HEAD عنوان صفحه بود که با TITLE مشخص می شود.

تگ <title> به شما اجازه می دهد برای صفحه خود یک عنوان برگزینید. این قسمت مورد استفاده موتورهای جستجو قرار می گیرد و همان متنی است که به هنگام مشاهده صفحه در نوار عنوان مرورگر نشان داده می شود. تا هنگامی که این تگ در قسمت BODY قرار نگیرد در متن شما نشان داده نمی شود. برای پایان دادن به تگ عنوان از این تگ استفاده می شود: <title/> در مثال بالا عنوانی که برای صفحه نشان داده می شود قالب اصلی HTML است.

تگ <body> بخشی را آغاز می کند که در صفحه مرورگر شما به نمایش در می آید. این قسمت جایی است که ما باید کار اصلی خود را در آن انجام دهیم. برای پایان دادن به این تگ از <body/> استفاده می کنیم. در مثال بالا متنی که در صفحه مرورگر دیده می شود به صورت زیر است (البته در اینجا برای نوشته زیر رنگ و فونت نیز انتخاب شده که در قسمتهای بعد به آنها خواهیم پرداخت) :

هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است

چیزی که در اینجا می بینیم متنی است که به صورت ساده نوشته شده و در طرف چپ صفحه قرار دارد.

در درس بعد در مورد چگونگی کار کردن با متنها بحث می کنیم 

برای مطالعه ی ادامه ی بحث روی ادامه ی مطلب کلیک کنید

ادامه نوشته