چگونه با Adobe Dreamweave پروژه ی یک سایت را شروع کنیم

[Borna66]

طراحی صفحات وب به صورت حرفه‌ای یا غیرحرفه‌ای این روزها خیلی رایج شده است.
اگر کسی دانش کافی برای طراحی وب را داشته باشد که خود اقدام راه‌اندازی سایت یا وبلاگ می‌کند وگرنه این کار را به دست متخصص می‌سپارد. اگر شما جزو دسته اول هستید یا حداقل می‌خواهید وارد این دسته بشوید، باید بسیاری از نکات را بیاموزید، با زبان‌های طراحی صفحات وب آشنا شوید و کار کردن با برنامه‌های مرتبط را یاد بگیرید. مهم‌ترین و کامل‌ترین برنامه این حوزه Adobe Dreamweaver است که آخرین نسخه آن در سری CS5‌ مجموعه‌های Adobe وجود دارد. درباره دریم‌ویور یا همان بافنده رویا(Dreamweaver) می‌توان بسیار صحبت کرد؛ کتاب‌های بسیار زیادی نیز درباره این برنامه‌ و نحوه کار کردن با آن وجود دارد. اما این هفته قصد داریم در مورد «نحوه ایجاد یک پروژه طراحی سایت» که یکی از مهم‌ترین قابلیت‌های این برنامه محسوب می‌شود و متاسفانه بسیاری از طراحان ایرانی از آن استفاده نمی‌کنند، صحبت کنیم.


با این قابلیت پروژه طراحی سایت شما ساختاری مستحکم‌تر پیدا می‌کند، همه چیز در جای خود قرار می‌گیرد و اشکال‌زدایی(Debugging) بسیار آسان‌تر می‌شود. پیش از شروع این مقوله، باید به نکته‌ای اشاره کنم که بسیاری از افراد غیرمتخصص آن را نمی‌دانند. به طور کلی سایت‌ها به دو دسته تقـسیم می‌شوند: 1- سـایت‌های ایستا(Static) 2- سایت‌های پویا(Dynamic).


در سایت‌های ایستا، یک بار سایت‌ کدنویسی می‌شود و در دسترس قرار می‌گیرد. هر بار که نیاز به تغییر خاصی در این نوع سایت‌ها باشد، مدیر سایت باید کد صفحات را باز و تغییرات خود را در کدها اعمال کند. اما همانطور که از نام سایت‌های پویا پیدا است در این سا‌یت‌ها نوعی هوشمندی نرم‌افزاری وجود دارد و بسیاری از کارها به صورت خودکار انجام می‌گیرد. به طور کلی محتوای تولید شده در این نوع سایت‌ها به صورت پویا است و بر اساس نیاز و درخواست کاربر تغییر می‌کند. برای مثال وبلاگ‌ها در دسته پویا قرار می‌گیرند زیرا مدیر وبلاگ بدون نیاز به دانستن زبان‌های برنامه‌نویسی تحت وب، وارد بخش مدیریت وبلاگ می‌شود، به قسمت ارسال پست می‌رود، مطلب مورد نظر خود را تایپ و هر نوع رسانه‌ای از جمله عکس را به آن می‌افزاید و بعد انتشار می‌دهد. ساختار این گونه سایت‌ها به گونه‌ای است که خود سایت مطلب را دریافت می‌کند و در جای خود(مثلا در صفحه اول وبلاگ) قرار می‌دهد. همین رفتار را با پست بعدی انجام می‌دهد و پست قدیمی را به پایین انتقال می‌دهد؛ این دقیقا یعنی سایت‌های پویا. حال تصور کنید که اگر وبلاگ به صورت ایستا بود چه وضعی می‌شد. مدیر وبلاگ قبل از هر چیزی باید کدنویسی می‌دانست. سپس صفحات وبلاگ را باز و تمام تغییرات را در کد اعمال می‌کرد. مهم نیست که شما دوست دارید که چه نوع سایتی را طراحی کنید(پویا یا ایستا)؛ دریوویور تمام ابزارهای مورد نیاز شما را فراهم می‌کند.

[Borna66]

شروع کار


وقتی یک پروژه را به وسیله دریم‌ویور پیکربندی کنید، می‌توانید نظم خاصی به سایت خود بدهید. دریم‌ویور خود را با آن همگام‌سازی می‌کند و امکاناتی در اختیار شما قرار می‌گیرد که در حالت معمولی وجود نخواهد داشت. یکی از آن قابلیت‌ها سایت‌های از راه دور است.


