آموزش طراحی وب سایت از پایه – قسمت چهاردهم

315
14558

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

تعیین موقعیت عناصر در هر جایی از صفحه که شما دوست دارید:

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

نمایش ساختار:

زمانیکه از css برای استایل دهی به سایت
های خود استفاده می کنید برای هر قسمت از سایت خود یک Border در نظر بگیرید
به این ترتیب به خودتان کمک می کنید تا به راحتی برای آن قسمت خاص استایل
های مد نظرتان را بیافزاید وتاثیر آن را مشاهده نمایید، تنها باید به خاطر
داشته باشید که پس از اینکه کارتان با آن قسمت تمام شد(css موقتی)border ای
را که افزوده اید حذف نمایید. بیایید برای خود قسمتی از سایت را یاد آوری
کنیم:

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Contact Us at Bubble Under</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<link href=”style1.css” rel=”stylesheet” type=”text/css”/>
</head>
<body>
<div id=”header”>
<div id=”sitebranding”>
<h1>BubbleUnder.com</h1>
</div>
<div id=”tagline”>
<p>Diving club for the south-west UK – let’s make a splash!</p>
</div>
</div><!– end of header div –>
<div id=”navigation”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”about.html”>About Us</a></li>
<li><a href=”contact.html”>Contact Us </a></li>
</ul>
</div>
<div id=”bodycontent”>
<h2>Contact Us</h2>
<p>To find out more, contact Club Secretary Bob Dobalina on 01793 641207 or email <a
href=”[email protected]”>[email protected]</a>.</p>
</div><!– end of bodycontent div –>
</body>
</html>

حالا
بیایید به فایل css خود یک borderبه هر یک از عناصر خود در صفحه اضافه
کنیم. این استایل را در انتهای فایل css خود درج نمایید، بنابراین باعث می
شود تا برای تمامی عناصر سایت خود بردر را بکار ببرید و عنصری از قلم نیفتد
و چنانچه عنصری دارای بردر است این خصیصه برایش تکرار خواهد شد.

 

#header, #sitebranding, #tagline, #navigation, #bodycontent {
border: 1px solid red;
padding: 2px;
margin-bottom: 2px;
}

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

design-web-141.jpg
این
تصویر کمی زشت به نظر می رسد، درسته؟ این تصویر حتی برای مدت کوتاهی زشت تر
هم خواهد شد زمانیکه ما متن بخش درباره ما را جابجا می کنیم. همانطور که
شما هم می دانید زمانیکه میخواهید دکوراسون منزل خود را تغییر دهید تمامی
لوازم منزل خود را جا بجا می کنید و جای اصلی آنها را تغییر می دهید،
زمانیکه در حال انجام این کار هستید و نصفی از کار خود را انجام داده اید
با اینکه ظاهر منزل به هم ریخته است اما می دانید این جریان موقتی است و
این به هم ریختگی پایان خواهد یافت. در مورد وب سایت ما و این تصویر نیز
دقیقا همین روند پابرجاست.

موقعیت دهی مطلق( absolute) :

شاید به جرات
بتوان گفت که راحت ترین روش برای موقعیت دهی به عناصر استفاده از موقعیت
دهی مطلق برای عناصر است. در هنگام استفاده از موقعیت دهی مطلق می بایست
موقعیت آن عنصر را از بالا و چپ صفحه نیز معین کنیم. تصور کنید از یک مغازه
جواهر فروشی می خواهید خرید کنید و آدرس یک قطعه طلا را می خواهید به شخص
فروشنده بدهید، می گویید ” می توانم آن ساعتی را که در ستون پنجم است و از
بالا در ردیف سوم قرار دارد را ببینم؟”
استفاده کردن از موقعیت دهی مطلق
به سادگی انجام می شود تنها کافیست که جهت های مد نظر خود را (موقعیت آن
عنصر از بالا و چپ) در کنار موقعیت مطلق داده شده به عنصر در فایل css آن
اضافه نمایید. در مثال زیر، ما موقعیت های top و left را برای یک div با
عرض 90px در نظر گرفته ایم تا هم از بالا و هم از سمت چپ پنجره مرورگرمان
به میزان px200 فاصله ایجاد کرده ایم.

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Absolute Positioning</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
<style type=”text/css”>
#redblock {
position: absolute;
top: 200px;
left: 200px;
color: white;
background-color: red;
width: 90px;
height: 90px;
padding: 5px;
}
</style>
</head>
<body>
<h1>Absolute Positioning</h1>
<div id=”redblock”>This is the red block.</div>
<p>The red block is positioned 200 pixels from the top and 200 pixels from the left.</p>
</body>
</html>

