تورج امین فر

1397بهار و تابستان }

جزوه کالس

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

3

: مقدمه

کامپیوتر چیست ؟

می کامپیوتر دستگاهی هست که داده هایی را دریافت می کند و عملیاتی را انجام داده و خروجی

.دهد

: شبکه

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

.می باشندچهار نوع از شبکه ها شامل

: شبکه کامپیوتری

.تعدادی کامپیوتر که با هم ارتباط دارند

.اینترنت بزرگترین شبکه کامپیوتری جهان است

4

: تعاریف پایه

:

.ندبه هر صفحه اینترنتی که می تواند شامل متن ، عکس ، ویدئو ، فایل صوتی باشد گوی

:

.ها که باهم مرتبط هستندمجموعه ای از

: یا آدرس

: پروتکل

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

.باشدhtmlصفحه حتما باید در قالب : قانون اول : httpبرای مثال پروتکل

.برای مشاهده حتما باید از یک مرورگر استفاده شود: قانون دوم

:

.می باشدشبکه جهانی وب معنی به و مخفف

:

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

.دارد

:مرورگر یا

.استفاده می گرددنرم افزاری که برای نمایش

را فرا نیاز است که ما در گام اول زبان نشانه گزاری لذا با تعاریف فوق برای کار با پروتکل

.بگیریم

5

.قرار می گیرندتنظیمات، داخل تگ

و هر آنچه که محتوا، داخل تگ

.نمایش داده می شود قرار می گیرند

HTML مخففHyperText Markup Languageمی باشد.

HTMLزبان نشانه گزاری فرا متنی می باشد که با تگ ها کار می کند.

HTMLکامپایل و تفسیر نمی شود.

HTMLاغلب از یکسری زوج تگ باز و بسته تشکیل گردیده است.

.را حتما باید با حروف کوچک بنویسیمکد : نکته اول

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

.این الزامات کدنویسی استاندارد ، برای کار تیمی در پروژه های تیمی می باشد: نکته سوم

.شامل تعدادی عناصر یا تگ می باشدیک صفحه : چهارم نکته

: ویرایشگر صفحات

.می باشددر سیستم عامل ویندوز ، نرم افزار ادیتور یا ویرایشگر صفحات

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

برای نمایش درست نوشته های فارسی قرار می دهیم ، را روی ذخیره

.می باشد

روی کیبورد و برای جهش به برای جهش به ابتدای سند از دکمه های در : پنجم نکته

.استفاده می نماییمانتهای سند از دکمه های

6

: ساختار

:ویژگی تگ ها

طراحی که به طراح سایت امکان تنوع و انتخاب بیشتری موقعهستند یکسری ویژگی ها دارای هایاکثر تگ

.نمایدیک عملکرد خاص از تگ رو ارائه میتواند هر ویژگی با مقدار میدهند لذا سایت

: عنوان سایت با تگ

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

عنوان سایت

نخواهدمرورگرداخلصفحهنمایشدرتاثیریهیچHTMLکدهایدراینترواسپیسکهباشدمیمعنابدیندر:اولنکته

.داشت

.دکمه اسکرین شات را روی کیبورد باهم فشار دهید+ در ویندوز دکمه های ، دکمه ویندوز اسکرین شات برای گرفتن : نکته دوم

.سانتیمتر فضا ایجاد خواهد نمود1/27هر بار که دکمه تب را فشار دهید به انداز هشت کاراکتر یا نیم اینچ یا : نکته سوم

:برای تیترگزاری هدینگ تگ های

تگ با تیتر گزاری و نوشتن عنوان

: درج پاراگراف با تگ

.از خصوصیات تگ پاراگراف ، ایجاد متن در سطر جدید می باشد

: تگ

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

: تگ

.سینگل تگی هست که باعث ایجاد یک خط افقی می گردد

>

7

: لیست ها

: سه مدل لیست داریم

: یا نامنظملیست

.برای ایجاد لیست های عالمت دار ، که بدون عدد و شماره می باشد

: یا منظم لیست

.شماره دار می باشدبرای ایجاد لیست های

Unordered List• Item• Item• Item• Item

Ordered List1. First item2. Second item3. Third item4. Fourth item

Description ListCoffee

black hot drinkMilk

white cold drink

•

•

•

: تگ

می تعریف سایت بندی و بخش بندی به معنی تقسیم کردن می باشد لذا ما برای قالب

.کنیم

.این تگ از مهمترین و کاربردی ترین تگ ها در طراحی سایت می باشد

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

تگ به صورت پیشفرض همه مقادیر خاصیت هایش صفر می باشد پس در صورتی که ازتگ

به تگ بدون استایل های سی اس اس اتفاده کنیم هیچی نمایش داده نمی شود و برای استایل دادن

.استفاده کنیمباید از دستورات

: یا

اهر سی اس اس لیستی از دستورات در قالب متن است که برای تنظیمات عناصر و تغییر در ظ

.استفاده می شودعناصر نوشته شده در صفحات

تنظیمات آن عناصر صورت عناصر را مشخص می کنیم و با در طراحی با : نکته

.می پذیرد

جود داشته به معنی قالب بندی و استایل بندی می باشد که تگ ها یا عناصر به چه شکلی وتنظیمات

.باشند

قرار می ;است و بعد از مقداردهی برای قاطی نشدن پراپرتی ها با یکدیگر آخر مقدار هر پراپرتی:بامقداردهی در

.دهیم

.وجود داشته باشدعناصریچه توسط

.وجود داشته باشدتنظیماتیچه توسط

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

تمرین تورج امین فر

200px

100px

: در روش های استفاده از

:به سه روش قابل دسترسی هستند فایل های

اس اس خارجی یا سی . 1

ترین حالت استفاده از سی اس اس می بهینه می کنیم که استفاده برای اعمال ویژگی ها و تنظیمات روی چندین صفحه از

.باشد

داخلی یا اس اس سی . 2

.برای یک صفحه ویژگی ها را می توان تعریف کرد

خطی یا سی اس اس درون . 3

.برای فقط یک مولفه می توان تعریف کرد

: نحوه ایجاد .را با دستورات سی اس اس مقدار دهی نمایید styleباید درون تگ مورد نظر ویژگی

: نحوه ایجاد .سی اس اس را وارد نماییددستورات styleو تگ headدرون تگالاچ تی ام صفحه درباید

: نحوه ایجادکد زیر با HTMLصفحه از headکرده سپس آن فایل را درون تگ ذخیره css.فرمت ابتدا یک فایل با نام دلخواه و با

.فراخوانی نمایید

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

یوند کننده نوع ارتباط بین صفحه جاری و صفحه مقصد پبه معنای تعیین Relationshipمخفف linkتگ در relویژگی

.است

نوع typeدر واقع ویژگی کندصفحه مقصد را مشخص می MIMEنوع فرمت فایل مقصد یا linkدر تگ typeویژگی

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

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

ویرایش یا ایجاد تغییر در نحوه نمایش یک بخش را برای شما آسان تر می سازد.

:

ها انتخابگرها یا

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

.هایی بدیم

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

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

