آموزش طراحی سایت-آموزش Html

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTMLپس زمینه در html , رنگ در html و فونت ها در Html را یاد گرفتیم , در قسمت دهم با ادامه آموزش طراحی سایت همراه باشید:

 

فرم های html

وقتی که می خواهید داده هایی را از سایت بازدیدکننده جمع آوری کنید، به فرم های HTML احتیاج خواهید داشت. به عنوان مثال در هنگام ثبت کاربر، اطلاعاتی مانند نام، آدرس ایمیل و کارت اعتباری و غیره را جمع آوری می کنید. یک فرم داده ها را از بازدیدکننده ی سایت می گیرد و سپس آن را به یک برنامه ی پایانی مانند CGI، اسکریپت ASP یا اسکریپت PHP باز می گرداند. برنامه ی پایانی فرایندهای مورد نیاز را بر اساس کار تعریف شده در برنامه، روی داده ی منتقل شده انجام می دهد.
عناصر متفاوتی برای فرم در دسترس میباشند، مانند فیلدهای متن، فیلدهای textarea، منوهای رو به پایین، دکمه های رادیو، چک باکس ها و غیره.
برچسب < form>مربوط به HTML، برای ایجاد یک فرم HTML استفاده می شود و دارای ترکیب زیر می باشد

< form action="Script URL" method="GET|POST">

form elements like input, textarea etc.

< /form>

ویژگی های فرم

علاوه بر ویژگی های متداول، در زیر لیستی از متداول ترین ویژگی های مربوط به فرم را مشاهده می کنید .

کنترل های فرم HTML

انواع مختلفی از کنترل های فرم وجود دارند که می توانید برای جمع آوری داده با استفاده از فرم HTML از آنها استفاده کنید.

• کنترل های ورودی متن
• کنترل های چک باکس
• کنترل های رادیو باکس
• کنترل های انتخاب باکس
• باکس های انتخاب فایل
• کنترل های مخفی
• دکمه های قابل کلیک شدن
• ثبت و تنظیم مجدد

کنترل های ورودی متن

سه نوع ورودی متن وجود دارد که در فرم ها استفاده می شوند .

• کنترل های ورودی متن تک خطی: این کنترل برای آیتم هایی استفاده می شود که فقط یک خط از ورودی کاربر را لازم دارد، مانند باکس های جستجو و نام ها. این کنترل ها با استفاده ازبرچسب < input>مربوط به HTML ایجاد می شوند.
• کنترل ورودی گذرواژه: این نیز یک متن ورودی تک خطی می باشد، اما به محض اینکه کاربر کاراکتر را وارد می کند، این کنترل آن را می پوشاند.
• کنترل های متن ورودی چند خطی: زمانی استفاده می شود که لازم است کاربر جزئیاتی را وارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب < textarea>استفاده می شوند.

کنترل های ورودی تک خطی

این کنترل ها برای آیتم هایی استفاده می شوند که کاربر فقط یک خط ورودی احتیاج دارد، مانند باکس های جستجو و نام ها و با استفاده از برچسب < input>مربوط به HTML ایجاد می شوند.

مثال:

در اینجا مثال پایه ای می بینید از یک ورودی تک خطی که برای گرفتن نام کوچک و نام خانوادگی به کار می رود .

نمونه یک

First name:

Last name:

ویژگی ها

در زیر لیستی از ویژگی های برچسب < input>را برای ایجاد فیلد متن می بینید.

آموزش طراحی سایت

کنترل های پسورد ورودی

این کنترل نیز یک کنترل تک خطی می باشد، اما به محض اینکه کاربر کاراکترها را وارد می کند، آنها را می پوشاند. این ها نیزبا استفاده از برچسب < input>مربوط به HTML ایجاد می شوند، اما نوع ویژگی با عنوان password تنظیم میشود.

مثال:

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

نمونه دو

User ID :

Password:

ویژگی ها

در زیر لیست مربوط به ویژگی های برچسب < input>را برای ایجاد فیلد پسوورد می بینید.

کنترل های متن ورودی چند خطی

زمانی استفاده می شود که یک کاربر باید جزئیاتی را ئارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب < textarea>ایجاد میشوند.

آموزش طراحی سایت:آموزش طراحی وب

آموزش طراحی سایت

پس زمینه در html

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML لینک های عکس در html , لینک های متنی , لینک ایمیل در HTML و قابها در html را یاد گرفتیم , در قسمت نهم با ادامه آموزش HTML همراه باشید:

پس زمینه در html

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

• زمینه ی HTML با رنگ ها.
• زمینه ی HTML با تصاویر.

اکنون اجازه بدهید هر دو روش را یکی یکی و با استفاده از مثال های مناسب بررسی کنیم.

زمینه ی HTML با رنگها

ویژگی bgcolor برای کنترل زمینه ی یک عنصر HTML، به ویژه بدنه ی صفحه و زمینه ی جدول، استفاده می شود. در زیر ترکیب استفاده از bgcolor را با هر برچسب HTML می بینید.

< tagname bgcolor="color_value" ...>

این color- value می تواند به هرکدام از فرمت های زیر ارائه شود.

<!-- Format 1 - Use color name -->

< table bgcolor="lime">

<!-- Format 2 - Use hex value -->

< table bgcolor="#f1f1f1">

<!-- Format 3 - Use color value in RGB terms -->

< table bgcolor="rgb(0,0,120)">

مثال:

در اینجا مثالی را می بینید از تنظیم زمینه ی یک برچسب HTML.

نمونه یک

<table bgcolor="yellow" width="100%">

<tbody><tr>

<td>

This background is yellow

</td>

</tr>

</tbody></table>

زمینه ی HTML با تصاویر

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

توجه:

ویژگی background به عنوان ویژگی خوبی تلقی نمی شود و توصیه می شود از style sheet برای تنظیم زمینه استفاده کنید.

< tagname background="Image URL" ...>

متداول ترین فرمت های مورد استفاده ی تصویر عبارتند از JPEG، PNG و GIF.

مثال:

در اینجا مثال هایی را از تنظیم تصویر به عنوان زمینه ی جدول مشاهده می کنید.

نمونه دو

This background is filled up with HTML image.

آموزش طراحی سایت

زمینه های طرح دار و شفاف

شما ممکن است الگوها و زمینه های شفاف بسیاری را در وب سایت های نختلف دیده باشید. این امر به راحتی و با استفاده از تصاویر طرح دار و شفاف در زمینه قابل دستیابی می باشد. توصیه می شود در هنگام ایجاد تصاویر طرح دار یا شفاف GIF یا PNG، از کوچکترین ابعاد ممکن آنها استفاده کنید، حتی به کوچکی 1x1 برای جلوگیری از بارگذاری آهسته.

مثال:

در اینجا مثالی از تنظیم یک الگوی زمینه برای یک جدول را مشاهده می کنید.

نمونه سه

This background is filled up with a pattern image.

رنگ در html:

