Writeage

آموزش طراحی وب سایت از پایه - قسمت اول


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

design-web-00.jpg


این دوره آموزسی بر اساس کتاب Build Your Own Website The Right Way Using HTML & CSS از انتشارات Sitepoint  می باشد.

چه کسانی باید این کتاب را بخوانند؟

این کتاب برای کسانی مفید است که از طراحی وب سایت اطلاعی ندارند و می خواهند تازه به جمع طراحان سایت ملحق شوند پس مسلما از ساده ترین نکات آغاز می شود .
این کتاب شما را با HTML  و CSS آشنا میکند و راه را برای ساخت یک وب سایت استاندارد به شما نشان می دهد. ذکر این نکته لازم است که ترجمه خط به خط کتاب ارائه نمی شود و چیزی که به عنوان برداشت شخصی من یک طراح وب سایت (بهزاد علی بیگی) از کتاب می باشد در قالب مقالات آموزشی برای شما بیان خواهد شد.
سعی می کنم در هر مقاله حداکثر یک فصل از کتاب را آموزش دهم و مسلما با بازخوردی که از خوانندگان خواهم گرفت کیفیت کار و هم چنین وسعت کار را افزایش خواهم داد.

فصل اول:
Setting up Shop

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

1- وسیلۀ ابتدایی برای ویرایش فایل های متنی که در واقع صفحه وب شما را شامل میشود
2- یک مرورگر (web browser) برای دیدن صفحات وب در آن
3- فرستادن صفحه وب سایت به محیط اینترنت با استفاده از ftp client

چون اکثر کاربران ما درایران از ویندوز استفاده می کنند پس ابزارهای موجود در ویندوز را بررسی خواهیم کرد.

ابزارهای اولیه در ویندوز:

1- ادیت کردن متن : برای ادیت کردن متن در ویندوز می توانید از Notepad استفاده نمایید. این متن، همان صفحۀ وب است .
برای دسترسی به این برنامه در محیط ویندوز مسیر زیر را طی کنید:

Start > All Programs > Accessories > Notepad
design-web-01.jpg
2- دیدن خروجی فایل : برای دیدن کار خروجی می بایست از مرورگر و یا browser استفاده کنیم. مرورگرهای متفاوتی وجود دارد که بحث آنها بسیار مفصل است ولی در محیط ویندوز مرورگر Internet Explorer در دسترس است.
شما می توانید آن را در دسکتاپ خود و یا Quick Launch ویا فولدر برنامه ها و یا در منوی start پیدا کنید.

design-web-02.jpg

3- برای فرستادن صفحه به محیط وب از دستور ftp استفاده خواهیم کرد که در ادامه به آن اشاره میکنم.

ابزارهای دیگر:

برای ادیت کردن صفحات خود می توانید از برنامه NoteTab استفاده کرد .مزیت استفاده از آن اینست که می توانید تب های مختلفی را برای صفحات مختلف باز کنید و بعد از بستن هم در حافظه ش می ماند و برای دفعه بعد هم باز می ماند.

design-web-03.jpg
 آن را از این آدرس دانلود نمایید. 

همچنین مرورگرهای گوناگونی وجود دارد که استفاده از آن ها را در کنار Internet Explorer توصیه می کنم. اما  در اینجا از یکی از بهترین آنها را نام می برم : firefox
 
design-web-04.jpg

اما همه عناصر که متن نیستند شما برای ویرایش عکس هم به برنامه هایی نیاز دارید که می توانید از برنامه های زیر استفاده کنید:
Adobe photoshop
Adobe fireworks
Picasa
توصیه من استفاده از فتوشاپ است ، نگران نباشید یادگیری آن برای کاربرد وب آسان است.

مرحله آخر - درست کردن مکانی است برای فایل های ساخته شده :

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

Right click > new > folder

سپس نام وب سایت را انتخاب نمایید .حالا یک فولدر دارید که فایل اصلی به همراه تصاویر و css ,html ,..... را داخل آن قرار می دهید.

نگران نباشید با هم پیش میریم و به همه موارد خواهیم رسید.

