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

مرحله اول:

یک فایل در هارد دیسک خود ایجاد نموده و آن را نام گذاری نمایید. در صورت تمایل، می توانید تصاویر یا فایل های مطلوب خود را داخل آن کپی نمایید.

مرحله دوم:

از قسمت Site، گزینه Manage Sites را انتخاب نموده و سپس گزینه New را کلیک نمایید. پنجره زیر پیش روی شما گشوده خواهد شد که داخل آن می توانید جزئیات سایت را در بخش Local Info وارد نمایید.

مرحله سوم:

در حال حاضر نرم افزار Dreamweaver محتوای فولدر را در Files panel نمایش می دهد. در این جا فایل ها بدرستی دسته بندی شده و نرم افزار می داند که کجا باید بدنبال فایل ها بگردد. از این مرحله به بعد می توان توسعه صفحات سایت را آغاز نمود.

همانطور که در تصویر بالا مشاهده می کنید در قسمت Site Name می توانید اسم سایت خود را وارد نمایید.

بخش Local Root Folder جایی است که تمامی فایل های سایت ذخیره می شوند و هر کدام به ترتیبی که زودتر ایجاد شده اند قرار می گیرند. می توان برای یافتن هر فولدر، آن را جستجو نموده و برای گزینش، آن را کلیک نمایید.

لیست موجود در Local File را بطور خودکار refresh نمایید. این کار کمک می کند تا فایل ها و تصاویر جدیدی که به سایت شما افزوده می شوند بطور خودکار refresh شده و برای شما قابل دسترسی باشند.

در بخش آدرس HTTP می بایست url سایت را وارد نمود تا نرم افزار Dreamweaver لینک ها را چک نماید.

و در نهایت گزینه Cache است که باید انتخاب شود.

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

منبع: www.entheosweb.com

یک template چیست؟

یک template ساختاری رایج در یک وب سایت است که در صفحات وب مورد استفاده قرار می گیرند. معمولاً وب سایت ها از ساختاری استاندارد پیروی می کنند بدین معنا که همگی متشکل از یک عنوان، یک منوی ابزار و یک footer بوده و این بخش ها همگی از ارکان رایج و مهم یک صفحه وب می باشند. تصور کنید که سایت شما شامل ۲۵ صفحه باشد. اگر بخواهید تغییر کوچکی مانند افزودن یک لینک جدید اعمال کنید، باید به تمامی ۲۵ صفحه مراجعه نموده و تغییرات را بطور دستی انجام دهید.ولی با استفاده از یکی از Template های نرم افزار Dreamweaver

 می توانید هرگونه تغییری را بطور خودکار در تمامی صفحات اعمال نمایید.

در اینجا چگونگی استفاده از این template ها مورد بررسی قرار می گیرند.

ساختن Template های نرم افزار Dreamweaver

مرحله ۱:

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

مرحله ۲:

زمانی که ساختار اولیه را ساختید به قسمت فایل رفته و گزینه Save As Template را کلیک نمایید، برای آن نامی انتخاب نموده و در نهایت آن را ذخیره نمایید.

مرحله ۳:

توجه داشته باشید که حتماً علامت آبی template ظاهر شده باشد. این نشان می دهد که شما هم اکنون در بخش template هستید. بطور خودکار هر template در فولدری تحت همین عنوان ذخیره می شود. توجه داشته باشید که شما می توانید هر تعداد که می خواهید template بسازید. چنانچه از چیدمان های متفاوت برای صفحات استفاده می نمایید می توانید از template های مختلف برای هر بخش سایت خود استفاده نمایید.

مرحله ۴:

در این مرحله باید تمامی بخش های template را قابل ویرایش نمایید درنتیجه می توانید محتوا و اطلاعات مربوط به هر بخش را اضافه نمایید. از آنجایی که محتوای اصلی هر صفحه متغیر خواهد بود در نتیجه این بخش حتماً باید قابل ویرایش باشد.

