article

طراحی و کدنویسی هدر قالب با فتوشاپ، HTML و CSS

web-photoshop-css-header

یکی از چالش های همیشگی طراحان وب طراحی و کدنویسی سربرگ (هدر Header) قالب های سایت، وبلاگ و... است، بدین منظور روش ها و تکنیک های زیادی وجود دارد و اینکه طراح از چه متدی استفاده کند تا حدود زیادی به سلیقه، مهارت، تجربه و مهمتر از همه به هدف از طراحی قالب برمی گردد، به طور مثال سربرگ یا هدر سایت ها و وبلاگ های کودکانه یا فانتزی معمولا باید ترکیبی از رنگ های شاد و شامل اِلمان های گرافیکی بیشتری باشد، در مقابل ممکن است به فرض برای سایت های اداری یا خبری از تکنیک های ساده، لوگوهای کلاسیک و پس زمینه ای با رنگ غالب یا با تصویر زمینه فراگیر و همپوشانی کامل استفاده شود، البته در این آموزش هدف گرافیک و رنگ شناسی نیست بلکه می خواهیم فرم کلی کار، ساختار و کدنویسی اولیه هدر قالب ها را بشناسیم و به دلیل گستردگی موضوع چند روش کلی در طراحی و کدنویسی هدر قالب سایت یا وبلاگ را با استفاده از برنامه فتوشاپ، HTML و CSS با هم مرور کنیم.

منظور از طراحی هدر قالب در فتوشاپ چیست؟


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

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


در کل تقریبا دو تکنیک اصلی برای ایجاد هدر قالب سایت و وبلاگ وجود دارد که انتخاب هر کدام بستگی به نوع قالبی دارد که می خواهیم طراحی و کدنویسی کنیم:
در روش اول از هدرهای استاتیک با پهنا و ارتفاع ثابت استفاده می شود، به فرض اگر عرض کل قالب میزانی ثابت به طور مثال 960 پیکسل باشد هدر آن را می توانیم بلاکی در ابعاد فرضی 960 در 150 پیکسل در نظر بگیریم، همچنین ممکن است عرض قالب ثابت نباشد (قالب واکنش گرا یا Responsive باشد) اما در قسمت هدر تصویری با عرض و ارتفاع ثابت به کار گیریم که با ترکیب آن با تکنیک همپوشانی کل فضای مورد نیاز را در صفحه وب پوشش دهد، شیوه هدر ثابت معمولا برای قالب های با رنگ پس زمینه (Background) مجزا از پیش زمینه (Foreground) کاربرد دارد (به فرض پس زمینه تیره و قسمت اصلی قالب روشن) که در ادامه خواهیم دید.
تکنیک دیگر استفاده از هدرهای داینامیک و پویا است، در این تکنیک صرف نظر از اینکه عرض قالب یا بلاک والد هدر مقداری ثابت یا متغیر باشد عناصر هدر المان های گرافیکی مجزایی هستند که قابلیت تکرار جهت همپوشانی را به اندازه دلخواه دارند، در این تکنیک مهم نیست عرض یا ارتفاع قسمت هدر چه میزانی باشد، با کدنویسی HTML و CSS می توانیم هدر را به گونه ای طراحی کنیم که با یک المان گرافیکی کوچک کل فضا پوشش داده شود، در این حالت معمولا قسمت هایی مانند لوگو، فیلد جستجو، تصویر پس زمینه و... به صورت مجزا طراحی و با کدنویسی جانمایی یا تکرار می شوند، این شیوه در طراحی قالب های امروزی که به صورت واکنش گرا (Responsive) هستند بیشتر کاربرد دارد.
نکته: دقت کنیم برای طراح وب محدودیتی از نظر استفاده از تکنیک های بالا وجود ندارد، در واقع این دسته بندی بیشتر جنبه آموزشی دارد و در عمل طراحان وب بسته به نوع کار ترکیبی از روش ها را استفاده می کنند.

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


