آموزش دریم ویور

[سیده آمین ارمان]

آموزش دریم ویور :
منوی Insert :

Tag… : با انتخاب این گزینه، پنجره ای برای شما باز می شود که در آن همه تگ های زبان های نشانه گذاری موجود است و شما می توانید با دو بار کلیک بر روی تگ یا انتخاب تگ و فشردن دکمه insert ، تگ مورد نظر را در صفحه قرار دهید. همچنین در قسمت Tag Info اطلاعاتی راجع به کاربرد تگ انتخاب شده به شما نشان می دهد.

Image : برای گذاشتن تصویر در صفحه سایت، پنجره انتخاب تصویر را باز می کند.

Image Objects :

Image Placeholder : اگر تصویری که می خواهید در سایت استفاده کنید، هنوز آماده نیست، می توانید از این گزینه استفاده کنید و به جای تصویر یک قاب در مکان آن قرار دهید تا بعدا تصویر مورد نظر را جایگذاری کنید. در پنجره ای که باز می شود، می توانید تنظیمات قاب را انجام دهید.

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

Image Name : یک نام واحد است که مورد استفاده کدهای جاوا اسکریپت قرار می گیرد. برای نام گذاری نباید از space استفاده کنید.

Original Image : تصویر اصلی که زمانی نمایش داده می شود که هنوز موس روی آن قرار نگرفته است.

Rollover Image : تصویری که با قرار گرفتن موس روی تصویر، نشان داده می شود.

Preload rollover image : این مورد را تیک بزنید. این کار rollover image را مجبور می کند، زمانی که صفحه در حال لود شدن توسط مرورگر است، لود شود. بنابراین زمانی که به آن نیاز داشته باشیم، آماده است. در غیر این صورت مرورگر برای اجرای آن بعدا از سرور سؤال می پرسد، که این خود زمان می برد.

Alternate Text : متنی که در tooltip نمایش داده می شود، زمانی که موس روی تصویر قرار می گیرد یا زمانی که تصویر به دلیلی لود نمی شود.

When clicked, Go to URL : زمانی که روی تصویر کلیک می کنیم، به این لینک می رود.



Fireworks HTML :

Media : برای گذاشتن رسانه ( مانند ویدئو، اپلت های جاوا و... ) در سایت، مورد استفاده قرار می گیرد.

به عنوان مثال می خواهیم یک فایل FLV… را در سایتمان قرار دهیم. از منوی insert ، گزینه media ، flv را انتخاب می کنیم. پنجره زیر برای ما باز می شود.

video type : در این قسمت Prigressive Download Video را انتخاب می کنیم.

URL : آدرس فایل flv را در این قسمت وارد می کنیم. می توانیم به صورت relative با زدن دکمه browse این کار را انجام دهیم یا به صورت absolute آدرس url خود را دستی وارد کنیم .

Skin : در این قسمت، پوسته ای مناسب برای بخش play و pause انتخاب می کنیم.

Width, Height : ابعاد نمایش فایل ویدئویی را مشخص می کند.

با پرکردن اطلاعات لازم و زدن دکمه ok دریم ویور کدهایی را درون تگ object می نویسد و همچنین اسکریپت هایی را به صفحه پیوست می کند. که با save کردن صفحه پیغامی مبنی بر آپلود کردن این اسکریپت ها برای ما ظاهر می شود.

پس از ok کردن این پیغام، می توانیم فایل ویدئو را در مرورگر ببینیم.

 

[سیده آمین ارمان]

Media Queries… : همانطور که در بالای پنجره توضیح داده، media queries به شما اجازه می دهد، چگونگی نمایش سایتتان برای دستگاه های مختلف مانند موبایل و تبلت و ... را، با تعریف css های مختلف برای هر دستگاه، تعیین کنید.

برای این کار ابتدا برای سایتتان چند فایل css جداگانه می سازید و آن ها را در زیر فایل اصلی css لینک می کنید.

Table : با انتخاب این گزینه، پنجره ای برای قراردادن جدول در صفحه باز می شود، که می توانید در آن ویژگی های جدول را تنظیم کنید.

Caption ، عنوانی است که در بالای جدول و خارج از آن نمایش داده می شود.

Table Objects : دو مورد اول برای اضافه کردن ردیف در بالا و پایین ردیف های موجود و دو مورد بعدی برای اضافه کردن ستون در چپ و راست ستون های موجود است. که این موارد در حالت نمایش design ، با قرارگیری موس روی خانه های جدول فعال می شوند.

پنج مورد آخر نیز برای قراردادن کد تگ های Table, TR, TH, TD و Caption در صفحه به کار می رود.

Caption تگی است که درون تگ Table قرار می گیرد و متن درون آن مانند یک عنوان در بالای Table و در وسط قرار می گیرد.



Import Tabular Data : بهتر است این گزینه را با مثال برایتان توضیح دهم.

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

برای جداکردن آدرس ایمیل از اطلاعات دیگر، ابتدا لیستمان را به صورت فایل .txt ذخیره می کنیم، سپس در قسمت Data file ، فایل txt را import می کنیم. در قسمت Delimiter تعیین می کنیم که با رسیدن به چه چیزی از هم جدا شوند. ( مرز بین مشخصات را تعیین می کنیم ) که در این مثال علامت کاما است.

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

Layout Objects :

Div Tag : یک تگ div در صفحه می اندازد ولی قبلش از شما می پرسد کجای صفحه آن را بگذارد و یا کلاس و ID برای آن در نظر گرفته شده است.

Ap Div : کد یک لایه با پوزیشن absolute را در صفحه می نویسد.

Spry Menu Bar : دریم ویور با انتخاب این گزینه، به طور هوشمند کدهای یک منو را برای شما می گذارد و حتی قبل از این کار از شما می پرسد منو، افقی باشد یا عمودی . بعد از انتخاب منو و ok کردن این پنجره، کدهای منو مورد نظر در صفحه نوشته می شوند که شامل دو فایل پیوست جاوا اسکریپت و css و نیز چهار تا عکس با فرمت gif هستند.

زمانی که می خواهیم سند را save کنیم، پنجره ای ظاهر می شود که از ما می خواهد فایل های پیوست را در root folder خود کپی کنیم.

بعد از ok کردن این پنجره فایل های پیوست در پوشه ریشه، در پوشه ای به نام SpryAssets کپی شده و از ما می خواهد تا آدرس آن ها را به روز کنیم. به همین منظور دکمه yes را می زنیم.

Spry Tabbed Panels و Spry Accordion و Spry Collapsible Panel ، نیز به همین روش در صفحه گذاشته می شود.



Form : این مورد شامل تمام گزینه هایی است که در یک فرم به کار می رود.

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

همچنین با انتخاب گزینه های Text Field, Button, Checkbox, Radio Button, File Field, Image Field و Hidden Field ، پنجرهinput باز می شود که می توانیم در قسمت Type نیز هر یک از این گزینه ها را انتخاب کنیم. اما برای گذاشتن textarea و select menu در صفحه پنجره های جداگانه ای باز می شود.

Hyperlink : با انتخاب این گزینه، پنجره ای باز می شود که با پر کردن اطلاعات آن، تگ

Please, ورود or عضویت to view URLs content!

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

Server-Side Include : با انتخاب این گزینه پنجره select file برای ما باز می شود که باید فایل نوشته شده به زبان سمت سرور را که می خواهیم در صفحه اصلی وارد کنیم، انتخاب کنیم .

که با انتخاب فایل مورد نظر، این کد در صفحه ظاهر می شود.

Comment : انتخاب این مورد، تگ comment زبان html که به این صورت نوشته می شود (

) را در صفحه سایت می نویسد.

HTML :

Horizontal Rule : یک تگ hr در صفحه می اندازد.

Frames : با انتخاب هر کدام از موارد بالای منوی زیر، صفحه فعال به frameset تبدیل شده و باید آن را save کنیم و قسمت های مختلف آن را که هر کدام یک frame است را نیز save می کنیم و در هر فریم که صفحه ای جداگانه دارد، مطلب می گذاریم. همچنین در قسمت پایین منو، به ترتیب، با انتخاب موارد Frameset ، Frame ، IFrame و NoFrames ، تگ های آن ها در صفحه نوشته می شود.

