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

اینترنت به یکی از اصلی ترین منابع درآمد تبدیل شده و هر انسانی میتواند با طراحی سایت و البته گذاشتن زمان و حوصله پای آن، یک سایت زیبا و کامل داشته باشد.

اما طراحی کردن یک سایت کار ساده ای نیست.

در این مطلب آموزش مقدماتی طراحی سایت را برای شما آماده کرده ایم.

مقدمه

اساس آموزش طراحي سايت ارائه شده در اين بخش براساس زبان 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 ما يعني https://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 دارد که براساس مقداري که به آن داده مي شود قابل دستکاري است. براي نمونه کد زير باعث مي شود پس زمينه به رنگ آبي تغيير کند:

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

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

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

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

در برنامه Dreamweaver نيز از تب Modify گزينه Page Properties را انتخاب کنيد. در کادر ظاهر شده از قسمت Encoding يکي از گزينه هاي UTF-8 يا Unicode را انتخاب کنيد.

کلمات کلیدی :

آموزش سایت چگونه سایت طراحی کنیم آموزش مقدماتی طراحی سایت آموزش اولیه طراحی سایت آموزش ساخت سایت آموزش مبتدی ساخت سایت طراحی سایت

دسته بندی : مقالات > طراحی سایت

( 4 کامنت - مشاهده کامنت ها )

رضا

در تاریخ : يكشنبه، 25 مرداد ماه، 1394

سلام. من میخواهم یک وبلاگ ایجاد کنم و آن را پربازدید کنم. بعد از یک سال و یا چند ماه اگر بخواهم آن را به دامنه وصل کنم آیا اطلاعات داخل وبلاگ من پاک میشود یا نه؟

وصل کردن دامنه به سایت یا وبلاگ چه کاری را انجام میدهد؟ یعنی وقتی من دامنه به وبلاگم وصل کنم آن وبلاگ کاملا در اختیار من قرار میگیرد؟

سرزمین دانلود:

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

این کار فقط برای رسمیت دادن به سایت انجام میشود.

مثلا شما وبلاگی دارید با آدرس name.wordpress.com

(فرض کنیم name همان نام مورد نظر شماست)

وقتی وبلاگ شما پربازدید شد یا خواستید رسمی تر باشد، یک نام دامنه میخرید و آن را به وبلاگ خود وصل میکنید. مثلا www.name.com

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

همه سیستم های وبلاگ قابلیت اتصال به دامنه را دارند و راهنمای این کار در تنظیمات همان وبلاگ ها درج میشود.

پاسخ دادن

در تاریخ : جمعه، 23 مرداد ماه، 1394

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

برای ورود به صفحه مدیریت سایت باید شناسه و پسورد وجود داشته باشد. در غیر این صورت هر کسی میتواند وارد بخش مدیریت سایت شما شود.

برای شروع کار ما پیشنهاد میکنیم ابتدا یک وبلاگ داشته باشید که ساخت و مدیریت آن آسان تر است و سایت های زیادی هم وبلاگ رایگان ارائه میدهند.

وقتی وبلاگ شما پربازدید شد و خودتان هم تجربه بیشتری به دست آوردید یک سایت مستقل راه اندازی کنید.

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

ضمن پوزش، امکان معرفی شرکت ها در سایت وجود ندارد. از گوگل کمک بگیرید.

پیشنهاد میکنیم با صرف کمی هزینه بیشتر، از خدمات شرکت هایی که معتبرتر هستند استفاده کنید.

منصور

در تاریخ : دوشنبه، 8 تير ماه، 1394

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

قطعا باید یک سایت فروشگاهی داشته باشید. و سایت شما باید برای فروش فایل طراحی شده باشد.

شرکت های زیادی این خدمات را ارائه میدهند. از گوگل کمک بگیرید.