تاريخ : | | نویسنده : مدیر

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

 

کار دریم ویور چیست ؟

نرم افزار Dreamweaver از شرکت Macromedia در نگاه اول نرم افزار ساده ای جهت ساخت صفحات HTML (Hyper Text Markup Language) است . که به ما کمک میکند تا مجبور نشویم کدهای زبان HTML را حفظ کنیم و با چند حرکت و کلیک دستورات به زبان HTML انجام میشوند و در واقع باید بگوییم این نرم افزار Dreamweaver است که Tag های زبان HTML را کاملا حفظ کرده و برای ما انجام میدهد .

شاید اولین سوالی که برای شما پیش بیاید این است که چه اشخاصی به سوی نرم افزار Dreamweaver میروند و چرا از نرم افزار های رقیب Dreamweaver یعنی GoLive از شرکت Adobe و FrontPage از شرکت Microsoft استفاده نکنیم . جواب این است که نرم افزار Dreamweaver از شرکت Macromedia و همچنین نرم افزار GoLive از شرکت Adobe برای طراحان وبی است که کارهای گرافیکی میتوانند بکنند یا بهتر بگویم طراح گرافیکی هستند اما نرم افزار FrontPage از شرکت Microsoft برای کسانی بیشتر به درد میخورد که کار آنها اتوماسیون اداری است یعنی با مجموعه برنامه Office از شرکت Microsoft کار میکنند بهتر است . و ما چون زمینه کارمان گرافیک است از بین نرم افزارهای Macromedia Dreamweaver MX 2004 و Adobe GoLive CS نرم افزار Dreamweaver را انتخاب کردیم ، زیرا نرم افزار Dreamweaver با نرم افزار Fireworkes از همین شرکت Macromedia است به خوبی مکالمه میکند و نرم افزار GoLive با نرم افزار Adobe ImageReady به خوبی مکالمه میکند و ما نیز چون Target کارمان شرکت Macromedia است نرم افزار Dreamweaver MX 2004 را انتخاب کردیم .

Dreamweaver MX 2004 به جز ساخت صفحات HTML از نوع Static و Dynamic میتواند به ساخت صفحات با PHP و ASP و ASP.NET و JSP و ColdFusion نیز به ما کمک کند ، همچنین این برنامه فلش را بخوبی پشتیبانی میکند و همین امر در طراحی سرعت ما را افزایش و خطاهای ایجاد شده در فرانت پیج را در هنگام کار با فلش ها کاهش میدهد . این برنامه ساخت behavior ها را نیز بخوبی پشتیبانی میکنید . امکانات دیگر آن در هنگام کار با برنامه چندان زیاد است که گاهی از اینهمه ابزار به هیجان می آیید . پس از این پس برای بافتن رویاهای خود در وب یک رویاباف دارید !

بسیاری از وب سایت ها هستند که نمیتوانند ترافیک کافی را برای سایت خود بدست آورند ، یکی از این علت ها یک نکته ساده است : ” وب سایت برای موتور های جستجوگر بهینه نشده “ . در این مقاله اعمالی که برای بهینه سازی وب سایت در برخورد با موتور های جستجو باید صورت گیرد شرح داده میشود :

 

1. صفحات را مطابق میل جستجوگر ها طراحی کنید :

برای یک موتور جستجو گرافیک سایت شما یا فلش ها و کد های جاوا اسکریپت جذابی که ساخته اید اهمیتی ندارد . بلکه چیزی که یک موتور جستجو نیاز دارد روان بودن کد نوشته شده در صفحات است . منظور من نوشتن کامنت در بین تگ ها یا رعایت کردن فاصله ها نیست بلکه استفاده از تگ هایی است که جستجوگر ها از آنها استفاده میکنند . تگ های مهم در یک صفحه وب عبارتند از : تگ title و description و Keywordsو Alt . ( این روزها بعضی از موتور های جستجو فقط از تگ Keywords برای ارائه نتایج استفاده میکنند ).

چند نکته :

  • · اگر از جدول ها برای ساخت صفحات سایتتان بهره گرفته اید ، سعی کنید از کد های ساده استفاده کنید نه از تگ های تو در توی پیچیده .
  • · استفاده از فریم ها باعث سر گیجه موتور های جستجو میشود که به ضرر شماست . در ضمن استفاده از فریم ها دیگر در طراحی سایت ها متداول نیست .
  • · اگر از کد های جاوا اسکریپت استفاده کرده اید برای فراخوانی فایل های جاوا اسکریپت خارجی از کد های کوتاه استفاده کنید .
  • · استفاده از تگ Alt در تگ تصاویر موتور های جستجو را در یافتن موضوع تصاویر کمک میکند . حتما از این تگ برای عکس ها استفاده کنید .
  • · متن اصلی را قبل از عکس ها در صفحاتتان قرار دهید و یا حداقل عکس ها را در میان متن قرار دهید .

 

2. کلمات کلیدی Keywords :

استفاده از این تگ بسیار اهمیت داره و نوع کلمات استفاده شده در اون هم مهمه . سایت wordtracker کلمات کلیدی خوبی را برای هر نوع سایتی پیشنهاد میدهد که میتوانید از آن بهره بگیرید . تعداد کلماتی که میتوان در این تگ استفاده کرد محدودیت خاصی ندارد ، اما برای حصول نتیجه بهتر از 10 الی 15 کلمه برتر استفاده کنید .

 

3. محتوای سایت :

بسیاری از موتور های جستجو از متن اصلی صفحات برای یافتن کلمات کلیدی استفاده شده در تگ keywords استفاده میکنند . پس استفاده درست از کلمات کلیدی و مطابقت آن کلمات با متن شما بسیار اهمیت دارد. کلمات اصلی متن را در تگ heading و یا bold بگذارید و یا آن را لینک کنید تا جستجوگر ها به آن لغات اهیت ویژه ای دهند .

 

4. عنوان سایت :

تگ title یکی از مهم ترین بخش ها از دید جستجوگر هاست . عنوان صفحات نیز باید مانند کلمات کلیدی درست و مطابق متن انتخاب شود . چون گاهی موتور های جستجوگر به عناوین صفحات بیش از کلمات کلیدی اهمیت میدهند . تعداد کلماتی که در عنوان صفحات استفاده میکنید نیز برای اینکه از حد استاندارد جستجوگر ها خارج نباشد باید حداکثر 9 کلمه باشد .

 

5. تگ توضیحات :

موتور های جستجو هنگام نشان دادن نتایج جستجوی خود ، اطلاعات تگ متای توضیحات هر صفحه را برای نمایش توضیحات آن سایت نمایش میدهند .بنابراین نوشتن توضیحات جذاب و درست بیننده را به سوی سایت شما جذب میکند . استاندارد تعداد کلمات این تگ 20 الی 25 کلمه میباشد .

 

6. گرافیک :

استفاده از عکس اگر چه زیبایی خاصی به سایت شما میدهد اما حتی با تگ ALT نیز یک عکس به اندازه چند کلمه قدرت ندارد . چون موتور های جستجو فقط کلمات را میشناسند و عکس ها را هم با تگ Alt آنها شناسایی میکنند . بنا براین استفاده از عکس به جای لینک و یا بجای متن از خوانایی سایت شما برای چشم های یک موتور جستجوگر می کاهد .

 

7. نقشه سایت :

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

 

8. لینک های هدایتگر :

لینک هایی که به دیگر صفحات سایت میدهید باید ساده باشد . استفاده از منوهای pop up‌ و فلش و مانند آن از خوانایی لینک های شما می کاهد .اگر مجبور به استفاده از لینک های پیچیده در طراحی سایت هستید میتوانید از لینک های ساده در انتهای صفحات استفاده کنید تا موتور های جستجوگر نیز بتوانند لینک های شما را شناسایی کنند .

 

رعایت اصول فوق باعث میشود تا سایت شما در نتیجه جستجوی جستجوگر های معروف رتبه بالاتری را بدست آورد .

 

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

 

دو نوع اصلی متاتگ وجود دارد :

این متاتگ باعث میشود که اطلاعات اضافی ای همراه صفحه وب درخواستی شما در http header به مرورگر ارسال شود . مثلا میتوانید تاریخ انقضای اطلاعات را تعیین کنید یا میتوانید صفحه وب را با یک متا تگ خاص پس از چند ثانیه به صفحه دیگری بفرستید بدون دخالت کاربر !

HTTP-EQUIV

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

NAME

 

متاتگ ها کجای صفحه وب نوشته میشوند ؟

متاتگ ها را باید داخل تگ head نوشت . در صفحه هایی که از چند فریم درست شده باید در تمام صفحات متاتگ را نوشت.

به مثال های زیر دقت کنید : content در متاتگ کارش معرفی مقداری هست که متاتگ با یکی از دو صفت name و HTTP-EQUIV در خود دارد .

 

مثال : NAME="keywords" CONTENT=" persian macromediax dreamweaver">

تگ بالا را یه نگاه کنید . از نوع name است . مقدار name مساوی با keywords است . یعنی این متاتگ کارش شناساندن کلمات کلیدی سایت به موتور های جستجوگر است ... اگر میخواهید موتور های جستجو مانند گوگل سایت شما را بهتر بشناسند این تگ را به قالب سایت یا وبلاگ خود بیفزایید و در جلوی content کلمات کلیدی سایت خود را بنویسید .

 

 

مثال : NAME="description" CONTENT=" persian web design center">

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

 

مثال :<METAHTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">

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

 

این یکی دیگه از آموزش هایی است که با استفاده از اون می تونید مثل مقاله قبلی یه چیزی رو به دنبال موس به حرکت در بیارین , اما با این تفاوت که به جای متن شما می تونید عکس یا عکس هایی رو به دنبال موس به حرکت در بیارید.

شما برای این کار باید دقیقا" بعد از <Body> این سورس را به فرم خود اضافه کنید :

خوب حالا توضیحات :

احتمالا" اگرحالا شما صفحه را Refresh کنید می بینید که چیزهایی شبیه عکس به دنبال موس در حرکت می باشد .

برای اینکه شما عکس های خودتان را جای گزین کنید باید در اون پوشه ای که ای page را قرار دادید 4 فایل عکس به انشعاب gif به نام های pic1.gif , pic2.gif , pic3.gif , pic4.gif را در اون پوشه قرار بدید.

البته در خود سورس هم توضوحاتی نوشتم که اگه کسی خواست این کار رو سفارشی تر انجام بده می تونه اون ها رو هم تغیییر بده به عنوان مثال در اول سورس یه چیزی مثل این هست var imgwidth=40; // Image width که با تغییر اون 40 به عددی ایگه می تونید ارتفاع عکس هایی رو که به دنبال موس هستند رو عوض کنید.

برای ایجاد پیوند به صفحات دیگر از تگ <a> استفاده میشود. پیوندها میتوانند به بخش دیگری از همان صفحه، صفحات دیگر وب، تصاویر، فایلهای صوتی یا حتی فیلم ها و ... اشاره کنند.
فرم کلی یک پیوند به قرار زیر است:

<a href="url">Some Text</a>

در مثال بالا تگ <a> برای ایجاد پیوندی به صفحه ای دیگر که آدرس اینترنتی آن url میباشد بکار رفته است. برای تعیین مقصد و یا آدرس صفحه جدید از شناسه ای به نام href که همان hyerlink reference میباشد، استفاده میشود و مقدار این شناسه در واقع همان آدرس اینترنتی صفحه مقصد است. بخش قابل رویت پیوند و در واقع متــنــی (و یا تصویری ) که توسط مرورگر نمایش داده خواهد شد و بازدیدکننده روی آن کلیک خواهد کرد میان تگهای <a> و </a> قرار داده میشود و هر چند که در مثال بالا این بخش متن "Some Text" است ولی میتواند حتی یک تصویر باشد.

برای نمونه کد اچتمل زیر پیوندی به سایت google.com ایجاد خواهد کرد:

<a href="http://www.google.com/">Visit Google Site</a>

و مرورگر پیوند بالا را به شکل زیر نمایش داده و در اثر کلیک روی پیوند توسط بازدیدکننده، مرورگر به سایت Google خواهد رفت. 

