في هذا الدرس سوف نتعلم طرق تصميم نموذج الاتصال وهوا الذي يستخدم في ارسال رسائل النصية الي البريد الإلكتروني والذي سنبدا بالتصميم علي الفوتوشوب علي ملف PSD ومن ثم نعمل علي تكويده علي اكواد HTML / CSS وتحويلة علي صفحة ويب حقيقية في هذا التصميم يحتوي علي اربعة حقول الحقل الاول لكتابة اسم المرسل بالكامل اما الحقل التانئ لكتابة البريد الإلكتروني المرسل والحقل الثالث لكتابة عنوان الرسالة وحقل الرابع لكتابة الرسالة بشكل كامل .
PHOTOSHOP :
في بداية يتم انشاء ملف او مشروع جديد بطول 1200px وعرض 1200px يعطي مساحة كافية للعمل ويتم ملئ الخلفية بالكامل بلون #CCCCCC تم نعطي لها تشويش بقيمة 4% من قائمة مرشح –< تشويش --< اضافة تشويش .
علينا الان قيام شبكة علي هيئة نسيج نقوم بأنشاء ملف جديد بطول وعرض 10px ومحتوي الخلفية شفاف .
نقوم بتحديد 1px من الصف الاول الافقي وكذلك مع الصف التانئ العمودي وليكن بلون الاسود .
بعدما انتهينا من تحديد نقوم بحفظ العمل علي هيئة نموذج من قائمة تحديد تحديد نموذج .
تم نقوم بإنشاء مستطيل بعرض 570px بلون #f1f1f1 تم نعطي لها تأثير تغشية الحشو بنفس الحشو التي قمنا باعداده سابقا ًبصيغة دمج عادية وقيمة تظليل وقياس 100% .
تم نعمل علي اضافة تأثير توهج خارجي بصيغة دمج عادية وقيمة تظليل 30% بلون #666666 ونطاق توهج 50% ليعطي لتصميم لمسه من الواقعية .
نعمل علي كتابة اسماء الحقول بتم كتابة هذه النصوص بمحاذاة الي اليمين بحجم خط 30px ولون #333333 ونوع خط Adobe Arabic وهذا الخط مدعوم من قبل CSS3 .
تم نضف مستطيل بطول 50px وعرض 450px ونعمل له تأثير تدريج لواني خطي بحيث يكون من اعلي بلون #f1f1f1 ومن اسفل بلون #ffffff .
وكذلك نضف له حد او اطار خارجي بلون #999999 وقيمة حجم الاطار 2px وهكذا نكون قد اوشكنا علي انتهاء من التصميم علي الفوتوشوب سنعمل الان علي قص بعض الرسومات لوضعها علي هيئة ملف PNG علي HTML / CSS ومن تم يعمل CSS علي تكرارها ليعطي نفس التصميم علي الفوتوشوب ، عند القص هذه الرسومات نتأكد من تضمين جميع الاشياء من اجل الحفاظ علي نفس المظهر لتصميم ويتم تصديرها علي هيئة ملفات PNG 24 .
HTML :
ننشأ ملف HTML جديد ونكتب فيه العناصر الاساسية للصفحة ،في صفحة HTML تحتوي علي تلاته حقول input لكتابة البيانات النصية للمرسل كما يحتوي علي عناصر label لتسمية كل حقل من حقول Input ، اما حقل textarea لكتابة الرسالة بالكامل والموافقه عليها بزر a.ButtonSend .
CSS :
عندا كتابة اكواد CSS سيتم وضع التصميم حسب الخصائص التي وضعنها عند تصميم علي الفوتوشوب مثل حجم الخط و العرض 570px والارتفاع auto نوع الخط المستخدم وكذلك تدريج الخطي للألوان وظل الخارجي لنبدأ خطوة بخطوة بوضع التصميم علي CSS اولا سوف نضبط نوع الخط وحجم الخط وخلفية الصفحة علي معرف body ، اما معرف #container سوف نضع له ارتفاع وعرض وخلفية شبكة وظل بقيمة تمويه 40px .
body, a{
background:url(background.jpg);
font-size:30px;
direction:rtl !important;
font-family:"Adobe Arabic"; /* AR */
text-decoration:none;
}
#container{
background:url(repeat.jpg);
width:570px;
margin:100px auto 0px auto;
-webkit-box-shadow: 0px 0px 40px 0px #555; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
-moz-box-shadow: 0px 0px 40px 0px #555; /* FF3.5 - 3.6 */
box-shadow: 0px 0px 40px 0px #555; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}
نضع للمعرف #title الذي يحتوي علي نص ” ارسال رسالة ” محاذاة النص في منتصف وحجم خط 80px .
#title{
color:#666666;
font-size:80px;
text-align:center;
padding-top:15px;
}
#boxs{
margin-right:50px;
}
label{
display:block;
margin-top:10px;
color:#333333;
}
في معرف input نضع له ارتفاع 50px وعرض 450px وكذلك اطار خارجي بحجم 2px بلون #999999 وكذلك اطار نصف دائرة بقيمة 5PX اما عن اللون هوا عبارة عن تدريج خطي للالوان التي قمت بأعداده من موقع / gradients.glrzad.com ومن تم نسخه في ملف CSS لتسهيل عملية التكويد بحيت يكون نفس الالوان وتدريج التي قمنا بها علي الفوتوشوب .
input{
font-family:"Adobe Arabic"; /* AR */
font-size:24px; font-style:italic;
padding-right:10px;
height:50px; width:450px;
border:#999999 solid 1px;
-webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius: 5px; /* FF1-3.6 */
border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
/***********Linear Gradient by : gradients.glrzad.com ***************/
background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(241,241,241) 84%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(241,241,241) 84%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(241,241,241) 84%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(241,241,241) 84%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(241,241,241) 84%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.84, rgb(241,241,241)));
}
#messageInput{
height:100px;
font-style:italic;
color:#333333;
}
اما عن معرف #message فنعطي لها نفس خصائص معرف حقل input بحيث بنقوم بإضافة خاصية overflow:hidden; لإخفاء شريط التمرير والذي يظهر افتراضيا مع متصف انترنت اكسبلورير وكذلك يتم تغير في ارتفاع الحقل .
#message{
overflow:hidden;
width:450px; height:200px;
border:#999999 solid 1px;
-webkit-border-radius: 5px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius: 5px; /* FF1-3.6 */
border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
font-size:24px; font-style:italic; color:#333333;
overflow:hidden;
/****** Linear Gradient by : gradients.glrzad.com *******/
background-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(241,241,241) 84%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(241,241,241) 84%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(241,241,241) 84%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(241,241,241) 84%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(241,241,241) 84%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(255,255,255)),color-stop(0.84, rgb(241,241,241)));
}
وهكذا انتهينا من عملية تصميم وتكويد نموذج الاتصال بخطوات بسيطة جداً في تصميم هذا حبيت ان يكون التصميم مختصر جداً في صور المقطوع ولها سبب قمت بتدريج الالوان الحقول علي css3 علي موقع gradients.glrzad.com انشاء الله قد تكون تعلمتُ بعض الاشياء عن عمليات تصميم وتكويد صفحات الويب فأن اصبت فمن الله وان أخطأت فمن نفسى والشيطان .
]]>