.خواهند گرفتقرار } { خصوصیات و مقدار آنها بین دو گردند که سلکتور اعمال میخواهیم به

: معرفی انواع

همهانتخاب

گروهیانتخاب

یکیانتخاب

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

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

.اعمال می گرددرا انتخاب نماییم ، تنظیمات روی همه تگ های مثال اگر تگ

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

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

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

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

.اعمال می شود

:

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

.باشد

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

شارپ یا هشتگ در سی اس اس شروع می با می باشد ، در واقع #در سی اس اس IDنشانه

.شود

: قوانین اسم های یکسان نداشته باشند.

وسط اسم فاصله نباشد.

با عدد شروع نشود.

نباید استفاده کرد-از کاراکترهای خاص به جز.

13

:.برای استایل دهی به گروهی از تگ ها کاربرد دارد

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

.واقع به معنای استایل دهی به گروهی از عناصر سایت می باشد

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

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

.تواند به یک تگ تخصیص داده شود

اسپیسبا : استفاده از دو کالس یا بیشتر در یک تگ

داد و هم را هم می توان یک تگ : نکته

: پراپرتی

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

.است

.قرار دادن محتوا و تگ ها در کنار یکدیگر استفاده می شودبرای floatخاصیت از

ک برای یک تگ تعیین شد صرف نظر از نوع آن تگ ، آن عنصر شبیه به بالپس از اینکه

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

.شده باشدتعریف

: مقادیر

: پراپرتی

کار می به floatو برای کنترل خاصیت بوده floatبه خاصیت وابسته clearخاصیت

.رود

شناور floatدارایتگی تعریف شود این تگ در کنار تگ برای clearخاصیتاگر

.نخواهد شد

تگی که این استایل برای آن تخصیص یابد در سمت چپ صفحه یا در سمت چپ تگ پدر خود قرار

.خواهد گرفت

ود قرار تگی که این استایل برای آن تخصیص یابد در سمت راست صفحه یا در سمت راست تگ پدر خ

.می گیرد

مقدار پیشفرض هیچ

مقدار پیشفرض

.را بر روی تگ های دیگر از چپ از بین می بردfloat : leftتاثیر خاصیت

.از بین می برداز راست دیگررا بر روی تگ های float : rightتاثیر خاصیت

از بین می دیگر از دوطرف را بر روی تگ های float : rightو leftهردو خاصیت تاثیر

.برد

pتگنکنیم محتوای استفاده pتگبرای clearاین مثال اگر از خاصیت در : مثال محتوای clearکنار عکس قرار خواهد گرفت ولی در صورت استفاده از خاصیت در

.زیر عکس قرار خواهد گرفتدر pتگ

: معرفی خصوصیات

: ناحیه بندی خصوصیات

16

: دستور

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

. نام داردین فضای خالی بین محتوای یک عنصر و بوردر آن عنصر را تعیمقدار paddingخصوصیت

.می کند.پدینگ روی اندازه عنصر اثر می گزارد: نکته

از باال راست پایین چپ به صورت ساعتگردپدینگ چپفاصله بیست پیکسل از باال راست پایین

فاصله بیست پیکسل از باال

فاصله بیست پیکسل از راست

فاصله بیست پیکسل از پایین

فاصله بیست پیکسل از چپ

باکنیمترگبزرروسلولاینبخوایماگهکهداریمفرضیسلولیکبگمبهتریاداریمفرضیبلوکیکمادرواقعpaddingکنیممی.

paddingدستورمشابهcellpaddingتگدرtableبلوکپایینوباالوراستوچپبرایتوانمیکهباشدمی

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

وقتی بخواهیم متن از نظر عمودی در عنصری وسط قرار بگیرد باید به آن : نکته

.دهیم

پیکسل از باال 20فاصله پیکسل از راست 30 پیکسل از پایین40 پیکسل 70

چپاز

باال و پایین راست برای چپ و برای

: دستور

.بردر یعنی مرز درواقع یعنی خطی که دور عنصر هست

استایل بوردر

رنگ بوردر

.می توان برای جهت خاصی از عنصر بورد تعریف نمود

:در این مثال بوردر باال تعریف شده است

: در ربوکوتاه نویسی ;

border : 3px solid black;

:برای چهار طرف نویسیکوتاه

: مقدارهای مقدار عددی بر حسب پیکسل یا

درصد

برای باریک کردن کادر thinمقدار

برای ضخیم کردن کادر thickمقدار

mediumمقدار پیشفرض

ضخامت یا کلفتی بوردر

:انواع مقادیر استایل

border-top-width:1px;border-top-style:solid;border-top-color:blue;

تعریف برای هر چهار

طرف

خاص چپ پایین راست باالهر طرف دارای یک بوردر

به صورت عقربه ساعتگرد

رنگ نوع ضخامت

: گوشه گرد کردن عناصر

.می شودایجاد گوشه های گرد استفاده برای border-radiusویژگی از CSS3در

: گرد کردن کلی چهار گوشه border-radius : 5px ;

به صورت ساعتگرد:گرد کردن جداگانه چهار گوشه

;border-radius : top-left top-right bottom-right bottom-left

border-radius : 0px 17px 0px 17px ;

border-top-left-radius: 0px;border-top-right-radius: 17px;border-bottom-right-radius: 0px;border-bottom-left-radius: 17px;

:رسم دایره و بیضی

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

.دیگری افقی که این دو مقدار در کنار یکدیگر منحنی را تشکیل می دهند

شودپیکسل چهار گوشه بوردر گرد می 5به اندازه

19

: دستور .باشدعنصر می فاصله از بیرونحاشیه یا

.این پراپرتی فضای خالی بیرون عناصر را مشخص می کند

margin-top : 20px; حاشیه خارجی بیست پیکسل از باال

margin-right : 20px; حاشیه خارجی بیست پیکسل از راست

margin-bottom : 20px; حاشیه خارجی بیست پیکسل از پایین

margin-left : 20px; حاشیه خارجی بیست پیکسل از چپ

: کوتاه نویسی برای مارجین margin : 0px; حاشیه خارجی ندارد

margin : 40px; پیکسل است40حاشیه خارجی از باال راست پایین چپ

margin : 40px 60px; پیکسل 60پیکسل ، از راست و چپ 40حاشیه خارجی از باال و پایین برابر

است

margin : 40px 70px 60px;

margin : 40px 70px 80px 60px;

تگ می centeringیاافقی باعث وسط چین شدن marginبرای autoاستفاده از مقدار

.شود

margin : 0 auto; چینوسط

margin : 0 0 0 auto; راست چین

margin : 0 auto 0 0; چپ چین

.مارجین می تواند مقدار منفی بگیرد: نکته

.پیکسل هست10مارجین دیفالت بین دو تا تگ پی : نکته

پیکسل40برابرباالازخارجیحاشیه

پیکسل70چپوراستاز

استپیکسل60برابرپاییناز

حاشیه خارجی چهار مقدار در جهت عقربه های ساعت یا clockwise پایین می شود یعنی به ترتیب باال راستتعیین

چپ

20

چقدر است ؟divاندازه کادر این :چیستان

: پاسخ چیستان

عرض

ارتفاع

width = ?

he

ight = ?

: قالب بندی

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

.است

.از درصد استفاده نکنید heightو برایautoاز widthهیچگاه برای : نکته

: به دو روش مقداردهی می کنیم widthبرای : نکته

کلی استفاده می کنیم که divبنابر این ما از یک . را داشته باشیم کمترین دردسر ، بیشترین تغییر باید به گونه کدنویسی کنیم که با : نکته

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

عرض کلی سایت

ارتفاع کلی سایت

میدهیم چون از مقدار محتوا اطالعی autoارتفاع را

برای وسط صفحه آوردن.نداریم

main#مثل دقیق

main#که فرزند banner#مثل نسبی

است

22

:از دستورات سی اس اس ریست استفادهدر طراحی قالب حتما باید ابتدا درون فایل

.بفرمایید

درکههایتگوعناصرفرضپیشهایتمامیکهاستازایمجموعه

.دهدمیقراریکسانحالتدررااستمتفاوت،گوناگونمرورگرهای

وودبخواهندیکسانینمایشدارایفرضپیشطوربهمرورگرهاتمامیاساسسیریستازاستفادهبادرواقع

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

.کند

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

و نیمچون زبان سایت های ما فارسی است ، باید در سایت از جهت دهی راست به چپ استفاده ک

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

: وکنار هم قرار دادن عناصر .استفاده می نماییماز خصوصیت برای کنار هم قرار دادن این دو

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

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

.استفاده می کنیم

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

marginاین دستور یعنی همه عناصری که مقدار پیشفرضی از .دارند دارای مقدار صفر گردندpaddingو

جهت دهی به متن از راست به چپ

راست به جهت دهی پیشفرض از چپ

23

. قالبی به شکل زیر طراحی نمایید:تمرین

24

: روش های استایل دهی به تگ : به چهار روش می توان به یک تگ استایل داد

•

•

•

•

: اولویت بندی روش های استایل دهی .در اجرا توسط مرورگرها دارای ارجحیت و اولویت بندی هستندو دستورات

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

مال قدرت باالتری دارد به عنصر مورد نظر اعشده ، اولویت و دستوری که بر اساس یک اصول از پیش تعیین

.می شود

: اولین اولویت

: دومین اولویت

: سومین اولویت

: چهارمین اولویت

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

.از باال به پایین خوانده می شوندو زیرا کدهای . باشد ، آخرین دستور اعمال می شود

.در اولویت هستندباشد ، استایل های مربوط به داشته هم و اگر یک تگ هم : نکته

اولویت اول و و در مقایسه اولویت استایل های : نکته

.هستبا

استایلی اولویت خواهد ،و در مقایسه اولویت استایل های : نکته

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

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

هد شد این خاصیت از بقیه خاصیت های مرتبط مهم تر است و دارای باالترین اولویت برای اجرا خوا

!!

.بیشتر می باشدهم از ! اولویت مقدار

.

یا تنظیمات مشترک از طریق : زمانی که چندتا عنصر داریم : نکته

.تعریف می شودو تنظیمات خاص از طریق

25

: استفاده از تصاویر در سایت

هم Photoshopیا Paintبعد از دریافت عکس از اینترنت ، اندازه تصویر را به کمک

.طراحی شده در سایت می کنیمdivاندازه تگ

.طراحی شده در سایت ، عکس را مطابقت بدهیمdivبر اساس پیکسل باید با Paintدر

عکس پشت زمینه در سی اس اس

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

.واهد شدعکس استفاده می کنیم که بدون کوتیشن اگر آدرس اسپیس داشته باشد اجرا نخ

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

: وضعیت تکرار عکس پشت زمینه بدون تکرار

افقیدر جهت ایکس یا تکرار در راستای افقی یا محور

عمودیدر جهت ایگرگ یا تکرار در راستای عمودی یا محور

پیشفرض ، تکرار عمودی و افقی یا تکرار عکس در دو جهت عمودی و

افقی

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

: مقدارهای افقی , بره سمت راست چقدر

:مقدارهای عمودی , بره پایین چقدر

نمایش تصویر در باال و راست صفحه

نمایش تصویر در چپ و مرکز صفحه

پراپرتی مشخص کننده حرکت تصویر زمینه با اسکرول بار یا ثابت بودن تصویر زمینه

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

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

.بماند

26

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

پراپرتی .باشدمی transparentزمینه تگ ها که مقدار پیشفرض بی رنگ یا رنگ زمینه صفحه یا رنگ

نام رنگ

رنگمعادل هگزا دسیمال

background-color : rgb(10,255,0); Red Green Blue کد

:اندازه عکس به اندازه تگ در میاید تصویر

اولی عرض دومی ارتفاع

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

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

: کوتاه نویسی.پنج خاصیت مربوط به بکگراند را می توان به صورت کوتاه در یک دستور ادغام نمود

.در این کوتاه نویسی ترتیب خاصیت های مورد استفاده مهم نمی باشد

: استفاده از دو بکگراند که امکان استفاده از دو بکگراند پشت هم ایجاد شده است ، به این صورت که بعد از ایندر

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

: طراحی

:استفاده می کنیم از چهار تگ برای طراحی بخش

:درونش با دو کلی برای منوباکسکلی برای بخش کناری سایت و یک یک

.استفاده از ارتفاع درصدی ممنوع است: نکته

.ممنوع است استفاده از عرض : نکته

.درون محتوای بخش کناری سایت معموال لیست تعریف می شود

.استفاده نماییمدر سایدبار برای اینکه ارتفاع به اندازه محتوا پایین بیاید باید از : نکته

با توجه به برای سایدبار ما از مقداردهی نسبی یا درصدی استفاده نموده ایم ، که از مزایایش این می باشد که: نکته

.عنصر پدر مقداردهی صورت می پذیرد و با حداقل دردسر تغییر در ساختار سایدبار صورت خواهد گرفت

محتوا

عنوان

عالمت یا بالت پوینت کنار لیست حذف می

.شود

28

: متن استایل دهی رنگ متن

: را مقداردهی کرد به چهار روش می توان

رنگاز نام استفاده : استفاده نمود نام رنگ استاندارد برای مقداردهی به 20می توان از

آبرنگ آبی سیاه آبی قهوه ای

جیغبنفش خاکستری سبز فسفریسبز

صورتی ارغوانی خرمایی اقیانوسیآبی زیتونی

نارنجی صورتی ارغوانیبنفش

قرمز

اینقره سیررنگ آبی سفید زرد

استفاده از تابع

. به ترتیب سه رنگ قرمز ، سبز ، آبی را مقدار می پذیردکه تابع

.می پذیرند100تا 0هستند یا درصد از 255تا 0مقادیر این رنگ ها یا اعداد صحیح از

تایی رنگ ها16استفاده از مبنای هگزا دسیمال یا

.به کار برد16رنگ ها را می توان در مبنای عبارت متناظر آنها در مبنای رنگ سیاه

رنگ سفید

, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0: مقدارهایی که در این شش خانه می توان گزاشت شامل

: این شش خانه به صورت دو رقم دو رقم به معنای قرمز و سبز و آبی می باشند

: قرار دهیم 16به دست آوردن رنگ آبی فقط کافیست رقم های آبی را برابر برای

.را به راحتی با نرم افزار فتوشاپ می توان به دست آورد16رنگ های در مبنای

دسیمالاستفاده از کوتاه نویسی مبنای هگزا

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

سفید می شود رنگ

می شود

فونت متننوع

تفاده می کند لذا فونت مورد نظر ما را نداشته باشد ، مرورگر بازدیدکننده به جای آن از فونت پیشفرض مرورگر اسسایت اگر بازدیدکننده

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

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

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

.سومین فونت اعمال می شود و الی آخر

.اگر نام فونت شامل اسپیس باشد آنگاه این نام باید داخل دبل کوتیشن قرار گیرد

29

: متن استایل دهی اندازه متن

: مقدار پراپرتی در سایزهای قطعی یا

معادل با

معادل با

معادل با

با اندازه پیشفرض و معادل

معادل با

معادل با

: در مقدار پراپرتی سایزهای درصدی یا

.وابسته به عنصر پدر می باشدمقدار درصدی برای

: مقدار پراپرتی در سایزهای طولی یا

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

.هست

.مناسب برای پرینت چون مقدار قطعی هست. سانتیمتر هست2.54برابر هر یک اینچ که اینچ

برای پرینتمناسب سانتیمتر

پرینتبرای مناسب میلیمتر

پدردو برابر اندازه به ارث برده شده از تگ یعنی برده ، دو که از تگ پدر ارث )اندازه کنونی سایز یعنی یک

