در حال تکمیل معرفی و کار با برنامه Dreamweavar

[ms.khassi]

Dreamweaver
سالیان متمادی است که مورد استفاده بسیاری از طراحان حرفه ای صفحات وب می باشد و دلیل آن قابلیت ها و ویژگی های گوناگون این نرم افزار قدرتمند است. با Dreamweaver می توانید به سادگی اقدام به نوشتن کد ها و تگ های مد نظر خود نمایید، همچنین محیط ویرایشگر فوق حرفه ای این برنامه با تفکیک کردن کدهای مختلف، کد نویسی را برای شما آسان می نماید. اگر تا پیش از این برای مشاهده آنچه ساخته اید فایل را آپلود کرده و یا بر روی لوکال قرار می دادید اکنون تنها با یک کلیک امکان دیدن نتیجه کار برایتان فراهم شده است.
Adobe Dreamweaver علاوه بر پشتیبانی از تگ های HTML 5 و CSS 3 امکان ویرایش و استفاده از زبان های برنامه نویسی تحت وب نظیر PHP ، ASP، ASP.NET ، JSP و… را در اختیار شما می گذارد و شما می توانید با استفاده از این نرم افزار به خلق وب سایت های حرفه بپردازید.
قابلیت های نرم افزار Adobe Dreamweaver :

• ساخت ، طراحی ، ویرایش صفحات وب
  
• محیط طراحی وب سایت با سه متد مختلف
  
• پشتیبانی از فرمت های مختلف صفحات وبActive Server Pages (ASP) ، Java Server ، PHP  ،  XML ، HTML ، JSP ، CSS ، ASPX و چندین و چند زبان برنامه نویسی دیگر
  
• محیطی متفاوت از نرم افزار های دیگر و بسیار کارا و حرفه ای
  
• پشتیبانی و طراحی صفحات وب بر پایه CSS ها
  
• استفاده از پشتیبانی از تمامی ابزار های موجود روی صفحات وب نظیر ، عکس ها ، انیمشن ها و ...
  
• امکان برقراری ارتباط میان برنامه های نوشته شده با بانک های اطلاعاتی معروف
  
• هوشمند بودن نرم افزار در شناسایی کد های نوشته شده
  
• سازگار با نرم افزار های دیگر شرکت Adobe
  
• پشتیبانی و توسعه صفحات پویا و داینامیک با قدرت ای جکس (AJax )
  
• سازگاری کامل با نرم افزار معروف Adobe Photoshop  و فرمت PSD
  
• ویرایش آنلاین صفحات وب
  
• امکان آپلود صفحات بر روی هاست و سرور
  
• پشتیبانی و سازگاری با محصول جدید Adobe یعنی Adobe Air
  
• واسط کاربری جدید و بهینه شده برای کاربران
  
• سازگاری بهتر با CSS ها
  
• طراحی، توسعه و گسترش رابط های کاربری پویا با استفاده از Spry framework for Ajax
  
• افزایش کارایی CSS ها در صفحات وب با کمک کامپوننت های Spry widgets
  
• محیط سازگار با مجموعه Creative Suite و سایر محصولات جدید Adobe
  
•  امکان وارد نمودن CSS به داخل پروژه با استفاده از CSS layouts
  
• گنجاندن داده ها در داخل صفحه وب با استفاده از XML از یک منبع RSS یا پایگاه داده
  
• مشاهده نحوه نمایش وب سایت طراحی شده بروی موبایل با استفاده از Adobe Device Central
  
• قابلیت اضافه نمودن Transition هایی مانند grow, shrink, fade, highlight & ...
  
• امکان مدیریت کامل CSS ها
  
• پشتیبانی و سازگاری با CMS
  
• سازگاری و هوشمندی نرم افزار و هماهنگی خاص با PHP
  
• امکانات فوق العاده حرفه ای برای CSS
  
• سازگاری و هماهنگی با Adobe BrowseLab
  
• سازگاری و امکان کدنویسی هوشمند کدهای  وردپرس
  

ادامه دارد .....

[ms.khassi]

آشنایی با محیط کار

تصویر بالا محیط شروع به کار از برنامه را نمایش میدهد  که  میتوان در نرم افزار Dreamweaver بسیاري از اعمال را بدون توجه به کـد HTML  انجـام داد امـا درصورت تمایل می توان ایجاد و ویرایش صفحات وب با کد HTML   که در این نرم افزار پشتیبانی می شود استفاده کرد