رنگ ها برای دادن یک ظاهر و احساس خوب به وب سایت شما بسیار مهم می باشند. شما می توانید رنگ ها را روی لایه ی صفحه با استفاده از برچسب < body>مشخص کنید، یا می توانید رنگ ها را برای برچسب های مجزا با استفاده از ویژگی bgcolor مشخص کنید.
برچسب< body>دارای ویژگی های زیر می باشد که می تواند برای تنظیم رنگ های مختلف استفاده شود.

bgcolor

رنگی را برای زمینه ی صفحه تنظیم می کند.

text

رنگی را برای متن تنظیم می کند

alink

رنگی را برای لینک های فعال یا انتخاب شده تنظیم می کند.

link

رنگی را برای متن لینک شده تنظیم می کند.

رنگی را برای لینک های بازدید شده تنظیم می کند- یعنی برای متن لینک شده که روی آن کلیک کرده اید.

روش های کدگذاری رنگ HTML

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

Color names -

می توانید نام رنگ ها را به طور مستقیم تعیین کنید، به عنوان مثال سبز، قرمز، آبی و غیره.

Hex codes -

یک کد شش رقمی که نشان دهنده ی مقدار آبی، قرمز و سبز سازنده ی رنگ، می باشد.

Color decimal or percentage values-

این مقدار با استفاده از ویژگی rgb( ) تعیین می شود.

اکنون این روش های رنگ گذاری را یکی یکی بررسی خواهیم کرد.

رنگ های HTML – نام رنگ

می توانید برای تنظیم رنگ متن یا زمینه به طور مستقیم از نام رنگ استفاده کنید. W3C لیستی از 16 رنگ پایه را دارد که توسط یک اعتباز سنج HTML ارزیابی می شود، اما نام بیشتر از 200 رنگ مختلف وجود داردکه توسط مرورگرهای مهم پشتیبانی می شوند.

16 رنگ استاندارد W3C

در اینجا نام 16 رنگ استاندارد W3C را مشاهده می کنید، پیشنهاد می شود که از آنها استفاده کنید.

16 رنگ استاندارد W3C

مثال:

در اینجا مثال هایی را میبینید از تنظیم زمینه ی یک برچسب HTML به وسیله ی نام رنگ.

نمونه یک

<p>Use different color names for for body and table and see the result.</p>

رنگ های HTML – کدهای Hex

هگزادسیمال یک نمایش 6 رقمی از یک رنگ می باشد. دو رقم اول یعنی RR نمایانگر رنگ قرمر (Red) می باشند، دو رقم بعدی (GG) مقدار سبز (green) را نشان می دهند و آخرین دو رقم (BB) نیز مقدار آبی (blue) را نشان می دهند.
هر کد هگزادسیمال به وسیله ی یک علامت # دنبال می شود. در ادامه رنگ های مورد استفاده در نشانه گذاری هگزادسیمال را مشاهده می کنید.

در زیر مثال هایی را می بینیند از تنظیم زمینه ی یک برچسب HTML به وسیله ی کد رنگ در هگزادسیمال.

نمونه دو

<p>Use different color hexa for for body and table and see the result.</p>

آموزش طراحی سایت

رنگ های HTML – مقادیر RGB

مقدار این رنگ با استفاده از ویژگی rgb( ) مشخص می شود. این ویژگی سه مقدار می گیرد که هر کدام برای سبز، قرمز و آبی می باشد. مقدار می تواند عددی بین 0 و 255 یا یک درصد باشد.

توجه:

همه ی مرورگرها ویژگی ( )rgb را پشتیبانی نمی کنند، بنابراین توصیه می شود از آن استفاده نکنید.

در زیر لیستی از رنگ ها با مقادیر RGB را مشاهده می کنید.

رنگ های HTML – مقادیر RGB

در اینجا مثال هایی را مشاهده می کنید از تنظیم زمینه ی یک برچسب HTML به وسیله ی برچسب rgb() با کد رنگ.

نمونه سه

<p>Use different color code for for body and table and see the result.</p>

در زیر لیستی از 216 رنگ را مشاهده می کنید که تصور می شود سالم ترین و مستقل ترین رنگ های کامپیوتر باشند. این رنگ ها از کد هگزای 000000 تا FFFFFF متفاوت می باشند و توسط همه ی کامپیوترهای دارای پالت رنگ 256 تایی پشتیبانی می شوند.

فونت ها:

فونت ها نقش مهمی در زیبا ساختن و خواناتر کردن وب سایت بازی می کنند. ظاهرو رنگ فونت به طور کامل بستگی به کامپیوتر و مرورگری دارد که استفاده می شود، اما شما می توانید از برچسب < font>در HTML برای افزودن استایل، سایز و رنگ به متن خود در وب سایت استفاده کنید. می توانید از یک برچسب< basefont> برای تنظیم تمام متن خود به اندازه، ظاهر و رنگ یکسان استفاده کنید.
برچسب فونت دارای سه ویژگی به نام های size، color و face می باشد که فونت شکا را به دلخواه در می آورد. برای تغییر هرکدام از ویژگی های فونت در هر زمانی در صفحه ی وب خود، به سادگی از برچسب < font> استفاده کنید. متنی که دنبال می کند، تغییر یافته با قی می ماند تا زمانی که شما آن را با < /font> برچسب ببندید. شما می توانید یکی از ویژگی ها یا همه ی ویژگی های داخل برچسب < font> را تغییر دهید.

نکته:

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

تنظیم اندازه ی فونت

شما می توانید با استفتده از ویژگی size اندازه فونت محتوا را تنظیم کنید. دامنه ی مقادیر قابل قبول از 1 (کوچکترین) تا 7 (بزرگترین) می باشد. اندازه ی فونت پیش فرض 3 می باشد.

مثال:

آموزش طراحی سایت

نمونه یک

<font size="1">Font size="1"</font><br>

<font size="2">Font size="2"</font><br>

<font size="3">Font size="3"</font><br>

اندازه ی فونت مربوط

شما می توانید مشخص کنید چه تعداد از فونت ها بزرگتر و چه تعداد کوچکتر از اندازه ی فونت حاضر باشند. می توانید آن را مانند< font size="+n"> or < font size="-n"> مشخص کنید.

مثال:

نمونه دو

<font size="-1">Font size="-1"</font><br>

<font size="+1">Font size="+1"</font><br>

<font size="+2">Font size="+2"</font><br>

تنظیم ظاهر فونت

شما می توانید با استفاده از ویژگی face ظاهر فونت را تنظیم کنید، اما باید بدانید که اگر کاربر بازدیدکننده ی صفحه، فونت را نصب نکرده باشد، قادر به دیدن آن نخواهد بود. در عوض کاربر ظاهر فونت پیش فرض را می بیند که برای کامپیوترش مناسب می باشد.

مثال:

نمونه سه

<font face="Times New Roman" size="5">Times New Roman</font><br>

<font face="Verdana" size="5">Verdana</font><br>

<font face="Comic sans MS" size="5">Comic Sans MS</font><br>

تعیین ظاهر فونت جایگزین

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

< font face="arial,helvetica">

< font face="Lucida Calligraphy,Comic Sans MS,Lucida Console">

