Выравнивание рисунка.

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

Пример:

<html>
<head>
<title>Расположение изображения</title>
</head>
<body>
<img src="foto.jpg ">
<center><img src="foto.jpg "></center>
<div align="left"><img src="foto.jpg"></div>
<br>
<div align="right"><img src="foto.jpg"></div>
<br>
<div align="center"><img src="foto.jpg"></div>
</body>
</html>

Советую Вам самостоятельно поупражняется с размещением фотографии на своей странице. Меняйте размеры, положения, используйте различные сочетания с текстом, отступы, рамки.. Тренируйтесь!

Итог главы:

<html>
<head>
<title>Моя первая страничка с фото</title>
</head>
<body text="#484800" bgcolor="#ffffff" background="graphics/fon.jpg">
<center>
<img src="graphics/privet.png" width="400" height="80" alt="Привет мир!!!">
</center>
<p align="justify">
<img src="graphics/foto.jpg" align="left" hspace="15" width="140" height="120" alt="Это моя фотка!!!">
<font size="+1">
&nbsp;&nbsp;Меня зовут Карлсон! Я в меру упитанный мужчина - это моя первая страничка! Здесь я хочу найти себе новых друзей, для того чтобы вместе гулять по крышам! Я очень очень сильно люблю <font size="+2" color="#ff0000">вареньё!!!</font> С нетерпеньем буду ждать Вашего приглашения на чай. Прилечу!!
</font>
</p>
</body>
</html>

Единственное, что Вам в этом примере не знакомо так это надпись - &nbsp; - это есть так называемый спецсимвол в данном случае - пробел.. о спецсимволах и их назначении я расскажу более подробно в 6 главе.

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

Полезные советы:

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

· Помните, что есть пользователи, которые умышленно в своём браузере отключают загрузку рисунков, дабы сэкономить на трафике, а по сему рекомендую соблюдать следующие советы:

· Если рисунки выполняют роль кнопок (см. Глава 5), обязательно подписывайте их (атрибут alt) к примеру: "Перейти на главную страницу" или "Скачать" дабы человек с отключенной графикой мог хоть как-то ориентироваться на Вашей странице.

· Используя картинку в качестве фона документа дублируйте ёё заливкой фона каким либо подходящим для фона страницы цветом (атрибут bgcolor тега <body>)

вот так например:

<body bgcolor="#008000" background="fon.jpg">

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


 

Глава 4

Таблицы

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

Рисуем таблицу

Тег <table> задаёт начало и конец таблицы, любая таблица, как известно, состоит из строк и столбцов, для этого есть ещё два тега:

<tr> - строка таблицы
<td> - столбец таблицы

Вместе эти теги пишутся так:

<table>
<tr>
<td>ячейка</td>
</tr>

</table>

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

Поставим перед собой задачу нарисовать таблицу из трёх строк и трёх столбцов, а заодно вспомним атрибут border "рамка", который добавит нам наглядности.

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td>строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td>строка3 ячейка1</td>
<td>строка3 ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</body>
</html>

Разобрались? Если да, идем дальше..

Объединение ячеек.

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

На самом деле слово "объединить" здесь неуместно, использовал я его лишь для того, что бы вызвать ассоциации в Вашей голове. Вспомните тот же Word, добавив там таблицу Вы выделяете нужные ячейки и нажимаете кнопку "объединить".. здесь всё происходит не совсем так, и правильнее было бы говорить не "объединить" а "растянуть".

Эту задачу решают атрибуты colspan и rowspan

· colspan - определяет какое количество столбцов будет занимать данная ячейка

· rowspan - количество рядов занимаемое ячейкой

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

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td>строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td>строка3 ячейка1</td>
<td colspan="2">строка3 ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</body>
</html>

Как видите ячейка растянулась на два столбца, но при этом сдвинула третью ячейку, которая собственно нам теперь не нужна, а по сему мы её просто напросто удаляем. Специально допустил эту оплошность, чтобы Вы поняли принцип данного действия.

Исправленный пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td>строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td>строка3 ячейка1</td>
<td colspan="2">строка3 ячейка2</td>
</tr>
</table>
</body>
</html>

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

<html>
<head>
<title>Таблица</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3">строка1 ячейка1</td>
<td>строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td colspan="2">строка3 ячейка2</td>
</tr>
</table>
</body>
</html>

Всё просто.. главное быть внимательным!

Размеры таблицы.

Если Вы самостоятельно тренировались с рисованием таблицы то наверняка обратили внимание на то, что размеры таблицы и ячеек по умолчанию ограничены вставленным в неё текстом.. и "ползают" себе как хотят. Вспомните про атрибуты width - ширина и height - высота, которые мы использовали для растягивания рисунков, они так же применимы к тегам <table>, <tr>и <td>. С этими атрибутами Вы знакомы, так что рассусоливать не буду.. просто приведу пример. В нём заданы размеры таблицы и отдельных её ячеек, а заодно и вся таблица выровнена по центру знакомым тегом <center>

Пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<center>
<table border="1" width="640" height="480">
<tr>
<td rowspan="3" width="150">строка1 ячейка1</td>
<tdheight="30">строка1 ячейка2</td>
<td>строка1 ячейка3</td>
</tr>
<tr>
<td height="30">строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr>
<td colspan="2" >строка3 ячейка2</td>
</tr>
</table>
</center>
</body>
</html>

Обратите внимание на то, что длина и ширина заданы не для всех ячеек. А зачем? Если и так таблица будет выровнена по самым широким и длинным ячейкам.. на то она и таблица..

Еще не всё рассказал..

Значения атрибутов width и height в таблице могут указываться не только в пикселях, но и в процентах

Вот пример:

<html>
<head>
<title>Таблица</title>
</head>
<body>
<center>
<table border="1" width="640" height="480">
<tr height="25%">
<td width="15%"> строка1 ячейка1</td>
<td width="25%">строка1 ячейка2</td>
<td width="60%">строка1 ячейка3</td>
</tr>
<tr height="50%">
<td>строка2 ячейка1</td>
<td>строка2 ячейка2</td>
<td>строка2 ячейка3</td>
</tr>
<tr height="25%">
<td>строка3 ячейка1</td>
<td>строка3 ячейка2</td>
<td>строка3 ячейка3</td>
</tr>
</table>
</center>
</body>
</html>

В этом примере от общей ширины таблицы в 640 пикселей мы отдали 15% первой ячейке, 25% второй и 60% третьей. А по высоте из 480 пикселей по 25% первой и третьей строчке, а добрую половину места второй.. Короче справедливости в мире нет.. Ну до это Вам решать, сколько кому места отчуждать, главное, чтобы в сумме было 100%, иначе неразбериха будет.. смутное время.. революция..









Дата добавления: 2016-11-02; просмотров: 412; ЗАКАЗАТЬ НАПИСАНИЕ РАБОТЫ


Поиск по сайту:

При помощи поиска вы сможете найти нужную вам информацию, введите в поисковое поле ключевые слова и изучайте нужную вам информацию.

Поделитесь с друзьями:

Если вам понравился данный ресурс вы можете рассказать о нем друзьям. Сделать это можно через соц. кнопки выше.
helpiks.org - Хелпикс.Орг - 2014-2020 год. Материал сайта представляется для ознакомительного и учебного использования. | Поддержка
Генерация страницы за: 0.01 сек.