مرحله ۵:

برای اینکه یک بخش را قابل ویرایش نمایید باید نشانه گر موس را روی آن بخش قرار داده و بعد گزینه Insert/Template Objects/Editable Region را انتخاب نمایید و نام مناسبی را برای آن در نظر بگیرید. چنانچه به درستی این مرحله را انجام دهید متوجه وجود یک بخش آبی با اسمی که شما انتخاب کرده اید، می شوید که در موقعیت نشانه گر قرار گرفته است.

می توانید اعمال تغییرات را ادامه داده و چیدمان های متفاوت را برای template امتحان کنید.

استفاده از Template های نرم افزار Dreamweaver

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

در ادامه،  مراحل بکارگیری یک template در صفحه سایت آورده شده است.

مرحله اول) پس از اینکه صفحه مدنظر خود را ساختید می توانید یکی از template هایی که طراحی کرده اید برای آن بکار گیرید. برای این کار می توانید به قسمت Modify/Template/Apply Template to page بروید.

مرحله دوم) زمانی که template ویژه ای را برای صفحه سایت انتخاب نمودید پنجره ای تحت عنوان “Choose editable region for orphaned content (انتخاب ناحیه قابل ویرایش برای محتوای صفحه)” ظاهر می شود. درنتیجه، ناحیه قابل ویرایش را انتخاب نمایید. همانطور که مشاهده می کنید template به رنگ زرد نمایش داده شده و قابل ویرایش نیست. تنها بخشی که قابل ویرایش است همان قسمتی است که در template مشخص کردید (مرحله ۵).

توجه داشته باشید که انتخاب template می تواند هم قبل و هم بعد از نوشتن محتوای متنی صورت بگیرد. چنانچه می خواهید بعد از نوشتن متن template را انتخاب نمایید می بایست ناحیه قابل ویرایش جایی که متن قرار می گیرد، باشد.

بروزرسانی Template های نرم افزار Dreamweaver

زمانی که template مدنظر خود را ساختید و آن را برای تمامی صفحات مورد نیاز استفاده کردید، آخرین مرحله نحوه بروزرسانی template است.

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

در این قسمت، می توانید Template های نرم افزار Dreamweaver را که از پیش طراحی شده و قابل استفاده هستند دانلود نموده و در هر زمینه ای بکار گیرید.

نمونه ای از Template های نرم افزار Dreamweaver در زمینه گل:

منبع: www.entheosweb.com

تاکنون توضیحات خوبی در مورد نرم افزار Dreamweaver داده شده است. در این بخش به نکات آموزشی Dreamweaver در مواقع استفاده از جداول، فرم ها، سبک های CSS، لینک ها و سایر موارد اشاره می شود.

نکات آموزشی Dreamweaver – لینک ها:

• برای تغییر رنگ آبی پیش فرض لینک ها می توان به قسمت Modify  رفته و گزینه Page Properties  را انتخاب نمایید. اینجا می توانید رنگ لینک را تغییر داد. تمامی لینک ها به رنگ مدنظر شما تغییر رنگ خواهند داد.
• چنانچه خواهان لینک کردن بخشی از صفحه هستید می توانید از ویژگی بنام NAmed Anchors استفاده کنید. بعنوان مثال، اگر بخواهیم به تصاویر Rollover لینک کنیم باید یک named anchor داشته باشیم تا به بخش تصاویر Rollover هدایت شویم. برای این کار باید نشانه گر موس را روی نقطه ای که می خواهیم لینک شویم قرار می دهیم و از بخش Insert گزینه Named Anchors را انتخاب کرده و بعد نامی را برای anchor انتخاب می کنیم.  در همین زمان، از علامت # هشتگ در کنار نام anchor استفاده کنیم. یک anchor در HTML تنها بوسیله علامت# شناخته می شود. در نتیجه لینک بدین ترتیب خواهد بود: <a href=”#name”>Rollovers</a>

