کتاب طراحی یک قالب دوسطونه ساده

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

 

حجم : 302 کیلو بایت

 

تعداد صفحات:

56

 

نوع :pdf

 

پسورد : www.1amoz.ir

 

لینک دانلود :  دریافت از سرور پیکوفایل

 

طراحی قالب یک فوتر بسازیم 13

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

ادامه مطلب …

طراحی قالب ساخت پست 12

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

ادامه مطلب …

طراحی قالب ،ایجاد پست 11

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

ادامه مطلب …

ایجاد بلوک ها ، موضوعات سطون راست 10

قبل از شروع آموزش این بخش من یه اشتباهی در تعیین فونت قالب داشتم چون اکثر قالب هایی که توی اینترنت هست با فونت  Tahoma نوشته میشه من اون رو به Arial نوشتم همین جا فونت رو تغییر میدیدم و بعد می ریم سراغ آموزش

برای تغییر فونت به استایل میریم و در بخش body فونت رو عوض می کنیم به شکل زیر

body{
padding:0px;
margin: 0px;
font-family: Tahoma;
background-color: #DDDDDD;
color: #333333;
}

خب حالا میریم سراغ آموزش این بخش

ادامه مطلب …

ایجاد بدنه قالب 9

در قسمت قبل با ایجاد هدر قالب به طور کلی آشنا شدید در این قسمت قصد داریم نحوه قرار دادن بدنه برای قالبمان را شرح دهیم برای این کار به یک id نیاز داریم و من نامش را warp گذاشتم و به صورت زیر به استایل خود اضافه میکنیم به شکل زیر

#warp { }

حالا به قسمت body سند html رفته و یگ تگ div بعد از تگ هدر ایجاد کنید به این شکل

<div id=”warp”> </div>

اگر یادتان باشد برای هدر عرض را برابر 960px قرار دادیم اینجا هم همین کار را میکنیم

#warp{
   width: 960px;
}

کد اصلی تا به اینجا باید به این شکل باشد

 

 

ادامه مطلب …

ساخت هدر (لوگو،متن) 8

در این قسمت قصد داریم نحوه قرار دادن متن ، لوگو   را توضیح دهیم

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

h1 { }

حالا به قسمت body سند اچ تی ام ال خود رفته و یک تگ <h1> داخل تگ <div> هدر بسازید

<div id=”header”>  <h1>موضوع وبسایت</h1> </div>

خب حالا کد رو تست می کنیم همانگونه که مشاهده میکنید متن ما درون هدر قرار گرفته اما به شکل نامرتب

کد کلی

 

ادامه مطلب …

ساخت هدر قالب 7

در این قسمت قصد داریم تراز بندی هدر (همان وسط چین) کردن  هدر را باهم بیاموزیم

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

margin-right

margin-left

margin-top

margin-bottom

ادامه مطلب …

ساخت هدر – 6

در این قسمت ما باید با کلاس ها و id که به نظر من اصل زبان css هستند کار کنیم
برای ساخت هیدر یا سر صفحه ما به یک id نیاز داریم من نام اون رو headr گذاشتم این نام دلخواه است به این صورت می نویسیم

#headr{} 

حال شروع به خاصیت دادن به آن می کنیم

ابتدا برای تعیین عرض آن از خاصیت width استفاده می کنیم من اینجا مقدار را برابر 960px قرار دادم

حالا باید ارتفاع را مشخص کنیم که از خاصیت height استفاده می کنیم مقدار آن را 150 پیکسل قرار میدهیم.

حالا کدها را مطابق روبه رو به تگ style خود اضافه میکنیم

#header{
width: 960px;
height: 150px;
}

ادامه مطلب …

سبک دهی به پاراگراف و لینک 5

در قسمت قبل کدهای خود را تا اینجا پیش بردیم

<html>

<head>

<style type=”text/css”>

body{
padding: 0px; 
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
background-color: #DDDDDD;
color: #333333;
}

</style>
</head>

<body>

</body>

</html>

امروز قصد داریم که تغیراتی را به پیشفرض های اچ تی تم ال تگ های پاراگراف و لینک بدهیم 

ادامه مطلب …

1 2