آموزش طراحی وب سایت و کدنویسی (از ابتدا تا انتها)

دوشنبه, ۲م آذر , ۱۳۸۸ | ۲۷۰ دیدگاه

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

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

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


این خود آموز از چهار بخش به صورت زیر تشکیل شده است :

قسمت اول : گرافیک وب سایت ( طراحی یک طرح پیش فرض گرافیکی )

قسمت دوم : برش طرح ( برش دادن تصاویر برای استفاده در کد ها و صفحات وب )

قسمت سوم : کدهای html ( نوشتن کدهای html و تعیین ساختار صفحه وب )

قسمت چهارم : کدهای css ( شکل دهی کدهای html با استفاده از کدهای css )

قسمت اول – گرافیک وب سایت


مرحله اول – به کجا خواهیم رسید ؟

 

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

در زیر نمایی نهایی صفحه وب مورد نظر را می بینید.

مرحله دوم – آماده شدن :
به چه چیزهایی احتیاج دارید ؟

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

  • نرم افزار فتو شاپ Photoshop یا ویرایشگرهای تصویر مشابه
  • نرم افزارهای تولید کد مانند Dreamweaver
  • آشنایی مقدماتی با کدهای html
  • آشنایی مقدماتی با کدهای Css
  • استفاده از ویرایشگرهای استاندارد ( IE+7 , FireFox ) – در این خودآموز از FireFox استفاده شده است

در صورت نیاز می توانید به وب سایت W3Schools مراجعه نمایید و نکات آموزنده بسیاری را فرا بگیرید.

ساختار و لایه ها

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

header, content, sidebar and footer

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

مرحله سوم – شروع به کار :

خوب برای شروع به محیط نرم افزار فتوشاپ می رویم و یک برگه با عرض و طول ۱۰۰۰px در ۱۲۰۰px ایجاد می کنیم . در اینجا سعی شده عرض مورد نظر بیشتر از عرض واقعی وب سایت در نظر گرفته شود تا محیط باز تری برای کار وجود داشته باشد و در انتها این برگه به اندازه واقعی خود در خواهد آمد.

اگر با محیط نرم افزار فتوشاپ آشنایی کافی داشته باشید کار با این خود آموز برای شما بسیار راحت خواهد بود. برای سهولت در کار از خط کش و خط های کمکی استفاده میکنیم . مقیاس خط کش را برای Pixel تنظیم کنید (واحد اندازه گیری در طراحی وب سایت Pixel است) .

طبق تصویر دو خط کمکی عمودی یکی در اندازه ۱۰۰px و دیگری در ۹۰۰px ایجاد کنید . در حال حاضر عرض وب سایت ۸۰۰px در نظر گرفته شده است ( بین خط کمکی روی ۱۰۰px و خط کمکی روی ۹۰۰px ). بعد ازایجاد این دو خط کمکی یک خط دیگر در اندازه ۶۳۰px ایجاد کنید. در حال حاضر ۳ خط کمکی در این برگه ایجاد شده است. در صورت نیاز می توانید با کشیدن خط ها و Drag کردن آنها بر روی خط کش آنها را پاک کنید.

مرحله چهارم – Header :

پس از نشانه گذاری مرزهای وب سایت در مرحله قبل به قسمت Header وب سایت می رسیم که یکی از مهمترین اجزاء تشکیل دهنده هر وب سایت است. شعار تبلیغاتی ، لوگو و تصاویر تبلیغاتی وب سایت شما در این قسمت قرار خواهد گرفت .با استفاده از ابزارها ( کلید میانبر U ) یک مستطیل به ارتفاع ۱۷۰ px و با رنگ #۲۳b6eb ایجاد کنید . سعی کنید که از نوار ابزار فتوشاپ برای اندازه گذاری دقیق اجزاء و همچنین چینش دقیق اجزاء در صفحه استفاده کنید .

یک مستطیل دیگر مانند تصویر روی مستطیل اولیه خود ایجاد کنید به ارتفاع ۳۰px و رنگ #۵d5a5a ( مستطیل تیره رنگ در بالای header )

مرحله پنجم – Navigation Bar – نوار منوها :

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

استفاده از گرادیانت در طراحی

پس از ایجا د این مستطیل ، گرادیانتی با استفاده از رنگ #e2e3e4 تا #bebdbd با زاویه ۹۰ درجه ایجاد کنید.

مرحله ششم – Footer :

 

برای ایجاد footer نیز از یک مستطیل با رنگ #۵d5a5a استفاده کنید. در اینجا ارتفاع ۵۰px کافیست. یک footer خوب و استاندارد نقش بسیار ارزنده ای در بالا بردن دسترسی پذیری وب سایت و حتی زیبایی آن دارد و یکی از اجزای مهم یک وب سایت است .

مرحله هفتم – Logo – لوگو :

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

چگونه میتوان یک لوگوی حرفه ای و تاثیر گذار ساخت؟

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

  1. Font: Myriad Pro
  2. Style: Bold
  3. Size:60px
  4. Color:#36809a

مرحله هشتم – tagline:

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

  1. Font: Arial
  2. Style: Bold
  3. Size:30pt
  4. Color:#e4dfdf

مرحله نهم – منو ها :

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

  1. Font: Arial
  2. Style: Bold
  3. Size: 30pt
  4. Color: #676666

مرحله دهم – محتویات و نوشته ها :

می توان با توجه به تصاویر و با استفاده از مشخصات زیر محتویات و نوشته ها را نیز در جای مناسب قرار داد تا طرحی کلی و پیش فرض از صفحه وب برای ادامه کار بدست آید.این نکته در اینجا قابل ذکر است که ایجاد یک طرح گرافیکی قبل از شروع کد نویسی یک وب سایت خوبیهای فراوانی دارد که به چند نکته از اشاره می شود ایجاد یک نقشه راه برای اینکه بدانیم به کجا خواهیم رسید.استفاده از تصاویر طرح گرافیکی برای ساختن وب سایت. رفع ایراد ها و نواقص قبل از شروع به کد نویسی ( مخصوصا برای کار با مشتری ها …!؟ ) کار کردن بر روی یک طرح گرافیکی بسیار راحت تر از کد نویسی آن است بنابراین می توانیم تمامی ایده ها ی خود برای یک صفحه وب را در یک طرح گرافیکی پیاده نماییم و سپس به آماده سازی آن بپردازیم.

h2 Header:

  1. Font: Arial
  2. Style: Bold
  3. Size: 36pt
  4. Color: #0e5d7a

h3 Header:

  1. Font: Arial
  2. Style: Bold
  3. Size: 24pt
  4. Color: #444444

Paragraph:

  1. Font: Arial
  2. Style: Normal
  3. Size: 14pt
  4. Color: #595858

مرحله یازدهم – Side Bar:

ابتدا مستطیلی با ابعاد متناسب و با رنگ #d4d6d3 همراه با یک stroke ( خط دور طرح در نرم افزار photoshop ) به اندازه ۱px و رنگ #bebdbd ایجاد نمایید.

لینکها

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

h3 Headers:

  1. Font: Arial
  2. Style: Normal
  3. Size: 24pt
  4. Color: #044055

List items:

  1. Font: Arial
  2. Style: Normal
  3. Size: 18/14pt
  4. Color: #373737

Button

برای ساخت این button از گرادیانتی که در طراحی لوگو استفاده شد با همان ترکیب رنگ استفاده شده است و در محیط این button یک stroke به اندازه ۱px و رنگ #c7c7c7 نیز ایجاد شده است.

مرحله دوازدهم – محتویات و نوشته های footer :

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

  1. Font: Arial
  2. Style: Normal
  3. Size: 14pt
  4. Color: #e0e2e2

قسمت دوم – برش دادن طرح


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

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

مرحله سیزدهم – ابزار برش :

در این مرحله می توان از ابزار Slice و Crop برای برش دادن تصاویر استفاده کرد و نوع برش تصاویر بسیار مهم است. برای برش طبق تصاویر زیر عمل نمایید. برای درک بهتر در این قسمت اجزاء به صورت جداگانه برش داده می شوند.

Header

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

Footer

برای برش تصاویر در قسمتهای Footer و button نیز از همین روش برای برش استفاده می شود. استفاده از این روش باعث کم شدن حجم تصاویر مورد استفاده در صفحه وب و در نتیجه حجم پایین صفحه وب و لود شدن سریع تر صفحه وب می شود.

Button

مرحله چهاردهم – ذخیره تصاویر برای وب سایت :

با استفاده از Save For Web برش ها را طبق تصویر ذخیره می کنیم . در اینجا از فرمت Png 24 برای ذخیره تصاویر استفاده شده است.

پس از تنظیمات زیر و انتخاب محل ذخیره سازی تصاویر آنها را ذخیره کنید. “images only”, “default settings”, and “selected slices only.”

آیکون ها و لوگو نیز طبق تصاویر زیر و با استفاده از روش مشابه به صورت مجزا ذخیره می شوند.برای ذخیره سازی و برش لوگو و آیکون ها بقیه اجزاء در طرح فتوشاپی غیر فعال شده اند و طبق تصاویر Background به صورت Transparent در آمده است. استفاده از فرمت png با پس زمینه Transparent مشکلات و مزایای مختلفی دارد.این تصاویر در Browser های FireFox به صورت Transparent نمایش داده می شوند و اما در IE نمایش آنها با مشکلاتی همراه است که البته با استفاده از چند Script قابل حل است .

مرحله پانزدهم – نامگذاری :

تصاویر اضافی حذف می شوند و نامهای مناسبی برای قطعات برش داده شده انتخاب می شوند. انتخاب نامهای مناسب در راحتی و استاندارد کار شما بسیار تاثیر گذار هستند.

قسمت سوم – کدهای html


مرحله شانزدهم – ویرایشگر کد :

برای شروع به کار کدنویسی برای وب سایت طراحی شده احتیاج به یک ویرایشگر کد داریم که در اینجا از نرم افزار DreamWeaver برای ایجاد و ویرایش کدها استفاده شده است. استفاده از این نرم افزار برای پیاده سازی و ساخت صفحات وب زیاد سخت نیست اما این هنر ، ذوق و سلیقه و همچنین تکنیک است که طراحان را از یکدیگر متمایز میکند. شما می توانید برای ایجاد و ویرایش کدها از نرم افزارهای دیگر نیز استفاده نمایید.(notepad )

مرحله هفدهم – ساختن فولدر ها :

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

برای شروع فولدری با نام “Mywebsite” بسازید . در داخل این فولدر فایلهای مربوط به وب سایت شما جای خواهند گرفت. فولدری با نام “images” در داخل این فولدر بسازید و تمامی تصاویر مربوط به وب سایت را در داخل آن قرار دهید. همچنین فولدرهای دیگری با نام “css” و “js” برای قرار گیری فایلهای css و همچنین JavaScript” ” بسازید . سعی کنید رویه یکسانی را برای انتخاب نام فولدر ها و حتی صفحات خود انتخاب کنید تا هر شخصی با دیدن این نامها متوجه محتویات داخل آنها شود.استفاده یکسان از حروف کوچک و بزرگ نیز در نامگذازی فولدرها و صفحات وب توصیه می شود.به طور مثال در اینجا برای انتخاب نام فولدرها از حروف کوچک استفاده شده است.