design-web-142.jpg

 

آماده شدن برای جابجایی عنصر با استفاده از موقعیت دهی:

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

– فایل style. css را باز کردهو پدینگ و بردر داده شده به عناصر Body را پاک کنید.
– در عوض به جای آن، دو خصیصه padding و margin را نوشته و مقادیر آنها را برابر با صفر قرار دهید.
استایل های بکار برده شده برای عناصر body شما در فایل css می بایست مانند زیر باشد:

 

body {
background-color: #e2edff;
font-family: Verdana, Helvetica, Arial, sans-serif;
line-height: 125%;
padding: 0;
margin: 0;
}

 

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

 

design-web-143.jpg

تگ
های سر تیتر درون صفحه یعنی BubbleUnder.com و About Us به وسیله مارجین
احاطه شده اند. که این مارجین توسط مرورگر به آنها داده شده حتی اگر ما
خودمان به آنها مارجین ندهیم. ایده خوبی است که بیاییم و این مارجین ها را
از بین ببریم وسعی کنیم تا تیترها تا آنجایی که امکان دارد به گوشه بالا و
سمت چپ div دربرگیرنده آن نزدیک شوند. این امر باعث می شود تا موقعیت دهی
به تیتر ها برای ما راحتتر شده و همچنین مطمئن می شویم که صفحه وب ما درون
تمامی مرورگر ها به صورت یکسان نمایش می یابد.

– در فایل style.css تگ h1 را بیابید.
– خصوصیت جدیدی به آن اضافه نمایید و مقدار مارجین آن را برابر با صفر قرار دهید.

h1 {
font-size: x-large;
background-color: navy;
color: white;
padding-top: 2em;
padding-bottom: .2em;
padding-left: .4em;
margin: 0;
}

– tagline p# را نیز درون فایلcss یافته و مقدار مارجین آن را حذف نمایید:

 

#tagline p {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .2em;
padding-left: .8em;
margin: 0;
}

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

 

design-web-144.jpg
خوب حالا در این مرحله سایت شما از هر زمان
دیگری زشت تر خواهد شد اما مهم نیست و نباید نگران باشید چرا که این امر
موقت است و تنها باید توجه داشته باشید که برای اینکه به راحتی جابجا شدن
عناصری از صفحه را که می خواهید و به صورت مطلق جای آنها را درون صفحه معین
کنید را مشاهده نمایید به آنها Border ای با رنگ قرمز بدهید تا جابجایی
آنها برایتان مشخص باشد. سپس به انتهای فایل css خود خصوصیت جدید زیر را
اضافه نمایید.

#navigation, #bodycontent, #header {
position: absolute;
}

حالا فایل css را ذخیره کرده و مجددا صفحه سایت را refresh نمایید.

• به هیچ وجه از به هم ریختگی سایت خود نگران نشوید !

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

 

design-web-145.jpg
همانطور که میبینید هر سه
قسمتی که مقدار مطلق گرفته اند در گوشه چپ و بالای سایت بر روی یکدیگر
افتاده اند، چون ما به مرورگر برای هر یک از آنها مقدار مجزایی نداده ایم و
بنابراین مرورگر تنها آنها را همانطور که در سورس مقدار دهی شده اند نمایش
می دهد. تنها می داند که آنها به طور مطلق مقدار دهی شده اند و اینکه
موقعیت هر یک از آنها کجاست را نمی داند.
پس بیایید با جابجا کردن
محتوای اصلی سایت و منوی راهبری به سمت پایین محتوای تگ Header را ببینید.
در فایل css خود دستور زیر را اضافه کنید:

#navigation, #bodycontent {
top: 120px;
}

این
دستور باعث می شود تا دو عنصر , #navigation #bodycontent به سمت پایین
شیفت یابند. این تغییر را می توانید در تصویر زیر ببینید. حالا موقعیت از
top را برای این دو عنصر تعیین کردیم اما همانطور که در شکل می بینید، منوی
راهبری و متن درباره ما بر روی هم دیگر افتاده اند پس از سمت چپ به آنها
موقعیت (فاصله) می دهیم تا در کنار یکدیگر قرار گیرند. به همین دلیل به
عنصر bodycontent به اندازه px200 از سمت چپ فاصله می دهیم تا از منوی
راهبری که پهنایی برابر با 180px دارد فاصله گرفته و در کنار آن قرار گیرد.

 