هنگامی که نـرم افـزار Dreamweaver  را بـراي اولـین بـار اجـرا کنیـد، بعد از کلیک روی کد Html بایـد یکـی از دو محـیط کـاري Designer  یا Coder  را انتخاب کنید هر دو محیط Coder  و  Designer   تقریباً گزینه هاي یکسانی را در اختیار کاربران قرار میدهند

بااین تفاوت که اگر Designer را به عنوان فضاي کاري خود انتخاب کنید با محیط یکپارچه اي متشکل از چنـد رابط گرافیکی مواجه خواهیم شد که در آن میتوانید با استفاده از امکانات موجود در این نرم افزار و بدون نیاز به کدنویسی، کادرمحاوره اي سند خود را طراحی کنید

محیط Coderبه طور پیشفرض کادرمحاوره اي سند را در حالت کدنویسی قرار میدهد، و کـاربر مـیتوانـد از کدهاي HTMLبراي طراحی سند خود استفاده کند

گزینه و حالت سوم که کارپسند تر هست انتخاب گزینه ی split است  هم در حالت coder  و هم در حالت  Designer  مورد استفاده است
تنظیمات لازم را از سربرگ view اعمال کنید طبق تصویر زیر:

                      - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   

نوار ابزار

•           نمایش محیط Code
  
•              نمایش  Code And Design   
  
•           نمایش محیط Design
  
•             در این کادر میتوان عنوان سند را قرار داد
  
•                 فرمان هاي مربوط به فایل را لیست میکند
  
•                قابلیت دسترسی سریع به لیستی از مرورگرهایی که براي بررسی صفحات وب خود نصب کرده اید را فراهم میسازد و شما را قادر میسازد تا صفحه            وب را در یک مرورگر اجرا کرده سپس عیب یابی کنید
  
•                 بروزرسانی مجدد صفحهRefre
  
•               با انتخاب این گزینه منویی باز میشود که امکان فعال کردن حاشیهها، خط کشها، صفحات شطرنجی و دیگر قسمتهاي موجـود در محیط Designرا                  فراهم میسازد                    
  
  
  
  

                    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

نوار Insert

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

• common :از طریق گزینه هاي موجود در این قسمت میتوانید اشیایی چون تصاویر و یا لایه ها را به صفحه اضافه کنید 
  
  
• Layout:سه نوع محیط مختلف طرحبندي در رابطه با شیوه کار با جداول وجود دارد که عبارتنـد از: ,  Layout  Expanded, Standardشما در این قسمت میتوانید محیط دلخواه خود را انتخاب کنید
  
  
• form: در این قسمت تمام گزینه هایی که در طراحی یک فرم لازم است وجود دارد
  
  
• Text:گزینه هاي مربوط به شیوه قالب بندي متون در صفحه در این قسمت قرار گرفته اند
  
  
• Html:در این قسمت شما میتوانید تگهاي مختلف HTMLرا وارد کنید
  
  
• Application:از این قسمت براي اضافه کردن عناصر مرتبط با بانک اطلاعاتی به صفحه استفاده میشود
  
  
• Flash elements:گزینه هاي این قسمت به شما اجازه میدهند که بتوانید فایلهاي فلشی که در قالب SWFذخیره شده اند را به صفحه اضافه کنید
  
  
• Favorites:می توانید ابزارهایی را که بیشتر مورد استفاده قرار میگیرند را در این قسمت قرار دهید تا راحتتر و آسانتر به آنها دسترسی داشته باشید
  
  
  
  
  

[elshan]

مرسی ازتون بخاطر آموزشی که قرار میدین

[ms.khassi]

بازکردن يک صفحه وب

هنگامی که برنامه  Dreamweaver  را اجرا کنيـد در مرحلـه اول کادرمحاوره ای روی صفحه ظاهر مـیشـود.در اين کادرمحاوره ای امکان ايجاد و يا بازکردن فايلهايی کـه از قبل در سيستم ذخيره شده اند وجود دارد

در صورتی که بخواهيد فايل   HMTL   جديدی ايجاد کنيد کافی است از کادرمحاوره ای  قسمت ، Create Newگزينه HTMLرا انتخاب کنيد.
برای بـازکردن فايلـهايی کـه از قبـل در سيسـتم ايجـاد کرده ايد میبايست در قسمت open A Recent Item  بـرروی گزينـه Open  کليـک کـرده و از کادرمحاوره ای ظاهر شده فايل موردنظر خود را انتخاب و بـرروی دکمه Openکليک کنيد

در صورتی که بخواهيد فـايلی را از طريـق منوهـای برنامـه ايجاد کنيد، بايد از منوی Fileگزينه Newرا انتخاب کنيد تاکادرمحاوره ای New Documentباز شود

