اموزش فارسی و تصویری دریم ویور

vahidd.com

Member
در این پست تاپیک قرار است که آموزش دریم ویور به صورت تصویری قرار گیرد این آموزش فکر کنم تعدادش زیاد بشه لطفا دوستان اسپم ندند در ضمن آخر هر پست PDF اون هم قرار میگیره تا دوستان راحت‌تر مطلب رو یاد بگیرند.:clap: فقط دوستان بدونند که این دوره نیاز داره تا یک مقدار HTML و CSS بلد باشید با جست‌جو در همین سایت میتونید به راحتی این دو رو یاد بگیرید.

جلسه‌ی اول:


مزیت ‌های استفاده از دریم ویور:

1- نوشتن کدها در html سخت بود و نیاز به ابزاری بود که کارها را راحت تر انجام دهد تا تمرکز بیشتر بر روی طراحی باشد نه کدنویسی به همین دلیل نرم افزار Dreamweaver مطرح شد .
این نرم افزار به ما کمک می کند بصورت WYSIWYG سایتمان را طراحی کنیم یعنی آنچه را که میبینیم همان چیزی است که بدست میاریم. ( What You Sea Is What You Get )
هنگامی که سایتی را در Dreamweaver طراحی می کنیم نرم افزار کدهای html را میسازد .

2- Dreamweaver یک نرم افزار مدیریت سایت است (Site Management) که به ما اجازه می دهد کل مجموعه سایت را مدیریت کنیم .
(در واقع ما قبلاً صفحاتی داشتیم که به هم لینک شده بودند و نام سایت به آن می دادیم در صورتیکه سایت مجموعه ای از فایل ها است که با هم در ارتباطند و ما می توانیم آنها را مدیریت کنیم)
در html اگر مکان صفحه ای را تغییر می دادیم باید تمام آدرسهای این صفحه را به صورت دستی در کد تغییر می دادیم اما Dreamweaver چون یک نرم افزار Site Management بوده و تمام سایت را به صورت یک مجموعه نگاه می کند به محض اینکه صفحه ای را جابجا کنیم خود نرم افزار تمام لینکها را به طور اتوماتیک درست می کند . ) چه لینک هایی که به صفحه می
آیند چه لینک هایی که در صفحه موجودند. (در بحث مدیریت سایت بحث upload هم مطرح می شود ، Dreamweaver این اجازه را به ما می دهد که به راحتی سایت خود را upload کنیم .)
مسئله application ها ( بانک های اطلاعاتی) نیز در بحث مدیریت وجود دارد که Dreamweaver یکسری ابزار در اختیار ما قرار می دهد که بدون نیاز به حتی یک خط کدنویسی می توانیم برای سایت یک بانک اطلاعاتی ایجاد کنیم تا بتوانیم از کاربران username و password بخواهیم ....
در واقع Dreamweaver تمام بانک اطلاعاتی ، فایل ها ، صفحات ، فرم ها و ... را با هم می بیند .

3- در Dreamweaver به راحتی می توان بصورت تیمی بر روی سایت کار کرد . زمانیکه فردی فایلی را باز می کند تا تغییراتی در آن ایجاد کند فایل در اصطلاح check out می شود و فرد دوم نمی تواند به این فایل دسترسی داشته باشد تا زمانیکه تغییرات لازم توسط فرد اول داده شده و فایل را check in کند . در صورتیکه در html نهایت کاری که برای انجام کار تیمی می توان انجام داد share کردن فایل بوده که در این حالت زمانیکه دو شخص با هم فایل را باز کنند و مثلاً فرد اول می خواهد یک عکس در فایل قرار دهد و فرد دوم می خواهد متنی را edit کند هنگامیکه یکی از افراد تغییرات خود را save کرده و خارج شود فرد دومی که عمل save را انجام دهد تغییراتش اعمال می شود و فرد اول گویی کاری انجام نداده . در Dreamweaver با توجه به امکان check in و check out هر فرد می تواند کار تمام شده را ببیند و آن را ادامه دهد .
نرم افزار Dreamweaver دارای پنل های متعددی است تا کاربر بجای استفاده از منوها از این پنل ها استفاده کند و در واقع هر آنچه را که لازم دارد را بتواند در صفحه ببیند به همین دلیل معمولاً فضای کمی برای کار در این نرم افزار وجود دارد .
ما می توانیم پنل ها را مدیریت کرده و بر حسب نیاز خود تعدادی از آنها را حذف کنیم در Dreamweaver امکانی وجود دارد که به ما یک سری آیتمwork space های مختلف معرفی میکند و با توجه به اینکه چه نوع کاربری هستیم application developer ، …designer و چه پنل هایی نیاز داریم این پنل ها را در اختیار ما قرار می دهد .