صفحات وب خود را نیز در فولدر اصلی و در کنار فولدرهای css , js , images ذخیره نمایید و در آدرس دهی ها بسیار دقت کنید.البته در اینجا از فایلهای js یا javascript خبری نیست و این فولدر به صورت نمونه ساخته شده است و در طرح ما کاربردی ندارد.

مرحله هجدهم – ایجاد صفحه Index.html:

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

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Untitled Document</title>
	</head>
	<body>
	</body>
	</html>

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

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>MyWebSite</title>
	</head>

تگهای meta کاربرد بسیار در صفحه وب شما دارند ، از جمله تعیین فرمت Text ها و زبان صفحه وب ، کلمات کلیدی ، توضیحات در مورد محتویات صفحه وب و ….. تگ body یا همان بدنه صفحه وب شامل قسمتهایی از وب سایت می باشد که برای مخاطبان قابل رویت است مانند header , content , side bar , footer و ….

استفاده مناسب از کدهای استاندارد می تواند در حجم ، زیبایی و راحتی کار شما تاثیر بسیاری داشته باشد.در این خود اموز تلاش شده از کدهای استاندارد و از روش tableless ( استفاده از تگهای div ) برای کد نویسی استفاده شود.

در بخش های ابتدایی توضیح داده شد که صفحه وب ما از چند بخش ( header, content , side bar , footer ) تشکیل شده است . در اینجا برای شروع هر یک از این قسمتها را که در بین تگ body قرار دارند به صورت تگ div در نظر میگیریم . همانطور که در کدها ملاحظه می نمایید توضیحاتی در انتهای هر تگ برای راحتی کار قرار گرفته است. div ها مزیت های بسیاری نسبت به table ها دارند از جمله این مزیت ها می توان به پایین آوردن حجم صفحات ، قدرت مانور بیشتر برای طراحان و…. اشاره کرد.

	<body>
        <div></div><!--end header -->
        <div></div><!--end content-->
        <div></div><!--end sidebar-->
        <div></div><!--end footer-->
	</body>

این روش خوبی برای شروع کد نویسی یک صفحه وب است اما برای ادامه راه و اینکه در میانه راه دچار سردرگمی و دوباره کاری نشویم ابتدا باید مسیر خود را تعیین نماییم .

مطابق تصویر صفحه وب را به دو قسمت مجزا با نامهای main و footer تقسیم می کنیم ( کادر بنفش رنگ و آبی رنگ ) در سیستم های طراحی tabelless معمولا از یک تگ div اصلی به عنوان نگه دارنده صفحه (مانند #main) استفاده می شود.

	<body>
        <div>
            <div></div><!--end header -->
            <div></div><!--end content-->
            <div></div><!--end sidebar-->
        </div><!--end main-->
        <div id="footer"></div><!--end footer-->

	</body>

در اینجا محتویات div های #main و #footer را برای کنترل بیشتر و همچنین مجزا کردن آنها از یک دیگر داخل یک div دیگر با نام #container قرار می دهیم .

	<div id="main">
        <div class="container">
            <div id="header"></div><!--end header -->
            <div id="content"></div><!--end content-->
            <div id="sidebar"></div><!--end sidebar-->
        </div><!--end main container-->
	</div><!--end main-->
	<div id="footer">
        <div class="container"></div><!--end footer container-->
	</div><!--end footer-->

مرحله نوزدهم – تکمیل محتوا :

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

Header

این بخش اولین و یکی از مهمترین اجزاء تشکیل دهنده صفحه وب است که از Logo , Tagline , Navigation تشکیل شده است ( لوگو ، شعار تبلیغاتی و منوها ) . در ابتدا کدها در بخش header به صورت زیر خواهند بود .

	<div id="header">
        <div id="logo"></div>
        <div id="tagline"></div>
	</div><!--end header -->

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

	<div id="header">
        <div id="logo">
            <h1>Logo</h1>
        </div>
        <div id="tagline">
            <h3>And a little tagline, too.</h3>
        </div>
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
	</div><!--end header -->

برای لوگو از تگ h1 که معرف اهمیت لوگو است استفاده شده است و برای شعار تبلیغاتی از تگ h3 که از اهمیت کمتری نسبت به تگ h1 برخوردار است استفاده میکنیم . استفاده از Text ها به جای استفاده ار تصاویر در طراحی یک وب سایت مزیت های بسیاری دارد و از ان جمله شناخته شدن این Text ها توسط موتورهای جستجو است.

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

مقدار ادرس تگهای a با # مشخص شده است این به معنی لینک شدن به بالای صفحه است وبرای خالی نبودن مقدار href از ان استفاده می شود و کاربردهای دیگری نیز دارد.( با کلیک کردن بر روی لینکهایی که مقدار href آنها با # مشخص شده به بالای صفحه می روید )

Content

در محتوای content از نوشته های متفاوت با رنگها و اندازه های متفاوتی استفاده می شود و این نکته را در نظر داشته باشید که در طراحی یک وب سایت درجه اهمیت هر نوشته با اندازه یا Size و رنگ یک نوشته تعیین می شود و برای این کار از تگهای h1 , h2 , h3, … , p , small استفاده شده است.
قبل از تکمیل محتوای بخش اصلی تشکیل دهنده صفحه وب ( #content ) کد ها به صورت زیر خواهند بود.

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

    <div id="content">
    <h2>Lorem ipsum, Dolor sit</h2>
    <h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>
    <p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.Vestibulum id nulla eu sapienpellentesque malesuada
    pharetra ac lacus.Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempu vel. </p>
    <p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel. Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit,gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p>
    <div id="news">
    <h3>Latest Updates</h3>
    <h4>Vestibulum id nulla eu sapien pellentesque</h4>
    <small>June 1, 2009</small>
    <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
    <h4>Vestibulum id nulla eu sapien pellentesque</h4>
    <small>June 1, 2009</small>
    <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>
    </div><!–end news–>
    </div><!–end content–>

Sidebar

بعد از قسمت content به بخش sidebar خواهیم رسد . این بخش طبق پیش فرض از سه قسمت مجزا تشکیل شده است . هر یک از این سه قسمت توسط یک تگ div به وجود می آیند که عنوان آن توسط یک تگ h3 و اجزاء آن توسط لیست ها ( تگهای ul , li ) و در داخل این تگها نیز از تگ a برای پیوند و لینک استفاده شده است.

	<div id="sidebar">
        <div id="subscribe">
            <h3>Subscribe!</h3>
            <ul>
                <li><a href="#">Subscribe via RSS</a></li>
                <li><a href="#">Get Email Updates</a></li>
                <li><a href="#">Follow us on Twitter</a></li>
            </ul>
        </div>
        <div id="popular">
            <h3>Popular Items</h3>
            <ul>
                <li><a href="#">Lorem ipsum dolor site amet</a></li>
                <li><a href="#">Ulvinar tincidunt, Mauris id</a></li>
                <li><a href="#">Lorem ipsum dolor site amet</a></li>
                <li><a href="#">Proin tempor erat sit tene</a></li>
            </ul>
        </div>
        <div id="contributors">
            <h3>Contributors</h3>
            <ul>
                <li><a href="#">John Smith, freelance writer</a></li>
                <li><a href="#">Jack McCoy, designer</a></li>
                <li><a href="#">Lenny Briscoe, editor</a></li>
                <li><a href="#">John Smith, martketing</a></li>
            </ul>
            <a href="#">Join Our Team</a>
        </div>
	</div><!--end sidebar-->

Footer

قبل از اینکه کد هایی را که نوشتیم در داخل یک مرورگر بررسی کنیم آخرین قسمت ( footer ) را نیز تکمیل می نماییم . در قسمت footer معمولا نوشته هایی در مورد قوانین کپی رایت ، لینکها ، سیاست ها ، و یا اطلاعات تماس قرار می گیرند که در وب سایتهایی با طراحی های مدرن کاربردهای بسیاری پیدا کرده است.

	<div id="footer">
	<div class="container">
	<p>Copyright © ۲۰۰۹  MySite <br />
	<li>All Rights Reserved</p>
	</div><!--end footer container-->
	</div><!--end footer-->

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

قسمت چهارم – کدهای css


مرحله بیستم– وارد کردن فایل css :

قبل از شروع این قسمت یک فایل سی اس اس با نام “MyStyle.css” بسازید و آن را داخل فولدر مربوطه ( css ) بگذارید. فایلهای سی اس اس به چند روش در صفحات وب مورد استفاده قرار می گیرند . در اینجا از یک فایل سی اس اس خارجی ( مجزا ) استفاده شده است که به وسیله کدهای زیر به صفحه وب لینک می شود.این کد در قسمت head قرار خواهد گرفت .


    <link href="css/MyStyle.css" rel="stylesheet" type="text/css" media="screen" />

در آدرس دهی به نام صفحات نیز دقت نمایید (MyStyle.css ) بزرگی و کوچکی کلمات گاهی دردسر ساز خواهند شد بنابراین به این نکته نیز توجه کنید.

مرحله بیست و یکم – CSS Reset :

برای اینکه سر و شکل اولیه ای به صفحه وب بدهیم ابتدا عرض محتویات صفحه وب ( #container ) و همچنین نوع font را مشخص می کنیم.


	body { font-family: Arial, Helvetica, sans-serif; }
	.container { width: 800px;  margin: 0 auto;}

نوع font برای تمامی صفحه وب تعیین شده است و عرض محتویات صفحه وب نیز ) طبق پیش فرض اولیه ) ۸۰۰ px تعیین شده است.در class تعیین شده برای تگ با نام #Container ملاحظه می نمایید که پس از تعیین margin:0 از auto استفاده شده است که کاربرد آن center کردن این div در مرکز صفحه است. پس از وارد نمودن این کدهای سی اس اس صفحه وب به صورت زیر خواهد در آمد.

Css Reset

بسیاری از نمایشگر های صفحات وب ( IE , FireFox ,Opera ,… ) به صورت پیش فرض padding و margin های متفاوتی را مورد استفاده قرار می دهند . به دلیل استاندارد سازی و یکسان سازی نمایش صفحات وب برای تمامی نمایشگرها تمامی این padding و margin ها به صورت یکسان در می آیند.

body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }

مرحله بیست و دوم – header :

حالا همه چیز برای شروع به شکل دهی صفحه وب از بالا به پایین آماده است . برای شکل دادن به اولین قسمت این صفحه وب ( header ) از تصویر برش داده شده در بخش دوم برای تصویرپس زمینه استفاده خواهیم کرد.این تصویر درپس زمینه #main به صورت تکرار قرار می گیرد ، به دلیل اینکه خاصیت گسترش در تمامی رزولوشن ها و نمایشگرها را داشته باشد.

#main {
        background: url(images/header_slice.jpg) repeat-x;
	  }

طبق کدهای بالا ملاحظه می نمایید که تصویر header_slice.jpg به صورت افقی تکرار می شود تا تمامی عرض صفحه وب را پوشش دهد ( repeat-x ) . در صورت تغییر عرض صفحه نمایشگر و یا رزولوشن عرض #header نیز به صورت هماهنگ تغییر می کند.

