Итакс вслед за Халифом я бы хотел что-то обяснить людям которые не очень хорошо знают 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 и смотрим результат. Конечо таблица она не очень красива, но сейчас нам важно уяснить сам принцип. А раскрасить ее мы всегда успеем. Простейшая таблица представляет собой множество вложенных друг в друга тегов, образующих сложную многоуровневую структуру. Сначала парой тегов <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
JIopD XaocA, Вас 5 раз(а) поблагодарили за это сообщение:
Итак мы разсмотрели все теги с помощью которых создавали таблицы. Давайте теперь перейдём к общим вопросам построения таблиц? Мы знаем что таблицы целиком описываются парой тегов <table> и </table>, внутри которых поинщяются описания строк. Отдельная строка описывается опять-же парой тегов <tr> и </tr>, внутри которых помещяют описания ячеек. Каждая ячейка описывается парой тегов <td></td> внутри которых помещается собствено содержимое ячейки. Что за содержимое спросите вы? (IMG:http://antislaed.net/style_emoticons/default/smile.gif) И я отвечу - это любая инфорация которой вы хотите поделится, начиная от статей стилизованый под шаблон заканчивая тегами типа {%BLOCKS center%} в случае с AS... Но я хотел бы сейчас более подробно розяснить создание дизайна посредством таблиц в примерах.
Идём далее. Пример 2 Теперь расмотрим пример шапки таблицы. Поскольку это шапка, то мы уже заключили её в элемент логического форматирования <THEAD>. Теперь зададим для элемента <THEAD> атрибут bgcolor и background который отвечает за цвет фона, и фоновую картинку соответственно. Опять создаем страничку - с любым названием (IMG:http://antislaed.net/style_emoticons/default/smile.gif)
Соглашусь на все 100% с Haliff3007. Статей по фотошопу разных и уроков валом в сети. А вот здесь, надо бы показать на примере как составляется дизайн, ну хотя бы шапку сайта, именно для AS. У меня есть опыт, могу поделиться с картинками. Только как создать статью, что то не допру. Или нет прав? Так же хотел дополнить данную статью, вернее написать новую по каскадным таблицам стилей для оформления AS. Тоже есть опыт и для начинающих будет очень полезно.
Я имею ввиду не тему а отдельную статью, может я выразился не понятно в начале. Ладно, пока составляю потом создам новую тему а админы решат, стоит ли ей жить или нет.