آموزش کامل طراحی سایت - درس نخست

مقدمه 

نیازمندیها

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 را آغاز خواهیم کرد.

با تشکر:نویسنده علی غلامیان میراب