День 8. Удаляем пятна.
Друзья, предыдущие дни я начинал с кода и скрина домашнего задания. Но сегодня один довольно неглупый человек сказал мне, что было бы интереснее, если бы я не размещал кода, в лучшем случае только скрин. И вот я решил последовать его совету и не размещаю код ответа, более того, если учесть само вчерашнее задание, то и скрин размещать смысла нет.Посмотрим, что из этого получится, а сегодня поговорим, о планировании страниц и научимся менять шрифты текста, причем начнем мы со второй части вопроса.
Элементы для форматирования относительно больших блоков текста.
Сегодня мы рассмотрим ряд достаточно интересных элементов, которые позволяют магипулировать с внешним видом текста.Элемент FONT
Атрибут face позволяет задавать шрифт текста. Для этого в качестве его значения нужно написать название шрифта. Тут надо быть аккуратным и не использовать экзотические шрифты,иначе компьютер пользователя, на котором их может не быть ваще, отобразит текст стандартным шрифтом. Просто используйте шрифты из набора Word и проблем у вас возникнуть не должно. При этом названий шрифтов может быть несколько, просто перечислите их через запятую.
За размер шрифта отвечает атрибут size. Значение задается в относительных величинах(т.е. от 1 до 7). Можно задать значение в формате +N или -N, тогда размер текста в элементе увеличится или уменьшится на соответствующее количество пунктов N, относительно остальной страницы.
Элемент BLOCKQUOTE
Этот элемент определяет текст как цитату и задает для него отступы сверху, снизу и слева.В принципе этот элемент не делает ничего сверхъестественного, просто имейте его ввиду.
И в примере ниже мной был использован атрибут элемента BODY background, который определяет фон страницы, в качестве его значения должно быть название картинки.
Давайте рассмотрим пример:
| <!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN" | |
| "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html title="365.WEB" lang="ru"> | |
| <head> | |
| <title>Проба пера</title> | |
| <meta http-equiv="content-type" content="text/html" charset="windows-1251" /> | |
| </head> | |
| <body background="desert.jpg"> | |
| <blockquote> | |
| <font color="red" face="Impact" size="5"> | |
| Сборная России по волейболу - <font size="5">Олимпийский чемпион!!! </font> | |
| </font><br/> | |
| <font color="red" face="Segoe script" size="7">Урррррааааа!!!</font> | |
| </blockquote> | |
| </body> | |
| </html> |
Подробный анализ кода не оставит вам никаких вопросов.
Планирование страниц.
Друзья, я думаю вы понимаете, что той базы, которую я освоил за эти дни явно недостаточно, чтобы создать качественную страницу. Например я недоумевал, как это создатели страниц так четко размещают объекты внутри страниц, это ж офигеть...Вот этим я сегодня, в частности, и занимался.
Профессиональные веб-дизайнеры, во всяком случае многие из них, для разметки страниц используют таблицы. Просто берут, на бумаге, в Photoshop'е или еще где нибудь рисуют таблицу, в которой нужные ячейки объединены для размещения больших объектов. В итоге получается сетка, в каждой ячейке которой размещен элемент страницы.
Соответственно, потом эта таблица реализуется в нужном виде средствами языка HTML и CSS.
А значит давайте научимся создавать простейшие таблицы.
Элементы таблиц.
Элемент table.
Этот элемент говорит о том, что сейчас пойдет описание таблицы, при этом допускается вложение таблиц.Атрибут caption задает заголовок таблицы(не путайте с шапкой таблицы), выравнивание выполняется атрибутом align, который может принимать значение top и bottom, то есть над и под таблицей соответственно.
Элемент TR, TD, TH.
Для начала нужно определится с количеством строк, а затем эти строки разделить на столбцы. Количество пар тегов <tr> </tr> и определяет количество строк, другими словами, сколько вам надо строк, столько раз и вводите эту пару.Внутри этой пары тегов, в первой строке следует разместить столько пар тегов <th></th>, сколько планируется столбцов в таблице, внутри этих элементов напишите название столбцов, тем самым вы создадите шапку вашей новой таблицы.
Во всех же остальных строках создайте такое же количество столбцов, только парами тегов <td></td> и вы получите структуру готовой таблицы.
Давайте посмотрим пример создания таблицы:
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html title="365.WEB">
<head>
<title>Таблица</title>
</head>
<body >
<table>
<caption>Медали сборной России</caption>
<tr><th>Золото</th><th>Серебро</th><th>Бронза</th></tr>
<tr><td>24</td><td>26</td><td>32</td></tr>
</table>
</body>
</html>
И вот что получаем:
Дамашка.
Завтра мы поподробнее рассмотрим формирование таблиц, работу с границами и содержимым ячеек таблиц. А пока вот вам задание: посмотрите на пример выше. Как то там не хватает красок, а что если вы попробуете сделать так, чтобы слово в каждой ячейке таблицы было написано своим цветом и своим шрифтом? Подсказка: используйте для этого только сегодняшний рассказ.Всего вам клевого друзья)
Эм, табличный макет ты воспринял слишком буквально. Верстать на таблицах сейчас считается моветоном и их применяют лишь в тех случаях когда они действительно необходимы. Во всех остальных случаях используются блочные элементы со специальными стилями. Помимо этого, ввиду унификации, размеры колонок и отступы между ними рекомендуется делать строго определенными. Ну и, что бы не изобретать велосипед, существуют уже готовые стили элементов, находящиеся в свободном доступе. Одним из таких является http://960.gs/
ОтветитьУдалитьПо поводу экзотических шрифтов. Используемый шрифт не обязательно должен быть установлен у пользователя, поскольку сервер может отдавать легковесную версию шрифта, которая вполне воспринимается браузером. Для генерации таких версий и сопутствующего к ним кода можно воспользоваться http://www.fontsquirrel.com/ . Так же сервером может быть даже Google, если воспользоваться его сервисом веб шрифтов http://www.google.com/webfonts/ . Ну и, помимо этого, атрибут face может воспринимать несколько параметров. То есть шрифты будут применяться по порядку: если не найден первый по списку, то будет применен второй, а если же и он не был найден, то третий и так далее по порядку.