اگر هیچکدام از فونت های ارائه شده نصب نشده باشند، بنابراین فونت پیش فرض Times New Roman نمایش داده خواهد شد.

تنظیم رنگ فونت

شما می توانید با استفاده از ویژگی color هر رنگی رابرای فونت تنظیم کنید. شما می توانید رنگ مورد نظر خود را یا با استفاده از نام رنگ و یا با استفاده از کد هگزادسیمال برای آن رنگ تعیین کنید.

مثال:

نمونه چهار

<font color="#FF00FF">This text is in pink</font><br>

عنصر < basefont>

انتظار می رود که عنصر < basefont> یک اندازه، رنگ و ظاهر پیش فرض برای هر بخشی از داکیومنت که در برچسب < font>قرار نمی گیرند، تنظیم کند. شما می توانید از عناصر < font>استفاده کنید تا تنظیمات < basefont> را انجام دهید.
برچسب < basefont> همچنین ویژگی های رنگ، اندازه و ظاهر را می گیرد و با دادن مقدار بیشتر از 1+ برای فونت های بزرگتر و کمتر از 2- برای فونت های کوچکتر، تنظیمات فونت مربوطه را پشتیبانی می کند.

مثال:

نمونه پنج

<basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">

<p>This is the page's default font.</p>

<h2>Example of the <basefont> element<="" h2=""></basefont>></h2>

پایان بخش نهم آموزش طراحی سایت

آموزش طراحی سایت:ایجاد جدول

آموزش طراحی سایت:قسمت ششم

آموزش Table در HTML

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل آموزش HTML را شروع کردیم , در قسمت پنجم با ادامه آموزش HTML ( آموزش ساخت جدول ) همراه باشید:

آموزش Table در HTML

جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب < table> ایجاد می شوند که در آن برچسب < tr> برای ایجاد ردیف ها و برچسب < td> برای ایجاد داده های سلول ها استفاده می شوند.

مثال:

نمونه یک

<table border="1">

    <tbody>

        <tr>

            <td>Row 1, Column 1</td>

            <td>Row 1, Column 2</td>

        </tr>

    </tbody>

</table>

ویژگی های colspan و rowspan

اگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.

مثال:

نمونه سه

<p>Column 1 Column 2 Column 3 Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3 Row 2 Cell 2Row 2 Cell 3</p>

پس زمینه ی جدول

می توانید به دو روش زیر برای جدول خود زمینه ای تنظیم کنید.

• ویژگی Bg color: می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.
• ویژگی background: می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.

همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.

مثال:

نمونه چهار

<p>Column 1 Column 2 Column 3 Row 1 Cell 1Row 1 Cell 2Row 1 Cell 3 Row 2 Cell 2Row 2 Cell 3</p>

در اینجا مثالی در رابطه با استفاده از ویژگی background می بینید. در این مثال ما از تصویری موجود در image directory استفاده کرده ایم.

نمونه پنج

<table border="1">

<tbody>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

<td rowspan="2">Row 1 Cell 1</td>

<td>Row 1 Cell 2</td>

<td>Row 1 Cell 3</td>

</tr>

<tr>

<td>Row 2 Cell 2</td>

<td>Row 2 Cell 3</td>

</tr>

<tr>

<td colspan="3">Row 3 Cell 1</td>

</tr>

</tbody>

</table>

طول و عرض جدول

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

مثال:

نمونه شش

<p>Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2</p>

شرح جدول

برچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید HTML/XHTML توصیه می شود.

مثال آموزش طراحی سایت:

نمونه هفت

<table border="1" style="width:100%">

<caption>This is the caption</caption>

<tbody>

<tr>

<td>row 1, column 1</td>

<td>row 1, columnn 2</td>

</tr>

<tr>

<td>row 2, column 1</td>

<td>row 2, columnn 2</td>

</tr>

</tbody>

</table>

تیتر، بدنه و پاورقی جدول

جدول ها می توانند به سه بخش تقسیم شوند: تیتر، بدنه و پاورقی جدول. عنوان و فوت(tfoot) در واقع شبیه به تیتر و پاورقی در یک فایل پردازش word می باشند که برای هرصفحه یکی می باشد، در حالیکه بدنه همان نگه دارنده ی محتوای اصلی جدول می باشد.
سه عنصر برای مجزا کردن عنوان، بدنه و فوت در یک جدول عبارتند از

• < thead> - برای ایجاد یک تیتر مجزا
• < tbody>- برای نشان دادن بدنه ی اصلی جدول
• < tfoot> - برای ایجاد یک پاورقی مجزا در یک جدول

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

مثال:

نمونه هشت

<p>This is the head of the table This is the foot of the table Cell 1 Cell 2 Cell 3 Cell 4</p>

شما می توانید از یک جدول در داخل جدولی دیگر استفاده کنید. نه تنها جدول ها، بلکه می توانید تمام برچسب ها را در داخل برچسب داده ی استفاده کنید.

مثال:

در زیر مثالی را از استفاده ی یک جدول و برچسب های دیگر در داخل یک سلول مشاهده می کنید.

<a class="btn btn-danger" href="/Try/441/9" target="_blank">امتحان کنید</a><p> </p><p class="MsoNormal" style="unicode-bidi: embed; direction: rtl; margin: 0in 0in 10pt; line-height: 17pt;" dir="rtl"><span style="line-height: 18pt; mso-bidi-language: fa;" lang="FA"><span style="font-size: 12pt; color: #000000;"> <br></span></span></p><div class="row" style="padding-top: 10px;">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

<ul class="bookMoreInfo">

<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">

<span class="VisitCountHolder">

<span class="fa fa fa-eye"> </span>

<span id="BodyContent2_UVVisitCount1_VisitCountSeparator" class="VisitCountSeparator"> </span>

<span id="BodyContent2_UVVisitCount1_VisitCountCount" class="VisitCountNumber">1945</span>

</span>

</li>

<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">

<em class="fa fa-download"> </em>

<span id="BodyContent2_Lbl_dlcount">424</span>

</li>

<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">تاریخ ارسال:

<span id="BodyContent2_Lbl_createdate">1394/07/27</span>

</li>

</ul>

</div>

</div><div id="BodyContent2_dlPDF">

<div class="row" style="padding-top: 10px;">

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

<!--

.UserPassTable tr td {

text-align: right;

background-color: transparent !important;

color: #604e44;

}

.UserPassTable a {

color: #604e44 !important;

}

@media only screen and (max-width: 950px) {

.UserPassTable tr td {

display: block;

width: 100%;

padding-right: 5px;

}

.UserPassTable tr td::before, .UserPassTable tr td::after {

content: " " !important;

width: 0px;

}

table.UserPassTable td:nth-of-type(1)::before {

content: " " !important;

width: 0px;

}

.UserPassTable tr td:nth-child(2n+1), .UserPassTable tr:last-child td:nth-child(2) {

background-color: #239ead;

color: white;

}

.UserPassTable tr td:nth-child(2n), .UserPassTable tr:nth-child(3) td:nth-child(1) {

background-color: #f3f8fb;

color: black;

}

}

-->

</div></div></div><table style="width: 100%;" border="1">

