پایگاه خبری تحلیلی فرزانگان امیدوار

علیرضااحسانی نیا

صفحه نخست عناوین مطالب وبلاگ تماس تلفن و تلگرامی با علیرضااحسانی نیا

درباره وبلاگ

در اینجا می توانید خبرهای داغ سیاسی فراجناحی را بخوانید...علیرضااحسانی نیا

آخرین مطالب

صفحات وبلاگ

نویسندگان

محمد رضائی (99)
مهلا حسینی (1)

آموزش طراحی قالب از صفر

سه شنبه 91 شهریور 14 :: 2:21 صبح :: نویسنده : علی رضا احسانی نیا

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

:: خوب بهتره زودتر شروع کنیم . در یک پاراگراف مسیر کلی حرکت شما به سمت یادگیری طراحی وب رو مطرح میکنم . برای این منظور اول از همه باید زبان html رو فرار بگیرید ، html برای طراحی شالوده و ساختار اصلی صفحه ی وب استفاده میشه . بعد از اون باید زبان CSS رو یاد بگیرید تا بتونید جزئیات شیوه ی نمایش صفحات وبتون رو تعیین کنید . پس از اون در صورت تمایل بد نیست که به سراغ جاوااسکریپت برید تا بتونید به صفحات وبتون پویایی و امکانات ویژه تری اضافه کنید . بعد از اون هم اگه قصد دارید حرفه ای تر کار کنید باید به سراغ یک زبان برنامه نویسی سمت سرور (server-side) مثل php یا asp.net برید تا بتونید اسکریپت ها و برنامه های اختصاصی تحت وب برای خودتون بنویسید . بعد از یادگیری این موارد هم باید بشینید و حسابی به صورت عملی و تجربی کار کنید تا دستتون راه بیافته و تجربتون افزایش پیدا کنه .

:: برای طراح وب شدن به ترتیب باید گام های زیر رو پیش برید :

:: گام اول : یادگیری زبان HTML

برای شروع کار و آغاز طراح وب شدن ، لازم و ضروریه که اول از همه زبان html رو یاد بگیرید . زبان html برای ایجاد بدنه و ساختار اصلی صفحات وب به کار میره . شما از هر زبان برنامه نویسی (مثل php) که استفاده کنید نهایتا باید خروجی رو به صورت کدهای html بسازید .

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

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

:: گام دوم : آموختن و فراگیری زبان CSS

با html ساختار و پیکربندی کلی یک صفحه وب رو میسازیم . ولی برای اینکه ظاهر صفحه وب رو آراسته کنید باید از CSS استفاده کنید . با CSS میتونید برای هر کدوم از تگ های html خصوصیاتی چون رنگ ، فونت ، سایز ، پس زمینه و … رو تعیین کنید . CSS رو به این منظور ایجاد کردند که ساخت پیکربندی صفحه وب رو از شیوه ی نمایش اون جدا کنند (seperation of concepts).

:: مطالب آموزشی سایت رو در زمینه ی CSS می تونید از این قسمت مطالعه کنید .
:: برای شروع یادگیری CSS هم برای شروع به بخش آموزش CSS سایت w3schools مراجعه کنید .

:: گام سوم : یادگیری زبان جاوااسکریپت
وقتی که html و CSS رو خوب یاد گرفتید ، می تونید صفحات وب استاتیک رو طراحی کنید . مثلا میتونید قالب های وبلاگ سرویس های مختلفی مثل بلاگفا ، میهن بلاگ ، پرشین بلاگ و بلاگ اسکای رو طراحی و ویرایش کنید . اما اگر میخواید حرفه ای تر کار کنید باید بعد از html و CSS سراغ javascript برید . با جاوا اسکریپت میتونید پویایی و طراوت خاصی به صفحات وبتون بدید . می تونید اسکریپت های بدرد بخور و لازم برای خودتون بنویسید و صفحات وبتون رو جذاب تر کنید . جاوااسکریپت برخلاف html و CSS یک زبان برنامه نویسی هست ، در صورتی که html و CSS زبان های نمادگذاری هستند . برای همین برای به منظور یادگیری javascript باید وقت بیشتری بزارید تا با مفاهیم برنامه نویسی هم در کنار یادگیری این زبون آشنا بشید . تازه لذت کار با جاوااسکریپت رو زمانی که از library هایی مثل jQuery استفاده می کنید خیلی ملموستر و بیشتر لمس خواهید کرد .
:: آموزش های مربوطه به زبان جاوااسکریپت رو هم می تونید از این لینک دنبال کنید .
:: سایت w3schools قسمتی هم برای آموزش جاوا اسکریپت داره که بد نیست دنبالش کنید . برای آشنایی اولیه مختصر و مفیده .

:: گام چهارم : یادگیری زبان برنامه نویسی اسکریپتی مثل PHP
گام بعدی اینه که شما به سراغ یک زبان برنامه نویسی سمت سرور مثل php یا asp.net برید . با استفاده از این زبون ها شما میتونید برنامه های تحت وب بزرگ و دلخواه خودتون رو بنویسید . یادگیری این زبان ها وقت ، تلاش و کار عملی زیادی رو می طلبه و فقط هم زمانی توصیه میشه که واقعا علاقمند باشید و برنامه ای برای توسعه و نوشتن نرم افزارهای تحت وب داشته باشید . و در صورتی که می خواید در حد ویرایش و طراحی قالب وبلاگ ها و صفحات ایستای وب کار کنید ، ۳ گام اول براتون کافیه .
:: بعد از یادگیری این نوع زبان ها هم باید با مفاهیم پایگاه داده (Database) آشنا بشید تا بتونید محتوای ورودی و خروجی برنامه های نوشته شده رو ذخیره و استفاده کنید .
:: در آینده ی نزدیک سعی داریم در مورد این زبان ها هم در سایت مطلب بزاریم . ولی برای شروع باز می تونید به بخش های آموزش php ، آموزش asp.net و آموزش SQL (زبان کار با پایگاه های داده) در سایت w3schools مراجعه کنید .
ناگفته نماند که من اینجا این دو زبان رو پیشنهاد دادم ، در صورتی که زبان های دیگری هم مثل perl ، ruby ، پایتون و .. هم برای نوشتن برنامه های تحت وب موجوده که البته کاربرد و استفاده ی کمتری دارند .

:: ابزار مورد نیاز
برای نوشتن کدها بهتره از ادیتور هایی که قابلیت های پیشزفته ای مثل پیشبینی کد ، کامل کردن خودکار کد (auto completion) ، رنگ گذاری کلمات کلیدی ، تشخیص خطاها ، فرمت بندی کدها و … رو دارند استفاده کنید تا سریعتر کد بزنید ، درصد خطاتون پایین بیاد و کارتون راحتتر و استانداردتر باشه .
:: پیشنهاد من استفاده از برنامه ی phpStorm هست که برای همه ی زبان های فوق امکانات فوق العاده ای داره . سعی می کنم در مطلب بعدی این برنامه رو برای دانلود بزارم . همچنین توصیه می کنم که نرم افزار notepad++ رو هم حتما نصب کنید . به خاطر سبک بودن و اکانات نسبتن خوبش میگم . همچنین برنامه های خیلی زیاد دیگه ای در این زمینه وجود داره که می تونید از اونها اسفاده کنید. من اسم بعضی از معروف ترین هاشو در زیر میارم که میتونید سرچ و دانلود کنید یا از فروشگاه های سی دی تهیه کنید :