در فصل بعد شما اولین وب سایت خودتان را می سازید.

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


  • آموزش طراحی سایت از پایه - قسمت دوم
  • آموزش طراحی سایت از پایه - قسمت سوم
  • آموزش طراحی سایت از پایه - قسمت چهارم
  • آموزش طراحی سایت از پایه - قسمت پنجم
  • آموزش طراحی سایت از پایه - قسمت ششم
  • آموزش طراحی سایت از پایه - قسمت هفتم
  • آموزش طراحی سایت از پایه - قسمت هشتم
  • آموزش طراحی سایت از پایه - قسمت نهم
  • آموزش طراحی سایت از پایه - قسمت دهم


English Excerpt: By following this step-by-step guide, you'll find that the training wheels will be off before you know it. You'll start from scratch, learning which basic tools you need to get started (text editors, web browsers and FTP clients), and by the end of the book you'll be ready to add some real flair to your fully functioning web site.
نويسنده : بهزاد
در تاريخ : June 19, 2010 9:41 PM
آدرس اين مطلب : http://www.writeage.com/designing_web_site_from_scratch.html

نظرات نوشته شده :

آی‌سهیل  نوشته است:  

سلام؛
ایده‌ای بس جالبیست؛ ممنونیم از شما.
من کتاب (PDF) فوق را مطالعه کردم، واقعاً جذاب در عین آموزنده‌ست.
موفق‌باشید.

June 20, 2010 12:14 AM

امیر  نوشته است:  

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

June 20, 2010 10:34 AM

انصاری  نوشته است:  

من واقعا به همچین چیزی نیاز دارم.اگه بشه واسهPHP هم همچین کاری بکنید خیلی خوبه .

June 20, 2010 10:42 AM

مژگان  نوشته است:  

هورااااااا...عالیه ممنون...ادامه بدین...دستتون درد نکنه

June 20, 2010 11:10 AM

آریا  نوشته است:  

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

June 20, 2010 12:22 PM

saeed  نوشته است:  

ممنون

June 20, 2010 1:35 PM

TT  نوشته است:  

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

June 20, 2010 2:21 PM

شرفی  نوشته است:  

با تشکر از شما

June 20, 2010 3:23 PM

محمدرضا  نوشته است:  

سلام، خيلي خوبه لطفاً ادامه بديد ...
از ارسال ايميلهاتون هم خيلي ممنون

June 20, 2010 3:41 PM

mohammad  نوشته است:  

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

June 20, 2010 4:05 PM

majid  نوشته است:  

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

باسپاس فراوان
منتظر فصل بعدی و بعدی ها هم هستیم

June 20, 2010 4:57 PM

میلاد  نوشته است:  

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

June 20, 2010 6:14 PM

morteza  نوشته است:  

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

June 20, 2010 7:10 PM

محسن  نوشته است:  

سلام دوست عزیز..
می شه لینکی از خود کتاب اصلی هم برای دانلود بذارید؟

June 20, 2010 10:20 PM

موج  نوشته است:  

از ارسال ايميلهاي پر محتوا و آموزنده شما بسيار ممنونم

June 21, 2010 12:37 AM

بهزاد علی بيگی  نوشته است:  

با تشكر از همه دوستانی كه نظر دادند
مسلما اين سری آموزش ادامه خواهد يافت و آن دسته از دوستانی كه به دنبال مطالب متوسط و پيشرفته تری هستند كمی صبر كنند خيلی زود به آن ها هم خواهيم رسيد

June 21, 2010 12:45 AM

amir  نوشته است:  

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

June 21, 2010 8:43 AM

sara  نوشته است:  

خیلی عالی بود فقط خواهشا ادامه بدین...واقعا ممنووووووووووووونم

June 21, 2010 3:42 PM

رهام  نوشته است:  

راجب نصب ftp client توضیح بدید و چی هست ممنونم

June 22, 2010 12:48 PM

paeez  نوشته است:  

بهزاد جون مطالب بسیار مفید و جالب بود کارت عالیه امیدوارم همینطور ادامه بدی
موفق باشی
پاییز

June 23, 2010 11:08 AM

MASOUD  نوشته است:  

لطفا ادامه بدین...

June 23, 2010 9:06 PM

تبسم  نوشته است:  

ممنون مهندس.

بقیه ش کجاست؟

June 25, 2010 11:29 AM

ali  نوشته است:  

بد نبود اگه ادامه بدید

June 27, 2010 5:59 PM

part gah  نوشته است:  

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

June 28, 2010 1:47 PM

shakhs  نوشته است:  

سلام

