اينترنت به يکي از اصلي ترين منابع درآمد تبديل شده و هر انساني ميتواند با طراحي سايت و البته گذاشتن زمان و حوصله پاي آن، يک سايت زيبا و کامل داشته باشد.
اما طراحي کردن يک سايت کار ساده اي نيست.
در اين مطلب آموزش مقدماتي طراحي سايت را براي شما آماده کرده ايم.
مقدمه
اساس آموزش طراحي سايت ارائه شده در اين بخش براساس زبان HTML و اسکريپ نويسي با CSS و Jscript است. توجه کنيد استفاده از زبان هاي PHP و ASP تا حدود زيادي توسط HTML قابل پياده سازي هستند، اما از آنجا که هميشه افرادي هستند که بايد تخصص هاي پيچيده داشته باشند تا خبرگي خود را نشان دهند از زبانهاي پيچيده تري غير از HTML سود مي برند.
نيازمندي ها
1- نرم افزار و محيط طراحي سايت: پياده سازي و اجراي وب سايت حتي با برنامه ساده Notepad قابل انجام است. برخي نرم افزارهاي ديگر مانند مايکروسافت FrontPage نيز وجود دارند. ولي ما به شما برنامه DreamWeaver را پيشنهاد مي کنيم.
2- آشنايي کار با گرافيک: درک صحيح از فايلهاي تصويري و عکس، در طراحي بنرها و انواع افزونه هاي تصويري يا صوتي بسيار الزامي است. برنامه Adobe Photoshop و Xara 3d پيشنهاد ما هستند.
3- مرورگر يا Browser : نرم افزاري است که توسط آن صفحات وب به اجرا در مي آيند. Internet Explorer و Mozilla Firefox از مهمترين مرورگرها هستند. همچنين Google Chrome , Safari و Opera نيز از ديگر مرورگرهاي موجود هستند.
استفاده از نرم افزارهاي طراحي سايت توانمندي مانند DreamWeaver کار طراحي را بسيار ساده مي کند و شايد تصور کنيد بدون يادگيري کدنويسي هم مي توانيد وب سايت طراحي کنيد. اما نرم افزار هميشه آنچه را که مي تواند توليد مي کند، نه آنچه که مي خواهيد. بنابراين به جاي آنکه در طراحي در خدمت نرم افزار باشيد با يادگيري کدنويسي نرم افزار را به خدمت بگيريد.
تهيه مقدمات
صفحات وب را با فرمت htm , mht , php , aspx و... مي توان ذخيره کرد. وقتي از اينترنت يک صفحه اينترنتي را ذخيره مي کنيد با فرمت htm ذخيره شده و معمولا يک پوشه با نام همان صفحه اينترنتي در کنار صفحه شما مشاهده خواهد شد. اسکريپت ها، تصاوير و ساير افزونه ها درون اين پوشه هستند.
اين پوشه که با حذف آن صفحه اينترنتي نيز حذف خواهد شد، ما را به مفهوم url مطلق و نسبي مي رساند. ما به عنوان يک کاربر به هنگام بازديد از يک سايت به url آن سايت رجوع مي کنيم. url يعني Uniform Resource Locator که يک آدرس منحصر به فرد است.
براي نمونه شما وقتي به وب سايت ما سر مي زنيد به url ما يعني http://www.SarzaminDownload.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.SarzaminDownload.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 خود به خود به انتهاي نام فايل شما اضافه نشود. حال برنامه ذخيره شده را باز کنيد. اين اولين تجربه شما در طراحي سايت را تبريک مي گويم.
4. برچسب Title : اين برچسب در بخش Head قرار مي گيرد و عنوان صفحه روي مروگر يا نوار ابزار را مشخص مي سازد.
با قرار دادن کدهاي زير در بين برچسب هاي Head و نمايش صفحه با مرورگر در نوار ابزار ويندوز و نوار عنوان خود صفحه نام SarzaminDownload را خواهيد ديد.
<title> SarzaminDownload </title>
صفحه را ذخيره کنيد و با اگر همزمان توسط مرورگر نيز باز است دکمه F5 را فشار دهيد تا بروزرساني شود. يا اگر مرورگر را بسته ايد دوباره صفحه را باز کنيد.
ويژگيها و ارزش ها
هر برچسب يک سري ويژگي يا Attribute دارد که براساس مقداري که به آن داده مي شود قابل دستکاري است. براي نمونه کد زير باعث مي شود پس زمينه به رنگ آبي تغيير کند:
<body bgcolor="#0000FF">
نکته: ارزش ها هميشه درون يک زوج گيومه قرار مي گيرند.
فارسي کردن صفحه
اگر صفحه فارسي مي سازيد حتما بايد به مرورگر اعلام کنيد. اين دستور بايد به مرورگر اعلام شود نه کاربر. بنابر اين در بخش Head کدهاي زير را وارد کنيد:
آموزش طراحي سايت
اگر براي کدنويسي از Notepad استفاده مي کنيد به هنگام ذخيره يک صفحه فارسي در تب Encoding يکي از گزينه هاي UTF-8 يا Unicode را انتخاب کنيد.
در برنامه Dreamweaver نيز از تب Modify گزينه Page Properties را انتخاب کنيد. در کادر ظاهر شده از قسمت Encoding يکي از گزينه هاي UTF-8 يا Unicode را انتخاب کنيد.
منبع: سرزمين دانلود