در زبانه Generalاين کادرمحاوره ای، دوکادر , BasicPage  Categoryوجود دارد که از کـادر اول گزينـه Basic Pageو کادر دوم گزينه HTMLرا انتخاب کـرده سـپس روی دکمـه Createکليک کنيد تا صفحه جديد ايجاد شود

تنظيم خصوصيات صفحه

تمام خصوصيات مربوط به يک صفحه از جمله عنوان صـفحه، رنـگ پس زمينه، رنگ متون، رنگ پيوندها، انتخـاب يـک تصـوير بـرای نمايش در پس زمينـه صـفحه و يـا تعيـين حاشـيه صـفحه همگـی در کادرمحاوره ای page Propertiesقابل تنظيم میباشند بـرای بـازکردن کادرمحـاوره ای page propertiesاز منـوی Modifyگزينه  Page Properties  را انتخاب کنید


Appearance

کادرمحـاوره ای page propertiesدر کادر ،categoryدسته بنـدیهـای مختلفـی را ليست کرده است که به توضيح آنها می پردازيم.
زمانی که گزينه اول را انتخاب کنيـد در سمـت راسـت صـفحه گزينه های مختلفی برای تغيير خصوصيات صفحه مانند نوع قلم، رنگ زمينه و… ظاهرمیشود که میتوانيد تغييرات دلخواهمـان را اعمـال کنيم

 Links
با انتخاب این گزینه، در سمت راست کادرمحاوره اي Page Properties   مشخص شده است براي تغییر خصوصیات پیوندها گزینه هاي مختلفی مانند رنگ و… ظاهر میشود

[b]Link Font  : امکان تعیین [/b]نوع قلم پیوندهاي موجود در صفحه را میدهد.

Link Color :امکان تعیین رنگ پیوندهاي موجود در صفحه، را میدهد.

Rollover Links  : با استفاده از جعبه رنگ این گزینه میتوان رنگی را به دلخواه انتخـاب کـرد زمانی که اشاره گر ماوس روي پیوند قرار میگیرد، رنگ پیوند تغییر مییابد.

Visited Links  :امکان تغییر رنگ پیوندهایی که توسط کاربر در صفحه کلیک شـده را تعیـین میکند با انجام این کار زمانی که کاربر دوباره به صفحه اصلی سایت برمیگردد متوجه میشود که از کدام پیوندها استفاده کرده است

مثــال:
 مــی خــواهیم عبــارت  باشگاه کاربران روماک -انجمن تخصصی فناوری  را به سایت forum.romaak.ir   پیوند دهیم به گونه اي که وقتی کاربر، در صفحه مرورگر بر روي پیوند قرار گرفت، رنگ آن قرمز شود و زمانی که بر روي آن کلیک کرد رنگ آن، به عنوان پیوند دیده شده، آبی تیره شود. براي انجام این کار مراحل زیر را طی کنید

صفحه htmlجدیدي ایجاد کرده و در آن عبارت  باشگاه کاربران روماک-انجمن تخصص فناوری  را تایپ کنید

گزینه  Page Properties  را از منوي  Modify  انتخاب کنید سـپس تغییـرات لازم را در قسمت گزینه Links انجام میدهیم

درصفحه کلید دکمه F12 را انتخاب کنید تا بعد از ذخیره کردن صفحه، آن را اجرا کند


Heading
با انتخاب این گزینه میتوان سایز و رنگ دلخواه خود را براي Headingها مشخص کرد، تا هر بار که  Headingمورد نظر انتخاب شد با قالبی که در این قسمت برایش مشخص شده است نمایش داده شود

Title/Encoding
با انتخاب این دسته بندي گزینههاي مختلفی از جمله گزینه تعیین عنوان صفحه، در سمت راست کادرمحـاوره ای  Page Properties   ظاهر میشود 

Title

در این قسمت عنوان صفحه مشخص میشود در واقع عنوان صـفحه نـامی اسـت کـه در بـالاي کادرمحاوره اي مرورگر ظاهر میشود و هیچ ارتباطی با نام فایل ندارد نام فایل در واقع همان اسمی است که در برنامه با پسوند .Htmlیا .Htmذخیره میشـود ولـی عنـوان  صفحه تنها براي تشخیص صفحه در مرورگر مورد استفاده قرار میگیرد

Encoding

از این گزینه براي نمایش نوع قلم در مرورگر استفاده میشود
نکته: از منوي کشویی گزینه Encodingگزینه Arabic Windowsیا UTFرا براي نمـایش صحیح کاراکترهاي فارسی انتخاب کنید


 Tracing Image