Text Objects : در این قسمت، اشیاء مربوط به متن قرار داده شده است که به طور مختصر آن ها را برایتان شرح می دهم.

Font : پنجره ای باز می شود که با پر کردن اطلاعات آن تگ font و attribute هایش در صفحه قرار می گیرد.

Bold و Strong : تگ strong را در صفحه می نویسند. کلماتی که بین این تگ قرار می گیرند، به صورت پررنگ نمایش داده می شوند.

Italic و Em : تگ em را در صفحه می گذارند. کلماتی که بین این تگ قرار می گیرند، به صورت کج نشان داده می شوند.

Paragraph : تگ p یعنی پاراگراف را در صفحه می نویسد.

Block Quote : به وسیله margin تو رفتگی و برآمدگی ایجاد می کند. به طوری که این indent و outdent در مرورگر نمایش داده می شود. مانند شکل زیر

 

[سیده آمین ارمان]

Media Queries… : همانطور که در بالای پنجره توضیح داده، media queries به شما اجازه می دهد، چگونگی نمایش سایتتان برای دستگاه های مختلف مانند موبایل و تبلت و ... را، با تعریف css های مختلف برای هر دستگاه، تعیین کنید.

برای این کار ابتدا برای سایتتان چند فایل css جداگانه می سازید و آن ها را در زیر فایل اصلی css لینک می کنید.

Table : با انتخاب این گزینه، پنجره ای برای قراردادن جدول در صفحه باز می شود، که می توانید در آن ویژگی های جدول را تنظیم کنید.

Caption ، عنوانی است که در بالای جدول و خارج از آن نمایش داده می شود.

Table Objects : دو مورد اول برای اضافه کردن ردیف در بالا و پایین ردیف های موجود و دو مورد بعدی برای اضافه کردن ستون در چپ و راست ستون های موجود است. که این موارد در حالت نمایش design ، با قرارگیری موس روی خانه های جدول فعال می شوند.

پنج مورد آخر نیز برای قراردادن کد تگ های Table, TR, TH, TD و Caption در صفحه به کار می رود.

Caption تگی است که درون تگ Table قرار می گیرد و متن درون آن مانند یک عنوان در بالای Table و در وسط قرار می گیرد.



Import Tabular Data : بهتر است این گزینه را با مثال برایتان توضیح دهم.

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

برای جداکردن آدرس ایمیل از اطلاعات دیگر، ابتدا لیستمان را به صورت فایل .txt ذخیره می کنیم، سپس در قسمت Data file ، فایل txt را import می کنیم. در قسمت Delimiter تعیین می کنیم که با رسیدن به چه چیزی از هم جدا شوند. ( مرز بین مشخصات را تعیین می کنیم ) که در این مثال علامت کاما است.

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

Layout Objects :

Div Tag : یک تگ div در صفحه می اندازد ولی قبلش از شما می پرسد کجای صفحه آن را بگذارد و یا کلاس و ID برای آن در نظر گرفته شده است.

Ap Div : کد یک لایه با پوزیشن absolute را در صفحه می نویسد.

Spry Menu Bar : دریم ویور با انتخاب این گزینه، به طور هوشمند کدهای یک منو را برای شما می گذارد و حتی قبل از این کار از شما می پرسد منو، افقی باشد یا عمودی . بعد از انتخاب منو و ok کردن این پنجره، کدهای منو مورد نظر در صفحه نوشته می شوند که شامل دو فایل پیوست جاوا اسکریپت و css و نیز چهار تا عکس با فرمت gif هستند.

زمانی که می خواهیم سند را save کنیم، پنجره ای ظاهر می شود که از ما می خواهد فایل های پیوست را در root folder خود کپی کنیم.

بعد از ok کردن این پنجره فایل های پیوست در پوشه ریشه، در پوشه ای به نام SpryAssets کپی شده و از ما می خواهد تا آدرس آن ها را به روز کنیم. به همین منظور دکمه yes را می زنیم.

Spry Tabbed Panels و Spry Accordion و Spry Collapsible Panel ، نیز به همین روش در صفحه گذاشته می شود.



Form : این مورد شامل تمام گزینه هایی است که در یک فرم به کار می رود.

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

همچنین با انتخاب گزینه های Text Field, Button, Checkbox, Radio Button, File Field, Image Field و Hidden Field ، پنجرهinput باز می شود که می توانیم در قسمت Type نیز هر یک از این گزینه ها را انتخاب کنیم. اما برای گذاشتن textarea و select menu در صفحه پنجره های جداگانه ای باز می شود.

Hyperlink : با انتخاب این گزینه، پنجره ای باز می شود که با پر کردن اطلاعات آن، تگ

Please, ورود or عضویت to view URLs content!

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

Server-Side Include : با انتخاب این گزینه پنجره select file برای ما باز می شود که باید فایل نوشته شده به زبان سمت سرور را که می خواهیم در صفحه اصلی وارد کنیم، انتخاب کنیم .

که با انتخاب فایل مورد نظر، این کد در صفحه ظاهر می شود.

Comment : انتخاب این مورد، تگ comment زبان html که به این صورت نوشته می شود (

) را در صفحه سایت می نویسد.

HTML :

Horizontal Rule : یک تگ hr در صفحه می اندازد.

Frames : با انتخاب هر کدام از موارد بالای منوی زیر، صفحه فعال به frameset تبدیل شده و باید آن را save کنیم و قسمت های مختلف آن را که هر کدام یک frame است را نیز save می کنیم و در هر فریم که صفحه ای جداگانه دارد، مطلب می گذاریم. همچنین در قسمت پایین منو، به ترتیب، با انتخاب موارد Frameset ، Frame ، IFrame و NoFrames ، تگ های آن ها در صفحه نوشته می شود.

Text Objects : در این قسمت، اشیاء مربوط به متن قرار داده شده است که به طور مختصر آن ها را برایتان شرح می دهم.

Font : پنجره ای باز می شود که با پر کردن اطلاعات آن تگ font و attribute هایش در صفحه قرار می گیرد.

Bold و Strong : تگ strong را در صفحه می نویسند. کلماتی که بین این تگ قرار می گیرند، به صورت پررنگ نمایش داده می شوند.

Italic و Em : تگ em را در صفحه می گذارند. کلماتی که بین این تگ قرار می گیرند، به صورت کج نشان داده می شوند.

Paragraph : تگ p یعنی پاراگراف را در صفحه می نویسد.

Block Quote : به وسیله margin تو رفتگی و برآمدگی ایجاد می کند. به طوری که این indent و outdent در مرورگر نمایش داده می شود. مانند شکل زیر

 

[سیده آمین ارمان]

منوی View :

Code, Split Code, Design, Code and Design : با انتخاب یکی از این چهار مورد، می توانیم حالت نمایش پنجره سند را مشخص نماییم.

البته با کلیک بر روی سه دکمه ای که در گوشه سمت چپ و بالای پنجره سند قرار دارد هم می توانیم سه حالت بالا را انتخاب کنیم.

Split Vertically : اگر حالت نمایش split یا همان (Code and Design) را انتخاب کنیم، این گزینه فعال می شود. که با انتخاب آن، تقسیم بندی به صورت افقی انجام می گیرد.

Design View on Top, Design View on Left : اگر تقسیم بندی به صورت عمودی است، حالت نمایش در چپ نشان داده شود و اگر تقسیم بندی افقی است، حالت نمایش در بالا باشد.

Switch Views : اگر حالت نمایش، روی design باشد، با انتخاب این گزینه به حالت نمایش code ، تغییر پیدا می کند و برعکس.

Refresh Design View : در صورتی که تغییراتی در کد ایجاد کنیم و بخواهیم در حالت design نتیجه آن را مشاهده کنیم، می توانیم از این گزینه استفاده کنیم.

Refresh Styles : در صورتی که حالت نمایش Live view را فعال کنیم، این گزینه فعال خواهد شد. این گزینه، مانند عمل reloadکردن صفحه یک سایت در مرورگر عمل می کند و style های صفحه را refresh می کند.