مناسب پرینت و چاپ. اینچ است1.74یک پوینت معادل

مناسب پرینت و چاپ. پوینت است12یک پیکا معادل

: تعیین موقعیت متن درون عنصر

: تعیین موقعیت افقی متن

: متن عمودی تعیین موقعیت

1 2 3

4 5 6

7 8 9

30

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

700عدد معادل

بزرگقلم های خیلی برای

بولددیفالت

400ساده معادل عدد پیشفرض

.متن را به صورت مورب نمایش می دهد

.متن را به صورت مورب نمایش می دهد

.پیشفرض ساده و حالت عادی فونت می باشد

: کوتاه نویسی

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

: پراپرتی .برای کنترل فاصله خطوط از هم به کار می رود

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

.مقدار می گیره لذا فاصله بین سطرها را مشخص می کند

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

.بودپیکس خواهد 39یعنی 13سه برابر باشد آنگاه فاصله عمودی دو خط باشد و

ه می به دو قسمت تقسیم شده و نصف آن به باال خط و نصف دیگر به پایین خط اضافمقادیر بهبا تخصیص مقدار : نکته

. شود

: متن تعیین موقعیت افقی وسط چین کردن

چپ چین کردن

راست چین کردن

تراز کردن از دو طرف

:فاصله از سر خط در پاراگراف

.پاراگراف می باشداول ایندنت برای درج فضای خالی یا تو رفتگی در سطر

31

: دستور .توان هر فونت دلخواهی را به صفحه وب اضافه نمودمی با استفاده از مشخصه

.استپایان دادن به محدودیت استفاده از فونت های خاص در وب تعریف شده برای خاصیت

امل امکان استفاده از فونت هایی هست که قبل از این فقط در سیستم عیکی دیگر از قابلیت های اضافه شده به

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

.نصب و قابل اجرا هستند پشتیبانی می شود

.قرار می دهیمابتدا فایل فونت را در کنار فایل

.فونت مورد نظر را با دستور زیر تعریف و استفاده می کنیم

.می کنندپشتیبانی یا و یا های ، کروم ، سافاری و اپرا از فونت مرورگرهای فایرفاکس

.می کندپشتیبانی یا فونت از میکند ولی پیروی @به باال از 9اینترنت اکسپلورر

و یا و از آن جا که آخرین نسخه های مرورگر ها و به طور کلی مرورگر های جدید از فرمت

.می کنند این فرمت ها را هم در کد خود قرار می دهیماستفاده یا

.هست که استفاده از آن الزامی نیستیک شاخص برای تعیین نوع فایل : نکته

آن عکس که وقتی موس روی هر تصویر آمد یک نوشته شفاف شیشه ای رویگالری تصاویری طراحی نمایید:تمرین

. باال بیاید

طراحی بفرمایید ، زمانی که موس روی هر گزینه آمد رنگ زمینه و اندازه متن منوی افقی با تگ های :تمرین

.تغییر نماید

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

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

.شیشه ای باشند

33

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

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

.کند

: صورت می پذیرد aتبدیل متن و عکس به لینک با تگ

متن

خاصیت آدرس دهی

.لینک هایی که به صفحات سایت دیگر اشاره می کنند: یا لینک سراسری

.لینک هایی که به صفحات دیگر سایت اشاره می کنند: یا لینک محلی

با خاصیت آدرس دهی تگ ویژگی

Href یاhyperlink refrence یک ویژگی درون تگa که توسط آدرس صفحه مقصد مقدار می گیردهست..دادآدرس لینک کاملباید به آنها اما در غیر اینصورت کافیست فقط اسم و فرمت هستند same directoryزمانی که صفحه ها درون

با خاصیتویژگی نوع باز شدن صفحه تگ target باز شدن و نمایش پنجره صفحه مقصد را در مرورگر تعیین می کندنحوه.

.باعث می شود تا وبسایت مقصد درون پنجره جدید دیگری از مرورگر باز شودtargetویژگی در _blankمقدار

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

. در فریم یا قاب اصلی باز خواهد شد لینک _parentمقدار

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

در تگویژگی

با نگه داشتن موس روی لینک ، ظاهر شدن یک جعبه کمک یا یک پیغام روی لینک

aلینک کردن به ایمیل با تگ

: لینک دادن به عکس

!تاثیر نخواهد داشت aهمه متن ها را رنگ مشکی بدهیم ، روی تگ های bodyاز تگ CSSاگر در : نکته

.مجزا می باشدزیرا تنظیمات تگ

:Pseudo Classesیا کالس های ساختگی با CSSدر aلینک یا تگ استایل دادن به

text-decoration:overline; کشیده می شودخط باالی متن

text-decoration:line-through; شودمی خوردن روی قیمت متن که مثل خط روی کشیدن خط

text-decoration:underline; پیشفرض برای متن لینک که باعث زیرخط دار شدن متن می گردد

text-decoration:blink; باشد می HTML در blink تگبرای چشمک زن کردن متن و معادل

text-decoration:none; پیشفرض برای متن هایی که لینک نیستند که موجب نمایش ساده متن می شود

: تعریف کالس های کاذب دقت کنید که آنها را به ترتیب استایل دهی کنید برای : نکته Link: اول Visited: دوم Hover: سوم

Active: چهارم .اگر این ترتیب رعایت نشود ممکن است کد درست عمل نکند

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

.ستلینک بعد ویزیت هست که رنگ دیفالت آن بنفش ه

ده در واقع لینک هایی هستند که قبال روی آنها کلیک ش

.است

.زمانی که نشانگر ماوس روی لینک می آید

می لینک در زمانی که نشانگر ماوس بر روی آن قرار می گیرد تغییر رنگ

.دهد

Pseudo Classesاستفاده از یک استایل برای چند

35

: در صفحه درج عکس با تگ

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

. می باشدimg،Single Tagتگ : نکته

محل ذخیره سازی عکس استفاده می کنیم که در واقع برای srcاز ویژگی imgتگ در

.عکس خواهد بودیا فرمت extension+ مقدارش آدرس اینترنتی عکس

به عرض و ارتفاع عکس و تغییرپیکسلی مقداردهی برای heightو widthویژگی

اندازه عکس

برای درج توضیحات روی عکس در زمان نمایان نبودن عکس که متن altویژگی

خصوصیتی مهم می ، Alternate Imageیا Altخصوصیت . جایگزین عکس می شود

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

.یابد

ماوس روی عکس و سئوی کلمه ای مدن برای درج یک پنجره لغزان با آ titleویژگی

عکس

متنه برای چپ بردن یا راست بردن عکس و جایگاه گرفتن عکس نسبت ب alignویژگی

مثال عکس چپ و متن راست باشدبرای

کند ، که میتعیین ترازبندی عکس را نسبت به محتویات دیگر صفحه و متن دور آن نحوه

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

top : عکس در باالی متن و محتویات دیگر قرار می گیرد .

bottom : در پایین متن و محتویات دیگر قرار می گیرد عکس.

middle : در وسط متن و محتویات دیگر قرار می گیرد عکس.

left : در سمت چپ متن و محتویات دیگر قرار می گیرد عکس.

right : در سمت راست متن و محتویات دیگر قرار می گیرد عکس.

36

: تغییر اندازه اتوماتیک عکس

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

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

: اگر بخواهیم اندازه عکس را تغییر بدهیم ولی عکس از فرم نیفتد

.باید مثال طول رو بدهیم و ارتفاع ندهیم

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

.کند

37

: گالری عکس

توضیح

.با اندازه واقعی نمایش داده می شودimgبه صورت پیشفرض تگ : نکته

رفتن سرعت باید به حجم عکس نیز دقت کنیم و از تصاویر با حجم پایین برای باال: نکته

.بارگزاری یا لود سایت استفاده نماییم

: مقدار دهی ابعاد عرض و ارتفاع عکس