x1dy82n08kl1a60y3l0h.jpg



در صورتیکه ما بخواهیم با تعدادی پنل کار نکنیم می توانیم آنها را حذف نموده و شکل جدید را بعنوان
یک workspace جدید معرفی کنیم .
evl7096e2fw3kekninl.jpg

پنل properties :
تنظیمیاتی که لازم است انجام دهیم در این پنل قرار دارد .
تنظیمیاتی که لازم است انجام دهیم در این پنل قرار دارد .
پنل result گزارش‌ها:
خود دارای قسمت هایی است که تعدادی از آنها را شرح می دهیم :
1- browser compatibility : در این بخش مشخص می شود که در براوزرهای مختلف صفحه
ما دارای چه خطاهایی است .
bi7yf5rx23goe4k8usb.jpg


نکته : در واقع با این امکان می توانیم تشخیص دهیم صفحه ما در چه براوزرهایی به خوبی کار می کند
چه error هایی دارد .... ( با استفاده از check browser compatibility )
2- link checker : می توانیم چک کنیم لینکی که ایجاد کرده ایم به جایی لینک شده یا نه ، صفحه ای که به آن لینک کرده ایم وجود دارد یا نه .....
3- reference : این بخش شامل کتاب هایی از شرکت oreilly است .
برای شروع کار با Dreamweaver در پنل File ، قسمت Manage Sites را انتخاب کرده و در
پنجره ای که باز میشود می توانیم سایتی را که قبلاً ایجاد کرده ایم را باز کنیم و یا سایت جدیدی ایجاد
کنیم.
w0rvlho0gr035kwwoaww.jpg

برای ایجاد یک سایت جدید از دکمه new استفاده می کنیم ، پنجره site setup … باز می شود :
qcifp0skfri9lof53oem.jpg



قسمت Site : نام سایت و محل ذخیره سازی آن را مشخص می کنیم .
قسمت advanced setting :
jpo57oocjw2g14go8.jpg


