طراحی یک قالب واکنش گرا ساده (تمرین اول)

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

بخش پایانی - آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5

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

بخش دوم - آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5

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

آموزش طراحی قالب ریسپانسیو با استفاده از Css3 و Html 5

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

قالب ریسپانسیو چیست و چه کاربردی دارد ؟

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

چگونه طراح وب سایت شویم ؟

web-designer thumbnail1

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

معمولا شرکتها ، موسسات یا افرادی که می خواهند برای خودشان یک وب سایت شخصی طراحی کنند ، در همان ابتدا نیازشان را بر روی کاغذ به صورت مکتوب می نویسند تا ببینید هدفشان از طراحی وب سایت چه چیزی می باشد . (فروشگاه اینترنتی / انجمن / سایت آموزشی و...)این مرحله باید بدرستی و با دقت ویژه بررسی شود بدلیل اینکه ممکن است بعد از انجام دادن مراحل اولیه توسط طراح یکدفعه شما نیاز دیگری داشته باشید که باید به وب سایت شما اضافه شود که امکانش وجود نداشته باشد و هزینه اولیه شما بدلیل عدم دقت کافی در مرحله اول هدر برود .

طراحی قالب سایت شماره 2 با HTML و CSS

PSD-to-HTML-tutorial-asarayan-1.33

آموزش طراحی سایت مرحله به مرحله
روز قبل طراحی قالب شماره 2 را در نرم افزار فتوشاپ مرحله به مرحله برای شما توضیح داده ام.

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

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

طراحی قالب سایت شماره 3 با HTML و CSS

 head

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

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

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

 
1. برای شروع مثل درس اول و دوم  یک فولدر به نام tem3 ایجاد و دو فولدر با نام های Images وcss ایجاد کنید .
2. در مرحله بعد نوت پد را باز کنید یکبار فایل را با نام Index.html در پوشه اصلی ویکبار بانام Style.css درپوشه Css ذخیره کنید .

طراحی قالب سایت شماره 4 با HTML و CSS

head

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

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

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

طراحی قالب سایت شماره 5 با HTML و CSS

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

تبدیل قالب فتوشاپ به HTML

طراحی قالب سایت شماره 6 با HTML . CSS

head

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

طراحی قالب شماره 1 با Html و CSS

PSD-to-HTML-tutorial-asarayan-1.40

دیروز برای شما بازدید کنندگان عزیز طراحی قالب شماره 1 را در فتوشاپ به صورت کامل آموزش دادم. امروز می خواهم قالب طراحی شده را با استفاده از HTML و CSS شبیه سازی کنم . سعی میکنم مرحله به مرحله جلو برم تا کسی با سوالی مواجه نشه . هر جایی از مطلب آموزشی برای شما قابل فهم نبود تیکت بزارید تا در اولین فرصت پاسخ بدهم.
برای شروع فتوشاپ را باز کنید . قالبی که دیروز طراحی کرده بودیم را با زدن کلیدهای Ctrl+O وارد کنید.
1. همانطور که درتصویر زیر مشاهده می کنید قالب طراحی شده ما نمایش داده می شود . می خواهیم قسمت هایی از تصویر را برش داده و در طراحی قالب خودمان استفاده کنیم .
در اولین مرحله یک فولدر به نام tem asarayan ایجاد کرده و دو فولدر به نام Images برای تصاویر  و فولدر Css برای فایل استایل ظاهری قالب ایجاد می کنیم .

 

آموزش تصویری ساخت نقشه سایت

sitemap-icon

چند نفر از کاربران درخواست ساخت نقشه سایت را از بخش پشتیبانی کرده بودند که سعی میکنم این آموزش را به طور کاملا تصویری تا مرحله آخر که سایت در موتور جستجو ثبت می شود را ایجاد کنم .
نقشه سایت چیست ؟
خیلی راحت بخواهم این کلمه را بدون هیچ پیچیدگی توضیح بدهم یک فایل متنی هست با فرمت XML که تمام لینکهای سایت شما در آن قرار می گیره و موتور جستجو وقتی وارد سایت شما میشه ار طریق این لینکها صفحات شما را ایندکس می کند.
روش ساخت نقشه سایت
بعضی از سایتها به صورت اتوماتیک ماژول هایی روی آنها نصب میشه که به صورت پیش فرض بعد نصب و فعال کرده ماژول مورد نظر یک نقشه سایت برای شما ایجاد می کند .
اما در بعضی از مواقع سایت شما این قابلیت را نداره و شما باید یا به صورت دستی (پیشنهاد نمی شود بدلیل وقت گیر بودن و امکان خطا) یا به صورت اتوماتیک از طریق سایتهایی که وجود داره اینکار را انجام بدهید . روشی که من می خواهم در ادامه برای شما آموزش بدهم به صورت اتوماتیک می باشد .
فرض کنید شما سایت خودتان را طراحی کرده اید و حالا می خواهید سایت خودتان را بوسیله نقشه سایت به موتور جستجو معرفی کنید .
نکته خیلی مهم : سایت بدون نقشه سایت اصلا مورد جستجو در اینترنت قرار نمی گیره و فقط باید با وارد کردن آدرس آن سایت ، به آن مراجعه کنیم . به عنوان مثال در سرچ بار تایپ کنید www.asarayan.com که این روش اصلا کاربردی نیست چون شما ممکنه دنبال چیزی در اینترنت بگردید که اصلا اطلاعی در مورد سایت منبع ندارید پس فقط نقشه سایت هست که باعث میشه شما به اون سایت برسید ( دقت داشته باشید که در کنار نقشه سایت کلمات متا و دیسکریپ شن هم به همان اندازه که نقشه سایت مهم است اهمیت دارد که در این قسمت به آن اشاره ای نمی کنم )

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

cpanel1

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

 

دومین تفاوت ساپورت زبان های برنامه نویسی : سیستم عامل لینوکس زبان های برنامه نویسی ASP و .Net که شامل (C# , Visual Basic و غیره) و بانک اطلاعاتی MSSQL را ساپورت نمی کند ، اما سیستم عامل ویندوز ASP , .Net و بانک اطلاعاتی MSSQL را ساپورت می کند .

مشترک این خوارک خبری شوید

آخرین مطالب آموزشی

«
  • 1
  • 2
  • 3
»
تک وب دیزاین-قالب فارسی جوملا