PhpStorm
Notepad++
Adobe Dreamweaver
Komodo Edit
Aptana Studio
NetBeans
Bluefish
CoffeeCup Free HTML Editor
HTML-Kit

:: این مطلب رو برای دوستانی که علاقمند به شروع کار در زمینه ی طراحی وب هستند نوشتم. امیدوارم که حداقل تا حدودی مسیر حرکت رو مشخص کرده باشم . این دیگه بستگی به خودتون داره که چقدر وقت بذارید تا موفقیت بیشتری کسب کنید .

1-جلسه اول ساختار قالب

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

امروز می خوام مبانی و اینکه چه چیزایی نیازه تا بشه یه قالب رو طراحی کرد ، براتون توضیح بدم

برای طراحی و ساخت قالب مهارت در زبان های HTML و CSS خیلی مهمه اما اگر حتی کوچکترین چیزی راجع به این زبان ها نمی دونید نگران نباشید فقط با ما همراه شید

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

template style آموزش طراحی قالب از صفر جلسه اول ساختار قالب

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

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

:: ساخت دو تا پیش نیاز داره : ۱- برنامه نویسی قالب ۲- طراحی عناصر قالب

که هرکدوم از این ها در هر ۵ بخش بالا مورد نیازه انشالله از جلسه بعد شروع می کنیم به ساخت قالب …

2-جلسه دوم تگ های html 1

خوب چون قول داده بودم که آموزش رو از صفر شروع کنم ممکنه یه سری حوصلشون سر بره اشکالی نداره من سریع سعی می کنم بنویسم تا اونایی که یه چیزایی بلدن هم استفاده کنن درضمن توصیه می کنم همه کامل بخونن ممکنه یه سری نکات ریز رو ندونن بعد بعدا که ازش استفاده می کنم نفهمن چی می گم.
خوب قبل از شروع برنامه نویسی باید بفهمیم تگ چیه؟
هر زبانی قواعد خودش رو برای حرف زدن داره به زبان عامیانه اگر بخوام بگم اون کلماتی که تو زبان برنامه نویسی استفاده میشه رو تگ می گن بهش
خوب حالا می خوایم با زبان HTML وبرخی از تگ های اون و کاربرد هاش آشنا بشیم
قبل از اون بگم که به نظر من خوبه که از نرم افزار notepad++ برای برنامه نویسی تحت وب استفاده کنین چون هم عالیه هم کم حجم

دانلود notepad++

*نکته : برای اینکه به برنامه بفهمونیم حرفمون کی تموم میشه باید تا یه جایی حرفمون رو بزنیم بعد بهش بگیم خوب الآن حرفم تموم شد!واسه همین تقریبا همه ی دستورها یه تگ آغازین دارن و یه تگ پایانی!اگر گیج شدین اشکالی نداره بیاین جلو متوجه می شین
زبان HTML با تگ شروع میشه و با تگ تموم میشه کلا کافیه قبل از حرف اول هر تگ / اضافه کنیم تا اون تگ به یه تگ پایانی تبدیل بشه.سعی کنید هرچیزی که میگم رو از همین الآن توی نرم افزار کدزنیتون حالا چه اینی که من گفتمه یا چه نوت پد خود ویندوزه یا هرچیزه دیگه ای بزنید و تست کنید یعنی تا اینجای کار برناممون شده:

1<html>
2 
3</html>

خوب حالا برنامتون رو سیو کنید با اسم index.html همونطور که میبینید یه فایل با همین اسم ساخته می شه که اگه روش کلیک کنید تو مرورگرتون باز میشه حالا توی صفحتون چی میبینید؟هیچی!چرا؟چون ما صرفا به مرورگر فهموندیم می خوایم به زبان HTML باهاش حرف بزنیم اما هنوز حرفی نزدیم که نشونمون بده!یک برنامه به زبان HTML از دو بخش تشکیل شده بخش HEAD و بخش BODY

-بخش HEAD جایگاه اسم صفحه ، کلیدواژه ها و امثال اینهاست

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

خوب بخش HEAD و BODY هم مثل تگ اولمون با اسم خودشون شروع می شن و با تگ پایانیشون تموم میشن!

*نکته : تگ HEAD قبل از تگ BODY قرار می گیره حالا اگه برناممون رو ادامه بدیم اینطوری میشه

1<html>
2<head>
3</head>
4<body>
5</body>
6</html>

خوب اگه ببینید اسم صفحمون الآن آدرس فایلمونه فرض کنید الآن می خوایم اسم صفحمون رو به “اولین برنامه ی من” تغییر بدیم،همونطور که گفتم نام صفحه از مواردیه که توی بخش HEAD قرار می گیره برای اینکا از تگ TITLE استفاده می کنیم یعنی الآن کدمون میشه:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body>
6</body>
7</html>

حالا اگه سیو کنید و صفحتون رو باز کنید میبینید که احتمالا اسم صفحه عوض شده ولی یکسری حروف مثل حروف چینی داره نمایش داده میشه این ایراد از انکودینگ هست برای رفع اون اگر از نوت پد دیفالت استفاده می کنید هنگام سیو زیر جایی که اسم فایل رو می نویسید انکودین رو به UTF8 تغییر بدید و اگر از نوت پد ++ استفاده می کنید از تب های بالا روی تب پنجم انکودینگ Encoding کلیک کنید و UTF8 روانتخاب کنید.

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

بعضی از تگ هارو میشه یکسری توضیحات هم جلوشون دربارشون داد یکی از این تگ ها تگ BODY هست و یکی از توضیحات این تگ بکگراند یا عکس پشت زمینه صفحه هست فرض کنید می خوایم بکگراند صفحمون همین بکگراند ۷LEARN باشه حالا کدمون میشه:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body background="http://www.7learn.com/wp-content/themes/L7theme/images/bgm.png">
6</body>
7</html>

حالا اگه صفحتون رو ببینیدبکگراند صفحتون همین شده فقط با یه مشکل اینکه بکگراند در کل صفحه تکرار شده که برای بعضی از بکگراندها لازمه اما برای بکگراند ما نه اینجا به یکی دیگه از توضیحات تگ BODY می رسیم و اون استایل هست استایل نحوه قرارگیری اشیاء رو اصولا بیان می کنه که کار زبان CSS هست که در آینده راجع بهش توضیح خواهیم داد.این توضیحات استایل برای بکگراند سه حالت داره:

1style="background-repeat:repeat-x"
2style="background-repeat:repeat-y"
3style="background-repeat:no-repeat"

*نکته : اگر هیچ کدوم رو انتخاب نکنید و درکل استایلی تعریف نکنید بصورت عادی هم در طول و هم در عرض عکستون تکرار میشه

یعنی کدی که می می خوایم الآن میشه این که فقط در محور x ها تکرار بشه:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body background="http://www.7learn.com/wp-content/themes/L7theme/images/bgm.png" style="background-repeat:repeat-x">
6</body>
7</html>

حالا اگه نگاه کنید پس زمینه مون درست شده و فقط یه مشکلی مونده اونم رنگ صفحه هست که سفیده اینجا باید از توضیحات سوم تگ BODY استفاده کنیم که BGCOLOR هست و رنگ صفحه رو مشخص می کنه شما می تونید دو جور رنگ بدید یا مثلا بنویسید bgcolor=”blue” مثلا یا مث کد زیر که کد نهاییمون هست کد هگز رنگ رو بدید
کد نهایی این جلسه:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#dddddd" background="http://www.7learn.com/wp-content/themes/L7theme/images/bgm.png" style="background-repeat:repeat-x">
6</body>
7
</html>

