امروز پنجشنبه ۱۳۹۹/۰۴/۲۶

2020/07/16 GMT +4:30

آگهی

طراحی باکس جستجو با فتوشاپ و CSS

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

ساخت چارچوب باکس با HTML

همان طور که پیش تر گفتیم، باکس های جستجو در واقع فرمهای HTML هستند که با افزودن دکمه ارسال (submit) و پس زمینه گرافیکی تکمیل می شوند، پس آنچه ما در گام اول احتیاج داریم ساخت یک فرم html، یک فیلد از نوع input و یک دکمه ارسال یا submit است که در نمونه کد زیر این کار را انجام داده ایم.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | طراحی فیلد جستجو</title>
<!-- https://webgoo.ir -->
</head>
<body>
<div class="search-box">
<form action="#" method="get">
<input class="search-input" type="text" value="جستجو..." maxlength="125">
<input class="search-submit" type="submit" value="">
</form>
</div>
</body>
</html>

توضیح:
- همان طور که ملاحظه می کنید، فرم html بالا داخل یک بلاک div با کلاس فرضی search-box قرار دارد، در ادامه خواهیم دید که این بلاک در واقع نقش پس زمینه را برای باکس جستجو بازی می کند.
- فیلد input و دکمه submit نیز هر کدام یک کلاس css فرضی دارند که برای اعمال تغییرات ظاهری از آنها استفاده خواهیم کرد.

استایل css باکس جستجو

پس از نوشتن چارچوب html کار، باید فرم اولیه آن را با استایل css شکل دهیم.

<style type="text/css">
.search-box{
    width:200px;
    height:28px;
    background:#000 url(search-box.jpg);
    display:inline-block;
    direction:rtl;
    overflow:hidden;/*IE 6*/    
}
.search-input{
    width:166px;
    height:25px;
    background-color:transparent;
    display:inline-block;
    border:0px;
    padding:2px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:11px;
    color:#666;
    line-height:16px;/*IE */
}
.search-input:focus{
    outline:none;
}
.search-submit{
    width:25px;
    height:25px;    
    border:0px;
    padding:0px;
    background-color:transparent;
    display:inline-block;
    cursor:pointer;
}
</style>

توضیح:
- به این دلیل که ما از یک تصویر گرافیکی برای پس زمینه استفاده خواهیم کرد، لذا پس زمینه عناصر موجود در فرم را به صورت نامرئی (transparent) و بدون خط حاشیه (border) تنظیم می کنیم.
- در بلاک search-box که در واقع بلاک اصلی باکس جستجو است، از یک تصویر با نام search-box.jpg به عنوان پس زمینه استفاده کرده ایم، این تصویر را باید به صورت نمونه زیر در فتوشاپ (با ابعاد 200 در 28 پیکسل) طراحی کنید.

برای طراحی می توانید از ابزار Rounded Rectangle Tool و قابلیت Blending Options در فتوشاپ استفاده کنید.
- برای تنظیم جلوه های ظاهری فیلد input و دکمه submit نیز از دو کلاس css با نام های دلخواه search-input و search-submit استفاده کرده ایم، به این طریق تقریبا بیشتر ویژگی های مربوط به سفارشی سازی توسط استایل css قابل تنظیم است.
نکته: اگر دقت کرده باشید، برای حالت focus کلاس search-input از مقادیر outline و none استفاده کرده ایم، این کار برای غیر فعال کردن نمایش خط حاشیه فرم (در حالتی که کاربر در فیلد کلیک می کند) در برخی مرورگرها مانند گوگل کروم و سافاری است، علاوه بر این برای سازگاری با نسخه های قدیمی مرورگر اینترنت اکسپلورر، خاصیت overflow و line-height نیز در استایل استفاده شده است.

افزودن قابلیت تعاملی به باکس جستجو

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