( البته حداقل عرض این صفحه وب ۸۰۰ px خواهد بود – #container )

مرحله بیست و سوم – logo :

در مرحله قبل و در قسمت لوگو از تگ h1 در داخل div برای جایگزینی لوگو استفاده شد است . تگ های h1 یکی از مهمترین تگها از نظر بهینه سازی سایت برای موتورهای جستجو هستند که در بالای صفحه و یا ابتدایی ترین خط در صفحه وب قرار میگیرند تا توضیحی هر چند کوتاه در مورد محتویات وب سایت شما باشند.عدم وجود این تگ شاید به نظر شما مشکلی را برای صفحه وب ایجاد نمی کند اما فقط در ظاهر..!؟

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

	#logo {
	background: url(images/logo.png) no-repeat;
	height: 84px;
	width: 235px;
	}

در صورت تعیین نکردن اندازه برای #logo تصویر پس زمینه به طور کامل نمایش داده نخواهد شد. بنابر این با در نظر گرفتن اندازه تصویر ، اندازه آن را برای #logo مشخص نموده ایم و برای پنهان کردن نوشته Logo در داخل تگ h1 از کد زیر استفاده نموده ایم .

	#logo h1 {
	 text-indent: -9999px;

	}

در حال حاضر نمایش صفحه وب به صورت زیر خواهد بود.ملاحظه می نمایید که اثری از نوشته Logo در زیر تصویرلوگو نیست و لوگو به بالای صفحه چسبیده است. برای ایجاد فاصله در بالای صفحه وب از خاصیت Padding برای #header استفاده می نماییم . تفاوت استفاده از margin و یا padding در این است که در صورت استفاده از margin کل مرزهای تگ جابه جا خواهند شد و در صورت استفاده از padding فقط محتویات تگ جابه جا می شوند و مرزهای تگ در جای خود باقی خواهند ماند.

	#header {
	padding-top: 40px;
	}

مرحله بیست و چهارم – tagline ( شعار تبلیغاتی ):

در مرحله قبل در مورد استفاده از تگهای h2 و همچنین مزیت های آن بحث شد. برای ایجاد شعار تبلیغاتی به صورت پیش فرض و شکل دهی به آن طبق مراحل زیر عمل می کنیم. با نگاهی به طرح پیش فرض طراحی شده و نوع تگ های html استفاده شده باید راهی برای قرار دادن لوگو و شعار تبلیغاتی در کنار یکدیگر پیدا نمود . برای حل این مشکل از خاصیت float در تگهای div استفاده می شود. خاصیت float باعث شناور شدن تگهای div در صفحه وب , و افزایش قدرت طراحان وب برای ایجاد صفحات جذاب تر می شود. برای قرار دادن لوگو در سمت چپ ( left ) خاصیت float را با مقدار left به #logo اضافه می کنیم .

	#logo {
	background: url(images/logo.png) no-repeat;
	height: 84px;
	width: 235px;
	float: left;
	}

با نگاهی به تصویر ملاحطه می نمایید که div های tagline و navigation از پایین #logo به سمت راست آن تغییر موقعیت داده اند.

استفاده از float تگ را به اندازه واقعی خود مقید می کند . قبل از اضافه نمودن خاصیت float ملاحظه نموده اید که تگهای div مورد استفاده در header صفحه به صورت پله ای در زیر یکدیگر قرار گرفته بودند و هر یک فضای اطراف خود را نیز اشغال نموده و اجازه قرار گرفتن تگهای دیگر را در کنار خود نمی دادند.

حال برای #tagline نیز از خاصیت float:left استفاده می نماییم.

	#tagline {
	float: left;
	}

پس از اضافه نمودن این خاصیت به #tagline ملاحظه می نمایید که #navigation نیز در سمت راست #tagline قرار گرفته و تغییر موقعیت داده است . برای رفع این مشکل می توان از تکنیک زیر استفاده نمود.

	<div id="header">
        <div id="logo">
            <h1>Logo</h1>
        </div>
        <div id="tagline">
            <h3>And a little tagline, too.</h3>
        </div>
        <div style="clear:both"></div>
    </div>

به کدهای html مرحله قبل باز گردید و یک div با یک کد سی اس اس کوچک به بخش header اضافه نمایید ( به خط هشتم در کدهای بالا دقت نمایید ).با استفاده از خاصیت ( clear:both ) برای این div تمامی تگ های چپ و راست به زیر این div تغییر موقعیت خواهند داد و مشکل بر طرف خواهد شد. این تکنیک کاربرد زیادی در طراحی صفحات وب با استفاده از div ها دارد.

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

	#tagline h3 {font-size: 30px; color: #e4dfdf; }

و جای آن را طبق طرح پیش فرض تصحیح کنید.

	#tagline {
	float: left;
	padding-top: 20px;
	padding-left: 20px;
	width: 400px;
	}

حال نگاهی به صفحه وب می اندازیم.

مرحله بیست و پنجم – navigation :

منوها یکی از مهمترین اجزاء تشکیل دهنده هر وب سایت هستند که علاوه بر افزایش زیبایی باید به دسترسی پذیری وب سایت نیز کمک کنند و استفاده از آنها برای عموم مخاطبان بسیار ساده باشد. در طراحی های امروزی از لیستها ( تگهای ul ، li ) برای طراحی منوها استفاده می شود . با توجه به مرحله قبل و navigation طراحی شده به صورت پیش فرض از کدهای سی اس اس زیر برای طراحی ساختار navigation استفاده می نماییم.

	ul#menu {
	list-style: none;
	}
	ul#menu li a {
	font-size: 30px;
	color: #676666;
	text-decoration: none;
	}
 

طبق کدهای بالا ملاحظه می نمایید که با استفاده از خصوصیت list-style : none اشکال مورد استفاده در لیست ها را از کنار اجزاء آن حذف نمودیم و اندازه ، رنگ و… را برای لینک ها تعیین کردیم. برای شناور نمودن #menu و چینش آن در سمت چپ از خصوصیت float:left برای تگهای li موجود در زیر شاخه #menu استفاده می نماییم.

	ul#menu li {
	float: left;
	}

اگر نگاهی دوباره به صفحه وب در مرورگر خود داشته باشیم خواهیم دید مشکل مرحله قبل در استفاده از خاصیت float ( قرار گرفتن اجزاء پایینی در کنار #menu ) تکرار شده است و برای حل آن از تکنیک مرحله قبل استفاده خواهیم کرد ، بنا براین به مرحله کد نویسی html باز می گردیم و کد ها را به صورت زیر تغییر می دهیم . ) تگ div با خصوصیت clear:both اضافه شده است )

    <div id="header">
        <div id="logo">
            <h1>Logo</h1>
        </div>
        <div id="tagline">
            <h3>And a little tagline, too.</h3>
        </div>
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div style="clear:both"></div>
    </div><!--end header-->

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

	ul#menu {
	list-style: none;
	padding-top: 50px;
	}
	ul#menu li {
	float: left;
	padding-left: 30px;
	padding-right: 75px;
	width: 95px; }

مرحله بیست و ششم – content :

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

	#content h2 {
	font-size: 36px;
	color: #015878;
	}
	#content h3 {
	font-size: 24px;
	color: #444444;
	}
	#content h4 {
	font-size: 18px;
	color: #373737;
	font-weight: normal;
	}
	#content p {
	font-size: 14px;
	color: #595858;
	}
	#content small {
	font-size: 12px;
	color: #373737;
	}
	#content a {
	color: #0f6c8d;
	font-weight: bold;
	text-decoration: none;
	}

خوب کدهای اولیه بر طبق پیش فرض به صورت بالا خواهند بود و در ادامه به اصلاح وتکمیل آنها خواهیم پرداخت. خوانایی متون در یک صفحه وب جزئی از اصول ابتدایی است که با نگاهی به صفحه وب متوجه خواهید شد که هنوز رنگی را برای پس زمینه محتوای صفحه وب انتخاب ننموده ایم . رنگ پیش فرض سفید است و با توجه به رنگ بندی صفحه وب و طرح پیش فرض رنگ #ebe8e8 را برای تگ body انتخاب می نماییم و کدهای سی اس اس اولیه را به صورت زیر تکمیل می نماییم.

	body {
	font-family: Arial, Helvetica, sans-serif;
	background: #ebe8e8;
	}

پس از انتخاب رنگ پس زمینه مناسب به نکته ای دیگر برای هر چه بهتر شدن خوانایی و ظاهر صفحه وب خواهیم رسید . این نکته رعایت فواصل مناسب ما بین اجزاء تشکیل دهنده یک صفحه وب و در اینجا ما بین متون است. فاصله بین پاراگراف ها ، عناوین با درجه اهمیت متفاوت و ….. قبل از انجام تغییرات تکمیلی صفحه وب به شکل زیر خواهد بود.

ایجاد فاصله مابین navigation و تگ h2 عنوان متن content

	#content h2 {
	font-size: 36px;
	color: #015878;
	padding-top: 25px;
	}

ایجاد فاصله مابین تگ h2 و h3 با درجات اهمیت متفاوت.

	#content h3 {
	font-size: 24px;
	color: #444444;
	padding : 20px  0px;
	}

ایجاد فاصله مابین پاراگراف p و h3

	#content p {
	font-size: 14px;
	color: #595858;
	padding-top: 20px;
	}

بهتر است نگاهی به نتیجه کار تا اینجا داشته باشیم .

طبق طرح پیش فرض کدهای سی اس اس #news را نیز به صورت زیر می نویسیم .

	#news {
	padding-top: 10px;
	}
	#news h3 {
	padding-bottom: 10px;
	}
	#news p {
	padding-top: 10px;
	padding-bottom: 14px;
	}

و نتیجه آن به صورت زیر خواهد بود.

مرحله بیست و هفتم – Side bar :

برای ایجاد و سر و شکل دادن به این جزء ابتدا لازم است #content را طبق طرح پیش فرض با استفاده از اندازه ها مقید کنیم و چینش آن را با استفاده از float تعیین کنیم و آن را به صورت یک div شناور در بیاوریم تا بتوانیم #sidebar را در کنار آن قرار دهیم .

	#content {
	width: 510px;
	float: left;
	}
	#sidebar {
	float: left;
}

اگر هم اکنون نگاهی به صفحه وب خود بیاندازید متوجه مشکلی که در مراحل قبل نیز با تگ های شناور داشتیم خواهید شد ( #footer به سمت راست #sidebar تغییر مکان داده است ) و برای حل آن طبق مراحل قبل از یک div با خصوصیت clear:both در انتهای #sidebar استفاده می نماییم .

	<div id="contributors">
        <h3>Contributors</h3>
        <ul>
            <li><a href="#">John Smith, freelance writer</a></li>
            <li><a href="#">Jack McCoy, designer</a></li>
            <li><a href="#">Lenny Briscoe, editor</a></li>
            <li><a href="#">John Smith, martketing</a></li>
        </ul>
        <a href="#">Join Our Team</a>
	</div>
	</div><!--end sidebar-->
    <div style="clear:both"></div>

بخش #sidebar از سه قسمت متفاوت با اندازه ها ، فاصله ها و رنگهای مختلف تشکیل شده است ، بنابر این با استفاده از کدهای سی اس اس طبق طرح پیش فرض ( مشخصات استفاده شده برای text ها در طرح پیش فرض ) آنها را به شکل و مکان پیش فرض در خواهیم آورد و هدایت می کنیم.

	#sidebar {
	float: left;
	margin-left: 55px;
	margin-top: 35px;
	background: #d4d6d3;
	border: 1px solid #BEBDBD;
	padding: 15px;
	 }
	#sidebar h3 {
	font-size: 24px;
	color: #044055;
	font-weight: normal;
	padding-bottom: 20px;
	padding-left: 15px;
	}
	#sidebar ul {
	list-style: none;
	padding-bottom: 25px;
	}
	#sidebar ul li a {
	font-size: 14px;
	color: #393838;
	}
	ul#subscribe li {
	padding-bottom: 5px;
	}
	ul#subscribe li a {
	font-size: 18px;
	}

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

	ul#subscribe li {
	padding-bottom: 5px;
	padding-left: 35px;
	}

