آموزش کامل فتوشاپ

تعدادی نرم افزار موجودند که همیشه اسم و نام آن ها بر سر زبان ها بوده و اینقدر معروف هستند که همه آن ها را می شناسند. نرم افزار هایی که هر جا نام آن برده شود همه از خصوصیات آن خواهند گفت. معروفیت این ابزار ها تقریبا شبیه به ویندوز است. شاید کمتر کسی باشد که نام ویندوز را نشنیده باشد و شاید کمتر کسی هم باشد که نام Adobe PhotoShop را نشنیده باشد. نرم افزاری بسیار کامل ، بسیار معروف که در سراسر دنیای رایانه یکی از معروف ترین ها محسوب می شود و دسته کمی از معروفیت سیستم عامل ویندوز ندارد.در یک کلام یکی از " ترین های " دنیای رایانه و خصوصا گرافیک نامPhotoShop را برای خود برگزیده است.فتوشاپ معروف ترین نرم افزار تولیدی کمپانی بسیار معروف Adobe است. شرکتی بسیار قدرتمند که بعد از مایکروسافت دومین شرکت نرم افزاری دنیای رایانه به اعتقاد خیلی ها به شمار می رود. قدرت Adobe بر هیچ کس پوشیده نیست ، این کمپانی چندین سال است که با کنار زدن رقبا بر بلندای گرافیک رایانه ای ایستاده است و باز هم شاهکار این کمپانی یعنی فتوشاپ با به روز رسانی در اختیار کاربران قرار گرفت. در مورد این که فتوشاپ این همه معروف و محبوب است دلایل متعددی را می توان برشمرد . استفاده آسان که مهم ترین دلیل استفاده است . افکت ها و براش های بسیار زیاد و متنوع ، پشتیبانی تقریبا همه فرمت های تصویری ، نقاشی آسان ، تفکیک رنگ ها ، امکانات فوق العاده همگی بخشی از توانایی های فروشگاه عکس (PhotoShop) هستند.
نسخه ی جدید این نرم افزار به تازگی از سوی Adobe به همگان معرفی گردیده و آماده استفاده گردیده . فتوشاپ یکی از نرم افزاری های مجموعه بی نظیر Adobe Master Collection CS4 است که تمامی نرم افزار های نسخه CS4 را در خود جای داده است. پردازشگر تصویر فتوشاپ نهایت هنر یک کاربر را می تواند برای بازدید کننده نمایان کند. ارتباط قدرتمند و کامل فتوشاپ با دیگر نرم افزار های کمپانی ادوبی باعث شده تا انتخاب اول کاربران Photoshop باشد. نسخه جدید با تغییرات و امکاناتی فوق العاده در دسترس قرار گرفته است . فتوشاپ چند سالی است که به صورت دو نسخه ارائه می گردد Adobe Photoshop CS4 و Adobe Photoshop CS4 Extended که فقط به ظاهر در یک کلمه Extended با هم تفاوت دارند اما در عمل تفاوت های زیادی را نمایان می کنند . کامل ترین نسخه ای که به بازارها عرضه می گردد همین نسخه Extended است.
محیط گرافیکی فتوشاپ 11 کاملا تغییر و بهینه شده است تا بازهم کاربران به آسانی کار ویرایش را انجام دهند. البته براش ها و افکت های بسیار زیبا و جدیدی به نسخه جدید اضافه گردیده اند. در نسخه جدید حتی می توان با کمی حوصله فایل های 3D و به صورت انیمیشن طراحی کرد . در نهایت هم هنر ادوبی با ارائه فرمتی جدید یعنی PSB که مختص فتوشاپ بوده و قدرت پردازش تصویر تا حجم بی نظیر 2 گیگابایت را به کاربران هدیه می کند.
با این همه قابلیت و شهرت جای هیچ گونه فکر برای دانلود Adobe Photoshop CS4 Extended باقی نمی ماند.
قابلیت های کلیدی نرم افزار Adobe Photoshop CS4 Extended:
- محیطی کاملا ساده در عین جذابیت و کارآیی فوق العاده بالا
- پشتیبانی از تقریبا همه فرمت های تصویری موجود
- استفاده از کیفیت فوق العاده بالا و کم نظیر HDR
- طراحی تصاویر سه بعدی
- طراحی انیمشن که در نسخه جدید به صورت کامل اضافه شده است
- نمایش رنگ ها با معیارهای مختلف
- تفکیک رنگ ها به سادگی
- ترکیب چند رنگ برای بدست آوردن رنگ مورد نظر
- افکت ها ، براش هایی فوق العاده زیبا و بسیار متعدد
- قابلیت زوم کردن به درجه بسیار بالا برروی تصاویر
- سازگاری با دیگر نرم افزارهای ادوبی نظیر Adobe After Effects ، Adobe Premiere ، Adobe Illustrator ، Adobe Encore DVD و ...
- ساخت منوها برای فیلم های با کیفیت DVD
- امکان چند لایه سازی تصاویر برای اعمال تغییرات به صورت حرفه ای
- امکانات کامل برای اعمال تغییرات بر روی تصویر نظیر چرخاندن ، زوم ، تغییر اندازه ، تغییر در رنگ و ...
- سازگاری کامل با Lightroom
- ارتباطی قدرتمند با فتوشاپ میان رایانه و دستگاه های دیجیتالی
- قابلیت تغییرات برروی فیلم ها به صورت فریم به فریم بدون کوچکترین تغییراتی در کیفیت
- نهایت کیفیت در چاپ صفحات
- قابلیت چرخش تصاویر به صورت 360 درجه
- تغییر زاویه نور تصاویر به سادگی و کاملا سفارشی- قابلیت فوق العاده مفید Tab Browsing که به سرعت کار حرفه ای ها کمک می کند
- سازگاری با نرم افزار Adobe Acrobat و فرمت معروف PDF
- یکی کردن تصاویر ها با تغییر رنگ اتوماتیک
- سازگاری با نسخه های ویندوز XP SP2 و ویندوز محبوب ویستا و ...