<tbody><tr>

<td>

<table style="width: 100%;" border="1">

<tbody><tr>

<th>Name</th>

<th>Salary</th>

</tr>

<tr>

<td>Ramesh Raman</td>

<td>5000</td>

</tr>

<tr>

<td>Shabbir Hussein</td>

<td>7000</td>

</tr>

</tbody></table>

</td>

</tr>

</tbody></table><table class="table-striped table-bordered UserPassTable" style="width: 100% !important; margin: 0 !important;">

<tbody><tr>

<td class="text-center">

<em class="fa fa-download fa-2x text-center"> </em>

</td>

<td class="text-center">

<a id="BodyContent2_Lnk_dl" href="/UserControls/CNTDL.aspx?Type=ARTA&ID=441">

<span class="text-fa">دریافت این مقاله بصورت PDF</span>

</a>

<a id="BodyContent2_Lnk_source" href="/UserControls/CNTDL.aspx?Type=ARTS&ID=441">

<span class="text-fa">دریافت سورس کد مقاله</span>

</a>

</td>

</tr>

<tr>

<td colspan="2">

<br>

پس از دانلود فایل رمز آن را به دقت وارد نمایید .فایل ها دارای رمز عبور می باشند.

</td>

</tr>

<tr>

<td class="text-center">

<em class="fa fa-key fa-2x"> </em>

</td>

<td class="text-danger">tahlildadeh.com

یا

www.tahlildadeh.com

</td>

</tr>

</tbody></table>

<div class="ipShow">

</div>

پایان بخش ششم آموزش طراحی سایت

آموزش طراحی سایت|دوره آموزش طراحی سایت|آموزش HTML|

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل Canvas آشنا شدیم در قسمت سوم با با آموزش HTML همراه باشید:

آموزش تگ های اصلی در Html

برچسب های تیتر:

هر داکیومنت با یک تیتر آغاز می شود. شما می توانید از اندازه های مختلف برای تیترهای خود استفاده کنید. HTML دارای شش سطح می باشد که از< h1>, < h2>, < h3>, < h4>, < h5> و < h6> عناصر استفاده می کند. در هنگام نمایش هر تیتر مرور گر یک خط قبل و یک خط بعد از تیتر اضافه می کند.

نمونه یک

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

برچسب پاراگراف:

آموزش طراحی سایت

برچسب < p> به روش طراحی متن شما در پاراگراف های مختلف اشاره دارد. هر پاراگراف متن باید بین برچسب بازکننده ی < p> وبستن < /p> قرار بگیرد، همانطور که در مثال زیر مشاهده می کنید:

<p>This is some text in a paragraph.</p>

برچسب شکست لینک

هرزمان که شما از < br /> عنصر استفاده کنید، هر چیزی که آن را دنبال می کند از خط بعد شروع خواهد شد. این برچسب نمونه ای از یک عنصرempty می باشد، زمانی که لازم نیست برچسبی را باز کنید یا ببندید چرا که چیزی برای رفتن بین آنها وجود ندارد.
در بچسب < br />، یک فضای خالی بین کااکترهای br و اسلش جلوی آن وجود دارد. اگر شما این فضا را حذف کنید، مرورگرهای قدیمی تر در اجرای خط شکست مشکل خواهند داشت، در حالیکه اگر اسلش را حذف کنید برچسب < br> باقیمانده در HTML معتبر نمی باشد.

نمونه سه

This text contains<br>a line break.

مرکزگذاری متن

می توانید با استفاده از برچسب < center> می توانید هر محتوایی را در مرکز صفحه یا در مرکز هر سلول از یک جدول قرار دهید.

خطوط افقی

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

<p>This is paragraph one and should be on top</p>

<hr>

<p>This is paragraph two and should be at bottom</p>

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

حفظ طراحی

گاهی اوقات تمایل دارید که متن فرمت دقیق خود در HTML را دنبال کند، در این موارد می توانید از برچسب پریفرمت < pre> استفاده کنید.
هر متن بین برچسب باز کننده ی < pre> و برچسب بستن < /pre> طراحی متن منبع را حفظ خواهد کرد.

Text in a pre element

is displayed in a fixed-width

font, and it preserves

both spaces and

line breaks

سعی کنید از همان کد بدون نگهداری آن بین برچسب های < pre>...< /pre> استفاده کنید.

آموزش طراحی سایت

فضاهای غیرشکست:

فرض کنید می خواهید از عبارت "12 Angry Men." استفاده کنید. در اینجا از مرورگر نمی خواهید عبارت را بین دو خط به صورت 12 Angry و Men بشکند.

An example of this technique appears in the movie "12 Angry Men."

در مواردی که نمی خواهید مرورگر متن را بشکند باید به جای یک فضای عادی از فضای غیر شکست استفاده کنید. برای مثال وقتی "12 Angry Men" را در یک پاراگراف کدگذاری می کنید باید از کدی مانند زیر استفاده کنید:

<p>An example of this technique appears in the movie "12 Angry Men."</p>

عناصر در HTML

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

نابراین در اینجا< p>....< /p> یک عنصر HTML و< h1>...< /h1> عنصر دیگری از HTML می باشد. عناصری از HTML وجود دارند که نیازی به بسته شدن ندارند مانند < img... />, < hr /> و< br /> . این عناصر با عنوان void elements (عناصر خالی) شناخته می شوند.
داکیومنت های HTML دارای درختی از این عناصر می باشند و مشخص می کنند که چگونه داکیومنت ها باید ساخته شوند و چه نوع محتوایی باید در چه بخشی از داکیومنت HTML قرار بگیرد.

برچسب HTML در مقابل عنصر

یک عنصر HTML به وسیله ی یک برچسب شروع کننده تعریف می شود. اگر عنصر دارای محتوای دیگری باشد با یک برچسب بستن تمام می شود.
برای مثال< p> برچسب شروع کننده ی یک پاراگراف می باشد و< /p> برچسب بستن همان پاراگراف می باشد، اما < p>This is paragraph< /p> عنصر یک پاراگراف می باشد.

عناصر تو در توی HTML

نگهداری یک عنصر HTML در داخل عنصر دیگر بسیار متداول می باشد.

<title>Nested Elements Example </title>

<h1>This is<i>italic</i> heading</h1>

آموزش Attributeها در HTML-آموزش HTML

ویژگی های زبان HTML

در این مبحث از آموزش های HTML می خواهیم به بررسی برخی از ویژگی های زبان HTML بپردازیم:
برخی از برچسب های HTML مانند برچسب های تیتر و برچسب های پاراگراف، و موارد استفاده ی آنها را مشاهده کردیم. تاکنون از آنها به ساده ترین شکل خود استفاده کرده ایم، اما بیشتر برچسب های HTML می توانند ویژگی هایی داشته باشند که مقداری اطلاعات اضافه می باشد.
یک attribute برای تعریف ویژگی های عنصر HTML استفاده می شود و در داخل برچسب بازکننده ی عنصر قرار می گیرد. همه ی ویژگی ها از دو بخش تشکیل شده اند: name و value.

