Dreamweaver یکی ازنرم افزار های قدرتمند در زمینه طراحی صفحات وب می باشد

محیط این نرم افزار از بخش های زیر تشکیل شده که در ادامه با هر ی ک از این بخش ها اشنا خواهید شد :

• نوار منو

• پنل ها

• نوارهای ابزار

• محیط طراحی

پس اجرای نرم افزار پنجره زیر مشاهده می شود که از طریق ان می توانید کار خود را شروع کنید .



OPEN A RECENT LTEM : برای باز کردن مجدد فایل هایی که قبل از بستن برنامه با انها کار می کردیم.

CREATE NEW :برای ایجاد یک فایل جدید که این فایل می تواند یکی از گزینه های زیر باشد :

HTML : ایجاد صفحه وب استاتیک

COLD FUSION: ایجاد برنامه های تحت وب که با نرم افزار COLD FUSION ایجاد شده اند .

PHP: ایجاد وب DYNAMIC با تکنولوژی PHP

ASP JAVA : ایجاد صفحه وب DYNAMIC با تکنولوژی ASP و زبان JAVA

ASP VB : ایجاد صفحه وب DYNAMIC با تکنولوژی ASP و زبان VB

ASP. NET C# :ایجاد صفحه وب DYNAMIC با تکنولوژی ASP.NET و زبان C#

ASP.NET VB : ایجاد صفحه وب DYNAMIC با تکنولوژی ASP.NET و زبان VB

JSP : ایجاد صفحه وب DYNAMIC با تکنولوژی JSP

CSS : ایجاد CASCADING STYLE SHEET

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

CREATE FROM SAMPLES : در این قسمت می توانید از انواع قالب های اماده برای طراحی صفحات خود استفاده کنید به عنوان مثال گزینه FRAMESETS برای ایجاد صفحه ای با ساختار فریم استفاده میشود .

EXTEND : در این قسمت از طریق گزینه DREAMWEAVER بامراجعه به سایت http://WWW.MACROMEDIA.COM می توانید از EXTENSION های رایگان مربوط بهاین نرم افزار استفاده کنید .

نوارمنو ( MENU BAR )

هر یک از این منو ها و گزینه های مربوط به انها در ادامه توضیح داده خواهد شد .

پنل ها ( PANELS )

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

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

DOCUMENT :

این بخش شامل محیط طراحی و کد نویسی می باشد و ابزارهایی برای تست و اشکالزدایی صفحات دارد که از سه قسمت زیر تشکیل شده :

CODE :محیط کد نویسی

SPLIT : محیط ترکیبی کد نویسی و طراحی

DESIGN : محیط طراحی به کمک ابزار های طراحی

مدیریت سایت

همانطور که قبلا گفته شد توسط پنل FILES می توانید یک ساختار مدیریت شده برای کل وب سایت خود ایجاد کنید که این کار را قبل از شروع کار باید انجام دهید اما برای طراحی صفحات DYNAMIC با استفاده از گزینه های شکل (1-1) شما روی سیستم عاملی مانند WINDOWS NT WINDOWS SERVER باشد اما اگر شما از سیستم عامل WENDOWS XP PROFESSIONAL استفاده می کنید می توانید از یک وب سرور شخصی با عنوان LLS استفاده کنید .

نصب IIS – از طریق مسیر زیر پنجره WENDOWS COMPONENTS WIZARD را باز کنید :

START>CONTROL PANEL > ADD OR REMOVE PROGRAMS >ADD/ REMOVE WINDOWS COMPONETS گزینه LNTERNET ENFORMATION SERVICES(LLS) را فعال کنید و بعد از قرار دادن CD ویندوز XP کلید NEXT را کلیک کنید .

پس از نصب LLS جهت تست ان مرورگر خود را باز کنید و در نوار ادرس HTTP://LOCALHOST را تایپ کنید با زدن کلید اینتر باید دو صفحه وب که حاوی اطلاعاتی درباره LLS هستند مشاهده شود در غیر این صورت هنگام نصب پیکر بندی LLS صحیح انجام نشده .

ابزار های طراحی

اگر شما علاقه ای به کد نویسی ندارید می LNSERT قرار دارند توانید از ابزارهای طراحی که در پنل استفاده کنید برای این کار کافیست طبق شکل (5-1) به محیط DESIGN رفته و از لبه ها و ابزار هایی که در ادامه توضیح داده می شوند استفاده کنید خواهید دید که کد های مربوطه به طور خود کارتوسط DREAMWEAVER تولید می شود .

لبه COMMON

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

:Text متن مورد نظر را که می خواهیم به عنوان لینک عمل کند.

Link : مقصد لینک که می تواند آدرس یک صفحه در سایت جاری یا یک url میباشد .

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

_blank : موجب باز شدن پنجره مرورگر جدید می شود .

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

_self : محتویات صفحه در پنجره فعال نمایش داده می شود .

_top : در صورت وجود فریم در پنجره تمام فریم ها حذف می شود .

title : توضیحی که هنگام قرار گرفتن اشاره گر روی متن لینک به صورت tool tip نمایش داده می شود .

Access key : کلید های تر کیبی برای کار با صفحه کلید .

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

EMAIL LINK : برای ایجادلینک پست الکترونیک . وقتی کاربر روی این نوع لینک کلید کند نرم افزاری مانند OUT LOOK اجرا خواهد شد و از طریق ان می توانید یک EMAIL ارسال کند .

NAMED ANCHOR : از طریق این ابزار می توانید در خود صفحه جاری لینک ایجاد کنید در واقع بیشترین کاربرد این ابزار در صفحاتیاست که برای مشاهده تمام مطالب باید از SCROLL BAR استفاده کرد در این گونه صفحات می توان در بالا و پایین صفحه لینک هایی ایجاد کرد تا با کلیک روی انها از بالا به پایین صفحه و بر عکس مراجعه نمود .

روش استفاده : فرض کنید می خواهیم با کلیک روی متن DOWN در بالای صفحه به پایین صفحه پرش کنیم ( برای درک راحت تر ابتدا یک صفحه با مطالب زیاد ایجاد کنید بطوریکه در مرورگر SCROLL BAR فعال شود )

• اشاره گر را در اخرین خط صفحه قرار دهید واین ابزار را کلید کنید در پنجره باز شده یک نام دلخواه برای ANCHOR تایپ کنید

• اشاره گر را در اولین خط صفحه قرار دهید و عبارت DOWN را تایپ کنید.

• متن نوشته شده را انتخاب کنید و روی ابزار LINK کلیک کنید .

