طراحی وب سایت

 

 

شايد خيلي از شما خوانندگان گرامي هميشه در نظر داشته ايد تا يک سايت متفاوت و حرفه اي را در زمينه مورد علاقه تان راه اندازي کنيد . از گالري تصاوير گرفته تا سايت هاي خبري و فروشگاهي و … . اما هيمشه عوامل متعددي مانع از عملي شدن ايده ي شما شده اند . به عنوان مثال نداشتن دانش برنامه نويسي و

 طراحی وب سایت و يا وقت گير بودن اينگونه پروژه ها . گاهي اوقات هم هزينه هاي بسيار بالاي طراحي وب ، شما را از انجام آن منصرف کرده است .

 

اما مطمئنا با WebRGB مي توانيد يک وبسايت حرفه اي ، متمايز و ارزان بسازيد .  طراحی وب سایت و توليد پروژه هاي شما زير دست افراد متخصص در زمينه برنامه نويسي وب ، گرافيک و سئو انجام خواهد شد . پس خيال تان راحت باشد .

 

از جمله خدماتي که تيم WebRGB به شما ارائه مي دهد مي توان به موارد زير اشاره کرد :

 

طراحي و ساخت وبسايت هاي ارزان قيمت : اگر مي خواهيد يک وبسايت ساده راه اندازي کنيد ، سيستم مديريت محتواي وردپرس بهترين گزينه است که با قالب هاي زيبا و حرفه اي Webrgb جذاب تر و بهتر هم خواهد شد . اگر کار با وردپرس را بلد نيستيد هيچ مشکلي وجود ندارد . بعد از سفارش سايت خود با پشتيباني و آموزش دريافتي از WEBRGB مي توانيد به راحتي سايت خود را مديريت نماييد.

 

طراحی وب سایت و ساخت وبسايت هاي حرفه اي : اگر قصدطراحی وب سایت اختصاصي داريد ، بهتر است سفارش طراحي آن را بدهيد . همان چيزي را که مي خواهيد تحويل خواهيد گرفت . طراحي وبسايت هاي شرکتي ، سازماني ، فروشگاهي ، آگهي ، شخصي و پورتال خبري از تخصص هاي تيم Webrgb مي باشد . همچنين اگر مي خواهيد براي بخشي از وبسايت خود به صورت حرفه اي برنامه نويسي انجام دهيد ، باز هم Webrgb به شما کمک خواهد کرد .

 

بهينه سازي وب : همانطور که مي دانيد اکثر بازديد کنندگان وبسايت شما از طريق موتورهاي جستجويي مثل گوگل وارد آن مي شوند . اگر وبسايت خود را بهينه سازي کنيد ، مسلما وبسايت شما در نتايج جستجو رتبه بهتري خواهد گرفت . پس بهينه سازي وبسايت خود را فراموش نکنيد . اگر هم روش هاي تخصصي بهينه سازي را نمي دانيد ، WebRGB به شما کمک خواهد کرد .

 

بازاريابي اينترنتي : اهميت بازاريابي در هر زمينه اي بر هيچکس پوشيده نيست . بدون بازاريابي نمي توان انتظار نتايج خوبي در زمينه سوددهي داشته باشيد . WebRGB در اين زمينه نيز به شما کمک خواهد کرد تا از وبسايت خود درآمد کسب کنيد .

 

پس حتما به WebRGB.net سر بزنيد تا بتوانيد ايده هاي تان را در وسعت دنياي اينترنت تحقق ببخشيد …..

 

 

 

 

 

 

 

 

برگ نخست پايگاه مقاله ها دانلود نرم افزار عضويت در سايت ارتباط با ما

جستجو

 

طراحی وب سایت آموزش کامل طراحي سايت - بخش اول

به يادگار آنکه او هميشه با من است...

 

مقدمه

اساس آموزش طراحي سايت ارائه شده در اين بخش براساس زبان HTML و اسکريپ نويسي با CSS و Jscript است. توجه کنيد استفاده از زبانهاي PHP و ASP تا حدود زيادي توسط HTML قابل پياده سازي هستند اما از آنجا که هميشه افرادي هستند که بايد تخصص هاي پيچيده پيچيده داشته باشند تا خبرگي خود را نشان دهند از زبانهاي پيچيده تري غير از HTML سود مي برند.  به زعم نويسنده ساده زيباست.

نيازمنديها

 

1- نرم افزار و محيط طراحی وب سایت : پياده سازي و اجراي وب سايت با برنامه ساده notepad قابل انجام است. برخي نرم افزارهاي ديگر مانند مايکروسافت FrontPage نيز وجود دارند که اصلاً توصيه نمي شود. من به شما برنامه ماکرومديا DreamWeaver را پيشنهاد مي کنم که مي توانيد آنرا از اين لينک دانلود کنيد. البته اکنون شرکت ماکرومديا توسط شرکت Adobe خريداري شده و ممکن است لينک مربوط تغيير کرده باشد.

 

2- آشنائي کار با گرافيک: درک صحيح از فايلهاي صوتي، تصويري و عکس در طراحي بنرها و انواع افزونه هاي تصويري يا صوتي بسيار الزامي است. برنامه Adobe Photoshop و Xara 3d پيشنهاد من هستند. در ضمن حتما" در بخش آشنائي با فرمت فايلهاي صوتي، تصويري و عکس را مطالعه کنيد.

 

3- مرورگر يا Browser :  نرم افزاري است که توسط آن صفحات وب به اجرا در مي آيند. Inteet Explorer  و mozilla firefox از مهمترين مرورگرها هستند. در سيستم عامل هاي Apple mackintosh از مرورگر Netscape استفاده مي شود که در ايران کاربردي ندارد. همچنين Google croom, Safari  و Opera نيز از ديگر مرورگرهاي موجود هستند.

 

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

 

تهيه مقدمات

 

صفحات وب را با فرمت htm, mht, php, aspx, ... مي توان ذخيره کرد. وقتي از اينترنت يک صفحه اينترنتي را ذخيره مي کنيد با فرمت htm ذخيره شده و معمولا يک پوشه با نام همان صفحه اينترنتي در کنار صفحه شما مانند زير مشاهده خواهد شد. اسکريپت ها، تصاوير و ساير افزونه ها درون اين پوشه هستند. همه چيز را توضيح خواهم داد، عجله نکنيد.

 

اين پوشه که با حذف آن صفحه اينترنتي نيز حذف خواهد شد ما را به مفهوم url مطلق و نسبي مي رساند. ما به عنوان يک کاربر به هنگام بازديد از يک سايت به url آن سايت رجوع مي کنيم. url يعني Uniform Resource Locator که يک آدرس منحصر به فرد است. براي نمونه شما وقتي به وب سايت من سر مي زنيد به url من يعني http://www.parsmodir.com رجوع مي کنيد اما من به آدرس فايلهاي خودم با استفاده از پرتکل ftp به جاي http مي کنم. پس شما هنگاميکه يک طراحی وب سایت هستيد با آدرس فايلها سر و کار داريد نه آدرس هاي اينترنتي.

 

HTTP: hypertext transfer protocol

 

FTP:file transfer protocol

 

مفهوم url مطلق يعني ارجاع به آدرس هاي اينترنتي و url نسبي يعني ارجاع به فايلها. بنابراين زمانيکه شما سايت خود را طراحی وب سایت مي کنيد هميشه از url نسبي استفاده مي کنيد مگر آنکه بخواهيد به يک سايت ديگر آدرس بدهيد. در بحث ايجاد hyperlink يعني بخش سوم بيشتر توضيح خواهم داد. فقط سردرگم نشويد و ادامه بدهيد.

 

براي شروع يک پوشه درست کنيد. اين پوشه فضاي اينترنت است و با بيرون آن هيچ کاري نداريد. صفحه اصلي يا home Page سايت خود را با نامي مانند index.htm در اين پوشه ايجاد خواهيد کرد. در اين پوشه ساير پوشه هاي اصلي سايت خود را ايجاد کنيد. براي مثال يک پوشه براي عکس، يک پوشه براي فايلهاي css و يک پوشه براي صفحات فرعي سايت. به نمونه زير توجه کنيد:

 

طراحی وب سایت

 

براي نمونه تصاويري که مي خواهيد در سايت خود استفاده کنيد را در پوشه img ذخيره کنيد. حال فرض کنيد يک عکس با نام Rose.gif در پوشه img ذخيره کرده ام. شما اين فايل را با آدرس www.parsmodir.com/img/rose.gif خواهيد ديد ولي من آنرا به صورت "img/rose.gif" مي شناسم. طراح سايت از آدرس مختصر نسبي استفاده مي کند. بنابراين حالا فايلها و پوشه هاي لازم را ايجاد کنيد و سپس با يکديگر نحوه طراحي صفحه index.htm را آغاز خواهيم کرد.

 

شروع طراحي

 

1. برچسب html : زبان HTML زبان برچسب ها يا Tag ها است. هميشه يک سايت با برچسب html به صورت زير شروع و تمام مي شود.

 

< html > کدهاي طراحي سايت </ html >

 