• Name ویژگی مورد نظر شما برای تنظیم میباشد، به عنوان مثال عنصر پاراگرافp> > در مثال ارائه شده دارای ویژگی می باشد که نام آن align می باشد و شما می توانید از آن برای تنظیم پاراگراف در صفحه استفاده کنید.
• Value همان است که شما می خواهید مقدار ویژگی تنظیم شود و همیشه در داخل گیومه قرار می دهید. مثال زیر سه مقدار ممکن ازیک ویژگی تراز را نشان می دهد: چپ، مرکز و راست.

ویژگی نام ها و ویژگی مقادیر غیرهوشمند می باشند. به هرحال وب جهانی Consortium (W3C) مقادیر ویژگی ها را در HTML 4 با حروف کوچک پیشنهاد می دهد.

مثال:

<title>Align Attribute Example</title>

<p align="left">This is left aligned</p>

<p align="center">This is center aligned</p>

ویژگی های اصلی

چهار ویژگی اصلی که می توانند در اکثر عناصر HTML مورد استفاده قرار بگیرند عبارتند از:

• id
• title
• class
• style

ویژگی id

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

• اگر یک عنصر یک ویژگی را به عنوان تشخیص دهنده ی منحصر به فرد استفاده می کند شناخت تنها آن عنصر و محتوای مربوط به آن ممکن می باشد.
• اگر دارای دو عنصر هم نام در یک صفحه ی وب می باشید، می توانید از عنصر id برای تشخیص این عناصر هم نام استفاده کنید.

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

<p id="html">This para explains what is HTML</p>

<p id="css">This para explains what is Cascading Style Sheet</p>

آموزش طراحی سایت

ویژگی title:

این ویژگی یک تیتر پیشنهادی برای عنصر ارائه می دهد. ترکیب مربوط به ویژگی title شبیه به ترکیب توضیح داده شده برای ویژگی id می باشد. رفتار این ویژگی بستگی به عنصری دارد که آن را حمل می کند، گرچه اغلب اوقات وقتی مکان نما روی عنصر قرار می گیرد یا عنصر در حال بارگذاری می باشد، با عنوان یک راهنمای ابزار(tooltip) نمایش داده می شود.

<title>The title Attribute Example</title>

<h3 title="Hello HTML!">Titled Heading Tag </h3>

اکنون سعی کنید مکان نما را روی "Titled Heading Tag Example" بیاورید، خواهید دید که هر تیتری که در کد خود استفاده کرده اید، مانند یک راهنمای ابزار نمایش داده خواهد شد.

ویژگی class:

این ویژگی برای برقراری ارتباط بین یک عنصر با یک صفحه ی طراحی استفاده می شود و گروه عنصر را مشخص می کند. وقتی که را یاد بگیرید Cascading Style Sheet (CSS) در مورد این ویژگی بیشتر فرا خواهید گرفت. اکنون تا همین حد کافیست.
مقدار ویژگی نیز ممکن است لیستی از فضاهای مجزای نام های گروه باشد، برای مثال:

class="className1 className2 className3"

ویژگی style

این ویژگی به شما اجازه می دهد تا قوانین CSS را در داخل عنصر مشخص کنید.

<title>The style Attribute</title>

<p style="font-family:arial; color:#FF0000;">Some </p>

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

آموزش طراحی سایت

درونی کردن ویژگی ها

سه ویژگی درونی وجود دارند که برای اکثر عناصر HTML استفاده می شوند:

• dir
• lang
• xml:lang

ویژگی dir

این ویژگی به شما اجازه می دهد تا مسیری را به مرورگر نشان دهید که متن در آن باید جریان داشته باشد. ویژگی dir می تواند یکی از دو مقدار باشد، همانطور که در جدول زیر نشان داده شده است:

<title>Display Directions</title>

This is how IE 5 renders right-to-left directed text.

وقتی که ویژگی dir در داخل برچسب html> > استفاده می شود، مشخص می کند که چگونه متن در کل داکیومنت نمایش داده می شود. وقتی در برچسب دیگری مورد استفاده قرار بگیرد، مسیر متن را برای محتوای مربوط به آن برچسب کنترل می کند.
ویژگی lang: این ویژگی به شما کمک می کند تا زبان اصلی استفاده شده در یک داکیومنت را نشان دهید، اما این ویژگی فقط برای سازگاری معکوس با ورژن های قدیمی تر HTML در HTML حفظ شده است. این ویژگی به وسیله ی ویژگی xml:lang در داکیومنت های جدید HTML جایگزین شده است.
مقادیر ویژگی lang کدهای دو کاراکتری زبان استاندارد ISO-639 می باشند. HTML Language Codes: ISO 639 را برای لیست کاملی از کدهای زبان چک کنید.

<title>English Language Page</title>

This page is using English Language

ویژگی xml:lang

این ویژگی جایگزین xhtml برای ویژگی lang می باشد. مقدار ویژگی xml:lang باید یک کد ISO-639 می باشد، همانطور که در بخش قبل بیان شد.

ویژگی های عمومی

در اینجا جدولی را می بینید که برخی دیگر از ویژگی هایی که در برچسب های HTML مفید می باشند،را نشان می دهد.

آموزش قالب بندی در HTML-آموزش HTML

در ادامه مباحث آموزشی HTML قبل، می خواهیم ببینیم چه آیتم هایی در format دادن و قالب بندی صفحات HTML مورد نیاز ما هستند.
اگر با پردازشگر word کار می کنید باید با بولد کردن (bold)، ایتالیک کردن و آندرلاین کردن متن آشنا باشید. این ها فقط سه گزینه از ده گزینه موجود برای چگونگی ظاهر شدن متن در HTML و XHTML می باشند.

بولد کردن متن

هرچیزی که بین عناصر< b>...< /b> قرار می گیرد به صورت بولد ظاهر می شود، مانند مثال زیر:

<p>This text is normal.</p>

<p><b>This text is bold</b>.</p>

<p>The following word uses a <b>bold</b> </p>

ایتالیک کردن متن

هر چیزی که بین عناصر< i>...< /i>قرار بگیرد به صورت ایتالیک ظاهر می شود، مانند مثال زیر:

<p>This text is normal.</p>

<p><i>This text is italic</i>.</p>

<p>The following word uses a <i>italicized</i> </p>

آموزش طراحی سایت

آندرلاین کردن متن

هر چیزی که بین عناصر < u>...< /u> قرار بگیرد به صورت آندرلاین ظاهر می شود، مانند مثال زیر:

<p>This is a <u>parragraph</u>.</p>

<p>The following word uses a <u>underlined</u> typeface.</p>

خط کشیدن روی متن

هر چیزی که بین گزینه های < strike>...< /strike> قرار بگیرد، با یک strikethrough نمایش داده می شود که خط باریکی می باشد که روی متن کشیده می شود، همانطور که در مثال زیر مشاهده می کنید:

<p>Version 2.0 is <strike>not yet available!</strike> now available!</p>

فونت monospaced

