Скачать презентацию Занятия 6 — 7 Начать обучение Тема
Занятие 6-7 Вставка графического изображения.ppt
- Количество слайдов: 54
Скачать презентацию Занятия 6 — 7 Начать обучение Тема
Скачать презентацию Занятия 6 — 7 Начать обучение Тема
Занятия № 6 - 7 Начать обучение Тема: Вставка графического изображения и создание Курс ведёт : фона web-страницы Сургучёва Ирина Николаевна Для связи: E-mail: lara 1233@yandex. ru Красноярск - 2012 © Surgucheva Irina Skype: lovez_snov_irena
Приветствую Вас на курсе: «Основы сайтостроения на языках HTML и CSS» . Сегодня мы продолжим знакомство с языком HTML и познакомимся с тегом отвечающими за вставку графического изображения. А также, научимся создавать фон у нашей web-странички. Занятие сложное и включает много статей и объяснений, пожалуйста не опускайте прочтение теоретического материала. Это нужно знать. Мой Вам совет заведите себе тетрадь 48 листов и всю теорию записывайте в тетрадь, выделяя самые главные определения, теги, схемы и т. п. это очень нужно! Так лучше будет усваиваться материл и Вы быстрее будете запоминать. Я предлагаю это Вам потому как, проверяя Ваши практические работы и просматривая сколько попыток Вы сделали, чтобы пройти тест, пришла к выводу, что очень многое Вы выполняете не подумав, а лишь бы скорее сделать – это не выход. В результате у Вас все время будут ошибки и недочеты и любой тест Вы будете проходить не с первого раза, а с 5 -го или 10 -го. Пожалуйста, не торопитесь сдавать тест или лабораторную у вас на изучение есть неделя – полторы, чтобы изучить, записать основное и выполнить задание. Удачного обучения! Графика на web-страницах Подготовка графики для web Вставка графического изображения Создание фона web-страницы Подведём итог
В большинстве Web-страниц встречается графика. Она позволяет красочно и наглядно представить информацию. Во многих случаях лучше показать картинку, чем давать длинное текстовое описание. Существуют два способа размещения графических изображений на странице: • вставка отдельных картинок; • заполнение фона картинкой. В любом случае графическое изображение берется из файла. На каждую Web-страницу можно поместить любое количество иллюстраций. Вы можете использовать готовые графические изображения или создать их сами. Графические изображения, которые вы вставляете в свои Webдокументы, должны быть созданы в таком графическом формате, который поддерживается браузером. Стандартные форматы Web-графики GIF, JPG и PNG. Размеры их файлов минимальны по сравнению с другими форматами, что значительно сокращает время загрузки из сети.
Статья «Графика для web» - http: //wmhelp. net/articles/article/06. 05. 20056813 -115. html Сайт: графика для web - http: //webimg. ru/ Скачать пробную версию Adobe Photoshop - http: //photoshop. demiart. ru/photoshop/download_photoshop_ 7. shtml В основном для редактирования и обработки изображений для web-проекта используется популярное программное обеспечение – Adobe Photoshop. Теоретическую часть «Подготовка графики для web» Вы можете изучить по ссылкам, которые написаны выше. Также, дана ссылка откуда Вы можете скачать пробную и неполную версию программы Adobe Photoshop CS 2 (это в том случае если данное ПО у Вас не установлено). Я сразу перейду к практики и расскажу Вам как уменьшить изображение, сделать кадрирование и сохранить в нужном формате. Этого пока будет достаточно, но данная программа нам ещё понадобится. Вы должны установить программу Adobe Photoshop или воспользоваться Photoshop on-line.
1. Откройте программу Adobe Photoshop (у меня установлена англ. версия) 2. File (Файл) Open(открыть) Выберите файл, который будете редактировать ок 3. Произведём настройки: Image (Изображение) Mode(режим) RGB 4. Произведем кадрирование – это нужно делать не всегда, а лишь в тех случаях, когда нужно например удалить лишний фон. Для этого выполним следующие действия: • на панели инструментов выберите инструмент Crop Tool «кадрирования» . • в данном примере я решила обрезать лишний фон, как я произвела выделение Вы можете посмотреть на скриншоте представленном ниже. • после выделения нажимаем двойным щелчком по выделенному или нажимаем клавишу ENTER на клавиатуре результат все что не выделено обрежется. 5. Произведём настройки: Image (Изображение) Adjustment(коррекция) Brightness/Contrast (яркость/контраст) настройте по своему усмотрению. 6. Сохраним определенным образом (смотреть скриншоты)
Посмотреть результат до и после обработки
До обработки После обработки Обратите внимание, изменились: внешний вид, размеры изображения по ширине и высоте и размер (вес) файла, а как Вам известно, чем меньше размер изображения тем быстрее файл прогружается на web-странице.
Другой вариант, когда изображение нам нужно полностью и кадрировать его не надо, а вот его размеры нужно уменьшить. Конечно, размер изображения можно настроить при помощи атрибутов, но желательно подготавливать графические файлы в программе Adobe Photoshop, кроме того иногда это просто необходимо (например для создание баннера или «шапки» сайта). Открываем файл, меняем размер изображения и сохраняем как для web. Чтобы просмотреть скриншоты нажмите на соответствующую картинку.
Image(изображение) Image size(размер изображения)
Ставим галочку Constrain proportions (сохранять пропорции) и вводим нужное нам значение, например width(ширина)=400, при этом значение height(высота) меняется автоматически. Если галочку убрать и принудительно ввести пропорции высоты и ширины, то изображение исказится. Нажимаем ок и сохраняем изображение как для web выбрав формат jpeg.
Итак, мы переходим к изучению тега, который отвечает за вставку графического изображения на web-страницу. Но перед этим давайте с Вами договоримся, что все наши изображения, картинки, фото и т. п. будут хранится в одной папке. Для этого: 1. Откройте ранее созданную нами папку Изучение HTML, где у нас хранятся уже созданные нам ранее файлы. 2. Создайте в этой папке, папку с именем Images (изображения). 3. Если Вы уже отредактировали изображения в программе Adobe Photoshop, как было описано выше, то переместите обработанные изображения в эту папку. Внимание!!! Одинаковых названий файлов (графических изображений) у Вас не должно быть. И ещё хотелось бы отметить, что русских названий НЕ ДОЛЖНО БЫТЬ, иногда из-за этого возникают ошибки и Ваша картинка может просто не отобразится. Используйте латинские буквы или цифры, или то и другое для название файла. Правильно: 1. jpg; kisa 123. jpg; 23456. jpg; swet_1. jpg Можно, но лучше не использовать: Киса. jpg машина 12. jpg
Теперь у нас есть папка с картинками, давайте научимся вставлять их на webстраницу. Сначала немного теории: Вставка на страницу графического изображения из файла графического формата производится с помощью тега <IMG> (от англ, image – изображение) с указанием адреса файла в качестве аргумента атрибута SRC: <IMG SRC="адрес_графического_файла"> Данный тег одиночный и закрытия не требует. У данного тега есть атрибуты, которые мы подробно рассмотрим. Адрес графического файла – это либо URL-адрес, либо имя файла, возможно, с указанием пути. Например, для отображения графического файла 11. jpg, который я ранее сохранила в папку Images следует написать так: <IMG SRC="images/11. jpg"> Тег отвечающий за вставку изображения на web страницу Атрибут тега img задающий адрес изображения Папка в которой находится изображение Название файла с расширением, который будем использовать
Я решила вставить файл 11. jpg в нашу статью про антивирусные программы. Ниже представлены скриншоты, вставки тега и просмотр в браузере. Вы проделываете тоже самое, только используете своё изображение. Напоминаю, что изображение должно находиться в папке Images. Чтобы просмотреть скриншоты нажмите на соответствующую картинку.
Способ ускорения загрузки графики заключается в задании размеров прямоугольной области, в которой будет размещено графическое изображение, с помощью атрибутов WIDTH (ширина) и HEIGHT (высота), измеряемых в пикселах. Если указать эти атрибуты, то браузер сначала выделит место под графику, подготовит макет документа, отобразит текст и только потом загрузит графику. Браузер сжимает или растягивает изображение, встраивая его в рамки указанного размера. Пример указания размеров изображения: <IMG SRC="images/mashina. jpg" width= "300" height="200"> height Данные атрибуты актуально использовать, если Вы заранее не подготовили графические файлы в нужном размере и разрешении, например в программе Adobe Photoshop, как я описывала выше. Тогда на помощь приходят вышеуказанные атрибуты, которые изменяют размер и ускоряют скорость загрузки изображения. width Просмотреть скриншоты использования данных атрибутов
Чтобы просмотреть скриншоты нажмите на соответствующую картинку.
Графика обычно используется вместе с текстом, поэтому возникает задача выравнивания текста и графического изображения. Эта задача решается с помощью атрибута ALIGN тега <IMG> с применением различных аргументов. Например, мы можем пожелать, чтобы текст обтекал картинку справа или слева. Обычно картинка встраивается вплотную с текстом, что может быть некрасиво. Во избежание этого, можно задать пустые поля вокруг иллюстрации. Поля создаются с помощью атрибутов VSРАСЕ для верхнего и нижнего полей и НSPACE для боковых полей в теге <IMG>. Аргументы этих атрибутов указываются в виде чисел, определяющих размеры полей в пикселах. Синтаксис атрибутов и их значения можно посмотреть здесь. Примеры использования (для просмотра результата нажмите на картинку «глазик» ): 1. Изображением размером 300 х200 пикселей выровнено по правому краю, текст обтекает слева: <IMG SRC="images/mashina. jpg" width="300" height="200" align="right"> 2. Изображением размером 300 х200 пикселей выровнено по левому краю, текст обтекает справа: <IMG SRC="images/mashina. jpg" width="300" height="200" align="left"> 3. Изображением размером 300 х200 пикселей выровнено по левому краю, текст обтекает справа имеется вертикальный и горизонтальный отступы около изображения в размере 20 пикселей: <IMG SRC="images/mashina. jpg" width="300" height="200" align="left" vspace="20" hspace="20">
Изображением размером 300 х200 пикселей выровнено по левому краю, текст обтекает справа без отступов.
Изображением размером 300 х200 пикселей выровнено по правому краю, текст обтекает слева без отступов.
Изображением размером 300 х200 пикселей выровнено по левому краю, текст обтекает справа имеется вертикальный и горизонтальный отступы около изображения в размере 20 пикселей
Атрибут align определяет как рисунок будет выравниваться по краю и способ обтекания текстом. Синтаксис <img align="bottom | left | middle | right | top"> Атрибут vspace вертикальный отступ от изображения до окружающего контента Синтаксис <img vspace="отступ по вертикали"> Атрибут hspace горизонтальный отступ от изображения до окружающего контента Синтаксис <img hspace="отступ по горизонтали">
Следующий атрибут, который мы рассмотрим это создание рамки вокруг изображения. Изображение, помещаемое на web-страницу, можно поместить в рамку различной толщины. Для этого служит атрибут border тега <img>. По умолчанию рамка вокруг изображения не отображается за исключением случая, когда рисунок является ссылкой. При этом цвет рамки совпадает с цветом ссылок, заданных с помощью стиля или атрибута link тега <body>, но об этом мы поговорим позже, когда будем изучать ссылки. По умолчанию border="0", поэтому если рамка не нужна, то атрибут border не прописывается. Синтаксис <img border ="толщина рамки"> Чтобы просмотреть скриншоты нажмите на соответствующую картинку.
Атрибут alt устанавливает альтернативный текст для изображений. Такой текст позволяет получить текстовую информацию о рисунке при отключенной в браузере загрузке изображений. Поскольку загрузка изображений происходит после получения браузером информации о нем, то замещающий рисунок текст появляется раньше. А уже по мере загрузки текст будет сменяться изображением. Чтобы просмотреть как в браузере это выглядит, Вы должны отключить просмотр изображений. Для этого нужна зайти в свойства обозревателя, выбрать вкладку дополнительно и отключить отображать изображения. Показано на скриншотах ниже. Просмотреть скриншоты применения атрибута alt Синтаксис <img alt="текст"> Чтобы просмотреть скриншоты нажмите на соответствующую картинку
Внимание! После того как Вы просмотрите действие атрибута alt не забудьте перенастроить Ваш браузер назад, чтобы он снова отображал изображения. Напомню, для этого нужна зайти в Свойства обозревателя, выбрать вкладку Дополнительно и установить галочку Показывать изображения. Это не все атрибуты тега <img>, но они являются основными. На этом мы остановимся. Если кому-то интересно, то набрав в поисковой строке Яндекса: все атрибуты <img> Вы получите много ссылок на статьи, учебники языка html, где можете более подробно ознакомиться с данным тегом и его атрибутами. Чтобы просмотреть скриншоты нажмите на соответствующую картинку.
Фон на web-странице задается 2 -мя способами: цветом и графическим изображением. Сперва разберемся как задать фон цветом. И как обычно вначале немного теории. Цвет В HTML цвет задается одним из двух путей: с помощью шестнадцатеричного кода и по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный. Шестнадцатеричные цвета Для задания цветов в HTML используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Числа от 10 до 15 заменены латинскими буквами. В табл. 1 приведено соответствие десятичных и шестнадцатеричных чисел. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно (табл. 2). Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной.
Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставится символ решетки #, например #aa 69 cc. Типичный цвет, используемый в HTML, выглядит следующим образом: <body bgcolor ="#fa 8 e 47"> Здесь цвет фона веб-страницы задан как #fa 8 e 47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (fa) определяют красную составляющую цвета, цифры с третьей по четвертую (8 e) — зеленую, а последние две цифры (47) — синюю. В итоге получится такой цвет. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, общее количество цветов может быть 256 х256 = 16. 777. 216 комбинаций. Цветовая модель, основанная на красной, зеленой и синей составляющей получила название RGB (red, green, blue; красный, зеленый, синий). Эта модель аддитивная (от add — складывать), при которой сложение всех трех компонент образует белый цвет.
Чтобы легче ориентироваться в шестнадцатеричных цветах, примите во внимание некоторые правила. • Если значения компонент цвета одинаковы (например: #d 6 d 6 d 6), то получится серый оттенок. Чем больше число, тем светлее цвет, значения при этом меняются от #000000 (черный) до #ffffff (белый). • Ярко-красный цвет образуется, если красный компонент сделать максимальным (ff), а остальные компоненты обнулить. Цвет со значением #ff 0000 самый красный из возможных красных оттенков. Аналогично обстоит с зеленым цветом (#00 ff 00) и синим (#0000 ff). • Желтый цвет (#ffff 00) получается смешением красного с зеленым. Это хорошо видно на цветовом круге (рис. 1), где представлены основные цвета (красный, зеленый, синий) и дополнительные. К ним относятся желтый, голубой и фиолетовый (еще называемым пурпурным). Вообще, любой цвет можно получить смешением близлежащих к нему цветов. Так, голубой (#00 ffff) получается за счет объединения синего и зеленого цвета.
Цвета по шестнадцатеричным значениям не обязательно подбирать эмпирическим путем. Для этой цели подойдет графический редактор, умеющий работать с разными цветовыми моделями, например, Adobe Photoshop. На рис. 2 показано окно для выбора цвета в этой программе, линией обведено полученное шестнадцатеричное значение текущего цвета. Его можно скопировать и вставить к себе в код.
web-цвета Если установить качество цветопередачи монитора в 8 бит (256 цветов), то один и тот же цвет может показываться в разных браузерах по-своему. Это связано со способом отображения графики, когда браузер работает со своей собственной палитрой и не может показать цвет, который у него в палитре отсутствует. В этом случае цвет заменяется сочетанием пикселов других, близких к нему, цветов, имитирующих заданный. Чтобы цвет оставался неизменным в разных браузерах, ввели палитру так называемых веб-цветов. Веб-цветами называются такие цвета, для каждой составляющей — красной, зеленой и синей, устанавливается одно из шести значений — 0 (00), 51 (33), 102 (66), 153 (99), 204 (CC), 255 (FF). В скобках указано шестнадцатеричное значение данной компоненты. Общее количество цветов из всех возможных сочетаний дает 6 х6 х6 — 216 цветов. Пример веб-цвета — #33 ff 66. Основная особенность веб-цвета заключается в том, что он показывается одинаково во всех браузерах. В данный момент актуальность веб-цветов весьма мала из-за повышения качества мониторов и расширения их возможностей.
Цвета по названию Чтобы не запоминать совокупность цифр, вместо них можно использовать имена широко используемых цветов. В табл. 3 приведены имена популярных названий цветов.
Приступим к практике. Итак, как Вы узнали из статьи про цвет, его можно задавать 2 -мя способами: названием цвета на английском языке или используя код взятый в палитре цветов, например в программе Adobe Photoshop. Рассмотрим оба варианта. Чтобы задать фон цветом на web странице используется атрибут bgcolor тега body. Синтаксис <body bgcolor ="цвет">. . . </body> Продолжим редактировать нашу статью и теперь добавим фон на нашу страницу, сначала используя значение на английском языке и в этом нам поможет таблица названий цветов размещенная на 45 слайде данной презентации, затем используя палитру цветов подберем нужное шестнадцатеричное значение. Пример1. Используем название цвета Пример2. Используем шестнадцатеричное значение цвета
Следующий атрибут body который задает фон – это background. Описание Определяет изображение, которое будет использоваться в качестве фонового рисунка. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше окна браузера, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и текстом веб-страницы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей. Синтаксис <body background="URL">. . . </body> Сразу хочу пояснить, что для фонового рисунка используются специальные фоны, которые называются фоны для web. Таких фонов очень много в Internet, созданы даже целые сайты, на которых расположено большое количество таких фонов и где можно подобрать фон под свою web-страницу. Конечно, фон можно создать и самому, но это не входит в изучение нашего курса, поэтому мы будем пользоваться готовыми изображениями. Ниже расположено несколько ссылок на сайты с фонами. Перейдите по ним, просмотрите и скачайте себе несколько штук в папочку images.
Ссылки на сайты «Фоны для web» http: //fonegallery. narod. ru/cream. htm http: //www. lenagold. ru/fon/main. html Чтобы просмотреть скриншоты нажмите на соответствующую картинку. Примеры анимированных фонов Просмотреть код Хорошо подобрано фоновое изображение Примеры обычных фонов Плохо подобрано фоновое изображение
Подведём итог наших занятий. Мы рассмотрели с вами для чего нужна графика на web-страницах, рассмотрели различные виды настройки графических изображений в программе Adobe Photoshop и настройки при помощи атрибутов тега <img>. Научились сохранять изображения для web. Познакомились с тегом <img> и его атрибутами. Научились устанавливать фон на web-страницу при помощи обычных латинских названий цветов, с помощью шестнадцатеричного кода цвета и с помощью фоновых рисунков называемых - фонами для web. Узнали что фон на web-страницу можно установить с помощью атрибутов тега <body>. Лабораторная работа: 1. Продолжаем редактировать статью: в Internet скачать картинки антивирусных программ, которые у нас отображены в статье. Отредактировать графические изображения (если это нужно). Установить картинки в нужное место статьи. Сделать обтекание текста с отступами. Подобрать фон для нашей статьи - фоновым рисунком. Сохранить. Заархивировать. Отправить мне через сайт Виртуальной школы. 2. Тема: Обзор лучших фантастических фильмов за последние 5 лет. На основе материалов из Internet подобрать интересные данные, факты, изображения. Должен быть рейтинг фильмов. Далее должно быть описание включающее следующие данные: картинки из фильмов (возможна не одна), название фильма, год выхода, режиссер, актеры, аннотация фильма. Может быть интересные факты. Как оформить и в каком порядке подать данный материал полностью возлагаю на Вас. Хотелось бы, чтобы Вы использовали в своей работе все полученные знания по языку html и сделали свою работу красивой и информативной. Эту работу буду особо строго оценивать. Количество фильмов не менее 20. Удачи! В следующем уроке будем изучать ссылки.
Скачать презентацию Занятия 6 — 7 Начать обучение Тема
Занятие 6-7 Вставка графического изображения.ppt