Html – первые шаги Denwer Dreamweaver Photoshop icon

Html – первые шаги Denwer Dreamweaver Photoshop



НазваниеHtml – первые шаги Denwer Dreamweaver Photoshop
Дата конвертации13.09.2012
Размер150.46 Kb.
ТипДокументы
источник




HTML – первые шаги


Denwer

Dreamweaver

Photoshop

Создайте на диске отдельную директорию (папку) для будущей страницы.

U:\курс\группа\ ваше фамилия\

Теперь откроем блокнот (notepad) и наберем следующий текст:



А теперь сохраним этот документ, присвоив ему имя *.html (прим.)

U:\курс\группа\ ваше фамилия\index.html

Теперь откроем браузер (не закрывайте блокнот, он нам еще пригодится).

Файл - Открыть - кнопка Обзор - Наш документ (index.html).

Если мы чего-то изменили в нашем *.html документе (в блокноте), то, чтобы посмотреть как это выглядит в браузере, надо не забывать нажимать) кнопку ОБНОВИТЬ F5. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ:)

Посмотрим теперь, что у нас получилось, и разберемся как оно так получилось:)



Первое, что нам нужно усвоить, что хтмл (html) это то, что мы сейчас изучаем. Второе, что нам нужно усвоить: Html не является языком программирования (прим.), он предназначен для разметки текстовых документов (т.е. для форматирования текста). То, как будет выглядеть ваш текст, определяют метки (tags или тэг).

Пример тэга:
(перенос текста на другую строку, что-то вроде Enter:). Попробуйте между тэгами Body его понатыкать - посмотрите, что получится:)

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

Как мы видим на нашем примере тэгов много и они разные:). Обратите внимание на картинку, она тут не просто так, она показывает нам обязательные тэги.



Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:



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





- голова документа
- тело документа

