تخفیف های ویژه عیدانه توسینسو
تا 60 درصد تخفیف ویژه
00ساعت 00دقیقه 00ثانیه

آموزش طراحی سایت صفر تا صد قسمت 6 : کار با تصاویر در HTML

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

  1. یاد میگیریم که چگونه بوسیله برچسب img به صفحات خود تصاویر مختلفی اضافه کنیم.
  2. متوجه می شویم که خصوصیت alt در برچسب img چه تاثیری در سئو سایت شما خواهد داشت.
  3. با نحوه مشخص کردن سایز تصاویر (طول و ارتفاع) آشنا خواهیم شد.
  4. یاد میگیریم که چگونه تصاویر خود را تبدیل به لینک کنیم تا کاربران با کلیک بر روی تصاویر به یک صفحه دیگر هدایت شوند.
  5. یک آشنایی اولیه با محیط Photoshop خواهیم داشت، اینکه چگونه می توانیم در محیط فتوشاپ مستندات جدید ایجاد کنیم.
  6. با مفهوم Pixel آشنا می شویم و یاد میگیریم که Resolution چه تاثیری بر روی کیفیت تصویر و حجم آن دارد. همچنین با انتخاب Resolution بهینه برای استفاده از تصاویر در محیط وب آشنا خواهیم شد.
  7. انواع فایل های gif و jpeg و png را بررسی می کنیم و می گوییم که این نوع از تصاویر چه تفاوت هایی با هم دارند و از هر نوع ذکر شده برای چه نوع تصاویری باید استفاده کنیم.
  8. در محیط فتوشاپ یک دکمه ساده طراحی کرده و از دکمه طراحی شده برای ایجاد لینک در صفحات وب استفاده می کنیم.
  9. با مفهوم لایه ها در فتوشاپ به صورت خیلی مقدماتی آشنا می شویم.
  10. با پنجره Layer Style در فتوشاپ آشنا شده و از آن برای ایجاد یک دکمه ساده استفاده می کنیم.
  11. با ابزار Text در فتوشاپ آشنا می شویم و بوسیله آن برای تصویر دکمه ایجاد شده یک متن ایجاد می کنیم.

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

آموزش طراحی وب


آموزش طراحی وب





