Web-страницы презентация

Содержание

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

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


Слайд 2Содержание
Еще об интернете
Что такое вебстраница (сайт)?
Как выставить страницу на всеобщее

обозрение?
Основные принципы языка HTML
Некоторые советы по созданию страниц

Слайд 3domain
компьютер
папка
Адреса компьютеров (имена)
Локальная сеть и Windows:
У компьютера есть имя диски и

папки компьютера можно сделать доступными в сети например: \\balrog\material

Протокол Internet (IP):
У каждого компьютера уникальный адрес например: 193.40.254.226 или 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) адрес докуметна в сети:
http://www.tud.ttu.ee/~vendelin/informaatika1/inf1programm.htm
протокол имя компьютера папки имя файла
Студент ТТУ общедоступный каталог public_html в домашнем каталоге (в локальной сети диск W:)
Файл index.html в подкаталоге домашнего каталога public_hml находится в интернете по адресу http://www.tud.ttu.ee/~tномер_пользователя

Слайд 6HTML (HyperText Markup Language)
Стандарт гипертекста
Оформление текста и использование дополнительных элементов (графика,

звук) задается с помощью тегов помещенных в тексовый файл.
Теги записываются между знаками < и >

Первоначально язык HTML был предназначен для представления текста и ссылок,графика и мультимедийные возможности добавились позже.


Слайд 7HTML, XML и XHTML
HTML
Основное внимание - представление текста на экране
XML
Заданная структура

текста и более строгие правила
XHTML
Модификация HTML, цель – совместимость с XML.

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

Rasvane tekst отображает на странице
Rasvane tekst
Теги могут иметь параметры:
<тег параметр=“значение”> текст
Например:

текст в центре



Слайд 9Основные части документа


Заголовок окна, ссылка на страницу стилей и остальные

общие установки


Содержание


Пример: очень простая страница


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


Слайд 11Заголовки
В разделе
Парный тег заголовка окна
Текст между тегами расположен

в заголовке окна, только латинские буквы
Например:


Ilus pealkiri



Слайд 12Заголовки в разделе
Парный тег pealkiri x= 1...6

Например: см. файл 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 [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

Help
http://htmlhelp.chat.ru/

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.


Для правообладателей

Яндекс.Метрика