13.12.2013 Основы web: сайты, навигация. Построение одностраничного документаПостроение одностраничного документа. Построение многостраничного документа. - презентация

1 Основы web: сайты, навигация. Построение одностраничного документаПостроение одностраничного документа. Построение многостраничного документа. Lixnatali Лихолетова Н. В. ГОУ СОШ 186 Калининский район Санкт-Петербург

2 Сайт совокупность гипертекстовых страниц (чаще древовидной структуры)для представления предприятия, фирмы, школы, частных лиц; может осуществлять коммерцию (интернет - магазины), поставлять информационные услуги (сайты для поиска информации, библиотеки, справочные системы, списки рассылки, обучение).

3 Сайт – визитная карточка организации и частного лица частного лица гипертекстовые страницы, которые составляют сайт, записываются на языке HTML средства HTML служат для указания браузеру, в каком виде выводить на экран текст и графику, позволяют записывать гиперссылки гиперссылка – это чувствительная область на экране, позволяющая осуществить переход на другую страницу браузер используется для просмотра страниц сайта

4 Устройство сайта Логотип Вертикальное меню Горизонтальное меню Заголовок сайта Содержание страницы Заголовок окна

5 Сайт состоит из страниц Сайт имеет одну главную страницу (входная точка, домашняя страница). Она указывается в качестве адреса. Пользователь переходит со страницы на страницу по контексту (по смыслу, по необходимости). Иерархия – эта структура чаще других используется для организации страниц сайта. «Карта сайта» – иерархия страниц показана в виде системы вложенных списков. Списочные записи являются гиперссылками на соответствующие страницы. Страницы сайта – это файлы с расширением htm (html)

6 Навигация по сайту Навигация (является удобной, если на любой странице сайта можно легко ответить на три вопроса Навигация (система перемещения) является удобной, если на любой странице сайта можно легко ответить на три вопроса. Где я? Куда пойти? Где меню? Логотип и заголовок – они называют сайт. Заголовок страницы, заголовок окна и позиция меню, не являющаяся ссылкой, отмечают страницу сайта. С каждой страницы есть возможность попасть на любую другую, минуя главную. Пользователь не должен прокручивать страницу для доступа к навигации. Меню помещают в начало и в конец страницы. Для перемещения без прокрутки в начало страницы можно поставить ссылку вверх.

7 Схемы навигации 1.Одноуровневая: сайт небольшой, страницы не подчинены друг другу ; одно и тоже меню на каждой странице; логотип является ссылкой на начальную страницу; меню расположено в начале и в конце страницы. 2. Двухуровневая: меню первого уровня располагается сверху и снизу страницы; меню второго уровня располагается на вертикальной полоске слева.

8 Универсальная: с любой страницы на любую другую в этой иерархии можно попасть максимум за 3 щелчка Схемы навигации 4. Внутренние и внешние ссылки: внутренняя ссылка связана с одной из страниц текущего сайта; внешняя ссылка уводит пользователя на другие сайты 5. Внутристраничные ссылки – перемещение в пределах одной страницы.

9 С чего начать? Создайте папку, в которой будут находиться все файлы, используемые в Web – сайте; Назовите её, используя прописные буквы английского алфавита; Создайте текстовый файл в любом текстовом процессоре (Блокнот, Word); Перед созданием Web – страницы, сохраните файл в правильном формате (html) и в нужной папке; Для просмотра и добавления записей, нужно зайти во вкладку «Вид/Просмотр HTML-кода».

10 Структура HTML- кода 1.Команды языка HTML – теги : заключаются в угловые скобки ; как правило, теги парные – открывающий и закрывающий. 2.Тег открывает программу, закрывает её. 3.Далее располагается головная часть программы и тело: - головная часть - тело

11 Начало HTML-кода Начало головной части Информация о кодировке документа Первый HTML- документ Заголовок окна документа Конец головной части Начало тела программы Первый HTML-документ Заголовок Горизонтальная линия Начало абзаца Корова не похожа на лошадь. А лошадь не похожа на корову. Именно это сходство Мы и берём за основу. Абзац Конец абзаца Конец тела программы Конец HTML-кода Структура HTML - кода

12 Структура Web - страницы Начало и конец страницы Описание страницы, её имя Имя страницы, отображается в заголовке браузера Содержание страницы Форматирование текста, n – уровень заголовкаЗаголовок (уровни от 1 до 6) * left, center, right Заголовок с выравниванием Абзац * left, center, right Абзац с выравниванием Перевод строки Горизонтальный разделитель Выравнивание по центру Адрес автора

13 Оформление текста либо помогает чтению, либо делает его утомительным! Оформление текста либо помогает чтению, либо делает его утомительным! 1.Запишите заголовок для всего документа. Он должен быть самым крупным (тег ). 2.Разделите документ на главные части (главы). 3. При необходимости главы поделите на параграфы, параграфы на пункты. 4.Текстовый фрагмент, обозначенный заголовком, разбейте на абзацы (тег ). 5. В каждом абзаце используйте одни и те же приёмы оформления. 6. Выберите цвет фона и цвет основного текста. 6. Выберите цвет фона и цвет основного текста. При внесении всех изменений не забудьте их сохранитьобновить сохранить и обновить информацию в браузере. При внесении всех изменений не забудьте их сохранитьобновить сохранить и обновить информацию в браузере.

14 Форматирование шрифта Жирный Курсив Верхний индекс Нижний индекс n – размер от 1 до 7 Размер шрифта (от 1 до 7) Цвет шрифта (задаётся названием цвета или 16-ричным кодом) Гарнитура шрифта Вставка изображений Вставка изображения * top, bottom, middle, left, right Выравнивание текста около изображения * текст Вывод текста вместо изображения

15 Главное – не пестрота и многообразие, а хороший вкус и единый стиль! Атрибуты цветов, заданные в теге, действуют до парного тега (до конца документа). … …… Цвет шрифта можно менять внутри документа многократно. …… Для фона и текста можно задавать цвета, используя шестнадцатеричный трёхбайтовый код, например #00FFFF – голубой цвет aqua

16 Цвет фона, текста и ссылок Фоновое изображение * red, blue, #FFFFFF и др. Цвет фона * red, blue, #FFFFFF и др. Цвет текста * red, blue, #FFFFFF и др. Цвет ссылки * red, blue, #FFFFFF и др. Цвет пройденной ссылки * red, blue, #FFFFFF и др. Цвет активной ссылки Вставка гиперссылок указатель ссылки Ссылка на другую страницу указатель ссылки Ссылка на закладку в другом документе указатель ссылки Ссылка на закладку в том же документе Определение закладки

17 Как задать таблицу Программирование таблицы Тег таблицы – … Тег строки – … Тег клетки (ячейки) - …

18 Атрибуты команды Table АтрибутЗначенияОписание AlignLeft, rightВыравнивание по горизонтали WidthЧисло или процент Ширина таблицы CellpaddingЧислоРасстояние между содержимым ячейки и рамкой CellspacingЧислоРасстояние между ячейками таблицы BgcolorЦветЦвет фона таблицы BackgroundЦветФоновая картинка BorderЧислоТолщина линий рамки BordercolorЦветЦвет линий рамки BordercolordarkЦветЦвет рамки (снизу и справа) BordercolorlightЦветЦвет рамки (сверху и слева)

19 Align – позволяет определить положение таблицы по отношению к соседним элементам документа. (если атрибут не задан, таблица выравнивается по левому краю окна, а другие элементы – выше или ниже неё) Выровнять таблицу можно при помощи команды Выровнять таблицу можно при помощи команды Width – ширина в пикселях или в процентах по отношению к ширине окна браузера. Cellpadding – задаёт расстояние между рамкой таблицы и содержимым ячейки. Cellspacing – расстояние между рамками соседних ячеек. Если задано border=0, то рамка и прямоугольники клеток не рисуются.

20 Атрибуты тега TR (строка) АтрибутЗначенияОписание AlignLeft, center, right Выравнивание по горизонтали Valign Top Center Bottom Baseline Выравнивание по вертикали - по верхнему краю - по центру - по нижнему краю - по самой верхней текстовой строке BgcolorЦветЦвет фона BordercolorЦветЦвет линий рамки BordercolordarkЦвет (объёмная рамка) Тёмный цвет рамки (снизу и справа) BordercolorlightЦвет (объёмная рамка) Светлый цвет рамки (сверху и слева)

21 Атрибуты тега TD (TH) (ячейка) TD – обычная ячейка TH – ячейка-заголовок, выравнивание по центру, текст выделяется полужирным шрифтом АтрибутЗначенияОписание NowrapВыключения автоматического разрыва строк ColspanЧислоШирина большой ячейки в столбцах RowspanЧислоВысота большой ячейки в строках Некоторые атрибуты имеют тот же смысл, что и для тега TR.

22 Кодирование списков Начальный тегВид метки на экране Обычно диск (зависит от браузера) Окружность Диск Квадрат Первый элемент списка Второй элемент списка ……. Последний элемент списка Первый элемент списка Второй элемент списка ……. Последний элемент списка П ример Маркированный список

23 Нумерованный список Начальный тегВид номера на экране Нумерация выполняется арабскими цифрами (1, 2, 3, …) Нумерация выполняется арабскими цифрами (1, 2, 3, …) Нумерация выполняется прописными буквами (А, B, C, …) Нумерация выполняется строчными буквами (a, b, c, …) Нумерация выполняется большими римскими цифрами (I, II, III, …) Нумерация выполняется малыми римскими цифрами (i, ii, iii, …)

24 Многостраничный документ. Кодирование гипертекстовых переходов Гипертекстовый документ - документ, который содержит видимые ссылки на другой документ. Одностраничный документ - короткое сообщение, представляющее собой одну HTML-страницу и включающее в себя не более одной картинки. Многостраничный документ - сообщение, содержащее более одной HTML-страницы и/или более одного рисунка. указатель ссылки Ссылка на другую страницу указатель ссылки Ссылка на закладку в другом документе указатель ссылки Ссылка на закладку в том же документе Определение закладки

25 Специальные символы Код строится из символа «&» (амперсанд), фиксированного имени (мнемоники) и завершающего символа «;» Меньше& gt;& #062 Амперсанд&& amp;& #038 Неразрывный пробел & nbsp;& #160 Копирайт©& copy;& #169 Тире-& #151 Левая ёлочка«& laquo;& #171 Правая ёлочка»& raquo;& #187 Левая лапка̏& #147 Правая лапка̋& #148 Номер& #8470

26 1. Старайтесь не перегружать страничку графикой, особенно, если она скаченная с бесплатных серверов (значки типа , Welcome, Next ) Старайтесь, по возможности, рисовать свою графику, от этого у посетителей вашей странички останется хорошее мнение. 2. Не используйте много красок в цветовой гамме своей страничке. Она должна быть выдержана в едином стиле. 3. Если есть возможность, постарайтесь не использовать на страничке фреймы, это облегчит вам жизнь при индексировании вашего сайта в поисковых системах. 4. Если вы используете таблицы, для построения навигации старайтесь задавать ширину в пикселях, а не в процентах. Иначе у машин с разным разрешением экрана страничка будет выглядеть по-разному. 5. Никогда не ориентируйте свою страничку на определенный браузер. От этого вы можете потерять до половины своих посетителей в день. Постарайтесь найти компромисс. 10 полезных советов

27 6. Не делайте навигацию слишком запутанной. Доступ к любой странице сайта должен быть с не более чем трех щелчков мыши. 7. Если вы решили вступить в какую-либо рекламную сеть не стоит перегружать страничку баннерами, большой выгоды от этого все равно не будет. Одного-двух баннеров на страничку вполне достаточно. 8. Не используйте большого разнообразия шрифтов, от этого у посетителя будет рябить в глазах, и не исключено, что заболит голова. 9. Делайте удобную и продуманную навигацию, стараясь максимально увеличить комфорт "хождения" по вашему сайту. 10. И на последок : всегда задавайте в теге цвет основного фона вашего сайта (в данном случае белый #FFFFFF). А если вы используете в качестве фона картинку, все равно укажите похожий цвет (гармонирующий с картинкой).