Web-страницы. Язык HTML 1. Введение Введение 2. Структура документа Структура документа 3. Списки Списки 4. Гиперссылки Гиперссылки 5. Оформление документа Оформление документа 6. Рисунки Рисунки 7. Таблицы Таблицы 8. Фреймы Фреймы 9. Блоки (DIV)Блоки (DIV) 10. Понятие о JavaScript Понятие о JavaScript
Web-страницы. Язык HTML Тема 1. Введение
Основы Web-дизайна: HTML и редактор HEFS 3 Что такое Web-страницы? Гиперссылка – «активная»ссылка на другой документ. Гипертекст – текст, содержащий гиперссылки. Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой. WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа). Web-страница – текстовый файл, в котором описано размещение материала на экране. Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).
Основы Web-дизайна: HTML и редактор HEFS 4 Какие бывают Web-страницы? статические – существуют на сервере в виде готовых файлов: *.htm, *.html динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php позволяют выбирать информацию из базы данных по заранее неизвестным запросам дополнительная нагрузка на сервер загружаются медленнее
Основы Web-дизайна: HTML и редактор HEFS 5 Язык HTML HTML = Hypertext Markup Language (язык разметки гипертекста) HTML – это не язык программирования! ! HTML-страница – это текстовый файл (Блокнот): Моя страница Привет! … Моя страница Привет! … index.html sail.jpg man.jpg sunset.jpg clock.avi ball.swf bee.wav images
Основы Web-дизайна: HTML и редактор HEFS 6 Тэги Тэг – это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги (контейнеры) вставить рисунок открывающий закрывающий область действия тэга: описание таблицы
Основы Web-дизайна: HTML и редактор HEFS 7 Простейшая Web-страница Моя первая Web-страница Привет! Моя первая Web-страница Привет! first.html Моя первая Web-страница Моя первая Web-страница шапка («голова») Привет! Привет! основная часть («тело»)
Основы Web-дизайна: HTML и редактор HEFS 8 Редактор HEFS файловые операции буфер обмена один экран запуск браузера (F9) запуск браузера (F9) назад вперед текстовый редактор браузер (IE) отмена
Основы Web-дизайна: HTML и редактор HEFS 9 Вставка тэгов в HEFS
Web-страницы. Язык HTML и др. Тема 2. Структура документа. Специальные символы
Основы Web-дизайна: HTML и редактор HEFS 11 Заголовки: H1 … H6 Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки выравнивание: История left, center, right left, center, right
Основы Web-дизайна: HTML и редактор HEFS 12 Абзацы переход на новую строку абзац (с отступами) И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнет ковыль... И вечный бой! Покой нам только снится Сквозь кровь и пыль... Летит, летит степная кобылица И мнет ковыль... Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. До самого вечера тело с варежками... Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. До самого вечера тело с варежками...
Основы Web-дизайна: HTML и редактор HEFS 13 Выравнивание Этот текст выровнен по центру. Этот текст выровнен по ширине. Этот текст выровнен по центру. Этот текст выровнен по ширине. left по левой границе right по правой границе center по центру justify по ширине Не используйте выравнивание по ширине для узких столбцов! ! атрибут тэга
Основы Web-дизайна: HTML и редактор HEFS 14 Абзацы в HEFS
Основы Web-дизайна: HTML и редактор HEFS 15 Специальные символы Символ HTML-код Название –—(длинное) тире неразрывный пробел § §параграф © ©символ авторского права « «левая русская кавычка » »правая русская кавычка ® ®зарегистрированная торговая марка ° °градус ² ²квадрат ³ ³куб ¼ ¼четверть ½ ½половина ¾ ¾три четверти × ×знак умножения ÷ ÷знак деления
Основы Web-дизайна: HTML и редактор HEFS 16 Специальные символы А.С. Пушкин — солнце русской поэзии. Дом сдали в 2011 году. Пёс весил 12 кг. Из дома вышел А.С. Пушкин – солнце русской поэзии. Из дома вышел А.С. Пушкин – солнце русской поэзии. Вышел А.С. Пушкин – солнце русской поэзии.
Основы Web-дизайна: HTML и редактор HEFS 17 Специальные символы в HEFS
Web-страницы. Язык HTML и др. Тема 3. Списки
Основы Web-дизайна: HTML и редактор HEFS 19 Маркированные списки Вася Петя Коля Вася Петя Коля unordered list (неупорядоченный список) list item (элемент списка) изменение маркера: disk circle square
Основы Web-дизайна: HTML и редактор HEFS 20 Нумерованные списки Вася Петя Коля Вася Петя Коля ordered list (упорядоченный список) изменение нумерации: , i, I, a, A
Основы Web-дизайна: HTML и редактор HEFS 21 Списки определений компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск definition list (список определений) definition term (термин) definition description (описание)
Основы Web-дизайна: HTML и редактор HEFS 22 Многоуровневые списки Города России Города Украины Города России Города Украины Москва Санкт-Петерург Киев Одесса
Основы Web-дизайна: HTML и редактор HEFS 23 Списки в HEFS Ctrl-L вставить элемент списка
Web-страницы. Язык HTML и др. Тема 4. Гиперссылки
Основы Web-дизайна: HTML и редактор HEFS 25 Ссылки на другие страницы сайта Таблицы страница в той же папке anchor (якорь) hyper reference (гиперссылка) страница во вложенной папке Пример страница в соседней папке Текст выйти из текущей папки
Основы Web-дизайна: HTML и редактор HEFS 26 Примеры (ссылки из файла rock.html) story.html stories – novels – new – old – list.html sea.html verse.html rock.html
Основы Web-дизайна: HTML и редактор HEFS 27 Ссылки на другие сайты Почта на главную страницу сайта index.htm, index.html, default.asp, … на конкретную страницу сайта (URL) Васин текст Васин текст на файл для скачивания Скачать Скачать
Основы Web-дизайна: HTML и редактор HEFS 28 Ссылки внутри страницы Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы 1. Это текст главы 1. Наверх Глава 2 Это текст главы 2. Это текст главы 2. Это текст главы 2. Наверх Глава 1 Глава 2 Глава 1 Это текст главы 1. Это текст главы 1. Это текст главы 1. Наверх Глава 2 Это текст главы 2. Это текст главы 2. Это текст главы 2. Наверх в другом файле Цвет текста метка (якорь) переход на метку
Основы Web-дизайна: HTML и редактор HEFS 29 Запуск почтовой программы Напишите мне! Напишите мне!
Основы Web-дизайна: HTML и редактор HEFS 30 Гиперссылки в HEFS локальная ссылка Автоматически строится относительный адрес! ! Ctrl-A гиперссылка на выделенный блок, адрес вводить вручную вставить только адрес файла
Web-страницы. Язык HTML и др. Тема 5. Оформление документа. Стилевые файлы (CSS)
Основы Web-дизайна: HTML и редактор HEFS 32 Содержание и оформление Сборник задач по физике Григорий Остер Задача 61 Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться? Сборник задач по физике Григорий Остер Задача 61 Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться? содержание (контент) логическая разметка ( *.html ) логическая разметка ( *.html ) оформление физическая разметка ( *.css ) физическая разметка ( *.css ) main.css mini.css print.css
Основы Web-дизайна: HTML и редактор HEFS 33 Логическая разметка выделение (emphasize) Это моя первая победа. сильное выделение (strong) Вася код программы a:= 2*b определение (definition) Сурок - это... цитата (citation) Блажен, кто верует,... сокращение (abbreviation) НИИЧАВО
Основы Web-дизайна: HTML и редактор HEFS 34 Форматированный текст ( тексты программ) program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end. program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end. program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end. program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end. отформатированный текст (preformatted) отформатированный текст (preformatted)
Основы Web-дизайна: HTML и редактор HEFS 35 Физическая разметка курсив (italic) Вася жирный (bold) Вася подчеркивание (underline) Вася зачеркивание (strike out) Вася верхний индекс (superscript) Вася 2 нижний индекс (subscript) Вася 2
Основы Web-дизайна: HTML и редактор HEFS 36 Форматирование текста в HEFS Ctrl-B
Основы Web-дизайна: HTML и редактор HEFS 37 Тэг BODY – общие свойства страницы цвет фона и текста цвет гиперссылок Привет! Привет! цвет текста цвет фона посещенные ссылки (visited link) посещенные ссылки (visited link) цвет ссылок атрибуты тэга
Основы Web-дизайна: HTML и редактор HEFS 38 Вставка атрибутов в HEFS вставить только код цвета
Основы Web-дизайна: HTML и редактор HEFS 39 Цвет гиперссылок LINK ссылки, на которых не были VLINK посещенные ссылки ALINK активные ссылки
Основы Web-дизайна: HTML и редактор HEFS 40 Тэг FONT – свойства блока текста цвет текста размер шрифта Привет! Как дела? Привет! Как дела? Привет! <FONT COLOR=red SIZE=6> Как дела? Привет! <FONT COLOR=red SIZE=6> Как дела? от 1 до 7 (3 – нормальный) от 1 до 7 (3 – нормальный)
Основы Web-дизайна: HTML и редактор HEFS 41 Линия-разделитель horizontal rule ширина в пикселях или процентах толщина выравнивание Не рекомендуется использовать – лучше заголовки разделов! !
Основы Web-дизайна: HTML и редактор HEFS 42 Кодирование цвета имена red, green, blue, magenta, black, шестнадцатеричные коды white # F A # F A # F A # F A R R G G B B # F F # F F # F F # F F # F F F F F F# F F F F F F # F F F F F F# F F F F F F # 0 0 F F F F# 0 0 F F F F # 0 0 F F F F# 0 0 F F F F # # # # # A A A A A A# A A A A A A # A A A A A A# A A A A A A
Основы Web-дизайна: HTML и редактор HEFS 43 Что такое CSS? HTML – язык логической разметки текста, определяющий содержание и структуру страницы (заголовки разных уровней, абзацы) HTML–код не должен содержать оформления! оформление частей документа (заголовков, параграфов) описывается в отдельном файле CSS = Cascading Style Sheets – каскадные таблицы стилей стилевые файлы: *.css HTML + CSS оформление содержание + Javascript анимация
Основы Web-дизайна: HTML и редактор HEFS 44 Свойства элементов страницы body { color: white; background: #FF6600; } body { color: white; background: #FF6600; } название тэга свойство селектор color – цвет символов background – цвет фона my.css значение
Основы Web-дизайна: HTML и редактор HEFS 45 Подключение стилевого файла Пример CSS <link rel="stylesheet" href="my.css" type="text/css">... Пример CSS <link rel="stylesheet" href="my.css" type="text/css">... qq.html my.css body { color: white; background: #0000E0; } body { color: white; background: #0000E0; } <body>...</body>
Основы Web-дизайна: HTML и редактор HEFS 46 Шрифты p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } для всех абзацев семейство шрифтов serif – с засечками sans-serif – без засечек monospace – моноширинный serif – с засечками sans-serif – без засечек monospace – моноширинный размер в пикселях normal – обычный italic - курсив normal – обычный italic - курсив normal – обычный bold - жирный normal – обычный bold - жирный
Основы Web-дизайна: HTML и редактор HEFS 47 Классы (стили оформления) p.spec { font-style: italic; background: green; } p.spec { font-style: italic; background: green; } для абзацев класса spec LEtat cest moi. LEtat cest moi. qq.html LEtat cest moi..spec { font-style: italic; background: green; }.spec { font-style: italic; background: green; } для всех элементов класса spec для всех элементов класса spec Россия молодая Россия молодая
Основы Web-дизайна: HTML и редактор HEFS 48 Размеры, выравнивание p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } ширина высота Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. выравнивание: left center right justify выравнивание: left center right justify 100px 80% 20px фон абзацный отступ
Основы Web-дизайна: HTML и редактор HEFS 49 Рамка и поля p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } рамка отступы снаружи отступы внутри сверху, справа, снизу, слева со всех сторон толщина solid – сплошная dashed - штриховая dotted – точечная solid – сплошная dashed - штриховая dotted – точечная цвет Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem. 40px 5px 20px
Основы Web-дизайна: HTML и редактор HEFS p.hallo { background: white url(images/grad.jpg); } p.hallo { background: white url(images/grad.jpg); } 50 Фоновый рисунок Привет, Вася! Привет, Вася! Привет, Вася! p.hallo { background: url(grad.jpg) repeat-y; } p.hallo { background: url(grad.jpg) repeat-y; } Привет, Вася!
Основы Web-дизайна: HTML и редактор HEFS 51 Фоновый рисунок без повторения p. { background: url(letter.gif) no-repeat; padding-left: 20px; } p. { background: url(letter.gif) no-repeat; padding-left: 20px; } 20px
Основы Web-дизайна: HTML и редактор HEFS 52 Ссылки p. a { color: green; text-decoration:none; } p. a { color: green; text-decoration:none; } p. a:hover { color: #00F; text-decoration:underline; } p. a:hover { color: #00F; text-decoration:underline; } p. a:visited { color: #F0F; } p. a:visited { color: #F0F; } ссылки внутри абзаца стиля убрать подчеркивание посещённые ссылки подчеркнуть когда мышь над ссылкой
Основы Web-дизайна: HTML и редактор HEFS 53 Выделение отдельных слов.latin { color: green; font-style: italic; }.latin { color: green; font-style: italic; } класс, применимый ко всему курсив Собака(лат. Canis lupus familiaris ) одно из наиболее Домашних "животных-компаньонов". Собака(лат. Canis lupus familiaris ) одно из наиболее Домашних "животных-компаньонов". Что хочется исправить? !
Основы Web-дизайна: HTML и редактор HEFS Типы стилей 54 Встроенные в web-страницу Внешние (отдельный файл)... body {... } Затем привязывается к нужным тегам с помощью атрибута class
Web-страницы. Язык HTML и др. Тема 6. Рисунки
Основы Web-дизайна: HTML и редактор HEFS 56 Форматы рисунков GIF (Graphic Interchange Format) сжатие без потерь прозрачные области анимация только с палитрой (2…256 цветов) рисунки с четкими границами, мелкие рисунки JPEG (Joint Photographer Expert Group) сжатие с потерями только True Color (16,7 млн. цветов) нет анимации и прозрачности рисунки с размытыми границами, фото PNG (Portable Network Graphic) сжатие без потерь с палитрой (PNG-8) и True Color (PNG-24) прозрачность и полупрозрачность (альфа-канал) нет анимации плохо сжимает мелкие рисунки
Основы Web-дизайна: HTML и редактор HEFS 57 Фон страницы (через CSS) body { background: url(back.jpg); } body { background: url(back.jpg); } 'images/back.jpg' '../images/back.jpg ' 'images/back.jpg' '../images/back.jpg ' Не должно быть «швов»! ! Фон не должен мешать! ! #6e5c62;
Основы Web-дизайна: HTML и редактор HEFS 58 Рисунки в документе из той же папки: из другой папки: с другого сервера: image (изображение) source (источник)
Основы Web-дизайна: HTML и редактор HEFS 59 Выравнивание left right top bottom (по умолчанию) middle
Основы Web-дизайна: HTML и редактор HEFS 60 Отступы VSPACE (vertical space) HSPACE (horizontal space)
Основы Web-дизайна: HTML и редактор HEFS 61 Выравнивание и отступы (CSS) img.left { float: left; margin: 5px 10px; } img.left { float: left; margin: 5px 10px; } = VSPACE = HSPACE = ALIGN margin: 5px 10px 5px 0; отступа слева нет!
Основы Web-дизайна: HTML и редактор HEFS 62 Другие атрибуты всплывающая подсказка надпись на месте рисунка, если его нет всплывающая подсказка надпись на месте рисунка, если его нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет толщина рамки вокруг рисунка
Основы Web-дизайна: HTML и редактор HEFS 63 Рисунок-гиперссылка <IMG SRC="mailru.jpg" ALT="Бесплатная почта" BORDER=0> <IMG SRC="mailru.jpg" ALT="Бесплатная почта" BORDER=0> локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если не вплотную к, будет «хвост» не будет «хвоста»
Основы Web-дизайна: HTML и редактор HEFS 64 Рисунки в HEFS вставить рисунок Автоматически вставляются размеры! !
Web-страницы. Язык HTML и др. Тема 7. Таблицы
Основы Web-дизайна: HTML и редактор HEFS 66 Простейшая таблица Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек. толщина рамки TABLEтаблица TR = table rowстрока таблицы TD = table dataданные таблицы TH = table header заголовок (жирный, по центру)
Основы Web-дизайна: HTML и редактор HEFS 67 Размеры ширина в пикселях или в % от ширины окна браузера высота в пикселях всей таблицы: строки: ячейки: ширина в пикселях или в % от ширины таблицы
Основы Web-дизайна: HTML и редактор HEFS 68 Размеры (через CSS) table.spec { width: 60%; height: 300; } table.spec { width: 60%; height: 300; } table.spec tr { height: 50px; } table.spec tr { height: 50px; } всей таблицы: строки: ячейки: table.spec td.qq { width: 25%; height: 50px; } table.spec td.qq { width: 25%; height: 50px; }......
Основы Web-дизайна: HTML и редактор HEFS 69 Выравнивание <TR ALIGN="center" VALIGN="top"> По центру, по верхней границе <TD ALIGN="right" VALIGN="middle" WIDTH=200>По правой границе, по середине <TR ALIGN="center" VALIGN="top"> По центру, по верхней границе <TD ALIGN="right" VALIGN="middle" WIDTH=200>По правой границе, по середине всей таблицы: информации в ячейках: left, center, right left, center, right left, center, right left, center, right top, middle, bottom top, middle, bottom
Основы Web-дизайна: HTML и редактор HEFS 70 Выравнивание (через CSS) По центру, по верхней границе По правой границе, по середине По центру, по верхней границе По правой границе, по середине table.ex tr.centop { text-align: center; vertical-align: top; height:100px; } table.ex td.rmid { text-align: right; vertical-align: middle; width:200px; } table.ex tr.centop { text-align: center; vertical-align: top; height:100px; } table.ex td.rmid { text-align: right; vertical-align: middle; width:200px; } left, center, right left, center, right top, middle, bottom top, middle, bottom
Основы Web-дизайна: HTML и редактор HEFS 71 Фон и цвет текста Привет! Таблица из двух строк и двух столбцов Привет! Таблица из двух строк и двух столбцов цвет фона фоновый рисунок
Основы Web-дизайна: HTML и редактор HEFS 72 Фон и цвет текста (CSS) Привет! Таблица из двух строк и двух столбцов Привет! Таблица из двух строк и двух столбцов table.qq td { background: green; } table.qq tr.spec td { background: blue; color: white; } table.qq tr.spec td.r { background: red; } table.qq td.pic { background: url("web.jpg"); } table.qq td { background: green; } table.qq tr.spec td { background: blue; color: white; } table.qq tr.spec td.r { background: red; } table.qq td.pic { background: url("web.jpg"); } цвет фона рисунок
Основы Web-дизайна: HTML и редактор HEFS 73 Отступы <TABLE CELLSPACING = 10 CELLPADDING = 10 BGCOLOR = blue> 1 2 <TABLE CELLSPACING = 10 CELLPADDING = 10 BGCOLOR = blue> 1 2 интервал между ячейками отступ внутри ячеек CELLSPACING CELLPADDING
Основы Web-дизайна: HTML и редактор HEFS 74 Отступы (CSS) border-spacing padding table#qq { background: blue; border-collapse: separate; border-spacing: 10px; padding: 10px; } #qq tr { background: white; } table#qq { background: blue; border-collapse: separate; border-spacing: 10px; padding: 10px; } #qq tr { background: white; } кроме IE 6
Основы Web-дизайна: HTML и редактор HEFS 75 Объединение ячеек Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! Привет! Вася, Петя, Маша! column span охват столбцов row span охват строк
Основы Web-дизайна: HTML и редактор HEFS 76 Вложенные таблицы Вася Петя Маша Даша Вася Петя Маша Даша
Основы Web-дизайна: HTML и редактор HEFS 77 Таблицы в HEFS
Web-страницы. Язык HTML и др. Тема 8. Фреймы
Основы Web-дизайна: HTML и редактор HEFS 79 Фреймы Фрейм (frame) – это часть сложной Web-страницы, в которую может быть загружена другая Web- страница. 3 файла: left.html – страница в левой части right.html – страница в правой части index.html – описание структуры
Основы Web-дизайна: HTML и редактор HEFS 80 Описание структуры index.html Фреймы-столбцы Фреймы-столбцы columns столбцы columns столбцы ширина в пикселях или % все остальное место source источник source источник имя фрейма (для ссылок)
Основы Web-дизайна: HTML и редактор HEFS 81 Граница между фреймами граница между фреймами: 0 – невидима, 1 - видима граница между фреймами: 0 – невидима, 1 - видима ширина полосы между фреймами, за которую можно перетащить границу
Основы Web-дизайна: HTML и редактор HEFS 82 Настройка фрейма (FRAME) <FRAME SRC="a.htm" MARGINWIDTH="0" MARGINHEIGHT="0" NORESIZE SCROLLING="auto"> <FRAME SRC="a.htm" MARGINWIDTH="0" MARGINHEIGHT="0" NORESIZE SCROLLING="auto"> убрать отступы от края фрейма до содержимого полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда полоса прокрутки: auto – появляется, когда надо yes – есть всегда no – нет никогда запретить изменение размеров
Основы Web-дизайна: HTML и редактор HEFS 83 Фреймы-строки index.html Фреймы-строки <FRAME SRC="down.html" NAME="qq"> Фреймы-строки <FRAME SRC="down.html" NAME="qq"> строки ширина в пикселях или %
Основы Web-дизайна: HTML и редактор HEFS 84 Сложные структуры (3 фрейма) index.html
Основы Web-дизайна: HTML и редактор HEFS 85 Как открыть ссылку в другом фрейме <A HREF="chapter2.htm" TARGET="qq">Глава 2 <A HREF="chapter2.htm" TARGET="qq">Глава 2 TARGET _blank – в новом окне _parent – в родительском окне _top – в главном окне (убрать фреймы)
Основы Web-дизайна: HTML и редактор HEFS 86 Фреймы в HEFS
Основы Web-дизайна: HTML и редактор HEFS 87 Работа с несколькими страницами переключение страниц закрыть текущую страницу (Ctrl-W) просмотр активной страницы
Web-страницы. Язык HTML и др. Тема 9. Блоки (DIV)
Основы Web-дизайна: HTML и редактор HEFS 89 Блоки (DIV) – любое содержимое Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. 1
Основы Web-дизайна: HTML и редактор HEFS 90 Блоки (DIV) – рамки и отступы Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus. Mauris eu turpis vel tellus tincidunt pulvinar. padding border margin #qq { padding: 5px 10px; border: 1px solid green; margin: 5px 15px 5px 10px; } #qq { padding: 5px 10px; border: 1px solid green; margin: 5px 15px 5px 10px; }
Основы Web-дизайна: HTML и редактор HEFS 91 «Плавающие» блоки.picture { float: left; margin: 5px; }.picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; }.picture { float: left; margin: 5px; }.picture p { margin: 0; text-align: center; font-family: sans-serif; font-size: 80%; font-weight: bold; } На природе На природе свойства блока свойства абзаца внутри блока
Web-страницы. Язык HTML и др. Тема 10. Понятие о Javascript
Основы Web-дизайна: HTML и редактор HEFS 93 Что может Javascript? информация статична нет интерактивности (только переход на другую страницу) Чем плоха HTML-страница? Что можно сделать с помощью Javascript? изменение рисунка при наведении мыши выпадающие меню всплывающие подсказки фотогалерея без перегрузки страницы движение объекта по экрану Javascript может быть отключен в браузере
Основы Web-дизайна: HTML и редактор HEFS 94 Основные принципы каждый элемент на странице (текст, рисунок, таблица) – это объект, имеющий свои свойства свойства объекта можно менять из программы на Javascript (скрипта) все, что происходит – это события все события можно «обрабатывать», т.е. как-то реагировать на них Javascript – это язык программирования! ! HTML + Javascript = DHTML (Dynamic HTML)
Основы Web-дизайна: HTML и редактор HEFS 95 Замена рисунка при движении мыши когда курсор мыши над рисунком после ухода мыши События: onMouseOver – курсор мыши над объектом onMouseOut – курсор мыши ушел с объекта начальный рисунок this – этот объект this.src – свойство SRC этого объекта
Основы Web-дизайна: HTML и редактор HEFS 96 Скрытый блок Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др. Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др..hidden { display:none; }.hidden { display:none; }
Основы Web-дизайна: HTML и редактор HEFS 97 Скрытый блок: оформление ссылки <a href="#" onClick="show('details');return false;"> Показать детали <a href="#" onClick="show('details');return false;"> Показать детали остаться на странице по щелчку вызвать функцию show переход не выполнять
Основы Web-дизайна: HTML и редактор HEFS Скрытый блок: как его открыть? 98 function show ( name ) { var elem = document.getElementById(name); if ( elem ) elem.style.display = "block"; } function show ( name ) { var elem = document.getElementById(name); if ( elem ) elem.style.display = "block"; } <script type="text/javascript" src="test.js"> <script type="text/javascript" src="test.js"> test.js найти блок по имени изменить свойство display
Основы Web-дизайна: HTML и редактор HEFS Формы 99 <input type="button" value="Готово" onClick="check();"> <input type="button" value="Готово" onClick="check();"> надпись на кнопке имя формы имя элемента делать по щелчку
Основы Web-дизайна: HTML и редактор HEFS Форма: обращение к элементам 100 function check() { if ( calc.answer.value == "4" ) alert("Правильно!"); else alert("Неправильно!"); } function check() { if ( calc.answer.value == "4" ) alert("Правильно!"); else alert("Неправильно!"); } test.js вывести сообщение
Основы Web-дизайна: HTML и редактор HEFS 101 Конец фильма ПОЛЯКОВ Константин Юрьевич д.т.н., учитель информатики высшей категории, ГОУ СОШ 163, г. Санкт-Петербург