Создайте html документ отображающий на экране браузера следующую информацию

Обновлено: 05.07.2024

Цель работы – научиться использовать имеющиеся в модели документа события для внесения изменений в страницу.

Наиболее часто в сценариях используется рассмотренное выше событие onclick. Для того чтобы обратить внимание пользователя на определённый элемент HTML-документа, можно менять свойства этого элемент при попадании на него курсора мышки, а при снятии курсора восстанавливать прежние значения свойств. Например, можно менять цвет или размер элемента. Попадание курсора мышки на элемент фиксируется событием onMouseOver. Парное для него событие onMouseOut происходит при снятии курсора мышки с элемента.

Другая пара событий onMouseDown и OnMouseUp происходит при нажатии и отпускании левой кнопки мышки. Эту пару событий удобно применять для изменения свойств элементов или замены элементов на время удержания кнопки мышки нажатой.

Реакция на событие в отдельном элементе

Так как в объектной модели объекты могут быть вложены друг в друга, то событие, происходящее в дочернем объекте, одновременно происходит и в родительском объекте. JavaScript предоставляет различные способы локализации влияния события на иерархию объектов. Простейшей способ локализации (пример 2.1) заключается в размещении сценария в теге, на который должно воздействовать событие.

Пример 2.1.

В результате исполнения сценария изменяется положение текста на строке. Первоначально строка прижата к правому краю окна. При попадании на неё курсора она выравнивается по центру, а после снятия курсора прижимается к левому краю окна. Для обращения к объекту используется коллекция all, которая правильно воспринимается браузерами Internet Explorer 6.0 и Mozilla Firefox 2.0 . Ключевое слово this означает ссылку на текущий объект.

Если при наступлении события нужно произвести много действий, то удобно сценарий написать в виде функции и поместить её отдельно от элемента в специально предназначенный для сценариев контейнер <SCRIPT> …</script>. В примере 2.2 каждое из событий onMouseOver и onMouseOut вызывает два действия: выравнивание и изменение цвета текста в строке.

Пример 2.2

Задача 2.1. Напишите HTML-документ, отображающийся в окне браузера в виде следующих четырёх строк:

Пять событий с мышкой
Щёлкните по мне мышкой
На этом тексте нажмите, подержите и отпустите левую кнопку мышки
Медленно проведите курсором мышки по этой надписи

Первая строка – заголовок страницы. Вторая строка меняется при щелчке мышкой следующим образом:

шрифт увеличивается до 48pt;
цвет шрифта меняется на белый;
цвет фона меняется на голубой.

Повторный щелчок мышкой возвращает вторую строку к первоначальному виду.

Фон третьей строки меняется, когда курсор мышки находится на ней и нажимается или отпускается левая кнопка мышки. При нажатии фон становится зелёным, а при отпускании – жёлтым.

При попадании курсора мышки на четвёртую строку её фон становится красным, а при снятии – голубым.

Фиксация события в родительском элементе

Если реакцию на какое-либо событие требуют несколько элементов, расположенных на странице, то можно вызвать функцию для обработки этого события только в родительском элементе. В функции определяется, на каком элементе произошло событие, и выполняются соответствующие действия. Удобство такого подхода состоит в том, что весь алгоритм преобразований находится в одном месте, а недостаток – в сложности самой функции. Рассмотрим сценарий (пример 2.3), в котором для изменения свойств любого из трёх объектов, находящихся в окне браузера служит одна функция.

Пример 2.3

В примере 2.3 родительским по отношению к элементу H1 и двум элементам DIV является элемент BODY. Поэтому в теге <BODY> вызывается функция rodEl(), служащая для обработки события onclick.

В момент наступления события вся информация о нём запоминается в объекте event. Этот объект по разному описывается в стандарте W3C и в браузере Internet Explorer. Новые версии Internet Explorer поддерживают и стандарт W3C.

В стандарте W3C объект event передаётся в функцию в качестве параметра, а для обращения к объекту, на котором произошло событие, служит свойство event.target.