نکات آموزشی Dreamweaver – جداول:

•  گاهاً ساختن ردیف های جدول با ارتفاع کمتر از ۱۵ پیکسل غیرممکن به نظر می رسد، بویژه در مرورگر Netscape! یکی از نکات آموزشی Dreamweaver مربوط به همین جداول است. تمام آنچه که باید انجام دهید قرار دادن تصویر شفاف gif در ردیف های جدول است و درنهایت ارتفاع جدول تصحیح می شود. در فایل های Firework تصاویر شفاف shim نامیده می شوند. تصویر shim در اندازه ۱*۱ پیکسل می باشند.
• آیا تاحالا به فکر طراحی جدولی با کادر باریک افتاده اید؟ یا شاید فقط می خواستید جدولی داشته باشید که فقط دورش کادری باریک داشته باشد. در این شرایط می توان دو جدول ساخت که عرض یکی به دلخواه متغیر است بعنوان لایه ای برای جدول اصلی در نظر گرفته می شود. در مرحله بعد می توانید جدول خود را با عرض ۱۰۰% در این لایه قرار دهید. بهتر است توجه داشته باشید که فاصله خانه های بین دو جدول صفر باشد.

نکات آموزشی Dreamweaver – دکمه Submit

آیا تا حالا برای ایجاد کردن دکمه های “Submit” و یا “Go” در Dreamweaver دچار مشکل بوده اید؟ این کار بسیار آسان است. آنچه باید انجام دهید این است که تصویر را انتخاب کرده، آن را ذخیره نمایید و در Dreamweaver مسیر Insert>Form Object>Image Field را برگزینید. بدین ترتیب تصویر مورد نظر برای دکمه را انتخاب کرده اید. بدین ترتیب شما یک دکمه اختصاصی برای خود دارید. کد دستوری مربوط ای این نوع دکمه های ویژه در ادامه آمده است:

نکات آموزشی Dreamweaver – تصاویر Rollover

تصاویر Rollover درDreamweaver به آسانی قابل استفاده هستند. فقط باید دو تصویر داشته باشیم. بعد در درDreamweaver مسیر Insert>Rollover Image را انتخاب می کنیم. برای عکس یک نام اختصاص می دهیم، عکس را انتخاب می کنیم و به عکس لینک می دهیم.

نکات آموزشی Dreamweaver – فاصله گذاری

گاهاً زمان تایپ نیاز است که به خط بعدی مراجعه کنیم ولی نه اینکه فاصله گذاشته شده در حد یک پاراگراف باشد. نکته ای مطلب در این است که بجای Enter کردن از Shift + Enter استفاده نماییم.

علاوه بر این می توان از Ctrl + Shift + Space استفاده کرد که اندکی فاصله را بیشتر می کند.

نکات آموزشی Dreamweaver – تغییر اندازه تصاویر

پس از تغییر اندازه تصاویر در Dreamweaver مسیر Commands>Optimize Image in Fireworks را انتخاب نمایید. در این شرایط، کادری نمایش داده می شود که مبتنی بر ویرایش تصاویر است. با انتخاب گزینه update، تصاویر مربوطه در Dreamweaver بروز رسانی شده و بهینه سازی می شود. بدین ترتیب، به آسانی می توان در سایز تصاویر تغییرات دلخواه را ایجاد کرد.

منبع: www.entheosweb.com

با رفتن به مسیر Insert>Layout Objects>Layers از قسمت منو، می توان یک لایه جدید ایجاد کرد. همانطور که در شکل زیر مشاهده می‌کنید یک لایه نمایش داده شده است که می تواند هر محتوایی را دربر بگیرد. برای تغییر ویژگی های هر لایه باید داخل فریم را کلیک کرده و متن یا تصویری را داخل آن تعبیه نمایید. علاوه بر این، در پنجره ویژگی ها می توان رنگ پس زمینه و پیش زمینه، اندازه لایه و تصویر پس زمینه را تغییر داد.