محتوای عنصر < tt>...< /tt> به فونت monospaced نوشته می شود. اکثر فونت ها با عنوان فونت هایی با عرض متغیر شناخته شده اند، زیرا حروف مختلف دارای عرضهای مختلف هستند ( به عنوان مثال حرف m عریض تر از حرف I می باشد.) به هرحال در فونت monospaced تمام حروف دارای عرض یکسان می باشند.

<p><tt>Teletype text</tt></p>

متن superscript ( چاپ شده در بالا)

محتوای عنصر < sup>...< /sup> در بالا نوشته می شود، فونت استفاده شده برای آن همان فونت کاراکترهای اطراف آن می باشد، اما به اندازه ی نصف یک کاراکتر بالاتر از دیگر کاراکترها نمایش داده می شود.

<p>This is ^{superscripted} text.</p>

متن subscript (چاپ شده در زیر)

محتوای عنصر< sub>...< /sub> در زیر نوشته می شود. اندازه ی فونت استفاده شده برای آن به اندازه ی فونت کاراکترهای اطراف می باشد اما به اندازه ی نصف ارتفاع یک کاراکتر زیر کاراکترهای دیگر نمایش داده می شود.

<p>This is _subscripted text.</p>

متن مندرج

هرچیزی که بین عنصر ... قرار بگیرد به عنوان متن مندرج نمایش داده می شود.

<p>My favorite <ins>color</ins> is red.</p>

متن حذف شده

هر چیزی که بین عنصر < del>...< /del> ظاهر شود با عنوان یک متن حذف شده نمایش داده می شود.

<p>My favorite color is <del>blue</del> red.</p>

متن بزرگتر

محتوای عنصر < big>...< /big> اندازه فونت را بزرگتر از متن اطراف نشان می دهد. مانند مثال زیر:

<p><big>Bigger text</big></p>

متن کوچکتر

محتوای عنصر < small>...< /small> متن را یک سایز کوچکتر از متن اطراف آن نشان می دهد، مانند مثال زیر:

<h2>HTML <small>Small</small> Formatting</h2>

گروه بندی محتوا

عناصر< div>و < span> به شما اجازه می دهند تا برای ایجاد بخش ها و یا زیرمجموعه های یک صفحه، عناصر زیادی را با یکدیگر گروه بندی کنید.
برای مثال ممکن است تمایل داشته باشید که تمام پاورقی ها را در یک صفحه در داخل عنصر < div> قرار دهید تا نشان دهید که تمام عناصر موجود در آن عنصر مربوط به پاورقی می باشند. پس از آن ممکن است طرحی را به عنصر< div> ضمیمه کنید، طوریکه با استفاده از مجموعه ای از قوانین طراحی ظاهر شوند.

<div style="color:#0000FF">

<h3>This is a heading</h3>

<p>This is a paragraph.</p>

</div>

از طرف دیگر عنصر < span> فقط می تواند برای گروه بندی داخل خطی عناصر استفاده شود. بنابراین اگر بخشی از جمله یا پاراگراف را دارید که می خواهید با هم در یک گروه قرار دهید، می توانید از عنصر < span> مانند زیر استفاده کنید:

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

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

پایان بخش چهارم آموزش طراحی سایت

آموزش طراحی سایت|دوره آموزش طراحی سایت:قسمت سوم|

سلام با آموزش طراحی سایت در خدمت شما هستیم , در قسمت قبل با مفاهیم Canvas آشنا شدیم در قسمت سوم با ادامه canvas همراه من باشید

آموزش طراحی سایت

بوم نقاشی: تصویر

کشیدن خط یا اشکال ساده خسته کننده می باشد، اجازه بدهید چند تصویر طراحی کنیم.
در نمایش بالا فقط از کانتکست روش drawimage() استفاده کردم. به هرحال این روش می تواند 3، 5 و یا 9 استدلال داشته باشد. من سه عملکرد دارم که عبارتند از draw dragon (کشیدن اژدها)، draw smaller dragon (کشیدن اژدهای کوچکتر) و draw dragon head (کشیدن سر اژدها) و هرکدام از آنها 3،5 و 9 استدلال مربوطه را دنبال می کنند.

بوم نقاشی: تصویر

در اینجا کد نمایش اژدها را مشاهده می کنید.

‎<div>

<canvas id="c5" width="600" height="300" style="border:solid 1px #000000;"></canvas>

‎<div>

‎<button ="draw_dragon();return true;">Draw Dragon</button>

‎<button ="draw_smaller_dragon();return true;">Draw smaller dragon</button>

‎<button ="draw_dragon_head();return true;">Draw Dragon Head</button>

‎<button ="Clear_image();return true;">Erase Everything</button>

</div>

‎</div>

var c5 = document.getElementById("c5");

var c5_context = c5.getContext("2d");

‎ var dragon = new Image();

dragon.src = 'images/chinese_dragon.png';

‎ function draw_dragon() {

c5_context.drawImage(dragon, 100, 5);

‎}

‎ function draw_smaller_dragon() {

c5_context.drawImage(dragon, 10, 5, 58, 100);

‎}

‎ function draw_dragon_head() {

c5_context.drawImage(dragon, 0, 19, 69, 97, 300, 100, 103, 145);

‎}

‎ function Clear_image() {

c5_context.clearRect(1, 1, 600, 300);

‎}

‎‎

آموزش کن وس Text در HTML:

بوم نقاشی: متن

چگونه متن را در بوم نقاشی اجرا کنیم؟
کلمات جادویی برای چاپ متن در بوم نقاشی عبارتند از Fillstyle، Strokestyle، Font، TextBaseline و در انتها filltext و stroketext.

<div>

<canvas id="c6" width="600" height="200" style="border:solid 1px #000000;"></canvas>

<div>

<button ="showFillText();return true;">Fill Text</button>

<button ="showStrokeText();return true;">Stroke Text</button>

<button ="Clear_text();return true;">Erase Everything</button>

</div>

</div>

‎

var c6 = document.getElementById("c6");

var c6_context = c6.getContext("2d");

function showFillText() {

c6_context.fillStyle = '#f00';

c6_context.font = 'italic bold 30px sans-serif';

c6_context.textBaseline = 'bottom';

c6_context.fillText('HTML5 is cool!', 50, 100);

‎}

‎ function showStrokeText() {

c6_context.strokeStyle = "#003300";

c6_context.font = '40px san-serif';

c6_context.textBaseline = 'bottom';

c6_context.strokeText('HTML5 is cool?', 300, 100);

‎}

‎ function Clear_text() {

c6_context.clearRect(1, 1, 600, 300);

‎}

‎

بوم نقاشی: متن

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

در اینجا یک خط خاکستری در y=100 کشیده ام و قصد دارم هر لغت را در y=100 قرار دهم، اما با استفاده از textbaseline متفاوت.
در مورد نگارش، فایرفاکس هیچگونه پشتیبانی روی خط پایه ی hanging ندارد.

c7_context.textBaseline = "top";

c7_context.fillText('Top', 5, 100);

‎ c7_context.textBaseline = "bottom";

c7_context.fillText('Bottom', 80, 100);

‎ c7_context.textBaseline = "middle";

c7_context.fillText('Middle', 200, 100);

‎ c7_context.textBaseline = "alphabetic";

