عنوان : آموزش کامل طراحی سایت (متخصصین ایران)- درس هشت
متخصصین ایران طراحی سایت

گرافیک سایت: عکس ها و رنگ ها

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

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


کار با عکس

1- کار با عکس

برای درج تصویر از تگ img استفاده می شود که برچسب انتهائی ندارد. همه تنظیمات یک جا صورت می گیرد. از عکسها می توانید درون جدول ها و یا تگ های پاراگراف یعنی P استفاده کنید.

ویژگی src

مهمترین ویژگی تگ img ویژگی src است که مخفف واژه source یعنی منبع است. روشن است src مکان ذخیره عکس را نشان می دهد. برای آدرس دهی به عکس مانند آدرس دهی به هر منبع دیگری باید مفهوم url مطلق و url نسبی را بدانید که در بخش اول و سوم توضیح داده شد.

به عنوان یک طراح احتمالا از url نسبی استفاده می کنید. فرض کنید صفحات خود را در یک پوشه در هارد به صورت زیر ذخیره کرده اید:

تگ img

برای نمونه عکس Rose.gif در پوشه img ذخیره شده است. از کدهای زیر برای فراخوانی و درج تصویر استفاده می شود.

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

ویژگی align

با استفاده از ویژگی align="center" می توانید عکس را در وسط خط قرار دهید.

ویژگی alt

با استفاده از ویژگی alt می توانید متنی را وارد کنید که اگر ماوس روی عکس برود آن متن ظاهر می شود. همچنین اگر به هر دلیلی عکس در مرورگر مشاهده نشد به جای عکس متن درون alt نمایش داده خواهد شد. هیچگاه این ویژگی را خالی نگذارید.

ویژگی border

با استفاده از ویژگی border می توانید برای عکس کادر بکشید. اگر برای عکس هایپرلینک درست می کنید بهتر است ویژگی border را صفر قرار دهید.

 

 از چه نوع عکس با چه هدفی استفاده می شود؟ 

 

2- کار با رنگ ها

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

شناسائی کد RGB رنگ ها

برای رنگ ها باید از معادل هگز رنگ ها آگاهی داشته باشید. برای مشاهده هگز تمامی رنگ ها می توانید از نرم افزارهای dreamweaver, photoshop, corel,... استفاده کنید یا به سایتweb-source.net رجوع کنید. برنامه RGBFinder با حجم 40 کیلوبایت نیز می تواند کمک کند.

در هر صورت کد هگز رنگ ها چیزی مشابه 003333# است که دو رقم اول مقدار قرمز، دو رقم دوم مقدار سبز و دو رقم آخر مقدار آبی را تعیین می کنند. تغییر ترکیبات این سه رنگ اصلی یک رنگ جدید ایجاد می کند.

ویژگی bgcolor و color

ویژگی bgcolor رنگ پس زمینه و ویژگی color رنگ متن را تعیین می کند. از این دو ویژگی در تعریف کلاس ها در یک فایل CSS بسیار استفاده می شود. برای نمونه کد زیر رنگ پس زمینه صفحه اصلی را سبز می کند:

برای نمونه می خواهیم یک پاراگراف رنگ پس زمینه یک پاراگراف سبز و رنگ متن آن نارنجی شود. برای ایجاد چنین افکتی کافیست ویژگی style تگ p را مانند زیر مقدار دهید.

در مورد ویژگی style در بخش آموزش CSS توضیحات بیشتری ارائه شده است. همینطور افکت های بسیار متنوع تری نیز قابل ترسیم است.

 

تکنیک های فشرده سازی تصاویر

فضای وب سایت فضای تصاویر کم حجم است. بسیاری نرم افزارها و تکنیک ها برای فشرده سازی و کاهش حجم تصاویر وجود دارد که اگرچه به بهای کاهش کیفیت عکس تمام می شود اما روش هائی وجود دارد که به موازنه صحیحی از هر دو برسی.

راه کار اول استفاده از برنامه فتوشاپ است. در این صورت کافیست عکس را با فتوشاپ باز کنید و سپس از منوی فایل گزینه Save for web را انتخاب کنید. در دیالوگ ظاهر شده می توانید فرمت و کیفیت عکس را دستکاری کنید. بهتر است از فرمت jpg و کیفیت Medium استفاده کنید.

اگر به برنامه فتوشاپ دسترسی ندارید و یک نرم افزار سبک برای دانلود می خواهید نرم افزار JPEG Compressor بسیار مفید است. چون این نرم افزار کرک شده است 




نظر شما درباره این مطلب:




مطالب مشابه

2

آموزش کامل طراحی سایت (متخصصین ایران)- درس نخست


متخصصین ایران طراحی سایت

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


آموزش کامل طراحی سایت (متخصصین ایران)- درس نخست                  (اطلاعات بیشتر)

4

آموزش کامل طراحی سایت (متخصصین ایران)- درس سه


متخصصین ایران طراحی سایت

مدیریت پیوندها: کار با HyperLink


آموزش کامل طراحی سایت (متخصصین ایران)- درس سه                  (اطلاعات بیشتر)

3

آموزش کامل طراحی سایت (متخصصین ایران)- درس دو


متخصصین ایران طراحی سایت

 

اصول درج متن

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

 

 

 

 

 

 


آموزش کامل طراحی سایت (متخصصین ایران)- درس دو                  (اطلاعات بیشتر)

5

آموزش کامل طراحی سایت (متخصصین ایران)- درس چهار


متخصصین ایران طراحی سایت

معرفی تگ های متا

بدون شک وقتی اقدام به فراگیری طراحی سایت نموده اید آنقدر هوشمند...


آموزش کامل طراحی سایت (متخصصین ایران)- درس چهار                  (اطلاعات بیشتر)

6

آموزش کامل طراحی سایت(متخصصین ایران) - درس پنجم


متخصصین ایران طراحی سایت

طراحی جدول

به طور کلی از جدول برای طراحی فضای قالب وب...


آموزش کامل طراحی سایت(متخصصین ایران) - درس پنجم                  (اطلاعات بیشتر)

7

آموزش کامل طراحی سایت(متخصصین ایران) - درس شش


متخصصین ایران طراحی سایت

آموزش CSS

واژه CSS مخفف Cascade Style Sheets جهت طراحی انواع ...


آموزش کامل طراحی سایت(متخصصین ایران) - درس شش                  (اطلاعات بیشتر)