ابتدا با استفاده از Padding یک فضای خالی برای آیکون ها در تگهای li زیر شاخه #subscribe ایجاد می نماییم .سپس با اندکی تغییر در کدهای html این قسمت و دادن id های مجزا برای کنترل بیشتر بر روی اجزاء آیکون ها را با استفاده از خصوصیت background وارد می نماییم.

	<ul id="subscribe">
        <li id="rss"><a href="#">Subscribe via RSS</a></li>
        <li id="email"><a href="#">Get Email Updates</a></li>
        <li id="twitter"><a href="#">Follow us on Twitter</a></li>
	</ul>

و کدهای سی اس اس برای هر کدام از اجزاء

	li#rss {
	background: url(/..images/rss_icon.png) no-repeat;
	}

	li#email {
	background: url(/..images/email_icon.png) no-repeat;
	}

	li#twitter {
	background: url(/..images/twitter_icon.png) no-repeat;
	}

به آدرس دهی ها در کدهای سی اس اس بسیار دقت نمایید . برای آدرس دهی ابتدا یک ریشه بالا آمده و سپس در فولدر images آدرس دهی می کنیم . توجه داشته باشید که کدهای سی اس اس درفولدر css قرار داده شده اند.

و در اینجا نگاهی به صفحه وب .

طبق طرح پیش فرض جای button سبز رنگ در زیر #sidbar خالی است که با مقداری تصحیح در کدهای html و چند خط کد سی اس اس آن را نیز در جای مناسب قرار خواهیم داد.

	<a href="#" class="button">Join Our Team</a>

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

	a.button {
	color: #393838;
	text-decoration: none;
	background: url(/..images/button_slice.jpg) repeat-x;
	margin-left: 14px;
	padding: 13px 23px;
	}

با اندازه گذاری دقیق و استفاده از خصوصیت های margin و padding می توانید به خوبی مکان قرار گیری اجزاء را تغییر دهید و کنترل نمایید.

با انجام تصحیحاتی در کدهای سی اس اس #sidebar مکان آن را به دقت تنظیم و تصحیح می نماییم.

	#sidebar {
	float: left;
	margin-left: 55px;
	margin-top: 35px;
	background: #d4d6d3;
	border: 1px solid #BEBDBD;
	padding: 15px 15px 30px 15px;
	}

مرحله بیست و هشتم – footer :

این قسمت نیز شباهت زیادی به بخش header صفحه وب دارد و همانند گذشته و مراحل قبل به صورت زیر عمل می نماییم . تصویر footer_slice.jpg در پس زمینه #footer تکرار خواهد شد.

	#footer {
	background: url/..) images/footer_slice.jpg) repeat-x;
	padding-top: 20px;
	padding-bottom:60px;
	margin-top: 40px;
	color: #fff;
	}

و در انتها همه چیز آماده است برای بهره برداری.

میتوانید دموی نهایی و فایلهای سورس را از این قسمت دانلود نمایید :

دمو آنلاین

دانلود سورس فایلهای CSS و Html

دانلود فایل PSD قالب

دانلود خودآموز بصورت PDF

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

پستهای مرتبط :

اگر از مطلب فوق لذت برده اید آنرا با دوستان خود به اشتراک بگذارید
  • Twitter
  • FriendFeed
  • del.icio.us
  • StumbleUpon
  • Digg
  • Facebook
  • Technorati
  • MySpace
  • RSS