درباره : پی دی اف آموزشی , آموزش کامل فتوشاپ ,
برچسب ها : 1. آشنایی با فتوشاپ ,
بازدید : 172

[ 1392/05/01 ] [ 1392/05/01 ] [ هومن آذریان ]

نظرات (0)

14. تغییر رنگ و تصویر زمینه

background-color

این ویژگی به ما اجازه می دهد تا تقریباً برای هر چیزی در صفحه رنگ زمینه مشخص کنیم. برای این کار باید این ویژگی را به همراه رنگ مورد نظر وارد تگ مربوط به قسمت مورد نظر کنیم. اگر بخواهیم زمینه قسمتی از یک متن را مشخص کنیم می توانیم از این ویژگی در یک تگ SPAN در اطراف متن مورد نظر استفاده کنیم.

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

<p>متن بدون زمینه. <span style="background-color: yellow">این قسمت زمینه زرد دارد.</span></p>

این هم متن نهایی:

متن بدون زمینه. این قسمت زمینه زرد دارد.

همینطور می توانیم از این ویژگی برای تغییر زمینه یک جدول یا DIV هم استفاده کنیم:

این هم جدول به دست آمده:

سلول اول

سلول دوم

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

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

این هم فرم آزمایشی ما:

نام :

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

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

background-image

این ویژگی برای مشخص کردن تصویر زمینه به کار می رود.کاربرد background-image همانند background-color است با این تفاوت که به جای مشخص کردن رنگ باید یک تصویر را تعیین کنیم. این ویژگی به صورت زیر نوشته می شود.

background-image:url(آدرس تصویر مورد نظر)

