آموزش همزمان HTML + Dreamweaver
درود
با توجه به درخواست کاربران انجمن های تخصصی ایاک بوک جهت آموزش طراحی وب ، در حال حاضر وارد قسمت طراحی با نرم افزار Dreamweaver شدیم که قصد داریم در این آموزش ها اچ تی ام ال و Dreamweaver را در کنار یکدیگر و بطور همزمان آموزش دهیم.
پس از آن نیز وارد آموزش برنامه نویسی به زبان php خواهیم شد و در نهایت یک اسکریپت کامل و حرفه ای را تولید خواهیم کرد.
قصد دارم همزمان با ارسال آموزش ها در داخل انجمن های تخصصی ایاک بوک ، در اینجا نیز ارسال کنم.
(البته با اجازه اساتید ;;))
شروع کار با نرم افزار Dreamweaver :
زمانی که نرم افزار dreamweaver را باز می کنید تصویری بصورت زیر ظاهر می شود تا محیط کاری را از بین coder , designer انتخاب نمایید:
http://up.iranblog.com/Files/6d651985992b4697bcf9.jpg
فرق بین این دوحالت اینست که designer آنچه که قرار است در صفحه سایت نمایش داده شود را نشان می دهد و شما هر تغییری در این قسمت انجام دهید ( بدون دانستن کدها ) نرم افزار بصورت خودکار کدهای مربوطه را در قسمت کد ایجاد می کند.
در واقع این قسمت نتیجه کدهای اچ تی ام ال سایت شما می باشد.
حالت coder :
در این قسمت شما می توانید کدهای اچ تی ام ال را بنویسید و در قسمت designer نتیجه را مشاهده نمایید.
---------- Post added at 04:00 AM ---------- Previous post was at 03:58 AM ----------
حالتی که در مرحله بالا انتخاب می کنید محیط نرم افزار را به همان صورت برای شما مهیا می کند.
البته شما هر حالتی را که انتخاب نمایید بعدا" از داخل خود نرم افزار امکان تغییر محیط نیز وجود دارد.
اکنون پس از گذشتن از مرحله بالا وارد صفحه ای بصورت زیر می شوید:
http://img31.img98.com/out.php/i125516_2.jpg
شما در این صفحه 3 ستون مشاهده می کنید.
ستون سمت چپ به شما میگه که اگر پروژه ای از قبل در دست انجام دارید میتونید اون رو ادامه بدید و از روی کامپیوتر خودتون ادرس اون رو بگید.
ستون وسط به شما میگه که یک سند جدید ایجاد کنیم که می تواند HTML ، PHP , CSS و غیره باشد.
هر موردی را که قصد شروع دارید انتخاب می کنید.
ما در اینجا HTML را انتخاب می کنیم.
ستون سمت راست هم مدل های آماده را در اختیار شما قرار می دهد.
---------- Post added at 04:01 AM ---------- Previous post was at 04:00 AM ----------
پس از ورود به محیط برنامه همانطور که مشاهده می کنید امکان انتخاب حالت های code , split , design وجود دارد.
حالت code :
در این قسمت می توانید کدهای اچ تی ام ال را وارد نمایید و از کدنویسی استفاده نمایید.
حالت design :
در این قسمت هر ترسیمی که انجام دهید کد مشاهده نمی شود ، اما کدها در قسمت code ایجاد می شوند.
حالت split :
این قسمت هر دو نمای code , design را همزمان نشان می دهد.
یعنی هر تغییری که در قسمت کد انجام دهید می توانید تغییرات آنرا همان لحظه در قسمت design مشاهده نمایید و هر تغییری که در قسمت design ایجاد کنید می توانید کدهای ایجاد شده آنرا در قسمت code مشاهده نمایید.
http://img31.img98.com/out.php/i125561_3.jpg
[align=center][/align]
---------- Post added at 04:02 AM ---------- Previous post was at 04:01 AM ----------
اگر در قسمت design صفحه خالی باشد ، زمانی که وارد قسمت code شوید مشاهده می کنید که صفحه خالی نیز دارای کدهایی می باشد بصورت زیر:
کد:
[align=left]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
[/align]
---------- Post added at 04:05 AM ---------- Previous post was at 04:02 AM ----------
توضیح کدهای بالا:
فرم کلی قالب های اچ تی ام ال بصورت زیر است:
نقل قول:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
1
---------- Post added at 04:06 AM ---------- Previous post was at 04:05 AM ----------
خط اول و دوم از کدهای بالا:
استاندارد های وب هستند.
تگ html از اول کدها شروع شده و در آخرین خط کدها پایان می پذیرد.
این به مرورگر اطلاع رسانی می کند که یک سند اچ تی ام ال را باید بخواند و در پایان نیز می گوید کدهای اچ تی ام ال در اینجا تمام شدند.
کدهای head :
در قسمت title نام صفحه را وارد می کنیم.
در قسمت meta در انتها جاییکه نوشته charset=iso-8859-1 مربوط به یونیکد صفحه می باشد
چون ما از زبان فارسی استفاده می کنیم باید این قسمت را بصورت زیر تغییر دهیم:
charset=utf-8
در فارسی همیشه با utf-8 سرو کار داریم.
می توانید این قسمت را از منوهای بالا نیز تغییر دهید ، بدون اینکه دست به کدها بزنید:
modify ----> page properties
صفحه ای ظاهر ی شود که در قسمت سمت چپ آن تعدادی category وجود دارد. گزینه title/encoding را انتخاب نموده و از تنظیمات ظاهر شده منوی کرکره ای جلوی Encoding را کلیک کرده و utf-8 را انتخاب می کنیم.
اکنون صفحه تولید شده توسط ما هنگام اجرا به مرورگر کاربر می گوید که باید خود را روی utf-8 تنظیم نماید تا بتواند محتوی سایت را نمایش دهد.
در تنظیمات همین قسمت می توانید title را نیز تغییر دهید.
هر چیزی که داخل title در اینجا بنویسید در داخل قسمت کد بین تگ های title قرار می گیرد.
آن چیزی که بین این تگ ها قرار می گیرد در بالای نوار مرورگر در هنگام اجرای این صفحه نمایش داده می شود.
تگ های body
آن چیزی که بین این تگ ها قرار می گیرد بدنه اصلی وبسایت را شامل می شود.
---------- Post added at 04:09 AM ---------- Previous post was at 04:06 AM ----------
تصاویر مربوط به توضیحات بالا :
http://img31.img98.com/out.php/i126981_4.jpg
http://img31.img98.com/out.php/i126983_5.jpg
http://img31.img98.com/out.php/i126987_6.jpg
http://img31.img98.com/out.php/i127009_7.jpg
کدها پس از تغییر یونیکد و تغییر نام title به iacbook site بصورت زیر شدند:
کد:
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iacbook site</title>
</head>
<body>
</body>
</html>
1
پی نوشت: به عدد 1 که در شروع کدها و پایان کدها در اینجا قرارداده ام توجه نکنید! دلیلش اینه که برای نمایش درست کدها در اینجا مجبور به استفاده از یک کاراکتر در قبل و بعد از آنها شدم ، به همین دلیل آنها را کمرنگ کردم.
---------- Post added at 04:12 AM ---------- Previous post was at 04:09 AM ----------
همانطوریکه گفته شد صفحه زیر در ابتدای شروع نرم افزار Dreamweaver نمایش داده می شود:
http://img31.img98.com/out.php/i127028_8.jpg
برای اینکه در دفعات بعدی که نرم افزار را اجرا می کنید این صفحه ظاهر نشود می توانید بصورت زیر عمل نمایید:
http://img31.img98.com/out.php/i127032_9.jpg
http://img31.img98.com/out.php/i127035_10.jpg
همانطور که مشاهده می کنید تیک show start page را در محل مشخص شده باید غیر فعال نمایید...
---------- Post added at 04:15 AM ---------- Previous post was at 04:12 AM ----------
همانطوریکه در تصویر زیر می بینید پانل هایی در سمت راست در محیط کاری designer وجود دارند:
http://img31.img98.com/out.php/i127036_11.jpg
شما می توانید با ماوس هر یک از این پانل ها را به بیرون کشیده و آنها را ببندید و همچنین هر زمان که بخواهید می توانید یک پانل را از منوهای بالا فعال نمایید:
http://img31.img98.com/out.php/i127039_12.jpg
همانطور که مشاهده می کنید کلیدهای میانبر نیز برای فعال و غیر فعال کردن هر پانل وجود دارد.
در نهایت می توانید محیط کار خود را آنطور که مد نظر دارید تنظیم نموده و از منوهای بالا بصورت زیر آنرا ذخیره نمایید:
window> workspace layout >save current
بصورت تصویر زیر:
http://img31.img98.com/out.php/i127041_13.jpg
---------- Post added at 04:19 AM ---------- Previous post was at 04:15 AM ----------
منوی دیگری نیز در بالا وجود دارد بنام منوی insert که شاید زیاد از آی*** های آن استفاده نمایید:
http://img31.img98.com/out.php/i127042_14.jpg
این منو را نیز می توانید با توجه به نیاز خود سریعا" آماده کنید:
http://img31.img98.com/out.php/i127043_15.jpg
حالت های زیر برای منوی فوق وجود دارند:
common
حالت عمومی که شامل آی*** های قرار دادن تصویر ، لینک ، تیبل و غیره می باشد.
این موارد در حالت عادی استفاده زیادی دارند.
layout
مربوط به کار با لایه ها می باشد که در جای خود به آن پرداخته می شود.
forms
برای ساخت فرم های مختلف مثل فرم تماس باما و غیره می باشد.
text
مربوط به تنظیمات نوشته ها می باشد.
html
مربوط به تگ های اچ تی ام ال می باشد. مثل تگ اسکریپت ها و فرم ها و فریم ها و متاتگ ها و غیره ...
application
ابزارهایی که در صورت نیاز توضیح خواهیم داد.
flash elements
عناصر مربوطه به فلش
favorites
این قسمت نیز به شما این امکان را می دهد تا اشیائی که زیاد از آنها استفاده می کنید را در این قسمت قرار دهید.
در صورتیکه show as tabs را انتخاب نمایید المانهای این قسمت را بصورت تب مشاهده خواهید کرد. بصورت تصویر زیر :
http://img31.img98.com/out.php/i127046_16.jpg
با کلیک روی آی*** آپشن مانند تصویر زیر می توانید با انتخاب show as menu به حالت قبلی بازگشت :
http://img31.img98.com/out.php/i127087_17.jpg
حتی می توانید منوی insert bar را بطور کامل از طریق زیر حذف نمایید:
http://img31.img98.com/out.php/i127100_18.jpg
برای این کار باید تیک insert را بردارید تا منوی insert از صفحه حذف شود.
همچنین با فعال کردن تیک از روش بالا مجددا" می توانید منوی insert را فعال کنید.
همانطور که در تصویر بالا مشاهده می کنید میانبر اینکار ctrl+F2 می باشد.
یعنی می توانید مستقیما" با فشردن همزمان کلیدهای کنترل + F2 این منو را فعال یا غیر فعال نمایید.
---------- Post added at 05:41 AM ---------- Previous post was at 04:19 AM ----------
پانل مهم دیگری که در Dreamweaver وجود دارد پانل properties می باشد.
http://img31.img98.com/out.php/i127112_19.jpg
در قسمت design هر موردی را که انتخاب نمایید ویژگیهایی برای تنظیمات آن در Properties وجود دارد.
مثلا" یک متن در قسمت Design می نویسیم و آن را با ماوس انتخاب می کنیم تا ویژگیهای آنرا از قبیل نوع فونت و سایز و غیره را از قسمت properties تغییر دهیم:
http://img31.img98.com/out.php/i127117_20.jpg
این منو را نیز می توانید از طریق منوی windows با برداشتن تیک کنار Properties فعال یا غیر فعال نمایید.
همچنین این کار را می توانید با کلیدهای میانبر ctrl+ F3 انجام دهید.
---------- Post added at 05:42 AM ---------- Previous post was at 05:41 AM ----------
----------------------------------------------------------------------------------
قسمت بعدی = آشنایی با قسمت های code , split , design در Dreamweaver
