دوشنبه ۱۴ آذر ۱۴۰۱

Monday, December 5, 2022 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) استفاده نکرده باشیم، رنگ پس زمینه در زیر تصویر مخفی خواهد شد (رنگ نمایش داده نمی شود).
در پایان این آموزش یادآور می شویم که طراحی قالب و شیوه های آن عمدتا سلیقه ای و در کنار مهارت کدنویسی تا حدود زیادی مبتنی بر خلاقیت است، بنابراین هدف از این نوع مطالب تنها راهنمایی و تسهیل شروع کار طراحی است، برای داشتن روش های شخصی و تبدیل ایده های نو به واقعیت هیچ محدودیتی وجود ندارد.
دسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
چگونه قالب های دو طرفه برای سایت یا وبلاگ خود طراحی کنیم؟
آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
زیبا سازی فرم های وب با CSS
آموزش انتقال قالب از فتوشاپ به کد HTML و CSS
طراحی قالب سه بعدی وب با فتوشاپ و CSS
دیدگاه
more ۳۴ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
پــــرتو
۱۳:۰۳ ۱۴۰۱/۰۸/۱۸
سلام جناب خسته نباشید من کد رو براتون ارسال کردم و دیگه اینکه یه سوال کامپیوتری داشتم من هر دفعه که لپتاپ رو خاموش روشن می کنم صفحه دسکتاپم یعنی کل فایلاش پاک میشه و حتی تنظیماتی که سیو دارم مثل زبان لپتاپ دوباره همون طوری میشه که قبلا بوده بنظر شما چرا اینطوری شده و باید چیکار کرد؟ ممنون میشم لطفا راهنمایی کنید
ایمیل شما خالی دریافت می شود! اگر ایراد از سمت شما نیست لطفا اطلاع دهید تا مشکل بررسی شود، توضیحات کامل در مورد تغییر مد نظر را هم درج کنید، در مورد مشکل سیستم بدون بررسی نمی توان نظر خاصی داد اما می تواند از اتمام تاریخ فعال سازی ویندوزتان باشد که در اینصورت باید با توجه به نسخه ویندوز دستگاه با برنامه های فعال ساز مجدد این کار را انجام دهید.
پرتو
۱۳:۳۳ ۱۴۰۱/۰۸/۱۹
عه من کد رو براتون اپلود کردم توی ایمیل خالی اومده؟ مگه میشه؟ خودم اپلودش کردم توی ایمیل...! عجیبه لطفا یه چک بکنید شاید مشکل از طرف شماست اگر چک کردین و مشکل از طرف شما نبود بهم بگید دوباره بفرستم
بررسی شد مشکلی در دریافت ایمیل ها وجود ندارد، سابقه ایمیل های ارسالی را نگاه کنید، همچنین ممکن است برخی فرمت ها در پیوست فایل مجاز نباشند بهتر است فایل یا فایل ها را در یک دایرکتوری به صورت فشرده شده (فرمت zip) در آورده و ارسال کنید.
پـــــرتو
۲۳:۱۴ ۱۴۰۱/۰۸/۲۳
سلام جناب خسته نباشید ببخشید جناب هعی مزاحم میشم توی همین قالبی که دارم بردراش صاف و مساوی نمیشه نمی دونم مشکل از منه یا مشکل از کده میشه یه چک لطفا بفرمایید که چرا اینطوری میشه و اگر میشه این رو هم برطرفش گنید ممنونم فکنم ایراد از اینکه عرض فوتر و هدر و بدنه با هم مساوی نیستند اگر امکان داره مساویشون کنید لطفا
طی روزهای آینده بررسی می کنیم و فقط در صورتی که زمانبر نباشد اصلاح می شود.
پـــــرتو
۱۲:۴۳ ۱۴۰۱/۰۹/۰۸
سلام جناب خسته نباشید شرمنده مزاحم میشم درسته گفتم قالبم درست شده ولی درست نشده یعنی اینک از کد جدیدی دارم استفاده می کنم ولی کد قبلیم لازم دارم می تونم کد رو درستش کنم و بفرستم یا نه؟ همون مشکلی که بهتون گفته بودم قبلا داره ممنون میشم جواب بدین مرسی
می توانید کد قالب را اصلاح کنید به نحوی که در بلاگفا قابل ثبت و استفاده باشد، لطفا مشکل را هم کامل توضیح دهید و اینکه چه تغییراتی مد نظرتان است، بررسی می کنیم و در صورتی که خیلی زمانبر نباشد انجام می شود.
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
9 × 1
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
میثم
سلام وقت بخیر. من برای نمایش دادن و مخفی کردن div با اسکرول کردن صفحه از کد زیر استفاده می کنم. با...
۱۴۰۱/۰۹/۱۲

