آموزش Dreamweaver

ایجاد فرم در DreamWeaver CS5

tutorial-DreamWeaver-CS5-4

اگر در صفحه بخواهیم از بازدید کننده اطلاعاتی را دریافت کنیم باید از فرم برای این کار استفاده کنیم. فرم برای انتقال اطلاعاتی که توسط کاربر وارد شده است به یک آدرس مشخص استفاده می شود. هر فرم می تواند شامل اجزایی مانند کادر ورودی متن (Text Field)، جعبه مربوط به ورود متن (Text Area)، دکمه های رادیویی (Radio Button)، منوهای کشویی، چک باکس و ... باشد.


در این قسمت قصد دارم نحوه کار با فورم در نرم افزار DreamWeaver CS5 را به طور کامل برای شما آموزش بدهم .
همانطور که میدانید فورم ها فقط اطلاعات را از بازدید کننده دریافت و بعد به یک صفحه که کار پردازش بر روی فورم ها را انجام میدهد ارسال می کنند تا صحت اطلاعات توسط صفحه مقصد تائید شود .

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

 

ایجاد جدول در DreamWeaver CS5

ds recordset tableاستفاده از جداول در طراحی وب سایت تقریبا منسوخ شده یا بهتر بگم متداول نیست و بیشتر کاربران به جای استفاده از تگ <table> از <div> استفاده می کنند . حتما همه شنیدید که خیلی جاها توصیه میشه که برای Layout صفحه بجای Table از Div استفاده کنید. اما چرا؟

روزی که HTML ایجاد شد، ایده طراحان آن این بود که شما بتوانید یک کتاب را همانگونه که وجود دارد بر روی اینترنت منتشر کنید و برای این کار هم ابزارهای کافی و مورد نیاز را فراهم کردند.

از آنجا که معمولا طراحان از ابزارها نسبت به دانشی که دارند به روش های متفاوتی استفاد می کنند به همین دلیل طراحان  در استفاده از ابزارهای HTML دچار سردرگمی شدند و این ابزارها را بدلیل شباهت کار و بعضا بدلیل راحتی کار بجای هم استفاده کردند. یکی از مهمترین این ابزارها کنترلهای div و table هستند که معمولا بجای هم استفاده می‌شوند.

ایجاد لینک در DreamWeaver CS5

link-to

یکی از قسمتهای مهم وب سایت که تقریبا بدون آن دسترسی به محتوای وب سایت غیر ممکن خواهد بود لینک می باشد . فرض کنید که یک وب سایت ، لینک برای متصل کردن صفحات بهم نداشته باشد چه اتفاقی می افتد ؟ مجبور خواهیم بود که به صورت دستی آدرس هر صفحه را در سرچ بار وارد کنیم که اینکار غیر ممکن است . من امروز می خواهم روش و ایجاد لینک در نرم افزار دریم ویور را به صورت کامل برای شما آموزش بدهم .
نرم افزار DreamWeaver CS5 را اجرا کنید .

تگ لینک در HTML به شکل زیر می باشد ، اگر بخواهیم به صورت دستی لینک را وارد کنیم باید به شکل زیر تایپ شد .

<a href="/لینک صفحه مقصد"  target="مشخص می کنیم که لینک به چه صورت باید باز شود "> Link Name</a>

کار با تصاویر در DreamWeaver CS5

tutorial-DreamWeaver-CS5-1

بعد از آشنایی کامل با تنظیمات متن در نرم افزار DreamWeaver CS5 نوبت میرسه به تنظیمات تصاویر در نرم افزار دریم ویور. فرمت های تصویری که می توانیم در یک وب سایت از آن استفاده کنیم دارای اهمیت می باشد به همین دلیل من کار با تصاویر را در یک بخش مستقل ایجاد کرده ام و قصد دارم به طور کامل این قسمت را توضیح بدهم. تصاویر در وب سایت بسیار بسیار از لحاظ نوع فایل ، کاربرد و حجم فایل حائز اهمیت می باشند بدلیل اینکه اگر از تصاویری استفاده کنیم که دارای حجم زیاد و کیفیت کم باشد ، لود صفحات را تا حد قابل ملاحضه ای کاهش داده و این کار از لحاظ استانداردسازی یک قالب به هیچ وجه پیشنهاد نمی شود . برای شروع آموزش نرم افزار دریم ویور را اجرا کنید .