В Internet Explorer объект window.event - глобальный и поэтому передавать его в функцию в виде параметра не нужно. Для обращения к объекту, на котором произошло событие, в Internet Explorer служит свойство window.event.srcElement

В примере 2.3 первые две строчки тела функции rodEl()служат для кроссплатформенного (в любом браузере) обращения к объекту, на котором произошло событие.

В в следующих строках функции rodEl() сначала определяется Id элемента, по которому пользователь щёлкнул мышкой, а затем с помощью оператора Switch делается переход к изменению свойств указанного элемента.

Задача 2.2. Создайте страницу с изображением и подписью под ним. При щелчке по подписи, она должна менять свой цвет. Щелчок по изображению должен вызывать замену изображения и подписи. Функция для обработки события должна вызываться из родительского по отношению к изображению и подписи объекта.

Предотвращение всплывания события. Свойство cancelBubble

В примере 2.3 рассматривалась простая страница с небольшим количеством элементов, но даже в таком простом случае функция реакции на событие получилась сложной. Проще для каждого элемента написать свою функцию обработки события, а распространение события вверх по дереву иерархической структуры от "детей" к "родителям" (в этом случае говорят о всплывании события) блокировать с помощь специально для этого предназначенного свойства cancelBubble объекта event. Изменим пример 2.3 так, чтобы для реакции на щелчок по каждому из четырёх элементов страницы служила своя функция:

Пример 2.4

Скопируйте в свой каталог и просмотрите пример 2.4 в браузере Internet Explorer. Щёлкните по слову ЦВЕТ. Изменится не только цвет слова, но и цвет фона документа, так как после щелчка сначала выполнится функция H_1(), а затем событие всплывёт к родительскому элементу BODY и выполнится функция rodE1(). При щелчке по внутреннему прямоугольнику будут меняться цвета обоих прямоугольников и фона документа. Щелчок по внешнему прямоугольнику изменит цвет этого прямоугольника и цвет фона документа.

Задача 2.3. Чтобы предотвратить всплывание события в примере 2.4, вставьте в начало всех функций, кроме первой, оператор

1. Создайте личную папку, куда вы будете сохранять все файлы своего сайта.

2. Запустите программу Блокнот (Notepad).

3. Наберите в окне программы простейший файл HTML.

<TITLE> Учебный файл HTML</TITLE>

Расписание занятий на вторник

4. Сохраните файл под именем RASP.HTML (обязательно укажите тип файла HTML при сохранении) в личной папке.

5. Для просмотра Web-страницы используйте любую программу браузера (Internet Explorer, Opera, Mozilla Firefox или другую). Для этого, не покидая программу Блокнот (сверните окно на панель задач), откройте личную папку и двойным кликом по файлу RASP.HTML откройте окно браузера.

Задание № 2. Управление расположением текста на экране

Внести изменения в файл RASP.HTML, расположив слова Расписание , занятий , на вторник на разных строках.

<TITLE> Учебный файл HTML</TITLE>

1. При необходимости откройте текст Web-страницы в Блокноте (1 щелчок правой клавишей мыши по файлу RASP.HTML, в контекстном меню выбрать команду Открыть с помощью. и выбрать программу Блокнот). При необходимости открыть файл в браузере – двойной клик по значку файла левой клавишей мыши.

2. Сохраните текст с внесенными изменениями в файле RASP.HTML (меню Файл | Сохранить). Если у вас уже отображается Web-страница, то вам достаточно переключиться на панели задач на программу браузера и обновить эту страницу (кнопка).

Не забывайте каждый раз сохранять текст Web-страницы при ее корректировке в программе Блокнот и обновлять страницу при ее просмотре в программе браузера.

Задание № 3. Выделение фрагментов текста

1. Внести изменения в текст файла RASP.HTML

<TITLE> Учебный файл HTML</TITLE>

2. Посмотрите полученную Web-страницу.

Возможно использование комбинированных выделений текста.

Задание № 4. Задание размеров символов Web-страницы .