3-جلسه سوم تگ های html 2

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

خوب برگردیم سر درسمون!:کدی که تا انتهای جلسه پیش دیدید رو با تغییر عکس بکگراند اینجا می بینید:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#000000" background="http://www.7learn.com/a/msm/webdesign/bg.jpg">
6</body>
7</html>

که در اون نحوه ی انتقال بکگراند رنگ صفحه عکس بکگراند و اسم صفحه و انکودینگ صفحه رو مشخص کردیم.این جلسه می خوایم با یکسری دیگه از کدهای HTML آشنا بشیم.خوب بیاید اول یه عکس توی صفحمون بذاریم همونطور که گفتم و واضحه دیگه این کدها قراره قالب رو شکل بدن و توی BODY قرار می گیرند تگی که برای قرار دادن عکس استفاده میشه تگ <img> هست که تگ پایانی هم نداره یعنی بصورت منفرد استفاده می شه و نبایدآخرش از تگ مثلا </img> استفاده کنید!خوب حالا به بررسی توضیحات این تگ می پردازیم.

۱-مهمترین توضیح یا مشخصه ی این تگ آدرس اون هست!یعنی اینکه بگیم عکس دلخواهمون تو چه آدرسی قرار داره این مشخصه رو src می نامیم که حالا در کدی که پایین میذارم می بینید نحوه ی کارکردش رو می بینیم باهم.

۲-مشخصه ی بعدی توضیحات عکس هست می تونید یه توضیحاتی راجع به تگتون تو این بنویسید تا وقتی بازدیدکننده نشانگر ماوسش رو روی عکس نگه داشت اون توضیحات نمایش داده بشه!این مشخصه هم title نام داره.

۳-مشخصه ی آخری که به نظرم دونستنش خوبه حاشیه یا border هست که می تونید با اون دور عکستون یه حاشیه بندازین و قالبتون رو زیبا کنید اگر دوست داشته باشید.خوب حالا کدمون میشه مثلا:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#000000" background="http://www.7learn.com/a/msm/webdesign/bg.jpg">
6<img src="http://www.7learn.com/wp-content/uploads/tt2.png" title="7Learn" border="15">
7</body>
8</html>

*نکته : اگر کلا توضیحات border رو ننویسید تو تگتون بصورت پیشفرض border = 0 در نظر گرفته میشه.

میبینید که عکستون با یه حاشیه ای اومده و اگه نشانگر ماوستون رو روش نگه دارید عبارت توی title تون که اینجا ۷Learn هست نشون داده میشه.خوب حالا بیاید یه بار دیگه همین عکس رو بدون حاشیه و title توی خط بعد بذاریم یعنی:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#000000" background="http://www.7learn.com/a/msm/webdesign/bg.jpg">
6<img src="http://www.7learn.com/wp-content/uploads/tt2.png" title="7Learn" border="15">
7<img src="http://www.7learn.com/wp-content/uploads/tt2.png">
8</body>
9</html>

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

برای رفتن به خط بعد از تگ br استفاده می کنیم این تگ هم نیازی به تگ پایانی نداره و هرجا بزنید چه عکس چه متن چه هرچیزی تو کد HTML تون رو به خط بعد می بره حالا فرض کنید می خوایم عکس دوممون رو سه خط پایینتر ببریم کدمون میشه:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#000000" background="http://www.7learn.com/a/msm/webdesign/bg.jpg">
6<img src="http://www.7learn.com/wp-content/uploads/tt2.png" title="7Learn" border="15">
7<br><br><br>
8<img src="http://www.7learn.com/wp-content/uploads/tt2.png">
9</body>
10</html>

خوب حالا بیاید یکم با متن ها کار کنیم!برای نوشتن متن هیچ کدی لازم نیست کافیه متنتون رو هرجایی که می خواین بنویسید مثلا اگر می خواید خط بعد عکستون متن باشه کافیه یه br بعد عکستون بزنید و متنتون رو بنویسید مثلا اینطوری:

1&lt;html&gt;
2&lt;head&gt;
3&lt;title&gt;اولین برنامه ی من&lt;/title&gt;
4&lt;/head&gt;
5&lt;body  bgcolor=&quot;#000000&quot;  background=&quot;http://www.7learn.com/a/msm/webdesign/bg.jpg&quot;&gt;
6&lt;img   src=&quot;http://www.7learn.com/wp-content/uploads/tt2.png&quot;  title=&quot;7Learn&quot; border=&quot;15&quot;&gt;
7&lt;br&gt;
8<a href='http://www.7learn.com' style="color:#333">آموزش</a> <a href='http://www.7learn.com' style="color:#333">طراحی وب</a>
9&lt;/body&gt;
10&lt;/html&gt;

*نکته : رنگ فونت بصورت پیشفرض مشکی هست!

خوب به همین دلیل تو این بکگراند مشکی خوب نوشتمون معلوم نمیشه حالا نظرتون چیه که واسه دیده شدنش رنگش رو زرد کنیم و سایزش رو بزرگتر؟برای اینکار باید با تگ font آشنا بشیم تگ فونت برای تعیین رنگ سایز و نوع(اسم)فونت به کار میره و به تگ پایانی هم نیاز داره حالا بیاید با توضیحات این تگ آشنا شیم:

۱-رنگ فونت : برای تعیین رنگ فونت از مشخصه ی color استفاده می کنیم برای تعیین رنگ می تونیم از هردو روشی که در رنگ صفحه استفاده کردیم استفاده کنیم یعنی هم کد رنگ و هم اسم رنگ

۲-سایز فونت:برای تعیین سایز یا اندازه ی فونت هم از مشخصه ی size استفاده می کنیم برای تعیین اندازه متن ۳ روش یعنی سه رده بندی سایزی وجود داره یکی اینهکه سایز رو مساوی عددی مثل ۵ می ذارید و تمام!اما دو روش دیگه هم وجود دارند یکی -۵ و یکی +۵ هستند!یعنی چی؟سایز +۵ بزرگتر از ۵ عادی هست و سایز -۵ کوچکتر از ۵ عادی خیلی ساده است!

۳-اسم فونت : برای تغییر فونت هم از مشخصه ی face استفاده می شه و می تونید توش راحت اسم فونتتون رو بنویسید.

*نکته : فونت پیشفرض Arial هست.

*نکته : دقت کنید که باید از فونت هایی که توی وب وجود دارن و پیشفرض ویندوز هستن استفاده کنیدچون مثلا اگه از فونی مثل Roya استفاده کنید ممکنه فردی اون فونت رو نداشته باشه بعد نتونه مطالبتون رو خوب ببینه من فونت Tahoma رو برای هر زبانی توصیه می کنم خوبه.

خوب حالا کدمون میشه:

1&lt;html&gt;
2&lt;head&gt;
3&lt;title&gt;اولین برنامه ی من&lt;/title&gt;
4&lt;/head&gt;
5&lt;body  bgcolor=&quot;#000000&quot;  background=&quot;http://www.7learn.com/a/msm/webdesign/bg.jpg&quot;&gt;
6&lt;img   src=&quot;http://www.7learn.com/wp-content/uploads/tt2.png&quot;  title=&quot;7Learn&quot; border=&quot;15&quot;&gt;
7&lt;br&gt;
8&lt;font size=&quot;+1&quot; face=&quot;tahoma&quot; color=&quot;yellow&quot;&gt;<a href='http://www.7learn.com' style="color:#333">آموزش</a> <a href='http://www.7learn.com' style="color:#333">طراحی وب</a>&lt;/font&gt;
9&lt;/body&gt;
10&lt;/html&gt;