<script type="text/javascript">
//<![CDATA[
function searchClear(thisfield, defaulttext, color){
    if (thisfield.value == defaulttext){
        thisfield.value = "";
        if (!color){
            color = "666666";
        }
        thisfield.style.color = "#" + color;
    }
}
function searchShow(thisfield, defaulttext, color){
    if (thisfield.value == ""){
        thisfield.value = defaulttext;
        if (!color){
            color = "666666";
        }
        thisfield.style.color = "#" + color;
    }
}
//]]>
</script>

نکته: برای فراخوانی توابع بالا، از رویدادهای onclick (برای حالتی که کاربر در فیلد کلیک می کند) و onblur (برای حالتی که کاربر خارج از فیلد کلیک می کند) استفاده کرده و فیلد input را به صورت زیر ویرایش می کنیم.

<input class="search-input" type="text" value="جستجو..." maxlength="125" onclick="searchClear(this, 'جستجو...')" onblur="searchShow(this, 'جستجو...')">

کد نهایی و پیش نمایش آنلاین

در زیر یک نمونه کامل از باکس جستجو به همراه پیش نمایش آنلاین آن را می توانید ملاحظه و بررسی کنید.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | طراحی فیلد جستجو</title>
<!-- https://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
}
.search-box{
    width:200px;
    height:28px;
    background:#000 url(search-box.jpg);
    display:inline-block;
    direction:rtl;
    overflow:hidden;/*IE 6*/    
}
.search-input{
    width:166px;
    height:25px;
    background-color:transparent;
    display:inline-block;
    border:0px;
    padding:2px;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:11px;
    color:#666;
    line-height:16px;/*IE */
}
.search-input:focus{
    outline:none;
}
.search-submit{
    width:25px;
    height:25px;    
    border:0px;
    padding:0px;
    background-color:transparent;
    display:inline-block;
    cursor:pointer;
}
</style>
<script type="text/javascript">
//<![CDATA[
function searchClear(thisfield, defaulttext, color){
    if (thisfield.value == defaulttext){
        thisfield.value = "";
        if (!color){
            color = "666666";
        }
        thisfield.style.color = "#" + color;
    }
}
function searchShow(thisfield, defaulttext, color){
    if (thisfield.value == ""){
        thisfield.value = defaulttext;
        if (!color){
            color = "666666";
        }
        thisfield.style.color = "#" + color;
    }
}
//]]>
</script>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است یا پشتیبانی نمی شود!
</noscript>
<div class="search-box">
<form action="#" method="get">
<input class="search-input" type="text" value="جستجو..." maxlength="125" onclick="searchClear(this, 'جستجو...')" onblur="searchShow(this, 'جستجو...')">
<input class="search-submit" type="submit" value="">
</form>
</div>
<hr>
به طور خلاصه باکس بالا از یک بلاک با پس زمینه ثابت، یک فرم html و دو فیلد از نوع input و submit تشکیل شده است.
</body>
</html>

پیش نمایش

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

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

قبلی »

« بعدی

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

نظرات (۱۳ یادداشت برای این مطلب ارسال شده است)

یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.

نویسنده: alireza

زمان: ۰۷:۱۴:۳۴ - تاریخ: ۱۳۹۱/۰۹/۱۹

ممنون از آموزش هاي كامل و خوبتون. هميشه پيروز باشيد.

نویسنده: mid

زمان: ۲۲:۴۹:۵۴ - تاریخ: ۱۳۹۱/۰۹/۱۹

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

پاسخ:

سلام
باید اندازه ها برای همه عناصر متناسب تغییر کنند و بهتر است بلاک اصلی یک مقدار عرض بیشتر داشته باشد (تا دکمه ارسال به پایین هدایت نشود)، برای تست و اطمینان از نحوه نمایش عناصر می توانید از تکنیک زیر استفاده کنید:
overflow:hidden را از کد css حذف کنید، برای background-color ها دو رنگ متمایز در نظر بگیرید تا دقیقا محل فیلد و دکمه در کنار هم مشخص شود، اگر دکمه ارسال مشخص نبود یا به پائین کشیده شده بود باید عرض بلاک search-box را بیشتر در نظر بگیرید.

نویسنده: es

زمان: ۱۱:۰۰:۴۳ - تاریخ: ۱۳۹۱/۰۹/۲۰

سلام
من یک سری فونت نصب کردم بعد از اون سایت شما به این شکل در اومد:

http://upload.tehran98.com/images/pnhxd19v1bf83dbpj835.png

حالا کدوم فونت ها رو پاک کنم تا درست بشه؟

پاسخ:

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

نویسنده: es

زمان: ۱۱:۲۴:۳۸ - تاریخ: ۱۳۹۱/۰۹/۲۰

در فایرفاکس هم این شکله:

http://ibt.hostesr.com/img/dda6e957f1e5.png

پاسخ:

وقتی فونت Tahoma در سیستم قابل دسترس نباشد یا اینکه مشکلی داشته باشد، مرورگر از فونت پیش فرض استفاده می کند که همان Arial است.

نویسنده: es

زمان: ۱۲:۰۷:۴۹ - تاریخ: ۱۳۹۱/۰۹/۲۰

ممنون از پاسختون این طور که متوجه شدم کل سیستم دچار مشکل شده و فونت ها دچار مشکل شدن
thanx

نویسنده: محمد

زمان: ۱۰:۲۳:۵۵ - تاریخ: ۱۳۹۱/۱۰/۱۰

با سلام و درود
استاد عزیز که پاسخ ها را می نویسی
شما باید در قالب سایتتان تمام مشکلات احتمالی را برطرف کنید و اگر دسترسی ندارید به برنامه نویس محترم بگویید که از font face استفاده کند که اگر هم بر فرض محال فونت تاهوما ایراد داشت سایت شما مشکل نداشته باشه
یک برنامه نویس موفق همیشه همه جوانب رو در نظر میگیره
با تشکر (در ضمن از لحن حرف زدنم ناراحت نشید اگر هم شدید معذرت میخوام من قصدم خیر خواهی بود)

پاسخ:

سلام
از نقد سازنده شما ممنونیم، اما مشکل (بالا) از سیستم کاربر بوده و ارتباطی به سایت ندارد، فونت Tahoma (در کنار Geneva, sans-serif, Arial, Helvetica و...) جزء فونت های استاندارد و پیش فرض سیستم عامل ها است که در اصطلاح به آنها فونت های امن وب (web-safe) می گویند و تنها در صورتی دچار مشکل می شود که به فرض سیستم کاربر دچار مشکل باشد، خاصیت font face در css نسخه 3 معرفی شده و در مرورگرهای قدیمی یا در برخی دستگاه ها پشتیبانی نمی شود.
به هر صورت خیلی ممنون از اینکه یادآوری کردید.

نویسنده: مینا

زمان: ۱۶:۵۲:۵۳ - تاریخ: ۱۳۹۲/۱۱/۲۵

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

پاسخ:

سلام
برای فعال کردن دکمه باید برنامه نویسی PHP یا سایر زبان های سمت سرور بلد باشید، البته از جستجوی گوگل برای سایت ها و وبلاگ ها نیز می توانید استفاده کنید (که آموزش آن در سایت وجود دارد، عبارت "جستجو" را در قسمت جستجوی سایت وارد کنید).

نویسنده: مهدی

زمان: ۱۶:۱۸:۳۰ - تاریخ: ۱۳۹۳/۰۵/۲۳

عالی و مفید

نویسنده: آرزو

زمان: ۲۰:۱۴:۱۶ - تاریخ: ۱۳۹۳/۰۷/۲۸

با سلام
من یه باکس سرچ طراحی کردم وقتی که باکسم هم اندازه ی اندازه های داده شده در این آموزش بود مشکلی نداشتم اما به محض تغییر در سایز باکس مورد نظر همه چیز خراب شد به این صورت که عکس button با یه فاصله ی 40px که مربوط به دکمه بود از border باکس اصلی فاصله گرفت و دقیقا زیر کلمه جستجو قرار گرفت (این در حالی بود که دکمه، دقیقا کنار input قرار داشت و پایین و یا بالا نرفته بود) یعنی در حالت کلی مشکل اصلیم مربوط به جابجا شدن عکسی بود که برای button در فتوشاپ گذاشته بودم. مشکل از کجاست؟ لطفا راهنماییم کنید. با تشکر