Используется шесть тегов заголовков: от <H1> до <H6> (тег двойной, т.е. требует закрытия). Каждому тегу соответствует конкретный стиль, заданный параметрами настройки браузера.

1. Внесите изменения в файл RASP.HTML

<TITLE> Учебный файл HTML</TITLE>

Существует два способа управления размером текста, отображаемого браузером:

· использование стилей заголовка,

· задание размера шрифта основного документа или размера текущего шрифта.

2. Просмотрите свою Web-страницу. На экране вы увидите то, что отображено на рисунке 3.

Задание № 5. Установка размера текущего шрифта

Тег шрифта <FONT> позволяет задавать размер текущего шрифта в отдельных местах текста в диапазоне от 1 до 7.

1. Внесите изменения в текст RASP.HTML

<TITLE> Учебный файл HTML</TITLE>

<FONT SIZE="7"> Расписание </FONT>

занятий на вторник

Для изменения цвета шрифта можно использовать в теге <FONT> атрибут COLOR=”X”. Вместо “X” надо подставить английское название цвета в кавычках (“ ”), либо его шестнадцатеричное значение.

1. Внесите изменения в файл RASP.HTML

<TITLE> Учебный файл HTML</TITLE>

2. Самостоятельно измените размер, цвет, гарнитуру стиль текста документа.

Задание № 6. Выравнивание текста по горизонтали

1. Внесите изменения в файл RASP.HTML

<TITLE> Учебный файл HTML</TITLE>

Задание № 7. Размещение графики на Web-странице

1. Внесите изменения в файл RASP.HTML

<TITLE> Учебный файл HTML</TITLE>

2. Просмотрите изменения вашей Web-страницы в браузере.

Тег <IMG> позволяет вставить изображение на Web-страницу. Оно появится в том месте документа, где находится этот тег. Тег <IMG> является одиночным.

Необходимо помнить, что графические файлы должны находиться в той же папке, что и файл HTML, описывающий страницу. Графика в Web, как правило, распространяется в трех форматах: GIF, JPG, PNG.

Для выполнения следующего задания поместите файл с именем CLOCK.JPG (или другим именем) в рабочую папку.

Следует помнить, что для браузера важно, в каком регистре вы задаете описание имени и типа файла. Выработайте для себя определенное правило и строго следуйте ему. Если вы размещаете файл графического изображения во вложенной папке, то при описании изображения необходимо указывать путь доступа к файлу изображения, отображая вложенность папок.

Задание № 8. Установка фонового изображения на Web-странице

Графика, используемая в качестве фоновой, задается в теге <BODY>.

1. Внесите изменения в файл RASP.HTML, предварительно подготовив и сохранив в рабочей папке графический файл фонового рисунка (FON.PNG).

<TITLE> Учебный файл HTML</TITLE>

Фоновое изображение – это графический файл с небольшим рисунком, который многократно повторяется, заполняя все окно браузера независимо от его размеров.

Поэкспериментируйте с фоновым рисунком Web-страницы и выберите оптимальный с вашей точки зрения.

Задание № 9. Создание таблицы

Запустите программу Блокнот и наберите текст следующей Web-страницы. Применяйте приемы копирования при создании таблицы, работая в программе Блокнот.

<TITLE>Расписание занятий 5 классов</TITLE>

Таблица является частью HTML-документа. Она представляет собой прямоугольную сетку, состоящую из вертикальных столбцов и горизонтальных строк. Пересечение строки и столбца называется ячейкой таблицы. Ячейка может содержать в себе текст, графику или другую таблицу.

Таблица состоит из трех основных частей:

Таблица в Web-документе заполняется по строкам (слева направо по строке, затем переход на новую строку). Каждая ячейка таблицы должна быть заполнена (хотя бы пробелом, которые используются для создания пустых ячеек).

Сохраните файл в личной рабочей папке под именем 5.HTML

3. Для просмотра созданной Web-страницы в окне личной рабочей папки двойным щелчком левой клавиши мыши загрузите браузер.