یکی دیگه از روش های سایز بندی متن ها تگ های h هستند این تگ ها نیازمند تگ پایانی هستند و به اینصورت هستند که h1 بزرگترین و h6 کوچکترین تگ هست حالا این چجوری استفاده میشه؟ببینید:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#000000" background="http://www.7learn.com/a/msm/webdesign/bg.jpg">
6<img src="http://www.7learn.com/wp-content/uploads/tt2.png" title="7Learn" border="15">
7<br>
8<font size="+1" face="tahoma" color="yellow">
9<h1>sina</h1><h2>sina</h2><h3>sina</h3><h4>sina</h4><h5>sina</h5><h6>sina</h6>
10</font>
11</body>
12</html>

خوب حالا شاید این سوال واستون پیش بیاد که فرق این با مشخصه سایز تگ فونت چیه؟!دو تا فرق با هم دارند ه مهم هم هست:

۱-اولا که تگ های h برای بزرگ کردن متن به کار نمی رن اکثرا برای بزرگ کردن تیتر های متن ها استفاده می شن به همین دلیل بعد از خودشون یه فاصله می اندازند انگار که خودشون یه br هم تو خودشون دارن!

۲-موتور های جستجوگر تگ های h رو بهتر پیدا می کنند واسه همین بیشتر تو عنوان ها و تیتر ها به کار میره

یکی از خوبی های HTML این هست که برای کار راحت با متون و جمع و جور بودنشون می تونید اونارو پاراگراف بندی می کنه و هروقت یه پاراگراف جدید ایجاد کنید خود به خود یکم فاصه دو خط بیشتر میشه و میره به پاراگراف بعدی پاراگراف با تگ p نشون داده میشه و نیازمند تگ پایانی نیز هست:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#000000" background="http://www.7learn.com/a/msm/webdesign/bg.jpg">
6<img src="http://www.7learn.com/wp-content/uploads/tt2.png" title="7Learn" border="15">
7<br>
8<font size="+1" face="tahoma" color="yellow">
9<p>
10    HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).
11    یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
12    بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
13    یک فایل HTML باید دارای پسوند html. یا html. باشد
14    یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود
15</p>
16<p>
17    HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).
18    یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
19    بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
20    یک فایل HTML باید دارای پسوند html. یا html. باشد
21    یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود
22</p>
23</font>
24</body>
25</html>

خوب اگر دقت کنید کلا عکس ها و متن ها چپ چین هستند و زبان پارسی راست چین!برای راست چین کردن قالب از مشخصه ی dir استفاده می کنیم حالا جای این تو کدوم تگه؟فرقی نمی کنه شما می تونید هم تو نگ BODY استفاده کنید که کل قالب اینطوری شه یا توی تگ P یا مثل اینها دو حالت داره این مشخصه یا rtl یا ltr که اولی راست به چپ و دومی چپ به راست هست که بصورت پیشفرض قرار داره، البته زیاد کار تمیزی نیست اینکار و بعدا فارسی سازی رو با CSS ایشالله کار می کنیم روش حالا کدمون راست چین شده و میشه:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#000000" background="http://www.7learn.com/a/msm/webdesign/bg.jpg" dir="rtl">
6<img src="http://www.7learn.com/wp-content/uploads/tt2.png" title="7Learn" border="15">
7<br>
8<font size="+1" face="tahoma" color="yellow">
9<p>
10    HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).
11    یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
12    بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
13    یک فایل HTML باید دارای پسوند html. یا html. باشد
14    یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود
15</p>
16<p>
17    HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).
18    یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
19    بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
20    یک فایل HTML باید دارای پسوند html. یا html. باشد
21    یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود
22</p>
23</font>
24</body>
25</html>

خوب دو تا تگ دیگرو معرفی کنیم و این جلسه رو تموم کنیم اولیش تگ center هست برای اینه که یه عکس یا متن رو به وسط صفحه بیارید و نیازمند تگ پایانی نیز هست مثلا فرض کنید عکسمون و نوشتمون رو می خوایم بیاریم وسط صفحه :

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#000000" background="http://www.7learn.com/a/msm/webdesign/bg.jpg" dir="rtl">
6<center>
7<img src="http://www.7learn.com/wp-content/uploads/tt2.png" title="7Learn" border="15">
8<br>
9<font size="+1" face="tahoma" color="yellow">
107Learn
11</font>
12</center>
13</body>
14</html>

تگ بعدی که واسه زیباسازی به کار میره تگ marquee هست و یه متن یا عکس متحرک رو به وجد ویاره و نیازمند تگ پایانی هست اول بیاید با مشخصه های این تگ آشنا شیم:

۱-سرعت حرکت متن: با مشخصه scrollamount می تونید سرعت حرکتش رو تعیین کنید

۲-جهت حرکت : با مشخصه direction می تونید این کارو کنید که چهار حالت داره right – left -up-down

3-سایز که معلوم می کنه تو چه بازه ای کار کنه با مشخصه width می تونید سایز در عرض و height ارتفاعش رو تعیین کنید برای تعیین این دو مشخصه دو راه هست یا اینکه بنویسید = ۵۰۰ مثلا که منظور ۵۰۰ پیکسل هست یا بگید مثلا = ۵۰% که یعنی بازه ی کاریش ۵۰ درصد صفحه باشه به این کد توجه کنید متوجه میشید:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#000000" background="http://www.7learn.com/a/msm/webdesign/bg.jpg" dir="rtl">
6<center>
7<img src="http://www.7learn.com/wp-content/uploads/tt2.png" title="7Learn" border="15">
8<br>
9<font size="+1" face="tahoma" color="yellow">
107Learn<br>
11<marquee direction="right" scrollamount="10" width="50%" direction="left">محمدسینا معراجیان</marquee>
12</font>
13</center>
14</body>
15</html>

ممنون از توجهتون…

4-جلسه چهارم تگ های html 3

گفته بودم امروز اگه ممکن باشه میریم آموزش فتوشاپ مرحله اولش رو بگیم که دیدم میشه امروز HTML رو تموم کرد گفتم بذارید اول تموم شه بعد بریم مباحث بعدی امروز با حدود ۱۰ تگ آشنا خواهیم شد.

از تگ فرم form شروع می کنم،همونطور که از اسمش پیداست این تگ برای ساختن فرم ها و عناصرش مثل دکمه ها تکست باکس ها منوی ها و اینها استفاده می شه تگ فرم نیازمند تگ پایانی نیز هست،تگ فرم دارای مشخصه های مهمی هست که درحال حاضر نیازی به توضیحشان نیست پس می نویسیم:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#000000" background="http://www.7learn.com/a/msm/webdesign/bg.jpg" dir="rtl">
6<center>
7<form>
8</form>
9</center>
10</body>
11</html>

خوب همونطور که میبینید اتفاق خاصی توی صفحه نمی افته!چرا؟خوب واسه اینکه هنوز به فرم نگفتیم می خوایم چه چیزایی داشته باشیم!خود فورم از چند تگ داخلی تشکیل می شه که مهمترین اونها تگ input هست