در این شیوه هدر اندازه ای ثابت دارد و معمولا صرفا یک تصویر گرافیکی یا بلاکی با اندازه از پیش تعریف شده است اما عرض قالب می تواند میزانی عمدتا ثابت یا بعضا متغیر (واکنش گرا یا Resposive) باشد و پس زمینه آن معمولا رنگی مجزا از پیش زمینه و قسمت اصلی دارد، به طور مثال در صفحه وب زیر طرح اولیه قالب هایی را کدنویسی کرده ایم که از این تکنیک در طراحی هدر آنها استفاده شده است:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | طراحی هدر استاتیک قالب</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
    background-color:#CCC;
    line-height: 22px;
    margin:0;
    padding:0;
}
#wrapper-2 {
    position:relative;
    width:100%;
    height:150px;
    background:#14a2b7;
    padding-top:8px;
    vertical-align:top;
    text-align:center;
    color:#FFF;
}
#main-1, #main-2 {
    display:block;
    width:900px;
    height:380px;
    border:#666 1px solid;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFF;
    text-align:center;
    color:#333;
}
#header-1, #header-2 {
    display:block;
    width:900px;
    height:150px;
    background:url(header-example-1.png) no-repeat #14a2b7;
}
#header-2 {
    background:url(header-example-1.png) no-repeat #c0a2b7;
}
#menu-1, #menu-2 {
    display:block;
    width:900px;
    height:30px;
    background-color:#666;
    color:#FFF;
}
#content-1, #content-2 {
    display:block;
    width:900px;
    height:140px;
    background-color:#E5E5E5;
}
#footer-1, #footer-2 {
    display:block;
    width:900px;
    height:60px;
    background:#999;
    color:#FFF;
}
.clear {
    display:block;
    width:100%;
    height:260px;
}
</style>
</head>
<body>
<div id="main-1">
<div id="header-1">
هدر استاتیک
</div>
<div id="menu-1">
منو
</div>
<div id="content-1">
محتوا
</div>
<div id="footer-1">
فوتر
</div>
</div>
<br>
<div id="wrapper-2">
پس زمینه داینامیک و واکنش گرا
<div id="main-2">
<div id="header-2">
هدر استاتیک
</div>
<div id="menu-2">
منو
</div>
<div id="content-2">
محتوا
</div>
<div id="footer-2">
فوتر
</div>
</div>
</div>
<div class="clear"></div>
<hr>
- قسمت هدر در این تکنیک عرض و ارتفاع ثابتی دارد و با کاهش یا افزایش اندازه پنجره مرورگر (Viewport) تغییر نمی کند.<br>
- تصویر پس زمینه در این نمونه فایل header-example-1.png با ابعاد ثابت است که می توانیم در فتوشاپ آن را (با ابزار ترسیم وکتوری Pen و رنگ آمیزی Gradient) طراحی کنیم.<br>
- برای مشاهده تصویر پس زمینه بر روی قسمت هدر کلیک راست و گزینه View Background Image را انتخاب می کنیم.<br>
- برای بررسی نحوه نمایش هدر استاتیک در دستگاه های مختلف، می توانیم اندازه پنجره مرورگر را کم و زیاد کنیم.<br>
- این شیوه بسته به نیاز و نوع کار هم می تواند در قالب های با میزان عرض ثابت و هم در قالب های واکنش گرا استفاده شود، به فرض برای سایت های اداری که فرم ظاهری کاری در مقایسه با سازگاری با دستگاه مختلف اهمیت بیشتری دارد، این حالت می تواند کاربردی باشد.<br>
</body>
</html>
پیش نمایش آنلاین
توضیح:
- در کد بالا رنگ پس زمینه کل صفحه را با عنصر body و کد هگز CCC به رنگ خاکستری درآورده ایم.
- سپس نمونه بلاک هایی با آی دی فرضی main برای چارچوب قالب ها ساخته ایم که با در نظر گرفتن margin-left و margin-right به صورت auto چارچوب قالب در وسط صفحه تنظیم شده است، مقدار ویژگی background-color برای قسمت main رنگ سفید یا کد هگز FFF است.
- برای قسمت هدرها با آی دی فرضی header بلاکی در ابعاد 900 در 150 پیکسل ترسیم (داخل بلاک های main) و رنگ پس زمینه آنها را با کدهای هگز مجزا کرده ایم، برای هر دو هدر از یک تصویر پس زمینه استفاده شده که می توانیم در ابزارهای گرافیکی مانند فتوشاپ (Photoshop) یا ادوبی ایلوستریتور (Adobe Illustrator) به راحتی آن را طراحی و به صورت فایل png یا jpg ذخیره کنیم.
- این نمونه قالب ها صرفا جهت راهنمایی و کمک به درک بهتر متدهای کلی نحوه طراحی هدرهای استاتیک است، در عمل معمولا طراحی هدرها نیاز به تمرکز بیشتر و رعایت اصول هنری دارند تا جذابیت ظاهری و حرفه ای بودنشان حفظ شود که این مهارت به مرور و بر حسب تجربه و آزمایش و خطا به دست می آید.