Live View : با فعال کردن این گزینه، سایت ما به صورت زنده در دریم ویور نمایش داده می شود، یعنی همانطور که در مرورگر نمایش داده می شود. حتی پلاگین ها و جاوا اسکریپت ها هم در این حالت اجرا می شوند. (مثلا نمایش اسلاید)

Live View Options :

Freeze JavaScript : باعث می شود اجرای فایل های جاوا اسکریپت در هر مرحله ای است، متوقف شود.

شکل زیر درحال عوض کردن تصویر اسلاید، یخ زده است.

Disable JavaScript : کدهای جاوا اسکریپت را غیرفعال می کند (یعنی آن ها را نشان نمی دهد). شما می توانید از طریق نوار زرد رنگ بالای صفحه، دوباره آن را فعال کنید.

Disable Plugins : پلاگین های مورد استفاده در صفحه را غیر فعال می کند.

Highlight Changes in Live Code : زمانی که در حالت live view ، تغییری در صفحه رخ می دهد، در حالت live code کد آن تغییرات را highlight می کند. مثلا هنگام تغییر تصویر اسلاید کدهای آن را به طور اتوماتیک، highlight می کند.

Show Browser Navigation Bar : برای نشان دادن یا ندادن browser navigation bar به کار می رود.

Follow Link (Ctrl+Click Link) : با فشردن کلید ctrl همراه با کلیک بر روی لینک ها، اگر صفحه آن لینک در root folder سایت ما باشد، آن را نشان می دهد ( مانند مرورگر ). ولی اگر سند آن لینک در پوشه ریشه موجود نباشد، با کلیک بر روی آن لینک، در دریم ویور یک سند خالی (تب جدید) باز می کند.

در شکل زیر، با کلیک بر روی لینک درباره ما، صفحه about us.html در تب index (لینک خانه) باز شده است.

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



Live View Browser :

Back و Forward : کارهایی که در حالت live view انجام داده ایم را به ترتیب، یک قدم به عقب و یک قدم به جلو می برد.

Home : لینک سند فعال را باز می کند.

Recent Pages : لینک هایی که به تازگی باز کرده ایم را نشان می دهد.

Stop, Refresh, Refresh Styles : این موارد مانند مرورگر عمل می کنند.

Address : می توانیم آدرس را در browser navigation bar بنویسیم.

Live Code : اگر تا به حال با نرم افزار firebug ، که یکی از extension های مرورگر فایرفاکس است، کار کرده باشید، متوجه خواهید شد که نمایش کدها در این حالت، مانند نمایش کدها در firebug است. یعنی در این حالت اگر کدهای دیگر مانند جاوا اسکریپت،php یا CSS ، تأثیری روی کدهای html داشته باشند، نمایش داده می شود. زمانی که این حالت فعال باشد،نام سند فعال، از source code به live code تغییر پیدا می کند.

Inspect : اگر با مرورگرهای Chrome یا Firefox کار کرده باشید، حتما متوجه شده اید که با کلیک راست بر روی این مرورگرها ، آخرین گزینه از منوی باز شده، Inspect element است. این مورد در دریم ویور نیز وجود دارد. با فعال کردن این مورد شما می توانید با قراردادن ماوس خود روی هر قسمت از صفحه، کد آن را ببینید.

Head Content : با فعال کردن این گزینه، نواری در بالای صفحه نمایش باز می شود که همه محتویات تگ head را به ترتیب نوشته شده در کد، با آیکون به ما نشان می دهد. و با کلیک روی هر آیکون جزئیات آن تگ در پایین صفحه نشان داده می شود.

Noscript Content :

Table Mode : اگر در سایتمان، جدول داشته باشیم. دو حالت برای نمایش جدول وجود دارد : Standard Mode و Expanded Tables Mode

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

Visual Aids : این گزینه برای نشان دادن خطوط جدا کننده در حالت نمایش Design است.

در صورتی که Hide All را انتخاب کنید، همه خطوط مخفی می شوند.

CSS Layout Backgrounds : در حالت نمایش design پشت زمینه هر لایه را به یک رنگ نشان می دهد.

Style Rendering : با استفاده از این گزینه می توانیم استایل صفحه خود را در محیط نمایش design ارزیابی کنیم، بدون اینکه تغییری در فایل های خود داده باشیم. مثلا کوچک کردن و بزرگ کردن اندازه حروف، نشان دادن لینک ها در حالت های مختلف و ...

Display Styles : برای نشان دادن صفحه با استایل هایش به کار می رود و اگر آن را غیر فعال کنیم در واقع همه دستورات CSS را غیر فعال کرده ایم.

 

[سیده آمین ارمان]

Code View Options : تنظیمات پنجره سند در حالت نمایش کد را انجام می دهد.

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

Line Numbers : در صورت فعال بودن، کنار هر خط شماره آن را می نویسد.

Hidden Characters : در صورت فعال بودن کاراکترهای مخفی مانند space و enter را نشان می دهد.

Highlight Invalid Code : کدهای نامعتبر و اشتباه نوشته شده را highlight می کند.

Syntax Coloring : اگر این گزینه را غیر فعال نماییم، نمایش هر تگ با رنگ متمایز از بین می رود و همه کدها را به رنگ مشکی نشان می دهد.

Auto Indent :

Syntax Error Alerts in Info Bar : خطاهای نحوی (syntax error) را در نوار info نشان می دهد.

Window Size و Magnification : این موارد را قبلا در توضیح status bar ، گفته ایم.

Rulers : برای نشان دادن خط کش ها و تنظیم واحد آن ها به کار می رود.

Grid : برای راحتی بیشتر در اندازه گیری، صفحه را تقسیم بندی می کند.

Show Grid :

Snap To Grid : مانند آهنربا عمل می کند و لایه ها را به خطوط چهارخانه نزدیک می کند.

Grid Settings… : برای تنظیم مشخصات grid به کار می رود.

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

چنانچه گزینه Edit Guides… را انتخاب کنیم، پنجره ای برایمان باز می شود که می توانیم در آن خطوط راهنما را ویرایش کنیم.

Tracing Image : زمانی که می خواهیم صفحات سایتمان را از روی تصویری که آن را قبلا تهیه کرده ایم بسازیم، استفاده از این مورد بسیار سودمند است.

از قسمت Load… تصویرمان را بارگذاری می کنیم و بعد از ok کردن ، در پنجره باز شده میزان شفافیت نمایش تصویر را انتخاب می کنیم. سپس از روی تصویر، شروع به ساختن سایت می نماییم.

Plugins : دریم ویور به شما اجازه می دهد برای آزمایش رسانه های موجود در سند، پلاگین های مرورگر را در پنجره سند، با زدن دکمه play، اجرا کنید. این کار به شما کمک می کند تا ببینید، صفحاتی که ساخته اید، چطور به نظر تماشاگران سایتتان می آید.

Display External Files : شما می توانید تصاویر و فایل های دیگری را از وب سایت های گوناگون روی اینترنت، در محیط نمایشdesign کپی کنید. در صورتی که اتصال به اینترنت برقرار باشد، اگر این گزینه فعال باشد، شما می توانید تصاویر را ببینید (مانند شکل زیر)

اما اگر فعال نباشد، تصاویر به صورت زیر نمایش داده خواهد شد.

Color Icons : در صورت فعال بودن، آیکون های دریم ویور به صورت رنگی نشان داده می شوند.

Hide Panels : همه پنل های باز شده در محیط کاری دریم ویور را مخفی می کند. البته اگر پنل insert را در بالای صفحه قرار داده باشیم آن را مخفی نمی کند. ( شکل بالا ). shortcut این گزینه f4 است که با دوبار فشار دادن آن، دوباره پنل ها ظاهر می شوند.

Toolbars : در این قسمت، مشخص می کنیم که چه نوار ابزارهایی در فضای کاری دریم ویور نمایش داده شوند که به طور پیش فرض، نوار ابزارهای Document ، Browser Navigation و Coding نمایش داده می شوند.