*نکته : تگ input بیرون تگ فرم کاری را انجام نمی دهد

خوب تگ input چند مشخصه داره که مهمترینشون نوعش یا type هست(حول نشید با مثال متوجه میشید) برخی از این ها عبارتند از : text – password – button – submit – reset – checkbox – radio

یه توضیح کوتاه : مشخصه text یه تکست باکس درست می کنه مشخصه password هم یه تکست باکس درست می کنه با این فرق که هرچیزی توش بنویسین با * نشون داده میشه! تگ submit برای ایجاد یک دکمه فرستنده اطلاعات استفاده میشه تگ button برای ایجاد دکمه ای بدون ارسال اطلاعات به مکانی خارجی و تگ reset هم دکمه ای برای پاک کردن اطلاعات فرم ایجاد می کنه یه مثال:

*نکته : تگ input نیازمند تگ پایانی نیست:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#000000" background="http://www.7learn.com/a/msm/webdesign/bg.jpg" dir="rtl">
6<center>
7<form>
8<input type="text" value="مقدار اولیه">
9<input type="reset" value="پاک کن">
10<input type="button" value="دکمه">
11<input type="checkbox">چک باکس
12<input type="radio">رادیو
13</form>
14</center>
15</body>
16</html>

خوب حالا اگر نتیجه کد رو ببینیم یک تکست باکس و دوتا دکمه ایجاد شده اند که روی یکی از دکمه ها واژه ی Reset نوشته شده و دیگری خالی هست همچنین تکست باکس نیز خالی از متن هست و یک چک باکس و یک دکمه ی رادیو نیز همینطور حالا یک چیزی توی تکست باکس بنویسید و روی دکمه ی Reset کلیک کنید!دیدید؟اطلاعات فرم پاک شد!حالا شاید واستون این سوال پیش بیاد که چطوری روی اون دکمه ی خالی یه چیزی بنویسیم یا چطوری یه مقدار اولیه ای برای تکست باکس تعیین کنیم؟اینجا می رسیم به مشخصه ی دوم تگ input به نام value یا مقدار اگر value رو برای دکمه تعریف کنید روی دکمه اون نوشته میشه و اگه روی تکست باکس بنویسید مقدار اولیه اش اون میشه برای مثال :

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

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

*نکته : حالا اگه روی دکمه Reset یا پاک کن در کد جدید کلیک کنید میبینید که اتفاقی نمی افته!چرا؟چون دکمه Reset همه چیز رو به حالت اولیه بر می گردونه و اگر مقدار اولیه در تکست باکستون رو تغییر نداده باشین خوب همون میمونه!

*نکته : دکمه های رادیو و چک باکس ها با تگ value تغییر ظاهری ای نمی کنند و اگر می خواهید توضیحی برای آنها بنویسید باید در کنار تگ input شان بنویسید مانند کد بالا

خوب حالا بیاید چندتا چیز دیگه هم به فرممون اضافه کنیم

۱-لیست های کشویی : برای گذاشتن لیست های کشویی دیگر نیازی به تگ input نیست این لیست ها خود تگ متفاوتی دارند به اسم select و نیازمند تگ پایانی نیز می باشند

تگ داخلی select : برای ایجاد هر کشوی این لیست ها باید یک تگ option که فقط درون این تگ کار می کند بسازیم این تگ نیز نیازمند تگ پایانی است و هرچیزی که بین تگ آغازیو پایانی اش قرار گیرد داخل کشو نمایش داده می شود نگران نباشید با این مثال متوجه خواهید شد:

*نکته : همانور که گفتیم برای رفتن به خط بعدی از کد br استفاده می شود اما کد دیگری نیز وجود دارد که هم مارا به خط بعد میبرد و هم زیر خط قبلی یک خط می کشد ببینید :

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#000000" background="http://www.7learn.com/a/msm/webdesign/bg.jpg" dir="rtl">
6<center>
7<form>
8<input type="text" value="مقدار اولیه">
9<input type="reset" value="پاک کن">
10<input type="button" value="دکمه">
11<input type="checkbox">چک باکس
12<input type="radio">رادیو
13<hr>
14<select>
15<option>1</option>
16<option>2</option>
17<option>3</option>
18</select>
19</form>
20</center>
21</body>
22</html>

خوب تگ آخری که در فرم ها نیاز با دانستنش هستیم تگ textarea هست که باکسی برای نوشتن به وجو میاورد حتما میگید خوب پس مشخصه text تگ input چه فرقی با این داره؟خوب از اولی اصولا برای نوشتن نام کاربری و پسورد استفاده می شه اما از این اصولا برای نوشتن پیغام زیرا قابلیت بزرگ شدن رو هم داره این تگ هم نیازمند تگ پایانی است ببینیم:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#000000" background="http://www.7learn.com/a/msm/webdesign/bg.jpg" dir="rtl">
6<center>
7<form>
8<input type="text" value="مقدار اولیه">
9<input type="reset" value="پاک کن">
10<input type="button" value="دکمه">
11<input type="checkbox">چک باکس
12<input type="radio">رادیو
13<hr>
14<select>
15<option>1</option>
16<option>2</option>
17<option>3</option>
18</select>
19<hr>
20<textarea>
21</textarea>
22</form>
23</center>
24</body>
25</html>

*نکته : اگر دقت کنید در سمت چپ و پایین باکس ایجاد شده چند نقطه وجود دارد که با گرفتن آنها و کشیدن آنها بازدیدکننده می تواند سایز آنرا تغییر دهد.

خوب از فرم ها خارج میشیم و به توضیح شمارنده ها دو نوع شمارنده داریم شمارنده با ترتیب و شمارنده بی ترتیب که کارکردشون مثل هم هست و فقط تگشون فرق داره اول به معرفی شمارنده بی ترتیب می پردازیم این شمارنده ها با تگ ul نشون داده میشن و نیازمند تگ پایانی نیز هستند این تگ نیازمند یک تگ داخلی هست که li نام داره و نیازمند تگ پایانی نیز هست حالا متوجه نشدید این شمارنده ها چین؟اشکالی نداره تو این مثال می فهمید اگر کدی مثل کد زیر داشته باشیم:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="#000000" background="http://www.7learn.com/a/msm/webdesign/bg.jpg" dir="rtl">
6<center>
7<font color="white">
8<ul>
9<li>Mohammad</li>
10<li>Sina</li>
11<li>Merajiyan</li>
12<ul>
13</font>
14</center>
15</body>
16</html>

می بینید که نوشته های داخل li با یک نقطه و درخط های مجزا چاپ شده اند استفاده از این تگ در نوشتن موارد یک چیز یا منوها هست که بعدا خواهیم دید حالا فرق شمارنده باترتیب با این چیه؟فقط به جای نقطه عدد گذاشته میشه یعنی اولی ۱ دومی ۲ و … تگ آن هم به جای ul کافیه ol بذارید حتی تگ داخلیشون هم فرقی نداره.

می مونه دو نوع کد که اولیش table هست و نقش مهمی در ساختمان وب ها داره و خوب از اسمش معلومه یه جدول رسم می کنه تگ table نیازمند تگ پایانی نیز هست و دو تگ داخلی داره:

۱-تگ tr : از این تگ برای رسم یک سطر در جدول استفاده می شه