На экране вы увидите то, что показано на рисунке 8.

Задание № 10. Построение гипертекстовых связей

Важнейшим средством языка HTML является возможность включения в документ ссылок на другие документы.

· на удаленный HTML-файл,

· на некоторую точку в текущем HTML-документе,

· на любой файл, не являющийся HTML-документом.

В качестве ссылки можно использовать любой текст или графику.

1. Дополните файл 5.HTML описанием таблицы, содержащей названия дней недели, поместив его в начало Web-страницы.

В примерной программе по информатике и ИКТ на тему “Коммуникационные технологии” отводится всего 12 часов и предлагается создать Web-страничку с использованием шаблонов. На тему “Мультимедийные технологии” выделяется 8 часов, но если в образовательном учреждении информатика изучается на пропедевтическом уровне уже в 5, 6 и 7 классах, то целесообразно перенести изучение мультимедийных технологий в пропедевтический курс и тогда можно увеличить время на изучение коммуникационных технологий, а точнее, можно добавить тему “Создание Web-сайтов на языке HTML” в 8 классе.

Освоение технологии создания сайтов рекомендуется начать с языка разметки гипертекста HTML в программе Блокнот, что является первоосновой в данном направлении. Конечно, за 8 часов невозможно изучить весь язык HTML, но можно показать назначение и применение основных тегов языка. Если ученик заинтересуется технологией создания сайтов, то сможет продолжить изучение материала самостоятельно или на соответствующих курсах, кружках или факультативах.

Для учащихся, которые бысторо выполнили запланированную работу на уроке предусмотрены дополнительные задания.

Эффективно осваивается материал, когда учащиеся вместе с учителем выполняют общий проект, например, по теме из истории Санк-Петербурга “Драматические театры Санкт-Петербурга”, а затем в качестве итоговой работы создают собственный небольшой проект, используя в качестве шаблона сайт, созданный совместно с учителем.

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

Основные цели обучения: формирование познавательного интереса, развитие интеллектуальных и творческих способностей в области Web-технологий.

Урок 1

1. Общие сведения о Web-сайтах и языке HTML

Публикации во Всемирной паутине (World Wide Web) реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц, объединённых гиперссылками. Web-страницы могут содержать текст, рисунки, таблицы, мультимедийные и динамические объекты. Создание Web-сайтов можно осуществлять с помощью языка HTML.

HTML – Hyper Text Markup Language - язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера. HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Теги заключаются в угловые скобки <>…</> и бывают парные и непарные (одиночные <>).

Документ HTML – это текстовый файл с расширением .html или .htm, содержащий набор тегов.

Браузер – (browser) – программа для просмотра Web-страниц. Широко используют бразеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.

2. Структура HTML-документа

<HEAD>
Секция заголовка

Записываются meta-теги, содержащие информацию о названии страницы, об авторе и др.

</HEAD>

<BODY>
Тело документа

Содержит непосредственно информацию страницы: тексты, рисунки, таблицы

</BODY>

3. Форматирование символов

Символы, заключенные между следующими тегами отображают:

Текст, заключенный между тегами <FONT….> ……..</FONT> имеет заданный размер, цвет и гарнитуру. Для этого используются атрибуты: SIZE = значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), каждому цвету соответствует свой шестнадцатеричный код от 000000 до FFFFFF.

Если в тексте имеется несколько пробелов между словами или символы табуляции, то браузер на экран выводит всего один пробел. Если необходимы дополнительные пробелы то между словами надо добавить   - символьный примитив.

Одиночный тег <BR> разрывает текстовый поток и вставляет пустую строку. Несколько таких тегов добавляют несколько пустых строк. Межстрочный интервал – одинарный.

4. Практическое задание №1.

Создание первого HTML-документа “Драматические театры Санкт-Петербурга”, работа со шрифтами, задание цвета и размера шрифта. Освоение технологии работы.

Урок №2

1. Форматирование текста по абзацам

Тег <P> …</P> - начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом.

Выравнивание текста по абзацам:

2. Задание цвета всего текста и фона документа

Описываются в начальном теге тела документа <BODY>

<BODY BGCOLOR=цвет фона документа TEXT=цвет текста >.

3. Заголовки разных уровней

Тегами <H_n>….</H_n> оформляют заключенный в них текст. Значения n меняются от 1 до 6, при этом текст выводится от более крупного к более мелкому. Теги <H_n>….</H_n> могут иметь атрибуты ALIGN=CENTER, LEFT, RIGHT.

4. Простые списки

<OL>……</OL> - упорядоченный (нумерованный) список

5. Практичекое задание №2

Форматирование текста по абзацам, цвет фона, заголовки разных уровней, списки.

Урок №3

1. Вставка графических изображений

Всеми браузерами поддерживаются форматы .jpg, .jpg. Эти форматы являются растровыми. GIF – поддерживается прозрачность и анимацияю, хорошо подходит для рисованных изображений. JPG – для полноцветных изображений, хорошо подходит для отсканированных изображений и фотографий, анимацию не поддерживает.

Одиночный тег <IMG> вставляет графические изображения в текстовый поток в любом месте:

Необязательные атрибуты тега <img>:

BORDER = толщина обрамляющей рамки в пикс., 0 нет рамки

HEIGHT = высота изображения в пикселах или %

VSPACE =- свободное пространство сверху и снизу от изображения в пикселах или %

Чтобы рисунок был по центру, можно использовать тег <CENTER>…….<CENTER>/

2. Практическое задание №3

Вставка и форматирование графических изображений. Самостятельное создание Web-страниц драматических театров.

Урок №4

Связь с другими документами организуется тегами <A>…</A>.

<A href=”имя файла на который надо перейти” > текст гиперссылки </A>.

Рисунок так же можно сделать, как гиперссылку, написав:

2. Практическое задание №4

Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров.

Урок №5

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

С помощью таблиц удобно создавать навигацию по сайту.

Пример таблицы из двух строк (рядов), содержащих по две ячейки:

<TR> <TD> текст ячейки 1,1</TD> <TD> текст ячейки 1,2</TD> </TR> первая строка

<TR> <TD> текст 2,1 ячейки </TD> <TD> текст 2,2 ячейки </TD> </TR> вторая строка

Ячейки таблицы могут содержать текст или изображения, а также текст с HTML-тегами и гиперссылки. Не следует оставлять ячейки таблицы незаполненными, надо поместить хотя бы неразрывный пробел  

Основные атрибуты тегов <TABLE> <TR> и <TD> задают параметры таблицы, строки или ячейки:

ALIGN=left, right, center – выравнивание (<table>, <tr>, <td>)

BGCOLOR=’цвет’ – фоновый цвет (<table>, <tr>, <td>)

HSPACE=значение – свободное пространство слева и справа от таблицы в пикселах (<table>)

VSPACE=значение - свободное пространство сверху и снизу от таблицы в пикселах (<table>)

WIDTH=значение – ширина таблицы (ячейки) – в пикселах, или в процентах (<table>, <td>)

HEIGHT= значение – высоты таблицы (ячейки, строки) – в пикселах, или в процентах (<table>, <td>, <tr>)

BORDER= значение – толщина рамки вокруг таблицы и ее ячеек, по умолчанию значение=1, если значение=0, то рамки нет (<table>, <td>)

BORDECOLOR=’цвет’ – цет рамки (<table,<td>>)

VALIGH=bottom, middle, top – выравнивание содержимого по вертикали (<tr>, <td>)

2. Практичекое задание №5

Создание навигации по сайту в форме таблицы из одной строки

Уроки №6 и №7

1. Секция заголовка <HEAD>, мета-теги

В секции заголовка на каждой странице указывается информация о документе, которая используется при его отображении. Текст, заключенный между тегами <TITLE> . </TITLE>, отображается в заголовке окна браузера.

В секции заголовка обычно помещается и ряд тегов <META> с различными атрибутами, предоставляющими дополнительную информацию (метаинформацию) о Web-сайте:

<title>Драматические театры Санкт-Петербурга</title>

2. Самостоятельная работа над своим проектом

Примерные темы проекта: “Мосты через Неву”, “Реки и каналы Санкт-Петербурга”, “Мосты через каналы Санкт-Петербурга”, “Необычные музеи Санкт-Петербурга”, “Музыкальные театры”, “Филармонии и капелла”, “Технические ВУЗ-ы Санкт-Петербурга”, “Детские театры Санкт-Петербурга”, “Гуманитарные ВУЗ-ы Санкт-Петербурга”, “Пригороды Санкт-Петербурга”, “Музеи Санкт-Петербурга”, “Военные учебные заведения в Санкт-Петербурге” и др.

Необходимо оформить главную страницу сайта по образцу файла glavn.htm, выбрав в качестве навигации по сайту таблицу или список, и 2 - 3 страницы, раскрывающие содержание сайта и содержащие: заголовок, текст и рисунок.

Урок №8

1. Контрольный тест на знание тегов HTML – 15 минут.

2. Рефлексия. Представление проекта и оценивание его учениками класса и учителем – 30 минут.

fЧтобы создать файл html совсем не обязательно покупать или скачивать из интернета для этого какие-либо приложения или программы. В любом компьютере есть уже готовая бесплатная программа «Блокнот», которая идет в комплекте с операционной cистемой windows.

В принципе создать такой документ можно в любом текстовом редакторе, даже в ворде.

Как создать html документ в блокноте

Находим программу на своем компьютере:

Чтобы сохранить файл с расширением html, надо поменять *.txt на *.html, как здесь:

Таким образом, наш файл html создан.

На самом деле, существуют программы, которые помогают ускорить процесс наполнения файла содержимым.

Среди таких: Notepad++ и Dreamweaver. Первая является бесплатной и можно ее скачать на официальном сайте. Вторая – платная.

Преимущества программы Dreamweaver

После запуска программы надо будет выбрать: Создать HTML.

Файл будет создан автоматически с уже готовым обязательным кодом.

Сохраняем файл через выпадающее меню в программе.

Аналогичным образом можно создавать документы в других программах.

Структура html документа

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

Вообще, что такое html?

Это язык гипертекстовой разметки и его основные структурные элементы – теги. Благодаря им браузер «понимает», что должно отображаться на веб странице.

Для начала создадим структуру документа, прописав основные теги:

Фото: создадим структуру документа

Но, чтобы наша страница в интернете выглядела более привлекательно, нам понадобится еще один файл CSS.

Этим документом мы создадим стили: цвета, отступы, т.е. приукрасим нашу веб страницу.

Подобным образом создаем документ с расширением .CSS.

Открываем блокнот, создаем таблицу стилей, сохраняем файл:

Теперь можем дополнить структуру созданного документа, прописав ссылку на документ с расширением .css.

После того, как мы сохраним все и откроем файл в браузере, мы увидим следующее:

Если в браузере откроется то, что мы видим, значит, все сделано правильно.

Чтобы сайт стал виден в интернете, надо файлы .html и .css разместить на надежном хостинге.

Что-то я отвлеклась. Продолжим создавать нашу веб страничку.

Но, прежде я кратенько объясню значение прописанных тегов.

В самом начале <!DOCTYPE html> мы указали браузеру тип документа:

А теперь нам надо спланировать структуру сайта, т.е. подумать, какие блоки нам понадобятся.

Если мы посмотрим на другие ресурсы, то видим, что в большинстве своем они имеют: шапку, горизонтальные и вертикальные меню, боковые колонки, подвал (футер).

Создаем структуру шаблона

Допустим, мы решили сделать ресурс таким образом, чтобы он содержал хедер (шапку), колонка с основным содержимым, подвал (низ сайта) и боковая колонка (там будем размещать виджеты, рекламу и т.п.).

Для этого возвращаемся к коду, который мы написали на предварительном этапе.