یا

یا

باال که زمانی که اندازه عنصر را به صورت نسبی مقداردهی می کنیم مانند: نکته .می باشد ، نسبت به تگ پدر نمایش می یابد% 100

عکس

توضیحات

38

.برای جا به جایی عناصر چندین تکنیک وجود دارد: نکته

.کدها باید خوانا ، بهینه و قابل توسعه باشد: نکته

ن کد در کدنویسی ، در اولویت اول اجرای دستور مهم می باشد و سپس بهینه بود: نکته

.مهم است

:.شوداستفاده میحرکت آزادانه یک عنصراز دستور پراستفاده و حساس پوزیشن برای

جا به جا شدن یک عنصر روی عناصر دیگر هم تاثیر می گزارد مثالmarginدر خاصیت : نکته

به یک

.پایین تر هم به همان اندازه پایین خواهند آمدdivبدهیم ، تگ های margin-topاگر از باال divتگ

.این است که روی سایر عناصر هم تاثیر داردmarginایراد لذا

.صفحه سایت هستدرون تعیین موقعیت عنصری برای Positionویژگی

به توان مشخص کرد که موقعیت یک تگ به تگ پدر خود وابسته باشد یامی Positionبا ویژگی

یگری الیه پنجره مرورگر وابسته باشد لذا با استفاده از پوزیشنینگ می توان یک تگ را روی تگ د

.بندی نمود

, bottom , right , topالیه بندی تگ و چهار ویژگی برای Positionویژگیپوزیشنینگ شامل left مختصات محل قرار گیری تگ می باشدبرای.

انواع

یک عنصر را به یک مکان مشخص می برد اما بقیه عناصر آن عنصر را نادیده مقدار

.می گیرند

.می دهد که تگ در یک محل خاص قرار گیرداجازه

و قرار گرفتن در موقعیت مشخص بدون اهمیت به تداخل با تگ های دیگر ، در واقع روی

.بی قید و شرط قرار خواهد گرفتمشخص و و

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

.دیگر قرار گیرد

.را نادیده می گیرندسایر عناصر ، عنصر : نکته

: می توانیم داشته باشیم استفاده می کنیم چهار تا زمانی که از: نکته

تگدرهکقسمتی،دیگرهایتگباتداخلبهاهمیتبامشخصموقعیتدرعنصرگرفتنقراربرای

.نمایدمیمربوطهمبهراهاتگلذاگیردمیقرارتگپایینمماسبهمماسداردتداخلدیگر.گیرندمینظردردیگرعناصرراعنصرجایگاه

داشتهمحوردرموقعیتیک،پراپرتیازاستفادهباتوانندمیهایتگ

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

دیگرعناصرراعنصراماگیرندمینادیدهدیگرعناصرراعنصر:نکته

.نمایندمیحسابراجایگاهش

باال یا پایین در صورتی که برای یک عنصر از این ویژگی استفاده کنیم ، موقعیت آن عنصر حتی اگر

ی تبلیغات صفحه برویم تغییری نمی کند و به صورت ثابت روی صفحه قرار می گیرد و مناسب برا

.خواهد بود

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

ن کردن تداخل با تگ های دیگر ، درواقع تگ فیکس میشه روی موقعیت تعریف شده و با باال پایی

.اسکرول بار هم در همان مکان باقی خواهد ماند

.وابسته به نمای دید مرورگر موقعیت دهی می شودهمیشه fixedعنصر

می نویسید دیده می HTMLبا این مقدار اجزا در همان جایی که کد آنها را در . مقدار پیشفرض است

.شوند

Offset Property ها یا چهار ویژگیbottom , right , top , left عنصر درstatic کابردی

.ندارند

position:inherit;ه قرار گرفتن در موقعیت مشخص با اهمیت به تداخل با تگ های دیگر ، تگ های بعدی در کد ک

.تداخل دارند بدون فاصله پایین تگ قرار می گیرند

ا محل قرار گیری تگ می باشند که برای کنترل موقعیت تگ بمختصات :

بر حسب پیکسل یا درصد می یعددمقدار .کار می روندبه relative , absolute , fixedمقادیر

.باشدtop:40px; باالفاصله از

right:40px; فاصله از راست

bottom:40px; از پایینفاصله

left:40px; چپفاصله از

: ها عبارتند از Offset Propertyچهار ترکیب مجاز و قابل استفاده از

top , left = چپ فاصله از باال و

top , right = فاصله از باال و راست

bottom , left چپ فاصله از پایین و =

40

،داردپوزیشنکهپدریعنصراولینبهنسبتدهیممیپوزیشنعنصریکبهکهزمانی:نکته

مشخصجایگاهشنمایشصفحهبهنسبتصورتاینغیردر.گرددمیمشخصجایگاهش

.شدخواهد

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

تعیین می و برای عناصر بیرونیبه جا کنیم برای عناصر داخلی

.نماییم

: مثال گالری عکس

.در مواقع نیاز استفاده کنیم و تا حد امکان کم استفاده گردداز : نکته

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

.می کند

عنصر داخلیعنصر بیرونیposition:absolute

توضیحات عکس

عکس

41

: پراپرتی البته،کندمیکنترلZنامرییمحورطولدرراهاتگموقعیتz-indexپراپرتی

.باشندشدهدهیموقعیتfixedیاrelativeیاabsoluteصورتبهاینکهبرمشروط

هاتگرفتنهمرویبرایZمحوراماعمودیYمحوروباشدمیافقیXمحور

راپرتیپازاستفادهباودارندقرارهمرویکهداریمتگچندمامثالبرایمیشوداستفاده

Zکنیممیمشخصهمرویراهاتگآننمایشترتیب.

;z-index:autoدر.شدخواهددادهنمایشHTMLکدنویسیترتیببهکهباشدمیautoپیشفرضمقدار

صفحهدرHTMLفایلترتیببه،باشندداشتهتداخلباهمتگچنداگرautoحالت

.شدخواهددیدهدیگرهایتگرویآخرتگکهشدخواهددادهنمایش

;z-index:integerz-index:1;

مقدار دهی عددی

قرارترتیبz-indexپراپرتیبهاعدادهمونیاintegerمقادیرتخصیصباتوانمی

.دادتغییرراZمحورراستایدرتگهاگیری

دادهشنمای،صفحهدرهاتگسایررویباشدداشتهباالتریعددیمقدارکهتگیواقعدر

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

.گویندمیمحتوابندیالیهیا

z-indexپراپرتیباومیشوندواردترتیببههاتگstaticدهیموقعیتحالتدرپراپرتیباfixedیاrelativeیاabsoluteصورتبهاماندارنددهیموقعیتقابلیت

z-indexباشندمیدهیموقعیتقابلدهیموقعیت.

.باشندمی10تا1مقادیرz-indexخاصیتبرایرایجمقدار

42

: شفافیت عناصر با خاصیت .ردتوان میزان شفافیت یک عنصر را کنترل کمی opacityخاصیتاستفاده از با

opacity:number;opacity:1; .مقدار پیشفرض یک است

تعیین می کند که opacityمقدار یک حالت طبیعی است و مقدار صفر برای پراپرتی

دار دهی عنصر نامریی باشد پس مجاز هستیم از اعداد بین صفر تا یک تا دو رقم اعشار مق

.نماییم

: تابع شفافیت عناصر با استفاده از تابع

.را مقدار می پذیردآبی و آلفا که به ترتیب سه رنگ قرمز ، سبز ، تابع

.می پذیرند100تا 0هستند یا درصد از 255تا 0مقادیر این رنگ ها یا اعداد صحیح از

.مقدار می پذیرد1تا 0می باشد که از رنگشفافیت مقدار

:با تابع تفاوت خاصیت نه و مشکلی دارد که روی عناصر فرزند هم شفافیت تاثیر دارد مثال رنگ زمی

.نوشته داخل زمینه هر دو شفاف می شوند

.روی عناصر دیگر تاثیر نخواهد داشتولی

. یرندکه تصاویر داخل دیوهای سفید رنگی به صورت کج و روی هم قرار گآلبوم تصاویری طراحی نمایید:تمرین

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

نوع لینک ها به این. سه لینک متنی بسازید که وقتی روی هر لینک کلیک می کنیم بخشی از سایت را نشان دهد:تمرین

. اصطالحا بوکمارک می گوییم

بخش سایت دکمه ای ثابت نیز با یک عکس لینک دار بسازید که روی آن کلیک شد از هرجای سایت به باالترین

.برویم

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

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

عکس اول می گزاریم # یک لینک با اسم آی دی و عالمت

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

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

45

: حل تمرین مربع سه بعدی

بهینه ترین حالت برای درست کردن

شکل مربــــع سه بعـــــدی که با

.چهار ذوزنقه درســـــت شده است

گوشه های بورد بین بوردر افقی و بوردر عمودی

.ــــود,به دو نیـــــــمه تقســــــیم می شـ

: کد راه حل مربع سه بعدی

46

: نظر گزاشتن بین کدها

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

ید بهتر آنرا شما می توانید در هنگام نوشتن یک صفحه برای خود یادداشت بگذارید تا وقتی که بعدها به آن نگاه کرد

.درک کنید

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

HTMLکامنت تگ <!-- Tarah Touraj Aminfar -->

سایتبرای درج توضیحات بدون نمایش در صفحه

CSSکد کامنت /* Salam In Yek Nazar Ast */

کدهای سی اس اسبرای درج توضیحات بدون نمایش در

.طراحی کنیدمثلثبه وسیله بوردر : تمرین

در دیو یک مثلث با بوردر طراحی شده

مثلث طراحی شده با بوردر اینجا نمایش داده شده

: در سایت ها از مثال مثلث کاربردهای زیادی می توان مثال زد ، مثال محصوالت یک سایت

47

ازهیمبدخواهیممیاساسسیدریکسانتنظیمیک،تگچندبهکهزمانی:سلکتورنکته

.نماییممیاستفادهزیرروش

.حال این تگ های مختلف تنظیمات یکسان دارند

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

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

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

.داشت

: سایت ریسپانسیو .سایت واکنش گرا یعنی سایتی که در دیوایس های مختلف یکسان نمایش داده شود