آشنایی با فرمت های تصویری
در وب سایت از 3 فرمت برای تصاویراستفاده می شود .
فرمت اول JPG می باشد : این فرمت گزینه مناسبی برای عکس و تصاویر با رنگهای متفاوت می باشد .این فرمت بیشتر برای تصاویر کوچک که حجم آنها زیاد نمی شود ، پیشنهاد می شود بدلیل اینکه تصاویر رنگی با کیفیت بالا گزینه مناسبی برای این فرمت نمی باشند و در صورتیکه حجم فایل را بخواهید با نرم افزار کمتر کنید ، کیفیت تصاویر مورد نظر افت پیدا می کند .
فرمت دوم  GIF می باشد : ایده آل برای تصاویر کوچک و یا تصاویر تک رنگ می باشد . من برای تصاویر آموزش از GIF استفاده میکنم بدلیل اینکه با کوچک کردن اندازه تصویر ، کیفیت کاسته نمی شود و حجم کمتری نسبت به فرمت JPG دارد تقریبا 50 درصد کمتر می باشد . 

آموزش کار با متون در نرم افزار (بخش دوم )DreamWeaver CS5

tutorial-DreamWeaver-CS5-3

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

آموزش کار با متون در نرم افزار DreamWeaver CS5

tutorial-DreamWeaver-CS5-1

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

آموزش تصویری نرم افزار DreamWeaver CS5 (بخش دوم)

tutorial-dreamweaver1

در درس اول کمی با محیط نرم افزار DreamWeaver CS5 آشنا شدید . امروز می خواهم یک پروژه جدید در دریم ویور ایجاد کنم (فقط معرفی) و ساختار اصلی پوشه  وب سایت که در درس اول برای شما توضیح داده ام را بوسیله مدیریت نرم افزار دریم ویور ایجاد کنم . در این درس با بخش مدیریت وب سایت در نرم افزار دریم ویور بیشتر آشنا می شوید و کامل توضیح داده می شود که چگونه مدیریت بهتری بر روی پروژه ایجاد شده داشته باشید. دقت داشته باشید که چند درس اول فقط معرفی قسمت های مختلف نرم افزار می باشد و فعلا پروژه عملی آموزش داده نمی شود پس بهتر است که حتما و با دقت به این قسمت ها توجه کنید تا وقتی تمرین ها را شروع کردیم سوالی برای شما  در مورد قسمت ها و ابزارها پیش نیاید .

آموزش تصویری نرم افزار DreamWeaver CS5

tutorial-Dreamweaver1

امروز بخش آموزش تصویری نرم افزار DreamWeaver CS5  در سایت راه اندازی می شود . حدود 50 نفر از کاربران فعال سایت از من خواسته بودند که آموزش نرم افزار دریم ویور را به صورت کامل در بخش آموزش قرار بدهم .
همانطور که بارها به این مهم اشاره کرده ام که درست کردن یک آموزش بسیار کار مشکل و زمان بری می باشد اما با توجه به نظرات کاربران فعال / توجه به بخش طراحی وب سایت که حدود چند ماه پیش در سایت راه اندازی شده است و نیاز به یادگیری این نرم افزار برای طراحی قالب ، تصمیم بر این گرفته شد که این بخش راه اندازی شود . به امید خدا سعی میکنم تا یک ماه آینده این بخش را کامل و با مثال هایی که برای این بخش آماده کرده ام یک قالب را با نرم افزار دریم ویور برای شما طراحی کنم و 2 وب سایت باقیمانده از 10 وب سایت آموزش داده شده را بعد از کامل شدن آموزش مقدماتی نرم افزار دریم ویور در محیط نرم افزار به صورت کاملا تصویری آموزش بدهم .

 

مشترک این خوارک خبری شوید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا