
- •4. Практическое занятие: Разработка макета Интернет-магазина
- •4.1. Описание структуры сайта
- •4.2. Основные принципы создания макета страниц
- •4.3. Обзор html
- •4.3.1. Структура html-документа
- •4.3.2. Основные элементы
- •4.3.2.1. Гиперссылки
- •4.3.2.2. Текстовые блоки
- •4.3.2.3. Форматирование текста
- •4.3.2.4. Списки
- •4.3.2.6. Объекты
- •4.3.2.7. Изображения
- •4.3.2.8. Таблицы
- •4.3.2.9. Формы
- •4.4. Общее описание Dynamic Web Templates
- •4.5. Общее описание css
- •4.6. Отладка css с помощью инструментов разработчика в ie8
- •4.6.1. Открытие и закрытие средств разработчика
- •4.6.2. Выбор объектов на веб-странице
- •4.6.3. Проверка элементов html
- •4.6.4. Использование средств "Стиль" и "Отслеживать стили"
- •4.6.5. Использование средства "Раскладка"
- •4.6.6. Использование средства "Атрибуты"
- •4.6.7. Проверка правил css
- •4.7. Создание сайта из шаблона в Expression Studio
- •4.8. Создание сайта в Visual Studio
- •4.8.1. Работа со стилями в Microsoft Visual Studio 2008
- •4.9. Результат
- •4.10. Ключевые термины
- •4.11. Краткие итоги
4.3.2.3. Форматирование текста
<EM> … </EM> – логическое ударение (обычно отображается курсивным шрифтом).
<STRONG> … </STRONG> – усиленное логическое ударение (обычно отображается жирным шрифтом).
<I> … </I> – выделение текста курсивом.
<B> … </B> – выделение текста жирным шрифтом.
<U> … </U> – подчеркивание текста.
<S> … </S> – зачеркнутый текст.
<BIG> … </BIG> – увеличение шрифта.
<SMALL> … </SMALL> – уменьшение шрифта.
<SUB> … </SUB> – подстрочный текст.
<SUP> … </SUP> – надстрочный текст.
<FONT параметры> … </FONT> – задание параметров шрифта:
COLOR=color – задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 – зеленую, последние 2 – синюю) или названием;
FACE=шрифт меняет шрифт;
SIZE=размер меняет размер шрифта. Размер от 1 до 7, стандартный по умолчанию 3. (Есть много способов изменить стандартный размер для данной страницы.);
SIZE=+размер или SIZE=-размер – размер задается по сравнению со стандартным. Например, +2 означает размер на 2 больше стандартного.
Так, например:
Сигналом к началу атаки являются
<U>три</U>
<FONT SIZE="+2">больших</FONT>
<FONT COLOR="green">зеленых</FONT>
свистка.
Создаст приблизительно следующий текст:
Сигналом к началу атаки являются три больших зеленых свистка.
4.3.2.4. Списки
<UL>
<LI> первый элемент </LI>
<LI> второй элемент </LI>
<LI> третий элемент </LI>
</UL>
создает список:
первый элемент
второй элемент
третий элемент
Если вместо <UL> (ненумерованный список) поставить <OL> (нумерованный список), список получится нумерованным:
первый элемент
второй элемент
третий элемент
4.3.2.6. Объекты
EMBED – вставка различных объектов: не-HTML документов и media-файлов.
APPLET – вставка Java-аплетов.
SCRIPT – вставка скриптов.
OBJECT – также используется для вставки различных объектов, например приложений Silverlight.
4.3.2.7. Изображения
IMG – вставка изображения (Этот тег не закрывается);
SRC – имя или URL;
ALT – альтернативное имя (отобразится, если в браузере запретить отображать картинки);
TITLE – краткое описание изображения (отобразится при наведении курсора на картинку);
WIDTH, HEIGHT – размеры (если не совпадают с истинными размерами картинки, то изображение "растянется"/"сожмется");
ALIGN – задает параметры обтекания текстом (top, middle, bottom, left, right);
VSPACE, HSPACE – задают размеры вертикального и горизонтального пространства вокруг изображения.
Пример:
<IMG SRC=url ALT="текст" TITLE="текст"
WIDTH="размер (пикс, %)" HEIGHT="размер (пикс, %)">
Изображение можно сделать ссылкой:
<A HREF=url ><IMG SRC=url></A>
4.3.2.8. Таблицы
TABLE – создание таблицы. Параметры тега:
BORDER – толщина разделительных линий в таблице;
CELLSPACING – расстояние между клетками.
CAPTION – заголовок таблицы (этот тег необязателен).
TR – строка таблицы.
TH – заголовок столбца таблицы (этот тег необязателен).
TD – ячейка таблицы.
height – высота таблицы.
width – ширина таблицы.
Так, например:
<table border="0" cellpadding="4" cellspacing="0">
<tr >
<th scope="col" style="width: 30%">
Количество на складе
</th>
<th scope="col" style="width: 70%">
Название продукта
</th>
</tr>
<tr >
<td>
191
</td>
<td>
Mountain Tire Tube
</td>
</tr>
<tr >
<td>
184
</td>
<td>
Patch Kit/8 Patches
</td>
</tr>
<tr >
<td>
175
</td>
<td>
Water Bottle — 30 oz.
</td>
</tr>
<tr >
<td>
161
</td>
<td>
Road Tire Tube
</td>
</tr>
<tr >
<td>
110
</td>
<td>
Fender Set — Mountain
</td>
</tr>
</table>
Создаст таблицу, изображенную на рис. 4.3.
Рис. 4.3. Пример таблицы
У тега TABLE есть еще параметр CELLPADDING. Он определяет расстояние в пикселях между рамкой ячейки и ее содержимым. Другой параметр тегов TABLE, TR, TH, TD – ALIGN. Он определяет выравнивание. Возможные значения – center (по центру), left (по левому краю), right (по правому краю).
Параметр ALIGN в TD или TH определяет выравнивание для содержимого внутри данной ячейки, в TR – для содержимого всех ячеек строки, TABLE – для самой таблицы на страничке. Для каждой ячейки берется выравнивание из TD или TH, если оно не задано – из TR, если и оно не задано – по центру для TH или по левому краю для TD.
Незакрытые теги TD, TR и TH приводят к некорректному отображению, особенно при работе с вложенными таблицами.