آموزش طراحی قالب (فصل دوم - جلسه سوم) : طراحی محتوا و پانوشت

- visibility ٣٧ mode_comment

در جلسه قبل از این آموزش، تا قسمت Sidebar سایت پیش رفتیم در این جلسه قسمت Content یا همان مطالب و پانوشت footer را طراحی خواهیم کرد. پس با ما همراه باشید.

قسمت content

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

فایل psd طرح را باز کنید تا کار را شروع کنیم :

1.ابتدا با استفاده از ابزار rounded rectangle tool یک مستطیل با ابعاد زیر ایجاد کنید و آن را در وسط بین دو بلوک قرار دهید.

2.گروه block را باز کرده و بر روی لایه block-bg کلیک راست کنید و گزینه copy layer style رو انتخاب کنید :

3.سپس بر روی لایه مطلب (shape 7) کلیک راست کنید و paste layer style رو انتخاب کنید

4. یک لایه متنی جدید ایجاد کنید با عنوان " عنوان مطلب " فونت b nazanin ، اندازه ی 24px و رنگ سیاه.

5. با ابزار rounded rectnangle tool یک مربع با ابعاد 150 * 150 ایجاد کنید و آن را در پایین عنوان مطلب قرار دهید

info نکته :

اگر لایه ای که ایجاد کردید دارای استایل است بر روی لایه کلیک راست کنید و clear layer style رو انتخاب کنید

رنگ لایه را به #cdcdcd تغییر دهید .

6. یک لایه متنی جدید ایجاد کنید با عنوان " بدون تصویر بند انگشتی" رنگ و آن را #546995، فونت entezare zoohor 3 و اندازه 36px درون لایه قرار دهید.

7. یک لایه متنی جدید دیگر با عنوان " متن مطلب در این جا قرار می گیرد" ، با رنگ سیاه فونت Tahoma و اندازه 14px ایجاد کنید و آن را در سمت چپ تصویر بند انگشتی قرار دهید.

8. با ابزار rounded rectangle tool یک مستطیل با ابعاد زیر ایجاد کنید :

سپس استایل زیر را به آن بدهید :

9. یک لایه متنی دیگر ایجاد کنید با فونت b naznin و رنگ #7b7b7b و اندازه 24px و با عنوان "ادامه مطلب" و ان را درون لایه ای که ر مرحله قبل ایجاد کردیم قرار دهید.

10. با ابزار rounded rectangle tool یک مستطیل با ابعاد زیر ایجاد کنید

سپس رنگ ان را #d2d2d2 قرار دهید .

11. سه تصویر date , auther و comments را وارد فایل کنید و آن ها را با فاصله تقریبا 150px از هم در لایه ای که در مرحله قبل ایجاد کردیم قرار دهید :

12. سپس در کنار آیکون ها یک لایه متنی جدید با فونت Tahoma و اندازه 14px و رنگ # 255497 با عناوین زیر ایجاد کنید :

مقداری آیکون نظرات و نوشته آن را به سمت چپ بکشید

13. همه لایه هایی که در این جلسه ایجاد کرده اید را با نگه داشتن SHIFT انتخاب کنید و آن ها را در یک گروه جدید با نام post قرار دهید.

قسمت footer

1.با ابزار rectangle tool یک مستطیل با ابعاد زیر ایجاد کنید

2. رنگ لایه را به #366995 تغییر داده و آن را در زیر قسمت content قرار دهید

3. یک لایه متنی با فونت b nazanin و اندازه 24px و رنگ سفید مانند تصویر زیر ایجاد کنید

4.این دولایه را با هم در یک گروه جدید با نام footer قرار دهید.

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

در جلسه بعد به تکه تکه (slice) کردن قالب خواهیم پرداخت، و تصاویر مورد نیاز را از قالب خارج خواهیم کرد.

comment دیدگاه کاربران
Peyman

سلام . واقعا زحمت کشیدی . خیلی خوب بود .

آموزش تبدیل به wordprees رو کی شروع می کنید ؟ ❗

سجاد دریس

از لینک زیر قابل دسترسی هست :

laya25

سلام من این اموزشو دیروز تموم کردم قالبم با firefox درست بود ولی با explorer درهم برهم بود این اشکالاتی رو هم که تو این جلسه گقتین مینوشتم قالبم درست که نمیشد تو firefox هم بهم میریخت جالبش اینجاست که من امروز که فایل هارو باز کردم کلا فالبم تو firefox بهم ریخته نمیدونم چرا
فایل css خودمو با فایل css شما مقایسه کردم فرقی نمیکنه ولی وقتی فایل شما رو با مال خودم جا بجا میکنم کار میکنه ولی با فالی خودم نه میشه نگاه کنید ببینید مشکلم کجاست؟
یک دنیا ممنون
http://upir.ir/1393.2/ghaleb_d0453.zip

سجاد دریس

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

masood

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

لقمان آوند

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

پوریا

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

سجاد دریس

از فایل index.html کپی بگیرید و فایل رو طبق نیازتون ویرایش کنید

sadaf ebadi

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

میشه لطف کنید و اون قسمتی که به عنوان css reset نوشتین رو توضیح بدین؟

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2 3