البته با کلیک راست بر روی هر نوار ابزار، این منو باز می شود و لازم نیست حتما آن را از منوی view باز کنیم.

Related Files : همه فایل های خارجی مانند css, javascript و فایلهای با زبان برنامه نویسی سمت سرور مانند php ، که به فایل اصلی (فعال) پیوست شده اند را نشان می دهد. شما می توانید با کلیک بر روی نام هر فایل، در نوار فایل های پیوست، کد آن را ببینید.

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

Code Navigator… : اشاره گر ما روی هر قسمت از برنامه و روی هر تگی که باشد، با فشردن Alt + click ، پنجره ای باز می شود که در آن کلاس استایل های مربوط به آن تگ نوشته شده و با کلیک بر روی هر کلاس، صفحه CSS مربوطه، روی همان کلاس باز می شود. و اگر اشاره گر را فقط بر روی کلاس مورد نظر نگه داریم، اعلان های آن کلاس را به ما نشان می دهد. ( مانند شکل ) در ضمن هر جای صفحه که آیکون indicator نمایان شد با کلیک بر روی آن، code navigator باز می شود.

 

[سیده آمین ارمان]

منوی edit :

undo : یک حرکت به عقب بر می گردد و shortcut آن ctrl + X است.

redo : یک حرکت به جلو می رود و shortcut آن ctrl + Y است.

cut ، copy و paste : به ترتیب برای بریدن، نسخه برداری و چسباندن استفاده می شوند.

paste special : عکس یا متن یا آن چیزی که ما آن را کپی کرده ایم را در مکان دیگر با همان استایل و خصوصیات و position ، pasteمی کند. در پنجره باز شده می توانیم فرمت paste را مشخص کنیم.

clear : برای پاک کردن کدهای انتخاب شده به کار می رود.

select all : برای انتخاب همه کدها به کار می رود.

select parent tag : اشاره گر در هر جایی از کدهای صفحه و روی هر تگی باشد با انتخاب این گزینه می توان تگ والد (تگی که تگ های دیگر در داخل آن قرار دارند) آن تگ را دید.

select child : این مورد نیز مانند بالا عمل می کند با این تفاوت که تگ فرزند را نشان می دهد.

find and replace و find selection و find next : مانند تمام نرم افزارها برای پیدا کردن عبارت مورد جستجو استفاده می شوند.

go to line : این مورد برای دسترسی سریعتر به تکه کد مورد نظر است که با وارد کردن شماره خط آن کد به همان خط می رود. برای صفحاتی که تعداد خطوط کدهای آن ها زیاد است کاربرد دارد.

show code hints : تکمیل خودکار تگ یکی از ویژگی های مورد علاقه در دریم ویور است . با انتخاب این مورد که shortcut آن ctrl + space است، منویی برای شما باز می شود که انتخاب های ممکن برای کامل کردن کدتان را به شما نشان می دهد.

refresh code hints : این مورد نیز که shortcut آن ctrl + . است، منو را refresh می کند.

code hint tools : با انتخاب این گزینه می توانید مشخص کنید منوی باز شونده از چه نوعی باشد.

color picker :

url browse :

font list :

element ID : لیستی از id های تعریف شده در صفحه ای که باز است را نشان می دهد.

element names : لیستی از name های تعریف شده در صفحه ای که باز است را نشان می دهد.

html tag names : لیستی از نام تگ های html

class names : لیستی از class های تعریف شده در صفحه ای که باز است را نشان می دهد.

indent code : باعث تو رفتگی کد می شود و shortcut آن ctrl + shift + > است. در شکل زیر این مورد روی تگ های li دو بار و روی تگ ul یک بار اعمال شده است.

outdent code : حالت برعکس indent code است و shortcut آن ctrl + shift + < است.

balance braces : با انتخاب این گزینه دریم ویور جفت پرانتز باز و بسته ای که اشاره گر شما درون آن قراردارد را پیدا می کند و داخل آن را highlight می کند.

code collapse : این ویژگی یکی از بهترین ویژگی های نرم افزار دریم ویور است . به طوری که با استفاده از آن می توانیم محیط کارمان را خلوت کنیم و با تمرکز بیشتری به کارمان برسیم.

انتخاب گزینه collapse selection باعث می شود تکه کدی که ما آنرا با ماوس انتخاب کرده ایم بسته شود و در یک خط نشان داده شود. مانند شکل زیر :

گزینه collapse selection : تکه کدی که ما انتخاب کرده ایم را جمع می کند. می توانیم این کار را با کلیک بر روی مربع منفی کنار شماره خط نیز انجام دهیم.

گزینه collapse outside selection : همه کدهای نوشته شده غیر از کدی که ما انتخاب کرده ایم را جمع می کند.

گزینه expand selection : تکه کدی که جمع شده را باز می کند. می توانیم این کار را با کلیک بر روی مربع مثبت کنار شماره خط نیز انجام دهیم.

گزینه collapse full tag : انتخاب این گزینه باعث می شود تگی که اشاره گر روی آن قرار دارد با همه محتویاتش جمع شود.

گزینه collapse outside full tag : همه کدهای نوشته شده غیر از تگی که اشاره گر ما روی آن قرار دارد جمع می شود.

گزینه expand all : همه کدهای جمع شده را باز می کند.

edit with external editor : با انتخاب این گزینه می توانیم صفحه ای که روی آن کار می کنیم را در یک ادیتور دیگر نیز باز کنیم. برای این کار در پنجره باز شده در قسمت external code editor ، دکمه browse را زده و ادیتور دیگری که روی کامپیوترمان نصب است را انتخاب می کنیم و ok می کنیم.

Tag libraries … : با انتخاب این ویژگی پنجره ای باز می شود که می توانیم در آن همه تگ ها و خصوصیات آن ها را که در زبان های برنامه نویسی که دریم ویور آن ها را ساپورت می کند، وجود دارد را ویرایش کنیم .

Tags : همه تگ ها را به ما نشان می دهد و ما می توانیم به آن موردی اضافه و یا از آن کم کنیم.

Tag format : در این قسمت می توانیم قالب تگ ها را ویرایش کنیم.

Line breaks : شکستن خطوط (کی به خط بعدی برود) را می توانیم در اینجا تعیین کنیم . در حالت پیش فرض، هیچ شکستگی تعریف نشده و ما با زدن کلید Enter به خط بعدی می رویم.

Contents : قالب بندی محتویات تگ را مشخص می کنیم که آیا دارای تورفتگی باشد یا نه؟

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

نکته در زبان XHTML ، حتما باید همه حروف، با حروف کوچک نوشته شوند.

preview : در این قسمت می توانیم تغییراتی که روی تگ ها اعمال می کنیم را ببینیم .

keyboard shortcuts … : این گزینه همه shortcut های صفحه کلید که در دریم ویور استفاده شده را به ما نشان می دهد و ما می توانیم آن ها را کم یا زیاد کنیم. همچنین می توانیم آن ها را تغییر دهیم.

Current set : می توانیم shortcut های محیط مورد نظر را انتخاب کنیم که به طور پیش فرض دریم ویور استاندارد انتخاب شده است. در روبه رو چهار دکمه گذاشته شده که به ترتیب :

Delete set : برای پاک کردن محیط انتخاب شده با همه shortcut هایش است.

Export set as HTML : از میانبرهای محیط انتخاب شده خروجی HTML می گیرد.

Rename set : نام محیط انتخاب شده را تغییر می دهد.

Duplicate set : از محیط انتخاب شده یک کپی می گیرد.

Commands : در این قسمت مشخص می کنیم، میانبرهای چه قسمتی از محیط دریم ویور را به ما نشان دهد.

Shortcuts : میانبرها را اضافه یا کم می کنیم.

Press Key : میانبرها را تغییر می دهیم.

preferences … : با انتخاب این گزینه، پنجره ای باز می شود که تنظیمات اولیه و پیشرفته نرم افزار و همچنین سند شما را انجام میدهد. باهم یکی یکی category های آن را مرور می کنیم.

شما در لیست category میتوانید با انتخاب هر یک از آیتم های موجود تنظیمات مربوط به آن را ظاهر کنید.



General : در این قسمت می توانید تنظیمات مربوط به سند خود را ویرایش کنید.

Document options :

Show welcome screen : زمانی که هیچ صفحه ای در دریم ویور باز نباشد، دریم ویور پنجره خوشامدگویی را نشان می دهد. در صورت فعال نبودن این گزینه زمانی که دریم ویور را باز می کنیم پنجره welcome screen باز نمی شود.

Reopen documents on startup : چنانچه چند صفحه در دریم ویور باز باشد و بعد از اتمام کار دریم ویور را ببندیم، زمانی که دوباره دریم ویور را باز کنیم، به جای پنجره خوشامدگویی، دوباره همان صفحات در دریم ویور باز می شوند. این گزینه مانند“sessions” در مرورگرهای وب و دیگر برنامه ها است.

Warn when opening read-only files : زمانی که نتوانید ویرایش هایی که انجام می دهید را ذخیره کنید ، دریم ویور به شما هشدار می دهد.

Enable related files : این گزینه که به طور پیش فرض فعال است، با باز کردن یکی از صفحات سایتمان در دریم ویور ، صفحات دیگری که به آن صفحه لینک شده را نیز به ما نشان می دهد.

Discover Dynamically-Related Files : در صورتی که پوشه ای که فایل های خود را در آن نگهداری می کنید را به صورت root folder یک سایت در دریم ویور تعریف کرده باشید، این گزینه فایل های مرتبط با صفحه فعال در دریم ویور را به صورت دستی یا اتوماتیک به شما نشان می دهد یا اصلا نشان نمی دهد.

Update links when moving files : دریم ویور می تواند به طور اتوماتیک لینک های سایت را update کند، زمانی که شما مکان فایل های استفاده شده در سایت را تغییر بدهید.

مثلا زمانی که صفحه ای از سایتمان در دریم ویور باز باشد و ما همزمان مکان root folder سایتمان را تغییر بدهیم، با پیغامی مواجه می شویم که از ما می پرسد ایا می خواهیم لینک ها و آدرس های صفحه ای که باز است را درست کند.

Editing options :

Show dialog when inserting objects : هنگامی که شما اشیاء مانند تصاویر، جداول، و یا اشیاء رسانه را در صفحه وارد می کنید، پنجره ای برای شما باز می شود که می توانید اطلاعات اضافی مورد نیاز برای آن شئ را در آن وارد کنید.

Enable double-byte inline input : در صورتی که رمزگذاری به دریم ویور اجازه دهد، می تواند کاراکتر دو بایتی مانند چینی یا ژاپنی که به طور مستقیم به پنجره سند وارد شده است را بپذیرد.

Switch to plain paragraph after heading : اگر این گزینه فعال باشد، هنگامی که شما بعد از یک سرتیتر ( heading ) ، کلید enterرا بزنید، دریم ویور به جای ادامه دادن سرتیتر، یک پاراگراف جدید را شروع می کند. در غیر این صورت دوباره heading می نویسد.

Allow multiple consecutive spaces : اگر شما دو یا چند کاراکتر space را در حالت نمایشی design تایپ کنید، دریم ویور آن ها را بدون شکست وارد می کند یعنی کد کاراکتر space را می نویسد.

 

[سیده آمین ارمان]

Use strong and em in place of b and i : این مورد می تواند صفحات شما را ساده تر و در دسترس تر بسازد.

Warn when placing editable regions within p or h1-h6 tags : هنگامی که بخواهید درون یک پاراگراف یا سرتیتر، یک قالب که شامل مناطق قابل ویرایش (editable regions) است، بسازید، دریم ویور به شما هشدار می دهد.

Maximum number of history steps : در این قسمت شما می توانید تعداد برگشت به قبل یعنی همان ctrl + z را مشخص کنید.

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



Accessibility :

Show attributes when inserting : در این قسمت برای هر مورد انتخاب شده ( اشیاء فرم، فریم ها، رسانه ها و تصاویر )، زمانی که ما بخواهیم یکی از آن چهار عنصر را در صفحه مان بگذاریم، پنجره ای باز می شود که attribute های آن عنصر را به ما نشان می دهد و ما می توانیم به آن ها مقدار بدهیم.

مثلا زمانی که از آیکون image در تب common در پنل insert برای گذاشتن image می خواهیم استفاده کنیم این پنجره باز می شود.

و زمانی که از آیکون frames در تب layout در پنل insert برای گذاشتن frame استفاده می کنیم این پنجره باز می شود.

Keep focus in the panel when opening : زمانی که دریم ویور یک پنل را باز می کند، مانند پنل فایل ، در حالت پیش فرض تمرکز را روی پنجره document ( در حالت نمایشcode یا design ) برمی گرداند. یعنی اشاره گر در صفحه فعال است. ولی اگر گزینه keep focus in the panel when opening تیک خورده باشد، زمانی که ما از منوی windows یک پنل را باز کنیم، اشاره گر ما روی پنل باز شده، تمرکز می کند و ما نمی توانیم در صفحه چیزی بنویسیم.

Offscreen rendering : دریم ویور از دو بافر ( ترسیم روی bitmap صفحه نمایش خاموش قبل از ترسیم روی صفحه نمایش ) برای جلوگیری از لرزش استفاده می کند. این موضوع باعث می شود screen reader ها ( دستگاهی که به افراد نابینا کمک می کند تا از برنامه های کاربردی مانند دریم ویور استفاده کنند. ) گیج شوند. بنابراین زمانی که از screen reader ها استفاده می کنید، باید این گزینه را غیر فعال کنید .



Ap Elements :

visibility : وقتی صفحه برای اولین بار لود می شود ap element ها (AP Div) می توانند نمایان باشند یا پنهان.

ap div ها لایه هایی هستند که می توانیم آن ها را فقط در قسمت نمایش design بکشیم ( یعنی دکمه آن در پنل insert در تبlayout فقط وقتی فعال است که اشاره گر روی نمایش design باشد ) و با این کار درقسمت نمایش code ، یک کد div که به طور اتوماتیک برای آن چند خط کد css نوشته شده داریم.

visibility : اگر این گزینه روی حالت default باشد، در کدهای ap element چیزی نوشته نمی شود ولی اگر برای آن مقدار مشخص کنیم در کد css آن به این صورت visibility : visible نوشته می شود.

width و height : در اینجا عرض و طول پیش فرض لایه ها را تعیین می کنیم .

Background color : در این قسمت هم رنگ پیش فرض زمینه لایه را مشخص می کنیم.

Background image : تصویری را برای زمینه لایه ها به طور پیش فرض انتخاب می کنیم.

Nesting : اگر می خواهید لایه کشیده شده با لایه های موجود در صفحه به صورت تودرتو درآید، تیک این گزینه را بزنید.

به عنوان مثال در شکل زیر ابتدا ما visibility را در حالت visible گذاشتیم و رنگ پس زمینه را سبز انتخاب کردیم و تیک گزینهnesting را زدیم و لایه apDiv1 را کشیدیم. سپس دوباره رنگ آن را برداشتیم و visibility را به حالت default برگرداندیم و لایه های دوم و سوم را کشیدیم.

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

Code Coloring : دریم ویور برای اینکه کاربر بتواند ساده تر کد بنویسد وکدهایش را ازهم تشخیص دهد، از رنگ ها استفاده می کند. مثلا برای کدهای جدول رنگ سبز انتخاب شده است.

Edit Coloring Scheme : شما می توانید در این قسمت رنگ های دلخواه خودتان را بگذارید.

برای دیدن حالت live code، دکمه آن را که در کنار حالت های نمایش قرار دارد، انتخاب کنید.

Code Format : دریم ویور به طور اتوماتیک کدهای html را می نویسد ولازم نیست ما آن ها را بنویسیم. اما این مهم است که افراد دیگر بتوانند به راحتی کدهای ما را بخوانند و از آن استفاده کنند. شما می توانید در این پنجره چگونگی نمایش کدهایتان را تعریف کنید.

Indent : شما می توانید برای خواناتر شدن کدهایتان با space یا tab ، تورفتگی ایجاد کنید یا اصلا indent نداشته باشید.