گرد کردن گوشه های هدر در فتوشاپ و CSS


طراحان وب برای خلق قالب هایی با جلوه ظاهری بهتر از تکنیک های مختلفی استفاده می کنند، یکی از این تکنیک ها گرد کردن گوشه های هدر قالب است که بسته به نوع هدر در برنامه فتوشاپ یا با استایل نویسی CSS ایجاد می شود، به فرض در نمونه کد بالا اگر بخواهیم گوشه های هدر را به جای حالت مستطیلی و با لبه های تیز به صورت گوشه های گرد و به اصطلاح نرم درآوریم باید دو کار انجام دهیم:
ابتدا خط حاشیه بلاک های main را حذف می کنیم (مقدار را برای خاصیت border صفر در نظر گرفته یا این خاصیت را از سورس کد پاک می کنیم)، با وجود خط حاشیه نمی توانیم با استفاده از تصویر پس زمینه گوشه نرم ایجاد کنیم، سپس در برنامه فتوشاپ لایه ای در ابعاد 900 در 150 پیکسل برای هدر خود طراحی و پس زمینه لایه را نیز به رنگ پس زمینه صفحه یا به صورت شفاف (Transparent) تنظیم کرده و در آن مستطیلی با گوشه های نرم توسط ابزار رسم شکل یا Rounded Rectangle Tool ترسیم می کنیم.
web-template-header-step1.jpg
 با انتخاب ابزار رسم شکل میزان شعاع یا Radius در برنامه فتوشاپ قابل تنظیم است که هر چه این عدد بزرگتر باشد انحنای گوشه ها بیشتر خواهد بود.
روش دیگر طراحی گوشه های نرم برای هدر قالب استفاده از خاصیت border-radius در CSS است، در این تکنیک می توانیم خط حاشیه را داشته باشیم یا مقدار آن را صفر و none در نظر بگیریم، مثال:
 #main-1, #main-2 {
    display:block;
    width:900px;
    height:380px;
    border:#666 1px solid;
    -webkit-border-radius:8px 8px 0 0;
    -moz-border-radius:8px 8px 0 0;
    border-radius:8px 8px 0 0;
    margin-left:auto;
    margin-right:auto;
    background-color:#FFF;
    text-align:center;
    color:#333;
}
#header-1, #header-2 {
    display:block;
    width:900px;
    height:150px;
    border:none;
    -webkit-border-radius:8px 8px 0 0;
    -moz-border-radius:8px 8px 0 0;
    border-radius:8px 8px 0 0;    
    background:url(header-example-1.png) no-repeat #14a2b7;
}
ترتیب مقدار دهی برای خاصیت های radius در این نمونه کد اهمیت دارد، از چهار مقدار اصلی دو مقدار اولی برای گرد کردن گوشه های بخش main و header کاربرد دارد که در این نمونه کد 8 پیکسل در نظر گرفته شده است.

طراحی و کدنویسی هدر داینامیک


سبک دیگر طراحی هدر سایت ها، وبلاگ ها و در کل صفحات وب استفاده از بلاک های داینامیک و با اندازه ای غیر ثابت است که امروزه تحت عنوان هدر قالب های واکنش گرا (Responsive) شناخته می شوند، بلاک اصلی هدر در این نوع قالب ها میزان عرض ثابتی ندارد و معمولا به صورت درصدی مقداردهی می شود نه پیکسلی، عناصر هدر شامل لوگو، فیلد جستجو، باکس نمایش تاریخ و مواردی از این دست در بلاک های تو در توی درونی قرار می گیرند و با کم و زیاد شدن عرض پنجره مرورگر (Viewport) خود را با اندازه جدید تطبیق می دهند، به طور مثال در صفحه وب زیر طرح اولیه قالبی را کدنویسی کرده ایم که از این تکنیک در طراحی هدر آن استفاده شده است:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | طراحی هدر داینامیک قالب</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
    background-color:#FFF;
    line-height: 22px;
    margin:0;
    padding:0;
}
#main {
    display:block;
    width:100%;
    height:100%;
    text-align:center;
    color:#333;
}
#header {
    display:block;
    width:100%;
    height:150px;
    background:#FF900D;
}
#header-right {
    display:inline-block;
    width:25%;
    height:100%;
    border:1px dotted #ccc;
    vertical-align:top;
}
#header-center {
    display:inline-block;
    width:46%;
    height:100%;
    border:1px dotted #ccc;
    vertical-align:top;
}
#header-left {
    display:inline-block;
    width:25%;
    height:100%;
    border:1px dotted #ccc;
    vertical-align:top;
}
#menu {
    display:block;
    width:100%;
    height:30px;
    background-color:#666;
    color:#FFF;
}
#content {
    display:block;
    width:100%;
    height:140px;
    background-color:#E5E5E5;
}
#footer {
    display:block;
    width:100%;
    height:60px;
    background:#999;
    color:#FFF;
}
.clear {
    display:block;
    width:100%;
    height:50px;
}
</style>
</head>
<body>
<div id="main">
<div id="header">
<div id="header-right">نمایش لوگو<br>
<img src="header-logo-1.png" alt="logo" border="0"></div>
<div id="header-center">هدر داینامیک</div>
<div id="header-left">نمایش فیلد تاریخ و...<br>
<label for="search">جستجو:</label>
<input name="search" id="search" class="input-search" type="text" placeholder="جستجو..."></div>
</div>
<div id="menu">
منو
</div>
<div id="content">
محتوا
</div>
<div id="footer">
فوتر
</div>
</div>
<div class="clear"></div>
</body>
</html>
برای مشاهده پیش نمایش آنلاین این نمونه کد لطفا به لینک درج شده در پاراگراف بعدی (همپوشانی تصویر پس زمینه هدر) مراجعه کنید.