تهیه کننده: حسین احمدی
منبع: ITPRO
#آموزش_html #کاربرد_برچسب_tag_در_html #آموزش_طراحی_وب #pixel_چیست_و_تفاوت_آن_با_resolution #استفاده_از_تصاویر_در_html #تگ_img_در_html #دوره_طراحی_وب #آشنایی_با_فتوشاپ #ایجاد_دکمه_وب_در_فتوشاپ #انتخاب_تصویر_مناسب_برای_صفحات_وب
عنوان
1 آموزش طراحی سایت صفر تا صد قسمت 1 : مقدمه ای بر دوره 23′:39″ رایگان
2 آموزش طراحی سایت صفر تا صد قسمت 2 : ساختار HTML 32′:29″ 9,900
3 آموزش طراحی سایت صفر تا صد قسمت 3 : قالب بندی متن ها 41′:38″ 9,900
4 آموزش طراحی سایت صفر تا صد قسمت 4 : ماهیت برچسب ها در HTML 50′:55″ 11,880
5 آموزش طراحی سایت صفر تا صد قسمت 5 : استفاده از Link ها 37′:28″ 7,920
6 آموزش طراحی سایت صفر تا صد قسمت 6 : کار با تصاویر در HTML 27′:0″ رایگان
7 آموزش طراحی سایت صفر تا صد قسمت 7 : کار با جداول در HTML 36′:56″ 7,920
8 آموزش طراحی سایت صفر تا صد قسمت 8 : فرم ها و ورود اطلاعات 54′:58″ 14,810
9 آموزش طراحی سایت صفر تا صد قسمت 9 : آشنایی اولیه با CSS 48′:21″ رایگان
10 آموزش طراحی سایت صفر تا صد قسمت 10 : کار با فونت و متن در CSS 32′:47″ 9,900
11 آموزش طراحی سایت صفر تا صد قسمت 11 : بک گراند در CSS 21′:0″ 7,920
12 آموزش طراحی سایت صفر تا صد قسمت 12 : Display و Visibility در CSS 11′:39″ رایگان
13 آموزش طراحی سایت صفر تا صد قسمت 13 : مفهوم BoxModel 31′:15″ 13,860
14 آموزش طراحی سایت صفر تا صد قسمت 14 : Position ها در HTML و CSS 27′:31″ 11,880
15 آموزش طراحی سایت صفر تا صد قسمت 15 : استفاده از Pseudo Class ها 18′:36″ رایگان
16 آموزش طراحی سایت صفر تا صد قسمت 16 : ایجاد Navigation ها 16′:3″ 9,900
17 آموزش طراحی سایت صفر تا صد قسمت 17 : ایجاد منوهای کشویی با HTML 21′:48″ 9,900
18 آموزش طراحی سایت صفر تا صد قسمت 18 : ایجاد Mega Menu در CSS 9′:13″ رایگان
19 آموزش طراحی سایت صفر تا صد قسمت 19 : خاصیت Float و Layout صفحات 34′:23″ 12,830
20 آموزش طراحی سایت صفر تا صد قسمت 20 : آشنایی با Pseudo Element ها 15′:52″ رایگان
21 آموزش طراحی سایت صفر تا صد قسمت 21 : آشنایی با Grid System 1:5′:29″ 18,770
22 آموزش طراحی سایت صفر تا صد قسمت 22 : آموزش CSS Reset 6′:32″ رایگان
23 آموزش طراحی سایت صفر تا صد قسمت 23 : آموزش HTML5 34′:56″ 7,270
24 آموزش طراحی سایت صفر تا صد قسمت 24 : طراحی وب سایت خبری : بخش 1 47′:39″ 9,900
25 آموزش طراحی سایت صفر تا صد قسمت 25 : کار با فونت های شخصی در CSS 15′:57″ رایگان
26 آموزش طراحی سایت صفر تا صد قسمت 26 : طراحی وب سایت خبری : بخش 2 1:2′:1″ 13,860
27 آموزش طراحی سایت صفر تا صد قسمت 27 : طراحی وب سایت خبری : بخش 3 37′:24″ 5,940
28 آموزش طراحی سایت صفر تا صد قسمت 28 : آموزش CSS3 21′:0″ رایگان
29 آموزش طراحی سایت صفر تا صد قسمت 29 : Background و Color در CSS3 23′:45″ 7,920
30 آموزش طراحی سایت صفر تا صد قسمت 30 : آشنایی با Gradient در CSS3 17′:9″ رایگان
31 آموزش طراحی سایت صفر تا صد قسمت 31 : کار با سایه ها در CSS3 21′:25″ 10,850
32 آموزش طراحی سایت صفر تا صد قسمت 32 : کار با متن در CSS3 10′:48″ رایگان
33 آموزش طراحی سایت صفر تا صد قسمت 33 : Transform ها در CSS3 18′:2″ 8,870
34 آموزش طراحی سایت صفر تا صد قسمت 34 : محیط سه بعدی (3D) در CSS 17′:11″ 8,870
35 آموزش طراحی سایت صفر تا صد قسمت 34 : Transition در CSS3 15′:51″ رایگان
36 آموزش طراحی سایت صفر تا صد قسمت 36 : ایجاد مکعب سه بعدی (3D Cube) 20′:23″ 10,850
37 آموزش طراحی سایت صفر تا صد قسمت 37 : ایجاد Animation در CSS3 23′:28″ 9,900
38 آموزش طراحی سایت صفر تا صد قسمت 38 : Multiple Columns 16′:21″ رایگان
39 آموزش طراحی سایت صفر تا صد قسمت 39 : آشنایی با Flexbox در CSS3 18′:27″ رایگان
40 آموزش طراحی سایت صفر تا صد قسمت 40 : طراحی واکنشگرا یا Responsive 33′:35″ 17,550
41 آموزش طراحی سایت صفر تا صد قسمت 41 : تکنیک Sprite Images 20′:5″ 8,870
42 آموزش طراحی سایت صفر تا صد قسمت 42 : آشنایی با Font Awesome 19′:38″ رایگان
43 آموزش طراحی سایت صفر تا صد قسمت 43 : آشنایی با تکنیک Flipcard 13′:26″ 7,650
44 آموزش طراحی سایت صفر تا صد قسمت 44 : تکنیک Hover Effect 17′:23″ رایگان
45 آموزش طراحی سایت صفر تا صد قسمت 44: آموزش جاوااسکریپت 15′:49″ رایگان
46 آموزش طراحی سایت صفر تا صد قسمت 46 : مفاهیم اولیه جاوا اسکریپت 20′:10″ رایگان
47 آموزش طراحی سایت صفر تا صد قسمت 47 : نوع های داده و عملگرها 42′:24″ 14,810
48 آموزش طراحی سایت صفر تا صد قسمت 48 : مباحث تکمیلی نوع های داده 30′:15″ رایگان
49 آموزش طراحی سایت صفر تا صد قسمت 49 : آشنایی با حلقه ها (Loops) 21′:0″ 8,870
50 آموزش طراحی سایت صفر تا صد قسمت 50 : دستورات کنترلی if و switch 19′:31″ رایگان
51 آموزش طراحی سایت صفر تا صد قسمت 51 : آشنایی با توابع (Functions) 18′:34″ 9,900
52 آموزش طراحی سایت صفر تا صد قسمت 52 : آموزش کار با DOM 40′:16″ 16,790
53 آموزش طراحی سایت صفر تا صد قسمت 53 : آموزش کار با DOM 14′:15″ 8,870
54 آموزش طراحی سایت صفر تا صد قسمت 54 : آموزش کار با DOM 5′:31″ رایگان
55 آموزش طراحی سایت صفر تا صد قسمت 55 : آموزش کار با DOM 54′:9″ 15,840
56 آموزش طراحی سایت صفر تا صد قسمت 56 : آشنایی با BOM 28′:25″ رایگان
57 آموزش طراحی سایت صفر تا صد قسمت 57 : کار با فرم ها در JavaScript 34′:19″ 8,870
58 آموزش طراحی سایت صفر تا صد قسمت 58 : آموزش Timing Events 12′:16″ رایگان
59 آموزش طراحی سایت صفر تا صد قسمت 59 : چند مثال کاربردی JavaScript 32′:45″ 8,870
زمان و قیمت کل 26:21′:5″ 378,410
3 نظر
ابوالفضل رهنما