۲۷۰ دیدگاه


  1. محمد حسین ربیعی
    ۲ آذر ۱۳۸۸

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




  2. کامران
    ۲ آذر ۱۳۸۸

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




  3. امیر
    ۲ آذر ۱۳۸۸

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




  4. امین
    ۲ آذر ۱۳۸۸

    ممنون از کاری که انجام دادین. مفید بود.




  5. ماهتو
    ۴ آذر ۱۳۸۸

    سلام. این خیلی عالیه. مرسی هزار بار




  6. REZA
    ۴ آذر ۱۳۸۸

    خیلی خیلی ممنون واقآ مفید بود




  7. آتنا
    ۵ آذر ۱۳۸۸

    سلام. ممنون از این هممممممممممممممممممممممممممه زحمتتون
    من یه سوال داشتم که خیلی منتظر جوابشم
    این که گذاشتید: “اگر از مطلب فوق لذت برده اید آنرا به اشتراک بگذارید” چی کار میکنه ؟ منم میتونم برا سایت بذارم؟
    لطفا هر چی در موردش میدونید بگید بهم.




  8. کامران
    ۵ آذر ۱۳۸۸

    شما اول از همه بگو که وب سایتت مبتنی بر چه سیستمی هست؟ یعنی از چه CMS ی استفاده میکند؟ اگر از ورد پرس استفاده میکنید که برای این کار پلاگین های زیادی وجود داره و ما از پلاگینی به اسم Sociable استفاده میکنم. آدرس وب سایت این پلاگین : http://yoast.com/wordpress/sociable




  9. مهدی
    ۷ آذر ۱۳۸۸

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




  10. کامران
    ۷ آذر ۱۳۸۸

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




  11. مسعود رضایی
    ۱۰ آذر ۱۳۸۸

    به نظر آموزش کاملی میاد . جالب بود . موفق باشید




  12. ahad
    ۱۱ آذر ۱۳۸۸

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




  13. Real3D
    ۱۲ آذر ۱۳۸۸

    very good plan




  14. علی
    ۲۳ آذر ۱۳۸۸

    عااااااااااااااااااااااااااااااالییییییییییییییییی
    مممممممممممممممنووووووووووووووون




  15. پری
    ۲۳ آذر ۱۳۸۸

    عالی عالی بود.
    ما بازم منتظر همچین فوق العاده هایی توی سایتتون هستیم.




  16. امیر گنو
    ۲۵ آذر ۱۳۸۸

    واقعا ممنون از اینکه هم بابت مطلبتون و هم اینکه pdf رو برای دانلود گذاشتید



  17. [...] ۶- آموزش طراحی و کدنویسی وب سایت (از ابتدا تا انتها) [...]




  18. نام (لازم)
    ۲ دی ۱۳۸۸

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




  19. dina
    ۹ دی ۱۳۸۸

    هنوز که نخوندم ولی فکر کنم اینم مثل بقیه مطلب ها دردی از منو دوا نکنه.کاش مطلبا یکم کاربردی تر بود.بیشتریاشون فقط جنبه تیوری داره




  20. کامران
    ۹ دی ۱۳۸۸

    دینا جان زود قضاوت نکن این فرق میکنه. مگر اینکه درد شما بد دردی باشه :d




  21. نیما
    ۱۱ دی ۱۳۸۸

    خیلی عالی بود ممنون




  22. Sina
    ۱۸ دی ۱۳۸۸

    با تشکر بسیار مفید بود.
    یک سوال، فرض کنیم که من می خواهم این طرح رو گسترش بدم و صفحات About، Portfolio و Contact رو هم بسازم. اگر من برای اینکه قالب صفحات یکسان باشد، کل کد صفحه اصلی رو Copy & Paste کنم بعد بخش Content رو عوض کنم، مشکلی که هست اینه که مقدار زیادی کد Duplicate دارم (برای Header و Footer). در صورتی که روزی بخواهم تغییری در هر یک بدهم، مجبورم چند جا کدها رو عوض کنم. تکنیک این مسئله چیست؟




  23. کامران
    ۱۸ دی ۱۳۸۸

    ّرای اینکار شما باید قالب اصلی سایت رو بدون محتویات و نوشته های سایت بسازید. یعنی هدر، فوتر، منو و . . . و جای Content رو خالی بزارید و بعد یک MasterTemplate بسازید و د رآن ناحیه هایی که قرار است تغییر کنند را مشخص میکنید و این تمپلیت خود را ذخیره میکندی. موارد توضیح داده شده مربوط به نرم افزار ِDream Weaver بود و نیاز به یک پست جداگانه داره که به زودی این پست رو تهیه خواهم کرد. و بعد از آن شما با ایجاد تغییر در این تمپلیت در تمامی صفحات تغییرات را خواهید دید




  24. korosh
    ۲۴ دی ۱۳۸۸

    واقعا زحمت می کشید . خیلی هم مفید




  25. آرش زاد
    ۳۰ دی ۱۳۸۸

    بسیار زحمت کشیدین، ممنون…




  26. ستاره دوست محمد
    ۳۰ دی ۱۳۸۸

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

    حتما همچین سایتی رو به دوستانم معرفی خواهم کرد

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




  27. کامران
    ۳۰ دی ۱۳۸۸

    ستاره جان کلا طراحی قالب از یک چهارچوب استفاده میکنه اما طراحی قالب برای هر سیستم محتوا یک سری ریزه کاری ها داره و مثلا شما باید برای طراحی قالب وردپرس php هم بدونی . البته میشه که شما یک قالب PSD دست کنی و اونو تحویل یک نفری که مسلط باشه بدی و اون قالب سازگار با سیستم محتوای شما تبدیل کنه
    فعلا تو برنامه کاری ما این نسئله وجود نداره اما شاید در آینده بیاریمش تو برنامه




  28. ستاره
    ۳۰ دی ۱۳۸۸

    سلام
    من منظورم قلب وبلاگ واسه بلاگفا بود آیا میتونم از این آموزش استفاده کنم




  29. کامران
    ۳۰ دی ۱۳۸۸

    عرشضکردم قالب PSD میتونی بسازی اما باید کد دهی بشه برای قالبهای مخصوص بلاگفا . مثلا این سایت رو نگاه کن . آموزش ساختن قالب برای سایت بلاگ اسپات هست
    http://baghbanbashi.blogspot.com/

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




  30. Mort3ZA
    ۵ بهمن ۱۳۸۸

    واقعا عالی بود. توی تمام وب چنین آموزشی به فارسی پیدا نمیشه.

    یه نکته کوچیک، شاید مهم به نظر نیاد. فونت همه قسمت‌‌ها با px مشخص شده.فکر می‌کنم با اینکار توی اینترنت اکسپلورر ۶ نمیشه با تغییر سایز صفحه فونت‌ها رو درشت‌تر کرد. این برای کسانی که با فونت‌های ریز مشکل دارن مشکل‌ساز میشه
    اگه از % استفاده بشه به نظرم بهتره.

    یه نکته دیگه، بهتر نبود دمویی که ساخته میشه فارسی بود؟




  31. محسن
    ۷ بهمن ۱۳۸۸

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




  32. محمد
    ۱۱ بهمن ۱۳۸۸

    واقعا وبلاگ فوق العاده ای دارید !
    من دارم از تک تک مقاله هاتون استفاده می کنم !




  33. mhf1927
    ۱۸ بهمن ۱۳۸۸

    سلام

    خسته نباشی عزیز

    واقعا ممنون

    یه سوال داشتم…: در مورد باتن (join our team) باید بگم تو صفحه به صورت کامل نمیآد و در ضمن خود نوشته ی join هم زیر عکس هست.
    در مورد سایزش که با تغییر
    padding: ۱۳px ۲۳px
    به
    padding: ۱۳px 50px
    به نتیجه رسیدم که نمیدونم مشکل کار از کجا بود…

    اما در مورد نوشته، چیزای متفاوتی رو امتحان کردم. از جمله همون تکنیکی که تو لوگو به کار رفته … ولی از هیچمدومش جواب نگرفتم

    لطفا راهنمایی کنید

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

    اگه راهی واسه اینم هست ممنون میشم مارو در جریان بذاری و اگه نه که از یه عکس کامل استفاده کنیم بهتره

    در ضمن تکرار تو عکس باتنمون (botton) چه کمکی به ما میکنه!!!؟ به نظر من هیچی… چون در نهایت باید کل عکسش دریافت بشه دیگه…

    بازم تشکر




  34. mohsen
    ۲۰ بهمن ۱۳۸۸

    Fantastic!!!!!!!




  35. باران
    ۲۱ بهمن ۱۳۸۸

    یه خراب کاری کردم و تنظیمات سایت رفته …
    میتونی کمکم کنی ؟؟؟
    ممنون میشم .




  36. امیر
    ۲۱ بهمن ۱۳۸۸

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




  37. m£iSAM
    ۲۵ بهمن ۱۳۸۸

    اگه چن‌تا مطلب این‌چنینی‌ه دیگه بنویسی قطعا می‌ری بهشت :دی




  38. محسن
    ۲۹ بهمن ۱۳۸۸

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




  39. ماشین باز
    ۲ اسفند ۱۳۸۸

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




  40. Ebess
    ۴ اسفند ۱۳۸۸

    سلام
    خسته نباشید؟ می خواستم بدونم قالب دیتالایف انجین و وردپرس را چگونه طراحی یا می نویسند؟

    و پسوند tpl مثل addcomments.tpl در قالب دیتالایف انجین چیست و با چی برنامه نویسی شده است ؟

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

    منظور من بیشتر طراحی قالب برای دیتالایف است؟




  41. کامران
    ۴ اسفند ۱۳۸۸

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




  42. سعید
    ۵ اسفند ۱۳۸۸

    خیلی عالی
    من با نرم افزار web maker کار میکنم اما هر کاری میکنم حروف فارسی رو نمیشناسه.
    ممنون میشم اگه کمکم کنین.




  43. Ebess
    ۶ اسفند ۱۳۸۸

    سلام
    خسته نباشید
    من امروز وردپرس ۲٫۹٫۲ نصب کردم .
    از Cpanel استفاده می کنم
    قسمت مدیریت (پیش خوان )سایت مشکلی ندارم میاید بالا
    ولی صفحه اول سایت نمی آید.http://www.ebessp30.com/wordpress/
    می شود بگویید مشکل از کجاست؟
    تو انجمن خود وردپرس کسی جواب نداد .
    میشه شما راهنمایی کنید؟




  44. کامران
    ۶ اسفند ۱۳۸۸

    اینطوری نمیتونم بگم باید یوزر پس cpanel رو برام ایمیل کنی تا ببینم مشکل از کجاست




  45. Ebess
    ۶ اسفند ۱۳۸۸

    باشه به این ایمیل کردم
    Info@ITTutorial.ir




  46. Ebess
    ۷ اسفند ۱۳۸۸

    آقا کامران چی شد؟




  47. Ebess
    ۷ اسفند ۱۳۸۸

    آقا کامران مرسی رها انداختم ورد پرسم
    همون کاری که شما گفتین کردم




  48. نفیسه
    ۱۸ اسفند ۱۳۸۸

    خیلی عالی بود ممنووووووووون




  49. parisa
    ۱۹ اسفند ۱۳۸۸

    واقعا عالی بود
    همیشه موفق باشید و شاد




  50. ابوذر
    ۲۱ اسفند ۱۳۸۸

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




  51. امیر سروری
    ۲۲ اسفند ۱۳۸۸

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




  52. رسول باغبان
    ۲۴ اسفند ۱۳۸۸

    جالب بود.

    امیدوارم بیشتر و بیشتر بنویسی.
    موفق و پیروز باشی




  53. کامران
    ۲۴ اسفند ۱۳۸۸

    منتظر نوشتن شما هم هستیم رسول جان




  54. میرحسین
    ۱ فروردین ۱۳۸۹

    من نسخه pdf کاملترین آموزش php رو دارم.

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




  55. محبوبه
    ۵ فروردین ۱۳۸۹

    عالیه




  56. کیا طاهری
    ۸ فروردین ۱۳۸۹

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




  57. مغربی
    ۱۵ فروردین ۱۳۸۹

    سلام نمیشودتشکربه اندازه زحمات شماکرد بایدبگویم موفق باشید
    من ۴۰۰ صفحه اشعاردارم که میخواهم به منوی سایت بگذارم باید چکارکنم ؟ تشکر




  58. رضایی
    ۱۸ فروردین ۱۳۸۹

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




  59. مهرزاد
    ۲۰ فروردین ۱۳۸۹

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




  60. کامران
    ۲۰ فروردین ۱۳۸۹

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




  61. mehrdad
    ۲۱ فروردین ۱۳۸۹

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




  62. Arya
    ۲۲ فروردین ۱۳۸۹

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




  63. Arya
    ۲۲ فروردین ۱۳۸۹

    سلام
    میشه طریقه ساختن یک صفحه برای کامنت _ Comment_ رو توضیح بدین؟
    ممنون




  64. کامران
    ۲۲ فروردین ۱۳۸۹

    همچین سایتی باید دینامیک طراحی بشه نه استاتیک و توسط کنتر پنل کاربریش هر کسی با سطح دانش آفیس هم میتونه سایت رو آپدیت بکنه




  65. Arya
    ۲۲ فروردین ۱۳۸۹

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




  66. Arya
    ۲۲ فروردین ۱۳۸۹

    ساخت یک صفحه کامنت رو هم براش مقاله ای دارید؟
    خیلی از مقاله هاتون رو خوندم
    تا حالا مقاله ای که اینقدر خوب توضیح داده باشه ندیدم




  67. کامران
    ۲۲ فروردین ۱۳۸۹

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




  68. کامران
    ۲۲ فروردین ۱۳۸۹

    یک صفحه کامنت به تنهایی نیست و بید دیتا بیس داشته باشه و سایت داینامیک باشه و به این سادگی نیست




  69. فرید احمد
    ۲۴ فروردین ۱۳۸۹

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




  70. Arya
    ۲۶ فروردین ۱۳۸۹

    Salam . bebakhshid ke farsi neminevisam.
    Man nemidoonam az database chetori too HTML estefade miishe
    mamnoon misham tozıhe koochiki bedid




  71. محمد
    ۲۶ فروردین ۱۳۸۹

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




  72. کامران
    ۲۷ فروردین ۱۳۸۹

    وقتی صحبت از دیتا بیس میشه یعنی سایت شما باید دینامیک باشه و از زبانهای برنامه نویس مثل پی اچ پی و ASP.Net استفاده باید کرد




  73. علی.ش
    ۲۷ فروردین ۱۳۸۹

    خیلی عالیه. دستت درد نکنه.




  74. شاهین
    ۲۸ فروردین ۱۳۸۹

    عالی بود




  75. محمد
    ۲۸ فروردین ۱۳۸۹

    سالاری حاجی




  76. مهدیه
    ۲۹ فروردین ۱۳۸۹

    خیلی مفید بود. ممنون




  77. محمد
    ۳۱ فروردین ۱۳۸۹

    خبلی مفید و عالی بود
    من یه مجموعه آموزشی بود خریدم که بعد از این آموزشهایی که اینجا دیدم خیلی به دردم خورد.




  78. پارسا
    ۷ اردیبهشت ۱۳۸۹

    در یک کلام “فوق العاده بود”




  79. آقای ایکس
    ۱۲ اردیبهشت ۱۳۸۹

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




  80. امیر
    ۱۴ اردیبهشت ۱۳۸۹

    عالی بود




  81. aref
    ۱۵ اردیبهشت ۱۳۸۹

    واقعا سایت شما در اینترنت نامی پُر آوازه شده!!!

    دستتون درد نکنه

    ولی میشه آموزش یه قالب گرافیکی با کد نویسی رو بزارید!

    من مبتدی هست لطفا از (مبتدی تا پیشرفته) شروع کنید (مثل همین آموزش)

    دستت درد نکنه!!!




  82. کامران
    ۱۵ اردیبهشت ۱۳۸۹

    ممنون از شما عارف جان
    به این آدرس مراجعه کن : http://www.ittutorial.ir/?p=652




  83. آسمان
    ۱۷ اردیبهشت ۱۳۸۹

    خیلی عالی بووووووووووووووووود




  84. آریانا
    ۲۵ اردیبهشت ۱۳۸۹

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




  85. ش
    ۲۵ اردیبهشت ۱۳۸۹

    ممنون از مطلب خوبتون




  86. EditEhsan
    ۲۶ اردیبهشت ۱۳۸۹

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




  87. faranak
    ۱۵ خرداد ۱۳۸۹

    واقعا عالی بود. مرسی




  88. ساره
    ۱۷ خرداد ۱۳۸۹

    فوق العاده بود




  89. پویا
    ۲۰ خرداد ۱۳۸۹

    دست شما به خاطر این مطلب گرانبها درد نکنه! (-:




  90. حسن
    ۲۱ خرداد ۱۳۸۹

    از نظر من عالی است باید به عرض شما برسانم من تا حالا با طراحی وب سایت کار نکردم ولی خیلی دوست دارم یاد بگیرم لطفا در این زمینه من را یاری کنید بسیار سژاس گذارم. لطفا در صورت صلاحدید آموزش من به آدرس
    delphi_kavoshkar@yahoo.com ایمیل کنید
    متشکرم




  91. esi seksekeh
    ۲۵ خرداد ۱۳۸۹

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




  92. مصطفی
    ۲۵ خرداد ۱۳۸۹

    بی نظیر بود….
    من ۱۷ سالمه و رشته ریاضیم و به بر نامه نویسی خصوصا HTML خیلی علاقه دارم…سایت شما بی نظیر بود




  93. طراحی سایت
    ۲۹ خرداد ۱۳۸۹

    واقعا عالی بود. مرسی




  94. آرمین
    ۲۹ خرداد ۱۳۸۹

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




  95. طراحی وب سایت
    ۱ تیر ۱۳۸۹

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




  96. طراحی وب سایت
    ۱ تیر ۱۳۸۹

    واقعآ عالی بود…دمتون گرم:)
    موفق باشید.




  97. minizoro
    ۲ تیر ۱۳۸۹

    واقعا ممنون ، عالیست
    اما سوال اینجاست که بعد از اینجا باید به چه جاهای سایت برویم برای افزایش اطلاعات و همچنین برای یادگیری بیشتر؟ منظور این گام هایی که گذاشته اید را با مطالب دیگر موجود در سایت دسته بندی و شماره بندی کرده تا بتوان یکی یکی خواند و جلو رفت




  98. احسان
    ۹ تیر ۱۳۸۹

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




  99. طراحی سایت
    ۱۰ تیر ۱۳۸۹

    با سلام
    ممنون از وب بسیار خوب و مفیدتون…
    موفق باشید:)




  100. saglik market
    ۱۶ تیر ۱۳۸۹

    با سلام
    ممنون از وب بسیار خوب و مفیدتون…




  101. یگانه
    ۲۰ تیر ۱۳۸۹

    سلام
    ممنون از اموزش خوبتون
    من برای طراحیه یه سایت خوب احتیاج به کمک دارم-البته بگم در حدمقدماتی بلدم-اما خیلی با نرم افزار ویژوال استودیو مشکل دارم-میخواستم ببینم شما میتونید راهنمایی کنید؟؟؟؟
    خیلی خیلی ممنونتون میشم




  102. نعیمه
    ۲۲ تیر ۱۳۸۹

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




  103. سجاد
    ۲۳ تیر ۱۳۸۹

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

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

    جدا بهت تبریک میگم و امیدوارم خستگی اینکار از تنت بیرون رفته باشه.




  104. هومن
    ۲۴ تیر ۱۳۸۹

    عالی بود




  105. مائده
    ۲۶ تیر ۱۳۸۹

    مممممنووووووونننننننننننننننن




  106. amir
    ۲۹ تیر ۱۳۸۹

    خیلی عالیه فقط اینکه من تو dw یک سایت درست کردم که فایل css جدا و source هم جدا است برای اینکه صفحات یکی باشند از دستور ترکیبی ctrl-D استفاده کردم و مشابه صفحه اصلی چند صفحه دیگر تولید کردم و صفحه اصلی را با div بخش بندی کردم می خواستم کمکم کنید چگونه اگر بخوام یک div رو از روی صفحه اصلی بردارم روی div های دیگه که مشابه آن در صفحات دیگر هست تاثیر بذاره و اونا هم پاک بشن ممنون میشم کمکم کنید.




  107. نرگس
    ۲ مرداد ۱۳۸۹

    خیلی عالی بود یه دنیا ممنون




  108. پیمان
    ۵ مرداد ۱۳۸۹

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




  109. sağlık market
    ۵ مرداد ۱۳۸۹

    سلام
    ممنون از اموزش خوبتون
    من برای طراحیه یه سایت خوب احتیاج به کمک دارم-البته بگم در حدمقدماتی بلدم-اما خیلی با نرم افزار ویژوال استودیو مشکل دارم-میخواستم ببینم شما میتونید راهنمایی کنید؟؟؟؟




  110. poria
    ۵ مرداد ۱۳۸۹

    سلام مجدد!
    من فتوشاپ رو مسلط هستم ولی از تبدیل به html چیزی نفهمیدم! الان ما کدها رو داریم html و css رو ولی کجا باید به کار ببریم تا قالب خودمون رو درست کنیم؟ یه مقداری رو کدها بیشتر ابتدایی توضیح بدید ممنون می شم از لطف شما
    متشکر از شما دوست عزیز




  111. m.tolooei
    ۸ مرداد ۱۳۸۹

    با سلام و خسته نباشید وردپرس ۳٫۰۱ هم امروز منتشر شد
    ان را در وبلاگ خود قرار دهید
    http://codex.wordpress.org/Version_3.0.1
    و دانلود ان
    http://wordpress.org/download/
    http://wordpress.org/latest.zip
    با تشکر مدیریت راحت دانلود




  112. شریف
    ۱۴ مرداد ۱۳۸۹

    سلام :
    من از اینکه به پروگرام های office کامپیوتر بلدیت دارم می خواهم بصورت درست اگر ممکن باشد IT را فرا بگیرم آیا می توانم یا نه ؟ به امید راهنمایی بهتر شما !!
    چیز های را که از سایت شما آموختم سپاس بی نهایت
    تشکر




  113. Fiber optik
    ۲۰ مرداد ۱۳۸۹

    ممنون از مطلب خوبتون




  114. شهاب
    ۲۱ مرداد ۱۳۸۹

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




  115. پرهام
    ۲۳ مرداد ۱۳۸۹

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




  116. مرتضی رضوانی
    ۲۵ مرداد ۱۳۸۹

    به جرات میتوان گفت که یکی از بهترین و کاملترین و روانترین آموزش های در زمینه طراحی وبسایت، CSS و HTML را در این سایت دیدم.
    جا دارد تا از صمیم قلب از مدریت زحمت کش سایت و دوستانی که آموزش ها را آماده میکنند قدر دانی کنم.
    بی صبرانه در انتظار آموزشهای جدیدتان هستم. به امید روزی که از گردآوری درست این مطالب کتابی هم برای چاپ و انتشار آماده گردد.
    در پایان تقاضا دارم که کل آموزشها را در قالب یک فایل PDF به صورت یک کتاب مرجع آماده کنید.
    با تشکر و احترام.




  117. بهار
    ۲۶ مرداد ۱۳۸۹

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




  118. sling bag
    ۲۶ مرداد ۱۳۸۹

    خیلی عالی بود یه دنیا ممنون




  119. الیاس
    ۳۱ مرداد ۱۳۸۹

    کیه که این همرو بخونه…………….




  120. تیک تاک
    ۱ شهریور ۱۳۸۹

    سلام
    عالی بود
    خسته نباشی




  121. مسعود
    ۵ شهریور ۱۳۸۹

    عالی بود




  122. طراحی وب سایت
    ۶ شهریور ۱۳۸۹

    با سلام
    ممنون از وب سایت عالیتون:)
    استفاده کردیم…




  123. حصول
    ۱۱ شهریور ۱۳۸۹

    ممنون، فوق العاده کامل و کاربردی بود.
    راستی یه مشکلی، لینک زیر (صفحه دوم دانلود کتاب) به درستی کار نمی کند، در صورت تمایل اصلاح کنید.

    http://www.ittutorial.ir/?cat=25&paged=2

    موفق باشید.




  124. تکی
    ۱۳ شهریور ۱۳۸۹

    عالی بود ولی عکسا باز نشد. نمی دونم چرا؟؟؟؟




  125. کامران
    ۱۳ شهریور ۱۳۸۹

    با عرض معذرت، تا فردا مشکل عکسها و فایلها حل میشه




  126. حمید
    ۱۶ شهریور ۱۳۸۹

    بسیار عالی بود واقعا غیر قابل پیش بینی بود.




  127. حامد
    ۱۶ شهریور ۱۳۸۹

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

    ازتون تشکر می کنم .




  128. محسن
    ۱۹ شهریور ۱۳۸۹

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




  129. حسین
    ۲۰ شهریور ۱۳۸۹

    سلام و تشکر ویژه
    اگه میشه یه آموزش برای تبدیل psd به html و css بذارید تا بتونیم بعدش اونا رو به قالبای جوملا و … تبدیل کنیم.




  130. ابراهیم
    ۲۲ شهریور ۱۳۸۹

    خیلی عالی بود خیلی خیلی متشکرم ضمنا اگه میشه در مورد چت وفوتوشاپ توضیح بدین.




  131. صادق
    ۲۳ شهریور ۱۳۸۹

    دست مریزاد :)




  132. کامران
    ۲۳ شهریور ۱۳۸۹

    به به آقا صادق گل. از این طرفها !!!




  133. آرمان
    ۲۴ شهریور ۱۳۸۹

    واقعاً عالی بود. مرسی




  134. raham
    ۲۸ شهریور ۱۳۸۹

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




  135. مهناز
    ۳۰ شهریور ۱۳۸۹

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




  136. askar
    ۲ مهر ۱۳۸۹

    با سلام و خسته نباشی
    اگر می شود این آموزش طراحی و کدنویسی وب سایت (از ابتدا تا انتها)به صورت pdfبرای من ارسال کنید خیلی متشکر می شوم
    چون من در یکی از روستاهای بوشهر زندگی می کنم و سرعت اینترنت هم خیلی پایین است خیلی از عکس ها لود نمی شود
    با تشکر
    خداحافظ




  137. Mohsen
    ۲۴ مهر ۱۳۸۹

    سلام، یه سری از عکس‌ها لود نمی‌شه، مثل اینکه از روی سرور پاک شده!




  138. NEDA
    ۲۵ مهر ۱۳۸۹

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




  139. ممدرله
    ۲۶ مهر ۱۳۸۹

    دمتون گرم . اگر می شود این آموزش طراحی و کدنویسی وب سایت (از ابتدا تا انتها)به صورت pdfبرای من ارسال کنید خیلی متشکر می شوم
    چون من در فراشبند فارس زندگی می کنم و سرعت اینترنت هم خیلی پایین (۴۲ کیلوبایت در ثانیه )است خیلی از عکس ها لود نمی شود
    با تشکر
    خداحافظ




  140. پوریا
    ۲۹ مهر ۱۳۸۹

    حرفی برای گفتن ندارم…..
    عالی بود.




  141. وهاب دهوار
    ۳۰ مهر ۱۳۸۹

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




  142. نام (لازم)
    ۳۰ مهر ۱۳۸۹

    مرسی مرسی کارت عالی است . تشکرم بی نهایت از شما

    خدا نگهدارت باشد.




  143. اصغر
    ۲ آبان ۱۳۸۹

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




  144. کامران
    ۲ آبان ۱۳۸۹

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




  145. محسن
    ۲ آذر ۱۳۸۹

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




  146. شاهرخی
    ۱۳ آذر ۱۳۸۹

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

    ممنون



  147. سلام کامی جون ، حالت چه طوره؟؟
    هنوزم مسابقه طراحی لوگو برگزار می کنی؟؟ :d شوخی کردم..

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

    با این وجود که کامنت دادم اما هنوزم ازت دلگیرم… اما سعی می کنم یادم بره…شاید در آینده نزدیک، بدترین رغیبت بشم یا شایدم بهترین دوستت…




  148. زهرا
    ۱۷ آذر ۱۳۸۹

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




  149. مریم
    ۲۱ آذر ۱۳۸۹

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




  150. zahra
    ۲۲ آذر ۱۳۸۹

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




  151. یک طراح وب
    ۳ دی ۱۳۸۹

    خوب بود اما بسیار طولانی :)




  152. گنو پی سی
    ۴ دی ۱۳۸۹

    دستتون درد نکنه




  153. جمال
    ۵ دی ۱۳۸۹

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




  154. اسماعیلی
    ۸ دی ۱۳۸۹

    دست گلت درد نکنه واقعاً جای تشکر و قدر دانی داره




  155. نازنین
    ۹ دی ۱۳۸۹

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




  156. Sam Amin
    ۱۱ دی ۱۳۸۹

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




  157. محسن
    ۱۳ دی ۱۳۸۹

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




  158. سعید
    ۱۵ دی ۱۳۸۹

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




  159. فرزاد
    ۲۸ دی ۱۳۸۹

    سلام
    اگه بگم عالیه,توهینیه به تو و سایر کاربرا…ولی می تونم بگم که بینظیره…اونقدر که نشه نمونه کاملتر از اینو تو نت پیدا کرد
    علی یارت




  160. YALDA
    ۲۸ دی ۱۳۸۹

    مهشر بود




  161. شاهرخی
    ۴ بهمن ۱۳۸۹

    مرسی




  162. فرامرز
    ۱۰ بهمن ۱۳۸۹

    سلام دوست عزیز چگونه می توان برای سایت سیستم عضو گیری را قرار دهم




  163. پیچک
    ۱۸ بهمن ۱۳۸۹

    عالی بود
    سپاسگذارم




  164. Teza
    ۱۸ بهمن ۱۳۸۹

    با درود فراوان

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




  165. علی
    ۲۳ بهمن ۱۳۸۹

    خیلی خوبه
    ممنونم از زحمتی که میکشید




  166. علی
    ۲۴ بهمن ۱۳۸۹

    فقط باید بگم کولاک کردید
    عالِِِــــــــــــی بود




  167. فرامرز
    ۳۰ بهمن ۱۳۸۹

    سلام آقا کامران به نظر من جواب ندادی




  168. کامران
    ۱ اسفند ۱۳۸۹

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



  169. [...] هم یه آموزش خوب.به این جا مراجعه [...]




  170. فرامرز
    ۲ اسفند ۱۳۸۹

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




  171. کامران
    ۲ اسفند ۱۳۸۹

    میتونی از سیستم رایگان فیدبرنر استفاده کنی feedburner.google.com




  172. فرامرز
    ۲ اسفند ۱۳۸۹

    خیلی ممنون




  173. فرامرز
    ۳ اسفند ۱۳۸۹

    سلام راستی چجوری برای بلاگفا قالب درست کنم.




  174. sajadjoon
    ۶ اسفند ۱۳۸۹

    با تشکر خوب بود




  175. مجتبی
    ۹ اسفند ۱۳۸۹

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




  176. محسن جمالی
    ۱۲ اسفند ۱۳۸۹

    خدا قوت، مرسی.




  177. saeed
    ۱۴ اسفند ۱۳۸۹

    دست گلتون درد نکنه.به من کمک کرد




  178. آرش فداکار
    ۱۵ اسفند ۱۳۸۹

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




  179. shahrokhi
    ۱۵ اسفند ۱۳۸۹

    سلام

    ممنون بابت مطلب مفیدتون.




  180. شهاب
    ۱۷ اسفند ۱۳۸۹

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




  181. پژمان
    ۱۹ اسفند ۱۳۸۹

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




  182. مهتاب
    ۲۳ اسفند ۱۳۸۹

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




  183. امیر سروری
    ۲۳ اسفند ۱۳۸۹

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

    http://www.ittutorial.ir/?page_id=3853

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




  184. قهرمان تقی نژاد
    ۳ فروردین ۱۳۹۰

    سلام دوست عزیز.سال نو مبارک
    از طریق گوگل با سایتت آشنا شدم و خیلی خوشم اومد.
    منم یه وبلاگ شخصی دارم
    http://gtm396.zet.ir
    که فقط مطالب شخصی و تخصصی رشته خودمو مینویسم ولی دوست دارم یه وبلاگ پربازدید هم داشته باشم که این وبلاگ رو راه اندازی کردم
    http://grand.persianblog.ir
    خوشحال میشم با هم تبادل لینک کنیم.
    البته من قبلا یه وبلاگ پربازدید در میهن بلاگ داشتم به نام آموزشهای اینترنتی که خیلی زحمت کشیده بودم واسش و دارای رنک چهار شده بود ولی میهن بلاگ حذفش کرد.
    خیلی خوشحال شدم از دیدن سایتت.به منم سر بزن




  185. بهنام
    ۵ فروردین ۱۳۹۰

    با سلام و خسته نباشید
    سایت خیلی خوب و جالبی دارید همانطور که می دانید یکی از راه های افزایش بازدید و رتبه در گوگل تبادل لینک است
    اگر مایل به تبادل لینک با سایت ما هستید ابتدا ما را با نام
    .: پرشین بام | دانلود بالینک مستقیم :.
    و با آدرس
    http://www.PersianBam.ir
    لینک کنید و به ما اطلاع دهید تا لینک شما گذاشته شود
    و در صورتی که تمایل به تبادل بنر نیز داشتید اطلاع دهید

    با تشکر
    مدیریت پرشین بام




  186. پریسا
    ۱۶ فروردین ۱۳۹۰

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




  187. آرزو
    ۱۷ فروردین ۱۳۹۰

    بسیار بسیار عالی بود
    سایت بسیار عالی و جامعی دارید
    خیلی خیلی ممنون




  188. بهاری
    ۲۵ فروردین ۱۳۹۰

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




  189. aroom
    ۹ اردیبهشت ۱۳۹۰

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




  190. peyman
    ۱۲ اردیبهشت ۱۳۹۰

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




  191. رامین
    ۱۳ اردیبهشت ۱۳۹۰

    ممنون. خیلی عالی بود.




  192. رضا
    ۱۹ اردیبهشت ۱۳۹۰

    ممنون




  193. Heaven
    ۲۰ اردیبهشت ۱۳۹۰

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




  194. بهار
    ۲۹ اردیبهشت ۱۳۹۰

    سلام ممنون از اموزشهای خوبتون
    پروژه دانشگاهی من طراحی وب با phpهستش من قالب سایتم را در فتوشاپ طراحی کردم حالا توی تبدیلش به htmlوcssیه مشکلی دارم وقتی توی cssکدی مشابه
    background: url(images/logo.png) no-repeat;را میزنم عکسم را نشون نمیده لطفا سریع کمکم کنید چون زیادوقت ندارم




  195. امیر سروری
    ۳۰ اردیبهشت ۱۳۹۰

    @ بهار :ممنون بهار جان . وقتی برای یک عنصر بک گراند تعریف میکنی ، عرض و ارتفاع اون عنصر باید به اندازه تصویر باشه تا نمایش داده بشه .




  196. بهنام
    ۱ خرداد ۱۳۹۰

    واقعا” خیلی عالیه، ممنون
    من دنبال پیدا کردن سر فصل برای تدریس بودم که مطلب شما خیلی کمک کرد.




  197. بهار
    ۳ خرداد ۱۳۹۰

    سلام امیرجان مشکلش حل نشد ببین من وقتی انتهای کد مربوط بهfooterکه بک گراندش یک کادر با رنگ سیاه یکدست شماره رنگ را اضافه می کنم مشکل حل میشه (
    background: url/..) images/footer_slice.jpg) repeat-x #000;)
    اما برای عکسهایی که گرادینت داره یا دکمه ها یا مواردی مثل rss نمی دونم چکار کنم.ممنون میشم زودتر کمکم کنی
    راستی چرا باید ابتدا قالب را تو فتوشاپ طراحی کرد و بعد به cssوhtml تبدیل کرد نمیشه با دریم ویور یا فرانت پیج اینکار را کرد
    در ضمن من از فرانت پیج استفاده میکنم.



  198. سلام, ممنون خیلی عالیه
    فقط اگر یک کتاب جامع برای سئو هم بنویسید خیلی خوب میشه چون منبع کامل در این زمینه نیست(ندیدم).




  199. اردلان
    ۶ خرداد ۱۳۹۰

    نکات خیلی خوبی داشت . ممنون موفق باشی/




  200. حمید رضا
    ۸ خرداد ۱۳۹۰

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

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




  201. بهار
    ۱۰ خرداد ۱۳۹۰

    سلام چرا راهنماییم نمی کنید من منتظرم




  202. امیر سروری
    ۱۱ خرداد ۱۳۹۰

    بهار @ من فکر میکنم مشکل شما همون موردی بود که ذکر کردم . برای عناصر Inline مثل تگ لینک (a ) شما باید ابتدا اون رو به عنصر Block با استفاده از display:block تبدیل کنی و سپس عرض و ارتفاع متناسب با عرض و ارتفاع بکگراند بهشون بدی . برای عناصری مثل یک div هم فقط کافیه شما عرض و ارتفاع div رو تعیین کنی متناسب با اندازه تصویر پس زمینه . امیدوارم مشکل حل بشه . در ضمن برای آشنایی با عناصر inline و block هم شما میتونی مطلب زیر رو بخونی

    http://www.webtarget.ir/blog/css-display-visibility/




  203. امیر سروری
    ۱۱ خرداد ۱۳۹۰

    حمیدرضا @ از لطف شما ممنونم ، برای این کار مهمترین خصوصیت علاقه ، پشت کار و خلاقیت هست . البته داشتن امتیازاتی مثل زبان انگلیسی خوب و یا گرافیک هم بسیار تاثیر گزاره . برای شروع باید تصمیم بگیرید که هدفتون از وارد شدن در این رشته چیه ؟ برای وارد شدن فکر میکنم شما باید اصول طراحی وب سایت ( ساختار وب سایت ) رو مطالعه کنید و بعد از اون یادگیری html و css و photoshop در مراحل اولیه .

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

    http://www.ittutorial.ir/?p=2476




  204. Saeid
    ۱۴ خرداد ۱۳۹۰

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




  205. علی کاظمی
    ۲۱ خرداد ۱۳۹۰

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




  206. آیدین طوسی
    ۲۴ خرداد ۱۳۹۰

    واقعاً عالی بود ممنونم .




  207. وبلاگچی
    ۲۸ خرداد ۱۳۹۰

    با عرض سلـام خـدمت دوست عزیزم
    با توجه به تغییراتی که در وبلاگچی به وجود آمده بخشی برای درج لینک های تصویری برخی از دوستان صاحب سبک و خوش وب در نظر گرفته شده که مکانی به اندازه ۵۲ در ۵۲ پیکسل برای هر وبلاگ می باشد.
    لذا از شما دوست گرامی خواهشمندم جهت درج لینکتان در وبلاگچی یک تصویر که معرف وبلاگتان است در اندازه ی مذکور در هاست وبلاگ خود آپلود کرده لینک تصویر را برایم ارسال فرمایید.
    در حال حاضر برای عده ی معدودی از دوستان قدیمی و عزیزانی که مشترک فیدشان هستم این امکان فراهم شده و البته محتوا و زیبایی وب شما در این انتخاب بی تاثیر نبوده :)
    به امید موفقیت های روز افزون برای شما دوست گرامی
    وبلاگچی




  208. بالش طبی
    ۲۸ خرداد ۱۳۹۰

    خیلی کمکم کرد مرسی.




  209. amoo
    ۳ تیر ۱۳۹۰

    vaghean bi nazir bood …dase goletoon dard nakoneh♥




  210. fatemeh
    ۱۴ تیر ۱۳۹۰

    جداً که بی نظیـــــــــــــــــــــــــــــــــــری من نمدونم چطور میشه بابت این همه زحمت قدردانی کرد .




  211. hamed
    ۱۹ تیر ۱۳۹۰

    سلام
    دمتون گرم خیلی باحال بود




  212. حمیدرضا
    ۲۲ تیر ۱۳۹۰

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




  213. zeynooo
    ۲۹ تیر ۱۳۹۰

    سلام
    واقعا خسته نباشید؛ راستش من لیسانس نرم افزار دارم و خیلی دوست دارم که یه طراح سایت حرفه ای بشم .
    خیلی دوست دارم زبان هایی مثل php و c# رو هم به همین واضحی آموزش می دادین. ممنون میشم
    خیلی باحالین




  214. Behnam
    ۲۹ تیر ۱۳۹۰

    به تمام معنا ممنونم..




  215. ناشناس
    ۲۹ تیر ۱۳۹۰

    حداقل یک منبع می نوشتی عزیزم. net.tutsplus.com




  216. میر مجتبی
    ۳۱ تیر ۱۳۹۰

    سلام. آموزش بسیار عالی بود اما در بحث CSS نویسی مشکل دارم ممنون میشم توضیح بیشتری بدید.

    وقتی که می خوام header_slice.png رو در CSS قرار بدم با کدهای آماده ی خودتون هم تست کردم اما نشون داده نشد ! ممنون میشم راهنمایی کنید.




  217. Matin
    ۶ مرداد ۱۳۹۰

    با درود و سپاس فراوان



  218. خوب نبود.




  219. مصطفی
    ۱۷ مرداد ۱۳۹۰

    عالی بود . حرف نداشت .




  220. جواد نوروزی
    ۲۲ مرداد ۱۳۹۰

    واقعاً‌ متشکرم مطلب بسیار خوب و پرثمری بود
    خدا خیرتان دهد




  221. محسن
    ۲۳ مرداد ۱۳۹۰

    سلام ، ببخشید من یه سوال دارم
    برای اینکه من هم مثل شما نوشته های داخل تگ pre> رو اینقدر قشنگ داشته باشم چی کار کنم




  222. mohammad
    ۲۵ مرداد ۱۳۹۰

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




  223. saiede
    ۲۶ مرداد ۱۳۹۰

    thanks a lot




  224. بهار
    ۶ شهریور ۱۳۹۰

    سلام خسته نباشید من با خوندن آموزشتون تونستم یه قسمتهایی از وبم را طراحی کنم ممنونم ازتون اما ۲ تا سوال دارم
    ۱٫قسمتهایی از آموزشتون که کدهای html را قرار دادید و داخل کادر سفید رنگ را چطور توی وبتون گذاشتید یعنی باید چه کدی براش بنویسیم
    ۲٫هر کاربری که یه دیدگاهی مینویسه بعد از ارسال بالا نمایش داده میشه میخوام بدونم با چه کدی اینکار را میکنید که یه فضایی بهش اختصاص داده میشه و نمایش داده میشه
    ممنون لطفا زود زود کمکم کنید که وقتم تنگه




  225. محمود
    ۹ شهریور ۱۳۹۰

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




  226. باران
    ۱۰ شهریور ۱۳۹۰

    معرکه بود. دمتون داغ شما فرشته ی نجات من بودین. باور کنید تو کل وب همچین آموزشی پیدا نکردم




  227. مهربان
    ۱۴ شهریور ۱۳۹۰

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




  228. مهربانK
    ۱۴ شهریور ۱۳۹۰

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




  229. مهربانK
    ۱۴ شهریور ۱۳۹۰

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




  230. حسین
    ۱۶ شهریور ۱۳۹۰

    خیلی عالی بود ممنون




  231. محسن
    ۲۲ شهریور ۱۳۹۰

    خیلی ممنون . هر کسی اسن طوری دانشش رو مجانی در اختیار دیگران نمیذاره




  232. حلوایی پور
    ۲۳ شهریور ۱۳۹۰

    مرسی ممنون




  233. سعید
    ۲۴ شهریور ۱۳۹۰

    سلام و درود بر شما بخاطر اینهمه زحمت و محبت
    وبلاگی دارم تصویری سمت چپ هست میخوام هر از گاهی اون رو عوضش کنم البته میتونم یوزر پسورد را در اختیارتون بذارم خودتون زحمت بکشید . ممنون .
    اگر امکان داره به من ایمیل بدهید لطفا . سپاسگزارم از شما .




  234. محمدرضا
    ۲۶ شهریور ۱۳۹۰

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




  235. fateme mohebbi
    ۲۷ شهریور ۱۳۹۰

    برای انسان شریفی مثل شما خیلی احترام قائلم. و برای موفقیتتون دعا می کنم.




  236. میلاد
    ۲۷ شهریور ۱۳۹۰

    سلام کامران جان یه سوال داشتم ممنون میشم جواب بدی من یک قالبی برای وبلاگم (blogfa)ساختم ولی وقتی قالب را جایگزین قالب قبلی میکنم این پیغام خطا رو میده :
    (قالب وبلاگ میبایست محتوای کد <BLOGFA> باشد. )
    می خواستم راهنمایی کنید ممنون.




  237. ارشاد
    ۳۱ شهریور ۱۳۹۰

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




  238. الهام
    ۷ مهر ۱۳۹۰

    سلام مطالب تون واقعا عالی هستند. ممنون




  239. مسعود
    ۸ مهر ۱۳۹۰

    سلام
    ماشالله با این همه نظر نمیدونم می رسید کامنت منو بخونید یا نه…
    آموزشتون خوبه ولی این هم دقیقن مثل آموزش قبلیه فقط یه کم پیچیده تر
    لطف کنید این دفعه آموزشی که می زارید توش از بقیه تگ ها استفاده شده باشه
    که کار باهاشونو یاد بگیرن همه
    مثل:
    display
    position
    و….
    بازم ممنون…




  240. سجاد دقیقه 90
    ۱۱ مهر ۱۳۹۰

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




  241. میلاد
    ۱۱ مهر ۱۳۹۰

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




  242. قیمت تبدیل psd به html
    ۱۴ مهر ۱۳۹۰

    [...] تبدیل نمی کنم http://ashiyane.org/forums/showthread.php?t=22690 اینم بد نیست: http://www.ittutorial.ir/%D8%A2%D9%8…A%D8%AF%D8%A7/ پاسخ با نقل قول   + پاسخ به موضوع [...]




  243. قیمت تبدیل psd به html
    ۱۴ مهر ۱۳۹۰

    [...] تبدیل نمی کنم http://ashiyane.org/forums/showthread.php?t=22690 اینم بد نیست: http://www.ittutorial.ir/آموزش-طراحی…ز-ابتدا/ خدایی این رو هم تبدیل کن( من ۲۵۰مگ دانلود کنم حجم نتم [...]




  244. بهار
    ۱۹ مهر ۱۳۹۰

    سلام چرا جواب من امثال منو نمیدید چطوری می توم برای سایتم ارسال دیدگاه بذارم لطفا به طور کامل اموزش بدید




  245. حجت
    ۲۳ مهر ۱۳۹۰

    با سلام عرض ادب
    آموزش خوب و مختصر و کاربردی از HTML و CSS است




  246. مهران
    ۲۷ مهر ۱۳۹۰

    very good




  247. şişme bebek
    ۲۹ مهر ۱۳۹۰

    فرامرز

    ۱۰ بهمن ۱۳۸۹
    سلام دوست عزیز چگونه می توان برای سایت سیستم عضو گیری را قرار دهم




  248. ali
    ۱ آبان ۱۳۹۰

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




  249. نرگس
    ۶ آبان ۱۳۹۰

    خیلی مفید بود. ممنون




  250. طراحی سایت
    ۵ آذر ۱۳۹۰

    مرسی عالی بود




  251. نون
    ۲۱ آذر ۱۳۹۰

    ممنون خیلی مفید بود




  252. شریف
    ۲۲ آذر ۱۳۹۰

    با سلام

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

    تشکر




  253. امیر
    ۲۶ آذر ۱۳۹۰

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

    تمام تمارین این صفحه را، خط به خط، در یک Master Page امتحان کردم، ولی منو ها با CSS تنظیم نشد. عکس SlidBar هم نمایش داده نشد.
    چه باید کرد؟
    از کجا یاد بگیرم که: چه CSSی سازگار با C# 4، و استفاده در Master Page ها و صفحات آن وجود دارد؟

    با تشکر
    گودرزی




  254. parva
    ۱۱ دی ۱۳۹۰

    سکوت میکنم گاهی با کلمات نمیشه همه حسمان را بگوییم..خیلی گلی




  255. parva
    ۱۱ دی ۱۳۹۰

    میخام یک سایت درست کنم که داخلش زبان asp, html, js ,,وجود داشته باشه ولی وقت ندارم باید زود تحویل استادم بدم خیلی ماهر نیستم میشه کمکم کنید به ایمیلم بزنید لطفا ..منتظر جوابم…مرسی




  256. محسن
    ۱۸ دی ۱۳۹۰

    سلام
    مدتی هست که این سایت را برایم طراحی کرده اند اما نیمه کاره .
    اگر لطف کنید من را راهنمایی کنید :
    ۱- چطور میتونم قالب های آماده رو تهیه و روی آدرس سایتم آپلود کنم ؟
    ۲-چطور کار کردن با cpanel رو یاد بگیرم ؟
    ۳-آیا دانشگاهی هست که از راه دور بتونم طراحی سایت بخونم ؟
    ممنون




  257. shoajy
    ۲۳ دی ۱۳۹۰

    verygood thank




  258. nsy
    ۲۳ دی ۱۳۹۰

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




  259. روژ
    ۲۵ دی ۱۳۹۰

    عالی بود کلی یادگرفتم




  260. 313
    ۱۹ بهمن ۱۳۹۰

    سلام، واقعا ممنون
    میتونم اگر سوال یا مشکلی در زمینه ی طراحی سایت داشتم ازتون بپرسم؟
    بنده ترم آخر کامپیوتر نرم‌افزار هستم و برای پروژه‌ی پایان‌ترم باید طراحی سایت ارائه بدم. ممنون میشم اگه بتونم ازتون کمک بگیرم. گرچه تا همین‌جا هم ممنون که از مطالبتون استفاده کردم.
    موفق باشین…




  261. xxx
    ۲۸ بهمن ۱۳۹۰

    سلام
    خواستم بدونم این اموزش اموزش طراحی سایت dynamic هست یا static?




  262. سویدا
    ۸ اسفند ۱۳۹۰

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




  263. IE 6
    ۹ اسفند ۱۳۹۰

    سایت با IE 6 خراب است




  264. 2
    ۹ اسفند ۱۳۹۰

    thank yue




  265. mona
    ۲۴ اسفند ۱۳۹۰

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




  266. مبتدی
    ۲۸ اسفند ۱۳۹۰

    سلام

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

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




  267. سعید
    ۷ فروردین ۱۳۹۱

    خیلی ممنون واقعا تک بود
    حال همه دست به دست همدیگر دهیم تا ایران به جهان ثابت کینم




  268. نفیسه
    ۹ مرداد ۱۳۹۱

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




  269. مرتضی
    ۱۲ مرداد ۱۳۹۱

    سلام.واقعا ممنون-عالی بود.من حدود یک ساله دارم
    دنبال چنین چیزی میگردم والان سایت شمارو پیدا کردم
    وخوندم.واقعا لذت بردم.امیدوارم بتونم یاد بگیرم.

    مجددا تشکر میکنم.
    ارادتمند شما مرتضی




  270. جعفر غلامی
    ۱۹ اردیبهشت ۱۳۹۲

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



دیدگاه خود را بنویسید