Разделы презентаций
- Разное
- Английский язык
- Астрономия
- Алгебра
- Биология
- География
- Геометрия
- Детские презентации
- Информатика
- История
- Литература
- Математика
- Медицина
- Менеджмент
- Музыка
- МХК
- Немецкий язык
- ОБЖ
- Обществознание
- Окружающий мир
- Педагогика
- Русский язык
- Технология
- Физика
- Философия
- Химия
- Шаблоны, картинки для презентаций
- Экология
- Экономика
- Юриспруденция
Web-дизайн
Содержание
- 1. Web-дизайн
- 2. Web-дизайн – проектная деятельность по созданию средствами
- 3. Функции web-сайта: информирование и привлечение пользователей; выполнение
- 4. 2. Технологии создания web-сайта
- 5. Статические сайты и web-страницы – это сайты,
- 6. Динамические сайты и Web-страницы. Не существуют в
- 7. Достоинство - интерактивность: проверка правильности заполнения полей;
- 8. Правила при создании физической (файловой) структуры сайта:Имена
- 9. Простая Web-страница создается в текстовом редакторе (Notepad++
- 10. 3. Инструментальные средства для создания web-сайтовWeb-редакторы:- простые
- 11. Графические редакторы: Adobe PhotoShop, Adobe Flash,
- 12. 4. Структура HTML-документаФайлы имеют расширение .htm или
- 13. Слайд 13
- 14. Объект doctypeЯвляется сокращением от "Document Type Definition"
- 15. Вариант StrictКод не содержит элементов и атрибутов,
- 16. Вариант TransitionalКод может содержать устаревшие теги, вариант
- 17. Вариант FramesetАналогичен Transitional, но содержит также элементы
- 18. 5. Структура HTML-элемента (локальное форматирование) Содержимое под действием тега
- 19. Кавычки вокруг значения атрибута обязательны в тех
- 20. Цвет в Web1. Система шестнадцатеричного кодирования основана
- 21. Использование справочника по HTML1. Создать документ с
- 22. Использование справочника по HTML2. Создать заголовок второго
- 23. Теги, не имеющие атрибутов
- 24. Рекомендуемый ресурс http://htmlbook.ru
- 25. 6. Адресация в HTMLАбсолютная адресация не используетсяИспользуется
- 26. Пример 2HTML-документ расположен на один уровень выше, чем изображение
- 27. Пример 3HTML-документ расположен на два уровня выше, чем изображение
- 28. Пример 4HTML-документ расположен на один уровень ниже, чем изображение
- 29. Пример 5HTML-документ расположен на два уровня ниже, чем изображение
- 30. Пример 6
- 31. 7. Гиперссылки Можно разделить на 3 категории:
- 32. здесьСтруктура гиперссылкиКонечный якорьИсходный якорь
- 33. Виды адресовАбсолютный адрес - это полный адрес в Internet.
- 34. Примеры относительной адресации 1. Переход на другой
- 35. Глава 1 – переход на конкретный фрагмент
- 36. CSS – Cascading Style Sheets (иерархические стилевые
- 37. Структура CSS-элементаселектор {стилевое свойство 1: значение;стилевое свойство
- 38. Способы включения таблиц стилей в HTML-документВнешняя стилевая спецификацияВнедренные стилевые таблицыВнутренние стили
- 39. Внешняя стилевая спецификацияОпределяет стиль всего сайта.Является текстовым
- 40. Внедренные стилевые таблицыВ заголовок документа в теге
- 41. Внутренние стилиПрименяется к конкретному HTML-элементу внутри тега при помощи атрибута .Например:
- 42. Классы в стилевых спецификацияхКласс определяет разновидность стиля
- 43. Класс без указания имени элемента. Например: .my{color:#00ff00}Применяется к разным элементам. Например:
- 44. Cтиль для специфического элементаЛюбому элементу можно присвоить
- 45. Специальные элементыПсевдокласс – специальный селектор, определяющий, как
- 46. Иерархия и каскадность в стилевых спецификацияхИерархия –
- 47. 9. Установка к следующему семеструКонтрольная работа (файл
- 48. В следующем семестре – дифференцированный зачет (зачет
- 49. Спасибо за внимание!
- 50. Скачать презентанцию
Web-дизайн – проектная деятельность по созданию средствами web-технологий информационной архитектуры web-сайта с одновременным его художественным оформлением и оптимизацией программного кода в целях наиболее эффективного использования и продвижения в Интернет.Web-сайт (сокращенно сайт)
Слайды и текст этой презентации
Слайд 1«Web-дизайн.
Основные понятия»
ФГАОУ ВПО «Российский государственный профессионально-
педагогический университет»
Екатеринбург 2015
Преподаватель: Власова
Наталья Сергеевна,
Слайд 2Web-дизайн – проектная деятельность по созданию средствами web-технологий информационной архитектуры
web-сайта с одновременным его художественным оформлением и оптимизацией программного кода
в целях наиболее эффективного использования и продвижения в Интернет.Web-сайт (сокращенно сайт) – совокупность электронных документов частного лица или организации, расположенная в сети Интернет и объединенная под одним доменным именем или IP-адресом. Все web-сайты в совокупности составляют сеть WWW.
Web-страницы сайта связаны между собой взаимными гиперссылками.
1. Определение web-дизайна
Слайд 3Функции web-сайта:
информирование и привлечение пользователей;
выполнение каких-либо операций: интернет-банк,
платежные системы, интернет-магазины с регистрацией клиента и др.;
эстетическое воздействие.
Слайд 5Статические сайты и web-страницы – это сайты, сделанные по классической
технологии html. Всегда имеют один и тот же вид.
Достоинства
простота создания;нетребовательность к аппаратным ресурсам: не требуют поддержки скриптов и баз данных и могут быть размещены на абсолютно любом хостинге;
не создают почти никакой нагрузки на сервер;
могут включать в себя графику, анимацию и информацию, которая не должна часто и существенно изменяться.
Недостаток - отсутствие интерактивности (интерактивность – взаимодействие с другими пользователями)
Слайд 6Динамические сайты и Web-страницы.
Не существуют в неизменном виде на
сервере, а формируются при помощи скриптов.
Содержание и вид динамической
страницы с одним и тем же адресом может быть совершенно различным в зависимости от разных условий – например, в зависимости от введенного пользователем запроса и т. п. 
Слайд 7
Достоинство - интерактивность:
проверка правильности заполнения полей;
ввод запросов;
поиск по сайту;
отправка на сайт и сохранение своей информации;
общение с другими пользователями (гостевые книги, форумы) и др. Недостатки
требуют поддержку дополнительных технологий;
создают повышенную нагрузку на сервер;
использование скриптов означает потенциальную угрозу для безопасности.
Слайд 8Правила при создании физической (файловой) структуры сайта:
Имена директорий, документов HTML
и графических файлов должны быть латинскими буквами и только в
строчном регистре.Имена должны быть «смысловыми», чтобы легче ориентироваться в содержании страниц.
Файл, который запускает сайт должен называться index (index.html, index.htm, index.php). Именно это имя ищет серверная машина при открытии сайта.
Слайд 9Простая Web-страница создается в текстовом редакторе (Notepad++ или др.) как
текстовый документ и сохраняется с расширением .html или .htm.
Просматривается web-страница
в браузере (Opera, Internet Explorer, Google Chrome, Mozilla Firefox и др.)
Слайд 103. Инструментальные средства для создания web-сайтов
Web-редакторы:
- простые (показывают только исходный
код): NotePad и т.п.;
WYSIWYG-редакторы (What You See Is What
You Get – что видишь, то и получишь) помимо исходного кода показывают готовую web-страницу: Microsoft FrontPage, Adobe Dreamweaver, Adobe GoLive.CMS (Content Management System) – система управления контентом сайта: Joomla!, WordPress, Drupal и др.
Слайд 11 Графические редакторы: Adobe PhotoShop, Adobe Flash, CorelDRAW и др.
web-сервер Apache, Denwer, XAMPP и др.;
- FTP-клиенты – для
загрузки сайта на хостинг (FileZilla Client, SmartFTP, Far manager, Total Commander и др.). Многие web-редакторы имеют встроенный FTP-клиент. - браузеры: Google Chrome, Opera, Mozilla Firefox, Microsoft Internet Explorer и др.
Слайд 124. Структура HTML-документа
Файлы имеют расширение .htm или .html.
Содержат один тип
управляющих конструкций - теги (tags) – дескрипторы.
Все теги заключены в
угловые скобки < >. Обычно теги парные: начальный и конечный теги. Начальный – <> , конечный .
Парный тег называют еще контейнерный.
Некоторые теги не имеют обязательного парного тега, такой тег называют одиночный.
Слайд 14Объект doctype
Является сокращением от "Document Type Definition" ("Определение типа документа"),
используется
для двух целей:
• Браузеры Web – определяют, какой режим воспроизведения
они должны использовать.• Валидаторы – определяют, согласно каким правилам они должны проверять документ.
Слайд 15Вариант Strict
Код не содержит элементов и атрибутов, помеченных W3C как
«устаревшие» или «не одобряемые» (например: CENTER, FONT, U, align, background,
bgcolor, color, size).Декларация записывается в виде:
Doctype может отсутствовать.
Существует несколько видов doctype в HTML4.
Слайд 16Вариант Transitional
Код может содержать устаревшие теги, вариант введен в целях
совместимости со старыми версиями HTML.
Декларация записывается в виде:
"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Слайд 17Вариант Frameset
Аналогичен Transitional, но содержит также элементы для создания наборов
фреймов.
Декларация записывается в виде:
"http://www.w3.org/TR/html4/frameset.dtd">В HTML5 одна конструкция
Слайд 185. Структура HTML-элемента (локальное форматирование)
1”]
[имя атрибута 2]=[”значение атрибута 2”] ...
[имя атрибута
N]=[”значение атрибута N”]>Содержимое под действием тега
Слайд 19Кавычки вокруг значения атрибута обязательны в тех случаях, когда значение
это содержит какие-либо символы, кроме букв, цифр, точки или дефиса,
но с точки зрения совместимости с XML, лучше пользоваться кавычками всегда.Регистр букв в идентификаторах тегов и атрибутов не учитывается.
Регистр в значениях атрибутов учитывается.
Слайд 20Цвет в Web
1. Система шестнадцатеричного кодирования основана на трех компонентах
– красном (Red), зеленом (Green) и синем (Blue), - RGB
-. от 00 до FF2. 0 и 255 в десятичной системе счисления
3. По названию цвета
Значение любого цвета можно получить из PhotoShop
Слайд 21Использование справочника по HTML
1. Создать документ с синим цветом фона
белым текстом и отступом всех элементов от верхнего края на
30 px
Слайд 22Использование справочника по HTML
2. Создать заголовок второго уровня с выравниванием
по левому краю красного цвета шрифтом Verdana
Заголовок
2 
Слайд 256. Адресация в HTML
Абсолютная адресация не используется
Используется относительная адресация
Пример
1
Изображение расположено в одной папке (на одном уровне) с HTML-документом
src=“pic.jpg”>
Слайд 317. Гиперссылки
Можно разделить на 3 категории:
1. Внешняя – ссылка на
web-страницу, которая находится по другому адресу Internet (за пределами сайта).
Для ее организации используется абсолютный адрес.2. Внутренняя – ссылка на другую web-страницу внутри сайта. Для ее организации необходимо использовать относительный адрес.
3. Внутристраничная – ссылка на другую позицию внутри той же web-страницы.
Слайд 33Виды адресов
Абсолютный адрес - это полный адрес в Internet.
Относительный адрес – используется для адресации в пределах документа или совокупности документов на одном сервере.
URL указывается относительно каталога, из которого браузер первоначально загружает Web-страницу.
Применение относительных ссылок удобно, т.к. при каждом перемещении каталога не приходится менять все ссылки.
Слайд 34Примеры относительной адресации
1. Переход на другой документ на
одном уровне с документом, из которого делается ссылка
2.
Переход на документ, который находится на два уровня ниже<а href="/../../../folder3/doc2.html">
3. Переход на три уровня вверх, затем на один уровень вниз
Слайд 35
Глава 1 – переход на конкретный фрагмент текущего
документа.
Оглавление
Глава 1
Глава 2
Заголовок статьи
Глава 1
Текст, текст, текст, текст, текст,
текст, Глава 2
Текст, текст, текст, текст, текст, текст, текст, текст, текст, текст
Фрагмент должен быть помечен меткой с помощью тега
Глава 1
<а href="/../../../folder3/doc2.html#upr_20">
Слайд 36CSS – Cascading Style Sheets (иерархические стилевые спецификации или каскадные
таблицы стилей) не заменяют языка разметки, являются самостоятельной технологией, которая
применяется к тегу HTML.Назначение: позволяет автоматически изменить стиль HTML элемента на всех страницах сайта.
Например, мы первоначально задали на десяти web-страницах заголовкам H1 красный цвет. Затем решили изменить его на зеленый. Если H1 оформить на страницах обычным способом через тег , то нам придется десять раз изменить red на green (т.е. на зеленый). При использовании же таблицы стилей нам придется только один раз это сделать, изменив параметр red на green в самой таблице стилей.
Таблица стилей включает набор CSS-элементов, структура которых отличается от структуры HTML-элемента.
8. Определение CSS
Слайд 37Структура CSS-элемента
селектор {стилевое свойство 1: значение;
стилевое свойство 2: значение; …
стилевое свойство N: значение}
где селектор – имя HTML-элемента, атрибута CLASS,
или ID), стилевые свойства (например, font-family)стилевые свойства разделяются точкой с запятой.
Например:
h1 {font-family:arial; font-size:14pt}
Слайд 38Способы включения таблиц стилей в HTML-документ
Внешняя стилевая спецификация
Внедренные стилевые таблицы
Внутренние
стили
Слайд 39Внешняя стилевая спецификация
Определяет стиль всего сайта.
Является текстовым файлом с расширением
css.
HTML-документ должен иметь ссылку на внешнюю таблицу стилей при
помощи элемента , который располагается в элементе :
Слайд 40Внедренные стилевые таблицы
В заголовок документа в теге помещаются теги
и , а внутри этой пары тегов вводятся стилевые правила.
Слайд 41Внутренние стили
Применяется к конкретному HTML-элементу внутри тега при помощи
атрибута .
Например:
Слайд 42Классы в стилевых спецификациях
Класс определяет разновидность стиля в определенном теге,
используя атрибут class.
p.blue{color:blue}
p.red{color:red}
p.yellow{color:yellow}При использовании тега
необходимо установить атрибут CLASS:
Красный текст.
Синий текст.
Слайд 43Класс без указания имени элемента.
Например:
.my{color:#00ff00}
Применяется к разным элементам.
Например:
Слайд 44Cтиль для специфического элемента
Любому элементу можно присвоить идентификатор ID, и
затем поставить в соответствие этому элементу какой-либо стиль, используя ID.
Например:
#test {color:#00ffff}Теперь можно поставить этот стиль в соответствие любому элементу:
...
,...
Слайд 45Специальные элементы
Псевдокласс – специальный селектор, определяющий, как выглядит HTML-элемент в
определенный момент.
Например, псевдокласс, который устанавливает, как выглядят гиперссылки в определенные
моменты времени:a:link {… …. ….} – не посещенные ссылки;
a:visited {… …. ….} – посещенные ссылки;
a:active {… …. ….} – активные ссылки;
a:hover {… } – ссылка при наведении на нее фокуса.
Можно определить псевдокласс для первого символа элемента. Например, для абзаца:
p:first-letter {font-size:24pt}. Это удобно для задания спецэффектов выделения заглавных букв.
Слайд 46Иерархия и каскадность в стилевых спецификациях
Иерархия – соподчинение.
Соподчинение таблиц стилей.
Наибольший
приоритет имеет внутренний стиль (т.е. применяется в первую очередь), затем
внедренный стиль (применяется во вторую очередь).Наименьший приоритет имеет внешняя стилевая спецификация (применяется в последнюю очередь).
Слайд 479. Установка к следующему семестру
Контрольная работа (файл МУ_КР_Web-дизайн_КТ_испр.doc) включает одно
задание – создание web-сайта средствами статических технологий HTML и CSS
и написание к нему пояснительной записки.2. Обучающие материалы
лабораторный практикум HTML+CSS (папка WEB_ЛР_2014)
Слайд 48В следующем семестре – дифференцированный зачет (зачет с оценкой).
Зачет состоит
из следующих пунктов:
Наличие домашней контрольной работы
Верстка HTML шаблона на основе
файла PSD (в аудитории)Тест по лабораторному практикуму (HTML, CSS)