پاسخ:

سلام
برای تغییر اندازه باکس باید تمام width های مرتبط را به میزانی مساوی افزایش دهید، به طور مثال width در کلاس search-box و search-input باید به یک مقدار افزایش داشته باشد (به فرض + 20 شود)، اگر این تناسب رعایت شود دلیلی برای بهم ریختن فرم وجود ندارد.

نویسنده: نوید

زمان: ۱۱:۴۴:۱۱ - تاریخ: ۱۳۹۵/۰۵/۲۳

سلام ممنون از سایت خوبتون.
من تمام این کدارو وارد کردم ولی اون تصویر پس زمینه نشون نمیده ، تصویرم ذخیره کردم

پاسخ:

لطفا آدرس صفحه را جهت بررسی درج کنید!

نویسنده: زهرا

زمان: ۱۵:۳۹:۳۵ - تاریخ: ۱۳۹۶/۰۵/۱۹

سلام
من از کدها استفاده کردم و همه چیز درست بود فقط از کدهای جاوا اسکریپت نتونستم استفاده کنم. یعنی من این کدها رو در قسمت head گذاشتم و فراخوانی هم کردم اما وقتی میرم تو سایت اجرا می کنم و تو باکس کلیک که میکنم متنی که داخل باکس هست به صورت خودکار پاک نمیشه.
اگه ممکنه راهنمایی کنید چیکار کنم که این عمل رو درست انجام بده.
البته من سایز باکس و تصویر رو هم تغییر دادم و فکر نمیکنم کدهای جاوا اسکریپت برای پاک شدن متن هنگام کلیک و برگشتن دوباره آن ربطی به تغییرات ایجاد شده در css داشته باشد.
ممنون از مطالبتون

پاسخ:

باید تمام قسمت ها مطابق با با الگوی آموزش باشد، در تگ input رویداد onclick و onblur را لحاظ کردید؟

نویسنده: زینب

زمان: ۱۵:۲۳:۰۲ - تاریخ: ۱۳۹۶/۰۸/۰۶

سلام می خواستم بدونم اگه به جای تگ input از کنترل textbox در asp استفاده کنیم چجوری از کدهای script استفاده کنیم؟ آخه در کنترل های textbox در asp رویدادهای onclick و onblur و onfocus نیست و نمیشه از این ویژگی ها استفاده کرد. من هم حتما باید از textbox ها استفاده کنم چون فرم دارم طراحی می کنم و بعدا برای textbox ها باید کدنویسی کنم.
لطفا منو راهنمایی کنید. خیلی دنبال این موضوع هستم و راه حلی پیدا نمیکنم. خیلی کارم گیر کرده.
ممنون میشم

پاسخ:

لطفا در این رابطه به سایت های مرتبط با ASP.NET مراجعه کنید، تا آنجا که اطلاع داریم می توانید رویداد را با کدهای جاوا اسکریپت به تگ input نسبت دهید، در این حالت تگ input باید ID خاص خود را داشته باشید و در هنگام بارگذاری صفحه رویداد به آن نسبت داده شود، مثال:

<script type="text/javascript">
window.onload = function(){
	var input = document.getElementById('my-input');
	var button = document.getElementById('my-button');
	
	button.onclick = function(){
		alert(input.value);
	}
}
</script>
<input id="my-input" type="text" value="1">
<input id="my-button" type="button" value="Click">

همچنین می توانید از addEventListener نیز در جاوا اسکریپت استفاده کنید.

نویسنده: سید جلال

زمان: ۱۷:۳۴:۱۵ - تاریخ: ۱۳۹۶/۰۸/۲۵

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

پاسخ:

برای این منظور صرف طراحی بخش کاربری کفایت نمی کند، باید برنامه نویسی PHP و کار با پایگاه داده MySQL بلد باشید.

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

آخرین دیدگاه ها

برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.

مهدی

در:

نحوه دوباره نویسی لینک (URL Rewrite) در htaccess

خیلی خیلی ممنونم از وقتی که گذاشتید.. لطف کردید

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

mahtab

در:

پاسخ به سوالات و حل مشکلات وبلاگ نویسان

ببخشین چرا وبلاگ من تو لبتاپ دوستم باز نمیشه ؟؟؟ واسه ی ویروس هم اسکن کرده اما نوشته چیزی نیس چیکار کنیم ؟؟؟؟ ...

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

مهدی

در:

نحوه دوباره نویسی لینک (URL Rewrite) در htaccess

تبدیل کنم؟

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

sepideh

در:

نحوه دوباره نویسی لینک (URL Rewrite) در htaccess

سلام. من یک لندینگ پیج رو به صفحه اصلی سایت ریدایرکت 301 کردم. اگر بخوام تمام لینک های داخلی لندینگ رو (صفحات دنباله) رو...

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

در:

نحوه متحرک ساختن متن با تگ marquee در HTML

ببخشید کدها رو کجا میزنیم؟

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

نیلوفر

در:

ساخت دیتابیس، جدول و ستون با دستور CREATE در MySQL

سلام. من تازه کار هستم و توی سایتی که طراحی کردم یه سرچ باکس گذاشتم. ارتباط با پایگاه داده هم داره و نتایج رو نشون...

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

مهدی

در:

نحوه دوباره نویسی لینک (URL Rewrite) در htaccess

سلام من از کد زیر استفاده کردم ولی وقتی که اعمال میشه کل css های سایتم میپره.. چه باید بکنم

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

سلماسی

در:

پاسخ به سوالات و حل مشکلات وبلاگ نویسان

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

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

mahdi

در:

شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)

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

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

mahdi

در:

شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)

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

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

mahdi

در:

شروعی بر برنامه نویسی جاوا اسکریپت (JavaScript)

سلام استاد عزیز و گرامی ، یه دفتر چه یادداشت با localstorage میخوام بنویسم ولی مشکل دارم، دو تا سوال دارم ممنون میشم راهنماییم...

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

اریا

در:

توابع کار با آرایه در PHP - بخش اول

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

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

کافه کتاب

در:

نحوه تنظیم لیست با تگ ul li در CSS

سپاس خیلی وقت بود دنبالش بودم مرسی از سایت عالیتون

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

سجاد

در:

نحوه متحرک ساختن متن با تگ marquee در HTML

دمتون گرم. خیلی زحمت کشیدید

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

KhashayarPrk

در:

آموزش کاربردی عبارات با قاعده (Regular Expressions)

سلام. میخوام الگو تمام کلمات داخل پرانتز رو بدون پرانتز بریزه ارایه با این کد فقط یک پرانتز رو جواب میده.

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

Oliver

در:

ایجاد جدول با تگ table در HTML

چطوری دستور background رو برای جدلمون عکسش رو تنظیم کنیم و بهش طول و عرض بدیم

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

محمد

در:

ایجاد لینک دانلود مدت دار با PHP و MySQL

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

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

آیدا

در:

نحوه تنظیم لیست با تگ ul li در CSS

سلام من در حال طراحی با html هستم اما طبق فیلم آموزشی پیش میرم از یه جایی به بعد هم تغییرات اعمال نمیشه...

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

علی

در:

نحوه ایجاد لینک در HTML

سلام اگه میشه یه تکه کدی بفرستید که کاربر نتونه عکس مورد نظر رو دانلود کنه و با نگه داشتن روی عکس فقط لینکو ببینه...

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

sina2000

در:

نحوه نمایش متن و تصاویر اتفاقی در PHP و MySQL

با سلام و خسته نباشید طبق کد زیر استفاده میگه متغیر Pdc برای PDO است لطفا نمونه کد برای لایبرری...

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