c7_context.fillText('Alphabetic', 300, 100);

‎ c7_context.textBaseline = "hanging";

c7_context.fillText('Hanging', 400, 100);

اگر قصد دارید چیزی را در بوم نقاشی گسترش دهید و تمایل به پشتیبانی یوزرهایی داشتید که از IE8 یا پایین تر استفاده می کنند، می توانید از یک جاوا اسکریپت با منبع آزاد به نام ExplorerCanvas استفاده کنید. اما در جریان باشید که وجود مسایل غیریکنواختی ممکن است باعث عصبانیت شما بشوند.
باز هم این معرفی مختصری از بوم نقاشی HTML5 بود. هنوز ویژگی های جالب دیگری در مورد این بوم نقاشی وجود دارد که باید در مورد آنها بیشتر بدانید.

آموزش رابط Canvas در HTML

کن واس Canvas یک تگ HTML (< canvas >) است که از طریق آن می‌توانیم با استفاده از Canvas API به طراحی و نقاشی بپردازیم.

ایجاد Canvas

انجام این کار بسیار ساده است و تنها کافی است که < canvas >< /canvas > را داخل یک فایل HTML خالی بی اندازید.

در حال حاضر در این صفحه چیزی نمی‌بینید، چرا که این canvas یک عنصر نامرئی است. مقداری حاشیه به آن اضافه کنید.

آموزش طراحی سایت

کروم به‌صورت خودکار به عنصر body یک حاشیه‌ی 8 پیکسلی اضافه می‌کند. به همین خاطر است که حاشیه‌ی ما شبیه به یک کادر شده است. با تنظیمات زیر می‌توانید حاشیه‌ی کروم را حذف کنید.

body {

margin: 0;

}

فعلاً کاری به تنظیمات پیش‌فرض نداریم.
حالا می‌توانیم از طریق جاوا اسکریپت و با استفاده از DOM Selectors API به canvas خود دسترسی پیدا کنیم. بنابراین می‌توانیم از ()document.querySelector استفاده کنیم.

const canvas = document.querySelector('canvas')

تغییر رنگ پس‌زمینه‌ی canvas

این کار در CSS انجام می‌شود:

canvas {

border: 1px solid black;

width: 100%;

height: 100%;

}

و از این طریق canvas تا حدی بزرگ می‌شود که کل اندازه‌ی عنصر خارجی را پر کند.

اگر canvas خود را به‌عنوان یک عنصر سطح اول در HTML قرار دهید، در این صورت کد بالا باعث می‌شود که این canvas تا حدی که کل بدنه را پر کند، بزرگ شود.

در حال حاضر بدنه، کل اندازه‌ی پنجره را پر نکرده است. برای این‌که کل صفحه پر شود، باید از جاوا اسکریپت استفاده کنیم.

canvas.width = window.innerWidth

canvas.height = window.innerHeight

حالا اگر حاشیه‌ی بدنه را حذف کنید و پس‌زمینه‌ی canvas را با استفاده از CSS تنظیم کنید، canvas کل صفحه را پر می‌کند و می‌توانیم بر روی آن طراحی و نقاشی کنیم.

اگر اندازه‌ی پنجره عوض شد، ما باید عرض canvas را هم مجدداً محاسبه کنیم که این کار جهت جلوگیری از فراخوانی رویداد تغییر اندازه‌ی canvas با استفاده از debounce انجام می‌شود (رویداد resize را با هر بار حرکت پنجره از طریق موس، می‌توان صدها بار فراخوانی کرد)، برای مثال:

const debounce = (func) => {

let timer

return (event) => {

if (timer) { clearTimeout(timer) }

timer = setTimeout(func, 100, event)

}

}

window.addEventListener('resize', debounce(() => {

canvas.width = window.innerWidth

canvas.height = window.innerHeight

}))

آموزش طراحی سایت

دریافت زمینه از canvas

برای ترسیم در canvas باید یک زمینه داشته باشیم:

const c = canvas.getContext('2d')

برخی زمینه را به متغیری به نام c و برخی دیگر به ctx تخصیص می‌دهند، که هر دوی آن‌ها روشی رایج برای مخفف کردن زمینه (context) است.
متد getContext() یک زمینه‌ی طراحی را در canvas برگشت می‌دهد که این کار بر اساس نوع پارامتر عبوری مشخص می‌شود.
مقادیر معتبر را می‌توانید در زیر مشاهده کنید:

• 2d: مقداری که ما از آن استفاده خواهیم کرد.
• webgl : جهت استفاده از نسخه‌ی یک WebGL کاربرد دارد.
• webgl2 : جهت استفاده از نسخه‌ی دو WebGL کاربرد دارد.
• bitmaprenderer : از آن می‌توان در کنار ImageBitmap استفاده کرد.

بر اساس نوع زمینه می‌توانید پارامتر دومی را نیز به getContext() بدهید تا مشخصات بیشتری را تعیین کنید.

برای زمینه‌ی 2d ما اساساً یک پارامتر داریم و می‌توانیم از آن در تمامی مرورگرها استفاده کنیم. این پارامتر alpha نام دارد، یک پارامتر بولی است و مقدار آن به‌صورت پیش‌فرض true است. اگر مقدار آن بر روی false تنظیم شود، مرورگر می‌فهمد که canvas پس‌زمینه‌ی شفافی ندارد و بنابراین می‌تواند سرعت رندر را افزایش دهد.

ترسیم عناصر در canvas

حالا با کمک زمینه‌های بالا می‌توانیم عناصر مورد نظر خود را ترسیم کنیم.

روش‌های زیادی برای انجام این کار وجود دارد که می‌توانیم با کمک آن‌ها عناصر زیر را ترسیم کنیم:

• متن
• خطوط
• مستطیل
• مسیر
• تصویر

و می‌توانیم fill، stroke، gradient، pattern و shadow هر یک از آن‌ها را تغییر دهیم. همچنین می‌توانیم آن‌ها را بچرخانیم، مقیاس آن‌ها را تغییر دهیم و ... .
بیایید کار خود را با یک مستطیل که ساده‌ترین عنصر است شروع کنیم. برای انجام این کار از متد fillRect(x, y, width, height) استفاده می‌کنیم.

c.fillRect(100, 100, 100, 100)

این کار باعث می‌شود یک مستطیل سیاه‌رنگ 100 پیکسل در 100 پیکسل کشیده شود که موقعیت افقی و عمودی آن هر دو 100 است.

با استفاده از متد fillStyle() می‌توانید این مستطیل را رنگ کنید. برای انجام این کار تنها کافی است یکی از رشته‌های رنگ معتبر CSS را در این متد عبور دهید.

c.fillStyle = 'white'

c.fillRect(100, 100, 100, 100)

حالا می‌توانید با کمک خلاقیت خود، چیزهای بسیاری را ترسیم کنید.

for (let i = 0; i < 60; i++) {

for (let j = 0; j < 60; j++) {

c.fillStyle = `rgb(${i * 5}, ${j * 5}, ${(i+j) * 50})`

c.fillRect(j * 20, i * 20, 10, 10)

}

}