۲-تگ td : از این تگ هم برای رسیم یک ستون استفاده میشه

خوب چهارتا مشخصه مهم داره table که اولی border هست دقیقا همون کار مشخصه border عکس رو می کنه یعنی می گه چقدر حاشیه داشته باشه جدول که حالت عادیش هم ۰ هست

دومی background یا عکس پشت زمینه جدول هست

سومی و چهارمی هم width و heigh هستند که همونطوری که درانتهای جلسه قبل گفتیم برای اندازه هستند و به همون دو روش نیز استفاده میشن.

بیاید یه جدول ۳ در ۲ رسم کنیم با هم:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="gold" dir="rtl">
6<center>
7<table border="10">
8<tr><td>اولی</td><td>دومی</td></tr>
9<tr><td>سومی</td><td>چهارمی</td></tr>
10<tr><td>پنجمی</td><td>ششمی</td></tr>
11</table>
12</center>
13</body>
14</html>

خوب فکر کنم خیلی ساده و واضح بود فقط یه نکته ای اینکه از تگ هایی مثل تگ فونت برای کل table نمی تونید استفاده کنید و باید جدا برای هر td تعریف کنید.نکته ی مهم بعدی اینه که حواستون باشه tr به td اولویت داره یعنی اول باید یه سزر ایجاد کنید بعد یه ستون.

حالا که بحث به اولویت رسید یه توضیحی راجع به برنامه نوشتن بدم اینکه حتما اولویت رو رعایت کنید مثلا اگه یه تگی رو قبل از همه ی تگ ها باز کردید باید اونو بعد از همه ی اونا ببنید و برعکس مثلا این کد زیر غلطه:

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="gold" dir="rtl">
6<center>
7</body>
8</center>
9</html>

چون که تگ Body قبل از تگ center باز شده اما بعد از اون بسته نشده که این غلطه البته شاید ببینید مشکلی تو نتیجش پیش نمیاد این واسه اینه که فعلا کدمون خیلی سادس و قاطی نمیشن کد ها با هم اما وقتی یکم پیچیده بشه حتما مشل آفرین خواهد شد.

تگ آخری که می خوام آموزش بدم باز هم برای زیبایی وبتون هست و blink نام داره که نیازمند تگ پایانی نیزهست و کارش اینهکه عکس یا نوشته ای که بین تگش میذارین رو مدام خاموش و روشن می کنه مانند کد زیر

1<html>
2<head>
3<title>اولین برنامه ی من</title>
4</head>
5<body bgcolor="gold" dir="rtl">
6<center>
7<blink>sina</blink>
8</center>
9</body>
10</html>

توصیه ی من اینه که زیاد از این تگ استفاده نکنید چون باعث چشم درد بازدیدکننده میشه

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

امیدوارم بیشتر از اینها مارو دنبال کنید

ممنون

5-جلسه پنجم طراحی قالب در فتوشاپ

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

0 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

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

۱- برای شروع کار یک فایل جدید در ابعاد ۹۶۰ پیکسل (عرض) و ۹۰۰ پیکسل (ارتفاع) و ۷۲dpi رزولوشن ایجاد کنید.