بعد از نام ویژگی باید از url برای مشخص کردن آدرس تصویر استفاده کنیم. آدرس تصویری که می خواهیم به عنوان زمینه استفاده کنیم نیازی نیست بین علامتهای نقل قول ( " ) قرار گیرد ولی باید بین دو پرانتز قرار گیرد.
به یک مثال در این رابطه توجه کنید:

<span style="background-image: url(http://www.neopersia.org/css/example1.gif)">برای این span از تصویر زمینه استفاده شده است.</span>

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

برای این span از تصویر زمینه استفاده شده است.

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

<table border="1" style="background-image: url(http://www.neopersia.org/css/example1.gif)">
<td>محتویات سلول اول</td>
<td>محتویات سلول دوم</td>
</table>

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

محتویات سلول اول

محتویات سلول دوم

همانطور که برای text box از رنگ زمینه استفاده کردیم برای آن از تصویر زمینه هم می توانیم استفاده کنیم. در اینجا از این ویژگی برای یک textarea استفاده می کنیم:

درباره : پی دی اف آموزشی , آموزش کامل فتوشاپ ,
برچسب ها : 14. تغییر رنگ و تصویر زمینه ,
بازدید : 273

[ 1392/05/01 ] [ 1392/05/01 ] [ هومن آذریان ]

نظرات (0)

15. تغییر شکل نشانگر ماوس

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

cursor: نوع نشانگری که مورد نظر ماست

برای مثال فرض کنید می خواهیم وقتی نشانگر ماوس روی یک قسمت متن قرار می گیرد به شکل ساعت شنی در آید. می توانیم به صورت زیر عمل کنیم (ما برای مشخص شدن متن از رنگ قرمز در تگ span استفاده کرده ایم.):

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

ماوس خود را روی این متن قرار دهید.

اگر بخواهید وقتی ماوس کاربر روی یک قسمت مشخص از صفحه مثلاً جدولها قرار می گیرد شکل خاصی داشته باشد می توانید در بخش HEAD صفحه این ویژگی را برای جدول تعریف کنید تا در همه جدولهای صفحه به کار گرفته شود. از class و id هم می توانید استفاده کنید. روش ساده تر هم استفاده از شناسه style در تگهای HTML است.

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

مقدار قابل استفاده	توضیحات
auto	این گزینه نشانگر ماوس را با توجه به تنظیمات مرورگر کاربر تغییر می دهد.
crosshair	نشانگر ماوس به صورت به علاوه در می آید.
default	نشانگر ماوس به صورت همان فلش همیشگی در می آید.
move	نشانگر به شکلی در می آید که در هنگام جا به جا کردن چیزی به خود می گیرد.
pointer	نشانگر به شکل دست در می آید.
help	یک علامت سؤال کنار پیکان نشانگر ماوس قرار می گیرد.
text	به شکلی در می آید که بر روی متنها به خود می گیرد.
wait	به شکل ساعت شنی در می آید.
n-resize	یک فلش به سمت شمال
s-resize	یک فلش به سمت جنوب
e-resize	یک فلش به سمت مشرق
w-resize	یک فلش به سمت مغرب
ne-resize	یک فلش به سمت شمال شرقی
nw-resize	یک فلش به سمت شمال غربی
se-resize	یک فلش به سمت جنوب شرقی
sw-resize	یک فلش به سمت جنوب غربی

درباره : پی دی اف آموزشی , آموزش کامل فتوشاپ ,
برچسب ها : 15. تغییر شکل نشانگر ماوس ,
بازدید : 262

[ 1392/05/01 ] [ 1392/05/01 ] [ هومن آذریان ]

نظرات (0)

13. تنظیم رنگ متن با CSS

از ویژگی color برای تغییر رنگ متن قسمتهای مختلف صفحه استفاده می شود. برای مثال می توانید رنگ متن یک جدول را تغییر دهیم و یا قسمتی از متن صفحه را که با تگ SPAN مشخص کرده ایم با رنگ متفاوتی با بقیه متن نمایش دهیم. این تگ از آن جهت که کاربرد تگ <FONT> و در نتیجه شناسه color که در تگ فونت استفاده می شود، در HTML4 در حال محدود شدن است اهمیت بیشتری پیدا می کند.

البته در قسمتهای قبلی هم از این ویژگی استفاده کرده ایم اما در باره آن توضیحی داده نشده است.

مانند COLOR در تگ FONT رنگها در این ویژگی به دو صورت تعیین می شوند. شکل کلی این ویژگی به صورت زیر است:

color: نام رنگ مورد نظر
color:#معادل هگزادسیمال رنگ

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

در صورتی که می خواهید از رنگهای بیشتری استفاده کنید و بهتر بتوانید رنگ مو رد نظر خود را انتخاب کنید می توانید از معادل هگزادسیمال رنگها استفاده کنید. در این صورت می توانید از 216 رنگ مورد استفاده در وب رنگ مورد نظر خود را انتخاب کنید.

در اینجا به ذکر چند مثال برای استفاده از ویژگی color می پردازیم. ما در اینجا از شناسه style برای تعریف کردن این ویژگی استفاده می کنیم اما به خاطر داشته باشید که می توانیم این ویژگی را برای یک تگ مشخص یا به صورت class و id در بخش HEAD متن یا استایل خارجی نیز به کار ببریم.

برای مثال در استفاده از color برای تغییر رنگ متن یک جدول می توانیم کد جدول را به صورت زیر بنویسیم:

<table border="1" style="color: red">
    <tr>
        <td>
            این متن به رنگ قرمز نمایش داده می شود.
        </td>
    </tr>
</table>

نتیجه کد بالا با کدی که در پایین آمده است یکسان است:

<table border="1" style="color: #FF0000">
    <tr>
        <td>
            این متن به رنگ قرمز نمایش داده می شود.
        </td>
    </tr>
</table>

نتیجه هر دو کد بالا به صورت زیر است:

این متن به رنگ قرمز نمایش داده می شود.

به یاد داشته باشید که می توانید از ویژگی color برای هر کدام از سطرها یا سلولهای یک جدول به صورت جداگانه استفاده کنید. فقط کافیست تا "style="color: XXX را در هر قسمت قرار دهید و رنگ مورد نظر خود را به جای XXX قرار دهید.

درباره : پی دی اف آموزشی , آموزش کامل فتوشاپ ,
برچسب ها : 13. تنظیم رنگ متن با CSS ,
بازدید : 283

[ 1392/05/01 ] [ 1392/05/01 ] [ هومن آذریان ]

نظرات (0)

12. تنظیم فونت با CSS

در این قسمت به روش تنظیم فونت متن با استفاده از استایل می پردازیم. بسیاری از اعمالی را که قبلاً با تگ <font> انجام می دادیم می توانیم با استایل انجام دهیم.

font-family

ویژگی font-family مشخص می کند که متن با چه فونتی باید نشان داده شود. این ویژگی در حقیقت جانشین شناسه face که در تگ font استفاده می شود است. گزینه پیش فرض برای فونت ممکن است در مرورگرهای مختلف تفاوت داشته باشد، اما معمولاً Times New Roman است.

در مثال زیر از ویژگی font-family برای تغییر فونت متن داخل یک div به Arial استفاده می کنیم:

<div style="font-family: Arial">این متن با فونت Arial نمایش داده می شود.</div>

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

این متن با فونت Arial نمایش داده می شود.

البته باید به خاطر داشته باشید که اگر بازدید کننده فونت مورد نظر شما را نداشته باشد، مرورگر به جای آن از فونت پیش فرض خود استفاده می کند. برای جلوگیری از بروز این مشکل باید از فونتهایی استفاده کنید که معمولاً به همراه سیستم عامل نصب می شوند و در اکثر سیستمها موجود هستند.

font-size

این ویژگی مشخص کننده اندازه فونت در صفحه می باشد. گزینه پیش فرض برای این ویژگی medium است.

فرض کنید می خواهیم متن درون یک DIV با اندازه 30 پیکسل نمایش داده شود:

<div style="font-size: 30px">این متن با اندازه 30 پیکسل نمایش داده می شود.</div>

نتیجه را ملاحظه کنید:

این متن با اندازه 30 پیکسل نمایش داده می شود.

font-style

کار این ویژگی تقریباً شبیه تگ <I> در HTML است، اما چون استفاده از تگهایی نظیر <FONT>, <B>, <U> و <I> در حال کمرنگ شدن است بهتر است از استایل برای مورب نشان دادن متن استفاده شود.این ویژگی می تواند مقادیر زیر را داشته باشد:

normal
italic
oblique

به یک مثال در مورد این ویژگی توجه کنید:

<div style="font-style:oblique">این متن به صورت مورب مشاهده می شود.</div>

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

این متن به صورت مورب مشاهده می شود.

font-weight

این ویژگی به ما امکان می دهد تا میزان ضخامت متن را تعیین کنیم. می توانیم از مقادیر زیر برای این ویژگی استفاده کنیم:

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900

در اینجا به ذکر یک مثال می پردازیم:

<div style="font-weight: 700">این متن تقریباً ضخیم مشاهده می شود.</div>

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

این متن تقریباً ضخیم مشاهده می شود.

درباره : پی دی اف آموزشی , آموزش کامل فتوشاپ ,
برچسب ها : 12. تنظیم فونت با CSS ,
بازدید : 349

[ 1392/05/01 ] [ 1392/05/01 ] [ هومن آذریان ]

نظرات (0)

10. کار با متنها (بخش اول)

در این قسمت برخی از ویژگیهای متن را که در CSS استفاده می شوند به شما معرفی می کنیم. با کمک این ویژگیها می توانیم نحوه قرار گرفتن متن در صفحه، فاصله بین حروف و بسیاری از خواص یک متن را تغییر دهیم.

letter-spacing

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

فرض کنید می خواهیم از این ویژگی برای متن موجود در یک تگ DIV استفاده کنیم:

<div style="letter-spacing:5px">
حروف این متن با فاصله 5 پیکسل از یکدیگر نمایش داده خواهند شد.
</div>

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

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

text-align

این ویژگی به ما اجازه می دهد تا نحوه قرارگیری قسمتی از متن را از لحاظ راست چین، چپ چین یا وسط چین بودن تنظیم کنیم.

این ویژگی می تواند مقادیر زیر را به مورد استفاده قرار دهد:

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

right :
این قدار معین می کند که محتویات یک تگ باید در سمت راست صفحه نمایش داده شوند.

center :
این مقدار محتویات یک تگ را به صورت وسط چین تعریف میکند.

برای مثال اگر می خواهید متنی که در یک DIV قرار دارد به صورت چپ چین نمایش داده شود می توانیم از این ویژگی به مانند زیر استفاده کنیم:

<div style="text-align:left; border:thin dashed #00CCFF">محتویات این DIV در سمت چپ صفحه نمایش داده می شوند.</div>

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

محتویات این DIV در سمت چپ صفحه نمایش داده می شوند.

text-decoration

این ویژگی به ما اجازه می دهد تا برای قسمت خاصی از متن خاصیتهای از قبیل زیرخط تعریف کنیم. مثلاً فرض کنید می خواهیم یک متن را با خطی بالای آن به وجود بیاوریم. در اینجام می توانیم از این ویژگی به صورت زیر استفاده متین:

این هم نتیجه:

به این متن توجه کنید!!

این ویژگی چندین مقدار دارد که در اینجا به آنها می پردازیم:

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

underline :
از این گزینه می توان برای زیر خط دار کردن متنها استفاده کرد.

overline :
این گزینه برای نمایش خط بالای متن استفاده می شود.

line-through :
این گزینه یک خط را در میانه متن ایجاد می کند و آنرا به صورت خط خورده نشان می دهد.

blink :
از این گزینه می توانیم برای چشمک زن کردن متن استفاده کنیم. البته این گزینه توسط مرورگر اینترنت اکسپلورر حمایت نمی شود و فقط در مرورگرهای Netscape نمایش داده می شود.

در اینجا یک لینک را می بینید که با استفاده از ویژگی بالا بدون زیر خط نمایش داده می شود:

<a href="#example" style="text-decoration:none>متن مورد استفاده در لینک</a>

این هم لینک بدون زیر خط:

متن مورد استفاده در لینک

درباره : پی دی اف آموزشی , آموزش کامل فتوشاپ ,
برچسب ها : 10. کار با متنها (بخش اول) ,
بازدید : 240

[ 1392/05/01 ] [ 1392/05/01 ] [ هومن آذریان ]

نظرات (0)

11. کار با متنها (بخش دوم)

در این قسمت به ادامه ویژگیهایی که بر روی متن ها اثر می گذارند می پردازیم.

text-transform

این ویژگی مشخص می کند که متن با استفاده از حروف بزرگ نوشته شود یا حروف کوچک و یا به صورت معمولی البته بدون آنکه در حروفی که تایپ شده است تغییری به وجود آورید. با این روش اگر خواستید قسمتی از متن مثلاً برای تأکید بیشتر با حروف بزرگ مشاهده شود نیازی نیست که دوباره آن قسمت را از اول تایپ کنید. البته این ویژگی در زبان فارسی چندان استفاده ای ندارد ولی در زبانهایی مثل انگلیسی می توانید آنرا به کار ببرید.

به یک مثال در مورد این ویژگی توجه کنید:

<div style="text-transform: uppercase">This is an example of uppercase in text-transform property.</div>

این هم نتیجه:

This is an example of uppercase in text-transform property.

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

این ویژگی چند مقدار دارد که در اینجا مشاهده می کنید:

none :
با انتخاب این گزینه متن به همان صورتی که تایپ شده است نمایش داده می شود.

lowercase :
با انتخاب این گزینه متن با حروف کوچک نمایش داده می شود.

uppercase :
این گزینه متن را با حروف بزرگ نمایش می دهد.

capitalize :
این گزینه حروف اول کلماتی را که با حروف کوچک نوشته شده اند با حروف بزرگ و بقیه حروف را با حروف کوچک نمایش می دهد. به مثال زیر توجه کنید:

<div style="text-transform: capitalize">this is an example of capitalize value for text-transform propety</div>

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

this is an example of capitalize value for text-transform propety

line-height

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

برای مثال اگر بخواهیم سطرها از هم 50 پیکسل فاصله داشته باشند می توانیم به صورت زیر عمل کنیم:

<div style="line-height: 50px">بین این سطر و سطر بعدی<br>20 پیکسل فاصله وجود دارد.</div>

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

بین این سطر و سطر بعدی
20 پیکسل فاصله وجود دارد.

text-indent

این ویژگی مقدار تو رفتگی متن را در سطر اول هر قسمت (مثلاً سطر اول هر پاراگراف) مشخص می کند. این مقدار می تواند بر حسب پیکسل یا در صد باشد.

در مثال زیر این مقدار تو رفتگی را 30 پیکسل در نظر می گیریم:

<div style="text-intend: 30px">
سطر اول این قسمت با 30 پیکسل تو رفتگی نمایش داده می شود.<br>
در حالی که بقیه سطرها به صورت عادی و<br>
بدون تو رفتگی نمایش داده می شوند.
</div>

این هم نتیجه:

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

درباره : پی دی اف آموزشی , آموزش کامل فتوشاپ ,
برچسب ها : 11. کار با متنها (بخش دوم) ,
بازدید : 267

[ 1392/05/01 ] [ 1392/05/01 ] [ هومن آذریان ]

نظرات (0)

9. تغییر موقعیت عناصر صفحه

position

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

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

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

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

static

این ویژگی در حقیقت مشخص می کند که عنصر مربوطه باید در محلی که کد آن نوشته شده نمایش داده شود. وقتی که از این ویژگی استفاده می کنیم ویژگیهای top, left, bottom, right کاربردی ندارند.

این ویژگی به صورت پیش فرض از طرف مرورگر برای صفحه مورد استفاده قرار می گیرد.

fixed

چون اینترنت اکسپلورر بیشتر از سایر مرورگرها مورد استفاده قرار می گیرد و از ویژگی fixed در CSS پشتیبانی نمی کند زیاد به این ویژگی نمی پردازیم. اما در هر صورت ویژگی جالبی است. در اینجا فقط به ذکر یک مثال بسنده می کنیم:

در این مثال از ویژگی position:fixed برای تعیین موقعیت یک DIV استفاده می کنیم:

<div style="position:fixed; top:50%; float:right">اگر با مرورگر netscape یا مرورگرهایی مثل firefox و opera از این صفحه بازدید کنید محتویات این div در میانه صفحه و سمت راست آن به نمایش در می آیند.</div>

اگر می خواهید ببینید این ویژگی چگونه کار می کند لینک زیر را با یکی از مرورگرهای Opera, Netscape یا Firefox مشاهده کنید و صفحه را با استفاده از اسکرول بار به بالا و پایین ببرید:

استفاده از ویژگی position:fixed ( لینک در پنجره جدید باز می شود ).

absolute

ویژگی position:absolute مشخص می کند که عنصر مربوطه باید در محل تعیین شده به نمایش در آید نه محلی که کد آن نوشته شده است.

در اینجا می توانید یک مثال را در مورد استفاده از ویژگی position:absolute در صفحه ببینید:

<div style="position:absolute; top:65px; right:20px; border:double #0033cc; width:350px; color:#ffff00; background-color:#33cccc; height: 40px;">این div در موقعیت تعیین شده در کد آن نمایش داده می شود.</div>

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

استفاده از absolute برای ویژگی position ( لینک در یک پنجره جدید باز خواهد شد ).

top

این ویژگی موقعیت یک عنصر را از بالای صفحه تعیین می کند.( ویژگیهای top, left, bottom, right بیشتر زمانی مورد استفاده قرار می گیرند که برای یک عنصر ویژگی position تعیین شده باشد. )

در مثال قبل همانطور که ملاحظه می کنید از ویژگی top:65px استفاده شده است که این ویژگی معین می کند که DIV با فاصله 65 پیکسل از بالای پنجره مرورگر به نمایش در می آید.

مقداری که برای ویژگیهای top, bottom, left, right در نظر گرفته می شود به صورت می تواند باشد. یا به صورت عددی در واحد پیکسل که در این صورت باید پس از عدد مربوطه از حروف اختصاری px استفاده شود یا به صورت درصد که پس از عدد با ید از علامت درصد (%) استفاده شود.

bottom

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

right

این ویژگی فاصله عناصر را از سمت راست صفحه تعیین می کند. همانطور که در مثال قبل می بینید، از این ویژگی به صورت right:20px استفاده شده است یعنی DIV مربوطه با فاصله 20 پیکسل از سمت راست پنجره مرورگر قرار خواهد گرفت.

left

این ویژگی موقعیت عنصر را از سمت چپ پنجره مرورگر تعیین می کند.

در مثال زیر از ویژگیهای bottom و left برای همان DIV مثال قبل استفاده می کنیم:

<div style="position:absolute; bottom:65px; left:20px; border:double #0033cc; width:350px; color:#ffff00; background-color:#33cccc; height: 40px;">این div در موقعیت تعیین شده در کد آن نمایش داده می شود.</div>

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

استفاده از ویژگیهای bottom و left ( لینک در پنجره جدید باز می شود ).

در مثال ذکر شده DIV به اندازه 65 پیکسل از پایین و 20 پیکسل از سمت چپ پنجره مرورگر فاصله دارد.

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

[ 1392/05/01 ] [ 1392/05/01 ] [ هومن آذریان ]

نظرات (0)

8. حاشیه و تو رفتگی عناصر

حاشیه ها

margin-left

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

<div style="margin-left:200px; border:double">این DIV دویست پیکسل از سمت چپ صفحه فاصله دارد.</div>

همانطور که می بینید کد بالا یک DIV را با کادر مضاعف و 200 پیکسل حاشیه از چپ نشان می دهد:

این DIV دویست پیکسل از سمت چپ صفحه فاصله دارد.

margin-right

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

<div style="margin-right:200px; border:double">این DIV دویست پیکسل از سمت راست صفحه فاصله دارد.</div>

همانطور که می بینید کد بالا یک DIV را با کادر مضاعف و 200 پیکسل حاشیه از راست نشان می دهد:

این DIV دویست پیکسل از سمت راست صفحه فاصله دارد.

margin-top

این گزینه هم مانند گزینه های بالا کار می کند با این تفاوت که میزان حاشیه را از بالای صفحه تعیین می کند:

<div style="margin-top:100px; border:double">این DIV صد پیکسل از بالای صفحه فاصله دارد.</div>

این DIV صد پیکسل از بالای صفحه فاصله دارد.

margin-bottom

این گزینه هم مانند گزینه های بالا کار می کند با این تفاوت که میزان حاشیه را از پایین صفحه تعیین می کند:

<div style="margin-bottom:100px; border:double">این DIV صد پیکسل از پایین صفحه فاصله دارد.</div>

این DIV صد پیکسل از پایین صفحه فاصله دارد.

Padding

padding-right

پارامتر padding در CSS مشابه شناسه cellpadding در جدولهاست که با این تفاوت که می توان آنرا برای بالا، پایین، چپ و راست به صورت جداگانه تعریف کرد به جای اینکه به صورت یکجا تعیین شود. در اینجا می توانید یک نمونه از padding را که برای راست تعریف شده است را ببینید:

<div style="padding-right:100px; border-style:double">برای این DIV معادل 100 پیکسل padding تعریف شده است.</div>

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

برای این DIV معادل 100 پیکسل padding تعریف شده است.

padding-top

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

<div style="padding-top:30px; border-style:double">برای این DIV معادل 30 پیکسل padding تعریف شده است.</div>

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

برای این DIV معادل 30 پیکسل padding تعریف شده است.

padding-left

مانند padding-right است با این تفاوت که برای چپ تعیین می شود.

padding-bottom

مانند padding-top است با این تفاوت که برای پایین تعیین می شود.

به یاد داشته باشید که در صورتی که پارامتر padding بدون right, left, top یا bottom به کار رود مقدار وارد شده برای هر چهار جهت مورد استفاده قرار می گیرد، البته در مورد margin هم به همین صورت است:

<div style="padding:35px; width:250px; border-style:solid ">در این DIV پارامتر padding بر روی هر چهار جهت تأثیر میگذارد.</div>

این هم نتیجه:

در این DIV پارامتر padding بر روی هر چهار جهت تأثیر میگذارد.

درباره : پی دی اف آموزشی , آموزش کامل فتوشاپ ,
برچسب ها : 8. حاشیه و تو رفتگی عناصر ,
بازدید : 158

[ 1392/05/01 ] [ 1392/05/01 ] [ هومن آذریان ]

نظرات (0)

7. ایجاد کادر برای عناصر

border-style

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

none
با استفاده از این مقدار تعیین می کنیم که نمی خواهیم کادر داشته باشیم. در صورتی که مقداری غیر از none تعیین شود کادر خواهیم داشت.

solid

This DIV have a solid border

dashed

This DIV have a dashed border

dotted

This DIV have a dotted border

double

This DIV have a double border

groove

This DIV have a groove border

hidden

This DIV have a hidden border

inset

This DIV have a inset border

outset

This DIV have a outset border

ridge

This DIV have a ridge border

همانطور که می بینید عرض این کادرها بیش از آن چیزی است که ما نیاز داریم چون ما برای این کادرها عرضی مشخص نکردیم. اگر بخواهیم عرض این کادرها به اندازه مشخصی باشد باید از پارامتر width که قبلاً با آن آشنا شدیم استفاده کنیم. به مثال زیر توجه کنید:

<div style="width:300px; border-style:solid">برای این کادر عرض 300 پیکسل تعیین شده است.</div>

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

برای این کادر عرض 300 پیکسل تعیین شده است.

border-width

این پارامتر به ما اجازه می دهد تا میزان ضخامت کادرها را تعیین کنیم. این پارامتر می تواند مقادیر زیر را داشته باشد:

مقدار عددی بر حسب پیکسل
در این روش می توانیم مقدار ضخامت کادر را بر حسب پیکسل تعیین کنیم. به مثال زیر توجه کنید:

<div style="border-style:solid; border-width:10px">این کادر 10 پیکسل ضخامت دارد</div>

این هم کادر به دست آمده:

این کادر 10 پیکسل ضخامت دارد

thin
این مقدار باعث خواهد شد تا کادر ما باریک باشد. مانند زیر:

<div style="border-style:solid; border-width:thin">ضخامت این کادر thin در نظر گرفته شده است.</div>

این هم کادر به دست آمده:

ضخامت این کادر thin در نظر گرفته شده است.

thick
این مقدار به ما یک کادر ضخیم خواهد داد. به مثال زیر توجه کنید:

<div style="border-style:solid; border-width:thick">ضخامت این کادر thick در نظر گرفته شده است.</div>

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

ضخامت این کادر thick در نظر گرفته شده است.

border-color

شما می توانید در صورت تمایل رنگ کادرهای خود را تغییر دهید. برای این کار باید از پارامتر border-color استفاده کنید. برای مقدار این پارامتر می توانید از نام رنگها استفاده کنید. در صورتی که از نام رنگها استفاده کنید فقط می توانید از تعداد کمی از رنگها استفاده کنید. راه دیگری که برای انتخاب رنگ وجود دارد استفاده از معادل هگزادسیمال رنگها است که نسبت به نام رنگها انعطاف پذیری بیشتری دارد. اگر جدول معادل هگزا دسیمال رنگها را می خواهید اینجا را کلیک کنید.
به یک نمونه برای تغییر رنگ کادر توجه کنید:

استفاده از نام رنگها:

<div style="border-style:solid; border-color:green">این کادر به رنگ سبز خواهد بود.</div>

این کادر به رنگ سبز خواهد بود.

استفاده از معادل هگزا دسیمال رنگها:

<div style="border-style:solid; border-color:#008000">این کادر به رنگ سبز خواهد بود.</div>

این کادر به رنگ سبز خواهد بود.

درباره : پی دی اف آموزشی , آموزش کامل فتوشاپ ,
برچسب ها : 7. ایجاد کادر برای عناصر ,
بازدید : 272

[ 1392/05/01 ] [ 1392/05/01 ] [ هومن آذریان ]

نظرات (0)

.: Weblog Themes By graphist :.

:: تعداد صفحات : 5 صفحه قبل 1 2 3 4 5 صفحه بعد