آموزش Front Page

[h2ac01ke1r]

آموزش Dream Weaver

در این تاپیک قصد دارم آموزش Dream Weaver رو براتون بذارم ممنون میشم مقاله های تکمیلی خودتون ارسال کنید.

 

[h2ac01ke1r]

آموزش DreamWeaver MX 2004 (قسمت اول(

آموزش دریم ویور(DreamWeaver MX)

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

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

• نوار منو
• پنل ها
• نوارهاي ابزار
• محيط طراحي

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

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

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

:HTML ايجاد صفحه وب استاتيك

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

HP ايجاد وب DYNAMIC با تكنولوژي PHP

:ASP JAVASCRIPTايجاد صفحه وب DYNAMIC با تكنولوژي ASP و زبان JAVASCRIPT

:ASP VBSCRIPTايجاد صفحه وب DYNAMIC با تكنولوژي ASP و زبان VB

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

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

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

:CSS ايجاد CASCADING STYLE SHEET

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

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

:EXTEND در اين قسمت از طريق گزينه DREAMWEAVER بامراجعه به سايت www.macromedia.com مي توانيد از EXTENSION هاي رايگان مربوط به اين نرم افزار استفاده كنيد .

نوارمنو (MENU BAR)

هر يك از اين منو ها و گزينه هاي مربوط به انها در ادامه توضيح داده خواهد شد

پنل ها ( PANELS )

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

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

DOCUMENT:

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

:CODEمحيط كد نويسي

:SPLITمحيط تركيبي كد نويسي و طراحي

ESIGNمحيط طراحي به كمك ابزار هاي طراحي

مديريت سايت

همانطور كه قبلا گفته شد توسط پنل FILES مي توانيد يك ساختار مديريت شده براي كل وب سايت خود ايجاد كنيد كه اين كار را قبل از شروع كار بايد انجام دهيد اما براي طراحي صفحات DYNAMIC با استفاده از گزينه هاي شما روي سيستم عاملي مانند 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 صحيح انجام نشده .

 

[h2ac01ke1r]

آموزش DreamWeaver MX 2004 ( قسمت دوم)
ابزار هاي طراحي

اگر شما علاقه اي به كد نويسي نداريد مي 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: نام فايل مربوط به متن

 

[h2ac01ke1r]

آموزش DreamWeaver MX 2004 ( قسمت سوم)
SHOCKWAVE: از طريق اين ابزار مي توانيد فايل هاي ايجاد شده در نرم افزار SHOCKWAVE را در صفحات خود درج كنيد


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

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

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

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

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

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

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

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

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

• يك صفحه وب جديد ايجاد كنيد

• از طريق ابزار 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 تگ در محل مشخص شده درج خواهد شد و مي توانيد پارامترهاي ان را در صورت نياز مشخص كنيد.

حتما تا حالا از سایتهای اینترنتی بازدید کرده اید،هر سایت از چند صفحه تشکیل شده است که می نوانند حاوی انواع اطلاعات مانند متن ،صوت،فیلم و ... باشند،به این صفحات صفحه وب(Web Page) می گویند .

زبان اصلی برای طرحی وایجاد صفحات وب HTML(Hyper Text Markup Language) یا زبان نشانه های ابر متن می باشد.در زیر تا حدودی با HTML آشنا می شوید .

 

[h2ac01ke1r]

آموزش DreamWeaver MX 2004 ( قسمت چهارم )
آشنایی با HTML

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

<html>
<head>
<title>Title of Page</title>
</head>
<body>
Page body
</body>
</html>


هر صفحه HTMLی با <html> شروع وبا </html> خاتمه می پذیرد،در واقع تگ html کل محتوای صفحه را در می گیرد.در داخل تگhtml دو تگ head وbody قرار می گیرند،تگ headحاوی اطلاعاتی در مورد صفحه مانند عنوان صفحه و...است،تگ body بدنه صفحه است وتمام محتوای صفحه درون آن تعریف می شوند.

بیشتر تگهای html به صورت جفتی هستند ،قسمت اول به صورت<tag name> وقسمت دوم به صورت </tagname> می باشد درواقع این تگ بر کل محتوای درون تگ ابتدایی و پایانی تاثیر می گذارد.مثلا تگهای body ،html ،head وtitle نیز به صورت جفتی تعریف می شوند.
کد زیر را در notepad بنویسید وبا پسوند html ذخیره کنید ،حال به محل ذخیره آن بروید وآن را باز کنید


<html>
<head>
<title>My First Page</title>
<head/>
<body>
<b>welcome to html</b>
</body>
</html>


اولین صفحه وب شما ایجاد شده است که یک پیغام ساده را نشان می دهد.تگ</b> <b> باعث ضخیم شدن متن داخل تگ میشود.

نرم افزارهای ویرایشگر Html

در قسمت قبلی ایجاد صفحات وب با نوشتن کد html را توضیح دادیم،به نظر می رسد که کار نسبتا وقت گیری باشد،نرم افزارهایی وجود دارند که می توان با استفاده از آنها بدون کدنویسی یا با کد نویسی صفحات وب را ایجاد کرد.مهمترین آنها Front Page و DreamWeaver MX می باشند.نرم افزار Dreamweaver امکانات بیشتری دارد و می توان با آن صفحات پویا را نیز ایجاد وبا DB ها ارتباط برقرار کرد.
از مهمترین ویژگی این نرم افزارها ویژگی WYSIWYG آنهاست.یعنی در محیط طراحی صفحه آنچه را که بعدا در مرورگر نمایش داده می شود قابل دیدن است.

“What You See is What You Get”


در این جزوه نرم افزار Macromedia DreamWeaver توضیح داده می شود.

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

• واسط کاربری مناسبی دارد وکار با آن ساده است.
• توانایی ایجاد صفحات پویا را دارد وپنج سرور کاربردی را ساپورت می کند.
• ایجاد وتوسعه سایت ومدیریت محتوای آن به سادگی امکانپذیر است.
• با نرم افزارهای flash و firework یکپارجه شده است.
• سه حالت نمایشی Code ،Design و Split دارد.
• بدون کدنویسی می توان صفحات را ایجاد کرد.
• می توان با استفاده ازFTP سایت خود را Upload کرد.
• امکانات استفاده مجدد مانند قالبها ،Code Snippet و.. رادارد.
• استفاده از CSS ورفتارهای جاوا اسکریپت را فراهم کرده است.
• امکانات پیشرفته کدنویسی هم دارد.








در این آموزش ایجاد سایت وصفحات مربوطه ،مدیریت فایلها وAsset های سایت، طراحی صفحات با لایه ،جدول وفریم ، استفاده ازTemplete ،اضافه کردن انواع محتوا مانند متن ،عکس،مالتی مدیا ،عناصر تعاملی ،صوت وفیلم،لینک کردن وناوبری وابزارهای لینک ،کار باCSS ، استفاده از رفتارهای java script ،کار با صفحه کد و امکانات کدنویسی،ایجاد صفحات پویا و برنامه های کاربردی وب وارتباط با DB با استفاده از Asp توضیح داده می شود:

1. شناخت مفاهیم پایه ای و کار با DreamWeaver
2. کار با سایتهای DreamWeaver
3. طرح بندی صفحات(layout)
4. اضافه کردن محتوا به صفحات
5. کار با صفحه کد
6. تدارک برای ساخت سایت پویا
7. ایجاد صفحات پویا
8. توسعه برنامه های کاربردی وب(Web Application)


شناخت مفاهيم پايهاي و كار با دريم ويور

آشنايي با دريم ويورو كاربرد آن :

دريم ويور يك ويرايشگر حرفهاي HTML است كه با آن به سادگي ميتوان به صورت ويژوال و گرافيكي عناصر HTMLي به صفحهي وب اضافه كرد ، با اضافه كردن عناصر كد HTML آنها اضافه ميشود . دريم ويور يك محيط كد نويسي كامل نيز دارد و ميتوان براي اضافه كردن و ويرايش عناصر از اين محيط نيز استفاده كرد .

دريم ويور قابليت استفاده از css و رفتارهای جاوا اسکریپت را به سادگي مهيا كرده است . همچنين علاوه بر صفحات ايستاي HTML ميتوان از تكنولوژيهاي طرف سرور مانند ColdFusion , JSP , ASP.Net , PHP , ASP براي ايجاد صفحات پويا و ارتباط با پايگاه داده (db) استفاده كرد .

اين نرم افزار داراي واسطي زيبا و قدرتمند است كه كاربران ميتوانند به راحتي صفحات وب خود را بسازند . ميتوان فايلها وصفحات سايت را به راحتي مديريت كرد . همچنين ميتوان با اين نرمافزار واز طريق FTP سايت خود را در اينترنت انتشار دهيد .
ميتوان همزمان از نرمافزارهاي …, firework , flash نيز براي ويرايش محتويات صفحات وب استفاده كرد.
نكتهي خيلي مهم در مورد اين نرمافزار كارايي و امكانات زياد و سادگي كار با آن است.

 

[h2ac01ke1r]

آموزش DreamWeaver MX 2004 ( قسمت پنجم )
فضاي كاري ومحيط دريم ويور

این نرم افزار يك محيط يكپارچه دارد و داراي سه حالت نمايشي است:

1. Code View نمايش كد HTML صفحه.
2. ِDesign View : مد طراحي براي اضافه كردن و ويرايش محتوا به صورت گرافيگي.
3. : Splitنمايش همزمان مد كد و طراحي.

در محيط Split ميتوان با انتخاب هر شيء كد مربوط به آن را مشاهده كرد.
پنجرهي اين نرمافزار داراي دو محيط Coder , Window است. تنها تفاوت اين دو محيط اين است كه در محيط Window پنلها در سمت راست و در محیط Coder برای هماهنگی با نرم افزارهایی مانند Home Site در سمت چپ صفحه قرار ميگيرند.براي تغيير فضاي كاري ( Coder , Window )ميتوان از دكمهي Change Workspace در مسير Edit à Preference à General استفاده كرد . تغيير بعد از راهاندازي نرمافزار اعمال ميشود.
هم چنين در صفحه شروع ( Start page ) ميتوان نوع صفحه جديد را ( … , ASP , HTML ) انتخاب كرد.براي مخفي كردن و نمايش Start page ميتوان در مسير Prefrence à General از گزينه Show Start Page استفاده كرد .

عناصر فضاي كاري

1. نوار ابزار سند(Document) : براي تغيير حالت نمايشي صفحه و ... .
2. نوار ابزار استاندارد
3. نوار Insert ( Insert bar )

اين نوار شامل چند گروه دكمه است كه براي اضافه كردن اشيا به صفحه استفاده ميشود و
شامل گروههاي زير است :

:Commonدكمه های عمومي كه بيشتر استفاده ميشود
: Layout دكمه های مربوط به طرح بندي صفحات
: Formدرج فرم و اشياء مربوطه
: Applicationمربوط به صفحات پويا
: Textعناصر متني و فرمت بندي متن
: Favorite دکمه هایی که خودمان به این قسمت اضافه کرده ایم
و...

اين نوار به صورت فشرده و Tabي قابل مشاهده است .
4. نوار وضغيت (Status bar (

در پايين صفحه وبالای پنل Properties قرار دارد وحاوي قسمتهاي زير است :
تگ HTML شيء انتخاب شده .
اندازه صفحه بر حسب kb
اندازه پنجره ( طول و عرض)
زمان download صفحه

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

5 . منوها

مانند اکثر نرمافزارها شامل منوهای زیر است:
: File كارهاي عمومي مانند ايجاد و ذخيره صفحه
: Edit ويرايش محتویات صفحه
: Insert درج محتويات صفحه
: Modifyاصلاح محتويات صفحه
: Site تعريف و مديريت سايتها
: Viewنمايش نوار ابزارها و تغيير حالت نمايشي
: Windowنمايش و مخفي كردن پنلها

6. پنلها( Panels ) .

هر پنل براي كار خاصي ايجاد شده است . چند پنل مربوط به هم به صورت يك گروه نشان داده ميشوند . مثلاً گروه پنل Design شامل پنلهاي CSS Style و Layer است، گروه پنل Applicationشامل پنلهاي ( Component,Server behavior , binding , db مربوط به صفحات پويا ) است.

7. پنلProperties

در پايين صفحه قرار گرفته و شامل ويژگيهاي مربوط به شيء انتخاب شده در صفحه است و ميتوان با استفاده از آن ويژگيها را تغيير و ويرايش كرد . اين پنل زیاد مورد استفاده قرار ميگيرد.

نكته 1 : براي نمايش و مخفي كردن نوار ابزارها (Toolbar) از منوي View استفاده ميشود .
نكته 2 : براي نمايش و مخفي كردن پنلها(Panels) از منوي Window استفاده ميشود .
نكته 3 : ميتوان با بستن تمام پنلها محيط صفحه را Maximize كرد.
نكته 4 : تنظيمات نرمافزار در منوي Edit گزينهي Prefrence وجود دارد.
نكته 5 : ويژگيهاي كلي صفحه مانند رنگ زمينه و ... در منوي Modify گزينهي Page Properies قابل تغيير است .

استفاده از ميانبرهاي صفحه كليد .

در منوي Edit گزينهي Keyboard shortcut قابل تغيير است .

اصول ساختن و كار با اسناد

. ايجاد فايل جديد: File à New
ميتوان يك فايل خالي يا بر اساس الگوهاي طراحي و قالبهاي موجود ايجاد كرد .
بايد نوع صفحه را انتخاب كرد .
. ذخيره فايل: File à Save
فايلهاي HTML با پسوند Htm و Html ذخيره ميشوند .
.باز كردن فايل File à Open:
فايلهاي Text , CSS وJava Script به صورت پيش فرض در محيط كد باز ميشوند .
. تنظيمات مربوط به فايل جديد در قسمت New document در Prefrence وجود دارد .

كار با سايتهاي دريم ويور:

- مفهوم سايت (Site)

سايت مجموعهي چند صفحه وب مربوط به هم و فايلهاي استفاده شده در آن مانند عكسها و ... است . در دريم ويور ميتوان به راحتي سايتي را تعريف كرد و صفحات آن را ايجاد كرد . ميتوان همزمان چندين سايت ايجاد كرد . محتويات سايت از پنل File قابل مديريت است ، پنلAsset نيز حاوي اشياي استفاده شده واموال سايت مانند عكسها ، فايلهاي فلش و ... است .
- اصول برقراري و ايجاد يك سايت

براي ايجاد و تعريف سايت جديد از منوي Site گزينهي Manage Site استفاده ميشود.
در اين کادر دكمههاي زير وجود دارد :
New : ايجاد سايت جديد Edit : ويرايش سايت موجود
Remove : حذف سايت موجود Duplicate : ايجاد يك كپي از سايت موجود
ٍExport : صادر كردن سايت در فايل Import : وارد كردن سايت exportشده

نكته : فايلهاي export و Import داراي پسوند Ste بوده و حاوي تنظيمات سايت مربوطه هستند.

- ايجاد سايت جديد

ميتوان از دو روش Wizard (مرحلهاي) و Advanced (تنظيمات به صورت پيشرفته) استفاده كرد.
براي ايجاد يك سايت بايد اطلاعات زير را وارد كرد :

. نام سايت
:Local Infoمحل ذخيره اطلاعات و فايلهاي سايت بر روي سيستم محلي و محل ذخيره عكسها.
: Remote Infoمحل ذخيره اطلاعات و فايلهاي سايت بر روي سيستم راه دور(Server) و مشخص كردن نوع شبكه.
: Testing Infoمحل ذخيره اطلاعات و فايلهاي مربوط به پردازش صفحات پويا و نوع تكنولوژي پويا .
نكته : قسمت remote و testing براي صفحات ايستا (HTML) لازم نيست .

بعد از ايجاد سايت ، محتويات آن در پنل File قابل مديريت است و در صورت وجود چند سايت ميتوان سايت مورد نظر را انتخاب كرد . همچنين نماي Local , remote و testing از طريق این پنل فايل قابل تغيير است .

-اصول مديريت فايلهاي مربوط به سايت
فايلها و صفحات مربوط به سايت در پنل File نمايش داده ميشوند . از طريق اين پنل همچنين محتويات MyComputer قابل نمايش است .
ميتوان در اين پنل در داخل سايت فايلها و فولدرهاي مورد نياز را ايجاد كرد و همچنين آنها را حذف كرد .
كليك راست New File/Folderك
انتقال به سرور : دكمه Connect
فرستادن فايل به سرور Upload) : دكمه Put
گرفتن فايل از سرورDownload) : دكمه Get
حالت نمايشي expand : دكمه expand

در اين حالت فولدر Local ، , Remote... به صورت گسترده نمايش داده ميشوند و مديريت راحتتر است.

- همزماني فايلهاي Local و Remote
انتخاب ك كليك راست Synchronice ك
Put Newer File to remote : فرستادن فايلهاي جديد به سرور .
: Get Newer File From remote گرفتن فتيلهاي جديد ( تغيير يافته ) از سرور .
Put and Get Newerfile : گرفتن و فرستادن فايلهاي جديد .



- استثنا قائل شدن براي انجام همزمانی و Put و Getو ... :

استفاده از Clocking و قابل اعمال بر روي :

1. يك فولدر : كليك راست Clocking ك
2. نوع خاصي فايل : در قسمت ويرايش سايت در قسمت Clocking ومشخص كردن پسوند نوع فايل .

نقشه سايتSitemap) :
. نمايش فايلها و صفحات سايت در دو سطح به صورت درختي .
. در حالت Map View قابل نمايش است .
. براي استفاده بايد در Map layout در قسمت ويرايش سايت يك صفحه را به عنوان Homepage مشخص كرد .
نكته : همه اعمال بالا در حالت Expend نيز قابل انجام است .

اصول مديريت Asset ها و Library هاي مربوط با سايت

 

[h2ac01ke1r]

آموزش DreamWeaver MX 2004 ( قسمت ششم – آخر(
تمام فايلهايي كه در صفحات سايت استفاده ميشوند به صورت خودكار در پنل Asset سازماندهي ميشوند .
اين پنل شامل گروههاي زير است :
: Image عكسهاي استفاده شده در سايت
: Urlادرسهاي سایت استفاده شده در سايت
: Flash object اشياء فلش استفاده شده در سايت
: Shockwave movieفايلهاي Shockwave
: Library ايتمهاي كتابخانهاي مربوط به سايت
: Templateقالبهاي ايجاد شده در سايت
از طريق پنل Assetميتوان اشياء را به صفحات ديگر اضافه كرد .
پنل Asset شامل دو قسمت است :
: Site كل Assetهای سایت
Favorate : Asset های هاي برگزيده ( خالي است و بايد خودمان اضافه كنيم )
کتابخانه : Library
ميتوان ايتمهايي ايجاد كرد و به تعداد زياد در سايت استفاده كرد .
مزيت : با تغيير آيتم كتابخانهاي (Library item) همه اشيايي كه از طريق آن به صفحه اضافه شدهاند بروز ميشوند .
- ايجاد آيتم كتابخانهاي
می توان یک ایتم خالي يا از اشیای انتخاب شده ( مثلاً يك عكس ) ایجاد کرد ،برای این کار از دكمهي New library item در پايين پنل بعد از انتخاب گروه Library استفاده می شود.آیتم Library می تواند یک صفحه حاوی انواع محتوا باشد،این آیتمها در فولدرLibrary در فولدر مربوط به سایت و با پسوند lib ذخیره می شوند.

- اضافه كردن ايتم به صفحات با درگ ماوس
- دکمه Detch from original
بعد از اينكه شيء را از طريق Library به صفحه اضافه كرديم اگر بخواهيم بعد از تغيير ايتم كتابخانهاي ، تغييرات روي شيء خاصي در صفحه اعمال نشود . آن را انتخاب و در Properties اين دكمه را ميزنيم .با این کار ان شی از ایتم کتابخانه ای استفاده می شود.

- دکمه Recreate
بعد ازتغییر ايتم اضافه شده با اين دكمه تغييرات روي ايتم كتابخانهاي اصلي اعمال ميشود .

ایجاد فرم ها

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

اگر بخواهید یکسری قابلیت ها به فرم اضافه کنید مثلاً یک TextField ایجاد کرده اید و می خواهید که کاربر فقط ایمیل خود را وارد کند و حق وارد کردن عدد و یا یک متن معمولی را نداشته باشد برای چنین کاری به دست راست صفحه در دریم ویور نگاه کنید یک سری منوها وجود دارد از سومین منو سریرگ Behavior را انتخاب کنید ( البته TextField باید در حالت انتخاب باشد ) بعد علامت + را فشار دهید منویی باز می شود از آن گزینه ValiDateForm را انتخاب کنید در کادری که باز میشود گزینه Email address را انتخاب کنید و بعد OK کنید .

حال اگر به حالت اجرا بروید و بخواهید در TextField ذکر شده متنی را وارد کنید از شما اشکال می گیرد .

نکته ! اگر گزینه Behavior را پیدا نکردید وارد منوی windows موجود در برنامه شوید و گزینه sBehavior را انتخاب کنید .
( در سمت راست صفحه در حالت فعال قرار می گیرد )

ایجاد دکمه های دلخواه

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


استفاده از دکمه های آماده

از منوی Insert گزینه Media و بعد Flash Button را انتخاب کنید کادری باز میشود در قسمت Style مدل دکمه مورد نظرتان را انتخاب کنید در قسمت زیر آن یعنی در قسمت Link اگر می خواهید با فشار دادن دکمه کاربر صفحه شما به صفحه خاصی هدایت شود ، آدرس آن صفحه را در این قسمت بنویسید .

ساخت دکمه دلخواه

برای این کار دو را وجود دارد ، ساده ترین راه این است که وارد برنامه Paint ویندوز شوید و یک دکمه ساده طراحی ( نقاشی ) کنید و آنرا با پسوند .gif ذخیره کنید بعد در مرحله بعدی می خواهید با آوردن ماوس روی دکمه کاری انجام شود مثلاٌ شکل دکمه و یا رنگ آن عوض شود شکل دوم دکمه را هم در برنامه Paint بکشید و مانند قبل ذخیره کنید . حالا وارد برنامه دریم ویور شوید و از منوی Insert گزینه Image Objects و بعد Rollover Image را انتخاب کنید ، در کادری که باز می شود
در قسمت Original Image مسیر عکس اول و در قسمت Rollover Image مسیر عکس دوم را بنویسید و اگر می خواهید به صفحه خاصی لینک شود در
قسمت Go To URL آدرس آنرا قرار دهید .

تنظیم کردن صفحه در حال طراحی

فرض کنید می خواهید صفحه ای را طراحی کنید که رنگ زمینه – قلم و همچنین رنگ لینک های آن را خودتان طراحی کنید و همچنین نمی خواهید از بخش کد نویسی استفاده کنید .
خوب دریم ویور کار را بسیار آسان کرده است ، کافی صفحه را در حالت Design قرار دهید و روی صفحه نیز کلیک کنید . حالا اگر به پایین صفحه نگاه کنید بخشی وجود دارد که دکمه ای در آن قرار دارد با نام PropertiesPage اگر روی آن کلیک کنید کادری باز می شود که در قسمت چپ آن گزینه های به شرح زیر وجود دارد :
Appearance
Link
Headings
Title
و ...
خوب اگر روی Appearance کلیک کنید می توانید تنظیمات زیر را انجام دهید :

Page Font نوع قلم متون یک صفحه
Text Color رنگ قلم
Size اندازه قلم
Background Color رنگ زمینه
Background Image انتخاب یک عکس بعنوان زمینه


و در قسمت Link می توانید رنگ پیوند Link Color - رنگ پیوند انتخاب شده Active Link و همچنین پیوندهای بازدید شده Visited Link را تغییر دهید .

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

تنظیم کردن اندازه صفحات طراحی شده

حتما این سوال برایتان پیش آمده که چرا گاهی اوقات صفحاتی را که طراحی می کنیم ، اگر از کامپیوتر خودمان آنرا انتقال دهیم و روی کامپیوتر دیگری اجرا کنیم اندازه آن تغییر می کند ؟ ( در صورتی که اندازه مانیتور ها یکی نباشد – مثالا 15 و 17 اینچ )

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

چگونگی انجام این کار

ابتدا صفحه را در حالت Design قرار دهید و به بالای آن نگاه کنید زیر منوها گزینه ای قرار دارد به نام common اگر نیست آنرا از منوی view \ Toolbars \ Insert انتخاب کنید .
حالا در کنار آن یکسری انتخاب ها قرار دارد شما روی Table کلیک کنید شکل آن بصورت یک جدول آبی رنگ می باشد . اگر تا اینجای کار درست آمده باشید کادری برای شما باز می شود . در قسمت Rows , Cols ( تعداد سطر -ستون ها ) مقدار 1 را وارد کنید و Table Width را نیز روی 100 Percent قرار دهید .


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

 

[belderchin]

آقا دمت گرم دنبال همين بودم ! بينهايت ممنون
ولي چرا عنوان آموزش فرانت پيجه ؟!
يا علي

 

[amir jentelman]

متشكرم عاليه