حالا که حرف سایت از راه دور شد بگذارید کمی درباره آن صحبت کنم. هنگامی که یک پروژه سایت در دریم‌ویور شروع می‌شود، این سایت می‌تواند در دو حالت عملیاتی شود: یا به صورت سایت محلی(Local) یا سایت از راه دور(Remote). در حالت محلی تمام کار شما در هارددیسک کامپیوتر انجام می‌شود و همانجا نیز می‌ماند. اما اگر در حالت Remote این کار را انجام دهید و پروژه خود را به میزبان (Host) آن سایت متصل کنید، دریم‌ویور به صورت خودکار و از طریق ftp تغییرات شما در صفحات سایت که در هارددیسک انجام می‌شود، در میزبان نیز اعمال می‌کند. به عبارت دیگر اگر شما بخشی از کد صفحه خانه سایت خود را که کل این پروژه در هارددیسک قرار دارد، تغییر ‌دهید بعد از اینکه فایل را ذخیره کردید، دریم‌ویور همان فایل را در میزبان و به جای فایل قبلی جایگزین می‌کند. در واقع بلافاصله تغییرات در سایت اعمال می‌شود. وقتی برنامه دریم‌ویور باز شد، از منوی Site گزینه New Site را انتخاب کنید. پنجره Setup Site را خواهید دید. برای پروژه خود یک نام انتخاب کرده و در فیلد Site Name‌ آن را وارد کنید(این نام فقط به عنوان شناسایی پروژه است و تاثیری در نام سایت‌ شما ندارد). یک پوشه خاص در هارددیسک را به عنوان محل قرارگیری سایت ایجاد کنید. تمام فایل‌های پروژه سایت شما در آن قرار بگیرد:


D:\Projects\my_site\


آدرس آن پوشه خاص را در قسمت Local Site Folder وارد کنید. این پوشه به عنوان پوشه ریشه(Root) سایت شما تعریف می‌شود. پیشنهاد می‌کنم نام پوشه با Site Name یکی باشد تا شناسایی و کار کردن با سایت آسان شود. بعد از انجام این دو مورد، کار اصلی ایجاد یک پروژه سایت تمام است و می‌‌توانید دکمه Save را فشار دهید و کار خود را آغاز کنید. اما تنظیمات دیگری نیز قبل از فشار دادن دکمه Save می‌توانید انجام دهید که ما در ادامه به یکی از آنها اشاره می‌کنیم.


در همان پنجره Site Setup روی بخش Advanced Settings‌ کلیک کنید. خواهید دید که شامل چند شاخه است؛ وارد Local Info شوید.


اگر طرح کلی سایت خود را طوری تعریف کرده‌اید که پوشه‌ای خاص به تصاویر و عکس‌ها اختصاص داده می‌شود، در این قسمت می‌توانید این پوشه را برای دریم‌ویور تعریف کنید. مثلا آدرس زیر:


D:\Projects\my_site\pics\


در سمت راست این پنجره و در بخش Local Info یک فیلد آدرس با نام Default Image folder وجود دارد؛ آدرس پوشه تصاویر را در آن تعریف کنید. به دلیل اینکه پروژه ما از نوع محلی است(نه از راه دور) در قسمت Web URL آدرس نهایی سایتی که در حال ساخت آن هستید را وارد و Save را کلیک کنید. مثلا:


http://www.mysite.com

[Borna66]

ایجاد یک پروژه سایت از راه دور


تا اینجا نحوه ایجاد پروژه سایت محلی را یاد گرفتید از اینجا به بعد به سراغ آموزش ایجاد یک پروژه از راه دور می‌رویم تا بتوانیم از قابلیت‌هایی که فراهم می‌شود، استفاده کنیم. دریم‌ویور از راه‌های مختلفی از جمله FTP، SFTP، WebDAV و... می‌تواند پروژه شما را به سرور سایت متصل کند. هر کدام از این پروتکل‌ها ویژگی‌های خود را دارد که توضیح در مورد آنها در این مقاله نمی‌گنجد.


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


همان پروژه سایت محلی را می‌توان به یک پروژه از راه دور تبدیل کرد. کافی است که از منوی Site‌ گزینه Mange Sites را کلیک کنید. پنجره مدیریت پروژه‌‌های شما باز خواهد شد. پروژه مورد نظر را انتخاب و روی دکمه Edit کلیک کنید؛ خواهید دید که پنجره Site Setup همان پروژه باز می‌شود. این بار بخش Servers را کلیک کنید. یک لیست خالی خواهید دید زیرا این پروژه محلی بوده و به هیچ سروری متصل نیست.