پـــــرتو
سلام جناب خسته نباشید شرمنده مزاحم میشم درسته گفتم قالبم درست شده ولی درست نشده یعنی اینک از کد جدیدی دارم استفاده می کنم ولی...
۱۴۰۱/۰۹/۰۸

حسین ناصری
سلام من از نمونه کد برای نمایش قسمتی از سایت دیگه استفاده میکنم مشکلم اینه بعضی از سایت ها برداشت مطلب با این...
۱۴۰۱/۰۸/۳۰

مهدی
سلام خسته نباشید میخواهم تابع ای بنویسم که توان ۲ یک عدد را فراخوانی با ارجاع انجام دهد ؟ میشه بهم بگید...
۱۴۰۱/۰۸/۲۸

اروین
من یک بلاک html رو از یک بخشی از سایت با روش display:none برداشتم. من میخوام این بخشی که برداشتم توی...
۱۴۰۱/۰۸/۲۶

پـــــرتو
سلام جناب خسته نباشید ببخشید جناب هعی مزاحم میشم توی همین قالبی که دارم بردراش صاف و مساوی نمیشه نمی دونم مشکل از منه یا...
۱۴۰۱/۰۸/۲۳

پرتو
عه من کد رو براتون اپلود کردم توی ایمیل خالی اومده؟ مگه میشه؟ خودم اپلودش کردم توی ایمیل...! عجیبه لطفا یه چک بکنید شاید مشکل...
۱۴۰۱/۰۸/۱۹

شبنم
سلام وقت خیر، من برای وب سایتم اسلایدر ایجاد کردم از طریق سایت owl carousel و اوکی هست مشکلی از این بابت ندارم، مشکل اینجاست...
۱۴۰۱/۰۸/۱۸

پــــرتو
سلام جناب خسته نباشید من کد رو براتون ارسال کردم و دیگه اینکه یه سوال کامپیوتری داشتم من هر دفعه که لپتاپ رو خاموش روشن...
۱۴۰۱/۰۸/۱۸

پرتو
باشه فعلا لپتاپم در دسترسم نیست تا آخر هفته میفرستم
۱۴۰۱/۰۸/۰۷

پرتو
سلام خسته نباشید شرمنده مزاحم میشم اوکی ممنونم از جوابتون یه چیز میتونم بگم میخاستم بگم که برای منوی سمت راست اگر یه بردر برای...
۱۴۰۱/۰۸/۰۵

عباس
سلام خوبید جدید یک هفته ای هست تعداد آنلاین ها را فقط عدد یک نشون میده بی زحمت یه بررسی کنید البته سی‌دی‌ان سایت تغییر...
۱۴۰۱/۰۸/۰۱

پرتو
سلام جناب خسته نباشید عه بازم منظورمو متوجه نشدین اینایی که گفتینو میدونم منظورم اینک کدهایی که توی سایت شما هست همون ادرسی که بهم...
۱۴۰۱/۰۷/۲۹

پرتو
اوکی ممنونم از توضیحاتتون فقط در مورد کد یه چیز بگم من منظورم اینک کجا کدها رو قرار بدم منظورم کدوم قسمت یا اینک کدوم...
۱۴۰۱/۰۷/۲۶

sara24
سلام خسته نباشید کدی رو تو جاوا اسکریپت با if else نوشتم که وقتی روی دکمه (like) کلیک شه اون صفحه رو به لیست...
۱۴۰۱/۰۷/۲۳

پرتو
سلام جناب خسته نباشید جناب الان اون لینکی که فرستادین خوندم فقط نفهمیدم باید چیکار کنم دقیقا یعنی متوجه شدم ولی متوجه نشدم باید دقیقا...
۱۴۰۱/۰۷/۲۲

Zeinab
سلام من میخواستم بدونم که چرا توی اکثر سایت ها اول با universal selector (که با * در css انتخاب میشه) میان padding و margin...
۱۴۰۱/۰۷/۲۱

آیدا
در صفت face در تگ font کاری کنیم که فاصله رو بپذیره؟
۱۴۰۱/۰۷/۱۹

سپهر
سلام خسته نباشید من یک وبلاگ داخل بلاگ بیان دارم ،‌ فاو ایکون هم ساختم ولی نمیدونم چه جوری اپلودش کنم هاست هم ندارم خیلی...
۱۴۰۱/۰۷/۱۵

پـــرتو
سلام خسته نباشید شرمنده مزاحم میشم ببخشید اینستاگرام قطعه کلا؟ می دونم قطعه و باید با فیلترشکن رفت منظورم اینک من با فیلترشکن هم نمی...
۱۴۰۱/۰۷/۱۵
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.