• در پنجره باز شده منوی LINK را باز کنید و نام ANCHOR را در مرحله 1 ایجاد کرده بودید انتخاب کنید ( دقت کنید که قبل از نام ANCHOR کاراکتر # قرار گرفته است ) .

• باز دادن کلید F12 صفحه را تست کنید .

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

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

تنظیمات این ابزار طبق جدول زیر می باشد :

ROWS : تعداد سطر ها

Clumns : تعداد ستون ها

Table with : پهنای جدول

Border thickness : ضخامت کادر اطراف خانه

Cell padding : فضای هر خانه

Cell spacing : فاصله خانه ها از یکدیگر

Header : موقعیت تیتر ها

Caption : عنوان جدول

Align caption :موقعیت عنوان

Summary : توضیح درباره جدول

IMAGES : این ابزار شامل بخش های زیر است :

IMAGE – برای درج تصویر .

IMAGE PLACEHOLDER – از طریق این ابزار می توانید یک فضای مشخص از نظر عرض و ارتفاع برای درج تصویر در صفحه اختصاص دهید . ویژگی این ابزار و در واقع تفاوت آن با ابزار IMAGE اینست که در صورت حذف عکس همچنان فضای مربوط به ان در صفحه مشاهده می شود و یک TOOL TIP نیز برای ارایه توضیح درباره عکس نمایش داده خواهد شد . (متن TOOL TIP را در فیلد ALTERNATE TEXT وارد کنید ) .

ROLLOVER IMAGE - از طریق این ابزار می توانید یک تصویر در صفحه قرار دهید بطوریکه با قرار گرفتن اشاره گر روی ان یک تصویر دیگر نمایش داده شود .

FIREWORKS HTML - برای درج فایل هایی که با نرم افزار FIREWORK ایجاد شده اند .

NAVIGATION BAR – یکی از اجزا اصلی که همواره باید در صفحات وب وجود داشته باشد BAR NAVIGATION است که در واقع مجموعه ای از لینک ها می باشد که کاربر از طریق ان می تواند در وب سایت براحتی به صفحات دیگر مراجعه کند . از طریق این ابزار می توانید این ویژگی را به صفحه خود اضافه کنید و برای لینک ها نیز از تصاویر به سبک ROLLOVER استفاده کنید .

HOTSPOT - توسط این ابزار می توانید در قسمت های مختلف یک تصویر لینک هایی ایجاد کنید . برای این کار کافیست پس از انتخاب گزینه مورد نظر مثلا DRAW OVAL HOTSPOT اشاره گر را روی ان قسمت از تصویر که می خواهید به صورت لینک عمل کند درج نمایید سپس در پنل PROPERTIES در فیلد LINK مقصد لینک را مشخص کنید .

اصطلاح : به این تصاویر IMAGE MAP گفته می شود .

MEDIA : این ابزار شامل بخش های زیر است :

FLASH – برای قرار دادن یک فایل FLASH با پسوند SWF در صفحه استفاده می شود .

FLASH BUTTON – از طریق این ابزار می توانید از کلید های اماده فلش در صفحات خود استفاده کنید .

Style : انتخاب کلید

Button text : متن روی کلید

Font : فونت متن روی کلید

Link : مقصد لینک

Target : هدف لینک

Target : هدف لینک

Bg color : رنگ زمینه کلید

Save as : نام فایل مربوط به کلید

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

FLASH TEXT : برای ایجاد متن دلخواه با قالب SWF استفاده می شود که تنها جلوه مربوط به این نوع متن مانند تصاویر ROLLOVER می باشد که قبلا با آنها آشنا شدید . برای استفاده از این ابزار باید تنظیمات زیر را انجام دهید .

Font : فونت متن

Size : اندازه متن

Color : رنگ متن وقتی که اشاره گر روی آن نیست

Rollover color : رنط متن وقتی که اشاره گر روی آن قرار دارد .

Text : متن مورى نئر جهت نمایش در صفحه

Show font : ا گر این گؤینه فعال باشد در فیلد Text تاثیر فونت انتخابی را خواهید دید .

Link : مقصد لینک

Target : هدف لینک

Bg color : رنگ پیش زمینه متن

Save as : نام فایل مربوط به متن

SHOCKWAVE : از طریق این ابزار می توانید فایل های ایجاد شده در نرم افزار SHOCKWAVE را در صفحات خود درج کنید .

APPLET ? PAREM ? ACTIVEX :این سه گزینه برای ایجاد صفحات وب ACTIVE استفاده میشود مثلا از طریق APPLET می توانید یک انیمیشن سه بعدی را در صفحه قرار دهید .

صفحات وب ACTIVE صفحاتی هستند که وقتی کار بر انها را از SERVER در خواست می کند یک برنامه به مرور گر ارسال می شود . توجه کنید که یکی از راحت ترین روش های HACK استفاده از همین صفحات می باشد .

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

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

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

TEMPLATES : منظور از TEMPLATE قالب اماده ای است که در واقع ساختار و محل تک تک عناصر صفحه را به طور پیش فرض تعیین می کند و تنها کاری که طراح صفحه باید انجام دهد اینست که عناصر را در محل از پیش تعیین شده قرار دهد .

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

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

مراحل ایجاد TEMPLATE :

• طرح کلی صفحه را روی کاغذ پیاده کنید .

• یک صفحه وب جدید ایجاد کنید ( طبق توضیحات مربوط به شکل (1-1) )

• از طریق ابزار TEMPLATES گزینه MAKE TEMPLATE را انتخاب کنید .

• در پنجره باز شده در فیلد SITE همان سایتی را که برای مدیریت وب سایت خود ایجاد کرده اید انتخاب کنید و یک نام برای TEMPLATE در قسمت SAVE AS تایپ کنید .

• تنظیمات مربوط به TEMPLATE مانند رنگ یا تصویر زمینه حاشیه ها نوع ENCODING و کلا تمام جزییاتی که در تمام صفحات وب سایت باید ثابت باشند مثل لوگوی وب سایت را در محل مورد نظر قرار دهید .

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

EDITABLE REGION (ناحیه قابل ویرایش )

OPTIONAL REGION ( ناحیه شرطی )

REPEATING REGION (ناحیه تکرار شونده )

EDITABLE OPTIONAL (ناحیه قابل ویرایش شرطی )

REPEATING TABLE (جدول تکرار شونده )

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

EDITABLE REGION – برای ایجاد یک ناحیه قابل ویرایش در محل دلخواه استفاده می شود یعنی در محلی از صفحه که می خواهید اجازه ویرایش و تغییرات را به اعضای تیم طراحی بدهید کافیست این ناحیه را ایجاد کنید .

OPTIONAL REGION – توسط این گزینه می توانید یک ناحیه شرطی ایجاد کنید یعنی با اعمال شرط روی پارامتر های مربوط به این ناحیه می توان ان را نمایش داد یا پنهان نمود . برای استفاده از این ابزار ابتدا اشاره گر را در محل دلخواه قرار دهید و این گزینه را انتخاب کنید . در پنجره باز شده در کادر NAME یک نام برای این ناحیه تایپ کنید و کلید را کلیک کنید توجه کنید که اگر گزینه DEFAULT OK SHOW BY را غیر فعال کنید این ناحیه نمایش نخواهد داده شد .

REPEATING REGION - این ناحیه این ویژگی را دارد که هنگام طراحی کلید های + و – که روی ان ظاهر می شوند تکرار یا حذف شود . اگر می خواهید قابلیت ویرایش را به این ناحیه اضافه کنید کافیست درون ان یک EDITABLE REGION قرار دهید .

EDITABLE OPTIONAL REGION – این ناحیه دقیقا مانند OPTIONAL REGION می باشد با این تفاوت که هنگام طراحی می توان ان را ویرایش نمود .

REPEATING TABLE - توسط این گزینه می توانید یک جدول با قابلیت تکرار در صفحه ایجاد کنید مانند گزینه REPEATING REGION

توجه 1- برای استفاده از TEMPLATE های ایجاد شده از منوی FILE NEW را انتخاب کنید و در پنجره باز شده از لبه TEMPLATS نام قالب ایجاد شده را از لیست موجود انتخاب کرده و کلید CREATE راکلیک کنید.

توجه 2- اگر در TEMPLATE انتخاب شما ناحیه OPTIONAL REGION وجود دارد برای تغییر پارامتر های مربوط به آن و نمایش یا عدم نمایش از منوی MODIFY گزینه TEMPLATE PROPERTIES را انتخاب کنید در پنجره باز شده لیست پارامتر ها و مقادیر پیش فرض انها نشان داده می شود با انتخاب پارامتر مورد نظر با فعال یا غیر فعال کرد گزینه SHOW در پایین پنجره می توان مقدار پارامتر را تغییر داد .

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

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

***
منبع:  p30world.com و takp30.ir