LAB6 Бочаров И.А. (544744)
Текст из файла
Национальный исследовательский институт
Московский Энергетический Институт (Технический Университет)
Институт автоматики и вычислительной техники
Кафедра Прикладной математики
Лабораторная работа №6
по дисциплине:
ВМСС
тема работы:
Разработка Web-страниц, содержащих таблицы и списки
Выполнил:
Бочаров Иван Андреевич
Проверил:
к.т.н., доц. Куриленко Иван Евгеньевич
Москва
2012 г.
Цель работы
Научиться оформлять таблицы на WEB-страницах. Получить навыки оформления маркированных и нумерованных списков на WEB-страницах.
Подготовка к работе
-
Ознакомиться с тегами HTML, отвечающими за разметку таблиц
-
Ознакомиться со стилями таблиц в HTML
-
Ознакомиться с способом разметки маркированных списков
-
Ознакомиться с способом разметки нумерованных списков
Выполнение подготовки
Теги HTML, отвечающие за разметку страницы
-
Тег
Элемент и
Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев.
-
Тег
Элемент предназначен для хранения одной или нескольких строк таблицы. Это позволяет создавать структурные блоки, к которым можно применять единое оформление через стили, а также управлять их видом через скрипты.
Допускается применять несколько тегов внутри контейнера
-
Тег
Элемент предназначен для хранения одной или нескольких строк, которые представлены внизу таблицы. Хотя тег в исходном коде должен быть определен до тега , браузеры отображают его в самом низу таблицы.
В пределах таблицы разрешается использовать только один элемент .
-
Тег
d>
Элемент предназначен для хранения одной или нескольких строк, которые представлены вверху таблицы. Допустимо использовать не более одного элемента в пределах одной таблицы, и он должен идти в исходном коде сразу после тега
-
Тег
Предназначен для создания одной ячейки таблицы. Тег
-
Тег
Тег служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега
-
Тег
Тег
Стили таблиц в HTML
Таблицы являются широко используемым элементом для представления различных данных на презентациях, лекциях, в рекламных листовках и не только. Благодаря своей наглядности, универсальности и простоте таблицы также повсеместно применяют на сайтах, чтобы лучше донести до читателя нужный материал. Однако в большинстве случаев на веб-страницах используют весьма убогие средства по представлению табличных данных. Вместе с тем воспользовавшись мощью стилей, можно весьма расширить средства по оформлению таблиц, удачно вписать их в дизайн сайта и нагляднее представить табличные данные.
Цвет фона ячеек
Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору TABLE. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с TABLE задать цвет у селектора TD или TH, то он и будет установлен в качестве фона.
Поля внутри ячеек
Полем называется расстояние между краем содержимого ячейки и ее границей. Обычно для этой цели применяется атрибут cellpadding тега
Границы и рамки
Линии между ячейками можно установить несколькими методами, при этом рассмотрим два из них, которые непосредственно связаны со стилями.
Использование атрибута cellspacing
Известно, что атрибут cellspacing тега
Заметим, что это не совсем удобный способ создания границ, поскольку он имеет ограниченную область применения. Так можно получить только одноцветную сетку, а не вертикальные или горизонтальные линии в нужных местах.
Применение свойства border
Стилевое свойство border одновременно задает цвет границы, ее стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать его производные — border-left, border-right, border-top и border-bottom, они соответственно определяют границу слева, справа, сверху и снизу.
Применяя свойство border к селектору TABLE, мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек
Выравнивание содержимого ячеек
По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег
Выравнивание по вертикали в ячейке всегда происходит по ее центру, если это не оговорено особо. Это не всегда удобно, особенно для таблиц, у которых содержимое ячеек различается по высоте. В таком случае выравнивание устанавливают по верхнему краю ячейки с помощью свойства vertical-align
Способы разметки списков
Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Списки предоставляют возможность упорядочить и систематизировать разные данные и представить их в наглядном и удобном для пользователя виде.
Маркированный список
Маркированный список определяется тем, что перед каждым элементом списка добавляется небольшой маркер, обычно в виде закрашенного кружка. Сам список формируется с помощью контейнера , а каждый пункт списка начинается с тега , как показано ниже.
Первый пункт
Второй пункт
Третий пункт
В списке непременно должен присутствовать закрывающий тег , иначе возникнет ошибка. Закрывающий тег хотя и не обязателен, но рекомендуется всегда его добавлять, чтобы четко разделять элементы списка.
Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега . Допустимые значения – disc, circle, square.
Нумерованный список
Нумерованные списки представляют собой набор элементов с их порядковыми номерами. Вид и тип нумерации зависит от атрибутов тега , который и применяется для создания списка. Каждый пункт нумерованного списка обозначается тегом , как показано ниже.
<ol>
<li>Первый пунктli>
<li>Второй пунктli>
<li>Третий пунктli>
ol>
Если не указывать никаких дополнительных атрибутов и просто написать тег , то по умолчанию применяется список с арабскими числами (1, 2, 3,...)
В качестве нумерующих элементов могут выступать следующие значения:
-
арабские числа (1, 2, 3, ...) – type = “1”;
-
прописные латинские буквы (A, B, C, ...) – type = “A”;
-
строчные латинские буквы (a, b, c, ...) – type = “a”;
-
прописные римские числа (I, II, III, ...) – type = “I”;
-
строчные римские числа (i, ii, iii, ...) – type = “i”.
Чтобы начать список с определенного значения, используется атрибут start тега .
Список определений
Список определений состоит из двух элементов — термина и его определения. Сам список задается с помощью контейнера , термин — тегом , а его определение — с помощью тега .
Общая структура списка определений
<dl>
<dt>Термин 1dt>
<dd>Определение 1dd>
<dt>Термин 2dt>
<dd>Определение 2dd>
dl>
Выполнение работы
В данной лабораторной работе было необходимо разработать 2 таблицы: одну с указанным в варианте форматированием, а вторую – произвольного формата, но с использованием объединения ячеек, разным цветом фона ячеек. Приведем скриншот:
Следует заметить, что, хоть в задании и имелось указание некоторые из границ сделать линией «точка-тире», стандартные возможности HTML и CSS не позволяют оформить одну из границ требуемым образом. Подобный вид линии пока описан только в черновиках спецификации CSS3.
Вторым заданием было создать страницу, на которой разместить различные виды списков (маркированный и нумерованный) с различными типами маркеров и нумерации. Приведем скриншоты:
Код страниц приведен ниже:
tables.html
|
Таблица 1
|
Характеристики
Тип файла документ
Документы такого типа открываются такими программами, как Microsoft Office Word на компьютерах Windows, Apple Pages на компьютерах Mac, Open Office - бесплатная альтернатива на различных платформах, в том числе Linux. Наиболее простым и современным решением будут Google документы, так как открываются онлайн без скачивания прямо в браузере на любой платформе. Существуют российские качественные аналоги, например от Яндекса.
Будьте внимательны на мобильных устройствах, так как там используются упрощённый функционал даже в официальном приложении от Microsoft, поэтому для просмотра скачивайте PDF-версию. А если нужно редактировать файл, то используйте оригинальный файл.
Файлы такого типа обычно разбиты на страницы, а текст может быть форматированным (жирный, курсив, выбор шрифта, таблицы и т.п.), а также в него можно добавлять изображения. Формат идеально подходит для рефератов, докладов и РПЗ курсовых проектов, которые необходимо распечатать. Кстати перед печатью также сохраняйте файл в PDF, так как принтер может начудить со шрифтами.