این بخش خود دارای چندین قسمت است:
الف - Local Info : میتوانیم فولدری برای عکس های سایت معرفی کنیم تا نرم افزار
Dreamweaver به طور اتوماتیک عکسهایی را که در سایت استفاده
می کنیم در این فولدر قرار دهد .
نوع آدرسدهی را نیز در این قسمت مشخص می کنیم که بصورت
Document باشد (آدرس دهی (relative یا Site root (اول در
root سایت قرار می گیرد و سپس از آنجا آدرسدهی می کند .)
نکته : توجه داشته باشیم که تنظیماتی که انجام می دهیم برای کل سایت است نه بخشی از سایت .
ب - Enable cache : به ما اجازه می دهد تا محتواهای سنگین سایتمان را در cache ذخیره کنیم
زمانی این قسمت را روشن می کنیم که بصورت team work روی سرور
کار کنیم .
ج - version control : مربوط به تنظیماتی است که برای کار بصورت team work لازم است :
l3dxu44fmwgqyojj1hx3.jpg


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

jjpm2ige41a5li5w25g.jpg


خب جلسه‌ی اول تموم شد. منتظر جلسات بعد باشید.:paint:


 

پیوست ها

  • 1.pdf
    423.6 کیلوبایت · بازدیدها: 801
آخرین ویرایش:

vahidd.com

Member
خب دوستان آموزش دوم (جلسه‌ دوم) آماده شده خوندن این آموزش مستلزم اینه که آموزش جلسه‌ی یک رو خونده باشید امیدوارم از خوندنش لذت ببرید و براتون مفید واقع بشید.

جلسه‌ی دوم:
رسیدیم به جایی که یک سند HTML جدید در دریم ویور ایجاد کردیم:
سه حالت نمایش برای صفحه وجود دارد :
1- حالت Code
2- حالت Design
3- حالت Split
Live view : شکل نمایش صفحه در براوزر را نشان می دهد .
Preview in browser : در این قسمت می توانیم براوزرهای مختلف را معرفی کنیم تا بتوانیم در هر یک از آنها ظاهر سایتمان را ببینیم .
kihhjn9w20fcnhs3bax.jpg



برای دو براوزر می توانیم short key هم بسازیم . این کار را در قسمت Edit Browser List انجام می دهیم .
iif1jivrdq7tiuxq4fd.jpg



همانطور که مشخص است می توانیم تعیین کنیم کدام یک از براوزرها primary browser و کدام یک secondary browser باشد .
اگر تیک Preview using temporary file را بزنیم هنگام Preview کردن از temporary file استفاده میکند و عمل save انجام نمیشود ولی اگر این گزینه را انتخاب نکنیم بعد از هر بار Preview گرفتن تغییرات سایت save میشود .
Title صفحه را نیز می توانیم تغییر دهیم فقط کافیست اسم مورد نظرمان را در قسمت title وارد کنیم.
4ofowhwznvmh3byiqa.jpg



قسمت tag navigator : قسمت پایین صفحه است که به ما نشان می دهد مسیرحرکت از body برای رسیدن به نقطه ای خاص چگونه است .
مزیت این بخش این است که به راحتی هر جزء از صفحه را تنها با کلیک بر تگ آن می توانیم انتخاب کنیم و تنظیمات مربوط به آن را در قسمت properties انجام دهیم .
و یا هنگامیکه می خواهیم به آن کلاس دهیم روی تگ مربوطه راست کلیک کرده و کلاس یا id آن را set کنیم :
e4083d4j219dqk55cup3.jpg




و یا با انتخاب Quick Tag Editor کد مربوط به آن تگ مشخص شده و می توانیم تغییرات مورد
نظرمان را در کد اعمال کنیم:
7e21yvpwqljvlzmwcxx.jpg



سایز صفحه نیز در پایین صفحه مشخص است:
bsy1sz9fem42qirasq.jpg




برای اینکه resolution صفحه را تغییر دهیم کافی است صفحه را از حالت ماکزیمایز خارج کنیم تا بتوانیم resolution مورد نظرمان را انتخاب کنیم .
آخرین آیتم در این نوار به ما می گوید حجم فایل چقدر است و چند ثانیه طول میکشد تا load شود .
cg021otoqofggrgmdi6.jpg



تنظیم صفحه : برای این کار می توانیم
از قسمت PROPERTIES ، page properties را انتخاب کنیم .
4hc40wqyywb825y86k.jpg




1- روی صفحه راست کلیک کنیم و page properties را انتخاب کنیم .
2- از منوی modify ، page properties را انتخاب کنیم :
j6a9f88zmlc4jpwvgxd6.jpg



در قسمت page properties تنظیمات CSS ای و تنظیمات HTML ای را گفته .
در قسمت( Appearance (HTML می توانیم تصویر background و یا رنگ آن ، رنگ نوشته ها ، رنگ لینک ها و لینک های دیده شده اند ( Visited links ) و لینک هایی که بر روی آنها کلیک کرده ایم ولی هنوز به صفحه مورد نظر نرفته (Active links ) را تعیین کنیم .
l8htggffweax2xs0twc6.jpg



Left margin و Top margin : فاصله اولین خط از سمت چپ و بالا است که در IE ساپورت می شود و در بقیه براوزرها از Margin height و Margin width استفاده می شود .
قسمت (Appearance (CSS:
فونت پیشفرض ، bold یا ایتالیک بودن متن ، سایز و رنگ نوشته ها و رنگ background ، تصویر background ، نوع تکرار شدن تصویر و margin های body نیز در این قسمت تعیین می شود .
uilrnofxoil293dn.jpg



قسمت Link :
در این قسمت فونت لینک ها ، bold یا ایتالیک بودن آنها ، سایز فونت لینکها ، رنگ لینک های دیده شده و دیده نشده ، حالت Rollover (زمانیکه ماوس روی لینک می رود چه رنگی داشته باشد) و حالت active link ، لینک ها چه زمانی underline داشته باشند ، تعریف می شود .
kjva9ilt6ttqwub52gqz.jpg


خب این جلسه هم تموم شد!
 

پیوست ها

  • 2.pdf
    370.3 کیلوبایت · بازدیدها: 535

vahidd.com

Member
جلسه‌ی سوم:
[FONT=&quot]
[/FONT]
قسمت Heading CSS :

می توانیم برای تگ های h تنظیماتی از قبیل نوع فونت ، bold یا italic بودن ، رنگ و اندازه هر کدام از heading ها را انجام دهیم .
zz8jppbems7p6xijcy8k.jpg






قسمت title :

در این قسمت می توانیم title صفحه و نوع encoding صفحه را مشخص کنیم .
k0tcdgmkx7asmclgds0.jpg






نکته : در صورتیکه بخواهیم فارسی در صفحه تایپ کنیم باید encoding را UTF-8 انتخاب کنیم .

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



قسمت Tracing image :

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



اگر در صفحه چیزی انتخاب نکرده باشیم هر جای صفحه که کلیک کنیم پنل Properties تبدیل به پنل تنظیمات text می شود .

این بخش دو قسمت دارد : قسمت html و قسمت CSS.

1- قسمت HTML:

هر دستوری که در این قسمت می بینیم به صورت html ظاهر خواهد شد .
a5zx1bwsubaci3u2s1k.jpg



در قسمت format مشخص می کنیم که متن ما در کدام تگ قرار گیرد ( تگ h ، p و..)

همچنین در این قسمت می توانیم حالت bold یا italic بودن متن را مشخص کنیم . می توانیم متن را بصورت لیست های ترتیبی و یا غیر ترتیبی نیز بنویسیم .

در لیست ها از گزینه indent برای ایجاد یک زیرمجموعه لیست استفاده می کنیم . و از گزینه out dent برای برگشتن به زیرمجموعه قبلی لیست استفاده میکنیم .

در قسمت list item می توانیم نوع لیست ، style اش و شروع لیست را تعیین کنیم .
bg7hnjiktymocqtgiyt.jpg



لینک کردن :

روش اول : متنی که قرار است بعنوان لینک عمل کند را انتخاب می کنیم ، دکمه brows را می زنیم و صفحه مورد نظر را انتخاب می کنیم .
vxnj7v8fwaj7brkixbl6.jpg




روش دوم : پنل فایل را باز میکنیم ، دکمه point to file را گرفته و ببریم به صفحه مورد نظر در پنل file لینک کنیم .
pdk2zxf76qufnkd9a9d.jpg



روش سوم : استفاده از hyperlink :
9f0u46t1ylfbf0ewwwxk.jpg



در پنجره hyperlink موارد زیر را تعیین می کنیم :

1- Text : متنی که قرار است link شود

2- Link : صفحه مقصد

3- Target : در این قسمت مشخص می کنیم پس از لینک کردن صفحه جدید در پنجره جدید

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

Blank

New

Parent

Self

Top

4- Title : زمانیکه روی لینک می رویم چه توضیحی ظاهر شود

5- Access key : کلیدی که وقتی همراه با ctrl می زنیم روی لینک قرار بگیریم

6- Tab index : پس از چند بار tab زدن روی لینک قرار بگیریم

نکته : موارد access key و tab index در طراحی هایی که برای موبایل انجام می شود مهم هستند چون در موبایل با کلید کار می کنیم نه با ماوس .



موفق باشید!



دوستان حتما با تشکر منو تشویق کنید تا این آموزش رو سریع‌تر به روز کنم.
 

پیوست ها

  • 3.pdf
    325.5 کیلوبایت · بازدیدها: 502
آخرین ویرایش:

vahidd.com

Member
اول این‌که به خاطر تاخیر عذرخواهی می‌کنم نزدیک عید هست و خیلی کم می‌تونم سر بزنم.

نوشتن style ها :
اگر بخواهیم style ای بصورت inline بنویسیم در properties وارد قسمت CSS شده و از Targeted Rule ، New Inline Style را انتخاب کرده و تنظیمات مربوطه را انجام می دهیم .
jrolutrfdinho12u5abz.jpg



اگر بخواهیم استایلی به صورت embedded و یا external بنویسیم گزینه New CSS Rule را انتخاب کرده و دکمه Edit Rule را می زنیم:
ponf6tv2g5bk9qefzi.jpg



اگر نوع استایل embedded باشد محل تعریف استایل را This document only انتخاب می کنیم اگر external باشد محل تعریفش را New style sheet file تعریف می کنیم .
در صورتیکه استایلی داشته باشیم و بخواهیم تغییرش دهیم نام استایل هم در همین قسمت وجود خواهد داشت .
برای اتصال صفحه به استایلهایی که به صورت embedded یا external نوشته می شوند 4 روش وجود دارد.
1- روش selector : برای این روش در Dreamweaver دو گزینه Class و ID تعریف شده :
r7j1wrw77tzg68lofyec.jpg



2- روش tag modify
3- روش آدرس دهی
4- روش کلاس و id برای یک تگ
برای دو روش آخر در Dreamweaver گزینه Compound در نظر گرفته شده .
درصورتیکه قسمت Rule Definition را New Style Sheet File انتخاب کرده باشیم هنگامیکه دکمه OK را میزنیم پنجره ای باز می شود که از ما نام فایل CSS را می خواهد :
9wppozkdoauxnx4daoq3.jpg



ocnytwemjuo434msz8j0.jpg



پس از مشخص کردن فایل CSS پنجره ای باز می شود که تمام دستورات CSS مورد نیاز برای تعریف استایل را داراست :
wy9c94abu89drpkun.jpg




قسمت type : در این قسمت می توانیم خصوصیت های نوشته ها را تعیین کنیم :
Font-family : نوع فونت نوشته ها را تعین می کنیم.
Font-size : سایز نوشته ها
Font-weight : Bold بودن یا نبودن متن را مشخص می‌کند
Font-style : ایتالیک بودن یا نبودن متن مشخص می شود .
Font-variant : نوشته ها بصورت حروف بزرگ اما در اندازه کوچک باشد
Line-height : ارتفاع خطی که متن در آن نوشته می شود
Text-transform : نوشته ها همه حروف اولشان بزرگ نوشته شود یا همه حروفش بزرگ باشند ....
Text-decoration : Blink فقط در Firefox کار می کند و نوشته را چشمک زن می کند .
 

پیوست ها

  • 4.pdf
    253.7 کیلوبایت · بازدیدها: 443

vahidd.com

Member
جلسه پنجم:

درست کردن لینک برای E-mail :
بر روی آیکن Email Link در قسمت Common کلیک کرده و در پنچره باز شده متنی که قرار است
لینک شود و ایمیل مربوطه را مشخص می کنیم :




ایجاد لینک داخل صفحه :
در زبان html برای ایجاد این لینک در مقصد از تگ a با مشخصه #name استفاده می کردیم .
در Dreamweaver برای این کار از ابزار Named Anchor استفاده میکنیم و به محل مورد نظر
Name می دهیم تا بتوانیم به این مکان لینکی ایجاد کنیم . (نحوه درست کردن لینک به سه روشی
است که گفته شده)
4.jpg
3.jpg



پنل CSS :
تمام استایل هایی که ما می نویسیم (CSS 2) در این پنل قرار می گیرد :
5.jpg


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

6.jpg



ایجاد خط افقی در صفحه :
برای این کار از ابزار horizontal Rule استفاده می کنیم و در پنجره properties میتوانیم
مشخصاتش تعیین کنیم . ( همان تگ hr در html )
7.jpg



ابزار image :
برای اضافه کردن عکس به صفحه از این ابزار استفاده می کنیم :
8.jpg


آدرس فایل مورد نظر را مشخص کرده و ok می کنیم .

تنظیمات مربوط به عکس را در قسمت properties انجام می دهیم .

9.jpg


1- طول و عرض تصویر را در قسمت W و H مشخص می کنیم .
2- آدرس تصویر را در قسمت Src مشخص می کنیم .
در صورتیکه بخواهیم تصویر را تغییر دهیم کافیست آدرس تصویر را تغییر دهیم . یک روش
برای این کار استفاده از علامت point to file در کنار آدرس تصویر است که آن را ارتباط می
دهیم به تصویر دیگری در قسمت file
10.jpg


3- در صورتیکه بخواهیم تصویر تبدیل به لینک شود به قسمت Link آدرس مقصد را می دهیم .
4- در قسمت Original آدرس تصویر اصلی را وارد می کنیم تا در صورت تمایل روی تصویر
عملیات Edit انجام دهیم .

11.jpg


با زدن دکمه Edit وارد نرم افزار fire work و یا هر نرم افزار دیگری که تعریف کرده ایم ،
می شویم .
زمانیکه تغییر لازم را درون تصویر ایجاد کردیم بدون نیاز به save کردن و قرار دادن در فولدر مربوط به سایت ، با زدن دکمه done تصویر تغییر یافته در سایت قرار می گیرد.
در این حالت تصویری که تغییر کرده و در سایت است با تصویر Original متفاوت است زمانیکه تغییراتی روی عکس انجام دادیم که کیفیت عکس پایین آمد می توانیم مجدداً از
تصویر اصلی استفاده کنیم .
5- اگر تغییراتی که میخواهیم در عکس ایجاد کنیم جزئی باشند میتوانیم بدون اینکه وارد نرم افزار دیگری شویم با استفاده از Edit Image Setting این تغییرات را اعمال کنیم :
12.jpg


این عملیات جزئی شامل 1- تغییر اندازه عکس 2- عملیات بهینه سازی ( optimization )
در تب option مشخص می شود که با Quality های مختلف ) و در حالت gif ، jpg ... ( حجم عکس
چقدر است و چند ثانیه طول می کشد که load شود ، با تغییر Quality و مقایسه کیفیت تصاویر و
حجم انها می توان تصویر بهتری برای سایت انتخاب کنیم .
نکته : معمولاً تصاویر طبیعی با jpg بهتر هستند و تصاویر گرافیکی و یا تصاویری که با دست کشیده شده اند با gif بهتر می شوند .

ادامه تنیظمات تصاویر و آموزش میمونه برای جلسه بعد.
موفق و معید باشید.


 

پیوست ها

  • 5.pdf
    369.3 کیلوبایت · بازدیدها: 408
آخرین ویرایش:

meher

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

tempel2

New Member
سلام من میخواستم م بدونم رزولوشن را از کدوم پنل و چه اندازه باید در نظر گرفت تا در همه ی مانیتورها یکسان نشان داده بشه؟
ممنونم.......:rose:
 

vahidd.com

Member
سلام من میخواستم م بدونم رزولوشن را از کدوم پنل و چه اندازه باید در نظر گرفت تا در همه ی مانیتورها یکسان نشان داده بشه؟
ممنونم.......:rose:
اگر منظورتون Width کلی صفحه است، که سایزش توی این تاپیک در موردش بحث شده:

کد:
http://forum.majidonline.com/showthread.php?t=184468
 

vahidd.com

Member
جلسه ششم:

(ادامه تنظیمات مربوط به تصاویر در دریم ویور)
6 ) Crop : با اين وسيله مي توانيم قسمت هاي اضافي تصوير را حذف کنيم .
1.jpg



7) Brightness and Contract : به کمک اين ابزار مقدار نور و contrast را مي توانيم
تعريف کنيم :
2.jpg



8) Sharpen : با اين ابزار sharp شدن تصوير را مي توانيم تعريف کنيم :
3.jpg


9) Align : در تنظيمات عکس مي توانيم مقدار align را تعريف کنيم :
4.jpg



10) hspace و vspave : فاصله عمودي و افقي تصوير از اطرافش را تعريف مي کنيم :
5.jpg


11) ايجاد map در تصوير : مي توانيم با استفاده از map هر قسمتي از تصوير را که مورد نظرمان است به راحتي به صفحه يا محل مورد نظرمان لينک کنيم بدون اينکه نيازي به مختصات نقاط داشته باشيم. (یک موقعیت خاصی از تصویر را لینک دار کنیم نه کل تصویر)