2. برچسب head : اين برچسب بعد از < html >  مي آيد. کدهاي اين قسمت توسط مرورگر مشاهده شده اما از ديد کاربر پنهان هستند. بيشتر موتورهاي جستجو مانند گوگل ابتدا اين کدها را بررسي مي کنند.

 

3. بر چسب body : اين برچسب پس از پايان کدهاي head قرار گرفته و بدنه سايت را مي سازد. کدهاي قابل رويت در اين بخش قرار مي گيرند.

 

تمرين اول:  در برنامه notepad  کدهاي زير را بنويسيد:

 

<html > <head> </head> <body> My simple sample </body> </html>

 

صفحه را با نام index.htm ذخيره کنيد. دقت کنيد در برنامه notepad حتما در قسمت save as type گزينه all files را انتخاب کنيد تا پسوند txt خوبخود به انتهاي نام فايل شما اضافه نشود. حال برنامه ذخيره شده را که آيکوني مانند زير دارد را باز کنيد. اين اولين تجربه شما در طراحی وب سایت را تبريک مي گويم. اگر از اينترنت اکسپلورر استفاده کنيد يا از فايرفکس با يکي از دو آيکون زير مواجه خواهيد شد.

 

inteetfirefox

 

4. برچسب title : اين برچسب در بخش head  قرار مي گيرد و عنوان صفحه روي مروگر يا نوار ابزار را مشخص مي سازد.

 

<title> Parsmodir </title>

 

با قرار دادن کدهاي زير در بين برچسب هاي head و نمايش صفحه با مرورگر در نوار ابزار ويندوز و نوار عنوان خود صفحه نام Parsmodir را خواهيد ديد.

 

- صفحه را ذخيره کنيد و با اگر همزمان توسط مرورگر نيز باز است دکمه F5 را فشار دهيد تا بروزرساني شود. يا اگر مروگر را بسته ايد دوباره صفحه را باز کنيد. فشار داده دکمه دکمه F5 در مرورگر براي refresh کردن است و اگر درحال طراحي يک صفحه هستيد به جاي آنکه مدام صفحه را ببنديد و باز کنيد آنرا باز نگه داريد و با زدن دکمه F5 آنرا بروزرساني کنيد تا تغييرات را مشاده کنيد.

 

ويژگيها و ارزش ها

 

هر برچسب يک سري ويژگي يا attribute دارد که براساس مقداري که به آن داده مي شود قابل دستکاري است. براي نمونه کد زير باعث مي شود پس زمينه به رنگ آبي تغيير کند:

 

<body bgcolor="#0000FF">

 

ارزش ها هميشه درون يک زوج گيومه قرار مي گيرند.

 

فارسي کردن صفحه

 

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

 

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

 

- اگر براي کدنويسي از notepad استفاده مي کنيد به هنگام ذخيره يک صفحه فارسي در منوي encoding يکي از گزينه هاي UTF-8 يا Unicode را انتخاب کنيد. مشاهده تصوير

 

- در برنامه Dreamweaver نيز از منوي modify گزينه page properties را انتخاب کنيد. در کادر ظاهر شده از قسمت encoding يکي از گزينه هاي UTF-8 يا Unicode را انتخاب کنيد. مشاهده تصوير

 

در يک صفحه فارسي اگر از عبارتهاي لاتين نيز استفاده کنيد همه چيز بهم خواهد ريخت. براي رفع اين مشکل از ويژگي dir به صورت زير استفاده کنيد:

 

<body dir="rtl">

 

آنچه تاکنون آموختيد ايجاد يک صفحه فارسي مقدماتي بوده است. در ادامه بايد اصول درج متن، طراحي جدول و نيز کار با رسانه هاي تصويري و صوتي را فرا بگيريد. بعد از اين مرحله به عنوان يک طراح مبتدي بايد مهارت هاي اسکريپ نويسي و کار با فايلهاي CSS را فرا بگيريد تا به يک کطراح متوسط upgrade شويد. در نهايت طراحی وب سایت پويا را آموزش خواهم داد و آنگاه شما به عنوان يک حرفه اي تنها با تمرين زياد مي توانيد مهارت هاي خود را به اوج برسانيد.

ادامه مطلب

1- آشنائي و مقدمه            6- آموزش CSS      11- تگ هاي متا

2- اصول درج متن   7- جاوا اسکريپت   12- بارگذاري صفحات در اينترنت

3- مديريت پيوندها  8- بهينه سازي وب (SEO)   13- بالا بردن ترافيک سايت

4- طراحي جدول   9- فايل RSS - فايل XML      14- وب پويا و وب سرور - CMS - Joomla

5- کار با عکس، صوت و تصوير            10- رتبه گوگل - رتبه الکسا   Parsmodir.com

Copyright © Arash Habibi - ParsModir.com