.درواقع متناسب با دستگاه مورد نظر ، ظاهر سایت به شکل مناسب نمایش یابد

یو حرکت یک دایره متحرک در یک دیو مستطیلی رسم کنید که در راستای ساعت گرد در د:تمرین

.نماید

49

: مشاغل: وبمستر یعنی مدیر سایت که دسته بندی شغلی یک وبمستر شامل مواردی است نظیر

: نکته عکسشرط استفاده از یک عکس در صفحه وب این است که عکس در کنار فایل صفحه

.وبسایتمان باشد

:افزایش فاصله بین خطوط متن از برای افزایش فاصله بین خط های نوشته هایمان یا برای تنظیم ارتفاع خطوط در

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

50

: المنت المنت سلکتور

دستور سی اس اس.قرار دارد1که بالفاصله بعد از تگ2جهت انتخاب تگ

.هست استایل می گیردتگ پاراگرافی که بعد از بسته شدن تگ : مثال

.قرمز می شودرنگ همه تگ های

.هستند را آبی می کندتگ های پاراگرافی که درون تگ

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

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

51

:سلکتور

د در در صورتی که بخواهیم رنگ تمام لینک ها و بکگراند آنها را عوض کنیم بای.استایل بدهیمبه تگ قسمت

صفحه نخست

.هستند ، تغییرات روی آنها اعمال می شودرا که دارای تگ های : مثال

.هستند را تغییر می دهدبا مقدار را که دارای تگ های

.شروع می شوند را تغییر می دهددر را که با مقدار تگ های

.هستند#هستند به جز آنهایی که برابر #همه آنهایی که شامل

52

:سلکتور

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

.هستند نارنجی شوندهستند و درون مقدارشان دارای را که دارای تگ های

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

که داریم مقدار را به سلکتور می که بنا به یک نوع سلکتور داریم به اسم .دهیم

$

.شونددارند صورتی مقدارشان آخر هستند و را که دارای های تگ

.تیلد مساوی یعنی یک کلمه عینا وجود داشته باشد

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

.مساوی یعنی فقط آن عبارت باشد

.یعنی شروع با آن کلمه باشد

.یعنی پایان با آن کلمه باشد$

53

: جدول ایجاد

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

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

.هستجدول که مخفف تعریف ردیف یا سطر ، سطرهای : تگ

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

برای هر سطر یک تگ

برای هر ستون در جدول یک تگ

: عنوان درج سلول یا thتگ .مثل اسم و فامیل که کمی بولد می شود و وسط سلول هم قرار می گیرند

: جدول درج عنوان

: تگ در یا مرز

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

54

: در تگ ویژگی

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

ادغام عرضی ! برای ادغام سلول های سطر مناسب .استفاده می شودبرای ادغام سلول ها از اتریبیوت و در تگ

>

: مثال

سلول اول

سلول دوم

سلول سوم

: در تگ ویژگی

.اندازه عمودی سلول ها را به اندازه تعداد سلول ستون باالیی در می

ادغام ارتفاع! برای ادغام سلول های ستونمناسب .استفاده می شودبرای ادغام سلول ها از اتریبیوت و در تگ

: مثال

سلول اول

سلول دوم

ومسلول س

چهارمسلول

پنجمسلول

55

: tableتگ در cellpaddingویژگی

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

تکست و بوردر

: tableتگ در cellspacingویژگی

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

.چسبند، خانه های جدول به هم می

: tableدر تگ bgcolorویژگی

برای رنگ پس زمینه جدول

: tableتگ در backgroundویژگی

برای درج عکس در پس زمینه جدول

56

: tableتگ در widthویژگی

اما هر چقدر تکست باشه به همون قدر عرض جدول اضافه می شودبه صورت پیشفرض

می توان عرض برای جدول تعریف کرد که مقدار دهی این ویژگی با widthبا ویژگی

.پیکسل یا درصد خواهد بود>

: tableدر تگ heightویژگی

سل یا ارتفاع برای جدول تعریف می کند که مقدار دهی این ویژگی با پیکheightویژگی

.درصد خواهد بود>

: Tableتگ در alignویژگی

:حالت دارد 3نحوه ترازبندی و قرار گیری جدول را در صفحه مشخص می کند که

: trدر تگ valignویژگی

.نحوه ترازبندی عمودی محتویات درون سطر جدول را تعیین می کند

top : محتِویات درون سطر ، باال بروند.

bottom : محتِویات درون سطر ، پایین بروند.

middle : محتِویات درون سطر ، وسط بروند.

: tdدر تگ abbrویژگی

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

.تعیین کرد

57

: و تگ جهت tdبرای دسته بندی گروهی از ستون های یک جدول یا تگ های colgroupتگ

.قالب بندی و تعیین خصوصیات ، استفاده می شود

فقط خصوصیات را نگهداری کرده و هیچگونه خروجی بر روی صفحهcolgroupتگ

colبه ازای هر ستونی که قرار است توسط این تگ دسته بندی شود ، یک تگ . ندارد.ایجاد می شودcolgroupدرون

.قابل استفاده است tableفقط درون تگ colgroupتگ

: مثال برای <table>

<colgroup><col span="2" style="background-color:red"><col style="background-color:yellow">

</colgroup><tr>

<th>ISBN</th><th>Title</th><th>Price</th>

</tr><tr>

<td>3476896</td><td>My first HTML</td><td>$53</td>

</tr><tr>

<td>5869207</td><td>My first CSS</td><td>$49</td>

</tr></table>

: colgroupدر تگ spanویژگی

پوشش دهد را تعیین می colتعداد خانه هایی که قرار است این تگ به وسیله تگ درونی

.کند

دو خانه قرمز

یک خانه زرد

58

می باشد که به ما این امکان را می دهد تا فرزندان یک عنصر را بر یک .اساس ترتیبشان انتخاب کنیم

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

.تعداد زیادی لیست داریم که می خواهیم آنها را از یکدیگر متمایز در صفحه نمایش دهیمفرض کنید در صفحه :مثال

پنجمفقط انتخاب عنصر

اولتای ۵انتخاب همه عناصر غیر از

عنصر اول۵فقط انتخاب

.این انتخابگر همچنین می تواند یک فرمول به عنوان آرگومان بپذیرد1درمیان عناصر ،شروع از عنصر ۴انتخاب

فقط انتخاب عناصر فرد

انتخاب عناصر زوجفقط

عنصر آخرانتخاب

یک عنصر مانده به آخرانتخاب

عنصراولین

59

تمرین .باشدو ، یا یک فرمول مثل یا می تواند یک عدد ، یک کلمه کلیدی مثل

60

سطریکفرزندانتمامرویبرشمارشکهتفاوتاینباباشدمی)(بهشبیهانتخابگراین.گیردیمصورتشودمیاعمالآنرویبرانتخابگرکهعنصرنوعیکرویبرفقطبلکهگیردنمیصورت

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

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

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

.دهد

:مثال

انتخاببراینوعهیچوبگیریدراسومینمیخواهیداگر،کنیدتجسمراعضو۵000بالیستیک.بگیریدراسومینوکنیداستفادهازمیتوانید،نداریدآن

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

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

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

61

برایکهاستوبتحتگذارینــــشانهزباناساسسی

.شودمیاستفادهمرورگربرایسایتوبیکظاهرتوصیف

CSSکلماتاولحرفسهازCascading Style Sheet.استشدهتشـــــــــــــــــکیلآبشارینامهشیوهزبان

.استCSSنسخهآخرینCSS3واقعدر

CSS3استشدهتقسیمماژولچندبهیعنیکهداردماژوالرساختار.

:ازعبارتندCSS3هایماژولترینمهمازبرخی

Selectorانتخابگرها•Boxمدلجعبه• Modelهاحاشیهوزمینهپس•

محتواکردنجایگزینوتصاویرسنجش•

متنهایافکت•

بعدیسهیابعدیدوتحوالت•

متحرکتصاویروهاانیمیشن•

متعددهایستونطرح•

Userکاربریرابط• Interface

:CSS3ازاستفادهدلیل

FlashوPhotoshopوjQueryازاستفادهشدنکم

62

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

طیف رنگ خطی

طیف رنگ دایره ای

: مثال طیف دو رنگ

طیف پنج رنگ

.درجه طیف رنگ نمایش داد می شود45با زاویه

طیف

دایره

63

: دستور .قابلیت سایه دادن به کادر و متن ها

برای سایه دادن به کادر

متنبرای سایه دادن به

رنگ شدت فاصله عمودی فاصله افقی

رنگ شدت فاصله عمودی فاصله

افقی

.بردمیارثبهراوالدعنصرفونتاندازهبرابرچهاریعنی4سایزفونت:نکته

.بردخواهدارثمرورگرپیشفرضفونتاندازهازباشیمنداشتهوالدعنصراگرازبسیاریواحدنشدنپشتتیبانیدلیلبهاولیههاینسخهدر

.میکردنداستفادهواحدازطراحان

.باشدمیاکسپلورراینترنتمرورگردر16بابرابر1هر

64

.هستندAnimationوTransitionشاملCSS3امکاناتقشنگترینازدوتا

میحهصفدرموجودهایآیتموضعیتتغییروحرکتیهایافکتایجاد،دواینکاربرد

.باشد

.اندآمدهوجودبهدیگروضعیتبهوضعیتیکازتغییربرایاینهادویهر

چهدرکنیممشخصتوانیممییعنیدارندوضعیتتغییربرایرازمانتنظیمقابلیتدوهر

.بگیردصورتتغییرزمانیفاصله

:AnimationوTransitionهایتفاوت

:دارندوجوددوایننیزپاورپوینتدر

اسالیدبهتنظیمات

اسالیدعناصربهتنظیمات

:CSS3درتفاوت

هسترویدادگرانیسترویدادگرا

.دارددهشبندیزمانوبودناتوماتیکقابلیتخاصیتیکمقدارتغییردر

جامانرویدادیکازبعدزمانیبازهیکدرخاصیتیکمقدارتغییردراما

.شودمی

.هسترویماوسحرکترویدادکهرویدادمثالبرای

:دررویدادمثال

آرومآروممیخوایمماولیمیشهبزرگیوهوییکهاینهمشکلشاما،شودمیبزرگدیوعرضدیورویبیادماوسمثالایندر

.شودبزرگ

65

.که بر اساس یک رویداد یک کار انجام شود کاربرد داردزمانی

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

.اندازه و شکل دیگر تغییر وضعیت دهد

:است صورت زیر به دستوری خاصیت ساختار

تعیین کننده خاصیتی است که قرار هست عوض شود

مدت زمان یا بازه زمانی تغییرات هست

پارامتر تعیین کننده افکت تصویری برای انجام عملیات

است

یعنی بعد از چه مدتی عنصر شروع به تغییر انجام تاخیر

کند

قرار یا تگ باید اعمال شود و نباید درون مثال برای خود تنظیمات

.بگیرد

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

.استفاده می کنیم

66

: مراحل تولید نرم افزار

: زمان تحلیل و طراحی طول می دقیقه5وقت بگذاریم طراحی دقیقه20اگر برای تحلیل

.کشد

طول می دقیقه20وقت بگذاریم طراحی دقیقه5اگر برای تحلیل

.کشد

.قبل از برنامه نویسی فکر کنید: نکته

.را یاد بگیرید8020قانون : پیشنهاد

.را مطالعه بفرماییدEat That Frogکتاب : پیشنهاد

مهمترین کارتحلیل 1)