سلام

مهندس

1)در مورد svgها توضیح دهید و درمورد کاربرد آن در صفحات وب وایا اینکه استفاده از این فرمت را توصیه میکنید یانه

2)عکسها را در بانک اطلاعاتی ذخیره کنیم ویا در فولدر خاصی(مثلا تعداد 100000عکس پرسنل را داریم و یا عکس اطلاعات طبقه بندی شده )

باتشکر

zahra .m

سلام استاد.وقت شما بخیر

وقتی از خصیصۀ align در تگ img استفاده میکنم تغییری تو جهت نمایش تصویر برام ایجاد نمیکنه. ولی وقتی تگ img رو داخل تگ p میذارم و این خصیصه رو در تگ p مقدار دهی میکنم تغییرات روش اعمال میشه! البته در تگ p هم مقدار justify برای متون عمل نمیکنه!

استاد لطفا راهنماییم کنید، مشکل کجاست؟

حسین احمدی

سلام و عرض ادب، در مورد align این خصوصیت دیگه مورد استفاده قرار نمیگیره و در نسخه HTML5 پشتیبانی نمیشه. به جای align باید از قابلیت text-align در CSS استفاده کنید که در قسمت های بعدی در موردش صحبت کردیم.


ابوالفضل جان، من پستت رو تازه دیدم! در مورد svg ها بستگی داره که کجا استفاده بشه، برای مثال، تو نقشه متخصصین سایت itpro از svg استفاده شده، اگر نیاز به رسم گرافیکی به صورت داینامیک هست استفاده از svg توصیه میشه.

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

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×