دوشنبه ۳۱ اردیبهشت ۱۴۰۳

Monday, May 20, 2024 GMT +3:30

طراحی و کدنویسی هدر قالب با فتوشاپ، 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) استفاده نکرده باشیم، رنگ پس زمینه در زیر تصویر مخفی خواهد شد (رنگ نمایش داده نمی شود).
در پایان این آموزش یادآور می شویم که طراحی قالب و شیوه های آن عمدتا سلیقه ای و در کنار مهارت کدنویسی تا حدود زیادی مبتنی بر خلاقیت است، بنابراین هدف از این نوع مطالب تنها راهنمایی و تسهیل شروع کار طراحی است، برای داشتن روش های شخصی و تبدیل ایده های نو به واقعیت هیچ محدودیتی وجود ندارد.
دسته بندی: مهارتهای وب » طراحی وب
برچسب ها: CSS - طراحی وب
قبلی »
« بعدی
related مطالب بیشتر:
طراحی قالب سه بعدی وب با فتوشاپ و CSS
طراحی باکس جستجو با فتوشاپ و CSS
قابلیت های کاربردی CSS3 در طراحی وب
چگونه برای سایت یا وبلاگ خود قالب طراحی کنیم؟
آموزش انتقال قالب از فتوشاپ به کد HTML و CSS
دیدگاه
more ۳۴ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
میلاد
۱۸:۱۸ ۱۳۹۱/۰۸/۲۱
مرسی عالی بود
میثم
۱۷:۱۶ ۱۳۹۱/۱۱/۱۶
با سلام و خسته نباشید. من تازه با سایت شما اشنا شدم. مدام از مطالبش استفاده می کنم. من میخوام هدر وبم رو عوض کنم اما کد قسمت هدر رو نمیتونم توی قالبم پیدا کنم. شما پیشنهادی ندارین؟ اگه لازمه کد قالب رو براتون بفرستم. بازم ممنون از زحمتایی که می کشید
کدهای مربوط به ویژگی های ظاهری مانند هدر معمولا در فایل CSS قالب ها موجود است، این فایل هم (معمولا) به صورت غیر مستقیم در صفحه وارد می شود، لذا برای راهنمایی دقیق تر لطفا آدرس وبلاگ خود را درج کنید تا بررسی گردد.
میثم
۰۱:۴۹ ۱۳۹۱/۱۱/۱۸
بازم ممنون از وقتی که میذارید.
میثم
۰۰:۴۱ ۱۳۹۱/۱۱/۲۴
سلام و خسته نباشید. اقا بازم ببخشید مزاحم شدم. قرار شد وبم رو نگاه کنید. دیدین؟
کد 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/
مشکل به هم ریختن قالب را باید خودتان اصلاح کنید چون دقیقا نمی دانیم چه کدی را حذف یا اضافه کرده اید، اما در مورد درج اسکریپت تبلیغاتی به سرویس بلاگفا برمی گردد، متاسفانه این سرویس دهنده هر روز سایت های بیشتری را به لیست سیاه (!!) خود اضافه می کند با این توجیه که جلوی فعالیت های تبلیغاتی یا انتشار اسکریپت های مخرب گرفته شود!
راه حل: یا قید بلاگفا را بزنید و از یک سرویس دیگر استفاده کنید یا اینکه سرویس های آپلود مختلفی را تست کنید تا یک مورد سازگار با بلاگفا پیدا شود!
اکبری
۱۷:۱۶ ۱۳۹۲/۱۲/۰۴
سلام ممنون
قاصدک
۱۶:۰۵ ۱۳۹۳/۰۱/۱۹
سلام...خسته نباشید...
میخواستم عکس وبلاگم رو عوض کنم...اگه میشه توضیح بدید چه طوری این کارو انجام بدم..
مرسی
در قسمت ویرایش سورس قالب، به جای آدرس زیر:
http://www.bia2skin.ir/theme/199/header.jpg
آدرس تصویر مورد نظر خود را (با همان ابعاد باشد) قرار دهید.
نخست
قبلی
1
2
3
بعدی
آخر
paged صفحه 1 از 3
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
4 × 7
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
سعیدی
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
سلام می تونید اینو اصلاح کنید؟ چون من با توضیحات شما یاد نگرفتم خیلی ممنون اگه یکبار اصلاح کنید واسه بعد یاد...
۱۴۰۳/۰۲/۲۲
سعیدی
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
دست شما درد نکنه وقتی اینطوری تغییر میدم و به class می نویسم کار نمی کنه و ارور میده
۱۴۰۳/۰۲/۲۱
سعیدی
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
دست شما درد نکنه خیلی خوب بود این یکی رو چطوری فراخوانی کنم؟ این واسه مناسبت هاست خیلی ممنون
۱۴۰۳/۰۲/۱۹
سعیدی
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
با سلام آیا می شه این تابع رو بصورت class نوشت؟ میخوام وقتی کد ملی میدم با این تابع فراخوانی بشه و شهر...
۱۴۰۳/۰۲/۱۹
پرتو
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
مگه شما دارین اموزشش رو؟ آدرسش رو میزارید؟ یا اگر سایتی رو میشناسید که آموزش داده باشه معرفی کنید ممنون میشم من خیلی گشتم توی...
۱۴۰۳/۰۲/۱۸
پــرتو
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
سلام خوبید ؟ خسته نباشید گوشی پدرم شیاومی هست ایمیلمو ثبت کردم داخلش بعد می خواستم حذفش کنم نمیشد می گفت همه داده های توی...
۱۴۰۳/۰۲/۱۶
vip
کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
خیلی ممنونم از شما خیلی عالی شد میشه مثل تبلیغ بلاگفا باشه یعنی زیر صفحه نمایش داده بشه و صفحه رو سیاه نکنه که تا...
۱۴۰۳/۰۲/۰۵
vip
کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
با سلام و خسته نباشید استاد چند وقت پیش این کد رو از شما گرفتم این کد خیلی خوبه و کاربر رو هم...
۱۴۰۳/۰۲/۰۴
پـــرتو
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
سلام خسته نباشید شرمنده مزاحم میشم یه سوال داشتم می خواستم بپرسم که چرا بلاگفا باز نمیشه برام؟ کلا هر وبلاگی که مربوط به بلاگفا...
۱۴۰۳/۰۲/۰۲
هادی عبداله زاده
ارسال ایمیل با PHP و کلاس PHPMailer
با تشکر از شما دوست عزیز با order_id درستش کردم موقع برگشت order_id رو بر می گردونه اینطوری کردم که از طریق اون شناسه...
۱۴۰۳/۰۱/۲۲
هادی عبداله زاده
ارسال ایمیل با PHP و کلاس PHPMailer
با تشکر از شما برای ارسال درخواست درست بود و به بانک هم وصل شد فقط برای وریفای چیکارش کنم؟
۱۴۰۳/۰۱/۲۲
هادی عبداله زاده
ارسال ایمیل با PHP و کلاس PHPMailer
با سلام و خسته نباشید سال نو شما مبارک من یه کد واسه انتقال به درگاه دارم واسه زرین پال هست ...
۱۴۰۳/۰۱/۲۰
پـــرتو
کار با متد getElementById و innerHTML در جاوا اسکریپت (JavaScript)
ببخشید ممنون از جوابتون ولی یه سوال اگر بخوام همون شماره رو با حساب کاربری جدید با همون شماره رو داشته باشم داده های قبلی...
۱۴۰۳/۰۱/۱۹
حسین بلاگ
متدهای کار با آرایه در جاوا اسکریپت (JavaScript)
من یه صفحه ارسال متن دارم میخوام کاربرها وقتی واسه م پیام میدن وقتی روی اون دکمه کلیک می کنن بهشون بگه لطفا صبر...
۱۴۰۳/۰۱/۱۹
شریفی
آنچه برای شروع طراحی قالب یک وبلاگ باید بدانیم
سلام و عرض احترام سال نو رو بهتون تبریک میگم انشالله سال خوبی داشته باشین یه سرویس وبلاگدهی داریم که قصد داریم به...
۱۴۰۳/۰۱/۱۵
فرهادی
نمایش قسمتی از متن و پاراگراف با PHP
سلام ببخشید یه مشکل دارم این صفحه رو نگاه کنید چند بار توی سورس تکرار شده نمی تونم الگوی توضیحاتش رو استخراج...
۱۴۰۳/۰۱/۱۰
فرهادی
نمایش قسمتی از متن و پاراگراف با PHP
با تشکر از شما یه مشکل دیگه برام پیش اومده واسه این کد وقتی echo می گیرم تومان باهاش میاد وقتی میخوام فقط...
۱۴۰۳/۰۱/۰۹
سید صالح
ارسال پارامتر به URL و دریافت مقادیر با PHP
با سلام و خسته نباشید من یک فرم ساده دارم که کاربر باید پر کنه چون سوال امنیتی و اینا نداره ربات ها همه...
۱۴۰۳/۰۱/۰۷
فرهادی
نمایش قسمتی از متن و پاراگراف با PHP
با تشکر از شما یه سوال دیگه هم دارم توی تعدادی از سایتهای فروشگاهی صفحات سایت مپ به جای لینک صفحات حاوی لینکهایی هستند...
۱۴۰۳/۰۱/۰۶
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.
آموزش مقدماتی | آموزش کاربردی | مهارتهای وب | تماس با ما | انتقادات و پیشنهادات | برنامه نویسی وب | پشتیبانی فنی | تبلیغات | درباره ما | حریم خصوصی | سوالات متداول | HEX RGB
copyright  محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
copyright  خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
© 2012 - 2024 Webgoo.ir - All Rights Reserved.