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

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

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

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

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

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

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

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

www.7learn.com

 آموزش طراحی قالب از صفر – جلسه دوم تگ های 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

 آموزش طراحی قالب از صفر – جلسه سوم تگ های 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

 آموزش طراحی قالب از صفر – جلسه چهارم تگ های 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 استفاده می شود اما کد دیگری نیز وجود دارد که هم مارا به خط بعد میبرد و هم زیر خط قبلی یک خط می کشد ببینید :

       
    چک باکس
رادیو
  1 2 3  
    

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

       
    چک باکس
رادیو
  1 2 3  
   
    

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

خوب از فرم ها خارج میشیم و به توضیح شمارنده ها دو نوع شمارنده داریم شمارنده با ترتیب و شمارنده بی ترتیب که کارکردشون مثل هم هست و فقط تگشون فرق داره اول به معرفی شمارنده بی ترتیب می پردازیم این شمارنده ها با تگ 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

www.7learn.com

سلام