محمد امین

در:

نحوه دوباره نویسی لینک (URL Rewrite) در htaccess

سلام ممنون از مطلبتون ببخشید من یه سایتی با شی گرایی کامل زدم الان میخوام آدرسشو بهینه کنم آدرس الان من به این صورته:...

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

ترنم

در:

ساخت منوی کشویی با تگ ul li و CSS

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

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

در:

پاسخ به سوالات و حل مشکلات وبلاگ نویسان

سلام چرا وقتی مطالب مربوط که تو وبلاگم هست رو جستجو میکنم نمیاره ؟؟؟

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

amir

در:

حذف مقادیر از MySQL با دستور DELETE

سلام من اگه بخوام با وارد کردن یه id داخل یک text کل اون ردیف پاک بشن باید چه کنم مثلا یک text دریافت میکنم...

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

محمدباقر حسیبیان

در:

آموزش MySQL، سیستم مدیریت پایگاه داده

من این مشکل برام پیش اومده که موقع ورود به پروژه م توی لوکال هاست wamp صفحه سفیده و هیچی رو نشون نمیده و کد...

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

...

در:

چگونه در وبلاگ و سایت، لینک دانلود قرار دهیم؟

سلام دو سایت نوشته ای مربوط به من رو چند سال قبل لینک دانلود قرار دادن من ازشون خواستم بردارنش ولی اینکارو نکردن سایت...

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

مجتبی

در:

استفاده ترکیبی از جاوا اسکریپت (JavaScript) و PHP

سلام میشه یک کد جاوا رو به php تبدیل کرد تا لود سایت سریع تر بشه؟

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

متین

در:

اعتبار سنجی فرم های وب با جاوا اسکریپت

سلام ؛ من تازه شروع به یادگیری کردم ؛ مطلب بسیار کاربردی بود ؛ ممنون از شما دوست عزیز.

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

mahdi

در:

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

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

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

امید

در:

آشنایی با HTML، زبان پایه کدنویسی وب

در برنامه نویسی کاربر با چه دستوری میتواند به صفحه اصلی برگردد

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

ali

در:

مخفی کردن عناصر وب با CSS

با سلام من یک پروژه طراحی کردم میخوام که وقتی کاربر روی ادامه مطلب کلیک کرد در خود صفحه بقیه مطالب را ببینه...

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

علی

در:

IP چیست و چه کاربردی دارد؟

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

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

oscar

در:

کار با تاریخ و زمان در جاوا اسکریپت (JavaScript)

درود. اگر بخوایم در نمایش تاریخ و زمان که به صورت لحظه ای خودش در صفحه رفرش میشه، فقط عبارت " Mon Jun 22 2020...

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

علی

در:

کاربرد متاتگ refresh در صفحات وب (HTML)

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

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

Farzad

در:

محدود کردن لینک دانلود مستقیم فایل ها با PHP و htaccess

الان وقتی فایل رو میخواد دانلود بکنه از خودش فایل میسازه ، به این صورت یعنی بعد از پوشه file هر پوشه ای باشه...

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

Farzad

در:

محدود کردن لینک دانلود مستقیم فایل ها با PHP و htaccess

سلام ، خسته نباشید من فایل هایی که در هاست میزارم به این شکل هست: یعنی مشخص نیست فایل ها تو چه پوشه...

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

شیما طیبی

در:

فوت و فن وبلاگ نویسی حرفه ای چیست؟!

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

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

احسان

در:

توابع (Functions) در جاوا اسکریپت (JavaScript)

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

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

علی

در:

محدود کردن لینک دانلود مستقیم فایل ها با PHP و htaccess

ممنون از پاسختون اما روش بالا جهت دانلود فایل کاربرد داره . من میخواستم به صورت استریم ویدئو پخش بشه اما آدرس مستقیم ویدئو...

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

در انتظار بررسی: ۰

آگهی

آگهی

آموزش برنامه‌نویسی PHP

آموزش جی کوئری jQuery

● آموزش‌های رایگان