آموزش برنامه نویسی وب و مهارتهای مرتبط

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

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

یکی از چالش های همیشگی طراحان وب طراحی و کدنویسی سربرگ (هدر 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 ترسیم می کنیم.

با انتخاب ابزار رسم شکل میزان شعاع یا 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 (افقی) تصویر را به صورت متوالی تکرار می کند تا همپوشانی کامل ایجاد شود.

- با در نظر گرفتن تصویر پس زمینه در صورتی که از فرمت png در حالت شفاف (Transparent) استفاده نکرده باشیم، رنگ پس زمینه در زیر تصویر مخفی خواهد شد (رنگ نمایش داده نمی شود).
در پایان این آموزش یادآور می شویم که طراحی قالب و شیوه های آن عمدتا سلیقه ای و در کنار مهارت کدنویسی تا حدود زیادی مبتنی بر خلاقیت است، بنابراین هدف از این نوع مطالب تنها راهنمایی و تسهیل شروع کار طراحی است، برای داشتن روش های شخصی و تبدیل ایده های نو به واقعیت هیچ محدودیتی وجود ندارد.

دسته بندی: مهارتهای وب » طراحی وب

برچسب ها: CSS - طراحی وب

قبلی »

« بعدی

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

دیدگاه

۳۴ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

mona

۰۱:۴۵ ۱۳۹۳/۰۴/۲۷

متشکرم .
فقط اگر هدر قالب اسلایدشو باشه
چطور میشه هدرو تغییر داد؟

<link href="http://slidethemes.ir/theme/139/style.css" type="text/css" rel="stylesheet">
<script src="http://slidethemes.ir/theme/139/slide/jquery-1.8.3.min.js" type="text/javascript" charset="UTF-8"></script>

این رو توی کد قالب پیدا کردم ... و قالبم قالب وب پایینیه

http://tajrobeyesard.mihanblog.com/

قسمتی از هدر ثابت و قسمت دیگه اش اسلایدشو هست ...
میخوام قسمت هدری که ثابت هست هم تغییر کنه و هم قسمتی که اسلاید شو هست
شما میتونید کمک کنید؟

اسلایدشو از چند قسمت مختلف (فایل استایل CSS، کتابخانه jQuery و..) تشکیل شده و تصاویر آن در زیر نوشته

<!-- Slide Start -->

در سورس وبلاگ قرار دارند و به راحتی قابل تغییر هستند.

mona

۱۳:۱۵ ۱۳۹۳/۰۴/۲۵

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

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

مترسک

۲۱:۵۴ ۱۳۹۳/۰۳/۱۱

سلام . ببخشید یه سوال دارم میخواستم هدر وب م رو عوض کنم اما css
هست نمیدونم چی کار کنم؟نظرات قبل رو هم خوندم ولی چیز زیادی دستگیرم نشد .

http://template.pichak.net/pichak/150/style.css

این رو توی قالب وب پیدا کردم .

تصویر هدر قالب شما در آدرس زیر قرار دارد:

http://template.pichak.net/pichak/150/header.jpg

لذا یک تصویر جدید با ابعاد تصویر فعلی در یک سرویس میزبان فایل آپلود کرده و آدرس آن را در استایل زیر جایگزین نمائید:

<style>
#header{background:#f3f3f3 url(http://template.pichak.net/pichak/150/header.jpg) no-repeat top right;}
</style>

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

قاصدک

۱۵:۲۸ ۱۳۹۳/۰۱/۲۱

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

با برنامه فتوشاپ، لطفا عبارت "تغییر اندازه و کاهش حجم تصاویر وب در فتوشاپ + وبگو" را در گوگل جستجو نمائید.

قاصدک

۱۶:۰۵ ۱۳۹۳/۰۱/۱۹

سلام...خسته نباشید...
میخواستم عکس وبلاگم رو عوض کنم...اگه میشه توضیح بدید چه طوری این کارو انجام بدم..
مرسی

در قسمت ویرایش سورس قالب، به جای آدرس زیر:

http://www.bia2skin.ir/theme/199/header.jpg

آدرس تصویر مورد نظر خود را (با همان ابعاد باشد) قرار دهید.

اکبری

۱۷:۱۶ ۱۳۹۲/۱۲/۰۴

سلام ممنون

اکبری

۰۹:۱۰ ۱۳۹۲/۱۲/۰۴

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

http://arashkherameh.blogfa.com/

مشکل به هم ریختن قالب را باید خودتان اصلاح کنید چون دقیقا نمی دانیم چه کدی را حذف یا اضافه کرده اید، اما در مورد درج اسکریپت تبلیغاتی به سرویس بلاگفا برمی گردد، متاسفانه این سرویس دهنده هر روز سایت های بیشتری را به لیست سیاه (!!) خود اضافه می کند با این توجیه که جلوی فعالیت های تبلیغاتی یا انتشار اسکریپت های مخرب گرفته شود!
راه حل: یا قید بلاگفا را بزنید و از یک سرویس دیگر استفاده کنید یا اینکه سرویس های آپلود مختلفی را تست کنید تا یک مورد سازگار با بلاگفا پیدا شود!

مریم

۰۰:۴۴ ۱۳۹۲/۰۹/۱۰

با سلام: میشه لطف کنین بگین آیا لینک ها میشه تو فتوشاپ درست کرد بعد تو css واسشون div تعریف کرد؟یا نه ممنون
برای طراحی لینک ها می تونم از فتوشاپ استفاده کنم؟؟
بازم ممنون

می توانید لینک ها را درون بلاک های div قرار دهید (استایل فتوشاپ را به بلاک div اختصاص دهید) یا برای تگ a در CSS خاصیت display با مقادیر block تعریف کنید.

pooys

۲۱:۴۹ ۱۳۹۲/۰۵/۱۸

با سلامی دوباره ادرس وب ایشان فیلتر شده است

pooys

۲۰:۵۹ ۱۳۹۲/۰۵/۱۸

با سلام. این نمی تونه جواب خوبی برای خانم نیلوفر باشد حالا که سیستم این خاصیت رو نداره میتونه خودش کد تو قسمت قالب متن رو در جای دلخواه بذاره بدونه هیچ دردسری

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

نیلوفر

۰۵:۵۹ ۱۳۹۲/۰۳/۱۷

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

این مورد معمولا باید در کدنویسی قالب وبلاگ طراحی و علاوه بر آن سرویس دهنده (میهن بلاگ) امکان ایجاد پست ثابت را داشته باشد، کدی برای آن به صورت مجزا وجود ندارد!

zar

۰۰:۵۳ ۱۳۹۲/۰۳/۱۴

سلام
من از یک سایت خارجی یک تم برای وبلاگم در بلاگفا گرفتم که استفاده کنم. حالا چند سوال برای من پیش امده است. در ضمن رشته من کامپیوتر نیست. سوالات:
1- تمی که دانلود نمودم دو پوشه در ان هست که حاوی فایل های xml است من چگونه باید از این فایل xml بعنوان قالب استفاده کنم؟
2- چگونه باید آنرا مثلا برای بلاگفا آماده نمود؟
آدرس اینترنتی اون به این صورت است:

www.premiumbloggertemplates.com/2013/01/sevim-premium-blogger-template.html

متشکرم

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

سارا

۱۷:۰۰ ۱۳۹۲/۰۲/۲۶

سلام ممنونم از توضیحاتتون .. یه سوال داشتم اینکه چطور برای هدر قالب تصویر بذاریم
میدونم که یه تصویر باید آپلود بشه! اما اینکه سایزش رو چطور با هدر منطبق کنیم و کد هاش رو بذارید ممنون میشم.

برای اعمال تنظیمات سفارشی در قالب و هدر وبلاگ الزاما باید با CSS آشنا باشید، اکثر قالب های وب با استفاده از استایل CSS طراحی می شوند و تغییر موارد نیز با ویرایش آن امکان پذیر است.

زهرا

۱۷:۳۶ ۱۳۹۲/۰۱/۱۴

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

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

میثم

۲۱:۴۲ ۱۳۹۱/۱۲/۰۲

تا همینجاش واقعا ممنون کلی ازتون یاد گرفتم . اگه زحمتی نیست بقیشم کمکم میکنین؟ خب من فایل 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 از 3

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