نام گذاری لایه ها در Dreamweaver

زمان ایجاد لایه ها، غالباً نرم افزار Dreamweaver یک نام عمومی مانند Layer 1، Layer 2 و غیره می دهد. برای مراجعه راحت تر شما می‌توانید مطابق میل خودتان نام گذاری نمایید. برای این کار، به پنل لایه ها رفته، بر روی نام لایه دوبار کلیک نموده و نام جدید را وارد نمایید. چنانچه پنل لایه ها دیده نمی شود به قسمت windows رفته و گزینه Layers را انتخاب نمایید. در این شرایط پنل لایه ها قابل مشاهده است.

تغییر قابلیت مشاهده لایه ها در Dreamweaver

در تصویر زیر مشاهده می کنید که علامت چشم در کنار همه لایه ها دیده می شود و این بدان معناست که همه لایه ها قابل مشاهده هستند. زمانی که روی لایه ها کار می کنید بخصوص زمانی که لایه ها هم پوشانی دارند، می توانید با کلیک کردن روی علامت چشم آن ها را غیر قابل دیدن کرده تا براحتی به کار خود ادامه دهید.

تغییر ترتیب لایه ها در Dreamweaver

همانطور که در تصویر بالا قابل مشاهده است داخل ستون Z اعدادی نوشته شده است که ترتیب لایه ها را نشان می دهد. بدین معنی که لایه‌ها بر اساس همین ترتیب در مرورگر نمایش داده می شوند. بزرگ ترین عدد نشان دهنده اولین لایه است. برای تغییر ترتیب لایه ها در Dreamweaver می توان با کلیک کردن روی لایه ها، آن ها را جابه جا کردو علاوه براین، می توان عدد ستون Z را نیز تغییر داد.

منبع: www.entheosweb.com

]]> http://tarahan.com/%d9%84%d8%a7%db%8c%d9%87-%d9%87%d8%a7-%d8%af%d8%b1-dreamweaver/feed/ 0 http://tarahan.com/5-%d8%aa%d8%b5%d9%88%d8%b1-%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87-%d8%af%d8%b1-%d9%85%d9%88%d8%b1%d8%af-dreamweaver/ http://tarahan.com/5-%d8%aa%d8%b5%d9%88%d8%b1-%d8%a7%d8%b4%d8%aa%d8%a8%d8%a7%d9%87-%d8%af%d8%b1-%d9%85%d9%88%d8%b1%d8%af-dreamweaver/#respond Sat, 05 Mar 2016 13:28:13 +0000 http://tarahan.com/?p=6225 […]]]> امروزه شبکه با سرعت بالایی رو به تکامل است و طراحان نیاز دارند تا با آخرین تکنولوژی ها و نوآوری های موجود در بازار همراه باشند. نرم‌افزار Adobe Dreamweaver یکی از قدیمی ترین نرم افزارها در زمینه طراحی سایت است که به نظر می رسد طی سال ها منسوخ شده باشد حال آنکه این باور کاملاً اشتباه است. در سال ۲۰۱۲ شرکت ‌Adobe با معرفی برنامه Creative Cloud به سمت رشد و پیشرفت دائمی تغییر جهت داد و این بدان معناست که کاربران با هرگونه تغییری قادر به بروز رسانی Dreamweaver بوده و دیگر نیازی به انتظار برای نسخه جدید نیست. علاوه براین، می توان فهمید که Dreamweaver بطور نزدیکی با سایر ابزار های ‌Adobe در ارتباط است و بوسیله برنامه Creative Cloud راهی برای دسترسی، اشتراک و استفاده از المان های طراحی سایت نیز وجود دارد.

همانند سایر نرم افزارهایی که طول عمر زیادی دارند، تصورات غلطی درباره Dreamweaver وجود دارد که امروزه هیچکدام صحت ندارند. در سال‌های اخیر نرم افزار Dreamweaver تغییرات مثبتی را متحمل شده و همگام به نوآوری های این صنعت، در زمینه تجربه کاربر نیز بهبود یافته است.