design-web-146.jpg
پس با توجه به توضیحات داده شده آنچه که می بایست به css خود اضافه کنید تا ظاهر سایت درست شود، بدین صورت است:

#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 120px;
}
#bodycontent {
left: 200px;
}

 

design-web-147.jpg

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

– محدوده header و tagline تا انتهای سطر ادامه ندارند.
– بین tagline و h1 فاصله بیهوده ای وجود دارد.
– پدینگ و بردر های قرمز داده شده به عناصر را می بایست حذف کنیم.
– یک یا دو کامنت می بایست به css مان اضافه کنیم تا توضیح بدهیم که در این قسمت چه کاری انجام داده ایم.

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

–  تگ body و منوی راهبری را از بالا به جای px120 به میزان 107px فاصله دهید
. این کار باعث می شود تا پس از حذف کردن بردر های قرمز فاصله میان تگ ها
مناسب باشد.
– سپس به مرورگر ، تگ headerو tagline بگویید تا سطر را به
طور کامل اشغال کنند.(این کار با اجرای دستور width براربر با 100% عملی
خواهد شد.)
– بردرهای قرمز رنگی را که پیش تر ایجاد کرده بودیم را حذف می کنیم.
– در نهایت فکر خوبیست تا برای تمامی عناصری که موقعیت مطلق داده ایم کامنتی برای توضیح بنویسیم تا بدانید که چکاری انجام داده اید.

به این ترتیب آنچه که با توضیحات بالا برای ایجاد تغییر در فایل css خود ایجاد کرده ایم، به صورت زیر خواهد بود:

 

/*
This section deals with the position of items on the screen.
It uses absolute positioning – fixed x and y coordinates measured
from the top-left corner of the browser’s content display.
*/
#navigation, #bodycontent, #header {
position: absolute;
}
#navigation, #bodycontent {
top: 107px;
}
#bodycontent
left: 200px;
}
#header {
width: 100%;
}

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

 

design-web-148.jpg

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

#navigation {
width: 180px;
background-color: #7da5d8;
}
#header {
border-top: 3px solid #7da5d8;
}

اینک فایل css خود را ذخیره کرده و مرورگر خود را refresh نمایید. تصویر نهایی به این صورت خواهد بود:

 

design-web-149.jpg

ادامه دارد اگر مورد استقبال قرار گیرد!

ترجمه: خانم طلوع کوچک
بازبینی : بهزاد علی بیگی
www.web-scala.com

برای مقاله های بیشتردر زمینه طراحی سایت و دریافت pdf  مقالات ما را دنبال کنید:

 

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

کانال تلگرام عصرنوشتن

