Лабораторная работа 6 (LAB6 Бочаров И.А.)

Посмотреть архив целиком

Национальный исследовательский институт

Московский Энергетический Институт (Технический Университет)

Институт автоматики и вычислительной техники

Кафедра Прикладной математики





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

по дисциплине:

ВМСС

тема работы:

Разработка Web-страниц, содержащих таблицы и списки



Выполнил:

Бочаров Иван Андреевич

Проверил:

к.т.н., доц. Куриленко Иван Евгеньевич











Москва

2012 г.

Цель работы

Научиться оформлять таблицы на WEB-страницах. Получить навыки оформления маркированных и нумерованных списков на WEB-страницах.

Подготовка к работе

  • Ознакомиться с тегами HTML, отвечающими за разметку таблиц

  • Ознакомиться со стилями таблиц в HTML

  • Ознакомиться с способом разметки маркированных списков

  • Ознакомиться с способом разметки нумерованных списков

Выполнение подготовки

Теги HTML, отвечающие за разметку страницы

  • Тег

    Элемент 

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

    Элемент 

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

    Допускается применять несколько тегов 

     внутри контейнера 
    .

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

    • Тег

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

    • Тег

    Элемент 

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

    В пределах таблицы разрешается использовать только один элемент 

    .

    • Тег d>

    Элемент 

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

    • Тег

    , который в свою очередь располагается внутри тега 
     

    Предназначен для создания одной ячейки таблицы. Тег 

     должен размещаться внутри контейнера 
    .

    • Тег

    Тег 

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

    • Тег

     

    Тег 

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

    Стили таблиц в HTML

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

    Цвет фона ячеек

    Цвет фона одновременно всех ячеек таблицы устанавливается через свойство background, которое применяется к селектору TABLE. При этом следует помнить о правилах использования стилей, в частности, наследовании свойств элементов. Если одновременно с TABLE задать цвет у селектора TD или TH, то он и будет установлен в качестве фона.

    Поля внутри ячеек

    Полем называется расстояние между краем содержимого ячейки и ее границей. Обычно для этой цели применяется атрибут cellpadding тега 

    . Он определяет значение поля в пикселах со всех сторон ячейки. Допускается использовать стилевое свойство padding, добавляя его к селектору TD

    Границы и рамки

    Линии между ячейками можно установить несколькими методами, при этом рассмотрим два из них, которые непосредственно связаны со стилями.

    Использование атрибута cellspacing

    Известно, что атрибут cellspacing тега 

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

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

    Применение свойства border

    Стилевое свойство border одновременно задает цвет границы, ее стиль и толщину вокруг элемента. Когда требуется создать отдельные линии на разных сторонах, лучше использовать его производные — border-left, border-right, border-top и border-bottom, они соответственно определяют границу слева, справа, сверху и снизу.

    Применяя свойство border к селектору TABLE, мы добавляем рамку вокруг таблицы в целом, а к селектору TD или TH — рамку вокруг ячеек 

    Выравнивание содержимого ячеек

    По умолчанию текст в ячейке таблицы выравнивается по левому краю. Исключением из этого правила служит тег 

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

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

    Способы разметки списков

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

    Маркированный список

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

      , а каждый пункт списка начинается с тега 
    • , как показано ниже.

      • Первый пункт
      • Второй пункт
      • Третий пункт

      В списке непременно должен присутствовать закрывающий тег 

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

    Маркеры могут принимать один из трех видов: круг (по умолчанию), окружность и квадрат. Для выбора стиля маркера используется атрибут type тега 

      . Допустимые значения – disc, circle, square.

      Нумерованный список

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

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

        <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

            DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

            <html>

            <head>

            <title>Лабораторные работы по ВМССtitle>

            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

            <meta name="keywords" content="vmss, lab">

            <link rel="stylesheet" type="text/css" href="styles.css">

            <link rel="stylesheet" type="text/css" href="tablestyles.css">

            head>

            <body>


            <div class="headerone">Главная страницаdiv>


            <table>

            <tr>

            <td class="menu" rowspan="2">

            <ul id="menu">

            <li><a href="main.html">Главнаяa>li>

            <li><a href="classification.html">Постановка задачи классификацииa>li>

            <li><a href="algorithms.html">Алгоритмы решения задачиa>li>

            <li><a href="formula.xhtml">Формулаa>li>

            <li><a href="lists.html">Спискиa>li>

            <li><a href="tables.html">Таблицаa>li>

            ul>

            td>

            <td valign="top">

            <div class="headertwo">Таблица 1div>

            <table class="task" cellspacing="0" border = "0" >

            <tr>

            <td>

            td>

            <td class="dotted">

            td>

            <td class="fullsolid">

            td>

            <td class="fullsolid">

            td>

            tr>

            <tr>

            <td class="dotted">

            td>

            <td class="dotted">

            td>

            <td class="dashed">

            td>

            <td class="fullsolid">

            td>

            tr>

            <tr>

            <td class="fullsolid">

            td>

            <td class="dashed">

            td>

            <td class="dashed">

            td>

            <td class="dashed">

            td>

            tr>

            <tr>

            <td class="fullsolid">

            td>

            <td class="fullsolid">

            td>

            <td class="dashed">

            td>

            <td>

            td>

            tr>

            table>

            td>

            tr>

            <tr>

            <td>

            <div class="headertwo">Таблица 2div>

            <table class="money" border="0" cellspacing="0">

            <thead>

            <tr>

            <td class="fullsolid"> Год td>

            <td class="fullsolid"> Страна td>

            <td class="fullsolid"> Продано товара td>

            tr>

            thead>

            <tfoot>

            <tr>

            <td colspan="2"> Итого: td>


            Случайные файлы

            Файл
            74458.rtf
            Filocofia.doc
            10726-1.rtf
            BA.doc
            4177.rtf




            Чтобы не видеть здесь видео-рекламу достаточно стать зарегистрированным пользователем.
            Чтобы не видеть никакую рекламу на сайте, нужно стать VIP-пользователем.
            Это можно сделать совершенно бесплатно. Читайте подробности тут.

Ещё статьи 1