۲- با سطل رنگ (Paint Bucket) رنگ (#۰۴۲۸۳b) را بر روی صفحه بریزید.

۳- یک لایه جدید ایجاد کنید، قلم مو (Brush) را انتخاب کنید، سایز قلم را به اندازه ای زیاد کنید که بتوانید یک محیط روشن بزرگ با رنگ سفید (مانند نمای زیر) در وسط صفحه ایجاد کنید.

1 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۴- ترکیب لایه را به حالت (Soft Light) تغییر دهید.

2 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۵- حالا (Rectangle Tool) را انتخاب کنید و اشکالی را همانند نمای زیر در صفحه ایجاد کنید. من رنگ (#۴۱۷۳۸e) را برای کشیدن این اشکال انتخاب کردم.

3 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۶- در سمت چپ، من فضای خالی را با یک شکل دیگر به رنگ (#۲۸۶۰۷d) پر کردم.

4 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۷- سپس با رفتن به منوی Edit>Transform>Skew و انتخاب ابزار (Move Tool)، شکل خود را به حالت زیر تغییر دادم و گوشه ها را با دقت بالا به هم متصل کردم.

5 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۸- شما هم این کار را برای ۴ گوشه کار به همین صورت تکرار کنید. حالا ما ۲ نوار تقریبا سه بعدی در بالا و پایین صفحه داریم.

6 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۹- حالا باید یک کپی از این اشکال بگیریم و دقیقا به حالتی که در نمای زیر مشاهده میکنید با کمی فاصله در زیر اشکال اولیه و با رنگ تیره تر قرار دهیم، با این کار به صفحه خود عمق داده ایم. همین کار را برای نوار زیر صفحه تکرار کنید.

7 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۱۰- یک شکل به حالت بیضی با استفاده از (Ellipse Tool) در زیر نوار روشن بالای صفحه و با رنگ تیره ایجاد کنید.

8 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۱۱- به منوی (Filter) بروید و از زیرمنوی (Blur) گزینه (Gaussian Blur) را انتخاب کنید و تنظیمات آن را به روشی که در نمای زیر می بینید تغییر دهید.

9 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۱۲- و (Opacity) لایه را به ۴۰% کاهش دهید.

10 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۱۳- مراحل ۱۰ تا ۱۲ را برای نوار پایینی تکرار کنید و یا از لایه ایجاد شده قبلی یک کپی بگیرید و آن را در زیر نوار پایینی صفحه قراردهید. اگر مراحل را درست انجام داده باشید، قالب شما تا ایجای کار شبیه به نمای زیر خواهد بود.

11 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۱۴- حالا یک لایه بالاتر از همه لایه ها ایجاد کنید (می توانید اینکار را با استفاده از CTRL+SHIFT+ALT+N) انجام دهید و با استفاده از مداد یا (Pencil Tool) یک خط صاف افقی بکشید، ولی اندازه قلم را روی ۱px تنظیم کنید.

12 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۱۵- دقت کنید که خط سفید را مانند نمای زیر رسم کنید. هنگام کشیدن مداد (Pencil Tool) بر روی صفحه دکمه (Shift) را نگه دارید تا یک خط افقی صاف رسم شود. در نهایت خط رسم شده را مانند نمای زیر دقیقا بر روی لبه نوار بالا قرار دهید.

khat آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۱۶- حالا پاک کن (Eraser Tool) را مانند نمای زیر انتخاب کنید، دقت کنید که یک براش را در نرم ترین حالت قرار دهید.

13 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۱۷- حالا با استفاده از همین پاک کن قسمتهایی از خط را مانند نمای زیر پاک کنید.

14 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۱۸- در این مرحله با توجه به نیازها و سلیقه خود کمی متن به صفحه اضافه کنید.

۱۹- حالا شکلی همانند شماره یک عکس زیر در چپ کار خود ایجاد کنید.

۲۰- سپس به منوی Filter بروید و از زیرمنوی Blur گزینه Gaussian Blur را انتخاب کنید (Filter > Blur > Gaussian blur) و تنظیمات را مانند قبل بر لایه خود اعمال کنید. خروجی مانند شماره دو خواهد شد.

۲۱- با استفاده از ابزار انتخاب مستطیلی (Rectangular Marquee Tool) درست نیمه چپ شکل مورد نظر را انتخاب میکنیم.

۲۲- مطمئن باشید که لایه را درست انتخاب کرده اید، سپس دکمه های (CTRL+I) و بعد (CTRL+D) را بفشارید. با اینکار رنگ قسمت انتخاب شده را معکوس خواهید کرد و مانند شماره سه خواهد شد کارتون.

۲۳- حال اگر میزان شفافیت (Opacity) لایه را به ۶% کاهش دهید نتیجه کار شماره ۴ عکس زیر می شود.

15 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۲۴- حالا با استفاده از (Rounded Rectangle Tool) یک شکل ساده به این حالت می کشیم.

16 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۲۵- حالا با استفاده از دکمه های (CTRL+T) کمی شکل را به مانند نمای زیر می چرخانیم.

17 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ
۲۶- پس از اطمینان از اینکه شکل را در حالت مناسبی قرارداده اید دکمه Enter را بزنید، سپس بر روی لایه راست کلیک کرده و گزینه Rasterize Layer را انتخاب کنید.

18 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۲۷- باز هم با استفاده از (Rectangular Marquee Tool) قسمت سمت راست شکل فعلی را مانند نمای زیر انتخاب کنید.

19 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۲۸- حالا دکمه Delete را بزنید و یا از منوی Edit گزینه Clear را انتخاب کنید، سپس برای خروج از حالت انتخاب دکمه های CTRL+D را فشار دهید.

۲۹- مانند مراحل اولیه کار، از این لایه یک کپی بگیرید و رنگ آن را تیره تر کنید و آن را درست در زیر لایه فعلی، البته با کمی تغییر زاویه قرار دهید.

20 آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

۳۰- حالا کمی سلیقه به خرج داده و در سایت Wefunction.com آیکون مورد نظر خود را پیدا کنید و آن را مانند نمای زیر در قسمتی از قالب جاسازی کنید.

۳۱- خسته نباشید، قالب شما آماده است.

demo آموزش طراحی قالب از صفر جلسه پنجم طراحی قالب در فتوشاپ

دانلود فایل PSD آماده ی این قالب

با تشکر از تمپ ها

-ایجاد انواع منوها و باکس های تب دار در چند گام ساده !

حتما در بسیاری از صفحات وب دیدید که قسمتی از صفحه یه باکس یا منو وجود داره که بالای اون چند تب یا لینک هست و با کلیک روی هر کدوم از تب ها ، بلافاصله محتوای منو یا باکس عوض میشه و محتوای مربوط به اون تب در منو نمایش داده میشه . چیزی شبیه همین تب های مرورگر ها ، منتهی در درون صفحه وب !
:: بزارید لپ مطلب رو اینطور ادا کنم :
:: دوست دارید منوها و یا باکس های تب دار (معروف به تبر – tabber) همانند زیر داشته باشید :

:: خوب ، امروز می خوایم بهتون آموزش بدیم که چطور در ۳ گام ساده اینجور منو ها و باکس های tab دار رو بسازید .
:: برای ساخت این جور tabber menu یا tabber box به ترتیب این سه مرحله زیر رو طی کنید که بسیار ساده اند و واضح توضیح داده شده چیکار کنید :

گام اول) افزودن فایل کتابخانه جاوااسکریپت tabcontent
:: برای ساخت این منوی تب دار از کتابخانه جاوااسکریپت tabcontent استفاده می کنیم که من اون رو به اضافه ی ۶ تا تم براتون آپلود کردم و می تونید از آدرس فایل های آپلود شده در ۷learn برای لود کردن اونها استفاده کنید .
در مرحله اول شما باید این دو خط رو به header صفحه html خودتون (درون تگ head) اضافه کنید .

1<script src="http://7learn.com/js/tabber/tc.js" type="text/javascript"></script>
2<link href="http://7learn.com/js/tabber/template1/tabcontent.css"
3rel="stylesheet" type="text/css" />

:: خط اول خود library رو لود میکنه و در خط دوم هم استایل و تم منوی تب دار رو تعیین می کنید . ۶ تا تم برای این منو آماده شده که شما می تونید در خط دوم با تغییر template1 به template3 , template2 …. و template6 تم منو رو عوض کنید .
:: در اینجا می تونید ظاهر هر ۶ تم رو ببینید .

گام دوم) افزودن تب ها
:: بعد از اینکه کتابخانه و تم دلخواه گفته شده در گام ۱ رو لود کردید و دو خط بالا رو در صفحه وبتون قرار دادید نوبت اینه که تب ها رو اضافه کنید . برای این منظور باید در قالبی شبیه کد زیر تب هاتون رو اضافه کنید .

1<ul class="tabs">
2       <li><a href="#view1" rel="view1">Tab1</a></li>
3       <li><a href="#view2" rel="view2">Tab2</a></li>
4       <li><a href="#view3" rel="view3">Tab3</a></li>
5</ul>

:: توجه کنید که حتما باید برای ویژگی class تگ ul که لیست تب ها هست ، مقدار tabs رو قرار بدید. (خط ۱)
:: هر کدوم از تگهای li یک تب رو نشون میده . دقت کنید که برای هر کدوم از لینک های درون این تب ها ویژگی rel مشخص شده . از مقدار این ویژگی برای تعیین محتوایی که باید با کلیک روی تب نمایش داده بشه استفاده میشه . مثلا برای تب دوم ویژگی rel مقدار view2 رو داره . در گام بعدی می بینید که محتوای این تب باید ویژگی id داشته باشه با همین مقدار view2 .
گام سوم) افزودن محتوای نمایش هر تب
:: خوب ، بعد از اینکه تب ها رو به صفحه وب اضافه کردید ، باید محتوای تب ها رو اضافه کنید . این محتوا رو هم در قالب و فرمت زیر اضافه میکنید :

1<div class="tabcontents">
2       <div id="view1" class="tabcontent">
3               Content Of Tab1 ...
4       </div>
5       <div id="view2" class="tabcontent">
6               Content Of Tab2 ...
7       </div>
8       <div id="view3" class="tabcontent">
9               Content Of Tab3 ...
10       </div>
11</div>

:: نکته اول اینکه مقدار ویژگی class تگ div که همه محتوا ها رو در برداره باید tabcontents باشه (خط ۱ کد فوق) .
:: نکته دوم هم اینکه مقدار ویژگی class برای هر محتوا که یک تگ div هست باید tabcontent باشه . (خط های ۲ و ۵ و ۸ در کد فوق)
:: مهمتر از همه اینکه مقدار ویژگی id هر محتوا باید با مقدار ویژگی rel تب مربوط به خودش (که در گام دوم کدش رو آوردیم) برابر باشه . (خط های ۲ و ۵ و ۸ در کد فوق رو با خط های ۲ ، ۳ و ۴ در کد گام دوم مقایسه و یکسان بودن id محتوا و rel تب مربوط به خودش رو مشاهده کنید)

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

1<html>
2<head>
3<script src="http://7learn.com/js/tabber/tc.js" type="text/javascript"></script>
4<link href="http://7learn.com/js/tabber/template1/tabcontent.css"
5rel="stylesheet" type="text/css" />
6</head>
7<body>
8<ul class="tabs">
9       <li><a href="#view1" rel="view1">Tab1</a></li>
10       <li><a href="#view2" rel="view2">Tab2</a></li>
11       <li><a href="#view3" rel="view3">Tab3</a></li>
12</ul>
13<div class="tabcontents">
14       <div id="view1" class="tabcontent">
15               Content Of Tab1 ...
16       </div>
17       <div id="view2" class="tabcontent">
18               Content Of Tab2 ...
19       </div>
20       <div id="view3" class="tabcontent">
21               Content Of Tab3 ...
22       </div>
23</div>
24</body>
25</html>

