Download
1 / 31
320 likes | 499 Views
W eb - страницы. Дизайн и реализация. Содержание. Еще об интернете Что такое вебстраница (сайт)? Как выставить страницу на всеобщее обозрение? Основные принципы языка HTML Некоторые советы по созданию страниц. Адреса компьютеров (имена). Локальная сеть и Windows:
E N D
Web-страницы Дизайн и реализация
Содержание • Еще об интернете • Что такое вебстраница (сайт)? • Как выставить страницу на всеобщее обозрение? • Основные принципы языка HTML • Некоторые советы по созданию страниц
Адреса компьютеров (имена) • Локальная сеть и Windows: • У компьютера есть имядиски и папки компьютера можно сделать доступными в сетинапример: \\balrog\material • Протокол Internet(IP): • У каждого компьютера уникальный адреснапример: 193.40.254.226 или marvin.cc.ttu.ee папка компьютер domain
Основные услуги Internet: WWW • WWW-сервер использует для обмена информацией http-протокол • WWW-страница это файл в заданном каталоге на диске сервера, к которому все имеют доступ • Обычно имя каталогаpublic_html • WWW-технологии: • HTML, Java, Javascript, Perl, PHP, SQL ...
Просмотр WWW-страниц • С помощью браузеров Internet (программы просмотра) • Для нахождения WWW-страниц • URL (Uniform Resource Locator) адрес докуметна в сети: http://www.tud.ttu.ee/~vendelin/informaatika1/inf1programm.htm протоколимя компьютерапапкиимя файла • Студент ТТУобщедоступный каталогpublic_htmlв домашнем каталоге (в локальной сети диск W:) • Файл index.htmlв подкаталоге домашнего каталога public_hmlнаходится в интернете по адресу http://www.tud.ttu.ee/~tномер_пользователя
HTML (HyperText Markup Language) • Стандарт гипертекста • Оформление текста и использование дополнительных элементов (графика, звук) задается с помощью тегов помещенных в тексовый файл. • Теги записываются между знаками < и> • Первоначально язык HTML был предназначен для представления текста и ссылок,графика и мультимедийные возможности добавились позже.
HTML, XML и XHTML • HTML • Основное внимание - представление текста на экране • XML • Заданная структура текста и более строгие правила • XHTML • Модификация HTML, цель – совместимость с XML.
Структура HTML-текста • Форма и содержание разделены • Фопматирование текста – с помощью парных тегов • Например:<b> Rasvane tekst </b>отображает на странице Rasvane tekst • Теги могут иметь параметры: • <тегпараметр=“значение”> текст</тег> • Например: <p align=center>текст в центре</p>
Основные части документа <html > <head> Заголовок окна, ссылка на страницу стилей и остальные общие установки </head> <body> Содержание </body> </html> Пример: очень простая страница
Оформление текста • Заголовки • Абзацы и переводы строк • Форматирование текста (символов)
Заголовки • В разделе <head> • Парный тегзаголовка окна <title> </title> • Текст между тегами расположен в заголовке окна, только латинские буквы • Например: <html> <head> <title> Ilus pealkiri </title> </head> </html>
Заголовки в разделе <body> • Парный тег <hx>pealkiri</hx> x= 1...6 • Например: см. файл HTML <html> <head> <title>Pealkirjad</title> </head> <body> <h1>Suur pealkiri, lehele pane vaid üks</h1> <h2>Veidi väiksem [h2]</h2> <h3>Veidi väiksem [h3]</h3> <h4>Veidi väiksem [h4]</h4> <h5>Veidi väiksem [h5]</h5> <h6>Kõige väiksem [h6]</h6> </body> </html>
Абзацы и переводы строк • Заголовок это абзац • Тег «параграф», отделяет абзацы друг от друга <p> • Параметры абзаца: • выравнивание • Перевод строки с помощью клавишиEnterне учитываются • Непарный тег перевода строки <br /> • Теги <pre>...</pre> учитывают переводы строк в тексте • Пример
Форматирование текста • Средства оформления текста (символов) • Физические: • Жирный шрифт <b> • Курсив <i> • Подчеркиваине <u> • Логические (внешний вид зависит от браузера) - предпочтительнее • Усиленное выделение <strong> (курсив) • Логическое ударение <em> (жирный шрифт) • Определение <dfn> • Цитата <cite> • Текст программы <code>
Форматирование текста • Размер шрифта • <font size=“размер”> • Вид шрифта • <font face=“название шрифта”> • Пример
Ссылки • <a href=“ссылка”>текст на экране</a> • Ссылки на страницы Web-сервера: URL • Например: <a href=“http://www.tud.ttu.ee”>vaata loengute materjale</a> • Ссылки на страницы в том же сервере: • Более удобные - относительные ссылки • Например:<a href=“ilmestamine.htm”>eelmise näite fail, asub samas kaustas</a>
Внутренние ссылки (линки) • Ссылки внутри документа • Отметить место ссылки • <a name=“имя_места”> tekst ekraanil</a> • имя_места – уникальное имя • Ссылка по имени • <a href=“# имя_места”>tekst ekraanil</a> • Пример
Изображения • Ссылка на файл с изображением <img /> - непарный тег • Важные параметры: • src – линк на файл • height – высота • width – ширина • Можно сделатьлинк из изображения • Пример
Таблицы • Зачем? • Позиционирование текста • Для использования нескольких цветов для фона страницы • Для использования обычных таблиц
Таблицы • Теги • <table> …</table>- начало и конец таблицы • Параметры: общие установки для таблицы • <tbody>…</tbody> - содержание таблицы • <tr>…</tr> - начало и конец строки таблицы • <th>…</th> - начало и конец клетки заголовка таблицы • <td>…</td> - начало и конец клетки таблицы • Параметры: цвет фона, выравнивание текста, и т.д. • Пример
Страница стилей • CSS (Cascade Style Sheet) • Установки описываются один раз и используются • В одном документе (описания стилей в начале документа) • Пример • многократно (описания стилей в отдельном файле) • Пример
Некоторые советы • Как размещать различные элементы? • Как переходить со страницы на страницу? • Какие шрифты, цвета, изображения и другие компоненты использовать?
Логотип • Расположение • В левом верхнем углу • На остальных страницах может быть ссылкой на главную страницу • Размер • На главной странице больше, чем на остальных
Навигация • Левая панель навигации • Очень часто используется • Нижняя строка прокрутки • Здесь размещаются ссылки (напр. номер страницы) • Копирайт и информация о контактах • Верхняя строка • Расширяющиеся ссылки • Список категорий в центре страницы
Графика и мультимедия • Рисунки • Поясняющий рисунок текст • Музыка • На Web-страницах, где это оправдано • Анимация • Использование должно быть оправдано
Цвета и шрифты • Основной текст и фон страницы • Черный текст и белый фон • Темный текст на светлом фоне – лучше всего читается • Светлый текст на темном фоне • Шрифт • Verdana, создан для чтения текстов на экране • Arial • Желательно использовать шрифт без шерифов
Оформление ссылок • Подчеркивание для указания ссылки • Часто используется синий цвет
Советы: общие параметры • Время загрузки страницы – не больше 10 секунд • Ширина страницы – до 770 пикселей • Длина страницы – лучше всего один экран, не более 3 размеров экрана (от 1000 до 1600 пикселей) • Не использовать фреймы (рамки) • Расположение логотипа – левый верхний угол • Размер логотипа – 80x68 пикселей
Советы: определение позиции • Где я есть? • Ответ на этот вопрос должен быть получен на любой странице • Показывать позицию по отношению к структуре страницы • Где я был? • Ответа на этот вопрос нет • Можно попасть обратно с помощью кнопки BACK • Куда я могу перейти? • Ответ на этот вопрос должен быть • Наличие ссылок и меню указывает на хорошую структуру страницы
Тестирование • Проверить ссылки • Проверить удобство использования • Проверить скорость загрузки
Полезные ссылки • HTML: An Interactive Tutorial for Beginners [Dave’s HTML Guide] • http://www.davesite.com/webstation/html/ • CSS Tutorial • http://www.w3schools.com/css/default.asp • HTML • http://html.manual.ru/book/html.php • <HTML> Help • http://htmlhelp.chat.ru/
