Поиск

Полнотекстовый поиск:
Где искать:
везде
только в названии
только в тексте
Выводить:
описание
слова в тексте
только заголовок

Рекомендуем ознакомиться

'Документ'
Перечень субъектов ГЭР, не обеспечивших ежегодное снижение объема потребления энергетических ресурсов, воды на единицу продукции, площади зданий строе...полностью>>
'Документ'
1 (каждый первый понедельник) Кетнер И.А. 11:00-15:00 07.10, 0 .1 11:00-15:00 .09 11:00-15:00 08.11 Колесникова О.В. 10:00 -1 :00 04,18/09 01,1 ,30/10...полностью>>
'Документ'
43. Какие из перечисленных антикризисных рецептов предлагаются сторонниками политики стимулирования совокупного спроса, а какие – сторонниками политик...полностью>>
'Документ'
Мы не случайно выбрали для рассмотрения обязанностей в семье опыт ведической культуры. Эта культура до сих пор сохраняет традиции прошлых поколений, о...полностью>>

Главная > Документ

Сохрани ссылку в одной из сетей:
Информация о документе
Дата добавления:
Размер:
Доступные форматы для скачивания:

Лабораторная работа № 1

Форматирование в HTML-документах. Основы применения каскадных таблиц стилей CSS

Цель. Практически изучить структуру HTML-документа, научиться подключать таблицы стилей и настраивать внешний вид страницы при их помощи. Научиться применять элементы HTML (списки и гиперссылки), а также свойства CSS (модель отображения, псевдоклассы гиперссылок) для формирования системы навигации на веб-странице.

Часть 1. Создание обычной HTML страницы с форматированием

1. Создание каркаса документа XHTML 1.0 Transitional.

На начальном этапе рекомендуется воспользоваться простейшим (не специализированным) текстовым редактором, который не окажет вам абсолютно никакой помощи по вводу HTML-тэгов и атрибутов - зато вы получите возможность обратить внимание на каждую деталь, что наверняка окажется полезным в дальнейшей работе. Предлагаем использовать, например, Блокнот или WordPad. Откройте редактор и сразу сохраните пустой еще файл под именем Lab1.htm в какую-либо папку, которую вы создали специально для лабораторных работ по данному курсу.

Введите определение типа документа XHTML 1.0 Transitional, затем элемент html, а внутри него - head (с заголовком) и body - пока без содержимого. Напоминаем, что определение пустого элемента состоит из открывающего и следующего сразу за ним закрывающего тэга.

2. Ввод заголовка и абзаца текста.

В теле документа (внутри элемента body) введите элемент заголовка первого уровня с произвольным текстом. Затем введите элемент абзаца - также с произвольным текстом. Изучая технику применения веб-технологий, мы в данном курсе абстрагируемся от содержания и используем, как правило, бессмысленный заполняющий текст - исторически для дизайнеров это "Lorem ipsum" (). Следите за соответствием открывающих и закрывающих тэгов - каждый элемент должен либо соседствовать с другими элементами, либо быть полностью вложенным - "пересекаться" элементы не могут.

Сохраните документ и откройте в браузере. Мы изучаем стандартные средства HTML, и они должны одинаково работать во всех браузерах. Однако в первую очередь обычно проверяют веб-страницы в Microsoft Internet Explorer. Рекомендуем использовать последнюю версию этого браузера (на момент написания курса - 8.0). Необходимо также делать проверку и в других браузерах - профессионалы держат под рукой все современные (и многие старые) версии всех популярных браузеров. По крайней мере, в одном из современных ориентированных на стандарты браузеров проверку делать имеет смысл (помимо IE) - дело в том, что во многом из-за своей популярности IE ведет себя наиболее нестандартно - это обусловлено стремлением его разработчиков "не обрушить Web", а поддерживать совместимость с прошлыми версиями различных спецификаций (многие из которых содержат ошибки).

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

3. Добавление таблицы каскадных стилей.

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

Добавьте в раздел head элемент style с атрибутом type="text/css". Добавьте в него пустое правило для элемента body:

Теперь по порядку назначим при помощи этого правила элементу body следующий ряд свойств:

  • цвет фона (неяркий)

  • толстую серую рамку

  • большой отступ - чтобы отдалить рамку от границ окна

  • небольшое поле - чтобы отделить текст от рамки

  • крупный размер шрифта (например, 20px)

  • гарнитуру Comic Sans MS

  • отступ первой строки

Уберем рамку справа и снизу, назначив свойствам border-bottom и border-right значение none.

После каждого дополнения сохраняйте документ в редакторе (Ctrl-S), переходите в браузер (в котором ваша рабочая страница уже открыта) и нажимайте Обновить (F5), чтобы убедиться в том, что действия достигают желаемого эффекта и не нарушают прежних достижений. Удобно разделить рабочую область экрана так, чтобы одновременно видеть и редактор, и браузер. Добейтесь примерно такого вида:

4. Вставка изображения

Сейчас понадобится файл с каким-либо графическим изображением типа GIF, JPG или PNG. Его геометрические размеры должны быть не слишком большими, чтобы оно аккуратно вписывалось в окно браузера. Ширина окна браузера обычно равна полной ширине экрана (если нет полосы вертикальной прокрутки) - например, 1280px. Если от ширины окна отнять удвоенный отступ нашей страницы (поскольку он делается с обеих сторон), толщину рамки и удвоенное поле, то получится максимальная ширина изображения, при которой страница будет полностью помещаться в доступную ширину окна (не требуя горизонтальной прокрутки). Кроме того, потом мы сделаем для изображению рамку с полем, что еще сократит пространство на странице. И, наконец, слишком большие изображения выглядят обычно не очень хорошо - все эти соображения приводят к заключению, что ширину изображения лучше выбирать достаточно небольшой.

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

Вставьте в документ (внутри элемента body, но после заголовка и абзаца) элемент img:

7. Создание рамки изображения.

Добавьте стилевое правило для элемента img, включающее тонкую сплошную серую рамку и поле:

img {

padding: 10px;

border: 1px solid #777;

}

8. Центрирование изображения с подписью

Поместите изображение (элемент img) и его подпись (следующий элемент p) в секцию, т.е. создайте пустой элемент div и переместите в него элементы img и p (вместе с элементом a). Теперь позиционируем секцию горизонтально по центру страницы - для этого нужно явно задать ее ширину и затем установить автоматические отступы слева и справа. Ширина секции равна ширине изображения плюс удвоенный отступ изображения плюс удвоенная толщина рамки изображения.

Добавьте элементу div атрибуты class="pic" style="width:689px": стилевое правило, центрирующее секцию, имеет смысл определить для множества (класса) секций; а ширина секции привязана к ширине изображения, поэтому атрибут ширины лучше определить во встроенном стиле. Для класса pic стиль должен выглядеть следующим образом:

.pic {

margin-left: auto;

margin-right: auto;

}

Проверьте, что получилось в результате.

9. Добавление рамки и фона абзацу.

Создайте стилевое правило для абзаца, помещенного в секцию с классом pic:

.pic p {

}

Селектор .pic p означает: элемент p, находящийся на произвольном уровне вложенности в элемент класса pic.

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

  • выравнивание текста - по центру;

  • поле - 5 пикселов;

  • рамка - тонкая пунктирная (dashed) серая;

  • шрифт полужирный;

  • фон - серый (немного темнее общего фона).

В результате всего форматирования вы должны получить примерно следующее:

Часть 2. Создание навигации по WEB сайту на основе CSS

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

Как правило, такие динамические меню принято создавать средствами языка Javascript, позволяющего совершать любой сложности манипуляции с элементами веб-страницы. Однако, существует и решение на CSS - довольно простое и красивое, хотя и не любую фантазию дизайнера выполняющее. Рассмотрим его пошагово.

В этой работе воспользуемся специализированным редактором, например, Microsoft Visual Web Developer. Мы рекомендуем именно его, поскольку он бесплатен, а, совершенствуясь профессионально, вы можете перейти на Microsoft Visual Studio - одно из лучших средств разработчика самого широкого круга приложений.

  1. Запустите Visual Web Developer (или Visual Studio) и создайте новый документ HTML.

  2. Внутри элемента head введите подходящий заголовок страницы.

  3. Введите открывающий тэг .

  1. Создайте в теле документа набор категорий в виде неупорядоченного списка (ul), каждый элемент которого содержит список ссылок (см. пример).

  • Популярные блюда

    • Итальянская кухня
    • Закуски
    • Закуски
    • Сласти
    • Фрукты

  • Подарки к празднику

    • Юбилеи
    • Малышам
    • День рождения
    • Поздравляем!!!

  • Выбор по цене

    • Меньше 1000 руб
    • От 1000 до 1500 руб
    • От 1500 до 2000 руб
    • От 2000 до 3000 руб
    • Дорого

  • Фрукты и Овощи">Фрукты и Овощи

    • Сухофрукты и Орехи
    • Корзины фруктов
    • Горы фруктов
    • Здоровая пища
    • Без пестицидов

  • Цветы

    • Живые цветы
    • Садовые цветы
    • "Говорящие" цветы

  • Корпоративные подарки" href="/Corporate-Food.htm">

    Корпоративные подарки

Названия ссылок и категорий придумайте самостоятельно. Важно, чтобы атрибут id внешнего списка имел значение MainMenu - далее ему будет назначен особый стиль по этому идентификатору).

6. В таблице стилей добавьте следующее правило:

#MainMenu > li {

float: left;

list-style-type: none;

}

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

7. Пусть вложенные списки ссылок будут невидимыми (добавьте им свойство display:none;) и появляются только при наведении курсора на название соответствующей категории. Следующее правило с селектором псевдокласса hover имеет такой смысл: у списка (ul), вложенного в пункт списка (li), на который наведён указатель (:hover) и который вложен в элемент с id=#MainMenu, способ отображения следует сделать блочным (а не невидимым):,