(!) نکات مهم در استفاده از این کتابخانه
:: شما به راحتی می تونید برای هر کدوم از تب ها و یا محتوای تب ها استایل های css تعریف کنید و ظاهر منو رو به شکل دلخواه تغیر بدید .
:: اگر بخواید بیش از یک منو و باکس تب دار در یک صفحه داشته باشید حتما دقت کنید که rel و id های استفاده شده در یک منو با بقیه تداخل اسمی نداشته باشه و باید اسامی مختلفی استفاده کنید .
:: اگر می خواید این کتابخانه رو در هاست شخصی داشته باشید می تونید اونو از اینجا دانلود کنید .

امیدوارم که از این مطلب هم لذت برده باشید …

-ارسال داده های فرم های html به یک iframe

فرم های موجود در صفحات html برای دریافت ورودی از کاربر استفاده می شن . معمولا به این شکله که پس از پر کردن فیلدهای یک فرم دکمه submit رو می زنید تا داده های وارد شده رو به سمت سرور بفرستید تا اونجا عملیات مورد نیاز ( مثلا ثبت نام ، لاگین شدن ، ذخیره مشخصات و …) روی داده های ورودی شما چک و اعمال بشه .
:: در حالت پیش فرض پس از پر کردن فرم و زدن دکمه submit به یک صفحه دیگه منتقل میشید و در اونجا نتیجه ارسال اطلاعاتتون رو میبینید . مثلا در صفحه جدید نمایش داده میشه که اطلاعات شما با موفقیت ثبت شد و یا یه چیزی تو این مایه ها …
:: در آموزش امروز می خوایم بگیم که چطور اطلاعات ارسال شده رو به یک iframe بفرستید که نخواید پس از زدن دکمه submit به صفحه جدید منتقل بشید .
:: محض یادآوری بگم که با استفاده از تگ iframe شما می تونید یک صفحه وب رو درون یک صفحه وب دیگه قرار بدید . مثلا با تگ iframe زیر من صفحه دیگه ای رو که شامل یک باکس و منوی منوی تب دار هست درون این پست میزارم :

1<iframe name="ifrm7" src="http://www.7learn.com/js/tabber/demo1.html"></iframe>

که نمایشش به شکل زیر میشه :

:: حالا می خوایم یه چنین چیزی رو با هم بنویسیم . که اطلاعات یک فرم رو به یک iframe در زیر اون بفرستیم .

:: یک رنگ رو انتخاب کنید و دکمه submit رو بزنید تا نتیجه رو ببینید .
:: برای این کار شما به دو تا فایل نیاز دارید . یکی فایلی که فرم html شما رو در بر داره (form.html) و دیگری فایلی که اطلاعات فرم به اون ارسال می شه تا پردازش لازم روی اطلاعات ورودی رو انجام بده (print.php) .

:: فایل form.html رو به شکل زیر داریم که شامل یک فرمه که یک منوی select درون اون هست که رنگ مورد علاقه کاربر رو میخواد دریافت کنه . و در آخر این فایل هم iframe ی که قرار نتیجه رو در اون بیاریم آوردیم .

1<html>
2<head>
3<title>7Learn Form to iFrame</title>
4<style type="text/css">
5.frm{
6    width: 270px;
7    background-color:#eee;
8    padding: 7px;
9    border-radius: 10px;
10}
11.cntr{
12    margin: 0 auto;
13    text-align: center;
14}
15input{
16    height: 20px;
17    border:1px solid silver;
18    cursor: pointer;
19}
20input:hover{
21    background-color: #a7ff89;
22}
23</style>
24</head>
25<body>
26<form action="http://7learn.com/files/frmifr/print.php" target="ifrm7" method="post" class="frm cntr">
27    <select name="fcolor">
28        <option value="white">Select Yor Favorite Color ...</option>
29        <option value="red">Red</option>
30        <option value="green">Green</option>
31        <option value="blue">Blue</option>
32        <option value="yellow">Yellow</option>
33    </select>
34  <input type="submit" value=" Submit ">
35</form>
36<br/>
37<div class="cntr">
38<iframe  name="ifrm7" src="http://www.7learn.com/files/frmifr/print.php">
39</iframe>
40</div>
41</body>
42</html>

:: در این کد خطوط ۲۶ و ۳۸ رو که مشخص شده دقت کنید . برای اینکه صفحه دریافت اطلاعات در یک iframe باز بشه فقط کافیه به iframe ی که تعریف میکنید (خط ۳۸) با استفاده از ویژگی name یک نام رو اختصاص بدید و همون نام رو به عنوان ویژگی target تگ فرم مورد نظرتون (خط ۲۶) اضافه کنید . میبینید که در اینجا مقدار ifrm7 رو برای نام iframe و برای target فرم تعیین کردیم . یعنی می خوایم اطلاعاتی که به صفحه print.php (مقدار ویژگی action فرم در خط ۲۶) می فرستیم نتیجش در این iframe معلوم بشه ! به همین سادگی . هیچ نیازی به استفاده از تگ اضافه یا کدهای جاوااسکریپت نیست !
:: اگر مقدار target فرم رو _blank بزارید صفحه نتیجه در یک پنجره جدید باز میشه . درست شبیه همون چیزی که برای لینک ها داریم .
:: اطلاعات این فرم با متد post به ادرس http://7learn.com/files/frmifr/print.php ارسال میشه .
:: اینم فایل print.php که اطلاعات دریافت شده فرم رو که در آرایه _POST پی اچ پی حاضر شده رو ، میگیره و پردازشی که در اینجا فقط چاپ یه متن و قرار دادن رنگ دریافت شده به عنوان پس زمینه هست رو انجام میده :

1<html>
2<head>
3    <title>7Learn Form to iFrame</title>
4    <style type="text/css">
5        .msg {
6            font-size: 16px
7        }
8    </style>
9</head>
10 
11<?php
12$color = "white";
13$isFormPosted = false;
14if (isset($_POST['fcolor'])) {
15    $color = $_POST['fcolor'];
16    $isFormPosted = true;
17}
18?>
19 
20<body bgcolor="<?php echo $color?>">
21<?php if ($isFormPosted) : ?>
22   <span class="msg">
23       Your Favorite color is my background color (<?php echo $color?>) ! .
24   </span>
25<?php else : ?>
26   <span style="font-size: 16px">
27       Please Submit the form !
28   </span>
29<?php endif; ?>
30</body>
31</html>

:: در فایل دریافت کننده اطلاعات فرم یعنی print.php رنگ دریافت شده رو به همراه یک متن چاپ می کنیم و پس زمینه صفحه نتایج رو هم به همون رنگ انتخاب شده توسط کاربر تغیر میدیم !

ادامه مطلب ...

موضوع مطلب :

آمار وبلاگ

بازدید امروز: 1063
بازدید دیروز: 935
کل بازدیدها: 12474636

پیوندهای روزانه

پیوندها

لوگو

در اینجا می توانید خبرهای داغ سیاسی فراجناحی را بخوانید...علیرضااحسانی نیا

آمار وبلاگ

بازدید امروز: 1063
بازدید دیروز: 935
کل بازدیدها: 12474636