« طراحی سایت و گرافیک »
@Web_Designer98
3.07K subscribers
167 photos
585 videos
5 files
417 links
✅ مرجع تخصصی آموزش گرافیک و طراحی سایت

1⃣ آموزش سرور و هاستینگ
2⃣ آموزش طراحی سایت
3⃣ نکات طلایی وبمستری
4⃣ آموزش هک و کرک وردپرس و...

🔵 لیست دوره های به پایان رسیده کانال:
🔴 T.me/Web_Developer_98
加入频道
About
Blog
Apps
Platform
Join
« طراحی سایت و گرافیک »
3.07K subscribers
« طراحی سایت و گرافیک »
Media is too big
VIEW IN TELEGRAM
✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: هفدهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me
417 views
« طراحی سایت و گرافیک »
Media is too big
VIEW IN TELEGRAM
✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: هجدهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me
371 views
« طراحی سایت و گرافیک »
This media is not supported in your browser
VIEW IN TELEGRAM
310 views
« طراحی سایت و گرافیک »
✅ آموزش ساخت Toast Message با جاوااسکریپت:

<!-- https://yangx.top/Web_Designer98 -->
<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title> @Web_Designer98</title>
<style type="text/css">
body {
    font-family: Arial, sans-serif;
}

.toast {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
}

.toast.show {
    visibility: visible;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@keyframes fadein {
    from { bottom: 0; opacity: 0; }
    to { bottom: 30px; opacity: 1; }
}

@keyframes fadeout {
    from { bottom: 30px; opacity: 1; }
    to { bottom: 0; opacity: 0; }
}
</style>
<!-- https://yangx.top/Web_Designer98 -->
</head>
<body>
<!-- https://yangx.top/Web_Designer98 -->
    <button onclick="showToast()">نمایش پیام</button>
    <div id="toast" class="toast">پیام شما با موفقیت ارسال شد!</div>

<!-- https://yangx.top/Web_Designer98 -->

<!-- https://yangx.top/Web_Designer98 -->
<script type="text/Javascript">
function showToast() {
    const toast = document.getElementById("toast");
    toast.classList.add("show");

    setTimeout(() => {
        toast.classList.remove("show");
    }, 3000); 
}

</script>
<!-- https://yangx.top/Web_Designer98 -->
</body>
</html>

🌀 توضیحات:
➕ با کلیک بر روی دکمه "نمایش پیام"، تابع showToast فراخوانی می‌شود که پیام توست را نمایش می‌دهد، پیام به مدت 3 ثانیه در صفحه باقی می‌ماند و سپس محو می‌شود.
#css #html #js

🌈 Web_Designer98.t.me
👍2
367 views
« طراحی سایت و گرافیک »
This media is not supported in your browser
VIEW IN TELEGRAM
297 views
« طراحی سایت و گرافیک »
Media is too big
VIEW IN TELEGRAM
✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: نوزدهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me
426 views
« طراحی سایت و گرافیک »
Media is too big
VIEW IN TELEGRAM
✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: بیستم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me
483 views
« طراحی سایت و گرافیک »
Media is too big
VIEW IN TELEGRAM
✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: بیست و یکم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me
495 views
« طراحی سایت و گرافیک »
Media is too big
VIEW IN TELEGRAM
✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: بیست و دوم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me
436 views
« طراحی سایت و گرافیک »
Media is too big
VIEW IN TELEGRAM
✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: بیست و سوم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me
334 views
« طراحی سایت و گرافیک »
This media is not supported in your browser
VIEW IN TELEGRAM
273 views
« طراحی سایت و گرافیک »
✅ آموزش ساخت کپچا کد با PHP

🔸در مثال مثال از ایجاد کپچا با استفاده از PHP و GD Library ارائه می‌دهم.

1⃣ ایجاد تصویر کپچا با php

🔸ابتدا یک فایل به نام captcha.php ایجاد کنید:
<?php
session_start();

#https://yangx.top/Web_Designer98
function generateRandomString($length = 6) {
    return substr(str_shuffle(str_repeat("0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ", $length)), 0, $length);
}

#https://yangx.top/Web_Designer98
$captcha_code = generateRandomString();
$_SESSION['captcha'] = $captcha_code;

#https://yangx.top/Web_Designer98
header('Content-Type: image/png');
$width = 200;
$height = 70;
$image = imagecreatetruecolor($width, $height);

#https://yangx.top/Web_Designer98
$background_color = imagecolorallocate($image, 255, 255, 255);
$text_color = imagecolorallocate($image, 0, 0, 0);
$line_color = imagecolorallocate($image, 64, 64, 64);
$arc_color = imagecolorallocate($image, 255, 0, 0);

#https://yangx.top/Web_Designer98
imagefilledrectangle($image, 0, 0, $width, $height, $background_color);

#https://yangx.top/Web_Designer98
for ($i = 0; $i < 5; $i++) {
    imageline($image, rand(0, $width), rand(0, $height), rand(0, $width), rand(0, $height), $line_color);
}
#https://yangx.top/Web_Designer98
for ($i = 0; $i < 3; $i++) {
    imagearc($image, rand(0, $width), rand(0, $height), rand(50, 100), rand(20, 80), rand(0, 360), rand(0, 360), $arc_color);
}

#https://yangx.top/Web_Designer98
imagettftext($image, 30, 0, 40, 50, $text_color, 'Arial.ttf', $captcha_code); 

# https://yangx.top/Web_Designer98
imagepng($image);
imagedestroy($image);
?>

2⃣ یک فرم HTML ایجاد کنید. نام این فایل را form.php بگذارید:

<!DOCTYPE html>
<!-- https://yangx.top/Web_Designer98 -->
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web_Designer98</title>
</head>
<body>
<!-- https://yangx.top/Web_Designer98 -->
    <form action="process.php" method="post">
        <label for="captcha">کپچا: </label>
        <img src="captcha.php" alt="کپچا" /><br />
        <input type="text" name="captcha_input" required />
        <input type="submit" value="ارسال" />
    </form>
<!-- https://yangx.top/Web_Designer98 -->
</body>
</html>

3⃣ یک فایل دیگر به نام process.php ایجاد کنید
<?php
session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
#https://yangx.top/Web_Designer98
    $captcha_input = $_POST['captcha_input'];
    
    if ($_SESSION['captcha'] === $captcha_input) {
        echo "کپچا صحیح است!🤩";
    } else {
        echo "کپچا اشتباه است!😟";
    }
} else {
    echo "لطفا از طریق فرم ارسال کنید.";
}
# https://yangx.top/Web_Designer98
?>