طراحی2)

پیاده سازی و اجرا3)

خطایابی4)

%20درآمد فروش 5)%80درآمد پشتیبانی 6)

67

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

.کوچک گردند

حرکت انجام دهند و حرکتشان قطع 4یک دیو به شکل مستطیل که درونش سه توپ باشند و هر توپ :تمرین

.نشود

68

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

.ماوس وقتی روی دیو قرار گرفت توپ ها حرکتی کنند.ماوس روی تگ پدر آمد ، تگ های فرزند حرکت نمایند

69

: حل تمرین توپ ها با

می دهـیمدیو اصلی را پوزیشن

چون تگ پدر دیو اصلی می باشد و فرزندان

.قرار می گیرنددرونش

می دهیم تا آنها را آزادانه حرکت بدهیم و تاثیری توپ ها را پوزیشن

.روی عناصر دیگر نگذارند

یک زمانی میتونیم تغییراتی را روی

عنصر اعمال کنیم که رخــدادی روی

یک عنصر دیگر رخ دهـــــــــد که

عنـــصــــر ، فرزند عنصر دیگر

.باشد

70

: به سه نکته باید دقت داشته باشیمدر کدنویسی اجرا

بهینه بودنمنحصر به فرد بودن کدها یا

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

.کنیمانتخابادیتورازفراترافزارنرمیکایحرفهکدنویسی.کنیممیبازباروسنگینکدهایمعموال

مخففکهکنیدانتخابایدیآییک

مثل

انجامهمیشتریهوشمندانهودقیقترنویسیبرنامهباهاشچونمیشهتوصیه

.داد

، ، ،

، ،

نواعاتوشونخوایممیفقطماکنیدانتخابتریدراحتباهاشوداریددوستروکدومهر

.بنویسیمراکدها

تولیدادوبیشرکتتوسطکهاستوبطراحیافزارنرمیک

.استشده.استآننسخهامروزتاافزارنرمایننسخهآخرین

را،،،،،،،صفحاتویرایشامکانویوردریم

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

71

وبصفحاتدرعناصرسازیمتحرکبهقادرماتاشوندمیباعثCSSدرهاانیمیشن

.باشیم

ورتصاسکریپتجاوابوسیلهوبدنیایدرهاسازیمتحرکبیشترCSS3ظهورازقبل

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

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

:سازیانیمیشنمراحل

.کنیممیتعریفاساسسیاستایلداخلراانیمیشناول.1

.کنیممیمعرفیراآنعنصربهنامیکبابعد.2

:مثالدیگرمدل

.کنیدبیانوکلیدیهایکلمهیادرصدصورتبهمیتوانیدراتغییرات

72

:سازیانیمیشنمراحل

.کنیدمرتبطنظرموردعنصربهراانیمیشنبایدحال.3.کنیممیوصلدیآیبادیویکبهمااینجامثالبرای

:مقادیرانواع

پایانتاشروعازیکنواختثابتسرعتباراانیمیشنیک

.میکندمشخص

.دهدمینمایشراآهستهپایانیباانیمیشن،افزایشی

.میکندمشخصآهستهشروعباانیمیشنی،کاهشی

.آهستهپایانوشروعباانیمیشنی،پیک

:انیمیشنحرکتشدنبرگشتورفت

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

شدهتعریف نام انیمیشن که قبال جلوی

مدت زمان اجرا بر حسب ثانیه

تعداد دفعات تکرار

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

ایجاد تاخیر در شروع انیمیشن بر حسب ثانیه

سرعت مدل اجرای انیمیشن

73

: کوتاه نویسی دستور انیمیشن

: مثال

تغییرآنرنگوکردهجابهجاxمحورراستایدرراآبیکادریک:تمرین

.کند

برودبعمرشکلبهنقطهچهاردرانیمیشنباکهکنیدطراحیدیویک:تمرین

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

74

: طراحی منوی آبشاری

.یک منو آبشاری با مقادیر زیر طراحی نمایید: تمرین

: راه حل به صورت مرحله ای

و اضافه کردن ساختار طراحی . 1

75

.کنیمتعریف می تگ ها را درون لیست . 2

خانه

محصوالت

خدمات

ارتباط

.میداریمسی اس اس استایل بالت پوینت های لیست ها را بر درون . 3

منوهاافقی چیدن برای . 4

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

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

.کنیماستفاده

منوآخربایدمنوازبعدعناصررویاثربردنبینازبرای:نکته

.دهیمقرار

.کنیممیاستفادهدادننمایشبرایبالکدیسپلیاز:نکته

.کنیممیاستفادهکردنمخفیبرایناندیسپلیاز:نکته

هالیستبینفاصلهبرای.5

76

هاتعریف زیر مجموعه . 6

خانه

محصوالت

همراهتلفن

لپتاپ

تبلت

خدمات

فروش

مزایده

مناقصه

ارتباط

ماارتباط با

ماتماس با

می را اضافه می کنیم و پس از آن و آن و متن از بعد زیرمجموعه برای

.بندیم

77

هرتااستمحدودعرضدادنحلراههازیرمجموعهگرفتنقرارهمزیربرای.7

.گیردقرارخطیکدرعنصر

.باشندمخفیهامجموعهزیرمیخوایمحاال.8

مجموعهزیر،هامجموعهازکدومهررویشدمنتقلموسکهزمانیمیخوایمحاال.9

.یابدنمایش

هربهدیگرهایلیستمجموعهرویلیستمجموعههرنگزاشتنتاثیربرای.10

.دهیممیابسولوتپوزیشنمجموعه

پیداییزیباشکلتابدهیدآنبهاستایلکمیآبشاریمنویزیباسازیبراینیزآخردر.نماید

.طراحی کنید8در 8یک صفحه شطرنج با استفاده از :تمرین

در استاندارد ترین و بهینه ترین حالت چند دیو می شود ؟

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

78

79

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

.کوچک گردند

: روش حل مرحله به مرحله

.وارد می کنیمرا و ابتدا ساختار . 1

640عرضرویفتوشاپباراهاآنهایاندازهوکنیدآمادهعکسپنج.2ذخیرههمکناررافایلوهاعکسسپسوقراردهیدپیکسل320ارتفاعدرپیکسل

.نمایید

80

ه کمک برای محتوا درون تگ بادی یک دیو کلی برای اسالیدشو طراحی می کنیم و ب.3

.لیست ، عکس ها را درون آن قرار می دهیم

عکس اول عکس اول

دومعکس دومعکس

سومعکس سومعکس

چهارمعکس چهارمعکس

پنجمعکس پنجمعکس

خواهیممیراعکسهراسالیدشورویموسآمدنازقبلوداریمعکستاپنجما.4

کلیعرضبابرابرپیکسل160ضربدرپنجپس،باشدمعلومآنچپسمتپیکسل160

.شدخواهدپیکسل800

.دهیممیمقدارکلیدیودیآیبهاستایلدرون#

سرریزکردنمخفی