همپوشانی تصویر پس زمینه هدر


برای پوشش پس زمینه هدر قالب می توانیم از مقادیر صرفا رنگی استفاده یا در صورت نیاز تصویری را به صورت همپوشانی در راستای محور X (افقی) تکرار کنیم، در همین رابطه نمونه کد بالا را به صورت زیر ویرایش کرده و تصویری در ابعاد کوچک (5 * 150 پیکسل) را به عنوان پس زمینه هدر در نظر گرفته ایم که با تکنیک همپوشانی کل فضا را پوشش می دهد:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | طراحی هدر داینامیک قالب</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
    background-color:#FFF;
    line-height: 22px;
    margin:0;
    padding:0;
}
#main {
    display:block;
    width:100%;
    height:100%;
    text-align:center;
    color:#333;
}
#header {
    display:block;
    width:100%;
    height:150px;
    background:url(header-bg-1.png) #FF900D repeat-x;
}
#header-right {
    display:inline-block;
    width:25%;
    height:100%;
    border:1px dotted #ccc;
    vertical-align:top;
}
#header-center {
    display:inline-block;
    width:46%;
    height:100%;
    border:1px dotted #ccc;
    vertical-align:top;
}
#header-left {
    display:inline-block;
    width:25%;
    height:100%;
    border:1px dotted #ccc;
    vertical-align:top;
}
#menu {
    display:block;
    width:100%;
    height:30px;
    background-color:#666;
    color:#FFF;
}
#content {
    display:block;
    width:100%;
    height:140px;
    background-color:#E5E5E5;
}
#footer {
    display:block;
    width:100%;
    height:60px;
    background:#999;
    color:#FFF;
}
.clear {
    display:block;
    width:100%;
    height:50px;
}
</style>
</head>
<body>
<div id="main">
<div id="header">
<div id="header-right">نمایش لوگو<br>
<img src="header-logo-1.png" alt="logo" border="0"></div>
<div id="header-center">هدر داینامیک</div>
<div id="header-left">نمایش فیلد تاریخ و...<br>
<label for="search">جستجو:</label>
<input name="search" id="search" class="input-search" type="text" placeholder="جستجو..."></div>
</div>
<div id="menu">
منو
</div>
<div id="content">
محتوا
</div>
<div id="footer">
فوتر
</div>
</div>
<div class="clear"></div>
<hr>
- قسمت هدر در این تکنیک عرض و ارتفاع ثابتی ندارد (مقداردهی درصدی) و با کاهش یا افزایش اندازه پنجره مرورگر (Viewport) تغییر می کند.<br>
- عناصر هدر در این نمونه کد به صورت بلاک ها و فایل های مجزا در بلاک اصلی هدر تعریف می شوند.<br>
- برای بررسی نحوه نمایش هدر داینامیک در دستگاه های مختلف، می توانیم اندازه پنجره مرورگر را کم و زیاد کنیم.<br>
- امروزه این شیوه متادول ترین متد در طراحی قالب های واکنش گرای وب و سازگار با دستگاه های مختلف است.<br>
</body>
</html>
پیش نمایش آنلاین
توضیح:
- در این کد از تصویر زیر به عنوان پس زمینه قسمت هدر قالب استفاده شده است، با در نظر گرفتن مقادیر repeat-x برای خاصیت background، مرورگر در راستای محور X (افقی) تصویر را به صورت متوالی تکرار می کند تا همپوشانی کامل ایجاد شود.
Header BG
- با در نظر گرفتن تصویر پس زمینه در صورتی که از فرمت png در حالت شفاف (Transparent) استفاده نکرده باشیم، رنگ پس زمینه در زیر تصویر مخفی خواهد شد (رنگ نمایش داده نمی شود).
در پایان این آموزش یادآور می شویم که طراحی قالب و شیوه های آن عمدتا سلیقه ای و در کنار مهارت کدنویسی تا حدود زیادی مبتنی بر خلاقیت است، بنابراین هدف از این نوع مطالب تنها راهنمایی و تسهیل شروع کار طراحی است، برای داشتن روش های شخصی و تبدیل ایده های نو به واقعیت هیچ محدودیتی وجود ندارد.
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» چگونه برای سایت یا وبلاگ خود قالب طراحی کنیم؟
» قابلیت های کاربردی CSS3 در طراحی وب
» نحوه ساخت باکس گوشه گرد در فتوشاپ و CSS
» طراحی باکس جستجو با فتوشاپ و CSS
» آموزش انتقال قالب از فتوشاپ به کد HTML و CSS
commentنظرات (۳۰ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: میلاد
۱۸:۱۸ ۱۳۹۱/۰۸/۲۱
مرسی عالی بود
نویسنده: میثم
۱۷:۱۶ ۱۳۹۱/۱۱/۱۶
با سلام و خسته نباشید. من تازه با سایت شما اشنا شدم. مدام از مطالبش استفاده می کنم. من میخوام هدر وبم رو عوض کنم اما کد قسمت هدر رو نمیتونم توی قالبم پیدا کنم. شما پیشنهادی ندارین؟ اگه لازمه کد قالب رو براتون بفرستم. بازم ممنون از زحمتایی که می کشید
پاسخ: 
سلام
کدهای مربوط به ویژگی های ظاهری مانند هدر معمولا در فایل css قالب ها موجود است، این فایل هم (معمولا) به صورت غیر مستقیم در صفحه وارد می شود، لذا برای راهنمایی دقیق تر لطفا آدرس وبلاگ خود را درج کنید تا بررسی گردد.
نویسنده: میثم
۰۱:۴۹ ۱۳۹۱/۱۱/۱۸
بازم ممنون از وقتی که میذارید.
www.diarekurd.blogfa.com
نویسنده: میثم
۰۰:۴۱ ۱۳۹۱/۱۱/۲۴
سلام و خسته نباشید. اقا بازم ببخشید مزاحم شدم. قرار شد وبم رو نگاه کنید. دیدین؟
پاسخ: 
سلام
کد css قالب وبلاگ شما در آدرس زیر وجود دارد:
http://template.pichak.net/pichak/02/style.css
و خط مربوط به هدر قالب در کلاس top به صورت top.jpg مشخص است، آدرس کامل آن می شود:
http://template.pichak.net/pichak/02/top.jpg
این فایل (فایل css) را باید ویرایش کنید و آدرس تصویر جدید را به جای top.jpg جایگزین کنید، سپس فایل css جدید را در یک سرویس دهنده دیگر آپلود کرده و آدرس آن را در کد قالب به جای آدرس فعلی قرار دهید.
نویسنده: میثم
۲۱:۴۲ ۱۳۹۱/۱۲/۰۲
تا همینجاش واقعا ممنون کلی ازتون یاد گرفتم . اگه زحمتی نیست بقیشم کمکم میکنین؟ خب من فایل css رو باز کردم و کلاس top رو پیدا کردم. توی اون خط عبارت top.jpg رو هم پیدا کردم ولی نمیدونستم ادرس هدر جدیدم رو کجاش بذارم اما این ادرس کاملی که شما نوشتین یعنی
http://template.pichak.net/pichak/02/top.jpg
روی توی مرورگر باز کردم. همین هدر وبم بود. حالا اگه بخوام هدر جدید رو بذارم جاش باید تصویرم رو اپلود کنم بعد ادرسش رو بذارم جای کدوم عبارت؟ اینم خط دستور :
top{width:1003;background:url('top.jpg') no-repeat top;height:210;vertical-align:top;direction:rtl;}
.titr{color:#fea900;text-align:center;font-size:27pt;font-weight: bold;padding:0 60 3 500;font-family:Times New Roman;}
.des{padding:0 70 0 500;direction:rtl;font-size:10pt;color:#dddddd;text-align:center;}
پاسخ: 
سلام
همان طور که مشخص است باید جای عبارت top.jpg، آدرس (کامل) تصویر جدید را قرار دهید.
نویسنده: زهرا
۱۷:۳۶ ۱۳۹۲/۰۱/۱۴
با سلام.
خیلی از مطالب سایت شما استفاده کردم جا داره تشکر کنم. سایتتون واقعآ مفید و کاربردی هستش.
من زیاد متوجه فرق این 2 کد نشدم. در کل منظور شما از 2 تکنیک طراحی اینه که:
اگر تصویر بنر قابل تجزیه نباشه اونو با اندازه ی ثابت در باکس هدر استفاده میکنم و اگر قابل تجزیه باشه آن را در باکس هدر تکرار میکنیم که این روش داینامیک می شد.
ممنون می شم اگه جواب بدین.
پاسخ: 
سلام
در حالت ثابت، هدر قالب یک میزان ثابت است (به فرض با عرض 900 پیکسل) که داخل آن هم می توان عناصر داینامیک استفاده کرد (مانند تکرار یک تصویر کوچک) و هم یک تصویر با عرض 900 پیکسل (یا چند تصویر در کنار هم)، در این حالت با کوچک یا بزرگ شدن اندازه پنجره مرورگر، هیچ تغییری در اندازه هدر ایجاد نمی شود.
اما در حالت داینامیک، هدر قالب طوری طراحی می شود که متناسب با اندازه صفحه نمایش، هم پوشانی ایجاد می شود، به فرض قسمت میانی این نوع هدرها می تواند یک یا چند تصویر ثابت باشد و طرفین آن دو بلاک قابل تغییر با اندازه پنجره مرورگر، یا کل آن از تصاویر داینامیک تشکیل شده باشد.
نویسنده: سارا
۱۷:۰۰ ۱۳۹۲/۰۲/۲۶
سلام ممنونم از توضیحاتتون .. یه سوال داشتم اینکه چطور برای هدر قالب تصویر بذاریم
میدونم که یه تصویر باید آپلود بشه! اما اینکه سایزش رو چطور با هدر منطبق کنیم و کد هاش رو بذارید ممنون میشم.
پاسخ: 
سلام
برای اعمال تنظیمات سفارشی در قالب و هدر وبلاگ الزاما باید با CSS آشنا باشید، اکثر قالب های وب با استفاده از استایل CSS طراحی می شوند و تغییر موارد نیز با ویرایش آن امکان پذیر است.
نویسنده: zar
۰۰:۵۳ ۱۳۹۲/۰۳/۱۴
سلام
من از یک سایت خارجی یک تم برای وبلاگم در بلاگفا گرفتم که استفاده کنم. حالا چند سوال برای من پیش امده است. در ضمن رشته من کامپیوتر نیست. سوالات:
1- تمی که دانلود نمودم دو پوشه در ان هست که حاوی فایل های xml است من چگونه باید از این فایل xml بعنوان قالب استفاده کنم؟
2- چگونه باید آنرا مثلا برای بلاگفا آماده نمود؟
آدرس اینترنتی اون به این صورت است:
www.premiumbloggertemplates.com/2013/01/sevim-premium-blogger-template.html
متشکرم
پاسخ: 
سلام
قالب مورد نظر مربوط به سرویس بلاگر (Blogger) است و با سیستم بلاگفا سازگار نیست، برای سازگار نمودن نیز ابتدا باید با کدهای HTML و CSS و همچنین تگ های اختصاصی بلاگفا (که در راهنمای بخش ویرایش قالب آن وجود دارد) آشنا باشید، سپس کل کدهای را ترجمه کنید (در صورت عدم آشنایی قبلی، کار ساده ای نیست).
نویسنده: نیلوفر
۰۵:۵۹ ۱۳۹۲/۰۳/۱۷
سلام ترخدا کمکم کنید من دنبال یه کد هستم که بتونم یه بلاک ثابت داشته باشم . در زیر هدر قرار بگیره.. هر متنی رو که دلم بخواد توش بنویسم تا در همه صفحات قرار بگیره
پاسخ: 
سلام
این مورد معمولا باید در کدنویسی قالب وبلاگ طراحی و علاوه بر آن سرویس دهنده (میهن بلاگ) امکان ایجاد پست ثابت را داشته باشد، کدی برای آن به صورت مجزا وجود ندارد!
نویسنده: pooys
۲۰:۵۹ ۱۳۹۲/۰۵/۱۸
با سلام. این نمی تونه جواب خوبی برای خانم نیلوفر باشد حالا که سیستم این خاصیت رو نداره میتونه خودش کد تو قسمت قالب متن رو در جای دلخواه بذاره بدونه هیچ دردسری
پاسخ: 
سلام
کدی برای این کار در اختیار نداریم، اگر شما چنین موردی را در اختیار دارید، آدرس وبلاگ این کاربر در پیام بالا وجود دارد، لطفا به وبلاگ مراجعه کرده و کد بلاک ثابت به همراه آموزش های مورد نیاز را در اختیارشان قرار دهید تا پاسخ مناسبی به سوال ایشان باشد!
نویسنده: pooys
۲۱:۴۹ ۱۳۹۲/۰۵/۱۸
با سلامی دوباره ادرس وب ایشان فیلتر شده است
نویسنده: مریم
۰۰:۴۴ ۱۳۹۲/۰۹/۱۰
با سلام: میشه لطف کنین بگین آیا لینک ها میشه تو فتوشاپ درست کرد بعد تو css واسشون div تعریف کرد؟یا نه ممنون
برای طراحی لینک ها می تونم از فتوشاپ استفاده کنم؟؟
بازم ممنون
پاسخ: 
سلام
می توانید لینک ها را درون بلاک های div قرار دهید (استایل فتوشاپ را به بلاک div اختصاص دهید) یا برای تگ a در CSS خاصیت display با مقادیر block تعریف کنید.
نویسنده: طراحی سایت
۱۲:۵۵ ۱۳۹۲/۱۰/۱۱
فوق العاده بود ممنون
نویسنده: اکبری
۰۹:۱۰ ۱۳۹۲/۱۲/۰۴
سلام
چند روز پیش توی یکی از سایت ها مطلبی درباره تعویض عکس هدر بالای وبلاگ خوندم و وقتی که میخواستم این کار رو رو وبلاگ خودم انجام بدم با چند مشکل اساسی برخورد کردم و اکثر تنظیمات وب به خصوص در مرورگر فایر فاکس به هم ریخت مثلا وبلاگم دیگه قالب های سه ستونه رو قبول نمیکنه و از اون بدتر وقتی عکس آپلود می کنم (عکس های گروه کوهنوردی) با پیغام به دلیل درج اسکریپ یا فایل غیر مجاز. امکان درج چنین عکسی وجود ندارد روبرو میشم خواهش می کنم راهنمایی کنید آدرس وبلاگ هم
http://arashkherameh.blogfa.com/
پاسخ: 
سلام
مشکل به هم ریختن قالب را باید خودتان اصلاح کنید، چون دقیقا نمی دانیم چه کدی را حذف یا اضافه کرده اید، اما در مورد درج اسکریپت تبلیغاتی به سرویس بلاگفا برمی گردد، متاسفانه این سرویس دهنده هر روز سایت های بیشتری را به لیست سیاه (!!) خود اضافه می کند با این توجیه که جلوی فعالیت های تبلیغاتی یا انتشار اسکریپت های مخرب گرفته شود!
راه حل: یا قید بلاگفا را بزنید و از یک سرویس دیگر استفاده کنید یا اینکه سرویس های آپلود مختلفی را تست کنید تا یک مورد سازگار با بلاگفا پیدا شود!
نویسنده: اکبری
۱۷:۱۶ ۱۳۹۲/۱۲/۰۴
سلام ممنون
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





4 × 5
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form نبی
در:
‏asc و desc رو جابجا نوشتی
۱۳۹۹/۰۷/۰۴

form ساناز محمدی
در:
سلام مرسی از کدی که گذاشتید ♥
۱۳۹۹/۰۷/۰۳

form mahtab
در:
سلام خسته نباشین ببخشید میخواستم بپرسم که چجوری میتونیم یه کلیپ رو از کامپیوتر از انیستا دانلود کنیم ؟؟ اها اینم بگم...
۱۳۹۹/۰۷/۰۲

form سعید
در:
سلام دستتون درد نکنه از پروژه شما استفاده کردم فقط یه مشکل اگه در یک صفحه دو تا لیست کشویی داشته باشیم چطوری...
۱۳۹۹/۰۷/۰۱

form Iman Mafakheri
در:
سلام من یه قالب خارجی اوردم راست چینش کردم حتی فونتشم تغییر دادم اما متاسفانه وقتی متن فارسی مینویسم حروف رو جدا جدا مینویسه نمیدونم...
۱۳۹۹/۰۶/۳۰

form میثم صدیق
در:
سلام برای اضافه کردن یک المان با (append) من یک کلید گذاشتم اضافه میشه ولی با هر بار کلیک کردن اضافه میشود اگر بخواییم یک...
۱۳۹۹/۰۶/۲۹

form amin
در:
سلام و خسته نباشید می خواستم Slash ( / ) رو به صورت اتوماتیک از تمامی URL ها حذف کنم البته با کمک htaccess...
۱۳۹۹/۰۶/۲۵

form محمد
در:
سلام وقت بخیر من یه همچین کدی دارم میشه لطفا راهنمایی کنید مشکلش چیه؟ سپاسگزارم
۱۳۹۹/۰۶/۲۴

form سروش
در:
سلام . من اطلاعات را از دیتابیس دریافت میکنم و در جدول میبینم . میخوام مثلا 6 مورد آخر را در یک ردیف ببینم و...
۱۳۹۹/۰۶/۲۳

form Behdad kanani
در:
سلام اصلا نمی شه اینکارو انجام داد
۱۳۹۹/۰۶/۲۲

form جعفری
در:
سلام قبل از تبدیل تاریخ نوشتید مثلا خب این مقدار تاریخ برای من در دیتابیس در جدولی بنام startedtm بصورت یونیکس...
۱۳۹۹/۰۶/۲۰

form احمد
در:
با عرض سلام و خسته نباشید ببخشید برای فایل دانلودی باید از چه دستوری استفاده کنم فایل با پسوند pdf رو میخوام بزارم اگر امکانش...
۱۳۹۹/۰۶/۲۰

form شیما
در:
سلام آیا وقتی در قسمت وبلاگ دوستان وبلاگی رو ثبت میکنیم صاحب وبلاگ با استفاده از برنامه های خاصی میتونه متوجه بشه ؟
۱۳۹۹/۰۶/۱۹

form mahtab
در:
سلام خسته نباشین من نمیدونم چرا مدیریت وبم برام باز میشه اما وقتی میزنم مشاهده وب رو میزنم نمیاره واسم فقط امیدوارم هک...
۱۳۹۹/۰۶/۱۸

form ساناز محمدی
در:
سلام دوباره این ساب دامین بنده هست اگر یکی از مطالب را مشاهده کنید هر محصولی که ارسال شده داخل از طریق مدیریت یک...
۱۳۹۹/۰۶/۱۷
form محسن
در:
سلام و عرض ادب مجدد کد زیر هم کار نمیکنه مشکل چی میتونه باشه ؟!
۱۳۹۹/۰۶/۱۶
form ساناز محمدي
در:
سلام بنده یه ساب دامین دارم با دامنه شخصی حالا داخل این ساب دامین طرف آدرس سایت خودش رو داخل ساب دامین بنده میذاره مثلآ...
۱۳۹۹/۰۶/۱۶
form محسن
در:
سلام و عرض ادب لطفا راهنمایی کنید مشکل کد زیر چیه
۱۳۹۹/۰۶/۱۶
form احمد
در:
با عرض سلام ببخشید من با دستور append میخوام یه سطری رو به سبدم اضافه کنم ولی چطوری باید داخل append تگ ها رو بنویسم...
۱۳۹۹/۰۶/۱۵
form احمد
در:
با عرض سلام مجدد و خسته نباشید ببخشید طبق فرمایش شما من قبل از دستور else دستور if را نوشته بودم تا جایی که اطلاع...
۱۳۹۹/۰۶/۱۴
form احمد
در:
با سلام ببخشید طریقه استفاده از دستور else در ایجکس به چه صورت هست ایا باید دوباره فانکشن دان رو در هنگام شرط گذاشتن بزارم....
۱۳۹۹/۰۶/۱۳
form مجتهد
در:
سلام ابتدائا از سایت مفیدتون تشکر می کنم. من خیلی از آموزه هام رو از سایت شما یاد گرفتم. یه سوال دارم...
۱۳۹۹/۰۶/۱۳
form محمد حسین
در:
سلام لینک های من وقتی کلیک شوند اررور 404 تولید میکنند. علت چیست؟
۱۳۹۹/۰۶/۱۱
form حسین
در:
سلام بر شما و با تشکر از سایت خوبتون. من ابتدا با تابع mail پیش رفتم و یک if ایجاد کردم که اگر ایمیل...
۱۳۹۹/۰۶/۱۰
form mehdi
در:
خطای -22 مربوط به چیه؟
۱۳۹۹/۰۶/۱۰
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.