for (let i = 0; i < 60; i++) {

for (let j = 0; j < 60; j++) {

c.fillStyle = `rgb($ {i * 5}, $ {j * 5}, $ {(i+j) * 50})`

c.fillRect(j * 20, i * 20, 20, 20)

}

}

آموزش طراحی سایت

ترسیم عناصر

همان‌طور که قبلاً نیز اشاره کردیم، می‌توانید عناصر زیر را ترسیم کنید:

• متن
• خطوط
• مستطیل
• مسیر
• تصویر

صرفاً برای آن‌که کلیت کار مشخص شود، به مستطیل و متن می‌پردازیم.

تغییر رنگ

جهت تغییر fill و stroke رنگ‌ها و اشکال می‌توانید از مشخصه‌های fillStyle و strokeStyle استفاده کنید. این مشخصه‌ها تمامی رنگ‌های معتبر CSS ازجمله رشته‌ها و اعداد RGB را می‌پذیرند.

c.strokeStyle = `rgb(255, 255, 255)`

c.fillStyle = `white`

مستطیل

• clearRect(x, y, width, height)
• fillRect(x, y, width, height)
• strokeRect(x, y, width, height)

در بخش قبل با fillRect() آشنا شدیم. strokeRect() نیز از نظر اسم شبیه به آن است اما به‌جای پر کردن مستطیل، صرفاً با استفاده از سبک stroke فعلی، stroke مستطیل را ترسیم می‌کند (که آن را می‌توان با استفاده از ویژگی زمینه‌ی strokeStyle تغییر داد).

const c = canvas.getContext('2d')

for (let i = 0; i < 61; i++) {

for (let j = 0; j < 61; j++) {

c.strokeStyle = `rgb($ {i * 5}, $ {j * 5}, $ {(i+j) * 50})`

c.strokeRect(j * 20, i * 20, 20, 20)

}

}

دستور ()clearRect پس‌زمینه‌ی ناحیه‌ای را حذف می‌کند.

متن

نوشتن متن شبیه به ترسیم مستطیل انجام می‌شود.
برای انجام این کار از دو روش زیر می‌توانید استفاده کنید:

• fillText(text, x, y)
• strokeText(text, x, y)

با استفاده از این دو روش می‌توانید متن خود را در canvas بنویسید.

X و y به پایین گوشه سمت چپ اشاره دارد.

می‌توانید خانواده‌ی فونت و اندازه را با استفاده از ویژگی font مربوط به canvas تغییر دهید.

c.font = '148px Courier New'

ویژگی‌های مربوط به متن دیگری نیز هستند که می‌توانید آن‌ها را تغییر دهید (* = پیش‌فرض):

• textAlign (start*, end, left, right, center)
• textBaseline (top, hanging, middle, alphabetic*, ideographic, bottom)
• direction (ltr, rtl, inherit*)

دوره آموزش طراحی سایت

خطوط

برای آن‌که بتوانید خطی را بکشید، ابتدا باید متد beginPath() را فراخوانی کنید، پس از آن با استفاده از moveTo(x, y) نقطه‌ی آغازینی را مشخص کنید و سپس برای قرار دادن این خط بر روی مختصات جدید lineTo(x, y) را فراخوانی کنید و در نهایت stroke() را فراخوانی کنید.

c.beginPath()

c.moveTo(10, 10)

c.lineTo(300, 300)

c.stroke()

این خط بر اساس مقدار ویژگی c.strokeStyle رنگ خواهد شد.

مثال پیچیده‌تر

این کد canvas ای را ایجاد می‌کند که حاوی 800 دایره است.

هر دایره به‌خوبی در این canvas قرار گرفته و شعاع آن به‌صورت تصادفی انتخاب شده است.
هر زمان ‌که بخواهید اندازه‌ی این پنجره را تغییر دهید، این عناصر مجدداً تولید می‌شوند.
در Codepen می‌توانید با آن بازی کنید.

const canvas = document.querySelector('canvas')

canvas.width = window.innerWidth

canvas.height = window.innerHeight

const c = canvas.getContext('2d')

const circlesCount = 800

const colorArray = [

'#046975',

'#2EA1D4',

'#3BCC2A',

'#FFDF59',

'#FF1D47'

]

const debounce = (func) => {

let timer

return (event) => {

if (timer) { clearTimeout(timer) }

timer = setTimeout(func, 100, event)

}

}

window.addEventListener('resize', debounce(() => {

canvas.width = window.innerWidth

canvas.height = window.innerHeight

init()

}))

const init = () => {

for (let i = 0; i < circlesCount; i++) {

const radius = Math.random() * 20 + 1

const x = Math.random() * (innerWidth - radius * 2) + radius

const y = Math.random() * (innerHeight - radius * 2) + radius

const dx = (Math.random() - 0.5) * 2

const dy = (Math.random() - 0.5) * 2

const circle = new Circle(x, y, dx, dy, radius)

circle.draw()

}

}

const Circle = function(x, y, dx, dy, radius) {

this.x = x

this.y = y

this.dx = dx

this.dy = dy

this.radius = radius

this.minRadius = radius

this.color = colorArray[Math.floor(Math.random() * colorArray.length)]

this.draw = function() {

c.beginPath()

c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)

c.strokeStyle = 'black'

c.stroke()

c.fillStyle = this.color

c.fill()

}

}

init()

مثال دیگر: متحرک‌سازی عناصر در canvas

بر اساس مثال بالا می‌توانیم با استفاده از یک حلقه این عناصر را متحرک کنیم. هر دایره عمر مخصوص به خود را دارد و داخل حاشیه‌های canvas حرکت می‌کند. زمانی که دایره به حاشیه برخورد می‌کند، مسیرش عوض می‌شود.

این کار از طریق requestAnimationFrame() انجام می‌شود و در هر فریم با رندر کردن حلقه‌ی تکرار تصویر را کمی حرکت می‌دهد.

تعامل با عناصر در canvas

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

شیوه‌ی کارکرد این قابلیت به چه صورت است؟ در واقع کار ردیابی موقعیت موس از طریق دو متغیر انجام می‌شود.

let mousex = undefined

let mousey = undefined

window.addEventListener('mousemove', (e) => {

mousex = e.x

mousey = e.y

})

سپس از این متغیرها در متد update() مربوط به Circle استفاده می‌کنیم تا مشخص شود که شعاع باید افزایش یابد یا کاهش.

if (mousex - this.x < distanceFromMouse && mousex - this.x > -distanceFromMouse && mousey - this.y < distanceFromMouse && mousey - this.y > -distanceFromMouse) {

if (this.radius < maxRadius) this.radius += 1

} else {

if (this.radius > this.minRadius) this.radius -= 1

}

distanceFromMouse مقداری برحسب پیکسل است (در اینجا برابر با 200 است) که مشخص می‌کند تا چه فاصله‌ای دایره‌ها باید به موس واکنش نشان دهند.

عملکرد

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

در این لینک می‌توانید فهرستی از نکات عملکردی را مشاهده کنید.

حرف آخر

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

پایان بخش سوم آموزش طراحی سایت