Все тэги, расположенные между , это что-то вроде служебной информации. Например - заголовок. Зачем он? Откройте браузер с нашим документом и устремите свой взгляд выше всех командных строк (на заголовок окна).<br /><br />Все тэги, расположенные между <body> </body> - непосредственное содержание документа. Следующие несколько ступенек будут посвящены именно этим тэгам: мы узнаем как менять цвет текста, фона, как делать текст крупнее-мельче, поговорим о картинках, таблицах и многом другом:)<br /><br /><br />Цвета прописываются следующим образом: <br /><br />Например белый цвет - ffffff <br /><br />Но вернемся к нашей страничке. Давайте окрасим слова Добро пожаловать в красный. <br /> <br /><br /><img src="780_html_754f40ad.png" name="graphics6" align=bottom width=339 height=27 border=0><br />Теперь попробуйте вместо СС0000 подставить другие значения цветов. <br /><br /><br /><img src="780_html_5c54f060.png" name="graphics7" align=bottom width=420 height=169 border=0><br /> <br />Тэг - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта (Arial), но об этом чуть позже. <br /><br />Как же еще задавать цвета в документе? - вспомним об открывающем теге <body>: <br /> <br /><img src="780_html_m1f74e791.png" name="graphics8" align=bottom width=156 height=17 border=0><br /><br />Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали (если цвет в <body> не задавать, то по умолчанию он будет черным). <br /> <br /><img src="780_html_7668c881.png" name="graphics9" align=bottom width=372 height=143 border=0><br /> <br />Со цветами для текста мы разобрались, теперь подумаем о фоне. <br /> <br />На этой ступеньке мы узнаем, как изменять цвет фона документа, и поговорим немного об этике. <br /><br />Цвет фона устанавливается в уже нам знакомом тэге <body>: <br /><body bgcolor="#000000"> <br /><br />Для мы прописали черный цвет, вы же свой документ можете раскрасить любым другим <br /> <br /><img src="780_html_55747c8c.png" name="graphics10" align=bottom width=395 height=150 border=0><br /> <br />Обратите внимание: мы одновременно можем прописать в теге <body> и цвет текста в документе, и цвет фона.<br /><br /><br /><body text="#336699" bgcolor="#000000"> <br /><br />Далее мы поговорим о параграфах. Параграфы вводятся тэгом: <br /><br /><br />С помощью параграфов мы можем центрировать текст: <br /><br /><br />текст<br /> <br /><br />С помощью параграфов мы можем выровнять текст по левому краю: <br /><br /><br />текст<br /> <br /><br />Или по правому краю документа: <br /><br /><br />текст<br /> <br /><br />Теперь введем параграфы в наш документ и посмотрим наглядно, что получится (в наш пример подставлен параграф с параметром центрирования текста (center), попробуйте подставить в параграф другие параметры со значениями Left или Right). <br /> <br /><img src="780_html_206526a5.png" name="graphics11" align=bottom width=503 height=194 border=0><br /> <br />Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что к параграфу уже не нужен тэг <br /> для переноса строки, т.к. перенос задается по умолчанию. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <br />: <br /><br /><center>текст</center> <br /> <br /><img src="780_html_668e8162.png" name="graphics12" align=bottom width=456 height=164 border=0><br /><br /><br />текст<br /> <br /><br />Этот атрибут параграфа, он выравнивает текст по обоим краям документа (по ширине).<br /> <br /><img src="780_html_m7e796529.png" name="graphics13" align=bottom width=576 height=273 border=0><br /> <br />В этой главе мы научимся выделять текст при помощи заголовков и узнаем еще одну функцию тэга . <br /><br />Итак, мы уже немного умеем форматировать текст, но посмотрите на наш документ. Фраза "Здравствуйте, это моя первая страница" так и просится, чтобы ее выделили. Для этого можно использовать заголовки: <br /> <span class="butback" onclick="goback(352)">^</span> <span class="submenu-table" id="352"><h2> <h2> текст </h2></h2> <h2> <h2> текст </h2></h2></span> <h3> <h3> текст </h3></h3> <h4> <h4> текст </h4></h4> <h5> <h5> текст </h5></h5> <h6> <h6> текст </h6></h6> <br />Пришлось немного пожертвовать красотой, чтобы сразу наглядно все продемонстрировать. Зато всем видно и то, что существуют шесть уровней заголовков, и то, что соответственно буковки у каждого разного размера, и то, что тут у нас такая же ситуация как с параграфами (принудительный перенос строки). Да, заметьте, заголовок выделяется жирным текстом, это тоже одно из его свойств.<br /><br />В пример я ввел заголовок третьего уровня <h3></h3><br /> <br />Смотрите, что получилось. <br /> <br /><img src="780_html_267fcb44.png" name="graphics14" align=bottom width=552 height=263 border=0><br /> <br />Заголовки предназначены для выделения небольшой части текста (строки, фразы), НО, если вы хотите выделить большой фрагмент текста, или только одно слово, при этом без переноса строки, то как быть? С заголовками такое не пройдет, поэтому вспомним о тэге : <br /> текст <br /> текст <br /> текст <br /> текст <br /> текст <br /> текст <br /> текст <br /><br />Параметр size задает размер шрифта, но, в отличие от заголовков, текст не выделяется жирным шрифтом (о курсиве, жирном шрифте и т.п поговорим позже) и нет принудительного переноса. <br /> <br /><img src="780_html_6b32cf88.png" name="graphics15" align=bottom width=564 height=270 border=0><br /> <br />В нашем примере я выделил слова "еще один виртуальный друг?", пусть все думают, что вы горите желанием завести еще одного виртуального друга:) <br />Теперь настала пора поговорить о том как делается курсив, подчеркнутый текст, полужирный текст и фиксированный текст: <br /><br /><b> <b>Полужирный текст</b> </b><br /><i> <i>Наклонный текст (курсив)</i> </i><br /><u> <u>Подчеркнутый текст</u> </u> <br /><br />Здесь все просто: <br /> <br /><img src="780_html_m3536c080.png" name="graphics16" align=bottom width=564 height=274 border=0><br /> <br /><b><span class="butback" onclick="goback(353)">^</span> <span class="submenu-table" id="353">Атрибут тэга :</span></b> <br /><br /> текст (шрифт Arial) (<u>прим.</u>) <br /><br />С помощью атрибута face в нашем примере был задан шрифт Arial. Таким образом, вы можете задать и какой-нибудь экзотический шрифт для своей страницы, но это немного рискованно, т.к. у вашего посетителя может не оказаться такого шрифта, поэтому все же лучше задавайте стандартные (Arial (без надсечек), Times Roman (пропорциональный), Courier (равноширинный) и другие). <br /><br /><b><span class="butback" onclick="goback(354)">^</span> <span class="submenu-table" id="354">Как вставлять картинки в документ: <br /></span></b><br /><img src="my.jpg"> <br /><br />Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками - ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так: <br /><br /><img src="img/my.jpg"> <br /><br />Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой: <br /><img src="../my.jpg"> <br /><br />Если картинка лежит на другом сайте, то путь прописывается полностью: <br /><img src="http://www.homepage.ru/my/my.jpg"> <br />Для вашего удобства кладите картинку в ту же директорию, что и документ, тогда путаницы будет меньше:) <br /><br />Если у вас нет на данный момент картинки, то <u>сохраните эту</u> (жми на ссылку) у себя в директории с нашей страничкой. В нашем примере я использую именно ее (запомните тэг img не требует закрывающего тэга). <br /> <br /><img src="780_html_m5bac5444.png" name="graphics17" align=bottom width=587 height=271 border=0><br /> <br />Посмотрите, что у нас получилось. Было бы лучше, если бы текст аккуратно располагался сбоку от картинки. Идем дальше, чтобы узнать, как это сделать. <br /> <br />У некоторых тэгов есть параметры (атрибуты), параметр может задаваться один, а может их быть несколько. Например у тэга <br /> - <br />. Параметр align есть и у картинок: <br /><br /><img src="pr1.png" align="left"> <br />Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наооборот (картинка справа, текст слева) надо прописать right: <br /><br /><img src="pr1.png" align="right"> <br />Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):<br /> <br />(1) - <img src="pr1.png" align="bottom"><br />(2) - <img src="pr1.png" align="middle"><br />(3) - <img src="pr1.png" align="top"><br /> <br />Кроме параметра align существует еще несколько параметров: <br /> <br />(1) - <img src="pr1.png" vspace="10"><br />(2) - <img src="pr1.png" hspace="30"><br />(3) - <img src="pr1.png" alt="моя фотография"><br />(4) - <img src="pr1.png" width="100"><br />(5) - <img src="pr1.png" height="200"><br />(6) - <img src="pr1.png" border="5"><br /> <br />Теперь последуют объяснения по пунктам. <br /><br /><br />(1) - параметр vspace - задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях (pixel - минимальная единица изображения, точка. Например разрешение экрана 800х600 - 800 на 600 точек). В нашем примере расстояние равно 10 пикселям. <br /><br />(2) - параметр hspace - тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам). <br /><br /><br />(3) - параметр alt - краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд выскочит описание картинки. В нашем случае это будет фраза - "моя фотография". Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что жать, т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего она (картинка) предназначалась. <br /><br />(4) - параметр width - ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже или шире). <br /><br />(5) - параметр height - высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой... <img src="780_html_7dc629e6.png" name="graphics18" align=bottom width=20 height=15 border=0><br /><br />(6) - параметр border - рамка вокруг самой картинки (в пикселях). Можно не задавать. <br /><br />Все параметры могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке. Введем следущие параметры для нашей картинки: <br /><img src="pr1.png" align="left" hspace=30 vspace=5 alt="моя фотография"> <br /><br />Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись - "моя фотография". <br /> <br /><img src="780_html_m18d23a5c.png" name="graphics19" align=bottom width=564 height=337 border=0><br /> <br />Картинку можно сделать фоном документа <br /> <br /><body text="#336699" bgcolor="#000000" background="ваш_фон.jpg"> <br /> <br />Параметр Background и указывает на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), что и документ. <br /><br />Но зачем оставлять параметр bgcolor, если есть background? А вдруг фоновая картинка не загрузится (представьте, такое может быть), тогда сами поймете зачем. <br /><br /><b>Ссылки.</b> <br /> <br />Наша страничка может состоять из нескольких документов. Один из них главный (index.html или main.html) - он открывается первым и должен обязательно лежать на вашем сайте в интернете. <br />Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных. <br /><br />Ссылкой на эти другие документы (части нашей странички) может быть текст (фраза, слово), а может быть и картинка. На этой ступеньке мы рассмотрим только текстовую ссылку. <br />Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточное знание. Пусть prf.html - документ с вашими фотографиями. Тогда мы можем фразу "посмотреть мои фотографии" сделать ссылкой на prf.html: <br /><br />посмотреть мои фотографии (<u>прим.</u>) <br /><br />Тэг делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути здесь такие же как в случае с картинками: <br /> <br />(1) - мои фотографии<br />(2) - мои фотографии<br />(3) - <a rel="nofollow" href="http://www.homepage.ru/prf.html">мои фотографии</a> <br /> <br />В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ. <br /><br />Как видите все просто. Но есть один фактор, который нам нужно учесть: цвет ссылки нужно прописывать, а иначе по умолчанию он будет просто безобразным, поэтому вспомним об открывающем тэге боди: <br /> <br /><body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999"> <br /><br /><br />Разберемся что к чему: link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. В нашем примере цвета одинаковые, но они могут быть разными, также не карается законом, если цвет ссылки такой же как цвет текста документа (ссылка же выделяется чертой). Итак пропишем цвета для ссылки и саму ссылку в нашем документе: <br /><br /><br /><img src="780_html_6f32c247.png" name="graphics20" align=bottom width=587 height=387 border=0><br /> <br />Ничего хитрого. Тeперь нам следует запомнить то, что ссылка на ваш почтовый ящик прописывается так: <br /><br /> pochta@mail.ru - пишите письма (<u>прим.</u>) <br /><br />Запомните это раз и навсегда и не пытайтесь ее прописать по другому. Ссылка на документ, картинку или файл - одно дело, а ссылка на почтовый ящик - другое (да, но цвета всех ссылок в документе одинаковые:). <br /> <br />Заметим, что ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка:<br /> <br /> <img src="primtocodephoto.gif" align="left" hspace=30 vspace=5 alt="моя фотография"> <br /> <br />Это мы введем в наш пример, сделав ссылкой на документ с фотографиями (prf.html) картинку pr1.png: <br /> <br /><img src="780_html_m395b3e4a.png" name="graphics21" align=bottom width=587 height=388 border=0><br /> <br />Теперь посмотрите в браузере, что у нас получилось. Картинка primtocodephoto.gif стала ссылкой. Если вы заметили (а если не заметили, то обратите внимание): вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке параметр border="0" <br /> <br /><img src="primtocodephoto.gif" align="left" hspace=30 vspace=5 alt="моя фотография" border="0"> (<u>прим.</u>) <br /> <br />Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д:) Это делается все по тому же принципу: <br /><br /><a rel="nofollow" href="http://www.melody.ru/music.mp3"> скачать песню </a> <br /><br />Если адрес указан таким способом: <br /><br /><a rel="nofollow" href="http://www.melody.ru/"> музыкальный сайт </a> <br /><br />То это означает, что в указанном каталоге есть файл вроде index.html, который загрузится по умолчанию. <br /><br /><br /><b>Списки.</b><br /> <br /> Текст один <br /> <br /> Текст другой <br /> <br /> Текст сякой <br /> <br /> Текст эдакий <br /> <br />Списки обозначаются следующим образом: <br /> <br /><li>Текст один</li><br /><li>Текст другой</li><br /><li>Текст сякой</li><br /><li>Текст эдакий</li><br /> <br />У тэга <li> есть параметр type:<br /> <br />В случае (1) - <li type="disk">, <br />в случае (2) - <li type="circle">, <br />в случае (3) - <li type="square">. <br /> <br />Это один из вариантов. Если вы пользовались текстовыми редакторами (допустим Вордом), то бы знаете, что такое Табуляция (это когда вы жмете на кнопочку Tab и весь текст сдвигается в право). Похожая фунция есть и в хтмл: <br /><br /><ul>Ваш текст</ul><br /><br />Чтобы отступ (табуляция) был больше надо вкладывать тэг <ul> в самого себя: <br /><br /><ul><ul>Два отступа</ul></ul><br /><ul><ul><ul>Три отступа</ul></ul></ul> <br /><br />Зачем я завела разговор об этом тэге, вместо того, чтобы рассказать о том, что еще можно сделать со списками? Хм:) ну, у меня все со злым умыслом:<br /> <ul> <li><br />Сдвиг один<br /> </ul> <ul> <ul> <li><br />Сдвиг другой<br /> </ul> </ul> <ul> <ul> <ul> <li><br />Сдвиг сякой<br /> </ul> </ul> </ul> <br />Хочу обратить ваше внимание, что это прописано без параметра type, но при помощи тэга <ul>: <br /> <br /><ul><li>Сдвиг один</li></ul><br /><ul><ul><li>Сдвиг другой</li></ul></ul><br /><ul><ul><ul><li>Сдвиг сякой</li></ul></ul></ul><br /> <br /><b>Спецсимволы.</b> <br /><br />(1) - < - <<br />(2) - > - ><br />(3) - " - "<br />(4) -   - пробел <br />(5) - & - & <br /><br /><br /><b>Таблицы.</b><br /><br /><table></table> - тэг таблицы<br /><br />Увы, это далеко не все: таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще и указать их. <br /><br /><tr></tr> - строчка таблицы<br /><td></td> - столбец (ячейка) таблицы <br /><img src="780_html_mfb416ba.png" name="graphics22" align=bottom width=222 height=128 border=0><br /><br />Итак, перед вами таблица из двух строк и трех столбцов (ячеек). Для наглядности я выделил ячейки таблицы разными цветами. Границы таблицы не заданы, поэтому вы их не видите. Как же такая красота получилась? Итак следите за движениями моих рук: <br /><br /><table><br /><b><tr></tr></b><br /><b><tr></tr></b><br /></table> <br /><br />Сначала задаем строки. В нашем примере их две. Теперь в каждой строке зададим по три столбца (ячейки): <img src="780_html_7dc629e6.png" name="graphics23" align=bottom width=20 height=15 border=0><br /><br /><img src="780_html_786fe577.png" name="graphics24" align=bottom width=90 height=185 border=0><br /> <br />Мой вам совет, для начала рисуйте таблицу на листе бумаге, чтобы все наглядно видеть.<br /><br />Итак, теперь нам надо заполнить получившийся каркас: <br /><br /><img src="780_html_62971130.png" name="graphics25" align=bottom width=115 height=183 border=0><br /> <br />Надеюсь мы поняли, что первая цифра в загадочных надписях - это номер ряда, а вторая номер столбца (1х2 - первый ряд, второй столбец и т.д). Это опять же вам для наглядности. Если посмотреть то, что уже у нас с вами получилось, то это будет выглядеть так: <br /> <table width=86 cellpadding=1 cellspacing=0> <col width=27> <col width=26> <col width=27> <tr> <td width=27> <br />1x1<br /> </td> <td width=26> <br />1x2<br /> </td> <td width=27> <br />1x3<br /> </td> </tr> <tr> <td width=27> <br />2x1<br /> </td> <td width=26> <br />2x2<br /> </td> <td width=27> <br />2x3<br /> </td> </tr> </table> <br /><br />Увы, фона (голубенького или желтенького, как в примере) еще не видно. Фон задается параметром bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для столбца (в пределе одного ряда). В нашем случае мы задаем фон для каждого столбца. <br /><br /><img src="780_html_m7e66aa2b.png" name="graphics26" align=bottom width=252 height=182 border=0><br /> <br />Вот, что у нас получилось: <br /><br /><img src="780_html_m6d53f1dc.png" name="graphics27" align=bottom width=82 height=46 border=0><br /><br />Попробуйте задать фон для таблицы и для ряда (это для усвоения материала). Когда все усвоится переходите к следущей ступеньке, и мы продолжим разговор о таблицах. <br /> <br />Итак, как помнится мы решили с вами создать вот такую таблицу: <br /><img src="780_html_mfb416ba.png" name="graphics28" align=bottom width=222 height=128 border=0><br /><br />А получилось у нас еще только вот такая таблица: <br /> <br /><img src="780_html_m6d53f1dc.png" name="graphics29" align=bottom width=82 height=46 border=0><br /> <br />В чем же дело? А в том, что мы не задали высоту и ширину ячейкам таблицы нашей:) Вспомним о параметрах height и width - вы можете их задать для всей таблицы, для одного ряда, для ячейки (столбца). Вспомним, что высота и ширина могут задаваться как в пикселях, так и процентах. В нашем случае мы зададим ширину и высоту в пикселях для столбцов (ячеек). <br /> <br /><img src="780_html_m66675539.png" name="graphics30" align=bottom width=456 height=188 border=0><br /> <br />Сразу предвижу вопрос: - А почему высота задана только для двух ячеек (столбцов), а ширина для всех? Все очень просто: Если в ряду вы задаете для какого-либо столбца (ячейки) высоту большую, чем для других то, не смотря на это, все ячейки (столбцы) вашего ряда станут по высоте равны наибольшей:) вот так-то. Тоже самое с рядами, если вы зададите для какого-то ряда наибольшую длинну, то все остальные ряды выровняются по этому наибольшему ряду (помните ряд - это не ячейка, поэтому я задал в нашем примере ширину для каждой ячейки (столбца)). <br /><br />Вы можете задать высоту и ширину для всей таблицы, тогда все ячейки (столбцы) и ряды поделят данное им пространство поровну, если не задавать им это пространство персонально (в процентах от общей ширины (высоты) таблицы или пикселях). <br /><br />Вернемся к нашему примеру: теперь мы почти получили то, что хотели:) <br /><br /><img src="780_html_m51e9422d.png" name="graphics31" align=bottom width=163 height=75 border=0><br /><br />Теперь нам осталось лишь выровнять содержимое внутри таблицы: <br /> <br /><img src="780_html_4e113134.png" name="graphics32" align=bottom width=576 height=174 border=0><br /> <br />И... готово!:) <br /><br /><img src="780_html_5318970a.png" name="graphics33" align=bottom width=162 height=74 border=0><br /><br />В каждой ячейке (столбце) могут находится и картинки, и текст, и даже таблицы (в этом случае они называются - <i>вложенные таблицы</i>). И тэги, которые мы применяем для форматирования текста - все те же. <br /><br />Поскольку содержимое каждой ячейки как бы обстановка отдельной комнаты, то и тэги для центрирования текста пришлось прописать в нашем примере в каждой ячейке. <br /><br />Давайте шагнем на следующую ступеньку и продолжим разговор о таблицах.<br /> <br />В предыдущих главах мы научились создавать таблицы на конкретном примере, а в этой главе я хотела разом вывалить все оставшиеся возможности и аттрибуиы на ваши головы, но потом решила, что раз уж я пишу подробный учебник, то надо быть стойкой до конца:). <br /><br />Вернемся к нашему примеру, и поговорим о вертикальном выравнивании содержимого таблицы, т.е. о том как можно сделать так, чтобы содержимое ячейки не только располагалось ровно посередине ее (как по умолчанию), а еще вверху или внизу. Вертикальное выравнивание задается следующим аттрибутом - valign="middle" (top, bottom) - содержимое конкретной ячейки будет находится в середине ячейки (наверху или внизу): <br /><br /><img src="780_html_m282c5649.png" name="graphics34" align=bottom width=163 height=77 border=0><br /><br />Вот вам и наглядный пример, а теперь как это пишется: <br /> <br /><img src="780_html_470dbca1.png" name="graphics35" align=bottom width=600 height=207 border=0><br /><br /><br />Я прописала valign не для всех ячеек, только для тех, где я захотела чтобы текст располагался сверху или снизу, чтобы зря не тратить время и усилия. Существование параметра valign значительно облегчает нашу с вами жизнь, страшно даже подумать, как пришлось бы мучиться, если бы его не было:). <br /><br />А теперь перейдем к следующей ступеньке, чтобы узнать о других аттрибутах, облегчающих нашу трудную жизнь. <br /> <br />В этой главе мы поговорим о параметрах colspan и rowspan. Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда)). Теперь чтобы было все понятно обратимся к примерам. <br /><br /><img src="780_html_11ccf3b8.png" name="graphics36" align=bottom width=164 height=76 border=0><br /><br />В этом примере мы использовали параметр colspan=2, прописав его для ячейки 1х1. Код будет выглядеть следующим образом: <br /> <br /><img src="780_html_68a1c235.png" name="graphics37" align=bottom width=554 height=156 border=0><br /><br /><br />Прошу вас обратить внимание, на то, что параметр width для ячейки 1х1 в нашем примере не указан, если вас так тянет задавать этот параметр, то в нашем примере для ячейки 1х1 его надо было бы прописать равным 100 пикселям, т.к. все-таки ячейка 1х1 длинее других в два раза. <img src="780_html_7dc629e6.png" name="graphics38" align=bottom width=20 height=15 border=0><br /><br />И второе на что прошу вас обратить внимание, в нашем примере нет ячейки 1х3, т.е. в первом ряду всего лишь две ячейки, т.к. ячейка 1х1 равна сама по себе двум ячейкам по длинне (что мы и указали параметром colspan). Если бы мы прописали ячейку 1х3, тогда у нас получилась бы такая ерунда: <br /><br /><img src="780_html_mb143660.png" name="graphics39" align=bottom width=252 height=87 border=0><br /><br />Теперь, когда мы разбрались с параметром colspan, разберемся с параметром rowspan. Принцип действия тут тот же: <br /><br /><img src="780_html_m63449591.png" name="graphics40" align=bottom width=192 height=89 border=0><br /><br />Попробуйте сами написать код для такой таблицы (подсказываю, тут у нас должна исчезнуть ячейка 2х3). А для полного закрепления полученных знаний можете написать еще и код для такой таблицы (я не издеваюсь, просто вы так лучше усвоите): <br /><br /><img src="780_html_323aa447.png" name="graphics41" align=bottom width=180 height=85 border=0><br /><br />Итак, мы остановились на такой таблице: <br /><br /><img src="780_html_323aa447.png" name="graphics42" align=bottom width=180 height=85 border=0><br /><br />Давайте, подумаем, что же еще можно сделать с ней... хм... ну, например можно избавиться от пространства между ячейками таблицы:<br /><br /><img src="780_html_4754923.png" name="graphics43" align=bottom width=192 height=87 border=0><br /><br />Такая красота достигается с помощью атрибута cellspacing, равного нулю: <br /> <br /><img src="780_html_651079b2.png" name="graphics44" align=bottom width=600 height=162 border=0><br /> <br />Можно наооборот увеличить пространство между ячейками, допустим пусть cellspacing=5, тогда получим такое: <br /><br /><img src="780_html_m3056ab41.png" name="graphics45" align=bottom width=168 height=77 border=0><br /><br />Как видите, и то, и другое мы можем использовать как дизайнерский прием, т.к. даже уже на наших примерах это смотриться не стандартно. <br /><br />Обычно атрибут cellspacing, рассматривается в руководствах и учебниках в паре с атрибутом cellpadding, который добаляет свободное пространство между содержимым ячейки и ее границами. Чтобы было видно нагляднее я для начала прижму текст ячеек первого ряда к верху, в нижнего - к низу, используя атрибут valign: <br /><br /><img src="780_html_459f45c1.png" name="graphics46" align=bottom width=164 height=76 border=0><br /><br />Теперь зададим атрибут cellpadding=5: <br /><br /><img src="780_html_780edfb3.png" name="graphics47" align=bottom width=188 height=75 border=0><br /><br />Вот теперь всем должно стать понятно, что такое пространство между содержимым ячейки и ее границами, и что делает тэг cellpadding. Сравним получившееся с предыдущей таблицей: мы прекрасненько видим, что у нас добавилось пространство по бокам, снизу и сверху, причем это пространство никакими картинками и текстом заполнено быть не может, как и пространство между ячейками, когда мы задаем cellspacing. <br /><br />Для тех, кто все еще не может составить код сам - вот он (для последнего варианта таблицы): <br /><br /><br /><img src="780_html_a427385.png" name="graphics48" align=bottom width=612 height=202 border=0></body></body></body></body></body></body></body>




