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

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

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

  1. از هیچ نرم افزار طراحی ( مثلا DreamWeaver ) استفاده نکنید و تنها از Notepad استفاده کنید .
  2. تمام کدهایی که در این مجموعه میگیم رو خودتون تایپ کنید و تحت هیچ عنوان کپی و پیست نکنید .

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

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

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

 

بخش HTML

 

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

درون پوشه ی Theme یک فایل NotePad جدید ایجاد کنید ( در فضای خالی کلیک راست کنید و از گزینه ی New بر روی Text Document کلیک کنید )  و نام اون رو index قرار بدید . حالا این فایل رو باز کنید و در سطر اول عبارت زیر رو بنویسید :

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>عنوان صفحه وب</title>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
</head>

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

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

<body>
<div class=”container_16″>
<div class=”grid_16″>
<div class=”header”>

تگهای div در واقع مثل جعبه های مخفی هستند و برای بخش بخش کردن قسمتهای مختلف یک صفحه استفاده میشوند ، برای همین از اینها برای قالب بندی عناصر درون صفحات استفاده میکنیم . با مشخصه ی class داخل تگها تعیین میکنیم که کدام کلاس css به این تگ تعلق داره ، یعنی container_16 یک کلاس css هست که به تگ div اولی نسبت دادیم و کلاس header رو به تگ div دوم نسبت دادیم .

دقت کنید که در کد بالا ، کلاس header درون کلاس grid_16 و grid_16 درون کلاس container_16 قرار داره . برای درک بهتر به تصویر زیر توجه کنید :

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

* کلاس container_16 همون سیستم گرید 960 هست که از 16 گرید تشکیل شده و grid_16 یکی از این گریدهاست .

درون بخش header  دو بخش متفاوت داریم ( همونطور که در قالب فتوشاپ طراحی کردیم ) ، یک بخش مربوط به منوی بالایی است و بخش دیگر هم که عنوان و توضیحات صفحه است .

طراحی سربرگ قالب با استفاده از html

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

همونطور که در تصویر هم مشاهده میکنید ، در منوی بالایی 4 تا لینک داریم که یک زمینه ی سورمه ای دارند ( این تصویر زمینه در جلسه قبل جداسازی شد ) . حالا کدنویسی بخش header رو انجام میدیم :

 

<div class=”top-nav”>
<div class=”top-nav-items”>
<a href=”#” > صفحه نخست </a>
<a href=”#” > آرشیو مطالب </a>
<a href=”#” > پروفایل </a>
<a href=”#” > تماس با ما </a>
</div>
</div>

کدهای بالا رو بعد از تگ با کلاس header ( نه تگ head ) تایپ کنید ، یعنی چیزی شبیه تصویر زیر :

آموزش ساخت قالب سایت

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

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

<div class=”page-title”>
<h1 class=”main-title”>عنوان وبلاگ</h1>
<h2 class=”desc-title”>توضیحات وبلاگ</h2>
</div>

فایل notepad رو بعد از نوشتن کدهای بالا به صورت فایل html ذخیره کنید ( با نام index ) . حالا باید درون فایل notepad چیزی شبیه زیر داشته باشیم ( برای اینکه بهتر متوجه بشید کدها رو با رنگ از هم مجزا کردیم ) :

آموزش تبدیل PSD به HTML

خوب تا اینجای کار بخش منوی بالایی صفحه رو در HTML ایجاد کردیم . اگر فایل index رو باز کنید تنها 4 عدد لینک خواهید دید به همراه دو متن که یکی “عنوان وبلاگ” هست و دیگری ” توضیحات وبلاگ” . در جلسه بعد با استفاده از css ظاهر بخش header رو درست خواهیم کرد .

راستی فراموش نکنید که تگهای خاتمه body و html رو هم در انتها اضافه کنید!

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

 

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

(منتشر شده: 17 | در انتظار تایید: 0)
امیرکیان

این طرز کدنویسی در حال حاضر درست نیست البته از نظر من شما از px برای تقسیمات خودتون استفاده کردید؛حال اگر یکی مانیتور خیلی کوچک و یاخیلی بزرگ بود تکلیف چیست؟
شما باید از ریسپانسیو استفاده کنید

پاسخ دهید
عصرعلم

در پاسخ به امیرکیان

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

پاسخ دهید
رضا

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

پاسخ دهید
عصرعلم

در پاسخ به رضا

سلام
فتوشاپ فقط به ما در ساخت عناصر گرافیکی کمک خواهد کرد و در نهایت همه ی کارها با کدنویسی html و css انجام خواهد پذیرفت و حتی به زبان برنامه نویسی (asp.net یا php) هم کاری نداریم. برای مثال با استفاده از فتوشاپ میتوانیم ظاهر گرافیکی دکمه را ایجاد کنیم ولی اینکه این دکمه پویا باشد، قابل کلیک باشد و … توسط کدنویسی باید انجام شود.
در واقع فتوشاپ فقط ظاهری که قصد طراحی کردن آن را با استفاده از کدنویسی داریم در اختیار ما قرار میدهد نه خود سایت یا قسمتهای مختلف آنرا.

پاسخ دهید
mahsa

با سلام
فرستادم به نتیجه ای رسیدید؟

پاسخ دهید
عصرعلم

در پاسخ به mahsa

سلام دوست عزیز،
پاسخ به ایمیل شما ارسال شد.

پاسخ دهید
mahsa

با سلام
من میخواستم قالب رو خودم طراحی کنم . ولی وقتی واسه .top-nav
حاشیه میدم مثلا مینویسم margin:10px auto; کل header به اندازه ۱۰px از بالا فاصله میگیره یعنی div هدر هم ده پیکسل فاصله میگیره ولی من میخوام فقط اون منوی بالا ۱۰ پیکسل فاصله داشته باشه . کد من دقیقا مثل کد شماست ولی نمیدونم چرا این طور میشه شما میدونید؟
با تشکر

پاسخ دهید
عصرعلم

در پاسخ به mahsa

سلام
کدی که نوشتید رو برای من ارسال کنید تا بررسی کنم.
info[at]AsreElm[dot]com

پاسخ دهید
siavash-k

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

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

پاسخ دهید
عصرعلم

در پاسخ به siavash-k

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

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

پاسخ دهید
siavash-k

در پاسخ به عصرعلم

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

پاسخ دهید
حسام

مشكلم حل شد
من از برنامه notepad ++ استفاده ميكنم
encoding رو روي utf-8 قرار دادم درست شد
نيازي به پاسخ نيست
ممنون

پاسخ دهید
حسام

سلام مجدد و خسته نباشيد
عنوان صفحه به شكل ناشناس مياد
نميدونم چجوري بگم

عكس گرفتم
ممنون ميشم راهنمايي كنيد

پاسخ دهید
علی

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

پاسخ دهید
ps-photoshop.ir

ممنون

پاسخ دهید
ps-photoshop.ir

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

پاسخ دهید
عصرعلم

در پاسخ به ps-photoshop.ir

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

پاسخ دهید

فقط گزینه‌ی وسط را تیک بزنید. »مشاهده قوانین