روی دکمه + کلیک کنید تا پنجره Server Definition باز شود. در فیلد Server Name نام سرور را وارد کرده و از منوی بازشونده Connect Using نوع ارتباط خود را انتخاب(مثلا FTP) کنید. اطلاعات FTP که شامل آدرس، نام‌کاربری، رمزعبور و پورت آن است را در فیلدهای مشخص شده تایپ و تیک گزینه Save را فعال کنید. دریم‌ویور این اطلاعات را ذخیره می‌کند تا در دفعات بعدی نیازی به وارد کردن دوباره آنها نباشد.


در قسمت Root Directory شاخه‌ای از سایت که قرار است این سایت در آن شاخه خاص قرار بگیرد را وارد کنید. این آدرس شاخه معمولا قسمتی از FTP شما است و بر اساس نوع سرویس‌دهنده شما فرق دارد. اما رایج‌ترین آنها به شرح زیر هستند:


htdocs


public_html


www/public/docs/


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


در ادامه روی دکمه Test‌ کلیک کنید تا آزمایشی برای صحت ارتباط انجام بگیرد. اگر پیغام خطایی ظاهر شد، اطلاعات وارد شده را به خوبی بررسی کنید. به سربرگ Advanced بروید. در آنجا چند تنطیم وجود دارد که بر اساس نیاز خود می‌توانید آنها را فعال یا غیرفعال کنید. برای مثال اگر گزینه Automatically Upload … را فعال کنید، هر بار که فایلی از پروژه سایت را در هارددیسک خود تغییر داده و ذخیره می‌کنید، خود دریم‌ویور، عملیات آپلود فایل‌های تغییر داده شده به جای فایل‌های قدیمی را در میزبان انجام می‌‌دهد.


در نهایت روی دکمه save کلیک کنید تا دوباره به پنجره Site Setup برگردید. در آنجا نیز دکمه Save را کلیک کنید.


پنل Files نمایش داده می‌شود که در این پنل می‌توانید فایل‌های پروژه‌های خود را مدیریت کنید. با استفاده از منوی بازشونده‌ای که در سمت راست-بالای این پنل قرار دارد می‌توانید بین حالات Local View و Remote View سایت خود جابه‌جا شوید.

[Borna66]

مدیریت فایل‌ها در این بخش


همانطور که در ابتدا نیز به آن اشاره کردم، وقتی که یک پروژه را در دریم‌ویور شروع کنید، بسیاری از کارها آسان می‌شود و ساختاری مستحکم شکل می‌گیرد. برای مثال اگر شما یک صفحه وب جدید طراحی کردید که جزو این پروژه سایت باشد و وارد پوشه این پروژه بشوید و همانجا ذخیره کنید(مثلا D:\Projects\my_site) خود دریم‌ویور، این صفحه را به لیست فایل‌های این پروژه که در پنل Files نشان داده می‌شود، اضافه می‌کند.


حتی می‌توانید در همان پنل Files کلیک راست و از منوی ظاهر شده گزینه New File یا New Folder را انتخاب کنید. برای جابه‌جایی یا کپی فایل‌ها نیز می‌توان از کلیک راست و منوی Edit استفاده کرد یا با گرفتن و رها کردن فایل‌ها در داخل پوشه‌ها (Drag & Drop) این کار را انجام داد. چون این یک پروژه سایت است و تمام لینک‌ها بر اساس یک سایت شکل می‌گیرند، اگر فایلی را بخواهید به پوشه‌ای دیگر در پروژه خود منتقل کنید، پنجره‌ای ظاهر می‌شود مبنی بر اینکه دریم‌ویور به صورت خودکار لینک‌ها موجود در این فایل و لینک‌هایی که از دیگر صفحات به آن فایل داده شده را به‌روزرسانی(Update) کند یا خیر. شما دکمه Update را کلیک کنید.


بفرست و بگیر


در حالت سایت از راه دور، دریم‌ویور برای مدیریت فایل‌ها در کامپیوتر شما و سرور دو اصطلاح دارد: Put و Get .


Put زمانی استفاده می‌شود که شما بخواهید فایلی از هارد خود را به سرور بفرستید و همچنین Get برای زمانی است که بخواهید فایلی را سرور به روی هارد خود بگیرید.


برای استفاده از این دو قابلیت کافی است که روی فایل یا پوشه مورد نظر خود کلیک راست کرده و بر حسب نیاز خود گزینه Put یا Get را انتخاب کنید.