برای طراحی سایت از کجا باید شروع کرد؟

نوشین خستو ۰۶ اردیبهشت ۱۳۹۶

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

با ما همراه باشید و از طراحی سایت لذت ببرید!

همان‌طور که می‌دانید (HTML (Hyper Text -MARKUP LANGUAGE زبانی ساده و پایه جهت نمایش اسناد متنی برروی مرورگرها است. برای استفاده از این زبان شما نیاز دارید تا نسبت به دستورات از پیش تعریف شده آن آگاهی کافی داشته‌باشید اما قبل از این که دست به کار شوید و طراحی سایت خود را آغاز کنید می‌بایست ویرایشگر متن و یا ویرایشگر کد HTML خود را انتخاب کنید.(NotePad، WordPad،...)

اکنون که ویرایشگر خود را انتخاب کردید وقت آن است که نسبت به خواسته‌های خود دقیق فکر کنید، برای مثال دوست دارید سایت شما چه شکلی باشد؟ به شما پیشنهاد می‌کنیم برای اینکه این کار را بتوانید به خوبی انجام دهید طرح سایت مورد نظر خود و صفحات داخلی آن را بر روی کاغذ بیاورید. این‌کار به تجسم سازی شما کمک بسیاری خواهد کرد.
دوست عزیز درن ظر گرفتن نکات زیر در ابتدای کار برای شما بسیار مفید خواهد بود:

۱- فایل‌ها و تصاویر خود را قرار است چگونه نگه‌داری کنید؟ آیا قرار است همه آن‌ها را در یک فایل/ دایرکتوری نگه‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌داری کنید؟ اگر تنوع فایل‌ها و عکس‌های شما بسیار است به شما پیشنهاد می‌کنیم آن‌ها را در فایل‌هایی مجزا قرار دهید.
۲- فایل‌های HTML شما قرار است با چه پسوندی ذخیره شوند، htm یا html؟ سردرگم نشوید، تفاوت بارزی بین این دو پسوند وجود ندارد فقط بهتر است پیش از هر اقدامی یکی از این دو را انتخاب کنید و در تمام پروژه خود بکار ببرید.
۳- آیا شما قصد دارید هر صفحه‌ی وب سایت شما دارای قالب و شکل منحصر بفرد خود باشد؟ یا نه، دوست دارید تمام صفحات شما از یک قالب یکسان تبعیت کنند؟
۴- منوی اصلی وب سایت شما کجا قرار گیرد بهتر است؟ چپ؟ راست؟ و یا بالا هر صفحه؟

پیش به سوی نوشتن کدهای HTML

حال که ویرایشگر خود را نصب کرده‌اید و فایل‌های خود را ایجاد کرده‌اید زمان نوشتن کدهای HTML است. کار خود را با ایجاد فایلی تحت عنوان index.htm و یا index.html به عنوان صفحه اصلی وب سایت شروع کنید.

لازم است بدانید تمام سرورهای اینترنت فایل index وب سایت‌ها را می‌شناسند. برای مثال زمانی که شما تایپ می‌کنید https://www.setrokate.com سرورها به جستجوی آدرس https://www.setrokate.com/index.html خواهند بود.

حال که فایل index خود را ایجاد کردید و آن را در ویرایشگر خود باز کردید لیست زیر که شامل کدهای پایه HTML است به شما کمک خواهد کرد. برای شروع بهتر است از ترتیب این لیست پیروی کنید.

اگر ویرایشگر شما به طور خودکار این کدها را در فایل شما قرار می‌دهد می‌توانید از این مرحله چشم‌پوشی کنید!

<html>
<head>
<title>My first web page</title>
</head>
<body>
Your web page content goes here
</body>
</html>

کدهای بالا، کدهای بسیار پایه و ساده برای ایجاد یک صفحه وب می‌باشند. برای روشن شدن هر چه بیشتر، هر قسمت را برای شما توضیح خواهیم داد:

- تگ </html><html>: مشخص می‌کند هر آنچه مابین این تگ قرار گرفته است، HTML است.

- تگ </head><head>: بخش هدینگ صفحه شما را مشخص می‌کند.

- تگ </title><title>: همان‌طور که مشاهده می‌کنید این تگ در داخل تگ <head> شما قرار دارد و هر آنچه مابین این تگ نوشته شود همان عنوان وب سایت شما خواهد بود که در قسمت بالایی مرورگر نمایش داده خواهد شد.
و در نهایت

- تگ<body></body>: همان بخشی است که قرار است محتوای وب سایت شما در داخل آن قرار گیرد.

اکنون می‌توانید کدهای زیر را در بخش <body> کدهای خود قرار دهید تا با کدهای پایه HTML بیشتر آشنا شوید.

<center><h1>Welcome to my web page</h1></center>
<hr>
<br> 
<p>Hello and welcome to my first website.<br><br>
<b>These are my favorite links:</b><br>
<ul>
<li><a href="https://www.setrokate.com">setrokate</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
</p>

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

- تگ <center>: این تگ به مرورگر خواهد گفت هر آنچه مابین این تگ است را در وسط صفحه وب سایت قرار بده.

- تگ <h1>: به مرورگر خواهد گفت متن داخل این تگ را به بزرگترین اندازه استایل‌های تعریف شده برای هدینگ‌ها نمایش بده.

- تگ <hr>: کد HTML یی است جهت نمایش یک خط افقی در صفحه وب.

- تگ <br>: که همانند دکمه Enter بر روی صفحه کیبورد شما عمل می‌کند و در نتیجه یک فاصله بین محتوای متن شما خواهد انداخت.

- تگ <p>: نام این تگ کوتاه شده کلمه paragraph است و به شما امکان می‌دهد متن خود را همانند پاراگراف و مجزا از هم نمایش دهید.

- تگ <b>: نام این تگ کوتاه شده کلمه Bold است که به مرورگر خواهد گفت هر کلمه‌ای که مابین این تگ نوشته شده‌است را به صورت پر رنگ نمایش دهد.

- تگ <ul>: مشخص‌کننده لیست است و در آن هر آیتم لیست با تگ <li> نمایش داده‌شده‌است.

در نهایت

- تگ <a href="/">: روشی است برای ایجاد لینک به مکان مورد نظر ما. در کد بالا، ما در لیست خود لینک‌های ستروکیت و گوگل را قرار داده‌ایم.

مشاهده وب سایت

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

مرورگر کامپیوتر خود را باز کنید و مکان صفحه وب را در آن تایپ کنید. برای مثال اگر شما فایل index.htm یا index.html را در فولدری تحت عنوان ”website” قرار داده‌اید و آن فولدر در درایو C شماست، کافی است تایپ کنید: c:\website\index.htm یا c:\website\index.html (برای کامپیوترهای IBM). اگر از ویندوز مایکروسافت یا اپل استفاده می‌کنید با دوبار کلیک بر روی فایل وب سایت نیز می‌توانید آن را در مرورگر خود باز کنید.

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

نمایش تصاویر وب سایت

اکنون که سایت ابتدایی خود را ایجاد کرده‌اید وقت آن است تا با کمک عکس‌ها وب سایت خود را آراسته و زیبا کنید.

متد اول:

استفاده از عکس‌های موجود در وب سایت دیگر با کمک کد زیر:

<img src="http://www.setrokate.com/logo.jpg" alt="logo" />

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

متد دوم:

متد جایگزین و البته متد پیشنهادی ما به شما در کد زیر آورده شده‌است:

<img src="/mypic.gif" alt="My picture">

یا اگر شما در فولدر سایت خود فولدر images را ایجاد کرده‌اید:

<img src="/images/mypic.gif" alt="My picture">

اضافه کردن عکس به وب سایت بهترین راه برای جلوه بخشیدن به سایت شماست. توجه داشته باشید که از بکار بردن عکس‌های رنگ و رو رفته و یا عکس‌هایی که حجم بالایی دارند، پرهیز کنید. به یاد داشته باشید که زمان متوسطی که هر کاربر صرف می‌کند تا از وب سایت شما دیدن نماید در حدود ۱۰ ثانیه است بنابراین مطمئنا پارامتر سرعت، پارامتری مهم برای شما خواهد بود.

سخن آخر در این مورد آن‌که، هرگز در صفحه اصلی وب سایت خود عکس‌های حجیم بکار نبرید. عکس‌های حجیم سرعت سایت شما را به تدریج کند خواهند کرد و این امر کاربر را وادار به ترک سایت شما خواهد کرد.

اگر شما دوست دارید عکسی را حتماً در وب سایت خود نمایش دهید و آن عکس دارای حجم بالایی است بهتر است شما از عکس‌های به اصطلاح بندانگشتی (thumbnail) استفاده کنید. این عکس‌ها درواقع سایز کوچکتر عکس موردنظر شما هستند که اگر کاربری علاقه داشت سایز اصلی عکس را مشاهده کند می‌تواند بر روی سایز کوچک آن کلیک کند و عکس بزرگ‌تر را ببیند.

اگر نیاز به یک ویرایشگر خوب و رایگان دارید پیشنهاد ما به شما ویرایشگر تصویر GIMP است.

مسیردهی‌ها را یاد بگیرید

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

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

اگر شما بخواهید به فایلی دسترسی داشته‌باشید که آن فایل درون یک فولدر در روت یا شاخه اصلی وب سایت شماست، کافی است نام فولدر آن و سپس نام فایل را ذکر کنید.
به عنوان مثال اگر شما قصد دارید که عکس mypic.gif را که در فولدر images شماست نمایش دهید، آدرس زیر را تایپ کنید:

images/mypic.gif

در آدرس‌دهی بالا توجه کنید که ابتدا نام فولدر آمده‌است و سپس نام فایل یا عکس موردنظر.

اما اگر می‌خواهید به عکس mypic.gif که در خارج از روت وب سایت شماست دسترسی داشته‌باشید کد زیر را بکار ببرید:

../mypic.gif

در مثال بالا، (..) به مرورگر می‌گوید که شما می‌خواهید یک مرحله از روت وب سایت خود به عقب بازگردید.

اگر شما می‌خواهید یک مرحله به عقب برگردید و سپس وارد دایرکتوری/فولدر دیگری شوید شما ابتدا می‌بایست با /.. یک مرحله عقب بیایید و سپس نام دایرکتوری را ذکر کنید. همانند زیر:

../other/mypic.gif

این قانون برای هرچند دایرکتوری که نیاز دارید به عقب برگردید پابرجا خواهد بود. به عنوان مثال اگر شما باید برای دسترسی به عکسی نیاز است به تعداد سه دایرکتوری به عقب برگردید و سپس وارد فولدر images شوید به صورت زیر باید عمل کنید:

../../../image/mypic.gif

حساسیت به کوچک و بزرگ بودن حروف

بسیار مهم است که بدانید بیشتر سرورهای اینترنت، لینوکسی و یا یونیکسی هستند و این دو سیستم عامل به حروف بزرگ و کوچک حساس هستند و در صورتی که این قاعده را رعایت نکنید سرور هرگز نمی‌تواند فایل شما را پیدا کند.

ما پیشنهاد می‌کنیم،‌نام صفحات وب، تصاویر و فایل‌های خود را همیشه با حروف کوچک تایپ کنید.

بارگذاری وب سایت

بارگذاری فایل‌های وب سایت بر روی اینترنت یکی از پیچیده‌ترین مراحل برای اکثر کاربران است.

برای این که وب سایت شما برای عموم مردم قابل رویت باشد شما باید فایل‌های خود را بر روی وب سرور بارگذاری کنید.

از آنجایی که روش‌های متعددی برای این کار تعریف شده‌است، ما تنها یکی از معمولترین روش‌ها را برای شما توضیح خواهیم داد.

شرکت‌های ارائه دهنده خدمات اینترنتی (ISP) و میزبان وب (هاست) عموما سرویس انتقال فایل FTP را برای کاربران خود فراهم آورده‌اند که با کمک آن کاربران می‌توانند فایل‌های خود را از کامپیوتر خود بر روی سرور انتقال دهند.

برای این کار دو امکان برای کاربران وجود دارد:
- برنامه FTP موجود در ویندوز
- دانلود برنامه FTP

استفاده از یکی از این ابزارها به شما این امکان را می‌دهد تا فایل‌های خود را به وب سرور انتقال دهید.

به محض آن که وارد محیط سرور شوید، باید فایل‌های وب سایت خود را داخل فولدر/دایرکتوری تحت عنوان public_html بارگذاری کنید.

اگر شما از FTP ویندوز استفاده می‌کنید، با نوشتن عبارت "cd public_html" ویا "dir" می‌توانید بفهمید نام فولدری که باید فایل‌ها در آن بارگذاری شوند چیست. زمانی که آن فولدر را پیدا کردید می‌توانید فایل‌های html را به آن انتقال دهید تا بر روی اینترنت قابل مشاهده باشد.

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

انتخاب نام دامنه

می‌توانید از طریق زیر دامنه مورد نظر خود را جستجو کنید و به راحتی ثبت نمایید.

شرکت‌های میزبانی وب(هاست)

شرکت‌های میزبانی وب سایت در‌واقع شرکت‌هایی هستند که وظیفه نگه‌داری فایل‌های وب سایت شما و یا شرکت شما را بر عهده دارند.
زمانی که می‌خواهید شرکتی را جهت میزبانی وب انتخاب کنید، نکات زیر را درنظر بگیرید:

- ثبت دامنه: بررسی کنید که شرکت مذکور به شما اجازه دهد تا دامنه ای را همانند www.setrokate.com برای خود ثبت کنید و بررسی کنید اگر چنین خدماتی ارائه می‌دهند، هزینه آن چه میزان است.

- هدایت ایمیل‌های دریافتی: بررسی کنید آیا آن شرکت، امکان هدایت ایمیل‌های دریافتی را برای شما فراهم کرده‌است؟ با این امکان شما می‌توانید در صورتی که ایمیل‌های دیگری دارید (username@yourdomain.com) آن‌ها را بصورت اتوماتیک به ایمیلی دیگر ارجاع دهید.

- پشتیبانی: بررسی کنید چند ساعت در طول روز پشتیبانی تلفنی دارند.

- شرکت در حال تغییر: سیاست‌ها و خط مشی آن‌ها را به هنگام تغییر شرکت در صورت لزوم بررسی کنید.

- آمار سایت: اگرچه یک ضرورت به حساب نمی‌آید اما ویژگی بسیار جالبی برای شما خواهد بود. اگر شرکتی چنین ویژگی را در اختیار شما قرار دهد در‌واقع شما قادر خواهید بود وب سایت خود را زیر نظر داشته باشید و از درستی عملکرد آن مطمئن شوید.

-اکانت تجاری: برخی شرکت‌های میزبانی وب خدماتی از قبیل واگذاری نمایندگی و داشتن اکانت تجاری را برای کاربران خود درنظر گرفته‌اند. بهره‌گیری از این خدمات به رشد کسب و کار شما نیز کمک شایانی خواهد کرد.

- محدودیت پهنای باند: حتماً بررسی کنید که شرکت مذکور سیاست سختگیرانه‌ای برای محدود کردن پهنای باند خود نداشته‌باشد. در غیر این صورت ممکن است میزان ترافیکی که سایت شما پتانسیل دریافت آن را دارد، محدود کند. توجه داشته باشید که تمامی شرکت‌ها دارای محدودیت‌هایی بر روی پهنای باند خود هستند اما بررسی کنید محدودیت‌های آن‌‌ها نامعقول نباشد و به کسب و کار شما آسیبی نرساند.

- افزونه‌های صفحه اصلی: منظور از این افزونه‌ها، افزونه‌هایی همانند Cpanel می‌باشد با کمک این افزونه‌ها کاربران قادر خواهند بود مدیریت فایل‌های خود را بر روی سرور انجام دهند. بررسی کنید که شرکت میزبان وب انتخابی شما این افزونه‌ها را پشتیبانی می‌کند.

-اسکریپت‌های CGI,Perl و PHP: ممکن است شما در ابتدای امر طراحی سایت خود نخواهید از این اسکریپت‌ها استفاده کنید اما حتماً بررسی کنید که آیا آن شرکت این اسکریپت‌ها را پشتیبانی می‌کند یا خیر. اسکریپت‌های اشاره شده به شما امکان راه‌اندازی شمارنده، بوردهای پیام و بسیاری دیگر از ویژگی‌های مختلف را خواهند داد.

فراتر از اصول اولیه

طراحی سایت بسیار عمیق‌تر از این اصول اولیه‌ای است که در این مقاله به آن‌ها اشاره شد. به محض آنکه به یک درک مناسب از HTML و FTP رسیدید با ید کم کم به سراغ CSS بروید تا بتوانید قالب‌بندی درستی را در صفحات وب خود ارائه کنید. چنانچه می‌خواهید وب سایت شما از ویژگی‌هایی همانند انجمن‌های گفتگو، آمار بازدیدکنندگان، ایمیل آنلاین برخوردار باشد باید به سراغ یکی از زبان‌های برنامه نویسی همانند PHP نیز بروید.
اگر این اصول اولیه‌ای که برای شما گفته شد برای شما گیج‌کننده و یا حتی خسته‌کننده است، اصلا نگران نباشید! سیستم‌های مدیریت محتوا، همانند جوملا و وردپرس می‌توانند این فرآیند را برای شما آسانتر کنند.
فراموش نکنید که این سیستم‌های مدیریت محتوا عموما با قالب‌ها و پلاگین‌های خود به شما امکان شخصی سازی سایت را می‌دهند، اما اگر بخواهید بدرستی این شخصی سازی را انجام دهید حتماً باید نسبت به اصول اولیه طراحی وب سایت آگاهی کافی را داشته‌باشید.

چنانچه پرسشی دارید لطفا در بخش نظرات با ما مطرح کنید.