'

Web-страницы

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4

5 Просмотр 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номер_пользователя


Слайд 5

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


Слайд 6

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


Слайд 7

8 Структура HTML-текста Форма и содержание разделены Фопматирование текста – с помощью парных тегов Например: <b> Rasvane tekst </b> отображает на странице Rasvane tekst Теги могут иметь параметры: <тег параметр=“значение”> текст</тег> Например: <p align=center>текст в центре</p>


Слайд 8

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


Слайд 9

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


Слайд 10

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


Слайд 11

12 Заголовки в разделе <body> Парный тег <hx>pealkiri</hx> x= 1...6 Например: см. файл HTML <html> <head> <title>Pealkirjad</title> </head> <body> <h1>Suur pealkiri, lehele pane vaid uks</h1> <h2>Veidi vaiksem [h2]</h2> <h3>Veidi vaiksem [h3]</h3> <h4>Veidi vaiksem [h4]</h4> <h5>Veidi vaiksem [h5]</h5> <h6>Koige vaiksem [h6]</h6> </body> </html>


Слайд 12

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


Слайд 13

14 Форматирование текста Средства оформления текста (символов) Физические: Жирный шрифт <b> Курсив <i> Подчеркиваине <u> Логические (внешний вид зависит от браузера) - предпочтительнее Усиленное выделение <strong> (курсив) Логическое ударение <em> (жирный шрифт) Определение <dfn> Цитата <cite> Текст программы <code>


Слайд 14

15 Форматирование текста Размер шрифта <font size=“размер”> Вид шрифта <font face=“название шрифта”> Пример


Слайд 15

16 Ссылки <a href=“ссылка”>текст на экране</a> Ссылки на страницы Web-сервера: URL Например: <a href=“http://www.tud.ttu.ee”>vaata loengute materjale</a> Ссылки на страницы в том же сервере: Более удобные - относительные ссылки Например: <a href=“ilmestamine.htm”>eelmise naite fail, asub samas kaustas</a>


Слайд 16

17 Внутренние ссылки (линки) Ссылки внутри документа Отметить место ссылки <a name=“имя_места”> tekst ekraanil</a> имя_места – уникальное имя Ссылка по имени <a href=“# имя_места”>tekst ekraanil</a> Пример


Слайд 17

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


Слайд 18

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


Слайд 19

20 Таблицы Теги <table> …</table>- начало и конец таблицы Параметры: общие установки для таблицы <tbody>…</tbody> - содержание таблицы <tr>…</tr> - начало и конец строки таблицы <th>…</th> - начало и конец клетки заголовка таблицы <td>…</td> - начало и конец клетки таблицы Параметры: цвет фона, выравнивание текста, и т.д. Пример


Слайд 20

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


Слайд 21

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


Слайд 22

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


Слайд 23

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


Слайд 24

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


Слайд 25

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


Слайд 26

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


Слайд 27

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


Слайд 28

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


Слайд 29

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


Слайд 30

31 Полезные ссылки 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/


×

HTML:





Ссылка: