اینترنت به یکی از اصلی ترین منابع درآمد تبدیل شده و هر انسانی میتواند با طراحی سایت و البته گذاشتن زمان و حوصله پای آن، یک سایت زیبا و کامل داشته باشد.
اما طراحی کردن یک سایت کار ساده ای نیست.
در این مطلب آموزش طراحی سایت را برای شما آماده کرده ایم.
مقدمه
اساس آموزش طراحي سايت ارائه شده در اين بخش براساس زبان HTML و اسکريپ نويسي با CSS و Jscript است. توجه کنيد استفاده از زبان هاي PHP و ASP تا حدود زيادي توسط HTML قابل پياده سازي هستند اما از آنجا که هميشه افرادي هستند که بايد تخصص هاي پيچيده داشته باشند تا خبرگي خود را نشان دهند از زبانهاي پيچيده تري غير از HTML سود مي برند.
نيازماديها
1- نرم افزار و محيط طراحي سايت: پياده سازي و اجراي وب سايت با برنامه ساده Notepad قابل انجام است. برخي نرم افزارهاي ديگر مانند مايکروسافت FrontPage نيز وجود دارند که توصيه نمي شود. ما به شما برنامه ماکرومديا DreamWeaver را پيشنهاد مي کنیم.
2- آشنایي کار با گرافيک: درک صحيح از فايلهاي صوتي، تصويري و عکس در طراحي بنرها و انواع افزونه هاي تصويري يا صوتي بسيار الزامي است. برنامه Adobe Photoshop و Xara 3d پيشنهاد ما هستند. در ضما حتما در بخش آشنایی با فرمت فايلهاي صوتي و عکس را مطالعه کنيد.
3- مرورگر يا Browser : نرم افزاري است که توسط آن صفحات وب به اجرا در مي آيند. Internet Explorer و Mozilla Firefox از مهمترين مرورگرها هستند. در سيستم عامل هاي Apple از مرورگر Netscape استفاده مي شود که در ايران کاربردي ندارد. همچنين Google Chrome , Safari و Opera نيز از ديگر مرورگرهاي موجود هستند.
استفاده از نرم افزارهاي طراحي سايت توانمادي مانند DreamWeaver کار طراحي را بسيار ساده مي کند و شايد تصور کنيد بدون يادگيري کدنويسي هم مي توانيد وب سايت طراحي کنيد. اما نرم افزار هميشه آنچه را که مي تواند توليد مي کند نه آنچه که مي خواهيد. بنابراين به جاي آنکه در طراحي در خدمت نرم افزار باشيد با يادگيري کدنويسي نرم افزار را به خدمت بگيريد.
تهيه مقدمات
صفحات وب را با فرمت htm , mht , php , aspx و... مي توان ذخيره کرد. وقتي از اينترنت يک صفحه اينترنتي را ذخيره مي کنيد با فرمت htm ذخيره شده و معمولا يک پوشه با نام همان صفحه اينترنتي در کنار صفحه شما مشاهده خواهد شد. اسکريپت ها، تصاوير و ساير افزونه ها درون اين پوشه هستند.
اين پوشه که با حذف آن صفحه اينترنتي نيز حذف خواهد شد، ما را به مفهوم url مطلق و نسبي مي رساند. ما به عنوان يک کاربر به هنگام بازديد از يک سايت به url آن سايت رجوع مي کنيم. url يعني Uniform Resource Locator که يک آدرس ماحصر به فرد است. براي نمونه شما وقتي به وب سايت ما سر مي زنيد به url ما يعني http://www.Sibgard.ir رجوع مي کنيد. اما ما به آدرس فايلهاي خودمان با استفاده از پرتکل ftp به جاي http رجوع مي کنیم. پس شما هنگاميکه يک طراح سايت هستيد با آدرس فايلها سر و کار داريد نه آدرس هاي اينترنتي.
HTTP:hypertext transfer protocol
FTP:file transfer protocol
مفهوم url مطلق يعني ارجاع به آدرس هاي اينترنتي و url نسبي يعني ارجاع به فايلها. بنابراين زمانيکه شما سايت خود را طراحي مي کنيد هميشه از url نسبي استفاده مي کنيد مگر آنکه بخواهيد به يک سايت ديگر آدرس بدهيد. در بحث ايجاد hyperlink يعني بخش سوم بيشتر توضيح خواهم داد.
براي شروع يک پوشه درست کنيد. اين پوشه فضاي اينترنت است و با بيرون آن هيچ کاري نداريد. صفحه اصلي يا home Page سايت خود را با نامي مانند index.htm در اين پوشه ايجاد خواهيد کرد. در اين پوشه ساير پوشه هاي اصلي سايت خود را ايجاد کنيد. براي مثال يک پوشه براي عکس، يک پوشه براي فايلهاي css و يک پوشه براي صفحات فرعي سايت.
طراحي سايت
براي نمونه تصاويري که مي خواهيد در سايت خود استفاده کنيد را در پوشه img ذخيره کنيد. حال فرض کنيد يک عکس با نام Rose.gif در پوشه img ذخيره کرده ایم. شما اين فايل را با آدرس www.Sibgard.ir/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 خود به خود به انتهاي نام فايل شما اضافه نشود. حال برنامه ذخيره شده را باز کنيد. اين اولين تجربه شما در طراحي سايت را تبريک مي گويم.
4. برچسب Title : اين برچسب در بخش Head قرار مي گيرد و عنوان صفحه روي مروگر يا نوار ابزار را مشخص مي سازد.
با قرار دادن کدهاي زير در بين برچسب هاي Head و نمايش صفحه با مرورگر در نوار ابزار ويندوز و نوار عنوان خود صفحه نام Sibgard را خواهيد ديد.
<title> Sibgard </title>
صفحه را ذخيره کنيد و با اگر همزمان توسط مرورگر نيز باز است دکمه 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 را انتخاب کنيد.
