![]() |
![]() |
ВходЗдравствуйте, Гость ( Вход | Регистрация )
|
![]() ![]() |
![]() |
![]()
Сообщение
#21
|
|
ЛорД всея сети ![]() Группа: Дизайнеры Сообщений: 1,248 Регистрация: 25.5.2007 Из: Украина-мать Пользователь №: 106 Спасибо сказали: 359 Вставить ник ![]() |
Итакс вслед за Халифом я бы хотел что-то обяснить людям которые не очень хорошо знают Html язык. Обяснить основу создания тем так сказать. Итак присаживайтесь поудобнее начну свой первый урок...
УРОК ПЕРВЫЙ: Таблицы Известно что основа вед дизайна состоит из таблиц. Трудно представить каким ещё образом можно реализовать дизайн не используя их. Изначально HTML не поддерживал таблицы ни в каком виде. Несчатные Web-дизайнеры пытались как-то выйти из положения используя текст с за даным форматом и заключая его внутри тегов <PRE></PRE>. Получалось конечно некрасиво но что поделаеш. Теперь же они могут создавать какие угодно таблицы что и делают... Сейчас таблицы используются не только для представления данных но и как элемен оформления Web-страниц. Благодоря таблицам можно очень точно позиционировать текстовые фрагменты и графику создавать элемен ты оформления линейки и заливки - отступы и выступы почти как в печатных изданиях. Но пожалуй я больше небуду вас заморачивать всякой чепухой (IMG:http://antislaed.net/style_emoticons/default/smile.gif) перейдём к практике. И создадим Web-страницу с таблицей. Пока что достаточно простую. Самые простые таблицы. Наша первая таблица будет очень проста: всего несколько строк и столбцов. И будет эта таблица умножения (IMG:http://antislaed.net/style_emoticons/default/smile.gif) (заодно вспомним правила арифметики...шучу, конечно) Назовём эту страничку tablo.html (IMG:http://antislaed.net/style_emoticons/default/smile.gif) КОД <html> <head> <title>Таблица умножения</title> </head> <body> <h1>Таблица умножения (от 1 до 5)</h1> <table border="2"> <tr><td></td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr> <tr><td>1</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td</tr> <tr><td>2</td><td>2</td><td>4</td><td>6</td><td>8</td><td>10</td</tr> <tr><td>3</td><td>3</td><td>6</td><td>9</td><td>12</td><td>15</td</tr> <tr><td>4</td><td>4</td><td>8</td><td>12</td><td>16</td><td>20</td</tr> <tr><td>5</td><td>5</td><td>10</td><td>15</td><td>20</td><td>25</td</tr> </table> </body> </html> Сохраняем как tablo.html и смотрим результат. Конечо таблица она не очень красива, но сейчас нам важно уяснить сам принцип. А раскрасить ее мы всегда успеем. Простейшая таблица представляет собой множество вложенных друг в друга тегов, образующих сложную многоуровневую структуру. Сначала парой тегов <table> и </table> определяется сама таблица, потом внутрь вкладываются строки, определяемые парой тегов <tr> и </tr>. Внутрь каж дой строчки вкладываются ячейки, определяемые парами тегов <td> и </td>. И если вы внимательно посмотрите на приведенный выше листинг, то увид ите все это. Собственоо, создавать простую таблицу в HTML ничего не стоит. Единственная проблема которая может при этом возникнуть - вы устаните набирать все эти бесконечные вложенные теги. В самом деле сравните обьем текста листинга и размеры получившейся таблички. Но HTML-редакторы, работающие по принцепу WYYSIWYG, вам помогут... Итак, разберемся, какими тегами формируется таблица. Тег таблиц (<table>) Тег таблицы имеет следующий формат: <table border="x"> - атрибут border задает толщину рамки таблицы в пикселях. Если он отсутствует, рамка не видна, но Web-браузер при отображении таблицы считает, что она имеется. Если дать параметру "x" атрибуту значение 0, рамки у таблицы не будет вообще. <table cellpadding="x"> - атрибут cellpadding позволяет задавать размер в пикселях свободного пространства между рамкой и содержимым ячейки. Поумолчанию x=1. <table cellspacing="x"> - атрибут cellspacing позволяет задавать размер в пикселах свободного пространства между ячейками таблицы. По умолчани x="2". <table width="x" heigh="y"> - атрибуты width и heigh позволяют установить размеры теблицы. Допускается указывать размер и в виде абсолютной величины, в процентах относительно размеров окна браузера (только незабывайте добавлять к числу знак "%") Пример: <table width="100%" heigh="50%"> Если эти атрибуты пропущены, браузер сам задает размеры таблицы так, чтобы все содержимое поместилось в ней. Кстати: width-ширина , heigh-высота. Пример в пикселях: <table width="155px" heigh="43px"> (оставлять px необезательно) <table align="x"> - атрибут align задает "обертание" таблицы текстом. Значения x бывают: left - это значение заставляет таблицу прижатся к левой границе окна. right - таблица будет спрва. center - и таблица в центе. <table bgcolor="x" background="y"> - атрибуты bgcolor и background задают соответственно цвет фона и адрес фонового ресунка для таблицы. Примеры: <table bgcolor="#000000"> - таблица покрашена в черный цвет. <table background="images/logo.gif"> - рисунок logo является фоновой картинкой таблицы. <table bordercolor="x"> - позволяет задать цвет рамки таблицы. Пример: <table bordercolor="#000000"> - опять-же рамка таблицы в черном. <table frame="x"> - атрибут frame определяет, какие части внешней рамки таблицы будут рисоваться. Доступны следующие значения x : void - внешний рамки нет вообще(значение по умолчаеию!) above - рисуется только верхняя линия внешней рамки. below - рисуется только нижняя линия внешней рамки. hsides - рисуются только горизонтальные линии внешней рамки, т.е. верхняя и нижняя. lhs - рисуется только левая линия внешней рамки. rhs - рисуется только правая линия внешней рамки. vsides - рисуются только вертикальные линии внешней рамки, т.е. левая и правая. box - рисуются все линии внешней рамки. <table rules="x"> - атрибут rules задает, как будут рисоваться внутренние рамки в таблицы. Здесь доступны следущие значения x: none - никаких внутренних рамок. rows - рисуются только горизонтальные линии (между строким) cols - рисуются только вертикальные линии (между столбцами) all - рисуются все внутринее рамки. ЗЫ: Атрибуты пишутся в одной строке отделеные пробелами Пример таблицы: <table border="1" cellpadding="0" cellspacing="0" width="100" heigh="50"> <tr><td></td></tr></table> Тег строки Каждая строка таблицы начинается с метки <tr> и заканчивается меткой </tr> Метка <tr> может включать следующие атрибуты: <tr align="x"> - атрибут устанавливает выравнивание текста в ячейках строки. Допустимые значения x: left - выравнивание влево. center - выравнивание по центру. right -выравнивание вправо. <tr valign="x"> - атрибут устанавливает вертикальное выравнивание текста в ячейках строки. Допустимые значения x: top - выравнивание по верхнему краю. middle - выравнивание по центру. bottom - выравнивание по нижнему краю. Атрибуты bgcolor, bordercolor, height и width ведут себя так же и выполняют те же функции, что и одноименные атрибуты тега <table> так что небуду повторятся (IMG:http://antislaed.net/style_emoticons/default/smile.gif) Тег ячейки Каждая ячейка таблицы начинается с метки <td> и заканчивается меткой </td>. Как раз в ячкйках и находится полезное содержимое таблицы. Метка <td> может включать следующие атрибуты: <td colspan="x"> - устанавливает "размах" ячейки по горизонтали. Например, colspan=3 означает, что ячейка простирается на три колонки. <td rowspan="x"> - устанавливает "размах" ячейки по вертикали. Например, rowspan=2 означает, что ячейка занимает две строки. Если ячейка таблицы пуста вокруг нее нерисуется рамка. Если ячейка пуста, а рамка нужна, в ячейку можно ввести символьный объект (non-breaking space — неразрывающий пробел). Ячейка попрежнему будет пустой, а рамка вокруг нее будет. Атрибуты bgcolor, bordercolor, align, height и width ведут себя так же и выполняют те же функции, что и одноименные атрибуты тега <table> и <tr> так что небуду повторятся опять (IMG:http://antislaed.net/style_emoticons/default/smile.gif) Ну вот на сегодня пожалуй и всё. Выслушаю все ваши вопросы по данной теме. В следущем уроке я раскажу вам, как создать простую тему посредством программы Macromedia Dreamweaver... (IMG:http://antislaed.net/style_emoticons/default/wink.gif) Сообщение отредактировал JIopD XaocA: Sep 21 2007, 22:46 |
|
|
![]()
Сообщение
#22
|
|
Ю а Зверь! (3-815-407) ![]() Группа: Разработчики Сообщений: 1,263 Регистрация: 5.7.2007 Из: Рашен федерашен Пользователь №: 263 Спасибо сказали: 320 Вставить ник ![]() |
Даже я понял (IMG:http://antislaed.net/style_emoticons/default/smile.gif)
+1 |
|
|
![]()
Сообщение
#23
|
|
Приблуда ![]() Группа: Пользователи Сообщений: 29 Регистрация: 31.5.2007 Из: Deutschland,BW Пользователь №: 129 Спасибо сказали: 9 Вставить ник ![]() |
ваше ну вы и молодцы ,крутое разъеснение,даже я (новечёк)немного понял
респект вам всем за такие большие работы ,коорые вы делаете для нас чайников |
|
|
![]()
Сообщение
#24
|
|
ЛорД всея сети ![]() Группа: Дизайнеры Сообщений: 1,248 Регистрация: 25.5.2007 Из: Украина-мать Пользователь №: 106 Спасибо сказали: 359 Вставить ник ![]() |
Вчера я немного поспешил когда написал в конце тему следущего урока (IMG:http://antislaed.net/style_emoticons/default/smile.gif) вот я посидел, подумал - ну куда вам ещё братся создавать темы? если ещё практики и розяснений по созданию сложных таблиц небыло, да и один скупой пример не делает нам чести (IMG:http://antislaed.net/style_emoticons/default/smile.gif) - так что продолжым тему о таблицах
УРОК ВТОРОЙ: Примеры сложных таблиц... Итак мы разсмотрели все теги с помощью которых создавали таблицы. Давайте теперь перейдём к общим вопросам построения таблиц? Мы знаем что таблицы целиком описываются парой тегов <table> и </table>, внутри которых поинщяются описания строк. Отдельная строка описывается опять-же парой тегов <tr> и </tr>, внутри которых помещяют описания ячеек. Каждая ячейка описывается парой тегов <td></td> внутри которых помещается собствено содержимое ячейки. Что за содержимое спросите вы? (IMG:http://antislaed.net/style_emoticons/default/smile.gif) И я отвечу - это любая инфорация которой вы хотите поделится, начиная от статей стилизованый под шаблон заканчивая тегами типа {%BLOCKS center%} в случае с AS... Но я хотел бы сейчас более подробно розяснить создание дизайна посредством таблиц в примерах. Итак-с Пример 1 Создаем html-страничку с названием test.html - как бонально-бы это не звучало (IMG:http://antislaed.net/style_emoticons/default/smile.gif) КОД <html> <head> <title>test</title> </head> <body text="red"> <h1>Исчо одна табличга ))) </h1> <table border="2" width="100%"> <tr align="center"> <td><p>Просто текст<p></td> <td><img src="as.png"></td> </tr> <tr align="center"> <td bgcolor="black"> <p><b>test1</b></p> <p><b>test2</b></p> <p><b>test3</b></p> </td> <td> <table border="1"> <tr align="right"> <td>1</td> <td>2</td> </tr> <tr align="center"> <td>3</td> <td>4</td> </tr> </table> </td> </tr> </table> </br> <center> <a href="http://www.antislaed.net.ru">Перейти к AS</a> <center> </body> </html> ![]() На рисунке вы можете увидеть получаемый результыт и коменты. (делал в спешке (IMG:http://antislaed.net/style_emoticons/default/smile.gif) !!! ) Идём далее. Пример 2 Теперь расмотрим пример шапки таблицы. Поскольку это шапка, то мы уже заключили её в элемент логического форматирования <THEAD>. Теперь зададим для элемента <THEAD> атрибут bgcolor и background который отвечает за цвет фона, и фоновую картинку соответственно. Опять создаем страничку - с любым названием (IMG:http://antislaed.net/style_emoticons/default/smile.gif) КОД <html> <head> <title>test 2</title> </head> <body text="red"> <table border="1" cellpadding="4"cellspacing="0" width="100%" bordercolor="green" background="./images/p12.jpg"> <b> Расписание поездов</b> <thead bgcolor='lightgrey'> <tr> <th width='60%'> Направление</th> <th> Время отправления</th> <th> Время прибытия</th> </tr> <tr> </thead> <td> На Москву </td> <td align='center'> 07<sup>30</sup></td> <td align='center'> 19<sup>17</sup></td> </tr> <tr> <td> На Киев</td> <td align='center'> 10<sup>10</sup></td> <td align='center'> 15<sup>25</sup></td> </tr> <tr> <td> На Магадан </td> <td align='center'> 13<sup>13</sup></td> <td align='center'> 24<sup>30</sup></td> </tr> </table> </body> </html> ![]() И теперь получаем вот такой результат... Уже лучше? ) Уже слышу вопросы в мою сторону - как можна с помощью таблиц сделать тему для АS - отвичаю 3-тим примером. (IMG:http://antislaed.net/style_emoticons/default/smile.gif) Итак давайте мы займёмся высоким HTML-творчеством. Напишем пример целой (простой!) темы без реальных тх. тегов при помощи таблиц - попутно добавляя ему красивостей, при помощи тегов описаных в прошлом уроке (IMG:http://antislaed.net/style_emoticons/default/smile.gif) . . Создем html страничку с любым названием (надоело придумывать (IMG:http://antislaed.net/style_emoticons/default/smile.gif) ) КОД <html> <head> <title>сайт</title> <body> <!-- Весь сайт в качестве таблицы --> <table border="1" cellpadding="5" align="centter" width="100%"> <tr> <rd colspan="3" bgcolor="bisque" nowrap> <p><font size="7" color="midniqhtblue">Логотип</font></p> </td> </tr> <tr valign="top"> <td bgcolor="bisque"> <table width="165px"> <tr><td><p>Правый блок</p> </td></tr> </table> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p></td> <td width="600px" align="center">Центральный блок </td> <td width="165px" bgcolor="bisque"> <p>Левый блок</p> </td> </tr> <tr align="center"> <td colspan="3" bgcolor="black"> <p allign="right"><i><font color="white">Авторские права пренадлежат мне :)</font></i></p></td> </tr> </table> </body> </html> ![]() Правда похоже внешне на тему для AS? Вот видете ничего сложного нет. Ну а на сегодня пожалуй все... (IMG:http://antislaed.net/style_emoticons/default/smile.gif) Надеюсь дальше продолжать тему таблиц ненужно? У кого какие вопросы ??? Сообщение отредактировал JIopD XaocA: Sep 21 2007, 23:05 |
|
|
![]()
Сообщение
#25
|
|
Живу на АС ![]() Группа: Администратор Сообщений: 2,898 Регистрация: 27.3.2007 Пользователь №: 1 Спасибо сказали: 1012 Вставить ник ![]() |
Теперь все статьи пишем тут (IMG:http://antislaed.net/style_emoticons/default/smile.gif)
Тема в соответствующем форуме создаётся автоматически (IMG:http://antislaed.net/style_emoticons/default/wink.gif) |
|
|
![]()
Сообщение
#26
|
|
AS Support ![]() Группа: Пользователи Сообщений: 1,408 Регистрация: 15.6.2007 Пользователь №: 185 Спасибо сказали: 417 Вставить ник ![]() |
|
|
|
![]()
Сообщение
#27
|
|
Живу на АС ![]() Группа: Администратор Сообщений: 2,898 Регистрация: 27.3.2007 Пользователь №: 1 Спасибо сказали: 1012 Вставить ник ![]() |
|
|
|
![]()
Сообщение
#28
|
|
Лучше не злить! ![]() Группа: [..AS..] Сообщений: 676 Регистрация: 28.3.2007 Из: АНТИСЛАЙД'А Пользователь №: 2 Спасибо сказали: 103 Вставить ник ![]() |
Теперь все статьи пишем тут (IMG:http://antislaed.net/style_emoticons/default/smile.gif) Тема в соответствующем форуме создаётся автоматически (IMG:http://antislaed.net/style_emoticons/default/wink.gif) Лёх а может раздел для фотошопа зделать ешё? |
|
|
![]()
Сообщение
#29
|
|
AS Support ![]() Группа: Пользователи Сообщений: 1,408 Регистрация: 15.6.2007 Пользователь №: 185 Спасибо сказали: 417 Вставить ник ![]() |
|
|
|
![]()
Сообщение
#30
|
|
Лучше не злить! ![]() Группа: [..AS..] Сообщений: 676 Регистрация: 28.3.2007 Из: АНТИСЛАЙД'А Пользователь №: 2 Спасибо сказали: 103 Вставить ник ![]() |
есть куча статей класных каторые можна туда вставить (IMG:http://antislaed.net/style_emoticons/default/smile.gif)
|
|
|
![]()
Сообщение
#31
|
|
Живу на АС ![]() Группа: Администратор Сообщений: 2,898 Регистрация: 27.3.2007 Пользователь №: 1 Спасибо сказали: 1012 Вставить ник ![]() |
АнтиСлаед помахал ручкой пользователю Dering (IMG:http://antislaed.net/style_emoticons/default/30.gif)
|
Sys(3)X, Вас 1 раз(а) поблагодарили за это сообщение: ANSWER | |
|
|
![]()
Сообщение
#32
|
|
AS Support ![]() Группа: Пользователи Сообщений: 1,408 Регистрация: 15.6.2007 Пользователь №: 185 Спасибо сказали: 417 Вставить ник ![]() |
|
|
|
![]()
Сообщение
#33
|
|
А нас мёдом не корми, Дай чего нибуть помалевать. ![]() Группа: Дизайнеры Сообщений: 3,009 Регистрация: 23.9.2007 Из: Казахстан, Жезказган Рядом с Байконуром Пользователь №: 967 Спасибо сказали: 1247 Вставить ник ![]() |
Соглашусь на все 100% с Haliff3007. Статей по фотошопу разных и уроков валом в сети. А вот здесь, надо бы показать на примере как составляется дизайн, ну хотя бы шапку сайта, именно для AS. У меня есть опыт, могу поделиться с картинками. Только как создать статью, что то не допру. Или нет прав? Так же хотел дополнить данную статью, вернее написать новую по каскадным таблицам стилей для оформления AS. Тоже есть опыт и для начинающих будет очень полезно.
Я имею ввиду не тему а отдельную статью, может я выразился не понятно в начале. Ладно, пока составляю потом создам новую тему а админы решат, стоит ли ей жить или нет. |
|
|
![]()
Сообщение
#34
|
|
Живу на АС ![]() Группа: Администратор Сообщений: 2,898 Регистрация: 27.3.2007 Пользователь №: 1 Спасибо сказали: 1012 Вставить ник ![]() |
teletehnika, я сейчас создал подраздел для статей описывающих создание дизайна.
Вот ссылка http://antislaed.net.ru/index.php?autocom=...md=cat&id=8 Для создания статьи есть кнопка NEW ARTICLE вот ссылка http://antislaed.net.ru/index.php?autocom=...le&cat_id=8 |
|
|
![]()
Сообщение
#35
|
|
А нас мёдом не корми, Дай чего нибуть помалевать. ![]() Группа: Дизайнеры Сообщений: 3,009 Регистрация: 23.9.2007 Из: Казахстан, Жезказган Рядом с Байконуром Пользователь №: 967 Спасибо сказали: 1247 Вставить ник ![]() |
|
|
|
![]()
Сообщение
#36
|
|
Владею силой бесмысленых сообщений! ![]() Группа: Разработчики Сообщений: 1,040 Регистрация: 6.12.2007 Из: ПиПербуг Пользователь №: 1,543 Спасибо сказали: 286 Вставить ник ![]() |
Как изменить размер рейтинга в АС 3.5? У меня получается тока высоту......
|
|
|
![]()
Сообщение
#37
|
|
Владею силой бесмысленых сообщений! ![]() Группа: Разработчики Сообщений: 1,040 Регистрация: 6.12.2007 Из: ПиПербуг Пользователь №: 1,543 Спасибо сказали: 286 Вставить ник ![]() |
Не кто незнает?
|
|
|
![]()
Сообщение
#38
|
|
ЛорД всея сети ![]() Группа: Дизайнеры Сообщений: 1,248 Регистрация: 25.5.2007 Из: Украина-мать Пользователь №: 106 Спасибо сказали: 359 Вставить ник ![]() |
Не-а = ))
|
|
|
![]()
Сообщение
#39
|
|
Владею силой бесмысленых сообщений! ![]() Группа: Разработчики Сообщений: 1,040 Регистрация: 6.12.2007 Из: ПиПербуг Пользователь №: 1,543 Спасибо сказали: 286 Вставить ник ![]() |
Все нашол исправил как нуна )) вот тока непонимаю дурака педа... зачем <ul> был нужен внутрений style, если он и так прописан в CSS...
|
|
|
![]()
Сообщение
#40
|
|
А нас мёдом не корми, Дай чего нибуть помалевать. ![]() Группа: Дизайнеры Сообщений: 3,009 Регистрация: 23.9.2007 Из: Казахстан, Жезказган Рядом с Байконуром Пользователь №: 967 Спасибо сказали: 1247 Вставить ник ![]() |
|
|
|
GoogleBot |
![]()
Сообщение
#
|
![]() Рекламные обьявления от Google ![]() |
|
|
|
![]() ![]() |
![]() |
Текстовая версия | Сейчас: 25 April 2025 - 20:02 |