Создаем общий контейнер, где в теге <body></body> прописываем структуру вместо «Приветствую, Вас!»:

В html блоки создаются парным тегом <div></div> , каждому из которых можно добавлять индикатор id , чтобы потом оформить внешний вид в css.

Если мы обновим наш файл в браузере, то увидим такую картинку:

Оформление блоков

Начинаем оформление с самого большого контейнера.

Добавляем в созданный ранее файл .css следующий код:

Теперь расшифруем эту запись.

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

Далее обратимся к блоку с индентификатором main, после чего в фигурных скобках перечислим правила, которые будут применены к данному элементу:

ширина контейнера будет составлять 810 px ,
margin: 0 auto – установит блок по центру, что позволит нашему сайту красиво отобразиться по центру,
следующее свойство border добавит сплошную рамку со всех сторон. В данном случае она будет черной.

Теперь настроим внешний вид основных блоков нашей страницы.

Для этого пропишем следующий код:

Вначале зададим стили для шапки: ее высота = 100 px и она отделена в нижней части рамкой от остальных блоков.
Сайдбару мы зададим ширину, высоту и свойство float: left . Данное правило означает, что элемент прижмется к левому краю основного блока.
Такое же свойство зададим контентному блоку, но только он окажется справа от сайдбара и ширина его будет больше.

Из кода видно, что сайдбар и блок с контентом имеют одинаковую высоту.

Но в данном случае особой роли это не играет. В реальности контентный блок всегда содержит очень много информации и поэтому высоту можно не задавать вообще.

Блок подвала (footer) – небольшой высоты и окружен рамкой.

Также здесь мы добавили еще одно правило: clear со значением both . Это свойство необходимо для того, чтобы два предыдущих блока не наезжали на подвал.

Блоки сайдбара и контента относятся к плавающим блокам, а по умолчанию обычные блоки могут на них наезжать.

Чтобы этого не происходило мы дали футеру команду типа: смотри, над тобой расположены плавающие блоки. Расположись ниже их.

Если теперь обновить страницу в браузере, то мы увидим следующее:

Приукрашиваем сайт

На следующем этапе добавим сайту цветов. Для начала зададим фон.

Сделать это можно, добавив следующий код:

Получим вот такой результат:

Работа с шапкой

Следующие шаги должны быть направлены на добавление в шапку названия сайта и логотипа.

Чтобы сделать логотип надо нарисовать картинку в фотошопе, либо скачать из интернета. Логотип следует положить в папку, где находится html-документ.

Код примет следующий вид:

kartinka.jpg – это наш логотип, далее следует команда, что логотип не должен повторяться и разместиться она должна по центру сверху и снизу, сместившись от начала блока на 5% по горизонтали.

Теперь убираем надпись «Здесь будет шапка» и пишем красивый заголовок.

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

text-shadow: 0 0 5px orange;

Мы задали следующие свойства:

размер и семейство шрифта;
отступ слева;
прижали заголовок к левому краю;
выбрали цвет шрифта;
верхний внутренний отступ;
тень текста.

Теперь наша шапка готова. В реальности она может содержать различные ссылки, номера телефонов и т.п.

Оформление меню в сайдбаре

В сайдбаре кроме меню есть различные виджеты. Для создания меню нам понадобятся ссылки, которые будут вести на другие страницы сайта.

Зададим стили:

Можно перед меню добавить красиво оформленный заголовок.

Как оформить блок контента

Добавим статью и наш блок готов.

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

Заголовки можно оформить цветом.

Как оформить подвал

Я не имею привычки что-то пихать в подвал. Обычно в футере размещают сведения об авторских правах. В данном случае и мы сделаем также.

Мы просто выровняем подвал по центру:

Вот и все, мы создали html файл в блокноте.

Наш файл содержит: логотип, название, сайдбар с меню, статью, футер. Чтобы сделать сайт привлекательным мы добавили стили, прописав их в файле .css.

Добавить комментарий Отменить ответ

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Заполняя форму для комментария вы соглашаетесь с Политикой конфиденциальности

Читайте также: