Admin
9th September 2008, 07:50 PM
مقدماتی بر آموزش dreamweaver
Dreamweaver یکی ازنرم افزار های قدرتمند در زمینه طراحی صفحات وب می باشد
محيط اين نرم افزار از بخش هاي زير تشكيل شده كه در ادامه با هر ی ك از اين بخش ها اشنا خواهيد شد :
• نوار منو
• پنل ها
• نوارهاي ابزار
• محيط طراحي
پس اجراي نرم افزار پنجره زير مشاهده مي شود كه از طريق ان مي توانيد كار خود را شروع كنيد .
OPEN A RECENT LTEM : براي باز كردن مجدد فايل هايي كه قبل از بستن برنامه با انها كار مي كرديم.
CREATE NEW :براي ايجاد يك فايل جديد كه اين فايل مي تواند يكي از گزينه هاي زير باشد :
HTML : ايجاد صفحه وب استاتيك
COLD FUSION: ايجاد برنامه هاي تحت وب كه با نرم افزار COLD FUSION ايجاد شده اند .
PHP: ايجاد وب 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
DREAM WEAVER SITE : ايجاد ساختار مديريت شده وب سايت روي كامپ ی وتر شخصي جهت طراحي سريع و راحت يك وب سايت . از طريق اين ساختار مديريت انواع فايل هاي موجود در وب سايت مانند تصاوير و فايل هاي فلش ممكن خواهد بود چون با گسترش وب سايت تعداد فايل هاي ان نيز زياد خواهد شد و بحث مديريت و توسعه ان بدون يك ساختار مشخص غير ممكن خواهد شد .
CREATE FROM SAMPLES : در اين قسمت مي توانيد از انواع قالب هاي اماده براي طراحي صفحات خود استفاده كنيد به عنوان مثال گزينه FRAMESETS براي ايجاد صفحه اي با ساختار فريم استفاده ميشود .
EXTEND : در اين قسمت از طريق گزينه DREAMWEAVER بامراجعه به سايت WWW.MACROMEDIA.COM (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 (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 تگ در محل مشخص شده درج خواهد شد و مي توانيد پارامترهاي ان را در صورت نياز مشخص كنيد.
منبع: http://www.freedownloadcenter.ir (http://www.freedownloadcenter.ir/)
Dreamweaver یکی ازنرم افزار های قدرتمند در زمینه طراحی صفحات وب می باشد
محيط اين نرم افزار از بخش هاي زير تشكيل شده كه در ادامه با هر ی ك از اين بخش ها اشنا خواهيد شد :
• نوار منو
• پنل ها
• نوارهاي ابزار
• محيط طراحي
پس اجراي نرم افزار پنجره زير مشاهده مي شود كه از طريق ان مي توانيد كار خود را شروع كنيد .
OPEN A RECENT LTEM : براي باز كردن مجدد فايل هايي كه قبل از بستن برنامه با انها كار مي كرديم.
CREATE NEW :براي ايجاد يك فايل جديد كه اين فايل مي تواند يكي از گزينه هاي زير باشد :
HTML : ايجاد صفحه وب استاتيك
COLD FUSION: ايجاد برنامه هاي تحت وب كه با نرم افزار COLD FUSION ايجاد شده اند .
PHP: ايجاد وب 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
DREAM WEAVER SITE : ايجاد ساختار مديريت شده وب سايت روي كامپ ی وتر شخصي جهت طراحي سريع و راحت يك وب سايت . از طريق اين ساختار مديريت انواع فايل هاي موجود در وب سايت مانند تصاوير و فايل هاي فلش ممكن خواهد بود چون با گسترش وب سايت تعداد فايل هاي ان نيز زياد خواهد شد و بحث مديريت و توسعه ان بدون يك ساختار مشخص غير ممكن خواهد شد .
CREATE FROM SAMPLES : در اين قسمت مي توانيد از انواع قالب هاي اماده براي طراحي صفحات خود استفاده كنيد به عنوان مثال گزينه FRAMESETS براي ايجاد صفحه اي با ساختار فريم استفاده ميشود .
EXTEND : در اين قسمت از طريق گزينه DREAMWEAVER بامراجعه به سايت WWW.MACROMEDIA.COM (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 (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 تگ در محل مشخص شده درج خواهد شد و مي توانيد پارامترهاي ان را در صورت نياز مشخص كنيد.
منبع: http://www.freedownloadcenter.ir (http://www.freedownloadcenter.ir/)