• مشکی
  • سفید
  • سبز
  • آبی
  • قرمز
  • نارنجی
  • بنفش
  • طلایی
وبلاگ نویسان (بازدید: 902)
شنبه 7/5/1391 - 21:36 -0 تشکر 483301
آموزش طراحی قالب از صفر – جلسه اول ساختار قالب

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

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

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

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

http://www.7learn.com/a/msm/post/template-style.png

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

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

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

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

www.7learn.com

شنبه 7/5/1391 - 21:39 - 0 تشکر 483308

 آموزش طراحی قالب از صفر – جلسه دوم تگ های hthl 

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


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

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

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

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

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

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

       

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

   اولین برنامه ی من     

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

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

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

   اولین برنامه ی من     

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

style="background-repeat:repeat-x"
style="background-repeat:repeat-y"
style="background-repeat:no-repeat"

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

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

   اولین برنامه ی من     

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

   اولین برنامه ی من    
www.7learn.com

شنبه 7/5/1391 - 21:42 - 0 تشکر 483313

 آموزش طراحی قالب از صفر – جلسه سوم تگ های html 

سلام

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

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

   اولین برنامه ی من     

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

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

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

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

   اولین برنامه ی من      

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

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

   اولین برنامه ی من       

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

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

   اولین برنامه ی من    


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

   اولین برنامه ی من    
آموزش طراحی وب

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

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

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

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

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

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

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

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

   اولین برنامه ی من    
آموزش طراحی وب

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

   اولین برنامه ی من    

sina

sina

sina

sina

sina
sina

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

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

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

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

   اولین برنامه ی من    

HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language). یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد یک فایل HTML باید دارای پسوند html. یا html. باشد یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود

HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language). یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد یک فایل HTML باید دارای پسوند html. یا html. باشد یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود

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

   اولین برنامه ی من    

HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language). یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد یک فایل HTML باید دارای پسوند html. یا html. باشد یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود

HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language). یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد یک فایل HTML باید دارای پسوند html. یا html. باشد یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود

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

   اولین برنامه ی من   

7Learn

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

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

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

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

   اولین برنامه ی من   

7Learn
محمدسینا معراجیان

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

www.7learn.com

شنبه 7/5/1391 - 21:44 - 0 تشکر 483318

 آموزش طراحی قالب از صفر – جلسه چهارم تگ های html 

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

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

   اولین برنامه ی من   

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

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

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

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

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

   اولین برنامه ی من   
چک باکس رادیو

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

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

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

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

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

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

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

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

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

   اولین برنامه ی من   
چک باکس رادیو

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

   اولین برنامه ی من   
چک باکس رادیو

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

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

   اولین برنامه ی من   
  • Mohammad
  • Sina
  • Merajiyan

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

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

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

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

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

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

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

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

   اولین برنامه ی من   
اولیدومی
سومیچهارمی
پنجمیششمی

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

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

   اولین برنامه ی من   

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

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

   اولین برنامه ی من   
sina

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

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

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

ممنون

www.7learn.com

شنبه 7/5/1391 - 21:47 - 0 تشکر 483324

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

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

http://www.7learn.com/a/msm/webdesign/photoshop/0.png

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

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

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

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

http://www.7learn.com/a/msm/webdesign/photoshop/1.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/2.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/3.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/4.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/5.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/6.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/7.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/8.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/9.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/10.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/11.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/12.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/khat.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/13.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/14.jpg

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

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

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

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

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

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

http://www.7learn.com/a/msm/webdesign/photoshop/15.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/16.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/17.jpg
۲۶-  پس از اطمینان از اینکه شکل را در حالت مناسبی قرارداده اید دکمه Enter را بزنید، سپس بر روی لایه راست کلیک کرده و گزینه Rasterize Layer را انتخاب کنید.

http://www.7learn.com/a/msm/webdesign/photoshop/18.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/19.jpg

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

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

http://www.7learn.com/a/msm/webdesign/photoshop/20.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/twitter.jpg

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

http://www.7learn.com/a/msm/webdesign/photoshop/demo.png

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

www.7learn.com

شنبه 7/5/1391 - 23:15 - 0 تشکر 483452

سلام


آقا دمت قیژ!!!


من تا آخرش دنبال میکنم چون شدیدا علاقه مندم یاد بگیرم.

برو به انجمن
فعالترین ها در هفته گذشته
انجمن فعال در هفته گذشته
مدیر فعال در هفته گذشته
آخرین مطالب
  • آلبوم تصاویر بازدید از کلیسای جلفای...
    آلبوم تصاویر بازدید اعضای انجمن نصف جهان از کلیسای جلفای اصفهان.
  • بازدید از زیباترین کلیسای جلفای اصفهان
    جمعی از کاربران انجمن نصف جهان، در روز 27 مردادماه با همکاری دفتر تبیان اصفهان، بازدیدی را از کلیسای وانک، به عمل آورده‌اند. این کلیسا، یکی از کلیساهای تاریخی اصفهان به شمار می‌رود.
  • اعضای انجمن در خانه شهید بهشتی
    خانه پدری آیت الله دکتر بهشتی در اصفهان، امروزه به نام موزه و خانه فرهنگ شهید نام‌گذاری شده است. اعضای انجمن نصف جهان، در بازدید دیگر خود، قدم به خانه شهید بهشتی گذاشته‌اند.
  • اطلاعیه برندگان جشنواره انجمن‌ها
    پس از دو ماه رقابت فشرده بین کاربران فعال انجمن‌ها، جشنواره تابستان 92 با برگزاری 5 مسابقه متنوع در تاریخ 15 مهرماه به پایان رسید و هم‌اینک، زمان اعلام برندگان نهایی این مسابقات فرارسیده است.
  • نصف جهانی‌ها در مقبره علامه مجلسی
    اعضای انجمن نصف جهان، در یك گردهمایی دیگر، از آرامگاه علامه مجلسی و میدان احیا شده‌ی امام علی (ع) اصفهان، بازدیدی را به عمل آوردند.