مرحله یک: (طراحی پایه)
خب، اول کاریم! باید یه ساختار پروژه ثابت برای خودمون درست کنیم.
دو فایل بالا فایل های اصلی ما هستن، اما ما یک فولدر با نام static درست میکنیم تا فایل های استاتیک رو اونجا قرار بدیم، درون اون هم 4تا فودر دیگه میسازیم به اسم های css,js,img,font که نشانگر هست اسمشون چی هستن.
اما مسلما" ما نمیتونیم بدون استفاده از یکسری کتابخونه و فریم ورک کار طراحی رو شروع کنید، پس فایل های زیر رو فراخوانی میکنیم، به روایت آمیانه:
خب، حالا ما محتویات فایل jQuery Reveal رو به همون فولدرهایی که ساختیم میبریم (فایل های css در فولدر css و js ها در فولدر js ها و imgها در فولدر img ها)(باید هر فایلی رو طبق اصلیتش به این فولدرها انتقال بدید). به روایت کد (در index.php):
کد HTML:
<script src="static/js/jquery.js" type="text/javascript"></script> <script src="static/js/app.js" type="text/javascript"></script> <script src="static/js/jquery.reveal.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="static/css/reveal.css"> <link rel="stylesheet" type="text/css" href="static/css/style.css">
حالا باید فایل style.css رو بنویسیم، این کد هست:
کد HTML:
@font-face{ font-family: Dnb; src: url(../font/droidnaskh-bold.ttf), url(../font/droidnaskh-bold.eot); } body { margin: 0 auto; font-family: tahoma; font-size: 12px; direction: rtl; } .box { width: 400px; height: 16px; border: 2px solid #a1a1a1; border-radius: 10px; margin: 8% auto; padding: 12px; text-align: center; } a { text-decoration: none; color: #4C4C4C; } footer { text-align: center; } h4 { margin: 0 auto; font-family: Dnb; font-size: 70px; direction: rtl; text-align: center; color: #2F2F2F; text-shadow: 1px 1px 2px #1A1A1A; } input { border: 1px solid #ccc; border-radius:4px; padding: 3px; font: normal 12px Tahoma; background:#F8F8F8; transition:all .5s; -moz-transition:all .5s; -webkit-transition:all .5s; -o-transition:all .5s; } textarea { border:1px solid #ccc; border-radius:4px; padding:3px; font:normal 12px Tahoma; background:#F8F8F8; transition:all .5s; -moz-transition:all .5s; -webkit-transition:all .5s; -o-transition:all .5s; }
اما بخاطر اینکه ما بتونیم قدر واقعی فرم رو نشون بدیم باید روی یچیزی بالاخره کلیک کنیم، پس یک کد هم به صفحه اصلی اضاف میکنیم:
کد HTML:
<!DOCTYPE html> <html> <head> <title>فرم تماس با ما</title> <script src="static/js/app.js" type="text/javascript"></script> <script src="static/js/jquery.js" type="text/javascript"></script> <script src="static/js/jquery.reveal.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="static/css/reveal.css"> <link rel="stylesheet" type="text/css" href="static/css/style.css"> </head> <body> <br> <div class="box"> <b><a href="#" class="big-link" data-reveal-id="myModal">اینجا کلیک کنید</a><br></b> </div> <div id="myModal" class="reveal-modal"> <center> <h4>تماس با ما</h4> <br><br> <form action="#"> <input type="text" name="yname" size="40" placeholder="نام شما"><br><br> <input type="text" name="ymail" size="40" placeholder="ایمیل شما"><br><br> <input type="text" name="ysubject" size="40" placeholder="موضوع"><br><br> <textarea name="ymsg" cols="40" rows="12" placeholder="پیغام شما"></textarea><br><br> <input type="button" value="ارسال" onclick="formget(this.form, 'sent.php?');"> </form> <br> <div id="show"></div> <a class="close-reveal-modal">×</a> </center> </div> <footer>طراحی و برنامه نویسی: <a href="http://ireza.blog.ir">رضا فرهادیان</a></footer> </body> </html>
در کلاس big-link، ما خاصیت هایی رو به تگ اضاف کردیم که طبق کتابخونه ها، بعد کلیک روی اون یکسری محتویات در قالب یک پنجره PopUp باز میشه. محتویات اون پنجره درون کلاس MyModal هست..
دانلود فونت ها
در جلسه بعد سراغ برنامه نویسی میریم...... (همچنین فایل app.js رو خودمون باید بنویسیم)
نوشته شده توسط رضا فرهادیان
آموزش ساخت یک فرم تماس با ما (Ajax,jQuery)
پاسخ با نقل قول