💢 توضیحات:
1⃣ مطمئن شوید که GD Library روی سرور شما فعال است.

2⃣ برای فونت Arial.ttf، مطمئن شوید که فایل فونت در مسیر صحیح قرار دارد.

#css #html #js #php

🌈 Web_Designer98.t.me
👍2👏1
299 viewsedited  
« طراحی سایت و گرافیک »
Media is too big
VIEW IN TELEGRAM
✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: بیست و چهارم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me
👍2
282 views
« طراحی سایت و گرافیک »
Media is too big
VIEW IN TELEGRAM
✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: بیست و پنجم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me
280 views
« طراحی سایت و گرافیک »
Media is too big
VIEW IN TELEGRAM
✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: بیست و ششم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me
292 views
« طراحی سایت و گرافیک »
Media is too big
VIEW IN TELEGRAM
✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: بیست و هفتم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me
304 views
« طراحی سایت و گرافیک »
This media is not supported in your browser
VIEW IN TELEGRAM
291 views
« طراحی سایت و گرافیک »
This media is not supported in your browser
VIEW IN TELEGRAM
🔸پهپاد مچی #پهپاد #خبر #فناوری
🌈 Web_Designer98.t.me
322 views
« طراحی سایت و گرافیک »
Media is too big
VIEW IN TELEGRAM
✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: بیست و هشتم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me
339 views
« طراحی سایت و گرافیک »
Media is too big
VIEW IN TELEGRAM
✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: بیست و نهم
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me
361 views
« طراحی سایت و گرافیک »
Media is too big
VIEW IN TELEGRAM
✅ آموزش نرم افزار Adobe Dreamweaver
🎦 قسمت: 30 م
📹کیفیت: 720p
🗂 دسته بندی: #دریم_ویور

🌈 Web_Designer98.t.me
364 views