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

شروع موضوع توسط vahidd.com ‏17 فوریه 2012 در انجمن نرم‌افزارهای توسعه‌وب‌سایت (Sublime, VSCode و ...)

  1. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    در این پست تاپیک قرار است که آموزش دریم ویور به صورت تصویری قرار گیرد این آموزش فکر کنم تعدادش زیاد بشه لطفا دوستان اسپم ندند در ضمن آخر هر پست 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 و چه پنل هایی نیاز داریم این پنل ها را در اختیار ما قرار می دهد .

    [​IMG]


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

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


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

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

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

    [​IMG]

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


     

    پیوست ها:

    • 1.pdf
      اندازه فایل:
      کیلوبایت 423.6
      نمایش ها:
      801
    آخرین ویرایش: ‏18 فوریه 2012
    نوشته شده توسط vahidd.com در ‏17 فوریه 2012
    seoman، it_nazanin، tarenoco و 15 نفر دیگر از این ارسال تشکر کرده اند.
  2. vahidd.com

    vahidd.com Member

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

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


    برای دو براوزر می توانیم short key هم بسازیم . این کار را در قسمت Edit Browser List انجام می دهیم .
    [​IMG]


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


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



    و یا با انتخاب Quick Tag Editor کد مربوط به آن تگ مشخص شده و می توانیم تغییرات مورد
    نظرمان را در کد اعمال کنیم:
    [​IMG]


    سایز صفحه نیز در پایین صفحه مشخص است:
    [​IMG]



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


    تنظیم صفحه : برای این کار می توانیم
    از قسمت PROPERTIES ، page properties را انتخاب کنیم .
    [​IMG]



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


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


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


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

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

    پیوست ها:

    • 2.pdf
      اندازه فایل:
      کیلوبایت 370.3
      نمایش ها:
      535
    نوشته شده توسط vahidd.com در ‏18 فوریه 2012
    nima6933، bisotun7، sm1989 و 9 نفر دیگر از این ارسال تشکر کرده اند.
  3. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    جلسه‌ی سوم:
    [FONT=&quot]
    [/FONT]
    قسمت Heading CSS :

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





    قسمت title :

    در این قسمت می توانیم title صفحه و نوع encoding صفحه را مشخص کنیم .
    [​IMG]





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

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



    قسمت Tracing image :

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


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

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

    1- قسمت HTML:

    هر دستوری که در این قسمت می بینیم به صورت html ظاهر خواهد شد .[​IMG]


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

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

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

    در قسمت list item می توانیم نوع لیست ، style اش و شروع لیست را تعیین کنیم .
    [​IMG]


    لینک کردن :

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



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


    روش سوم : استفاده از hyperlink :
    [​IMG]


    در پنجره 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
    آخرین ویرایش: ‏22 فوریه 2012
    نوشته شده توسط vahidd.com در ‏22 فوریه 2012
    mohammad104، Apollo، فاطمه ب و 14 نفر دیگر از این ارسال تشکر کرده اند.
  4. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    اول این‌که به خاطر تاخیر عذرخواهی می‌کنم نزدیک عید هست و خیلی کم می‌تونم سر بزنم.

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


    اگر بخواهیم استایلی به صورت embedded و یا external بنویسیم گزینه New CSS Rule را انتخاب کرده و دکمه Edit Rule را می زنیم:
    [​IMG]


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


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


    [​IMG]


    پس از مشخص کردن فایل CSS پنجره ای باز می شود که تمام دستورات CSS مورد نیاز برای تعریف استایل را داراست :
    [​IMG]



    قسمت 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 در ‏13 مارس 2012
    mohammad104، Apollo، it_nazanin و 15 نفر دیگر از این ارسال تشکر کرده اند.
  5. meher

    meher Member

    ارسال‌ها:
    186
    تشکر شده:
    38
    امتیاز دستاورد:
    16
    خواهش میکنم ادامه بدین آموزش رو
     
    نوشته شده توسط meher در ‏23 می 2012
    mohammad104، yadgar.42، tempel2 و یک نفر دیگر از این ارسال تشکر کرده اند.
  6. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    آموزش ها به زودی با سرعت زیاد ادامه خواهد داده شد.
     
    نوشته شده توسط vahidd.com در ‏1 ژوئن 2012
    yadgar.42 و tempel2 از این پست تشکر کرده اند.
  7. mahdi.mousavi

    mahdi.mousavi New Member

    ارسال‌ها:
    1
    تشکر شده:
    2
    امتیاز دستاورد:
    1
    پس کو بقیش؟؟
     
    نوشته شده توسط mahdi.mousavi در ‏2 ژوئن 2012
    yadgar.42 و tempel2 از این پست تشکر کرده اند.
  8. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    گفتم به زودی
    نه دیگه اینقدر زود
     
    نوشته شده توسط vahidd.com در ‏2 ژوئن 2012
    taraneh-co، yadgar.42، tempel2 و یک نفر دیگر از این ارسال تشکر کرده اند.
  9. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    جلسه پنجم:

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

    [​IMG] [​IMG]


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


    پنل CSS :
    تمام استایل هایی که ما می نویسیم (CSS 2) در این پنل قرار می گیرد :
    [​IMG]

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

    [​IMG]


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


    ابزار image :
    برای اضافه کردن عکس به صفحه از این ابزار استفاده می کنیم :
    [​IMG]

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

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

    [​IMG]

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

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

    [​IMG]

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

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

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


     

    پیوست ها:

    • 5.pdf
      اندازه فایل:
      کیلوبایت 369.3
      نمایش ها:
      408
    آخرین ویرایش: ‏2 ژوئن 2012
    نوشته شده توسط vahidd.com در ‏2 ژوئن 2012
    Apollo، it_nazanin، nima6933 و 5 نفر دیگر از این ارسال تشکر کرده اند.
  10. meher

    meher Member

    ارسال‌ها:
    186
    تشکر شده:
    38
    امتیاز دستاورد:
    16
    خیلی سپاس. امیدوارم به اضافه کردن کدها و دیو و خصیصه ها هم برسیم. فکر کنم همه توی دریم ویور آماده باشه. این بحث رو با سپاسگزاری دنبال میکنم.
     
    نوشته شده توسط meher در ‏2 ژوئن 2012
    yadgar.42، vahidd.com و tempel2 از این ارسال تشکر کرده اند.
  11. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    امیدوارم براتون مفید واقع بشه
     
    نوشته شده توسط vahidd.com در ‏4 ژوئن 2012
    yadgar.42 و meher از این پست تشکر کرده اند.
  12. tempel2

    tempel2 New Member

    ارسال‌ها:
    7
    تشکر شده:
    4
    امتیاز دستاورد:
    1
    سلام من میخواستم م بدونم رزولوشن را از کدوم پنل و چه اندازه باید در نظر گرفت تا در همه ی مانیتورها یکسان نشان داده بشه؟
    ممنونم.......:rose:
     
    نوشته شده توسط tempel2 در ‏5 ژوئن 2012
    vahidd.com از این پست تشکر کرده است.
  13. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    اگر منظورتون Width کلی صفحه است، که سایزش توی این تاپیک در موردش بحث شده:

    کد (Text):
    http://forum.majidonline.com/showthread.php?t=184468
     
    نوشته شده توسط vahidd.com در ‏13 ژوئن 2012
    yadgar.42 و echessdesign از این پست تشکر کرده اند.
  14. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    جلسه ششم:

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


    7) Brightness and Contract : به کمک اين ابزار مقدار نور و contrast را مي توانيم
    تعريف کنيم :
    [​IMG]


    8) Sharpen : با اين ابزار sharp شدن تصوير را مي توانيم تعريف کنيم :
    [​IMG]

    9) Align : در تنظيمات عکس مي توانيم مقدار align را تعريف کنيم :
    [​IMG]


    10) hspace و vspave : فاصله عمودي و افقي تصوير از اطرافش را تعريف مي کنيم :
    [​IMG]

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

    تنظيمات img در CSS :
    ابتدا وارد پنل CSS Style شده و يک استايل جديد براي تگ img مي نويسيم :
    [​IMG]

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

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

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

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

    پیوست ها:

    آخرین ویرایش: ‏13 ژوئن 2012
    نوشته شده توسط vahidd.com در ‏13 ژوئن 2012
    Apollo، nima6933، saeedking2012 و 6 نفر دیگر از این ارسال تشکر کرده اند.
  15. saeedking2012

    saeedking2012 New Member

    ارسال‌ها:
    1
    تشکر شده:
    1
    امتیاز دستاورد:
    1
    با سپاس از آموزش های بی نظیرتون

    فقط من نتونستم جلسه اول رو دانلود کنم و همش من رو وارد ناحیه کاربری می کنه اگر رسیدگی کنید خیلی ممنون میشم
     
    نوشته شده توسط saeedking2012 در ‏25 سپتامبر 2012
    vahidd.com از این پست تشکر کرده است.
  16. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    با اینکه بنده توی دانلود اون ها مشکلی نداشتم براتون تمام جلسات به جز جلسه اول رو یک فایل زیپ کردم و روی سرور سایت خودم آپلود کردم.
    لینک خدمت شما : http://dl.vahidd.com/Dreamweaver.rar
     
    نوشته شده توسط vahidd.com در ‏25 سپتامبر 2012
    meher از این پست تشکر کرده است.
  17. mahditx

    mahditx New Member

    ارسال‌ها:
    2
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    دمت گرم
    عالی بود:oops:
     
    نوشته شده توسط mahditx در ‏11 اکتبر 2012
  18. KAIREZA

    KAIREZA Member

    ارسال‌ها:
    60
    تشکر شده:
    12
    امتیاز دستاورد:
    6
    بسیار عالی و کاربردی و البته نیمه کاره!:-?
     
    نوشته شده توسط KAIREZA در ‏6 دسامبر 2012
  19. vahidd.com

    vahidd.com Member

    ارسال‌ها:
    249
    تشکر شده:
    211
    امتیاز دستاورد:
    16
    دریم ویور خیلی نرم افزار قوی و خوبی هست، ولی الآن دیگه کمتر ازش استفاده میشه، خود من بعد از نصب ویندوز دیگه دریم ویور رو نصب نکردم و احتیاجی بهش پیدا نکرده ام.
     
    نوشته شده توسط vahidd.com در ‏6 دسامبر 2012
  20. marjan_gh

    marjan_gh New Member

    ارسال‌ها:
    3
    تشکر شده:
    0
    امتیاز دستاورد:
    1
    متاسفانه این بخش دانلود نمیشه!
    ممکنه بگین چه جوری می شه از template های آماده استفاده کنیم ؟ نمی تونم پیداشون کنم!
     
    نوشته شده توسط marjan_gh در ‏4 ژانویه 2013

به اشتراک بگذارید