در صورتی که بخواهید تصویري را که به عنوان پس زمینه صفحه در قسـمت Appearanceمشـخص کرده اید را در صفحه سند نیز، مشاهده کنید باید در این بخش تصویر مورد نظر را مشخص کنید، زیرا تصویري کـه در قسمت Backgroundبخش Appearanceقرار میگیرد تنها در صفحه مرورگر دیده می شود

همچنین میتوانید در قسمت Transeparencyمیزان شـفافیت تصـویررا در کادرمحـاوره اي سـند کاهش یا افزایش دهید

[نگار]

بسیار عالی و روان
منتظر ادامه آموزش هستم

[ms.khassi]

سعی میکنم زود به زود اپدیت کنم

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

[نگار]

ممنونم موفق باشین

[hoboot]

آموزش خوبیه خیلی ممنون

[mesterweb]

بسیار عالی .
با آرزوی موفقیت برای شما

[ms.khassi]

درج متن و قالب بندي آن

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

اگر براي متن تایپ شده در سند خود از منوي Fontعبارت ,  verdana, Arial  Tahoma ،Helvetica, sans, serifرا انتخاب کنید. زمانی که مرورگر کاربر میخواهد متن را نمایش دهد به ترتیب از قلم verdanaشروع کرده و در صورت پیدا کردن این قلم بـرروي سیسـتم کـاربر،متن را در قالب آن نمایش میدهد، چنانچه قلم فوق را پیدا نکند از قلمهاي بعدي گروه، براي نمایش مـتن اسـتفاده میکند.
 براي اضافه کردن قلمهاي دلخواه به منوي ،fontمیبایسـت از منـوي فـوق گزینـه    Edit Font  Listرا انتخاب کرده تا کادرمحاوره اي مربوط به آن باز شود





در قسمت Available Fontلیستی از کلیه قلم هاي موجود در سیستم شما وجود دارد، قلـم مـورد نظر را انتخاب کرده سپس روي فلش جهت دار کلیک کنید تا به کادرمحاوره اي Chosen Fontمنتقل شـود

در صورتی که میخواهید یک رشته مستقل از چند قلم را ایجاد کنید به افزودن قلم هاي دلخواه خود بـه کادرمحـاوره اي Chosen Fontادامه دهید.

نکته: براي ایجاد یک گروه جدید از قلـمهـا روي دکمـه + کادرمحـاوره اي Edit Font List  کلیک کنید

درج خطهاي افقی در صفحه

براي قـرار دادن خـط در صـفحه بایـد مکـان نمـا را در محـل مـورد نظـر قـرار دهیـد سـپس از منـويInsert/HTML گزینه Horizontal Rule  را انتخاب کنید   

نکته: براي این منظور همچنین میتوانید از نوار ، Insertتـگ ،HTMLدکمـه  Horizontal  Ruleاستفاده کنید

قراردادن کاراکترهاي ویژه در صفحه

بــــراي درج کاراکترهــــاي خــــاص در صــــفحه بایــــد از منــــوي Insertگزینــــه  HTML>Special Character  استفاده کنید

همچنین میتوانید از گزینه Textدر نوار Insertاسـتفاده کنیـد. در انتهـاي ایـن نـوار روي منـوي کشویی آخرین گزینه کلیک کنید تا منوي مربوط به آن باز شود

همانطور که در شکل مشاهده کنید لیستی از کاراکترهاي ویژه ظاهر شده است

استفاده از لیست ها

میتوان براي مشخص کردن موضوعات مرتبط بهم از لیسـتها اسـتفاده کـرد. لیسـتها داراي دو نـوع شـماره دارOrdered List   و  بدون شماره  UnOrdered List   می باشند که بر حسب کاربرد از آنها استفاده می شود

درج یک فایل Wordدر یک سندHTML

در صورتی که بخواهید محتویات فایلی را که در برنامه wordبا پسوند docذخیره شده است را به سـند  htmlخود اضافه کنید باید ازمنوي Fileگزینه Importزیر گزینه Word Documentرا انتخاب کنید سپس در کادرمحاوره اياي که باز میشود مسیر فایل مورد نظر را مشخص کـرده و بـر روي دکمـه open کلیک نمایید.

ذخیره کردن یک صفحه وب و پیش نمایش آن در مرورگر سیستم

پس از ذخیره فایل میتوانید از منوي Fileگزینه Preview In Browserرا انتخـاب کـرده سپس نام مرورگر خود را انتخاب کنید