315 دیدگاه

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

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

  3. 🔴🔴🔴🔵
    سلام استاد و ضمن عرض خسته نباشید به شما و همکاران محترم
    شما با این آموزش هایی که دارید قرار میدید، فقط دارید نون خودتون رو قطع می کنید. اینو میدونستید ؟
    نه تنها روزیه کاری خودتون رو قطع می کنید، بلکه افراد امثال خودتون رو هم دارید بیکار میکنید، و یعنی نونی که برای خونشون و سفرشون دارن
    درمیارن رو شما می بُرید.
    بعد اینکه این مطلب را منتشر کردید، کمی فکر کنید ببینید که از کجا دارید صدمه می خورید، چون کلی انرژی های منفی شما رو دنبال می کنه و از
    یک روی دیگه خدا از افرادی که باعث قطع کردن روزیه دیگران می شوند ناخوش میشه…

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

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

  5. باسلام
    اگه امکانش هست کل فایل cssوhtml راکه ازجلسه اول تا الان تشکیل شده را در سایت قراردهید تابهتر توضیحات شما را متوجه شویم
    با تشکر از زحمات بی دریغتان

  6. من واقعا خوشم امد باریکلا به نویسنده(: لطفا” اگه میشه توضیح بدید که اینو چطور به .com یا .ir تبدیل کنم
    با تشکر

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

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

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

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

  11. خیلی ممنون بابت توضیحات
    فقط یه سوال از خدمتتون داشتم.با برنامه expression web 4 هم به همین صورت میشه سایت ساخت.فرمت کلیش مثل همه؟

  12. با سلام از اینکه ای آموزش را در سیت گذاشتین سوالم اینه که اگر این ۱۴ مرحله انجام گیرد سایت طراحی شده و آماده استفاده میباشد یا ادامه دارد ۲ اینه که پهنای باند irبه نوع طراحی ربطی دارد یا خیر ۳ آیا می شود تلفن جهت مشاوره در اختیار من بگذارید تا با شما تلفنی مشاوره بگیرم و چرا طراحان سایت مبالغ سنگین رو جهت طراحی میگیرند از اینکه سوالاتم زیاد شد ببخشید ممنون میشم جواب بدین با تشکر

    • سلام دوست عزیز بله با این ۱۴ مرحله می توان سایتی طراحی کرد ولی سایتی ایستا خواهد بود یعنی با اربر هیچ رابطه ای بر قرار نخواهد کرد ۲خیر ربطی به نحوی طراحی نداره

    • با سلام.من مدت هاست به دنبال راهي ميگشتم كه بتونم يك سايت طراحي كنم.از اموزشتون ممنونم.امكانش هست فايل PDF تون را در اختيارم بگذاريد؟

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

  14. سلام
    مطالبتون خیلی پر بار بود
    ببخشید امکان داره سوالی درباره طراحی قسمتی از سایت بپرسم
    سوال ۱ :من یه وبلاگ در رز بلاگ دارم و یه قالب رایگان از اون انتخاب کردم
    ولی می خام قسمت های : موضوعات ، آمار بازدیدکنندگان ، ارسال نظرات آخر مطالب ، وفرم ارتباط با ما
    را خودم طراحی کنم .اگر امکان داره برام بگین باید از چه زبان های تحت وب ( منظورم : html –css –php- -جاوااسکریپت –آژاکس –جی کوئری و…) و از چه نرم افزارهایی استفاده کنم و آن کدها را در کجای قالب قرار بدهم .
    لطفا توضیح هم بدهید .

    با تشکر

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

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

  16. دانشجوی کارشناسی کامپیوترم.از این ۱۴ قسمت کلی استفاده کردم خیلی کامل و مفید بود.لطفا ادامه اش رو بذارید.اینجوری نصفه نمونه..

  17. سلام عالیه اموزشتون.خیلی تشکر میکنم ازتون
    همچین خوب بود که کُلوحَجمعین سایتتون رو BOOKMARK کردم.مرسی ممنون

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

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

    • دوستان ادامه نداره این اموزش خلاصه کتابه Build Your Own Website هستش اول این اموزش رو تا اخر بخونید بعد کتاب رو دانلود کنید بخونید

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

  21. با عرض سلام خسته نباشید.دانشجوی برنامه نویسی هستم.مطالب خیلی کامل بود لذت بردم.ارزش اینو داشت یه کامنت خسته نباشید بذارم

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

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

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

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

  26. سلام.واقعا عالیه
    من باید ی سایت مبایل طراحی کم ولی هیچی بلد نیستم!
    نمیدونم چجوری باید واس سایتم منو بذارم
    لطفا اینم توضیح بدید

  27. خسته نباشید
    راستی چرا از روش float برای شناور ساختن بخش های مختلف صفحه استفاده نکردید؟
    ادامه آموزشو کی میذارید لطفا 🙁
    ممنون میشم زحمت ادامهء آموزشو بکشید
    چشم به راهیم

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

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

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

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

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

  33. با سلام و تشكر از اموزش خوبتون.من برنامه notetab را دانلود كردم و در ان نوشتم اما خروجي ان فارسي نبود چيكار بايد بكنم تا خروجي فارسي باشد؟ اگر بخواهيم خروجي از راست به چپ باشد براي برنامه هاي فارسي بايد چكار كنم؟ ممنونم اگر راهنمايي بفرمائيد؟

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

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

  36. بنام بهترين دوست
    سلام
    كارتون خيلي خوبه
    تازه دارم طراحي وب سايت رو ياد مي گيرم وخيلي پيشرفت كردم-بيشتر مطالبي كه تازگي ها بهش برخورد ميكنم تكراري وغير مفيد هست-اما سايت شما خيلي خوبه!
    بزرگترين حسن اش اينه كه هم علمي وهم كاربردي هست.
    خواهش ميكنم ادامه بدين.
    اولين بارمه كه سايت شمارو ديدم-واگه خدا بخاد آخرين بارم نخواهد بود.
    توجزوه هام از مطالب سايت شما استفاده ميكنم وآدرسش رو هم مي نويسم تا ديگران هم بهره ببرند.
    تو سبك آموزشتون هم ادبيات خيلي خوبي داريد واين باعث ميشه مخاطب علاقمند،ارتباط خوبي با نويسنده برقرار كنه.
    ازتون مچكرم وبراتون بهترين ها رو آرزو ميكنم.

  37. زنده اید؟!!!!! چرا اینقدر دیر به دیر قسمتهارو ارائه میدید؟!!!!! موهامون رنگ دندونامون شد!!!! آقا دست شما درد نکنه ولی تو رو خدا زودتر مابقی قسمتارو بذارید از 2011 تا الان به نظرتون آموزشتون زیاد طول نکشیده؟!!!! خوشتون میاد ملت رو چشم انتظار بذارید؟!!!!!!یکی هم که کار خوب و درست حسابی میکنه خون میاره به دل آدم! خو باید منتتون رو بکشیم؟!!!!!!!!!!!!!!!!!!!

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

  39. سلام خسته نباشین از آموزشتون ممنون لطفا ادامه بدین خوب این همه ازتون خواستن ادامه بدین چرا این کارو نمیکنین؟منتظر ادامه آموزش هستیم

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

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

  42. به نام خدا
    سلام
    من همو رو خوندم، خیلی خیلی عالی بود…
    امیدوارم هرچه زود تر بقیه ی قسمتاشم بذارید…
    {یاعلی مدد}

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

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

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

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

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

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

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

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

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

  52. تمام شد. پس اشتراک subscription و رمز گذاری و تقسیم بندی سایت به بخش قابل رویت و بخش غیر قابل استفاده و اینها چی شد؟

  53. مچکرم واسه آموزش خوبتون… منتظر قسمت 15 هستــــــــــــم ^_^
    و اینه می شه یه توضیحی هم راجبع به طراحی قالب بدید و اگه در آینده اونم یاد بدید که معرکس

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

  55. با سلام به دوستان و استاد بهزاد
    شناسه و رمز عبور یک سایت که فعال می باشد به بنده داده شده من بلد نیستم که از کجا وارد مدیریت سایت شوم و لاگین کنم؟
    سایت با html و aspx نوشته شده!!
    http://www.yoursite.ir
    روی سایت یک ایمیل هم هست
    [email protected]
    و به ایمیل ها چگونه دسترسی داشته باشم
    با تشکر

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

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

  58. سلام.خسته نباشید.
    واقعا ممنونم.
    من کلاس phpمیرم بدونه اینکه cssوhtmlبلد باشم چون استاد گفت از صفر شروع میکنم ولی متهسفانه cssوhtmlرو زیاد واسمون باز نکرد و این آموزش خیلی به من کمک کرد.ممنون میشم اگه ادامه بدین

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

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

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

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

  63. مطالب رو به روش بسیار خوبی آموزش می دید, واقعاً خسته نباشید و خیلی ممنون.
    بی صبرانه منتظر ادامه آموزش هاتون هستیم.
    موفق و پایدار باشید

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

  65. برنامه ریزی منظم، وسواس شدید در مورد کیفیت کار، کلاسه بندی دقیق اصول نشر، تعهد به قولی که به بازدید کننده برای به روز رسانی دادید و دسته اول بودن مطالب، فقط چند نکته از نقاط قوت این برنامه آموزشی هست.
    تنها آیتمی که من در این مقاله نمی پسندم اینه:
    “ادامه دارد اگر مورد استقبال قرار گیرد!”
    و متوجه نمی شم چطور ممکنه احتمال بدید مورد استقبال قرار نمی گیره!
    من این سری مطالب رو از نظر کیفیت آموزش، سئو و شیوایی بیان بررسی کردم و باید بگم کار، به خوبی انجام شده.
    حتماً موفق خواهید شد

  66. با سلام
    اگه ممکنه لطفا pdf آموزش رو برام ایمیل کنید؛ ممنون میشم. نوشتید توی گوگل پلاس و فیسبوک بریم بگیریم ظاهرا، خب همینجا برای دانلود میذاشتید!!
    ممنون میشم برام ایمیل کنید
    پیشاپیش از حسن توجه شما متشکرم 🙂

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

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

  69. مرسیییییییییییییییییییییی و متشکر که دید ما رو به طراحی سایت باز کردین…
    استقبال ازین بیشتر ؟
    لطفا ادامه بدین

  70. استقبال استقبال استقبال استقبال استقبال استقبال استقبال استقبال استقبال استقبال استقبال ………..

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

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

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

  74. سلام بهزاد جان خسته نباشی
    آقا انگار مارو فراموش کردی ! لطفــــــاً قسمت 15 اضافه کن !
    مرســــــــــــــــــــی

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

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

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

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

  79. با سلام
    من واقعا از این همه مطلب مهم و با ارزش لذت بردم. به قول ائمه (ع) زکات علم نشر آن است. شما هم زکاتتونو پرداخت کردید. بازم ممنونم

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

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

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

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

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

ارسال یک پاسخ