آموزش طراحی وب سایت رهیاب لپ تاپ (بخش سوم ) با Html و CSS

demo

 

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

قسمت منوی سمت راست و محتوای وسط صفحه .

آموزشها را به چند قسمت تقسیم میکنم تا بیشتر وقت داشته باشم جزئیات را برای شما توضیح بدهم .

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

 

آموزش طراحی وب سایت رهیاب لپ تاپ (بخش دوم ) با Html و CSS

demo

قسمت بالای قالب را روز سه شنبه برای شما توضیح داده ام امروز می خواهم قسمت Banner که دارای 3 زیر مجموعه می باشد را به طور کامل برای شما آموزش بدهم .
روش کار هم به این صورت می باشد که ابتدا باید هر 3 تصویر لپ تاپ که در فایل PSD بود را در پوشه Images ذخیره کنیم ، سپس با استفاده از کدهای html وcss تصاویر و متن را کنار هم قرار بدهیم .
شما می توانید با تغییر عکس و متن محتوای سایت را تغییر بدهید .

آموزش طراحی وب سایت رهیاب لپ تاپ (بخش اول ) با Html و CSS

rahyab-themplate33

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

آموزش طراحی وب سایت Halcyonic با HTML . CSS بخش چهارم

Halcyonic-joomla1

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

 

1.در اولین مرحله فایل PSD قالب را در فتوشاپ و 2 فایل index.html و template.css را در دریم ویور باز میکنم .

آموزش طراحی وب سایت Halcyonic با HTML . CSS بخش سوم

Halcyonic-template-Contentdemo

تا به حال 2 قسمت Header و Banner را برای شما طراحی کرده ام  . امروز نوبت میرسه به قسمت Content صفحه اصلی .
این قالب در صفحه اول ، قسمتی برای وارد کردن و نمایش اطلاعات به کاربر را نداره و باید این قسمت را طراحی کنم .  در قسمت Content سه موقعیت قرار داده شده است که هر کدام از آنها دارای یک محتوای منحصر به فرد می باشد که شما می توانید این محتوا را بعدا به دلخواه تغییر بدهید .
هدف من از طراحی قالب ، آموزش و نحوه درست قرار دادن موقعیت ها در جای مناسب می باشد . شما بعد از آموزش می توانید کل عناصر و تصاویر صفحه را تغییر داده و یک قالب جدید با شکل بهتر ایجاد کنید .

آموزش طراحی وب سایت Halcyonic با HTML . CSS بخش دوم

Halcyonic-template-header-2demo

روز قبل قسمت Header قالب Halcyonic را برای شما طراحی کردم .

نوبت میرسه به طراحی قسمت Banner که از 4 قسمت تشکیل شده است .

ابتدا باید 4 تصویری که در فایل PSD قالب استفاده کرده بودیم را در پوشه Image ذخیره کرده و سپس با استفاده از تگ های HTML تصاویر را فراخوانی کنیم  .

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

1.در اولین مرحله فایل PSD قالب را در فتوشاپ و 2 فایل index.html و template.css را در دریم ویور باز میکنم .
وارد فتوشاپ شده و هر 4 تصویر را با ابزار Slice در فولدر Image ذخیره میکنم .

آموزش طراحی وب سایت Halcyonic با HTML . CSS بخش اول

demo

در بخش اول قالب Halcyonic را برای شما در فتوشاپ طراحی کردم . بعد از پایان طراحی قالب در فتوشاپ نوبت میرسه به تبدیل فایل psd به HTML .CSS . روش کار به این صورت هست که ابتدا باید دو فایل index.html و template.css را بوسیله نرم افزار دریم ویور ایجاد کرده و بعد از آن موقعیت های قالب را در فایل  index.html مشخص کنیم . بعد از مشخص کردن چیدمان صفحه باید وارد فتوشاپ شده و تصاویری که می خواهیم از آنها در قالب استفاده کنیم را با ابزار Slice  انتخاب و در پوشه Image ذخیره کنیم . بعد از ذخیره کردن و ارتباط برقرار کردن بین فایل index و template می توانیم تنظیمات مربوط به ظاهر قالب را همانطور که می خواهیم و مد نظرمان است تغییر بدهیم  .

آموزش طراحی چیدمان یک ستونه با عرض متغیر با نرم DreamWeaver

dreamweaver-icon

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

 

1. نرم افزار DreamWeaver را اجرا کنید . یک صفحه HTML و یک صفحه CSS در یک فولدر به نام website4 ایجاد کنید . (ابتدا باید یک فولدر بر روی دسکتاپ با نام مورد نظر (نام وب سایت) ایجاد کنیم تا بعد از اینکه صفحات ایجاد شد ، هر فایل را در پوشه مورد نظر ذخیره نمائیم . به عنوان مثال پوشه website3 که درون آن یک پوشه دیگر به نام CSS وجود دارد )

آموزش طراحی چیدمان یک ستونه با عرض ثابت با نرم DreamWeaver

demo123

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

مشاهده دمو

آموزش طراحی چیدمان دو ستونه با عرض متغیر با نرم DreamWeaver

Website1 ASARAYAN5

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

مشاهده دمو

  1. نرم افزار DreamWeaver را اجرا کنید . یک صفحه HTML و یک صفحه CSS در یک فولدر به نام website2 ایجاد کنید . (ابتدا باید یک فولدر بر روی دسکتاپ با نام مورد نظر ایجاد کنیم تا بعد از اینکه صفحات ایجاد شد ، هر فایل را در پوشه مورد نظر ذخیره نمائیم )

آموزش طراحی چیدمان دو ستونه با عرض ثابت با نرم DreamWeaver

dreamweaver-icon

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

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

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

 

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

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

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