آموزش طراحی وب سایت 3

دریم ویور : رویاباف طراحان وب
نام این نرم افزار به معنای رویاباف میباشد ، البته از نظر من ماکرومدیا در این مورد اصلا اقراق نکرده است . چون کار این نرم افزار آنچنان ظریف و استثنایی است که جز در رویای شما قابل تصور نیست . در این مقاله در مورد قابلیتهای نرم افزار 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 ها را نيز بخوبي پشتيباني ميکنيد . امکانات ديگر آن در هنگام کار با برنامه چندان زياد است که گاهي از اينهمه ابزار به هيجان مي آييد . پس از اين پس براي بافتن روياهاي خود در وب يک روياباف داريد !
متاتگ چیست ؟

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

دو نوع اصلی متاتگ وجود دارد :
این متاتگ باعث میشود که اطلاعات اضافی ای همراه صفحه وب درخواستی شما در 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">
تگ بالا کارش افزودن توضیحات سایت شما به موتور های جستجوگر است . اگر این تگ را به وب سایت یا وبلاگ خود اضافه کنید از ماه آینده اگر کسی بصورت تصادفی در گوگل به سایت شما بر بخورد توضیحات داخل این متا تگ را بجای توضیحات میبیند . یعنی گوگل دقیقا از این متاتگ برای ذخیره اطلاعات درباره سایت شما استفاده میکند . پس بکاربردن این متا تگ ها خیلی مهمه !

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

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

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 و فلش و مانند آن از خوانايي لينك هاي شما مي كاهد .اگر مجبور به استفاده از لينك هاي پيچيده در طراحي سايت هستيد ميتوانيد از لينك هاي ساده در انتهاي صفحات استفاده كنيد تا موتور هاي جستجوگر نيز بتوانند لينك هاي شما را شناسايي كنند .

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

مقدمه اي بر وب و زبان html

منظور از وب چيست؟
وب شبکه ای است متشکل از تمامی کامپيوترهای دنيا، شبکه ای از شبکه ها.
اينترنت، وب، 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> است.
چه کسانی استاندارد های وب را تعيين ميکند؟
تعيين استاندارد های وب ربطی به شرکتهای مايکروسافت و يا نت اسکيپ ندارد.
World Wide Web Consortium يا W3C متولی تعيين استانداردهای وب است.
HTML, CSS and XML از مهمترين استانداردهای تصويب شده وب ميباشند.
آخرين استاندارد HTML استاندارد XHTML 1.0 ميباشد .
روش نصب PHP بروى Windows ها

روش نصب PHP بروى windows 95/98/Me NT/2000/XP
PHP بر روى win32 بدو صورت نصب مىشود

1 - بصورت CGI executable
2 - بصورت server module SAPI

1 - نصب PHP بصورت CGI executable :
نصب PHP بصورت CGI executable بسيار ساده مىباشد براى اين كار شما بايد بر روى PC خود يكى از web server هاى زير را داشته باشيد

Personal Web Server 3 and 4 or newer
Internet Information Server 3 and 4 or newer
Apache 1.3.x
OmniHTTPd 2.0b1 and up
Oreilly Website Pro
Xitami
Netscape Enterprise Server, iPlanet
در سايت www.php.net شما مىتوانيد php Installer را بر روى PC خود ذخيره كنيد
اين برنامه php را بر روى PC شما بصورت CGI executable و با پشتيبانى MySQL نصب خواهد كرد و web Server شما را بصورت automatic تنظيم خواهد كرد
--------------------------------------------------------------------------------
2 - نصب PHP بر روى win32 بصورت server module SAPI :

نصب PHP بصورت server module SAPI بر روى Apache توسط دوست عزيزمان آقاى على نادرى در قسمت مقالات بطور كامل توضيح داده شده است
و اما نصب PHP بر روى IIS :
جهت اين كار ابتدا بايد PHP را از اين آدرس Windows Binaries بر روى PC خود ذخيره كنيد
محتويات اين فايل كه بصورت zip است را در شاخه‌اى كه مىخواهيد php را نصب كنيد قرار دهيد c:\php خوب است
پس از اين كار فايل‌هاى php4ts.dll و sapi/php4isapi.dll و dlls/*.dll را در شاخه system ذخيره كنيد

c:\windows\system for Windows 9x/ME
c:\winnt\system32 for Windows NT/2000
c:\windows\system32 for Windows XP
فايل php.ini-recommended را به php.ini تغيير نام داده و در شاخه WINDOWS ذخيره كنيد
در فايل php.ini تغييرات زير را ايجاد كنيد:
شما بايد extension_dir را به شاخه extension هاى مورد نظر خود تغيير دهيد چنانچه مطابق با توضيحات پيش رفته باشيد اين مسير c:\php\extensions مىباشد
فايل browscap.ini را در

c:\windows\system\inetsrv\browscap.ini on Windows 9x/Me,
c:\winnt\system32\inetsrv\browscap.ini on NT/2000,
c:\windows\system32\inetsrv\browscap.ini on XP.
جنانجه پس از نصب PHP فايلهاى شما در شناختن variable ها مشكل داشتيد در فايل php.ini پارامتر register_globals را از off به on تغيير دهيد
سپس در IIS در قسمت

Home Directory > configuration > App Mappings :

Executable : C:\WINNT\system\php4isapi.dll
Extension : .php
را اضافه كنيد در قسمت ISAPI نيز

Filter Name : php
Executable : C:\WINNT\system\php4isapi.dll

پس از يك بار stop / start كردن IIS شما مىتوانيد PHP را بر روى PC خود اجرا كنيد .