Похожие:

Html – первые шаги Denwer Dreamweaver Photoshop icon«Первые шаги» Общие положения
«Первые шаги» (далее конференция) организована с целью стимулирования интереса обучающихся к интеллектуальной творческой деятельности,...
Html – первые шаги Denwer Dreamweaver Photoshop iconПоложение о проведении городской конференции научно-исследовательских, проектных и творческих работ учащихся «Первые шаги»
«Первые шаги» (далее конференция) организована с целью стимулирования интереса обучающихся к интеллектуальной творческой деятельности,...
Html – первые шаги Denwer Dreamweaver Photoshop iconПоложение о проведении городской научно-практической конференции исследовательских, проектных и творческих работ учащихся «Первые шаги»
«Первые шаги» (далее конференция) организована с целью стимулирования интереса обучающихся к интеллектуальной творческой деятельности,...
Html – первые шаги Denwer Dreamweaver Photoshop iconКонкурс начинающих исследователей «Первые шаги в науку» положение
Заочный конкурс начинающих исследователей «Первые шаги в науку» проводится в рамках городской открытой конференции учащихся «Интеллектуалы...
Html – первые шаги Denwer Dreamweaver Photoshop iconПоложение о муниципальной научно-практической конференции «Первые шаги в науке» по предметам общеобразовательного цикла
Муниципальная научно-практическая конференция «Первые шаги в науке» по предметам общеобразовательного цикла
Html – первые шаги Denwer Dreamweaver Photoshop iconПервые шаги дорогой «знаний» Ваш ребенок первоклассник! Еще только вчера он был совсем крошкой и полагался только на Вас. А уже сегодня, он пошел в школу и это первые ответственные шаги в его жизни.
Ваш ребенок первоклассник! Еще только вчера он был совсем крошкой и полагался только на Вас. А уже сегодня, он пошел в школу и это...
Html – первые шаги Denwer Dreamweaver Photoshop iconДокументи
1. /Путь в магию - Первые шаги.doc
Html – первые шаги Denwer Dreamweaver Photoshop iconДокументи
1. /Путь в магию - Первые шаги 2.doc
Html – первые шаги Denwer Dreamweaver Photoshop iconДокументи
1. /100 Советов PhotoShop/100 советов Photoshop.pdf
Html – первые шаги Denwer Dreamweaver Photoshop iconПоложение об окружной научно-практической конференции «Первые шаги в науку» для учащихся первой и второй ступени образования Общие положения
Настоящим Положением определяется статус, цели и задачи окружной научно – практической конференции «Первые шаги в науку» для учащихся...
Разместите кнопку на своём сайте:
Документы


База данных защищена авторским правом ©lib2.podelise.ru 2000-2013
При копировании материала обязательно указание активной ссылки открытой для индексации.
обратиться к администрации
Документы