#MainMenu li:hover ul {

display:block;

}

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

8. Принципиально механизм работает - осталась эстетическая сторона.

    • Назначьте якорям любого уровня вложенности в меню (правило #MainMenu a) желаемый цвет (color), гарнитуру (font), а также уберите подчёркивание (text-decoration).

    • Назначьте элементам списка категорий (правило #MainMenu > li) фоновый цвет (background), внутренний отступ (padding) и рамку справа (border-right).

    • Назначьте элементам вложенного списка ссылок (правило #MainMenu li li) такой же фоновый цвет, как и в списке категорий, а также небольшой отступ и рамку снизу. Кроме того, уберите маркировку списка (list-style-type).

    • Уберите у списка ссылок (правило #MainMenu li ul) поля и отступы (margin и padding).

Небольшой проблемой является то, что некоторые элементы списка категорий увеличиваются в ширину при наведении на них указателя. Это является следствием того, что ширина элемента списка определяется шириной всего содержимого - включая вложенный список. Однако если выбросить вложенный список из нормального потока и позиционировать его абсолютно, то его ширина более не будет влиять на ширину родительского элемента. Поэтому укажите для списка ссылок абсолютное позиционирование, а для элементов списка категорий - относительное. Проверьте в браузере. Затем уточните положение вложенного списка относительно его контейнера путём задания значения свойств left и top (не опускайте выпадающий список слишком низко, иначе он станет пропадать при попытке выбрать в нём ссылку).

Зачем нужно было позиционировать элементы списка категорий относительно? Уберите соответствующее правило, и вам всё станет ясно.

9. Добавьте последний штрих: пусть элементы обоих списков при наведении указателя немного изменяют цвет фона (правило #MainMenu li:hover).

Окончательный результат должен быть подобен следующему:

Анализируя полученный результат, можно придти к выводу, что реализация на CSS достаточно лаконична, очевидна и независима от исходной разметки. Сама же разметка имеет ясную логическую структуру - списки ссылок, вложенные в список категорий. Общая структура и основные взаимосвязи элементов в документе показаны на следующем рисунке (использована нотация UML).

Смысл диаграммы достаточно очевиден: в элемент HTML ul#MainMenu включается 5 элементов li, к каждому из которых применяется правило CSS #MainMenu > li, определяющее такие свойства как float, background, padding, border и position и т.д.

Необходимо, однако, добавить, что, хотя в данном примере это и не играет существенной роли, но стилевые свойства, применяемые к элементам, определяются не только из таблицы стилей. Также источниками стилевых свойств являются встроенные определения стиля и браузерные стили по умолчанию. Что же касается свойств, определённых в таблице стилей, то некоторые из них могут наследоваться элементами HTML от их контейнеров - так, например, цвет и большинство других атрибутов текста, будучи указаны тем или иным образом для элемента body, наследуется и всеми вложенными в него элементами.

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



Похожие документы:

  1. Образовательная программа основного общего образования Муниципального бюджетного общеобразовательного учреждения

    Образовательная программа
    ... страницы с помощью каскадных таблиц стилей (CSS). Превращать эскиз будущей web-страницы в html-документ. Средством формирования ... применения МГП Школа выживания 1 Цели, задачи и принципы гуманитарной деятельности. Главные принципы лежащие в основе ...
  2. Программа компьютерного кружка «компьютерные коммуникации и основы веб-конструирования»

    Программа
    ... 9 3 6 CSS Каскадные таблицы стилей Уровни CSS Способы определения таблиц стилей Запись шаблона CSS Группировка и наследование Селекторы Псевдоклассы Применение таблиц стилей CSS. CSS в форматировании текста ...
  3. Методические указания к самостоятельной работе студентов по дисциплине Компьютерная техника и программирование для специальности

    Методические указания
    ... скоростью загрузки HTML документов, как из ... Opera поддерживает каскадные таблицы стилей (CSS). Стоит ... таблице, где используется данный стиль. Применение форматирования в окне Стили и форматирование Выберите Формат → Стили. Чтобы изменить форматирование ...
  4. Приказ № от 2011 г. Рабочая программа элективного курса по информатике «Технология создания сайтов» для 10-11 классов универсального профиля

    Рабочая программа
    ... целям и задачам курса. Основой ... форматирования ... HTML-документом Изображения в HTML-документе ... каскадные таблицы стилей, CSS, селектор, Flash, символ, клип, кнопка, анимация движения, анимация формы, Dynamic HTML ... забор Применение таблиц стилей к ...
  5. «Волшебный компьютер» (35 часов)

    Документ
    ... HTML-документа. ... таблицы и основы баз данных» (35 часов) Назначение, возможности, область применения офисных приложений. Набор и форматирование ... HTML. Структура веб-страницы. Оформление страниц с помощью каскадных таблиц стилей (CSS ... цели моделирования ...

Другие похожие документы..