بسیار آموزندست. لطفا ادامه بدین!

July 1, 2010 1:32 PM

setareh  نوشته است:  

سلام ممنون از آموزشتون اما میشه سریعتر آموزش بدین ممنون تر میشیم

July 2, 2010 11:45 AM

webdesign24  نوشته است:  

با سلام
ممنون از وب بسیار جالب و قشنگتون:)
اطلاع رسانی خوبی دارید اگه میشه ادامه بدید...
ممنون.

July 5, 2010 10:54 AM

paadeshah  نوشته است:  

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

July 6, 2010 2:47 AM

setare89  نوشته است:  

سلام مطلب خیلی خوبی بود امیدوارم ادامه بدین .

July 7, 2010 8:58 AM

ژنوس  نوشته است:  

مرسی
مطلبتون خیلی به دردم می خوره ممکنه حتما ادامه بدین و به همراه آموزشتون منابع راهنما هم معرفی کنید؟(برای یه دانشجوی مهندسی)
بازم مرسی

July 8, 2010 12:49 AM

محسن   نوشته است:  

واقعا عالی وجذاب بود حالا ادامش کجاست

July 8, 2010 4:28 PM

امیر  نوشته است:  

بهزاد جان ، تشکر

July 9, 2010 1:47 AM

اكرم   نوشته است:  

ممنون ميشم اگه ادامه بدين

July 9, 2010 9:15 PM

milad  نوشته است:  

سلام
باتشکر از شما واقعا جالب و آموزنده است لطفا ادامه بدین

July 11, 2010 9:03 AM

مینا  نوشته است:  

سلام
بسیار آموزنده بود، منتظر مقالات جدید شما هستم.
ممنون

July 12, 2010 11:35 AM

susan  نوشته است:  

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

July 21, 2010 11:18 PM

سینا  نوشته است:  

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

August 15, 2010 10:32 AM

آموزش طراحی سايت - قسمت دوم  نوشته است:  

سلام دوستان برای ديدن آموزش طراحی سايت قسمت دوم روی لينك بالا كليك نماييد

September 1, 2010 1:19 PM

meisam  نوشته است:  

مرسی ولی برای من که زیاد ساده نیست

October 17, 2010 2:13 PM

جمال  نوشته است:  

با سلام.
مختصر و مفید بود.امیدوارم این کارو ادامه بدین.

April 7, 2011 3:40 PM

امید  نوشته است:  

سلام داش /ماکه سرمون گیچ رفت بااین نوشته های شمابه هرحال ممنون

July 22, 2011 9:57 AM

دانیال  نوشته است:  

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

August 9, 2011 6:08 AM

پرديس  نوشته است:  

سلام . واقعا ممنونم.عالي بود ، فقط يك چيزي من نتونستم برنامه ي (ورد پد) را دانلود كنم ، من برنامه ي ورد پد را در كامپيوترم دارم ولي اون طوري كه عكس اش را گذاشته ايد نيست . ميشه لطفا بگيد بايد چه طوري اين برنامه را دانلود كنم؟

September 15, 2011 1:37 PM

بهزاد  نوشته است:  

سلام
احتیاجی به دانلود نیست از همون نوت پد ویندوز استفاده نمایید

September 15, 2011 3:53 PM

mansour  نوشته است:  

salam vaghan mamnoonam! very good

October 22, 2011 1:48 AM

mehry  نوشته است:  

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

November 11, 2011 9:45 AM

مهردا  نوشته است:  

مرسی !! دیدم نـــامردیه کــه از این مطلب استــفاده کنم امـــا نگــــم دستتون درد نکـــنه ..

January 20, 2012 9:08 PM

hami  نوشته است:  

ba salam
az mataleb mofideton mamnonam.

January 22, 2012 12:52 PM

shervin  نوشته است:  

با با من گفتم که زدی از پایه سایت شما په خوبه ولی خیلی پیچیدس داش برا ابتدایی ها خوب نیست مرسی به هر حال :(

January 26, 2012 11:04 PM

masih  نوشته است:  

کاش بسیار زودتر با سایت شما آشنا می شدم .من که لذت بردم . دوست دارم باشما آشنا شوم . شاید بتوانم جبران کنم تشکر

March 29, 2012 2:40 PM

علیرضا  نوشته است:  

خیلی ممنون.

May 10, 2012 9:52 PM