در این مقاله، ۵ مورد از مهم ترین تصورات نادرست در زمینه ‌Dreamweaver بررسی می شوند.

۱. نرم افزار Dreamweaver کدهای زیادی را در صفحات وب بجا می گذارد که منجر به شلوغ شدن سایت شده و  بر SEO یا بهینه سازی برای موتورهای جستجو موثر می باشد. 

Dreamweaver Creative Cloud کدهای زائد را ایجاد نمی کند و این رویکرد امروزه کاملاً غلط است. با این وجود، چنانچه کدی به درستی نوشته نشود، صفحه سایت بدرستی کار نخواهد کرد که این مطلب در مورد تمامی ابزارهای طراحی صدق می کند. درست است که مشکل ذکر شده قبلاً برای این نرم افزار وجود داشته است اما سال های متمادی است که این مشکل برطرف شده است.

۲. برای استفاده از Dreamweaver نیازی به دانستن کدنویسی نیست.

برای اینکه در کار کردن با Dreamweaver موفق بوده و بتوانید سایت های جالبی با آن طراحی کنید باید با کدنویسی HTML/CSS آشنا باشید. با این وجود، Dreamweaver ابزاری در اختیار شما قرار می دهد که بعنوان یک طراح سایت حرفه ای یا تازه کار می توانید براحتی از آن استفاده نمایید. علاوه براین، شرکت Adobe ابزار نرم افزار دیگری نیز طراحی نموده است که برای تازه کاران کدنویسی بسیار مناسب است و Adobe Muse نام دارد. این نرم افزار نیازی به کدنویسی نداشته و طراحان گرافیکی متعددی برای توسعه سایت های خود آن را بکار گرفته اند.

۳. نمی توان به المان WYSIWYG (دریافت عین مشاهده) در Dreamweaver اعتماد کرد.

سیستم WYSIWYG مخفف کلمات “What You See Is What You Get” است که در آن متن یا تصویر در حال ویرایش، همان خروجی است که مشاهده خواهد شد. یکی از مهم ترین برنامه های این سیستم، Dreamweaver است. سیستم مدرن طراحی Dreamweaver که Live View یا نمایش زنده نام دارد از همان موتور رندر یا جستجوگر HTML که برای گوگل کروم بکار گرفته می شود، استفاده می کند. بر این اساس، می‌توان اطمینان حاصل کرد که پیش نمایش کد در Live View مشابه همان چیزی است که در HTML کروم دیده می شود.

۴. نرم افزار Dreamweaver تنها برای طراحی وب سایت است و طراحی ریسپانسیو را پشتیبانی نمی کند. 

در سال ۲۰۱۵ برای اولین بار طراحی ریسپانسیو در Dreamweaver معرفی شد و از آن زمان بروز رسانی های لازم روی آن انجام شد. علاوه براین، ویژگی های این نرم افزار کاربران را قادر می سازد تا طراحی های ریسپانسیو خود را روی وسایل پرتابل حقیقی امتحان نمایند. اهمیت این موضوح بوضوح قابل لمس است که متقاضیان خواستار طراحی سایت در تبلت ها و ابزار پرتابل هستند.

۵. Dreamweaver از code snippet های ضعیف و نسخه منسوخ کدنویسی CSS برخوردار است.

علاوه بر قابلیت طراحی ریسپانسیو، در سال ۲۰۱۵ آخرین و جدیدترین نسخه snippet ها در Dreamweaver ارائه شدند. طراحی مدرن و ریسپانسیو سایت ها با  استفاده از کدهای snippet، نسبت به گذشته آسان تر می باشد.  استفاده از پنل طراحی CSS برای ویرایش CSS این امکان را می دهد تا بتوان سبک ها، فایل ها و ویژگی های CSS را ایجاد نمود.

منبع: www.creativebloq.com