Dreamweaver شناخت محیط

پس از اجرای برنامه ،Dreamweaverپنجرهای ظاهر میشود که حاوی مجموعهای از منوها،پانلها 1و دکمهها برای اجرای دستورات موردنظر و طراحی و مدیریت اجزای صفحۀ وب است. در این بخش با عناصر موجود در این پنجره و کاربرد هر یک آشنا خواهید شد.

صفحه شروع

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

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

در ستون میانی که Create Newنام دارد، لیستی از پرکاربردترین فایلهای قابل تولید در محیط برنامه قرار گرفته که با کلیک روی هر یک از آنها میتوانید فایل موردنظر را ایجاد کنید.

اگر فرمت موردنظر شما در این لیست قرار ندارد روی دکمه Moreکه در انتهای ستون قرار دارد کلیک کنید تا سایر فرمت ها هم برای انتخاب در اختیار شما قرار گیرند.

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

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

در انتهای صفحه شروع، گزینه Don’t show againرا میبینید که چنانچه آن را علامت بزنید،دیگر صفحه شروع در ابتدای راه اندازی برنامه یا زمانی که همه فایل های درون نرمافزار را میبندید،دیده نخواهد شد.

در صفحه شروع روی گزینۀ HTMLکلیک نموده و در سمت راست پنجرهای که ظاهر میشود از لیست Doctype گزینه XHTML 1.0 Transitional را انتخاب نمایید.

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

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

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

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

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

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

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

:Commands حاوی مجموعه ای از دستورات برای مدیریت و سازماندهی کدهای موجود در صفحه است.

Site ایجاد یک وبسایت جدید و انجام تنظیمات عمومی و امنیتی وبسایت های موجود بر روی رایانه یا سرور وب از طریق دستورات این منو صورت میپذیرد.

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

Help مانند هر نرم افزار دیگری حاوی گزینه های موردنیاز کاربر برای دسترسی به راهنمای برنامه، بهروزرسانی نرمافزار و نیز ثبت و فعالسازی آن است.

پانلها

با توجه به تعدد ابزارها و تنظیمات مـورد نیاز در محیط نـرم افـزارهای طراحــی و لـزوم دسترسی سریع و آسان طراح به آنها، در اغلب برنامه ها برای ساماندهی این تنظیمات از مجموعه ای از پانل ها استفاده میشود که به صورت صفحات کوچکی، بخشی از پنجره برنامه را اشغال میکنند.

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

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

میان پانل هـای مـوجـود در پنجره، خـطوط جداکنندهای وجود دارد که وقتی اشاره گر ماوس را روی اکثر آنها قرار میدهید به شکل یک پیکان دوسر درمیآید.

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

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

در انتهای نواری که نام زبانه ها روی آن قرار گرفته یک مثلث کوچک وجود دارد که با کلیک روی آن میتوانید منوی زبانه را ظاهر کنید. این منو حاوی دستوراتی برای مدیریت پانل است، برای مثال با انتخاب گزینه ،Closeزبانه فعال بسته میشود و کلیک روی گزینه Close Tab Groupپانل را میبندد.

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

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

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

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

پنجره سند

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

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

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

از آنجا که هر صفحه وب حاوی مجموعه ای از کدها برای ایجاد نمای گرافیکی صفحه است، در
زیر زبانه های حاوی نام اسناد سه دکمه زیر تعبیه شده است:
Code کدهای تولید شده یا نوشته شده برای صفحه را نمایش میدهد.
Design سند را در نمای طراحی قرار میدهد تا با استفاده از ابزارهای موجود در برنامه، عناصر
دلخواه را به صفحه اضافه کنید.
Split نیمی از پنجره سند را به نمای کد و نیمی دیگر را به نمای طراحی اختصاص میدهد. در
این آموزشات، این حالت را «نمای ترکیبی» مینامیم.

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

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

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

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

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

پانل و نوار Insert

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

در بالای این پانل منویی قرار دارد که شامل حالت هایی برای تعیین گزینه های قابل نمایش در پانل Insertاست. برای نمونه، هنگامی که این منو را روی حالت Common تنظیم میکنید، عناصری که به صورت معمول در طراحـی صفحات وب کـاربرد دارند ظاهـر میشوند.

با کلیک روی علامت مثلث میتوانید سایر گزینه های موجود در این منو را ببینید. برای مثال با انتخاب حالت ،Textامکانات موردنیاز برای قالب بندی متن و افزودن برچسب هایی مانند < >ol< ،>pre< ،>i< ،>bو ... در اختیار شما قرار خواهد گرفت.

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

ضمناً با راست کلیک روی محدودۀ خاکستری رنگ و انتخاب گزینۀ Color Ions میتوانید دکمه های موجود در این نوار و سایر آیکن های موجود در برنامه را از حالت تکرنگ به حالت رنگی دربیاورید.