Tab size : این گزینه مشخص می کند که هر تب معادل با چند فاصله (space) باشد.

Link break type : مرورگرها مسئولیت قالب بندی نهایی صفحات html را برای نشان دادن ، بر عهده دارند . که این قالب بندی شامل شکستن خطوط طبق اندازه صفحه نمایش کاربران و محل قرارگیری تگ های پاراگراف نیز می شود. برای اطمینان از بهترین سازگاری، نوع شکستن خط را مطابق با سیستم عاملی که وب سرور شما روی آن است، تنظیم کنید.

Default tag case و Default attribute case : در این قسمت مشخص می کنیم، تگ ها وصفت ها با حروف بزرگ نوشته شوند یا حروف کوچک. در زبان XHTML همه tag ها و attribute ها باید با حروف کوچک نوشته شود.

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

TD tag : این گزینه بعد از هر سلول جدول خط را می شکند و به خط بعد می رود. بعضی از افراد ترجیح می دهند همه سلول های جدول در یک خط نوشته شود، برای این کار این گزینه را غیر فعال کنید.

Advanced Formatting : در این قسمت تنظیمات بیشتری برای خواناتر شدن کدهایمان انجام می دهیم .

با کلیک روی دکمه css پنجره ای باز می شود که در آن همانطور که تنظیمات صفحات html را انجام دادیم حالا تنظیمات صفحات css را درست می کنیم.

با کلیک بر روی دکمه Tag Libraries … ، پنجره Tag Library Editor باز می شود که در قسمت قبل آن را توضیح داده ایم.

مثلا در این پنجره می توانیم تعریف کنیم که قبل و بعد از تگ img ، خط بشکند.

indent properties with : تورفتگی خصوصیات را مشخص می کند.

each property on separate line : هر خصوصیت در خطی جداگانه نوشته شود.

opening brace on separate line : پرانتزها را در خطی جداگانه باز می کند.

only if more than 1 property : اگر بیشتر از یک خصوصیت داشت، هر خصوصیت در خطی جداگانه نوشته شود.

all selectors for a rule on same line : همه selector هایی که خصوصیت مشترک دارند، در یک خط نوشته شوند.

blank line between rules : بین دستورات یک خط خالی می اندازد.

preview : می توانید در این پنجره نمایش حالت های بالا را ببینید.



Code Hints : در منوی edit گزینه Code Hint Tools درباره اشاره گرهای کد توضیحاتی دادیم. حال در این قسمت شما می توانید تنظیمات مربوط به این اشاره گرها را ویرایش کنید.

