آموزش کامل طراحي سايت

آموزش کامل طراحي سايت – بخش اول
به يادگار آنکه او هميشه با من است…

مقدمه

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

نيازمنديها

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

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

3- مرورگر يا Browser : نرم افزاري است که توسط آن صفحات وب به اجرا در مي آيند. Internet 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 خوبخود به انتهاي نام فايل شما اضافه نشود. حال برنامه ذخيره شده را که آيکوني مانند زير دارد را باز کنيد. اين اولين تجربه شما در طراحي سايت را تبريک مي گويم. اگر از اينترنت اکسپلورر استفاده کنيد يا از فايرفکس با يکي از دو آيکون زير مواجه خواهيد شد.

internetfirefox

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

<title> Parsmodir </title>

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

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

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

هر برچسب يک سري ويژگي يا attribute دارد که براساس مقداري که به آن داده مي شود قابل دستکاري است. براي نمونه کد زير باعث مي شود پس زمينه به رنگ آبي تغيير کند:
<body bgcolor=”#0000FF”>

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

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

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

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

<body dir=”rtl”>

اصول درج متن

تابحال توانسته ايد يک صفحه فارسي براي شروع کار تهيه کنيد. حال براي نوشتن متن در قالب پاراگراف هاي مختلف بايد کار با برچسب هاي P, br, div, font, ul, ol و چند برچسب ديگر را بياموزيد.. در ادامه با يادگيري CSS از style هاي ايجاد شده در اين برچسب ها استفاده خواهد شد. تمامي اين برچسب ها در برچسب body درج خواهند شد.

برچسب P

هر پاراگراف را در يک برچسب P وارد کنيد. نيازي به فشردن enter براي رفتن به خط بعدي وجود ندارد. در انتهاي صفحه شکست ايجاد مي شود. از برچسب p زير استفاده کنيد.
<p> متن مورد نظر </p>

با استفاده از ويژگي dir=”ltr” مي توانيد از زبان لاتين و dir=”rtl” از زبان فارسي پشتيباني کنيد. اگر در برچسب body ويژگي dir را تنظيم کرده ايد نيازي به تکرار آن در هر پاراگراف نيست.

بهتر است ويژگي align را روي justify تنظيم کنيد.
برچسب div

با استفاده از برچسب P و ويژگيهاي آن مي توان پاراگراف ها را تنظيم کرد. اما براي دسته بندي پاراگراف ها بويژه زمانيکه پاراگراف هاي راست چين و چپ چين داريم از برچسب
استفاده مي شود که کارائي زيادي دارد. بهتر است ويژگي dir و align چندين پاراگراف را در يک div کرد. براي نمونه به کد زير توجه کنيد:
<div dir=”rtl” align=”justify”>
<p>پاراگراف اول</p>
<p>پاراگراف دوم </p>
<p>پاراگراف سوم</p>
</div> برچسب br

در برنامه هاي تايپ متن مانند word اگر بخواهيد در يک خط از متن شکست ايجاد دکمه Enter را فشار مي دهيد. براي ايجاد شکست در يک خط قبل از آنکه به انتهاي خط برسيد از برچسب
استفاده کنيد. اين برچسب نيازي به تگ انتهائي به صورت ندارد. مشاهده نمونه کد

برچسب strong

متن درون برچسب strong به صورت bold در مي آيد.
<strong>متن مورد نظر</strong>
برچسب b

متن درون برچسب b مانند strong به صورت bold در مي آيد.
<b>متن مورد نظر</b>
برچسب i

متن درون برچسب i به صورت italic در مي آيد.
<i>متن مورد نظر</i>
برچسب u

متن درون برچسب u به صورت underline در مي آيد.
<u>متن مورد نظر</u>
برچسب font

با ويژگيهاي متعدد اين برچسب مي توان نوع, اندازه و سبک قلم مورد استفاده براي متن را تغيير داد. اما ساتفاده مکرر از اين برچسب سايت را بسيار سنگين کرده و مرورگر را دچار ايراد مي کند. براي اعمال تغييرات در قلم بايد از سبک نويسي با css استفاده کنيد.

برچسب UL

برچسب ul براي تهيه ليست استفاده مي شود. براي افزودن هر سطر از يک برچسب داخلي li استفاده مي شود.
<ul>
<li>سطر اول</li>
<li>سطر دوم</li>
<li>سطر سوم</li>
</ul>
برچسب oL

برچسب ol براي تهيه ليست شماره دار استفاده مي شود. در اينجا نيز براي افزودن هر سطر از يک برچسب داخلي li استفاده مي شود.
<ol>
<li>سطر اول</li>
<li>سطر دوم</li>
<li>سطر سوم</li>
</ol>
برچسب h

اين برچسب ها از h1 تا h6 هستند و متن درون آنها از اندازه هاي کوچک تا خيلي بزرگ براي سرايندها مناسب است. البته اگر از فارسي استفاده مي کنيد من آنرا پيشنهاد نمي کنم.
<h1>متن مورد نظر</h1>
برچسب hr

برچسب hr يک خط مانند زير ايجاد مي کند. اين برچسب به صورت
درج شده و تگ انتهائي ندارد.

ويژگيهائي مانند class, dir, align و … در مورد تمامي اين برچسب ها قابل استفاده است.
آموزش کامل طراحي سايت – بخش سوم
کار با HyperLink

لينک هاي اينترنتي کاربرد زيادي دارند. با کليک روي عبارت Home به صفحه اصلي سايت من خواهيد رفت. هايپرلينک براي متن، عکس و ديگر افزونه هاي سايت کاربرد دارد. براي مديريت hyperlink بايد مفهوم url نسبي و مطلق را درک کنيد.

برچسب a

با استفاده از برچسب a قبل از يک متن مشخص يا يک تصوير مي توان هايپر لينک را ايجاد کرد.

ويژگي href

ويژگي href مهمترين ويژگي برچسب a است که آدرس مقصد لينک را نشان مي دهد.
<a href=”www.parsmodir.com”> متن مورد نظر </a> از هايپرلينک درون پاراگراف ها و برچشب هاي P مي توان استفاده کرد.

مفهوم url مطلق و نسبي

در قطعه کد بالا من به سايت خودم لينک داده ام. به بخش اول برگرديم. فرض کنيد صفحه اصلي سايت من index.htm نام دارد.
1- فرض کنيد در پوشه sub يک صفحه با نام icdl.htm ذخيره شده است. فرض کنيد من مي خواهم در صفحه اصلي با کليک روي آموزش ICDL صفحه icdl.htm بارگذاري شود. دور راه براي من وجود دارد. استفاده از url مطلق:
<a href=”www.donyarweb.ir\sub\icdl.htm”> آموزش icdl </a>
راه دوم استفاده از url نسبي است. براي اين کار ويژگي href به صورت زير کدنويسي مي شود.
<a href=”sub\icdl.htm”> آموزش icdl </a>

2- فرض کنيد بخواهيم در صفحه index.htm با کليک روي دکمه بروزرساني صفحه بروزرساني شود. به عبارت ديگر بايد به خود صفحه لينک بدهيم. روشهاي کدنويسي به دو صورت زير خواهد بود:
<a href=”www.parsmodir.com”> بروزرساني </a>
<a href=”index.htm”> بروزرساني </a>
مزيت url نسبي

با استفاده از url نسبي طراح سايت مي تواند در حالت offline صفحات طراحي شده را مشاهده کند. در ضمن آدرس دهي بسيار ساده تر و کوتاه تر خواهد بود. از url مطلق تنها در صورتي استفاده کنيد که بخواهيد به يک سايت ديگر آدرس دهي کنيد.

3. فرض کنيد در پوشه sub يک صفحه با نام about.htm و يک صفحه با نام icdl.htm وجود دارد. در اين تمرين مي خواهيم در صفحه about يک ليست بسازيم که به همه اين صفحات به روش نسبي لينک بدهد. به کدهاي زير توجه کنيد:
<ul>
<li> <a href=”about.htm”> درباره ما </a> </li>
<li> <a href=”icdl.htm”> آموزش ICDL </a> </li>
<li> <a href=”..\index.htm”> صفحه اصلي </a> </li>
</ul>
همانطور که ملاحظه مي کنيد در لينک سوم از /.. استفاده شده است. اگر به يک صفحه خارج از پوشه حاضر آدرس دهي شود آن پوشه نسبت به پوشه حاوي صفحه موجود sub folder نباشد براي آدرس دهي از /.. استفاده مي شود.

4. فرض کنيد در پوشه img يک عکس به نام Rose.gif وجود دارد. از صفحه flower.htm در پوشه sub مي خواهيم يک لينک به اين عکس ايجاد کنيم:
<a href=”../img/Rose.gif”>مشاهده گل رز</a>
با اين مثال مفهوم /.. بهتر روشن گرديد.

ايجاد لينک دانلود

در تمرين 4 مشاهده شد که به يک عکس لينک داده شده است. وقتي شما به تصاوير يا صفحات اينترنتي لينک مي دهيد چون مرورگر مي تواند آنها را کدگشائي و اجرا کند صفحات و تصاوير در مرورگر به نمايش در خواهند آمد. بسيار مشاهده کرده ايد که در سايتها با کليک روي download يک فايل را دانلود کرده ايد. براي ساخت لينک دانلود همه چيز خيلي ساده است.

دانلود پک فونت فارسي

فرض کنيد پک فونت فارسي را با نام fonts.zip در پوشه any ذخيره شده است. از کد زير استفاده خواهد شد:
<a href=”../any/font.zip”>دانلود پک فونت فارسي </a>
تفاوت upload و download

به عنوان يک کاربر هميشه به دنبال لينک دانلود فايلهاي موسيقي، مقاله و … هستيد. بارها شده بعد از مدتها يک لينک دانلود پيدا کرده ايد و بعد مدام براي دانلود اين صفحه آن صفحه شده ايد تا سرانجام آن لينک جادوئي پيدا شده است.

شما به عنوان يک طراح با مشکلي به نام upload مواجه هستيد. شما فضاي محدودي داريد و براي هر مگابايت فضاي اينترنتي براي سايت خود بايد پول بپردازيد حالا اگر بخواهيد يک فايل 20 مگابايتي را براي دانلود قرار دهيد ديگر نمي توانيد آنرا در فضاي سايت خود قرار دهيد تا ديگران آنرا دانلود کنند.

براي حل اين مشکل به سراغ سايتهاي Uplaod رايگان برويد. سايت rapidshare يکي از معروف ترين اين سايتها است و بعد از upload فايل شما به شما يک url که محل ذخيره فايل شما در فضاي سايبر است را خواهد داد. براي همين است که شما در صفحه دانلود آموزش ICDL سايت من بايد به رپيدشر رجوع کنيد.

سايتهاي rapidshare, 4shared, tinypic, 2shared از مهمترين سايتهاي upload فايل هستند. يک طراح مداوم بايد لينک هايش را با upload و download در اختيار کاربران قرار دهد. تجزيه و تحليل بحث به عهده خودتان.

مفهوم active, Hover و Visited

زمانيکه نشانگر ماوس روي يک لينک قرار گيرد عمليات hover اتفاق مي افتد. به طور پيش در اثر hover لينک تغيير شکل مي دهد.

وقتي يک بار روي لينکي کليک کنيد عمليات visited اتفاق مي افتد يعني اين لينک بازديد شده است.

زمانيکه هم براي متن يا تصويري لينک بسازيد آن قطعه متن يا تصوير حالت active خواهد داشت.

با اين ويژگيها مي توان براي برچسب a برنامه نويسي کرد. اين بحث را در قسمت CSS پيگيري خواهيم کرد.

ايجاد لينک براي تصاوير

بهتر است اين قسمت بعد از بخش پنجم که مهارت کار با تصاوير است مطالعه شود.

فرض کنيد بخواهيد کاربر را با کليک روي يک عکس به صفحه اصلي سايت ارجاع دهيد.

کدهاي عمليات مطابق زير است:

اگر در کد بالا از border=”0″ استفاده نشود يک کادر آبي نچندان جذاب به دور عکس ظاهر مي شود.

ويژگي Target

اگر روي لينک خانه بالا کليک کنيد مشاهده مي شود که صفحه ارجاع شده در يک صفحه جديد باز مي شود. چون از کد target=”_blank” استفاده شده است. اگر از اين ويژگي استفاده نشود صفحه ارجاع شده جايگزين صفحه جاري خواهد شد.

ايجاد لنگر

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

ابتدا به خطي که مي خواهيد به آن ارجاع شود يک id منحصربه فرد تخصيص دهيد:
<a id=”intro”>مقدمه</a>
سپس ويژگي href را در محل پيوند به آن id ارجاع دهيد:
<a href=”#intro”>ابتداي صفحه </a>
در ارجاع href به id حتما از علامت # (بخوانيد شارپ) استفاده کنيد.
آموزش کامل طراحي سايت – بخش چهارم

طراحي جدول

به طور کلي از جدول براي طراحي فضاي قالب وب استفاده کنيد. استفاده از سطرها و ستونهاي زياد براي انتظام بخشهاي مختلف سايت صحيح نيست و بايد از CSS به جاي
استفاده کنيد. براي طراحي جدول از برچسب
به صورت زير استفاده کنيد.
<table width=”200″ border=”1″>
<tr>
<td>متن يا گرافيک موردنظر </td>
</tr>
</table>

کدهاي بالا جدولي 1*1 به صورت زير ايجاد مي کند.

برچسب TR
با استفاده از اين برچسب يک سطر اضافه مي شود. درون برچسب TR به تعداد لازم مي توانيد ستون اضافه کنيد.

برچسب TD

با استفاده از اين برچسب يک ستون اضافه مي شود. درون برچسب TR به تعداد لازم مي توانيد با استفاده از TD ستون اضافه کنيد.

قطعه کدي که يک جدول با 2 سطر و 5 ستون ايجاد مي کند بنويسيد: مشاهده پاسخ

ويژگيهاي عمومي جدول و دستکاري آنها

ويژگي border براي اندازه کادر جدول است. اگر مقدار آن 0 باشد کادر حذف مي شود.

ويژگي width براي تعيين عرض جدول است. اگر از جدول به عنوان بدنه صفحه استفاده مي کنيد مقدار 800 مناسب است.

ويژگي height براي تعيين ارتفاع جدول استفاده مي شود که استفاده از آن توصيه نمي شود.

ويژگي dir براي پشتيباني از فارسي بهتر است برابر rtl و براي پشتيباني از لاتين ltr باشد.

ويژگي id براي انتصاب جدول به يک سري style که با css تهيه شده استفاده مي شود که در ادامه خواهد آمد.

ويژگي class نيز براي انتصاب جدول به يک سري style که با css تهيه شده استفاده مي شود که در ادامه خواهد آمد.

ويژگي bgcolor براي تعيين رنگ جدول استفاده مي شود. مشاهده معادل هگز رنگ ها

اين ويژگي ها براي برچسب هائي مانند body, td, tr, div و برخي برچسب هاي ديگر نيز قابل استفاده است. اگر در يک تگ بزرگتر يک مقدار دلخواه را بکاربرده ايد مجددا آنرا تکرار نکنيد چون لزومي ندارد. براي نمونه اگر در تگ body از dir=”rtl” استفاده کرده اين لزومي ندارد در تگ هاي زير مجموعه مانند table, div, p و … مجددا از dir=”rtl” استفاده کنيد.

ويژگيهاي منحصر به فرد جدول

ويژگي cellSpacing : فاصله سطرها و ستونها را از حاشيه جدول تعيين مي کند.

ويژگي cellPadding : فاصله نوشته ها را از سطرها و ستونها يا حاشيه جدول تعيين مي کند.

مجموعه کدهاي زير را در نظر بگيريد.

<body dir=”rtl” width=”800″>
اگر بخواهيد در اين بدنه از يک جدول استفاده کنيد که تمام 800 پيکسل بدنه را پرکند مي توانيد مقدار width جدول را 100% وارد کنيد. استفاده از درصد به جاي يک مقدار ثابت سبب مي شود تا جدول منعطف شود. در زير يک نمونه از روش مقدار دهي به جدول آمده است.
<table align=”right” cellSpacing=”1″ cellPadding=”1″ width=”80%” border=”0″>
طراحي جدول به کمک dreamweaver

با نرم افزار dreamweaver کار طراحي جدول به يک بازي شبيه است. از منوي insert گزينه table را اجرا کنيد. در کادر ظاهر شده ويژگيهاي جدول را مطابق آنچه گفته شد تنظيم کنيد.

– طراحي بدنه صفحه

بدنه برخي سايتها کل فضاي صفحه را اشغال مي کند اما در بسياري از سايتها بدنه به اندازه 800 پيکسل طراحي شود يا اگر بدنه منعطف باشد از 80% صفحه استفاده مي شود. براي تعيين عرض بدنه و همچنين راست چين بودن متن مي توان ويژگيهاي width و dir تگ body را مانند زير تغيير داد:

<body dir=”rtl” width=”800″>
اما بهتر است راست چين بودن را با استفاده از يک تگ div به مروگر اعلاک کرد. براي اين منظور از کدهاي زير استفاده کنيد:
<body>
<div dir=”rtl” >
تمام کدهاي برنامه
</div>
</body>
اگر هم لازم باشد مي توانيد بدنه را با يک جدول قالب بدهيد. در اين صورت به جاي تگ div از table استفاده کنيد. براي تسلط کار با سطرها و ستونهاي جدول تنها به تمرين بيشتر نياز است.

استفاده از CSS

تنظيمات مربوط به انواع کادرها، نوع قلم و افکت هاي متن مانند فاصله حروف يا Bold , underline, color و … توسط فايل هاي جانبي CSS قابل طراحي و استفاده است. زبان HTML اينگونه تنظيمات را با استفاده از برچسب
و برچسب انجام مي دهد که CSS هر دو را منسوخ کرده است. براي براي مطالعه بيشتر به طراحي CSS رجوع کنيد.
آموزش کامل طراحي سايت – گرافيک سايت

مديريت عکس
گرافيک سايت: عکس ها و رنگ ها

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

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

کار با عکس
1- کار با عکس

براي درج تصوير از تگ img استفاده مي شود که برچسب انتهائي ندارد. همه تنظيمات يک جا صورت مي گيرد. از عکسها مي توانيد درون جدول ها و يا تگ هاي پاراگراف يعني P استفاده کنيد.
ويژگي src

مهمترين ويژگي تگ img ويژگي src است که مخفف واژه source يعني منبع است. روشن است src مکان ذخيره عکس را نشان مي دهد. براي آدرس دهي به عکس مانند آدرس دهي به هر منبع ديگري بايد مفهوم url مطلق و url نسبي را بدانيد که در بخش اول و سوم توضيح داده شد.

به عنوان يک طراح احتمالا از url نسبي استفاده مي کنيد. فرض کنيد صفحات خود را در يک پوشه در هارد به صورت زير ذخيره کرده ايد:

تگ img

براي نمونه عکس Rose.gif در پوشه img ذخيره شده است. از کدهاي زير براي فراخواني و درج تصوير استفاده مي شود.

<img src=”img/Rose.gif” width=”18″ height=”17″ />
همه کارهاي لازم به پايان رسيده است. با همين قطعه کد يک عکس در صفحه درج خواهد شد.
ويژگي align

با استفاده از ويژگي align=”center” مي توانيد عکس را در وسط خط قرار دهيد.
ويژگي alt

با استفاده از ويژگي alt مي توانيد متني را وارد کنيد که اگر ماوس روي عکس برود آن متن ظاهر مي شود. همچنين اگر به هر دليلي عکس در مرورگر مشاهده نشد به جاي عکس متن درون alt نمايش داده خواهد شد. هيچگاه اين ويژگي را خالي نگذاريد.

<img src=”Pic/music.png” alt=”music icon” />

ويژگي border

با استفاده از ويژگي border مي توانيد براي عکس کادر بکشيد. اگر براي عکس هايپرلينک درست مي کنيد بهتر است ويژگي border را صفر قرار دهيد.

از چه نوع عکس با چه هدفي استفاده مي شود؟ مشاهده پاسخ

رنگ سايت

2- کار با رنگ ها

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

براي رنگ ها بايد از معادل هگز رنگ ها آگاهي داشته باشيد. براي مشاهده هگز تمامي رنگ ها مي توانيد از نرم افزارهاي dreamweaver, photoshop, corel,… استفاده کنيد يا به سايت web-source.net رجوع کنيد. برنامه RGBFinder با حجم 40 کيلوبايت نيز مي تواند کمک کند.

مشاهده هگز رنگهادانلود برنامه مشاهده هگز رنگها

در هر صورت کد هگز رنگ ها چيزي مشابه 003333# است که دو رقم اول مقدار قرمز، دو رقم دوم مقدار سبز و دو رقم آخر مقدار آبي را تعيين مي کنند. تغيير ترکيبات اين سه رنگ اصلي يک رنگ جديد ايجاد مي کند.
ويژگي bgcolor و color

ويژگي bgcolor رنگ پس زمينه و ويژگي color رنگ متن را تعيين مي کند. از اين دو ويژگي در تعريف کلاس ها در يک فايل CSS بسيار استفاده مي شود. براي نمونه کد زير رنگ پس زمينه صفحه اصلي را سبز مي کند:
<body bgcolor=”#006666″ >

براي نمونه مي خواهيم يک پاراگراف رنگ پس زمينه يک پاراگراف سبز و رنگ متن آن نارنجي شود. براي ايجاد چنين افکتي کافيست ويژگي style تگ p را مانند زير مقدار دهيد.
<p style=”color:#FF6600; background-color:#006666″ >
در مورد ويژگي style در بخش آموزشCSS توضيحات بيشتري ارائه شده است. همينطور افکت هاي بسيار متنوع تري نيز قابل ترسيم است.

فشرده سازي تصوير
تکنيک هاي فشرده سازي تصاوير

فضاي وب سايت فضاي تصاوير کم حجم است. بسياري نرم افزارها و تکنيک ها براي فشرده سازي و کاهش حجم تصاوير وجود دارد که اگرچه به بهاي کاهش کيفيت عکس تمام مي شود اما روش هائي وجود دارد که به موازنه صحيحي از هر دو برسي.

راه کار اول استفاده از برنامه فتوشاپ است. در اين صورت کافيست عکس را با فتوشاپ باز کنيد و سپس از منوي فايل گزينه Save for web را انتخاب کنيد. در ديالوگ ظاهر شده مي توانيد فرمت و کيفيت عکس را دستکاري کنيد. بهتر است از فرمت jpg و کيفيت Medium استفاده کنيد.

اگر به برنامه فتوشاپ دسترسي نداريد و يک نرم افزار سبک براي دانلود مي خواهيد نرم افزار JPEG Compressor بسيار مفيد است. چون اين نرم افزار کرک شده است ما آن را براي دانلود قرار نداده ايم ولي بسرعت از سايت هاي ديگر قابل دانلود است.
آموزش کامل طراحي سايت – بخش ششم

CSS چيست
آموزش CSS

واژه CSS مخفف Cascade Style Sheets جهت طراحي انواع سبک يا استايل براي صفحه هاي وب است. با استفاده از کدهاي CSS ميتوان براي صفحه وب طرح‌ها و قالب‌هاي متنوعي طراحي کرد. کدهاي CSS را مي‌توان درون يک صفحه وب يا در يک فايل خارجي درج و استفاده کرد. مهمترين ويژگي و اهميت CSS تشخيص سريع دستورات آن توسط مرورگرهاي اينترنت است که باعث مي شود صفحه وب سريع و درست بارگذاري شود.

کدنويسي css داخلي

اگر بخواهيد در صفحه موجود از کدهاي css استفاده کنيد در بخش head از برچسب style به صورت زير استفاده کنيد. کدهاي css در اين تگ درج ميشوند.
<style type=”text/css”>
کدهاي موردنظر
</style>

کدنويسي css خارجي

با استفاده از css خارجي ميتوانيد سبکهاي مختلفي را طراحي کرده و در تمامي صفحات از آن سبکها استفاده کنيد. براي ساخت يک فايل css نياز به هيچ نرم افزار ويژه‌اي نيست. کدهاي css موردنظر را در يک صفحه notepad وارد کرده و با نامي مانند style.css ذخيره کنيد. البته اگر از dreamweaver استفاده کنيد کارتان ساده تر است. حالا براي اعمال کدها در هر صفحه تنها در بخش head صفحه به اين فايل css خارجي لينک دهيد. به ابتداي بحث طراحي سايت بر مي گرديم. فرض کنيد مجموعه فايلهاي سايت ما به صورت زير است.

پوشه فايلها

فرض کنيد فايل css خارجي ما با نام style.css در پوشه css ذخيره شده است. براي لينک به اين فايل در بخش head هر صفحه دستور زير را وارد کنيد:

در تهيه css خارجي نيازي به استفاده از برچسب style نيست و مستقيماً مي توانيد کدنويسي را انجام دهيد. يک نمونه فايل CSS براي دانلود قرار داده شده است. به هر تعداد که بخواهيد مي توانيد به فايلهاي css خارجي لينک دهيد و همزمان style دروني نيز طراحي کنيد.

1- تغيير قالب برچسب‌هاي‌ موجود

برچسب هاي body, p, div, a, … همه کلاس هاي وب هستند که از قبل طراحي شده اند. با استفاده از کدهاي css مي‌توان اين کلاسها را تغيير داد. با ذکر چند مثال تغيير قالب برچسب هاي استاندارد HTML توضيح داده مي‌شود:

1-1- فرض کنيد مي خواهيد در تمام بدنه از قلم tahoma استفاده کنيد چون براي فارسي‌نويسي ايده آل است و در تمامي نسخه هاي ويندوز به طور پيش فرض وجود دارد. براي اين کار از کد زير استفاده کنيد. اين کد دستور ميدهد قلم پيش فرض tahoma است. اگر قلم tahoma پيدا نشد از arial استفاده شود و اگر نبود از verdana استفاده شود.

body {
font-family: tahoma, arial, verdana;
}
1-2- حالا فرض کنيد بخواهيد دستور دهيد تا اندازه پيش فرض قلم 13 و رنگ قلم سفيد و زمينه صفحه نارنجي باشد.

body {
font-size:13px; font-family: tahoma, arial; color:#000033; background-color: #FF9900
}
براي مشاهده هگز تمامي رنگ ها مي توانيد از نرم افزارهاي dreamweaver,photoshop, corel,… استفاده کنيد يا به سايت web-source.net رجوع کنيد. برنامه RGBFinder با حجم 40 کيلوبايت نيز مي تواند کمک کند.

برنامه نمايش هگز رنگها

1-3- براي آنکه دستور دهيد صفحه وب فارسي و راست چين است از کد زير نيز در مجموعه بالا استفاده کنيد.

body{ direction:rtl; }

1-4- در اين تمرين مي خواهيم دستور دهيم هايپرلينک در تمام صفحه سبز و به underline آن حذف شود. بنابراين از کلاس ترکيبي body و a استفاده مي شود. به خاطر داشته باشيد ويژگي text-decoration براي تعيين افکت هاي قلم استفاده مي شود.

body a{ text-decoration:none; color: #009966; }

1-5- با کد زير هنگاميکه ماوس روي لينک قرار گيرد رنگ لينک آجري مي شود:

1-5- با کد زير هنگاميکه ماوس روي لينک قرار گيرد رنگ لينک آجري مي شود:

a:hover{ color: #ff3300; }

کد بالا رويداد hover تمامي لينک هاي صفحه را تحت تاثير قرار مي دهد. فرض کنيد بخواهيد اين کد تنها براي پاراگراف ها قابل اعمال باشد:

p a:hover{ color: #ff3300; }

2- طراحي class و id

وقتي شما قالب يک برچسب را تغيير دهيد هميشه وقتي از آن برچسب استفاده کنيد با ويژگيهاي جديدي که طراحي کرده ايد ظاهر مي‌شود. فرض کنيد شما قالب يک برچسب p را تغيير را داده ايد در اينصورت تمامي پاراگراف هاي شما با قالب جديد ظاهر مي شود. حالا فرض کنيد بخواهيد فقط قالب يک پاراگراف خاص را دهيد حال چه بايد کرد؟

هر برچسب دو ويژگي به نام id و class دارد. با استفاده از کدهاي css مي توان class و id طراحي کرد و در صورت نياز به برچسب‌ها منسوب کرد. با اين روش انعطاف شما بالا مي رود. مي توانيد کلاس هاي متعددي طراحي و براي هر پاراگراف، div يا برچسب ديگر استفاده کنيد. تنها براي قالب هاي کلي مانند راست چين بودن صفحه، رنگ پس زمينه صفحه يا نوع و اندازه قلم صفحه مانند مثالهاي 1 تا 3 برچسب body را تغيير دهيد و براي تغيير ساير برچسب ها از طراحي کلاس جديد استفاده کنيد.

مثال: فرض کنيد بخواهيد فقط يک پاراگراف سبز با قلم 14 و bold داشته باشيد. براي انجام اين کار يک کلاس جديد با نام دلخواه مانند headgreen طراحي کنيد. در طراحي class جديد از علامت نقطه قبل از نام کلاس استفاده مي شود.
.headgreen {font-size: 12px; font-weight: bold; color: #009966;}

براي استفاده از اين کلاس جديد در هر پاراگراف دلخواه ويژگي class پاراگراف مورد نظر را برابر نام کلاس جديد قرار دهيد:

<p class=”headgreen”>عنوان</p>
علاوه بر کلاس مي توان ID جديد را با همان روش طراحي کلاس جديد استفاده کرد. در اينجا فقط به جاي . از علامت # قبل از نام id استفاده ميشود.

#headgreen {font-size: 12px; font-weight: bold; color: #009966;}

براي استفاده از اين id جديد در برچسب دلخواه ويژگي id برچسب مورد نظر را برابر نام id جديد قرار دهيد:

<p id=”headgreen”>عنوان</p>
؟ تفاوت کلاس و id چيست؟ در يک صفحه HTML تنها بايد يکبار از هر id استفاده شود درحاليکه استفاده از هر کلاس به هر تعداد آزاد است.

نکته براي اعمال تغييرات مربوط به هايپرلينک کلاس ها مانند قبل از روش ترکيبي استفاده کنيد.

طراحي کادرها

3- طراحي کادرها با CSS

مهمترين مزيت کدهاي css از ديدگاه يک طراح حرفه اي استفاده از ويژگيهاي آن جهت دسته بندي و کادربندي صفحه است. يک وب نويس تازه کار براي دسته بندي و مديريت مطالب از جدول و برچسب table استفاده مي کند. استفاده و مديريت جدول براي وب نويس بسيار ساده و راحت است اما براي يک مرورگر وب واقعا پيچيده است . مرورگرها و کراولرها از جدول بيزار هستند و دليل آن را خوب نمي دانم. بنابراين استفاده از توانمنديهاي ترسيم کادر و دسته بندي مطالب با css را خوب ياد بگيريد و کم‌کم جايگزين جدول کنيد. در ترسيم کادر هم از class و id استفاده ميشود.
پروژه 1: قطعه کد طراحي يک کادر با css
#boxtext {
border-right: #dddddd 1px solid; border-left: #dddddd 1px solid; border-top: #dddddd 1px solid; border-bottom: #dddddd 1px solid; padding-right: 2px;
padding-bottom: 8px; padding-left: 2px; padding-top: 8px; background-color: #ffffff; margin-top:0px; margin-bottom: 8px;
}
يادگيري طراحي سايت به توانمنديهاي تحليل شما بستگي دارد و هيچ کس نمي تواند همه چيز را به شما بياموزد. ادامه مطلب چراغ راه شما خواهد بود.

ويژگي boreder: ويژگي border اندازه، ضخامت و رنگ کادر را تعيين ميکند. در مثال بالا BORDER-RIGHT: #dddddd 1px solid; قسمت اول يعني #dddddd معادل هگز رنگ بردار است که رنگ نيلي را برمي گرداند. همچنين 1px ضخامت کادر را 1 پيکسل تعيين کرده است. کلمه کليدي solid يز مي تواند با مقاديري مانند Thick, thin, dashed, medium, inset, outset و … تعيين شود که نرم افزارهاي طراحي سايت مانند dreamweaver همه را نشان مي دهد.

ويژگي padding: براي تعيين فاصله مندرجات يک کلاس از لبه کادر از ويژگي padding به صورت زير استفاده مي شود:
padding-right:2px; padding-bottom:8px; padding-left:2px; padding-top:1px;

ويژگي margin:براي تعيين فاصله يک کلاس از هاي کلاس ديگر از ويژگي margin به صورت زير استفاده مي شود:

margin-right: 0px; margin-left: 0px; margin-bottom: 0px; margin-top: 0px;
margin-right: 0px; margin-left: 0px; margin-bottom: 0px; margin-top: 0px;

علامت px يعني پيکسل، در اين مثالها همه حاشيه ها 0px درجشده است که مي توانيد آن را تغيير دهيد.

پروژه 2: قطعه کد منوي لغزان

صفحه اول

براي تهيه چنين منوئي ابتدا کلاس زير را تعريف کنيد:

.navigation:link, .navigation:visited {
font-size: 13px; font-style: normal; font-weight: normal; text-decoration: none; text-align:center; color: #FFFFFF; background-color: #239180; display: inline; border: none; padding-bottom: 5px; padding-top:5px; padding-left: 20px; padding-right: 20px; float:right; margin-right: 3px
}
.navigation:hover {
background-color: #74c699; color: #333333
}
سپس براي برچسب a از اين کلاس استفاده کنيد:

<a href=”../index.html” class=”navigation”> برگ نخست </a>

نکته براي مطالعه بيشتر دو مقاله نوشته شده در زمينه طراحي CSS محصول سايتهاي dev.ir و macromediax.comکه در يک فايل Zip ذخيره شده اند را دانلود کنيد.

دانلود مقاله آموزش CSS

نکته به طور کلي با css مي توان عمليات متعددي انجام داد. براي نمونه شما مي توانيد کورسر ماوس را تغيير دهيد يا افکت هاي جذاب ديگري را خلق کنيد. فايلهاي css بسيار ساده، سبک و مفيد هستند. آنها بسيار مناسب تر از دستورات html يا جاوا هستند. نمونه برنامه زير را دانلود کرده و کدهاي آن را تحليل کنيد.
آموزش کامل طراحي سايت – بخش هفتم

بکارگيري و مديريت اسکريپت ها

استفاده از اسکريپتهاي نوشته شده به زبان java script توانمنديهاي زيادي را به برنامه اضافه مي کند. براي نمونه آمار افراد online, ساعت ديجيتال، منوهاي متحرک و … از افزونه هاي جاوا اسکريپت هستند. قبل از شروع لازم است يادآوري شود زبان Java Script را با زبان Java يکسان فرض نکنيد، اين دو هيچ ارتباطي به هم ندارند. در اين بخش چگونگي استفاده از کدهاي جاوا در وب سايت آموزش داده مي شود. براي آموزش کامل جاوا اسکريپت نيز در همين بخش امکانات لازم در اختيار قرار داده شده است.

دانلود کتاب الکتروينک آموزش جاوا اسکريپت

کتاب آموزش کامل جاوا اسکريپت نوشته ديويد فلاناگان توسط دکتر کياني ترجمه شده و به رايگان در اختيار قرار داده شده است. مي توانيد اين کتاب را از لينک زير دانلود کنيد. براي دانلود روي لينک کليک راست کرده و گزينه save target as را انتخاب کنيد.

دانلود کتاب آموزش جاوا اسکريپت
جاوا اسکريپت

دانلود کدهاي جاوا اسکريپت

کدهاي جاوا همه جاي وب سايت ها و بويژه وبلاگها هستند. نيازي به دوباره نويسي آنها نيست و به سادگي با يک جستجوي ساده هر نوع کدي قابل دستيابي است. براي نمونه به سايت جهان جاوا نيز رجوع کنيد. همچنين خانم بيتا ضرابيان نيز زحمت کشيده و کدهاي زيادي را گردآوري کرده که لينک دانلود‌ آن در زير آمده است. براي دانلود روي لينک کليک راست کرده و گزينه save target as را انتخاب کنيد.

دانلود مجموعه کدهاي جاوا اسکريپت

نکته اسکريپت ها توانمنديهاي زيادي دارند ولي عموما نيازي به آنها نيست! مطمئن باشيد.

اسکريپت نويسي

مانند کدنويسي CSS جهت اسکريپت نويسي مي توانيد از اسکريپت نويسي داخلي يا خارجي استفاده کنيد.

چند اسکريپت آماده جهت تمرين

اسکريپت ريزش برف

اسکريپت پرواز پرنده

اسکريپت متن محرک

ويژگي onload

زمانيکه يک صفحه بارگذاري مي شود اولين اتفاق صفحه رويداد onload است. اين رويداد به عنوان يک ويژگي براي کلاس body تعريف شده است. شما مي توانيد با برنامه نويسي براي اين ويژگي قبل از بالا آمدن سايت پيامي را به کاربر مخابره کنيد. براي قبل از بالا آمدن صفحه يک تصوير را به کاربر نمايش مي دهد. احتمالا ديده ايد که برخي سايتها قبل از بالا آمدن پيامي مانند please wait را مخابره مي کنند. آنها از همين ويژگي استفاده مي کنند.

 

تابع init() که در کد بالا فراخواني شده قبلا با دستورات جاوا اسکريپت نوشته شده است. براي نمونه يک تابع به صورت زير کدنويسي مي شود. متن کامل اين اسکريپت را در اسکريپت متن متحرک مي توانيد دانلود کنيد.

 

نمونه اسکريپت هاي ديگر

اسکريپت هاي زير توسط سايت شهرآشوب نوشته نشده و هيچ تضميني براي آنها وجود ندارد.

کد قطره شبنم 1: اين اسکريپت را مي توانيد در هرجاي صفحه قرار دهيد. مشاهده نمونه

 

کد قطره شبنم 2: اين اسکريپت را مي توانيد در هرجاي صفحه قرار دهيد. مشاهده نمونه

 

کد پرواز پروانه: اين اسکريپت را مي توانيد در هرجاي صفحه قرار دهيد. مشاهده نمونه

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

طراحي وب سايت پويا

آنچه تاکنون گفته شد راه کارهاي طراحي قالب کلي صفحه و برقراري ارتباط صحيح با کاربر است. صفحه اي که شما به اين ترتيب طراحي نموده ايد کمک مي کند تا هرگونه اطلاعاتي را که لازم است در اختيار کاربر قرار دهيد. حال فرض کنيد بخواهيد اطلاعاتي از کاربر دريافت کنيد. در اين صورت بايد از روشهاي طراحي وب پويا يا dynamic استفاده کنيد. براي طراحي وب پويا بايد با مفاهيم زير آشنا باشيد:

سيستم مديريت محتوا(CMS)

يک برنامه نرم افزاري روي سرور است که به مدير سايت اجازه مي‌دهد تا محتواي سايت را بدون نياز به طراحي دوباره سايت، تغيير دهد. جوملا و وردپرس دو نمونه cms هستند.
جوملا و وردپرس

جوملا! يک سيستم مديريت محتوا است که در طراحي وب سايت و برنامه هاي تحت اينترنت قابل استفاده است. جوملا يک برنامه open source ميباشد که به طور رايگان دراختيار همه قرار دارد.
وب سرور

يک برنامه است که درخواست URL را از مرورگر دريافت کرده و صفحه HTML را در پاسخ برمي گرداند. صفحات ديناميک مانند فايل هاي PHP بايد در محيط سرور اجرا شوند. آپاچي و IIS دو نمونه وب سرور هستند.
سرور آپاچي

گسترده ترين سرور HTTP است که از زبان PHP پشتيباني مي کند. بزرگترين رقيب سرور آپاچي سرور IIS مايکروسافت است. جهت کار با جوملا از سرور آپاچي (Apache) استفاده مي شود. اين سرور از طريق برنامه XAMP و WAMP قابل نصب است.
WAMP

با نصب اين برنامه رايگان برنامه هايPHP, MySQL, Apachi نيز در محيط Windows نصب شده و امکان استفاده همزمان از آنها فراهم مي شود. نام WAMP مخفف همين چهار واژه است.
زبان PHP

فايل هاي PHP بايد در محيط سرور اجرا شوند. بطور مثال اگر در صفحه مرورگر آدرس http://fa.wikipedia.org/index.php را وارد کنيد يک درخواست به دامنه اي که نامش fa.wikipedia.org است فرستاده مي‌شود، آنگاه سرور صفحه index.phpرا براي شما ميفرستد.
کار با پايگاه داده MySQL

طراحي و مديريت يک وب سايت ديناميک مستلزم داشتن يک آگاهي کار با پايگاه داده است. بهترين و منطعف ترين پايگاه داده براي يک سايت ديناميک پايگاه داده MySQL است. با نصب برنامه WAMP پايگاه داده mysql نيز نصب مي شود.
استفاده از وب فرم ها

براي دريافت اطلاعات از کاربر از برچسب form استفاده مي شود. ويژگيهاي برچسب form و مجموعه کدهائي که درون برچسب form قرار مي گيرد يک وب فرم را مي سازد.

طراحي سايت ديناميک خيلي هم کار پيچيده اي نيست. تنها به کمي تمرين و تلاش بيشتر نياز دارد.