+- باشگاه کاربران روماک (https://forum.romaak.ir)
+-- انجمن: متفرقه (https://forum.romaak.ir/forumdisplay.php?fid=16)
+--- انجمن: معرفی نرم افزار (https://forum.romaak.ir/forumdisplay.php?fid=50)
+---- انجمن: نرم افزار کامپیوتر (https://forum.romaak.ir/forumdisplay.php?fid=76)
+---- موضوع: در حال تکمیل معرفی و کار با برنامه Dreamweavar (/showthread.php?tid=1864)
صفحه‌ها:
1
2
معرفی و کار با برنامه 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
- سازگاری و امکان کدنویسی هوشمند کدهای وردپرس
ادامه دارد .....
RE: معرفی و کار با برنامه Dreamweavar - 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:می توانید ابزارهایی را که بیشتر مورد استفاده قرار میگیرند را در این قسمت قرار دهید تا راحتتر و آسانتر به آنها دسترسی داشته باشید
RE: معرفی و کار با برنامه Dreamweavar - elshan - ۹۵/۱۰/۱۷
مرسی ازتون بخاطر آموزشی که قرار میدین
RE: معرفی و کار با برنامه Dreamweavar - 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میزان شـفافیت تصـویررا در کادرمحـاوره اي سـند کاهش یا افزایش دهید
RE: معرفی و کار با برنامه Dreamweavar - نگار - ۹۵/۱۲/۴
بسیار عالی و روان
منتظر ادامه آموزش هستم
RE: معرفی و کار با برنامه Dreamweavar - ms.khassi - ۹۵/۱۲/۴
سعی میکنم زود به زود اپدیت کنم
از حسن توجه شما سپاسگزارم خوشحالم که مفید بوده
RE: معرفی و کار با برنامه Dreamweavar - نگار - ۹۵/۱۲/۶
ممنونم موفق باشین
RE: معرفی و کار با برنامه Dreamweavar - hoboot - ۹۵/۱۲/۶
آموزش خوبیه خیلی ممنون
RE: معرفی و کار با برنامه Dreamweavar - mesterweb - ۹۵/۱۲/۱۱
بسیار عالی .
با آرزوی موفقیت برای شما
RE: معرفی و کار با برنامه Dreamweavar - 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را انتخـاب کـرده سپس نام مرورگر خود را انتخاب کنید