امروز سه شنبه ۱۳۹۹/۱۰/۳۰

2021/01/19 GMT +3:30
article

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

web-search-box

از جمله ابزارهایی که در گوشه و کنار بیشتر سایت ها و وبلاگ ها به چشم می خورد، امکان جستجو و باکس مربوط به آن است که عموما به صورت گرافیکی و به کمک برنامه هایی نظیر فتوشاپ در کنار کدنویسی 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 پیکسل) طراحی کنید.
search-box
برای طراحی می توانید از ابزار 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>
پیش نمایش
sectionدسته بندی: مهارتهای وب » طراحی وب
labelبرچسب ها: CSS - JavaScript - طراحی وب
قبلی »
« بعدی
related مطالب بیشتر:
» آموزش انتقال قالب از فتوشاپ به کد HTML و CSS
» زیبا سازی فرم های وب با CSS
» نحوه ساخت باکس گوشه گرد در فتوشاپ و CSS
» طراحی قالب سه بعدی وب با فتوشاپ و CSS
» قابلیت های کاربردی CSS3 در طراحی وب
commentنظرات (۱۳ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: 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 بلد باشید.
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- موارد غیرمرتبط با مباحث آموزش ها را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ مختصر داده خواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- از درج عناوین تبلیغاتی در فیلدها خودداری کنید، در صورتی که یادداشت تبلیغاتی تشخیص داده شود حذف خواهد شد.
- تمام یادداشت ها بررسی و زمانی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد خودداری کنید.





2 × 4
 refresh

آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form کوثر رحیمی
در:
پاسخ به سوالات و حل مشکلات وبلاگ نویسان
سلام ا ز راهنماییتون ممنونم من تازه وبلاگم رو درست کردم ۱۲ سالمه هر کاری می کنم فیلم در اون قرار نمیگیره همش این خطا...
۱۳۹۹/۱۰/۲۹
form متین
در:
ارسال و دریافت اطلاعات با متد GET و POST در ای جکس (Ajax)
سلام و خسته نباشید من بخوام داده ای که از قبل موجوده رو با متد پست به یک فایل ارسال کنم چجور میشه؟ یعنی...
۱۳۹۹/۱۰/۲۷
form روشنا
در:
پاسخ به سوالات و حل مشکلات وبلاگ نویسان
سلام ما یه وبلاگ گروهی داریم مختص املاک فایل های جدید و حتی قالب جدید اصلا اعمال نمیشه . حتی راهنمایی که کرده...
۱۳۹۹/۱۰/۲۷
form علی
در:
پخش فایل صوتی (آهنگ، موسیقی پس زمینه) در سایت و وبلاگ
من در یک سایت سازی سایت ساختم یه بخش داره به نام اسکریپت دلخواه می خوام یه اسکریپتی بذارم که مثلا یه موسیقی وقتی کاربر...
۱۳۹۹/۱۰/۲۷
form امیرحسین
در:
توابع (Functions) در PHP
بله استاد خیلی ممنون، نمیدونستم خودش Optimize رو انجام میده در کل من بعد از ایندکس گذاری ها همیشه سعی کردم جوری که با...
۱۳۹۹/۱۰/۲۶
form امیرحسین
در:
توابع (Functions) در PHP
ُسلام وقت بخیر این کووری هم چون اول قسمت WHERE انجام میشه بعد قسمت ON پس این کووری هم با حالت کووری قبلی برابره
۱۳۹۹/۱۰/۲۶
form امیرحسین
در:
توابع (Functions) در PHP
سلام استاد وقت بخیر ممنون از پاسخ گویی های قبلی یه سوال دیگه داشتم: این هم هیچ مشکلی نداره و کار میکنه، ایا...
۱۳۹۹/۱۰/۲۵
form محمد بیدل بازه
در:
فرمت بندی و کار با متن و پاراگراف در HTML
سلام خسته نباشید ببخشید من توی یک قسمت سایتم تصویری دارم و میخوام سمت راست اون تصویر متن بنویسم ولی نمیشه تا متن رو...
۱۳۹۹/۱۰/۲۵
form سلام
در:
فرمت بندی و کار با متن و پاراگراف در HTML
و اینکه یه تگ خوب برای فونت معرفی کنید و یه تگ دیگه که متن رو (تیتر مطلب (تست)) در ادامش بنویسه نه اینکه...
۱۳۹۹/۱۰/۲۴
form سلام
در:
فرمت بندی و کار با متن و پاراگراف در HTML
سلام وبسایتم را نگاه کنید از چه تگی استفاده کنم تا فاصله بین تیتر مطلب جدید را کاهش دهم؟ (از خطی به خط...
۱۳۹۹/۱۰/۲۴
form وطن
در:
لیست کدهای وضعیت HTTP و معنی خطاهای سرور
سلام. خسته نباشید. خیلی گشتم درباره یک خطا یا ایراد فنی که چند روز هست در سایت نوشته شده با پی اچ پی (اسکریپت اولوشن)...
۱۳۹۹/۱۰/۲۴
form حورارمی
در:
فوت و فن وبلاگ نویسی حرفه ای چیست؟!
سلام. من هنوز نمیدونم تو تنظیمات باید کجا رو بگردم تا قالب وبلاگم رو با عکس مورد علاقه ام تغییر بدم. یا نمیتونم...
۱۳۹۹/۱۰/۲۳
form راشد
در:
نحوه درج تصویر در وبلاگ و سایت
این روش خیلی طولانیه در فروشگاه من یک برنامه گرفتم که یه عکس توش اپلود کن بهت یک لینک میده در ظرف چند ثانیه و...
۱۳۹۹/۱۰/۲۱
form باسلام
در:
محافظت از مطالب وبلاگ در مقابل کپی غیر مجاز!
باسلام خدمت شما عزیز زحمت کش، من مطلب را تا آخر مطالعه کردم. من وبلاگم بازدیدای زیادی داره چون تمام مطالبش رو خودم مینویسم و...
۱۳۹۹/۱۰/۲۱
form محمود
در:
فرمت بندی و کار با متن و پاراگراف در HTML
سلام و عرض ادب من در سایتم یک قسمت تب ایجاد کردم، متن ها را که در تب می نویسم پاراگراف بندی نمی شوند....
۱۳۹۹/۱۰/۲۱
form علی آقابیگی
در:
پاسخ به سوالات و حل مشکلات وبلاگ نویسان
سلام خسته نباشید ببخشید من می خواستم کد جدید در وبلاگم بزارم بعد اشتباهی رفتم در قسمت ویرایش کدها و بعد بیشتر کدها را پاک...
۱۳۹۹/۱۰/۲۰
form محمد
در:
کار با پنجره Pop-up در جاوا اسکریپت (JavaScript)
سلام. من میخوام با جاوا اسکریپت یک کدی بنویسم که وقتی کاربر روی یک دکمه ‏ای کلیک کرد، یک کد تصادفی برای شمارش ارسال...
۱۳۹۹/۱۰/۲۰
form پوریا
در:
نمایش قسمتی از متن و پاراگراف با PHP
سلام خسته نباشید، ممنونم بابت توضیحات خوبتون، یه مشکلی داشتم میخواستم ببینم امکانش هست راهنمایی کنید؟ فرض کنید یه اینطور متنی داریم: ...
۱۳۹۹/۱۰/۱۹
form seyedsobhanmansouri
در:
دلایل بهم ریختن قالب وبلاگ و سایت
سلام خسته نباشید من سایتمو طراحی کردم اما به این مشکلات بر میخورم اول اینکه هدر سایتم نمایش داده نمیشه اصلا و بعد...
۱۳۹۹/۱۰/۱۹
form رضا
در:
نمایش فیلد جستجوی گوگل در سایت یا وبلاگ
سلام. ممنون بابت مطالب مفیدتون. این نوع جستجو به سئو سایت لطمه نمیزنه؟؟؟ چون در این مدل جستجو، مقدار impression میره بالا ولی...
۱۳۹۹/۱۰/۱۹
form mahdi
در:
آموزش برنامه نویسی وب با PHP
سلام استاد عزیز ، پس بنظرتون بجای وقت گذاشتن برای یادگیری لاراول و وردپرس ، وقت بزارم که عمیق تر php و ساختار mvc...
۱۳۹۹/۱۰/۱۹
form علی
در:
نحوه متحرک ساختن متن با تگ marquee در HTML
سلام و ممنون بابت وبسایت عالیتون داخل بعضی سایت ها دیدید مثلا یه متنی شروع به تایپ شدن می کنه و وقتی کامل شد...
۱۳۹۹/۱۰/۱۸
form محمد
در:
توابع (Functions) در جاوا اسکریپت (JavaScript)
سلام خدمت شما دوست عزیز سوالم این بود میخاستم چندتا مثال از این تابع و چند تابع دیگه از خودتون رو برام مثال بزنید...
۱۳۹۹/۱۰/۱۸
form محمود رنجبر
در:
دلایل بهم ریختن قالب وبلاگ و سایت
سلام برادر مشکل من تو همین سایتی هست که فرستادم وقتی گزینه خانه رو کلیک میکنم و بعد دکمه بک گوشی رو میزنم بالای صفحه...
۱۳۹۹/۱۰/۱۷
form mahdi
در:
آموزش برنامه نویسی وب با PHP
سلام استاد عزیز ، بعد از آموزس php با لاراول کار کنیم بهتره ؟
۱۳۹۹/۱۰/۱۶
form رضا
در:
نحوه قرار دادن فاوآیکن (Favicon) در نوار آدرس سایت و وبلاگ
آدرس رو براتون گذاشتم دامنه قبلا روی یه وبلاگ میهن بلاگ بود چند ماه میشه که از میهن بلاگ خداحافظی کردم ولی هنوز که هنوزه...
۱۳۹۹/۱۰/۱۴
form نیلو
در:
چگونه برای سایت یا وبلاگ خود قالب طراحی کنیم؟
سلام... ببخشید بعد طراحی قالب قالب شیشه ایم هست یا نه؟؟؟
۱۳۹۹/۱۰/۱۳
form مجتهدزاده
در:
نحوه ذخیره کردن اطلاعات با دستور INSERT در MySQL
سلام من یه فرمی طراحی کردم که توش قراره تعداد زیاد (حدود 10 الی 50) فیلد رو تو دیتابیس اینسرت کنم. آیا باید...
۱۳۹۹/۱۰/۰۸
form مجتهدزاده
در:
تعریف و استفاده از متغیر (Variable) در PHP
سلام لطفا راهنمایی بفرمایید که چه زمانی قبل از متغیر @ استفاده می شه و کاربردش چیه؟ با تشکر
۱۳۹۹/۱۰/۰۶
form ali
در:
عملگرها (Operators) در PHP
سلام چجوری میشه با php بازی هوب رو طراحی کرد
۱۳۹۹/۱۰/۰۶
form رضا
در:
نحوه قرار دادن فاوآیکن (Favicon) در نوار آدرس سایت و وبلاگ
سلام ممنون از سایت خوبتون ایکون سایتم رو توی دسکتاپ درست نشون میده ولی تو گوشی مشکل داره طبق اموزش شما هم انجام دادم...
۱۳۹۹/۱۰/۰۶
form فرانک دستان
در:
پاسخ به سوالات و حل مشکلات وبلاگ نویسان
سلام من خیلی دوست دارم روی وبلاگم کد اهنگ بزارم ولی هیچ کدوم نمی یاد بهم گفتن از این کدها دیگه پشتیبانی نمی شه شما...
۱۳۹۹/۱۰/۰۵
form مصطفی
در:
عملگرها (Operators) در PHP
سلام. عملگر @ چه زمانی قبل از یک متغییر میاد؟
۱۳۹۹/۱۰/۰۵
form سما
در:
پاسخ به سوالات و حل مشکلات وبلاگ نویسان
سلام من وقتی میزنم روی مشاهده وبلاگ صفحه فیلتر برام میاد و نمیتونم وبلاگمو ببینم
۱۳۹۹/۱۰/۰۵
form مجتبی
در:
پاسخ به سوالات و حل مشکلات وبلاگ نویسان
سلام من وبلاگ بلاگفا دارم کدها و جاوا استیکرها رو میزارم تو قسمتشون ولی همه ی کدها رو یکطرف وبلاگ نشون میده چطوری سمت...
۱۳۹۹/۱۰/۰۵
form matin asadi
در:
تعریف و استفاده از متغیر (Variable) در جاوا اسکریپت (JavaScript)
سلام ممنون بابت سایت خوبتو من یه مشکلی دارم می خواستم کدی برای این مثال زیر بنویسم ولی بلد نیستم ممنون میشم کمک کنید. ...
۱۳۹۹/۱۰/۰۲
form sahar1999
در:
ساخت دیتابیس، جدول و ستون با دستور CREATE در MySQL
سلام وقت بخیر چطور میتونم در برنامه نویسی سی شارپ هنگام ایجاد پایگاه داده ی MySql نام پایگاه داده رو از txetbox دریافت کنم؟
۱۳۹۹/۱۰/۰۱
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.
صفحه نخست | آموزش مقدماتی | آموزش کاربردی | مهارتهای وب | تماس با ما | درباره ما | حریم خصوصی | RSS Feed | HEX RGB
copyright محتوا در «وبگو» به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
© 2012 - 2021 Webgoo.ir - All Rights Reserved.