روش کدگزاری UTF-8
اکیدا توصیه میشود که برای تایپ و تمایش متون فارسی از استاندارد یونیکد و روش کدگزاری UTF-8 اسنفاده شود و این روشی است که مطالب این سایت و ادیتور آنلاینش از آن استفاده میکند.نکته مهم در نمایش صحیح متون فارسی تعیین نوع کدگزاری یا encoing صفحات فارسی است که برای اینکار باید از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زیر استفاده شود:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

در اینصورت مرورگر یا Browser قبل از نمایش صفحه از روی متاتگ فوق نوع کدگزاری (Encoding) را تشخیص داده و دیگر مثلا نیازی به تعیین دستی (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازدیدکننده سایت نخواهد بود.

 شناسه یا attribute ی به نام dir
جهت نمایش متون لاتین به صورت پیش فرض و default از چپ به راست (ltr) میباشد.در مورد متون و جملات فارسی باید با کمک روشی جهت نمایش پیش فرض را به "راست به چپ" تغییر دهید. شناسه یا attribute ی به نام dir یا همان direction این کار را برای شما انجام میدهد. این شناسه دارای دو مقدار ممکن میباشد :


dir="ltr" , Left-to-right text. - چپ به راست
dir="rtl" , Right-to-left text. - راست به چپ

مثلا برای نمایش جمله فارسی "سلام بر دنیای وب!" با کمک عناصر p یا div کافی است که به یکی از شکلهای زیر عمل شود:

<p dir="rtl"> سلام بر دنیای وب </p>
<div dir="rtl"> سلام بر دنیای وب </div>

در بسیاری از عناصر و تگ های اچتمل امکان استفاده از شناسه dir میسر بوده و به عنوان نمونه میتوان از عناصر زیر نام برد:

<p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> , <span> , ... 

تگ های اچتمل (HTML Tags)

  • با کمک تگ های اچتمل عناصر و یا Elements ساخته میشوند.
  • در زبان اچتمل حدود 80 عنصر تعریف شده است.
  • تگ های اچتمل بوسیله دو نویسه (char) > و < ساخته میشوند.
  • تگ های اچتمل معمولا بصورت زوج ظاهر میشوند، مانند <b>test</b>
  • تگ اول در یک زوج تگ مثلا <b> تگ شروع و تگ دوم مثلا <b/> تگ پایانی نام دارد.
  • متن بین تگ اول و تگ دوم در یک زوج تگ محتوای عنصر یا element content نامیده میشود، مثلا "test"
  • تگ های اچتمل را میتوانید بوسیله حروف لاتین کوچک (lower case) و یا بزرگ (upper case) بنویسید و case sensitive نیستند. برای مثال دو تگ <b> و <B> معادل هم هستند ولی شدیدا توصیه میشود که به خاطر سازگاری با XHTML از حروف کوچک استفاده شود.

عناصر اچتمل (HTML Elements)

مثال بخش مقدمه را در نظر بگیرید:

<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first html page. <b>This text is bold</b>
</body>
</html>

*** نمونه ای از یک عنصر اچتمل:

<b>This text is bold</b>

عنصر اچتمل بالا با تگ <b> شروع شده و با تگ <b/> پایان می یابد. محتوای این عنصر عبارت "This text is bold" است. لازم به ذکر است که کاربرد تگ <b> نمایش توپر یا bold متون است.

*** مثال دوم یک عنصر اچتمل (معلوم الحال) :

<body>
This is my first homepage. <b>This text is bold</b>
</body>

عنصر اچتمل بالا با تگ <body> شروع شده و با تگ <body/> پایان می یابد. همانطور که میبینید گاهی یک عنصر حاوی یک یا چند تگ دیگر میباشد.وظیفه تگ <body> تعیین بدنه اصلی یا body یک متن اچتمل است.لازم به یادآوری است که تنها اطلاعات بخش <body> یک فایل اچتمل در صفحه مرورگر نمایش داده خواهد شد.


شناسه های یک تگ (Tag Attributes)

تگ ها میتوانند حاوی اطلاعات اضافی دیگر باشند، به این اطلاعات شناسه یا Attribute میگویند و وظیفه آنها بیان دیگر اطلاعات یک عنصر یا Element میباشد. مثلا در مورد تگ <body> شناسه ای به نام bgcolor وجود دارد که رنگ زمینه متن (background) را تعیین میکند برای نمونه اگر میخواهید که رنگ زمینه صفحه اچتملتان سیاه باشد کافی است که به شکل زیر عمل کنید :

<body bgcolor="black">

در مثال زیر تگ <body> دارای چهار شناسه مختلف با نامهای width، height ، align و border و مقادیر center، 60، 100 و 0 میباشد.

<table border="0" width="100" height="60" align="center" >
......
</table>

شناسه ها به صورت کلی "مقدار=نام" یا "name=value" نوشته میشوند و همیشه به تگ شروع یک عنصر یا Element اضافه میشوند و نهایتا اگر در یک عنصر یا Element شناسه ها قید نشوند از مقادیر قراردادی یا default آنها استفاده خواهد شد مثلا در تگ body اگر شناسه bgcolor نوشته نشود از رنگ سفید برای زمینه صفحه استفاده خواهد شد.
مقدار یک شناسه را میتوانید داخل نویسه های " و یا ' بنویسید و اختیار دست شما است فقط در مواردی که مقدار یک شناسه شامل نویسه " هم میشود باید از نویسه ' استفاده شود.

منظور از وب چیست؟
  • وب شبکه ای است متشکل از تمامی کامپیوترهای دنیا، شبکه ای از شبکه ها.
  • اینترنت، وب، WWW ، web یا World Wide Web همگی یک چیزند.
  • تمامی کامپیوترهای وب میتوانند با هم ارتباط داشته باشند.
  • کامپیوترهای موجود در وب با کمک استاندارد ارتباطی یا پروتوکل HTTP با هم ارتباط برقرار میکنند .
نحوه کارکرد وب چگونه است؟
  • اطلاعات وب داخل فایلهائی به نام Web Pages و یا صفحات وب قرار دارند.
  • این فایلها یا صفحات روی Web Server یا کامپیوترهای سرویس دهنده وب ذخیره شده اند.
  • برای دیدن صفحات وب از نرم افزاری به نام مرورگر و یا Web Browser استفاده میشود.
  • دو مرورگر Internet Explorer و Netscape Navigator جزو معروفترین مرورگرها حساب میشوند.
  • مرورگر Internet Explorer متعلق به شرکت مایکروسافت و مرورگر Netscape Navigator متعلق به شرکت نت اسکیپ میباشد.
مرورگرها چگونه به خواندن صفحات وب میپردازند؟
  • یک مرورگر با کمک یک Request درخواستی برای خواندن یک صفحه از وب سرور میکند.
  • این Request یا درخواست بر اساس استاندارد ارتباطی یا پروتوکل HTTP بوده و شامل آدرس صفحه مورد نظر میباشد.
  • آدرس یک صفحه وب چیزی شبیه http://www.internet.com/faq.html است. بخش //:http نوع پروتوکل و یا استاندارد ارتباطی را تعیین میکند، www.internet.com نام دومین یا Domain است و faq.html نام صفحه ای است که باید خوانده شود.
مرورگرها چگونه صفحات وب را نمایش میدهند؟
  • چگونگی نمایش یک صفحه وب بصورت مستتر در آن وجود دارد.
  • مرورگرها از روی دستورالعملهای داخل صفحات وب و با کمک تگ ها به نمایش صفحات میپردازند.
  • وظیفه اصلی تگ های اچتمل ( HTML tags ) بیان چگونگی نمایش اطلاعات میباشد.
  • یک تگ اچتمل چیزی شبیه <p> این تگ پاراگراف است! </p> است.
چه کسانی استاندارد های وب را تعیین میکند؟
  • تعیین استاندارد های وب ربطی به شرکتهای مایکروسافت و یا نت اسکیپ ندارد.
  • World Wide Web Consortium یا W3C متولی تعیین استانداردهای وب است.
  • HTML, CSS and XML از مهمترین استانداردهای تصویب شده وب میباشند.
  • آخرین استاندارد HTML استاندارد XHTML 1.0 میباشد 

 



  • میله | بند باز