1 Web-страницы Дизайн и реализация

2 Содержание Еще об интернете Что такое вебстраница (сайт)? Как выставить страницу на всеобщее обозрение? Основные принципы языка HTML Некоторые советы по созданию страниц

3 domain компьютер папка Адреса компьютеров (имена) Локальная сеть и Windows: –У компьютера есть имя диски и папки компьютера можно сделать доступными в сети например: \\balrog\material Протокол Internet (IP): –У каждого компьютера уникальный адрес например: или marvin.cc.ttu.ee

4 Основные услуги Internet: WWW WWW-сервер использует для обмена информацией http-протокол WWW-страница это файл в заданном каталоге на диске сервера, к которому все имеют доступ –Обычно имя каталога public_html WWW-технологии: –HTML, Java, Javascript, Perl, PHP, SQL...

5 Просмотр WWW-страниц С помощью браузеров Internet (программы просмотра) Для нахождения WWW-страниц –URL (Uniform Resource Locator) адрес докуметна в сети: протокол имя компьютера папки имя файла Студент ТТУ общедоступный каталог public_html в домашнем каталоге (в локальной сети диск W:) –Файл index.html в подкаталоге домашнего каталога public_hml находится в интернете по адресу

6 HTML (HyperText Markup Language) Стандарт гипертекста –Оформление текста и использование дополнительных элементов (графика, звук) задается с помощью тегов помещенных в тексовый файл. –Теги записываются между знаками Первоначально язык HTML был предназначен для представления текста и ссылок,графика и мультимедийные возможности добавились позже.

7 HTML, XML и XHTML HTML –Основное внимание - представление текста на экране XML –Заданная структура текста и более строгие правила XHTML –Модификация HTML, цель – совместимость с XML.

8 Структура HTML-текста Форма и содержание разделены Фопматирование текста – с помощью парных тегов –Например: Rasvane tekst отображает на странице Rasvane tekst Теги могут иметь параметры: – текст –Например: текст в центре

9 Основные части документа Заголовок окна, ссылка на страницу стилей и остальные общие установки Содержание Пример: очень простая страницаочень простая страница

10 Оформление текста Заголовки Абзацы и переводы строк Форматирование текста (символов)

11 Заголовки В разделе –Парный тег заголовка окна Текст между тегами расположен в заголовке окна, только латинские буквы Например: Ilus pealkiri

12 Заголовки в разделе Парный тег pealkiri x= –Например: см. файл HTMLсм. файл HTML Pealkirjad Suur pealkiri, lehele pane vaid üks Veidi väiksem [h2] Veidi väiksem [h3] Veidi väiksem [h4] Veidi väiksem [h5] Kõige väiksem [h6]

13 Абзацы и переводы строк Заголовок это абзац Тег «параграф», отделяет абзацы друг от друга Параметры абзаца: –выравнивание Перевод строки с помощью клавиши Enter не учитываются –Непарный тег перевода строки –Теги... учитывают переводы строк в тексте Пример

14 Форматирование текста Средства оформления текста (символов) –Физические: Жирный шрифт Курсив Подчеркиваине –Логические (внешний вид зависит от браузера) - предпочтительнее Усиленное выделение (курсив) Логическое ударение (жирный шрифт) Определение Цитата Текст программы

15 Форматирование текста Размер шрифта – Вид шрифта – Пример

16 Ссылки текст на экране Ссылки на страницы Web-сервера: URL –Например: vaata loengute materjale Ссылки на страницы в том же сервере: –Более удобные - относительные ссылки –Например: eelmise näite fail, asub samas kaustas

17 Внутренние ссылки (линки) Ссылки внутри документа Отметить место ссылки – tekst ekraanil –имя_места – уникальное имя Ссылка по имени – tekst ekraanil Пример

18 Изображения Ссылка на файл с изображением - непарный тег –Важные параметры: src – линк на файл height – высота width – ширина Можно сделать линк из изображения Пример

19 Таблицы Зачем? –Позиционирование текста –Для использования нескольких цветов для фона страницы –Для использования обычных таблиц

20 Таблицы Теги – … - начало и конец таблицы Параметры: общие установки для таблицы – … - содержание таблицы – … - начало и конец строки таблицы – … - начало и конец клетки заголовка таблицы – … - начало и конец клетки таблицы Параметры: цвет фона, выравнивание текста, и т.д. –ПримерПример

21 Страница стилей CSS (Cascade Style Sheet) Установки описываются один раз и используются –В одном документе (описания стилей в начале документа) Пример –многократно (описания стилей в отдельном файле) Пример

22 Некоторые советы Как размещать различные элементы? Как переходить со страницы на страницу? Какие шрифты, цвета, изображения и другие компоненты использовать?

23 Логотип Расположение –В левом верхнем углу –На остальных страницах может быть ссылкой на главную страницу Размер –На главной странице больше, чем на остальных

24 Навигация Левая панель навигации –Очень часто используется Нижняя строка прокрутки –Здесь размещаются ссылки (напр. номер страницы) –Копирайт и информация о контактах Верхняя строка Расширяющиеся ссылки Список категорий в центре страницы

25 Графика и мультимедия Рисунки Поясняющий рисунок текст Музыка –На Web-страницах, где это оправдано Анимация –Использование должно быть оправдано

26 Цвета и шрифты Основной текст и фон страницы –Черный текст и белый фон –Темный текст на светлом фоне – лучше всего читается –Светлый текст на темном фоне Шрифт –Verdana, создан для чтения текстов на экране –Arial –Желательно использовать шрифт без шерифов

27 Оформление ссылок Подчеркивание для указания ссылки Часто используется синий цвет

28 Советы: общие параметры Время загрузки страницы – не больше 10 секунд Ширина страницы – до 770 пикселей Длина страницы – лучше всего один экран, не более 3 размеров экрана (от 1000 до 1600 пикселей) Не использовать фреймы (рамки) Расположение логотипа – левый верхний угол Размер логотипа – 80x68 пикселей

29 Советы: определение позиции Где я есть? –Ответ на этот вопрос должен быть получен на любой странице –Показывать позицию по отношению к структуре страницы Где я был? –Ответа на этот вопрос нет –Можно попасть обратно с помощью кнопки BACK Куда я могу перейти? –Ответ на этот вопрос должен быть –Наличие ссылок и меню указывает на хорошую структуру страницы

30 Тестирование Проверить ссылки Проверить удобство использования Проверить скорость загрузки

31 Полезные ссылки HTML: An Interactive Tutorial for Beginners [Daves HTML Guide] – CSS Tutorial – HTML – Help