{باکهاستشدهسرریزباشدبیشترعنصریکازمحتوایککهزمانی،نکته

.کنیممیمخفیرااضافاتمقدار

.باید تنظیمات هر لیست را درون استایل بنویسیمحال . 5

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

از چپ چیده می شوند

عرض هر لیست

.ها کوچکتر می شوندزمانی که ماوس آمد روی هر لیست ، بقیه تنظیمات . 6

.بزرگ می شودتنظیمات زمانی که ماوس آمد روی هر لیست ، . 7

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

.گردندهاعکسشدنهاوراز

640*2+40*3،رسیدخواهدپیکسل1400بهنهایتدرهمارنکدرتصاویرطول#

81

82

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

.از چپ به راست سیاه و سفید شوند

: روش حل مرحله به مرحله .را وارد می نماییمبه همراه ابتدا ساختار . 1

.دارد% 100به صورت پیشفرض عرض یک : نکته

تقسیم بندی کلی: کاربرد

تقسیم بندی داخلی: کاربرد

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

.می دهد عناصر دیگر در کنارش باشند

ی حال درون تگ بادی یک دیو کلی با پنج اسپن برای بخش های داخلی م. 2

.سازیم

83

.تنظیمات می دهیمدرون استایل دیو کلی را با آی دی . 3

.یک انیمیشن تعریف می کنیم برای تبدیل رنگ از سیاه به سفید. 4

.یک سری تنظیمات کلی برای انیمیشن می دهیمبه همه اسپن ها در استایل . 5

در آخر نیز برای تاخیر شروع تغییر رنگ هر حرف به هرکدوم از حروف تنظیم. 6.می دهیم

مشکی سفید

؟ چیست

و و بوت استرپ یه فریمورک هست ، فریمورک

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

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

و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها ، دکمه ها،است که شامل دستورات

.، تب ها ، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد

مختلفمتناسب شدن سایت برای دیوایس های : کاربرد بوتسترپ به صورت متن باز و رایگان در اختیار دیگران قرارداد و در را ، توییتر 2011در اگوست سال

.تبدیل شده بودبه محبوب ترین پروژه در سایت 2012فوریه

یک کتابخانه کدها نوشت که این کدها به صورت شرکت : بوتسترپ از کجا شروع شد

آماده برای سایت فراخوانی می شوند و ما به کمک این کتابخانه سایت های واکنش گرا

.می کنیمطراحی

: های عرضی بوتسترپ اندازه پیکسل به باال1200برای حدود

پیکسل1200پیکسل تا 980برای حدود

پیکسل980پیکسل تا 768برای حدود

پیکسل به پایین768برای حدود

84

85

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

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

.گردند

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

.، یک صفحه وب با بکگراند ریسپانسیو طراحی کنید: تمرین

.زمانی که صفحه سایت بزرگ بود زمینه آبی باشد

.صفحه سایت کوچکتر شد زمینه تغییر رنگ پیدا کند

.صفحه سایت باز هم کوچکتر شد زمینه تغییر رنگ پیدا کند

.می باشددر دستور : راه حل

86

: در خاصیت یر می توانید شکل ، مکان و وضعیت یک عنصر را تغییر دهید ، این تغیویژگی با استفاده از

به ما این امکان و میدهد تا عناصرمان را خاصیت باشد ، می تواند دو بعدی و یا سه بعدی .بچرخانیم ، بزرگ و کوچیک کنیم ، خم نماییم و بکشیم

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

: مثال

با عقربه های ساعتموافقده درجه چرخشبرای با عقربه های ساعتمخالفده درجه چرخشبرای

دو برابر اندازه واقعیبزرگنماییبرای

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

افقیجهت جا به جایی عنصر در عمودیجهت جا به جایی عنصر در

87

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

: راه حل به صورت مرحله ای

سی اس اس ریست . 1

.ابتدا یک ظرف مربعی می خواهیم تا هشت دایره را درون آن دایره وار بچینیم. 2

پیکسل128مثال

88

.به همه دایره ها خاصیت های مشابه می دهیم. 3

.مجایگاه دایره ها را روی ظرف باید مشخص نماییم که کمی محاسبات ذهنی ریاضی داری. ۴

که با چهار دایره اول را با پوزیشن مشخص می کنیم سپس چهار دایره دیگر را طوری تنظیم می کنیم. بقیه همپوشانی داشته باشند

89

انیمیشن. ۵

.سپس نام انیمیشن را به دایره ها می دهیم. 6

.ددر آخرین مرحله به هرکدام از دایره ها تاخیر در اجرای انیمیشن می دهیم تا به ترتیب شروع شون.7

90

: در همه مرورگرها اجرای دستورات

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

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

: مثال

91

: تگ استاندارد .را به صفحه می شناسانیمتوسط تکه کد داکتایپ نسخه

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

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

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

عالمت تعجب

سایتهای بزرگ با این تگ استاندارد شروع میشوند مثال همه

: ما چند نوع تگ داکتایپ داریم : سه حالت کلی دارد درواقع زبان

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

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

.استفاده کنیمزمانی مورد استفاده قرار می گیرد که بخواهیم در صفحات از قاب ها

.بسیار ساده شده استدر نوشتن

.می باشدیا پنجم ورژن

شدن کدنویسیقابل تشخیص تر + قابل درک تر + مفهومی تر : هدف

و و کم شدن استفاده از بی نیاز شدن از نرم افزارهای دیگر و : هدف با شرکت های دیگر برای توسعه فلش همکاری نمی کرد و فایل های فلش به این دلیل کنار گزاشته شد که شرکت

.جایگزینش شدامکان ویرایش نداشتند از این روفلش و

: عبارتند از های جدید در تگ جالب ترین و ،،: مثل المان های معنایی

و ،،،: مثل خصوصیت های کنترلی جدید فرم ها و : مثل المان های گرافیکی جدید

و : مثل المان های چندرسانه ای جدید

92

.تگ های معنایی جدید برای تعریف بخش های مختلف صفحه ارائه نموده است

،،مانندشدنداضافهبهکدنویسیبهتردرکبرایهاتگیکسریشدنترمفهومیبرایهاتگاینبرایکهدیگرهایتگخیلیو،،

.گردیدنداضافهصفحه

کارایی دارند ولی برای معناگرایی و درک بهتر به جای تمامی این تگ ها مانند تگ : نکته .از اسامی اینچنینی برای تگ ها استفاده می نماییم

را می توانیم به تقسیم نماییم یا برعکس هر را می توانیم به چند هر : نکته .هستند و استفاده از آنها تفاوتی نداردتقسیم کنیم لذا اینها مانند چند

.قرار دادن کار اشتباهی نیست اما ترجیحا برای وضوح بیشتر جدا باشدرا داخل : نکته

.که درجاهای مختلف سایت استفاده کنیمیک کالس تعریف می کنیم به نام : تکنیک کالس

93

94

آن عکس که وقتی موس روی هر تصویر آمد یک نوشته شفاف شیشه ای رویگالری تصاویری طراحی نمایید:تمرین

. باال بیاید

: تگ

.، برای عکس و توضیحات منتصب به تصویر می باشدیکی از تگ های استاندارد

توضیحات عکس

.می باشدبیان کننده توضیح یا راهنما برای عکس درون تگ تگ

95

: قالب

معرفی سرصفحه برای یک بخش یا یک صفحه:

معرفی ناوبری لینک ها:

.یک بالک برای مقاله ایجاد می کند:

معرفی یک بخش:

جهت و طرف محتوای سایت:

معرفی پاورقی برای یک بخش یا یک صفحه:

96

تگ

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

: مثال

:

:و

:

:

ودنشدادهخواصایناگر،باشدمیویدیونمایشفریمابعادخواصاین.شودمیدادهنمایشویدیوخودواقعیاندازهبهویدیوفریماندازه

تنظیموتوقفوپخشهایدکمهمرورگرتاشودمیباعثخاصیتاینمقداردهی.دهدنمایشکاربربهراصدا

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

97

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

و سایت سایت : دو نوع سایت داریم ت صفحات ثابت با اطالعات دستی هستند و به ازای هر تغییر باید سای: در سایت

.مجدد آپلود شوداطالعات درون دیتابیس ذخیره می گردد و از دیتابیس روی سایت : در سایت

.نمایش می دهد ، یک بار سایت آپلود می کنیم و سپس مطالب را اضافه می نماییم

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

98

.می باشد و سایت روی آن قرار میگیردکامپیوتری که دارای یک: سرور

هر کارت شبکه یک شناسه سخت افزاری دارد به نام

.هست2۵۵یک عدد با چهار بخش از عدد صفر تا عدد :

192.168.10.123مثل

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

99

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

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

مااغلبعلتهمینبه،است1۴8.2۵1.28.6۵آننظیرآدرسسپردنخاطربهازترسادهبسیار.کنیممیواردراآندامنهنام،هاسایتبهاتصالبرای

؟چیست.شودمیعوضماپیآیکنیممیروشنخاموشرامودمکهبارهر

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

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

.شودمیارسالسروربهدرخواستیک،کنیممیواردمرورگردرروسایتاسمماکهزمانی.کندمیارسالمابرایراپاسخونمودهپردازشرامادرخواستسرورآن

:داردوجودحالتدوپساطالعاتدرخواستارسال.1اطالعاتدرخواستدریافت.2

؟چیستهاسترویراسایتکهگوییمباشدمیمتصلاینترنتبهوهستدارایکهسروریازکوچکیفضایبههاست

.دهیمقرارتوانیممینیز

100

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

. صفحه نمایش بدهیم باید از فرم استفاده نماییممثل فرم ثبت نام

.که درخواست بررسی اطالعات می فرسته اگر درست بود کاربر وارد سایت می شودمثل فرم

: هر فرم یکی از این دو حالت را می تواند داشته باشد ارسال اطالعات به سرور

دریافت اطالعات از سرور

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

: که دو حالت دارد دارد به نام تگ فرم یک

” مثل نمایش خبردریافت اطالعات از سرور یا

مثل ثبت نظرارسال اطالعات به سرور

.فضایی است که می تواند کنترل های مختلف را در خود جای دهد،یک فرم ابزارهایی هستند که کاربر را قادر می سازند تا داده های خود را از طریق کادرهای ،کنترل های

در فرم وارد گزینشی دکمه های ،لیست های بازشو ،متنی .کرده و سپس آنها را به مقصد ارسال کند

101

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

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

.بدهیمو ، به کنترل ها برای استایل دادن می توانیم اتریبیوت : نکته

.یک فرم ثبت نام طراحی نمایید: تمرین

102

: فرم تگ داخل تگ

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

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

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

: تگ در ویژگی : مثال متن

اسم شما

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

: پسورد مثال

.میشوده و به جای آنها دایره یا ستاره نمایش داددنمیدهایجاد تکست باکس برای دریافت پسورد که کاراکترها را نمایش

: تیک زدن مثال

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

.ها باید یکسان باشدنام کل مرد یا زنمثال کند که کاربر انتخاب کرده را مشخص می مقداری ویژگی ،در مقدار

: مثال تیک زدن

خوردن مثل نظرسنجیتیک ایجاد مربع برای

103

: مثال ایجاد دکمه

.برچسب روی دکمه می باشدویژگی ،در مقدار

: دکمه پاک کردن مثال

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

: مثال دکمه آپلود عکس و فایل

تگ

.تکست ایریا محلی که ما و کاربران می توانیم در آن متن طوالنی چند خطی بنویسیم

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

104

طراحی لیست کشویی

مثل ود و شلیستی از اسامی هست که وقتی روی آن کلیک می کنیم لیست اسامی دراپ لیست کشویی ، .آکاردئون پایین بیایدآبشار یا

برای مثال

105

: تگ

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

: در تگ ویژگی بهگزینهآن،شودتنظیمبرابرلیستدرایگزینهبرایخاصیتاینمقدارکهصورتیدر

ظهلحهردرلیستیهردر.شودمیدادهنمایشاولواستشدهانتخابلیستدرفرضپیشصورت.باشدتواندمیگزینهیکحداکثر

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

: در تگ ویژگی برای تگ . تنظیم شود ، لیست غیر فعال خواهد بوددر صورتی که مقدار این خاصیت برابر

.نیز میتوان از ویژگی غیرفعال استفاده نمود

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

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

: در تگ ویژگی ه طور ب، توسط این خاصیت می توان تعداد آیتم های قابل مشاهده در لیست را در حال عادی تعیین کرد

.استپیش فرض فقط یک آیتم از لیست قابل مشاهده

106

: در تگ تگ

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

.نیستدیگر ، در لیست نمایش داده می شود ولی عمال قابل انتخاب

107

: ویژگی های تگ

مقصدصفحهیافایلبهمادکمهرویکلیکازبعدکهگیردمیرامقداریویژگی.دهیمقراراکشنویژگیمقداررامقصدصفحهیافایلفرمتونامبایدلذاشویممنتقل

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

کاربردسادهوصفحهدرلذامثلداردسرورسمتنویسیبرنامهزبان.ندارد

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

.کندمیارسالسروربهرافرمهایکنترلمحتویاتمتداین:طولیابودهاسکیکدکاراکترهایازغیرکاراکترهاییشاملفرمهایکنترلمقادیرچنانچه

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

یمارسالمقصدآدرسبهکاملپکصورتبهرافرمهایکنترلاطالعاتروشاین:.کند

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

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

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

108

: تگ

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

.آن را تشکیل می دهند

: تگ بسته استفاده می شود ، متنی که بین تگ باز و از این تگ برای ایجاد عنوان برای کادر

.بگیرد ، تعیین کننده عنوان کادر استقرار

: در تگ ویژگی محل قرار گیری عنوان را در این تگ تعیین میکند ، مقدار هایی که این خصوصیت می پذیرد

،،،: عبارتند از

109

: تگ

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

،کنیمطراحیآنبراییکبخواهیموباشیمداشتهبارادیوییدکمهیکاگرمثالبراییعنیرادیوییدکمهبرابرراتگخاصیت،رادیوییدکمهوبینارتباطایجادبرای

خودرویبرکردنکلیکهمانندنوشتهرویبرکردنکلیکصورتایندر،دهیممیقرار.استنظرموردکنترل

110

: در تگ خصوصیت

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

فادهاستموردفیلددروناضافیتوضیحاتینمایشبرایوشوددادهتخصیص.گیردمیقرار

: در تگ خصوصیت

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

کاربرینام

.نماییدفارسیوازاستفادهبدونرامتن:تمرین

111

چیست ؟ و تفاوت

: پاسخ

. می باشددکمه .می باشددکمه

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

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

.دادخواهدرخ

112

:ریسپانسیوطراحی

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

113

:ریسپانسیوطراحی

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

.کنندمیاستفادهاینترنتی

ساختارآندرشودمیگفتهگراواکنشطراحیفارسیدرکه

درتنمسایزوصفحهعرضتنظیمباعثکهشودمیطراحیشناورصورتبهسایتهایالیه

.شودمیانجامخودکارکامالصورتبهکاراینکهشودمیمختلفابعاد

،تبلتمانندمختلفهایدستگاهتغییربهنسبتسایتواکنشبرایگراواکنشسایت

.میگیردرارقاستفادهموردهارزولیشنتغییرهمچنینوهوشمندتلویزیون،لپتاپ،موبایل

طـــولی برایاندازه های

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

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

تبلت های بزرگ تبلت فون ها

تلفن های کوچک

باشدپیکسل1200آنهاعرضحداکثروهستندنمایشصفحهنوعازکههاییرسانهدریعنیدستور

:ریسپانسیوسایت

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

114

@دستور

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

.نمایدمیارائه

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

باشدپیکسل1200آنهاعرضحداکثروهستندنمایشصفحهنوعازکههاییرسانهدریعنیدستور

:هایحالتانواع

عرضحداقل

عرضحداکثر

ارتفاعحداقل

ارتفاعحداکثر

.دهندمیآبیبهزمینهرنگتغییرپیکسل۴80ازبزرگترهایعرض:مثال

115

:ریسپانسیوسایزهای

برایایدبلذاکنیممیسایتطراحیریسپانسیوهایسایتبرایعرضیسایزچهاردرمعموال

.دهیمانجامطراحیوکدنویسیبارچهارسایتهر

پیکسل به باال1900

پیکسل به باال1200

پیکسل به باال780

پیکسل به پایین۴80

116

مربع را در دو سطر با شش مربع طراحی نمایید که صفحه 12با استفاده از طراحی ریسپانسیو :تمرین .پیکسل رسید از شش مربع به چهار مربع در سه سطر تغییر یابد800مرورگر به عرض

.، یک صفحه وب با بکگراند ریسپانسیو طراحی کنید: تمرین

.زمانی که صفحه سایت بزرگ بود زمینه آبی باشد

.صفحه سایت کوچکتر شد زمینه تغییر رنگ پیدا کند

.صفحه سایت باز هم کوچکتر شد زمینه تغییر رنگ پیدا کند

.می باشددر دستور : راه حل

: راه حل

درست کرده و % 100به عرض یک .درون آن قرار دهیدها را به عنوان مربع

117

مربع را در دو سطر با شش مربع طراحی نمایید که صفحه 12با استفاده از طراحی ریسپانسیو :تمرین .پیکسل رسید از شش مربع به چهار مربع در سه سطر تغییر یابد800مرورگر به عرض

: حل تمرین

سی اس اس ریست. 1

تا تگ درونش می سازیم 12تگ کلی با یک . 2

.حال باید طوری مربع ها را چیدمان کنیم تا در دو سطر شش تایی قرار گیرند. 3

118

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

123۴۵67

.به اندازه یک ششم از کل فضای صد در صدی را در نظر می گیریمپس در گام اول برای هر بالک یا 16.66=صد تقسیم بر شش

.مشکلی که االن داریم این هست که فاصله ها را نداریم.بالک داریم و هفت تا فاصله باید از آنها کم کنیم6ما

.استفاده می کنیماگر خواستید از یک مقدار نامشخص یک مقدار مشخص را کم کنید از دستور

.آخر به انتهای صفحه چسبیده و فاصله نداردها فاصله دارند ولی از چپ مشکلی که هست همه

.کم کنیمپیکسل از 12پیکسل ، 10فقط کافیست به جای

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

119

: پس کد به این صورت است . ۵

.دیابپیکسل رسید از شش مربع به چهار مربع در سه سطر تغییر 800صفحه مرورگر به عرض حال . 6.استفاده می کنیمبنابر این برای ریسپانسیو نمودن در سی اس اس از کد

.حاال می خواهیم کمی با رنگ مربع ها بازی کنیم. 7

120

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

و2و1و0مانندشودمیگزاشتهصعودیصورتبهاعدادجایبهبارهردر.شودمیاعمالتنظیمات،فرمولازآمدهدستبهشمارهبالذا،آخرالیو3

.پایان تمرین مربع های ریسپانسیو

121

:تگبهرامرورگرکهشودمیاستفادهمرورگررویهمکناروبسایتچندنمایشبرای

بهراوبسایتیکقسمتهردروکندمیبندیتقسیمستونییاسطریصورت.گزاردمینمایش

هاستونتعریفبرایویژگیسطرهاتعریفبرایویژگی

.هستپذیرامکان(باقیماندهمقدارکل)ستارهیاپیکسلیادرصدبااینهادهیمقدارکه

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

:تودرتوهایفریم

122

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

:تگدروهایویژگی.شودمیاستفادهاندازهکردنمشخصبرایعرضوارتفاعویژگیاز

توانیماماشودمیبیانپیکسلحسببرفرضپیشطوربههاصفتاینمقدار.کردبیاننیز%80مثالبرایدرصدحسببرراآنها

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

.کنیداستفاده:گرددبرمیدرصفتبه،لینکیکصفت

گوگل

123

.را نمایش دهدپیکسل که سایت 600در800یک صفحه طراحی نمایید با سایز : تمرین

: راه حل

124

درونشدکلیکعکسهررویکهعکسسهویکبانماییدطراحیصفحهیک:تمرین

.یابدنمایشبزرگش

عکس کوچک عکس کوچک عکس کوچک

:حلراه

یکبهوباشدخالیکادرکهداریممیبررادر

مثال،دهیممی

:دهیممیلینکهاعکسبهسپس

.یابدنمایشدرتصویرتادهیممیقراربرابررامقدار

125

درونشدکلیکعکسهررویکهعکسسهویکبانماییدطراحیصفحهیک:تمرین

.یابدنمایشبزرگش

عکس کوچک

:دستورات

عکس کوچک عکس کوچک

126

کلطوربهیاهمانیاقالب؟چیستیاقالبرانآطرحبلکه،شماسایتآمیزیرنگتنهانهقالب،شماستسایتظاهرهمان

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

استیناسایتقالبویژگیهایاز،میگویندپوستهیاوقالب،دهدمیتشکیلرا.دکننمیتغییرآنگرافیکیافکت،شکل،رنگسایتصفحاتکلیهدرکه

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

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

سایتصفحاتهمهدریایایامثلعناصریکسریسایتهادر.سازیممیبارامشترکعناصراینکههستندمشترک

.کنیممیاستفادهافزارنرممانندافزارهایینرمازساختبرای

127

SVG.فرمت استاندارد تصاویر برداری استو مخفف

.با زوم کردن و بزرگ شدن هرگز تغییر کیفیت نمی دهندفایل های آنهاچقدرهرکهباشدمیتصاویرکیفیت،باشدهتولیدگرافیکاصلیمحاسنازیکی

میشنانیگرافیکآیتمهرهمچنینوکندنمیپیداکاهشکیفیتکنیدبزرگیاوکوچکرا.باشدمیپذیر

.می باشداستاندارد های توصیه شده توسط از ترمهمهمهازودارندرامتنیادیتورهرباویرایشقابلیتتوسطشدهتولیدتصاویر

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

.برای ایجاد اشکال گرافیکی و اشکال انیمیشن می باشدکاربرد

: مزیت های مقیاس پذیر هست

.عناصر داخل را می توان انیمیشن نمود.ویرایش می شودو نرم افزار با فرمت

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

با احترام ، تورج امین فر