تنظيمات img در CSS :
ابتدا وارد پنل CSS Style شده و يک استايل جديد براي تگ img مي نويسيم :
6.jpg


و تنظيمات مورد نظرمان را اعمال مي کنيم .
براي اينکه مکان يک سطر در کنار عکس مشخص شود از قسمت Block ، Vertical-align را مقدار دهي مي کنيم .
7.jpg


اندازه تصوير را در قسمت Box تعيين مي کنيم و به آن width و height مي دهيم . در صورتی که به یکی مقداری بدهیم و دیگری را auto قرار دهیم auto به اندازه ‌ی نسبت تصویر و سایزی میشود که دادیم، مثلا: اگر یک تصویر با سایز 500px X 500px داریم اگر در فیلد Width مقدار 200px دهیم و در فیلد height مقدار auto این auto میشود همان 200px .
8.jpg


در قسمت float مي توانيم تعيين کنيم که تصوير در کدام سمت قرار گيرد تا سمت ديگر بوسيله متن پر شود .
براي تعيين فاصله تصوير از اطراف از margin و براي تعيين فاصله تصوير از border از padding استفاده مي کنيم .

برای تعیین Border منتظر جلسه بعد باشید.
 

پیوست ها

  • جلسه ششم.pdf
    224.7 کیلوبایت · بازدیدها: 266
آخرین ویرایش:

saeedking2012

New Member
با سپاس از آموزش های بی نظیرتون

فقط من نتونستم جلسه اول رو دانلود کنم و همش من رو وارد ناحیه کاربری می کنه اگر رسیدگی کنید خیلی ممنون میشم
 

vahidd.com

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

marjan_gh

New Member
با اینکه بنده توی دانلود اون ها مشکلی نداشتم براتون تمام جلسات به جز جلسه اول رو یک فایل زیپ کردم و روی سرور سایت خودم آپلود کردم.
لینک خدمت شما : http://dl.vahidd.com/Dreamweaver.rar
متاسفانه این بخش دانلود نمیشه!
ممکنه بگین چه جوری می شه از template های آماده استفاده کنیم ؟ نمی تونم پیداشون کنم!
 

جدیدترین ارسال ها

بالا