Close tags : تگ ها را چه زمانی ببندد. به طور پیش فرض در محیط دریم ویور پس از تایپ علامت تگ بسته (، همه تگ بسته می شود.

Options : این checkbox ها تعیین می کند که آیا شما اشاره گرهای کد جدید دریم ویور را دریافت کرده اید.

در صورتی که این گزینه را فعال کردید، می توانید delay (زمان تاخیر) آن را تعیین کنید .

Menus : در این قسمت تعیین می کنیم منوی اشاره گر کد برای چه عناصری باز شود.



Code Rewriting : دریم ویور به ما کمک می کند کدهای HTML ی را که اشتباه نوشته شده، درست کنیم . تغییرات، زمانی صورت می گیرد که یک فایل باز باشد یا کدی را در فایلمان paste کنیم.

Rewrite code : بازنویسی کد

Fix invalidly nested and unclosed tags : دریم ویور کدهای نامعتبر تودرتو و تگ هایی که بسته نشده اند را خودش درست می کند. مثلا

اگر کدی به صورت زیر نوشته شود

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

Rename form items when pasting : با فعال بودن این گزینه، زمانی که یک فرم را از جای دیگر در فایلمان paste می کنیم، همه عناصر آن فرم را rename می کند. در صفحات داینامیک که ممکن است نام عناصر به صورت داینامیک داده شود، بهتر است تیک این مورد را برداریم.

Remove extra closing tags : دریم ویور تگ های بسته اضافه را که ما به صورت دستی وارد کرده ایم، پاک می کند.

Warn when fixing or removing tags : اگر گزینه اول فعال باشد، می توانیم این مورد را نیز فعال کنیم تا هنگام درست کردن تگ های اشتباه نوشته شده، به ما پیغام بدهد.

Never rewrite code : با انتخاب این مورد، کد فایل هایی که پسوندشان در textbox آمده است را هیچ وقت بازنویسی نمی کند. شما می توانید پسوندها را مطابق نیاز خود تغییر دهید.

Special characters : دریم ویور به صورت اتوماتیک کاراکتر های < , > , & و " را با استفاده از کاراکتر & ، رمزنگاری می کند.

URL encoding : در این قسمت می توانیم انتخاب کنیم که url را به صورت رمز بنویسد یا نه.



Copy/Paste : دریم ویور یک ویرایشگر قوی مثل ورد نیست، ولی ما می توانیم تنظیماتی برای چگونگی نمایش متنی که از جای دیگر در حالت نمایش دریم ویور paste می کنیم، انجام دهیم.

شما می توانید بگویید که دریم ویور متن را به صورت متن ساده، متن با ساختارش ( پاراگراف، لیست، جدول و ... )، متن با ساختارش به اضافه قالب بندی اولیه ( bold, italic ) و بالاخره متن را با ساختارش و همه قالب بندی اش ، به سند شما منتقل کند.



CSS Styles :

When creating CSS rules : در این قسمت مشخص می کنیم، زمانی که یک دستور CSS نوشته می شود، چه attribute هایی به صورت مختصر نویس نوشته شوند.

به عنوان مثال Font

اگر فعال نباشد :

font-family: Verdana, Geneva, sans-serif;
font-size: 9px;
font-style: italic;
line-height: 12px;
font-weight: bold;
font-variant: small-caps;

اگر فعال باشد :

font: italic bold small-caps 9px/12px Verdana, Geneva, sans-serif;

When editing CSS rules : زمانی که یک دستور CSS را ویرایش می کنیم،

If original used shorthand : دریم ویور در صورتی که فایل اصلی ( ویرایش نشده ) از مختصر نویسی استفاده کرده باشد، به صورت مختصرنویس ویرایش می کند.

According to settings above : طبق تنظیمات ما در قسمت بالا، از مختصرنویسی هنگام ویرایش استفاده می کند.

Open CSS files when modified : زمانی که یک دستور CSS را ویرایش کردیم، فایل آن را باز کن.

When double-clicking in CSS panel : مشخص می کند زمانی که روی دستور CSS در پنل CSS STYLES دوبار کلیک کنیم چگونه آن را ویرایش کنیم.

Edit using CSS dialog : در حالت پیش فرض، دریم ویور پنجره CSS dialog را باز می کند.

Edit using properties pane : در صورت انتخاب این گزینه می توانیم در قسمت Properties پنل CSS STYLES ویرایش را انجام دهیم.

Edit using code view : با انتخاب این گزینه، در هر صفحه ای که باشیم با دو بار کلیک بر روی دستور CSS ، صفحه ای که کد آن دستور CSS در آن نوشته شده است، روی همان کد، باز می شود.



File compare : در این قسمت دریم ویور به شما اجازه می دهد، برنامه ای که دوست دارید برای مقایسه و ادغام فایل هایتان استفاده کنید را معرفی کنید. برای این منظور شما باید روی سیستم خودتان یک برنامه مقایسه فایل ( مانند notepad++ ) نصب کنید و آدرس آن را در پنجره file compare وارد کنید.

 

[سیده آمین ارمان]

اگر شما در این قسمت آدرسی را وارد نکرده باشید، چنانچه روی فایل های سایتی که در دریم ویور ایجاد کرده اید، راست کلیک کنید و گزینه Compare with Testing Server را انتخاب کنید، پنجره زیر برای شما باز می شود. در غیر این صورت فایل شما در برنامه مقایسه فایل باز می شود.

FileTypes / Editors :

Open in code view : فایل هایی که پسوندشان در این قسمت آمده، به طور اتوماتیک در حالت نمایش کد ( code view ) باز می شوند و حالت های نمایش design و split برای آن ها غیرفعال است. شما می توانید در این قسمت با یک space، پسوند اضافه کنید.

External code editor : اگر شما برای ویرایش فایل هایتان، از یک ویرایشگر دیگر غیر از دریم ویور نیز استفاده می کنید، در این قسمت می توانید آدرس آن را قرار دهید

Reload modified files : زمانی که یک فایل که در دریم ویور باز است، توسط برنامه دیگری ویرایش شود، دریم ویور به طور پیشفرض به شما پیغام reload کردن صفحه را می دهد.

Save on launch : اگر دریم ویور یک ویرایشگر خارجی را باز کند (که می تواند به طور اتوماتیک یک فایل را ذخیره کند) از شما می پرسد چه کار کند، یا بدون ذخیره کردن فایل را باز می کند.

Fireworks : نرم افزار fireworks یک نرم افزار طراحی گرافیک، مخصوص طراحان وب است. این نرم افزار امکانات جذابی را برای طراحان وب فراهم میکند.

اگر شما adobe master collection را نصب کرده باشید، به طور اتوماتیک آدرس نرم افزار fireworks در این قسمت نوشته می شود. در غیر این صورت شما باید خودتان به صورت دستی آدرس نصب این برنامه را وارد کنید.

Extensions and Editors : برای فایل های دیگر غیر از کد ( مانند عکس )، شما می توانید ویرایشگر تعریف کنید. در قسمتextensions می توانیم فایل اضافه یا کم کنیم و در قسمت editor می توانیم ویرایشگر ( مثلا photoshop ) تعریف کنیم و یکی راprimary قرار دهیم. به طور پیش فرض fireworks تعریف شده است.

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



Fonts :

Font settings : از این لیست زبان فونت را انتخاب می کنیم .

Proportional font : این فونت نرمال در دریم ویور است. هر متنی در دریم ویور قبل از اینکه استایلی داشته باشد، با این فونت نمایش داده می شود. ( در پاراگراف ها، سرتیتر ها و جدول ها )

Fixed font : دریم ویور از این فونت برای نمایش متن در تگ های pre, code و tt استفاده می کند.

Code view : دریم ویور از این فونت برای نمایش متن در حالت های Code view و Code inspector استفاده می کند.

Use dynamic font mapping : اگر از لیست font settings ، گزینه Unicode را انتخاب کنید، این مورد فعال می شود. زمانی که این مورد فعال باشد، دریم ویور فونت معمول را امتحان می کند.



Highlighting : در این پنجره شما می توانید رنگ هایی که دریم ویور برای نواحی مختلف صفحه و عناصر درون صفحه استفاده می کند، را تغییر دهید.

Invisible Elements :

Named anchors : مکان anchor های

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

Scripts : یک آیکون در جایی که کدهای درونی جاوا اسکریپت و VB اسکریپت، در بدنه سند وب قرار گرفته است، نمایش داده می شود.

Comments : یک آیکون در جایی که HTML comment در کد وجود دارد، نمایش داده می شود.

Line breaks : این مشکل است که بتوانیم شکستگی خط واقعی (تگ br) را از شکستگی خط که بر اساس خاصیت word-wrap به وجود می آید را از هم تشخیص بدهیم. این مورد یک آیکون در کنار هر تگbr نشان می دهد.

Client-side image maps : این آیکون مکان تگ را در صفحه نشان می دهد.

Embedded styles : هر عنصر style ای که در صفحه باشد را نشان می دهد.

Hidden form fields : یک آیکون در کنار فیلدهای مخفی فرم نشان می دهد.فرم ها معمولا به فیلدهای خاصی برای انتقال اطلاعات مخفی در صفحه نیاز دارند.

Form delimiter : این گزینه یک حاشیه نقطه چین قرمز به دور همه فرم قرار می دهد. بنابراین شما می توانید همه تگ های درون تگ فرم را ببینید.

Anchor points for Ap elements : یک آیکون در جایی که ap div قرار کرفته نمایش داده می شود. اگر ap div، مخفی باشد، شما می توانید با انتخاب آیکون، ap div مورد نظر را انتخاب کنید، سپس آن را ویرایش کنید.

Anchor points for aligned elements : این آیکون مکان همه عناصر HTML، که خاصیت align دارند، را نشان می دهد.

Visual and Non-Visual Server Markup Tags (ASP, CFML, …) : این ها تگ هایی هستند که محتوای آن ها نمی تواند در پنجره سند نمایش داده شود.

CSS display: none : یک آیکون در کنار عناصری که با خاصیت CSS ، display: none ، مخفی شده اند، نشان می دهد.

Show dynamic text as : متون داینامیک ( از دیتابیس یا یک لینک ) را به صورت {Recordset.Field} یا {} نشان می دهد.

Server-Side includes : اگر این گزینه فعال باشد، دریم ویور می تواند محتوای فایل های پیوست شده به فایل اصلی را در فایل فعال نمایش دهد.



New Document : زمانی که شما می خواهید با استفاده از منوی فایل گزینه New ، یک فایل جدید بسازید، دریم ویور برای شما یک سری تنظیمات پیش فرض را در نظر گرفته که می توانید آن ها را در اینجا تغییر بدهید.

Default document : انتخاب فایل به طور پیش فرض بر روی HTML تنظیم شده است. اگر شما در نظر دارید فایل دیگری مانندCSS، PHP و... برای شما باز شود، فایل مورد نظرتان را از منو انتخاب کنید.

Default extension : فایل HTML می تواند دو پسوند .html و .htm را داشته باشد، بنابراین شما میتوانید در این قسمت مشخص کنید که فایلتان به طور پیش فرض چه پسوندی داشته باشد.

Default Document Type (DTD) : در این قسمت می توانید نوع document تان را مشخص کنید. شما همیشه می توانید این مورد را هنگام ایجاد فایل جدید، تغییر دهید.

Default encoding : اگر شما در صفحاتتان، بیش از یک زبان استفاده می کنید، بهتر است مجموعه گسترده تری را انتخاب کنید که آن را پشتیبانی کند مانند UTF-8 .

Unicode Normalization Form : اگر شما Unicode را به عنوان encoding (UTF8) خود، انتخاب کرده اید، شما می توانید یک فرم عادی را برای استفاده انتخاب کنید. اگر شما نمی دانید کدام فرم را انتخاب کنید، این قسمت را خالی بگذارید. شما همچنین می توانید یک بایت علامت گذاری (Byte Order Mark) را به آن پیوست کنید. اما اگر نمی دانید به آن نیاز دارید یا نه، این قسمت را بدون تیک زدن رها کنید.

Show New Document dialog box on Control-N : اگر این مورد را فعال کنید، با فشار دادن کلیدهای Control و N ، پنجره New Document برای شما باز می شود.



Preview in Browser :

Browsers : در این قسمت می توانیم، همه مرورگرهایی که در سیستم نصب کرده ایم را اضافه یا کم کنیم. و همچنین از طریق دکمه edit، آدرس آن ها را عوض کنیم. همچنین می توانیم یکی از آن ها را به عنوان مرورگر اول (نمایش سایت با فشار کلید میانبرF12) و یکی را به عنوان مرورگر دوم (نمایش سایت با فشار کلید میانبر ctrl + F12) انتخاب کنیم .

Options : اگر این گزینه فعال باشد شما می توانید صفحات سایتتان را در یک فایل موقت (temporary file) تماشا کنید. این در حالی است که اگر شما تغییری در صفحات بدهید، نمی توانید با reload کردن مرورگر، نتیجه آن تغییر را ببینید. ولی اگر غیر فعال باشد، می توانید با هر بار تغییردادن صفحه و reload کردن مرورگر، نتیجه تغییرات را ببینید.

در حالت غیرفعال :

Please, ورود or عضویت to view URLs content!

در حالت فعال :

Please, ورود or عضویت to view URLs content!

Site : در این قسمت شما می توانید تنظیمات سایت را برای پنل FILES قرار دهید.

Always show : شما می توانید هردو فایل های local یا remote را در سمت چپ یا راست نشان دهید. به طور پیش فرض local site را در سمت راست نشان می دهد

Dependent files : دریم ویور می تواند فایل هایی که به فایل اصلی مرتبط هستند ( مانند تصاویر، CSS ها ، script ها ) را، زمانی که فایل اصلی پاک شد یا مورد بررسی قرار گرفت، چک کند یا پاک کند. اگر این check box ها فعال باشند،پیغامی بدین منظور برای ما ارسال خواهد شد.

FTP connection : دریم ویور به طور اتوماتیک، بعد از اتمام زمانی مشخص، ارتباط FTP را قطع می کند. شما می توانید مقدار این زمان را مشخص نمایید یا این گزینه را غیرفعال کنید. این ابزار امنیتی خوبی است.

FTP time out : دریم ویور تلاش می کند تا با سرور FTP راه دور شما، برای چند ثانیه تعریف شده، ارتباط برقرار کند. برای سرورهایی که پشت فایروال هستند یا قابلیت اتصال آهسته دارند، مدت این زمان را بیشتر کنید.

FTP transfer options : زمانی که شما از دریم ویور برای انتقال فایل استفاده می کنید، دریم ویور قبل از انتقال برای شما پنجره ای را باز می کند. با انتخاب این مورد، دریم ویور بعد از مدت زمان مشخص شده،عملیات پیش فرض را انتخاب می کند.

Proxy host : اگر شما پشت یک فایروال هستید، برای نشان دادن آدرس پراکسی سروری که برای ارتباط با سرورهای خارجی استفاده می کنید، این قسمت را ویرایش کنید. در غیر این صورت، اگر شما از پراکسی سرور استفاده نمی کنید، این قسمت را خالی بگذارید.

Proxy port : اگر شماره پورتی که برای ارتباط با remote server استفاده می کنید با شماره پورت استاندارد FTP یعنی 21 تفاوت دارد، آن را در اینجا وارد کنید.

Put options : در صورت فعال بودن این گزینه، زمانی که شما یک فایل را به local server می فرستید، دریم ویور به صورت اتوماتیک آن را ذخیره می کند. در غیر این صورت دریم ویور برای شما پیغامی می فرستد، مبنی بر اینکه قبل از قرار دادن فایل در remote server، آن را ذخیره کند.

Move options : شما می توانید با غیرفعال کردن این مورد، هشدارهایی را که درباره جا به جایی فایل در سرور، دریافت می کنید را غیر فعال کنید.

Manage Sites… : این دکمه پنجره Manage Sites را برای شما باز می کند. شما می توانید در این پنجره، یک سایت جدید اضافه کنید، سایت های موجود را ویرایش کنید، از سایت ها کپی بگیرید، سایت ها را پاک کنید و سایت ها را وارد کنید یا از آن ها خروجی بگیرید.

W3C Validator : دریم ویور یک اعتبارسنج درونی دارد و اعتبار صفحه را بر اساس DOCTYPY ای که در فهرست صفحه نوشته شده است می سنجد. اگر در بالای صفحه، DOCTYPE ای نوشته نشده باشد، می توانیم در این قسمت بگوییم بر چه اساسی اعتبار سنجی صورت گیرد.

Display : انتخاب نشان دادن خطاها و هشدارها

Don’t show W3C validator notification dialog : با فعال کردن پنل W3C VALIDATION از منوی Windows و فشار دادن دکمه سبز رنگ play می توانیم سند خود را validate کنیم.

در صورتی که این گزینه غیر فعال باشد و ما بخواهیم سند خود را validate کنیم، دریم ویور برای ما پیغامی می فرستد مبنی بر فرستادن سند مذکور برای اعتبار سنجی به W3C .

Window Sizes : شما می توانید تنظیمات پنجره سند فعال را در این قسمت ویرایش کنید.

Window sizes : زمانی که شما یک سند جدید می سازید، اطلاعات خاصی راجع به سند وجود دارد که لازم است آن ها را بدانید. یکی از این اطلاعات، سایز صفحه (به بایت) است که وقتی که با زمان دانلود همراه می شود، عامل بسیار مهمی به شمار می آید.

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

در پایین پنجره سند، نوار افقی وجود دارد، که به آن نوار وضعیت (status bar) می گویند. این نوار شامل اطلاعاتی راجع به سند فعال می باشد.

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

در این مثال اشاره گر درون تگ قرار دارد. همچنین اگر بخواهیم تگی را انتخاب کنیم، کافیست روی نام تگ، در این نوار کلیک کنیم .

در سمت راست ابزارهایی وجود دارد که برای راحتی کار دست مفید است.

این قسمت اندازه های ویندوز را نشان می دهد. با انتخاب گزینه های مختلف، می توانید ببینید سایتتان در اندازه های مختلف مانند صفحه نمایش موبایل، تبلت و ... به چه صورت نمایش داده می شود.

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

Connection speed : شما می توانید برای کمک به حساب کردن زمان دانلود صفحه که در نوار وضعیت نشان داده می شود، سرعت های متفاوتی برای برقراری ارتباط، انتخاب کنید.

 

[سیده آمین ارمان]

در این بخش می خواهیم شما را با نرم افزار کاربردی DreamWeaver CS5.5 آشنا کنیم.

ما در این آموزش فرض را بر این می گیریم که شما با زبان HTML و CSS آشنایی دارید.

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

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

بعد از قطع ارتباط با اینترنت و قراردادن (Adobe CS5 Master Collection) CD در دستگاه، آن را در My Computer ، باز کنید و بر روی فایل Setup.exe دو بار کلیک کنید. پنجره ای برای شما باز می شود که از شما می پرسد کجا فایل های فشرده شده (compressed) را باز (extract) کند. در این قسمت فقط دکمه next را بزنید.

بعد از زدن دکمه next شروع می کند به باز کردن فایل های فشرده شده.

بعد از اینکه کار آماده سازی فایل ها به اتمام رسید، پنجره ای به صورت اتوماتیک باز می شود که درحال آماده کردن فایل installاست. به هیچ عنوان این پنجره را cancel نکنید.

در ابتدای نصب، چنانچه با پیغام زیر مواجه شدید، سیستم را restart کرده و مجدد نصب برنامه را اجرا نمایید.

بعد از آماده کردن فایل installer ، پنجره ای برای شما باز می شود که باید در آن مراحل نصب را انجام دهید.

در پنجره خوشامدگویی دکمه ACCEPT را بزنید تا به مرحله بعد بروید.

در مرحله SERIAL NUMBER ، گزینه Provide a serial number را انتخاب کنید و سپس فایل Keygen.exe موجود در CD را باز کرده و روی دکمه Generate چند بار کلیک کنید. سپس شماره سریال را کپی کرده و در قسمت Provide a serial number ، آن راpaste کنید.

سپس دکمه next را زده و به مرحله بعد بروید.

در مرحله options ، شما می توانید نرم افزارهایی را که می خواهید در سیستمتان نصب کنید، را انتخاب کرده و در قسمتLocation آدرس نصب را مشخص کنید و با کلیک بر روی دکمه install آن ها را نصب نمایید.

همچنین برای نصب همه نرم افزار های Adobe Master Collection ، گزینه CS5 Master Collection که در بالا قرار دارد را انتخاب کنید.

ما در این قسمت نرم افزار دریم ویور را انتخاب می کنیم و آن را با همه component هایش نصب می کنیم.

اگر یکی از نرم افزارهای adobe باز باشد، با زدن دکمه install ، با پیغام زیر مواجه می شویم.

بعد از بستن همه نرم افزارهای adobe ، دکمه continue را می زنیم و نصب برنامه شروع می شود.

نکته : اگر شما قصد دارید همه نرم افزارهای adobe را نصب نمایید، بعد از انتخاب همه نرم افزارها در قسمت بالا، در این قسمت، اگر نرم افزار در دو cd قرار داشته باشد، در اواسط نصب برنامه، از شما می خواهد cd دوم را در دستگاه قرار دهید. شما نیز این کار را انجام دهید و بعد دکمه continue را بزنید.

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

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

در صورتی که بعد از اجرا کردن برنامه، پنجره زیر باز شد، آن را skip کنید.