Отправляет email-рассылки с помощью сервиса Sendsay

Твой первый сайт

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Секреты создания и продвижения продающих сайтов" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Январь 2009   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
ArtDir

Статистика

8.811 подписчиков
-1 за неделю
←   Все выпуски   →

Твой первый сайт: от А до Я

Рассылки сайта "Время России" на subscribe.ru

Твой первый сайт: от А до Я

C Новым Годом Вас!!!

Колонка редактора

Новые статьи на сайте:

new Как заработать на кризисе
new Правила поведения во время кризиса
new Как легко заработать
new Как быстро заработать деньги

 !!! «Delmi» — это не только отдых и развлечения, но и дополнительный доход всем  пользователям.
  !!! Партнерская Программа «Delmi» и превратит ваш компьютер в инструмент дополнительного дохода.
  !!! Сделайте работу в «Delmi»  основным источником дохода и зарабатывайте деньги не покидая  дома.

new Как воспитать в себе лидера
new Как развить уверенность в себе
new Как найти себя
 new Как развить в себе сильную мотивацию
 new Избавьтесь от всех комплексов неполноценности
 new Искусство притяжения денег

Практическое применение информации из фильма "Секрет" или «ВАШИ МЫСЛИ СТАНОВЯТСЯ ВАШЕЙ СУДЬБОЙ»

   Многие из вас посмотрели фильм «Секрет», и он вас воодушевил. Вероятно, вы согласились со всем, о чем рассказывалось в фильме. И Вы, как и многие, задавались после его просмотра самыми разными вопросами.

   Многие люди, посмотрев фильм, задавались вопросом, как можно использовать полученную из фильма информацию на практике. Как контролировать свои мысли, как справляться со своими эмоциями, как стать магнитом для желаемого? В фильме об этом почти ничего не сказано.

   Хотите знать как на практике  использовать на практике принципы, представленные в фильме? Тогда Вам на наш сайт !!!

  Хиты продаж
<Title> HTML - полезные советы </Title>


Лучшие рассылки на Subscribe.ru


Компьютерная литература - 105  электронных учебников умещающихся на 3 CD

CashFlow - это игра, которая помогает по-новому взглянуть на роль денег в нашей жизни, освободиться от привычных стереотипов бесполезного накопительства и  затрат.

Энциклопедия вебмастера - Супер сборник на двух CD, который будет просто необходим, как начинающим сайтостроите-лям так и продвинутым вебмастерам.

Энциклопедия манипулирова-ния или как самостоятельно изучить НЛП и гипноз (2 CD)

Энциклопедия начинающего крэкера

 Учебный сборник на CD  "Уроки Вебмастерства"

<P> Предисловие </P>

    Каждому из нас приходилось использовать небольшие хитрости HTML, чтобы добиться желаемого результата. Ниже приведены некоторые советы, с которыми дизайн вашего сайта станет лучше. Вообще-то говоря, полный курс теоретических советов вы можете увидеть в разделе "Советы". Здесь же собраны практические, частные случаи, которые могут вам пригодиться при создании сайта или отдельной страницы.

<P> Все по порядку </P>
 

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

Так можно автоматически перенаправить посетителя на другую страницу:
<Html>
 <Head>
  <Title>Мы переехали!</title>
  <Meta Http-equiv="Refresh" Content="5;URL=http://kimsite.narod.ru/">
 </Head>
 <Body BgColor="#ffffff">
  <H1 Align="Center">Мы переехали на новое место:</H1>
  <Hr Width="250">
  <H2 Align="Center">Подождите 5 секунд или воспользуйтесь ссылкой:
  <A Href="http://kimsite.narod.ru">http://kimsite.narod.ru</A></H2>
 </Body>
</Html>

Если вы используете параметры отступа текста от рабочего края броузера, учтите, что для NN и IE они разные:
      1) Для Netscape Navigator: "marginwidth" и "marginheight"
      2) Для Internet Explorer: "topmargin" и "leftmargin"
Единственный способ корректного распознавания в обоих броузерах разместите все параметры:
  <Body Topmargin="0" Leftmargin="0" Marginwidth="0" Marginheight="0">

 Строка DOCTYPE (DTD), расположенная в первой строке HTML документа, описывает стандарт HTML, который используется в этом документе. Два наиболее используемых DTD:
    1) HTML 3.2:  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    2) HTML 2.0:  <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

Чтобы заменить кнопку в форме на изображение используйте:
<Input Type="image" Src="picture.gif" Width="25" Height="15" Border="0" Alt="submit">

Если при размещении странички на сайте не видно картинок, а в локальной версии всё было в порядке, то проверьте следующее:
    1. Адреса картинок не относительные, а абсолютные (типа file:///....).
    2. Могут стоять неправильные слэши: не "/", а "\". В URL, как правило, применяются прямые слэши "/".
    3. FTP может класть на сервер файлики с именами, написанными заглавными буквами - PICTURE.GIF,

в то время как в тексте будет прописано picture.gif или Picture.gif - для ОС типа UNIX это не одно и тоже.

  • Если Вы делаете карту ссылок из одного изображения, разбитого на несколько частей, учтите, что язык HTML символ перевода каретки (конец строки) воспринимает как пробел. Поэтому все тэги, которые у Вас формируют Вашу карту ссылок, нужно писать в одну строчку, иначе между картинками будут промежутки!
     

  • Чтобы убрать границы шириной 2-3 пискела между фреймами, добавьте в тэге:
      <Frameset> строчку Border="0" FrameBorder="0".
     

  • При использовании тэга:
     <Table BackGround="picture.gif">
    IE отображает фоновый рисунок, начиная от начала таблицы, а NN - с начала каждой ячейки. Обойти это неудобство можно, вложив таблицу в другую:
     <Table Cellspacing="0" Cellpadding=0 Border="0" BackGround="picture.gif">
      <Tr><Td Align="Center">
       <Table Cellspacing="0" Cellpadding="4" Border="0" Width="100%" BackGround="">
        <Tr><Td Align="Left">
         Информация в ячейки
        </Td><Td Align="Right">
         Информация в ячейки
        </Td></Tr>
       </Table>
      </Td></Tr>
     </Table>
    Обратите внимание на     BackGround="" и на то, что в тэгах таблиц не задан атрибут BgColor.
     

  • Для того, чтобы "собрать" один HTML-документ из нескольких кусков, нужно использовать команды SSI (Server-Side Includes):
     <!--#include file="ssi/menu.html" -->
        путь к файлу указывается от текущего файла (файла, в котором расположена команда).
     <!--#include virtual="/ssi/menu.html" -->
        путь к файлу указывается от корня сервера.
    Таким образом, например, можно задать меню, одинаковое для всех страниц сервера, и хранить его в отдельном файле. Тогда его изменение отразится на всем сервере и не потребует кропотливой работы по правке всех HTML-страниц Вашего сервера.
     

  • Как избавиться от противной синей рамки по периметру рисунка, который является ссылкой?
      <A Href="link.html"><Img Src="picture.gif" Border="0"></A>
     

  • У адреса mailto:, применяемого для отправки писем, можно задать и другие опции, крома самого адреса. Например, адрес вида:
      <A Href='mailto:name@domain.ru?subject="Заголовок письма"&Body="This body of e-mail">Text</A>

    • Автор kimsite@mailru.com
    Сайт:     kimsite.narod.ru

    Все в своих рамках

                   В своё время, только начиная изучать азы Web-дизайна, я столкнулся с проблемой смехотворной, но знакомой каждому начинающему Web-мастеру: как расставить на странице все элементы так, чтобы они гармонично сочетались и, при этом, не мешали друг другу.
                   Перейдя с места в карьер, я стал использовать слои, но столкнулся с тем, что не все браузеры их поддерживали, а значит, не могли правильно отформатировать мои страницы. Это заставило меня уделить внимание таблицам.
                   Опыт, приобретенный в дальнейшем, показал, что таблицы, при всей банальной простоте своего построения, не так уж и просты. Ошибиться в форматировании страницы с помощью таблиц также легко, как и строить их. При этом, ошибки дают о себе знать неожиданно, как бы исподтишка, в разных браузерах по-разному. И приходится тратить массу времени для выявления и устранения ошибки, так, чтобы не породить новую.
                   Тема данной статьи может вызвать снисходительную улыбку у того, кто считает себя ассом в Web-дизайне, тем не менее, я рассчитываю на внимание тех, кто только начал свой путь на этом поприще, или всегда открыт для восприятия накопленного другими опыта.

                   1. Таблицы как таковые.

                   Для начала, напомню самое простое: как создается каркас таблицы. Все начинается с пары тегов TABLE: <TABLE></TABLE>. Они имеют свои стандартные параметры ALIGN, BORDER, CELLSPACING, CELLPADDING, WIDTH, которые отвечают за выравнивание таблицы относительно окна браузера, за наличие рамки у таблицы, за расстояние между ячейками таблицы и отступы внутри ячеек, за ширину таблицы (как в процентах, так и в пикселях). Далее следует пара тегов, определяющих строку таблицы: <TR></TR> Стандартными параметрами для строки являются ALIGN и VALIGN, отвечающие за выравнивание ячеек внутри строки по горизонтали и по вертикали. Последняя пара тегов - это теги самих ячеек: <TD></TD>. С теми же параметрами, что и у строки. Кроме того, существуют еще и теги, позволяющие в самом коде делить таблицу на соответствующие разделы: THEAD, TH, TBODY и TFOOT. При этом, ТН уже содержит в себе форматирование, позволяющее выделять жирным и выравнивать по центру текст заголовка таблицы. Правда, всё это имеет смысл, если таблица создается с целью именно показать таблицу в HTML-документе. В самом простом варианте (с учётом всех вышеуказанных тегов) табличный код выглядит вот так:

                       <TABLE ALIGN=left BORDER=1 CELLSPACING=0 CELLPADDING=4 WIDTH=100%>
                   <THEAD>
                   <TR ALIGN=center VALIGN=top>
                   <TH VALIGN=top COLSPAN=3>Заголовок</TH>
                   </TR>
                   </THEAD>
                   <TBODY>
                   <TR ALIGN=center VALIGN=top>
                   <TD ALIGN=center VALIGN=top>Ячейка 1</TD>
                   <TD ALIGN=center VALIGN=top>Ячейка 2</TD>
                   <TD ALIGN=center VALIGN=top>Ячейка 3</TD>
                   </TR>
                   </TBODY>
                   <TFO OT>
                   <TR ALIGN=center VALIGN=top>
                   <TD ALIGN=center VALIGN=top COLSPAN=3>Заключение</TD>
                   </TR >
                   </TFOOT>
                   </TABLE>    .

                   Всё это проще простого, скажете Вы. И что здесь сложного и опасного?
                   Во-первых, опасность в параметрах. Не все параметры стоит применять, так же, как и не все параметры из тех, что следовало бы, мы применяем. Так, например, для тега TR не обязательно применение параметров выравнивания. Однако они обязательны (!) для применения с тегом TD. Также типичная ошибка, с тегами TR, TD и TH может не применяться параметр WIDTH, однако он очень важен, так влияет на соответствие расположения ячеек в таблице относительно друг друга и таблицы в целом.
                   Таким образом, создавая таблицу, необходимо указать ширину самой таблицы (а иногда и её высоту - для "благозвучности" дизайна), ширину строки и ячейки/ячеек, горизонтальное выравнивание таблицы и ячейки, а также расстояние между ячейками и внутри-ячеечные отступы. При этом ширина каждой ячейки в строке, если их несколько, должна соответственно быть указанна так, чтобы их сумма соответствовала ширине строки. Однако если указать ширину ячеек, но опустить ширину строки, то может появиться неприятный эффект - "съедание" объектов (например, кнопок HTML), расположенных в ячейках.
                   Прошу обратить внимание на параметр COLSPAN, присутствующий в ячейках заголовка и заключения таблицы. Он применяется, когда ячеек в строках больше одной и указывает, на ширину скольких колонок растянется данная ячейка. Параметр, аналогичный ему и касающийся количества "перекрываемых" строк, называется ROWSPAN. Пропуск этих параметров, там, где они необходимы, является очень частой ошибкой и приводит к искажению получаемого в браузере изображения.
                   Кроме основных параметров, в табличных тегах могут применяться дополнительные, которые особенно не влияют на правильное форматирование таблицы. Это стандартные HTML-параметры фонового цвета, цвета рамки (основной, "светлой" и "темной"), параметры STYLE и CLASS каскадных таблиц стилей. Здесь важно не ошибиться с использованием цветов и стилей, чтобы ваша таблица выглядела гармонично и не колола глаза пестротой и неопрятностью дизайна. Также, нужно учитывать, что Netscape Navigator по умолчанию использует для оформления рамки таблицы объемную линию. Он может частично "покрасить" её в указанный вами цвет, но не признает "светло-темного" варианта.
                   Во-вторых, опасность скрывается в самих таблицах. Нередко, создавая дизайн страницы с помощью таблицы, мы забываем, что ячейки намертво связаны друг с другом. Даже COLSPAN/ROWSPAN не позволяют нам освободиться полностью от тех рамок, в которые нас загоняют столбцы и строки таблицы. А ведь дизайн требует, чаще всего, "вольного" расположения элементов на странице.
                   В этом случае необходимо прибегнуть к "методу Матрёшки", при котором основная таблица является всего лишь носителем других, функционально значимых таблиц, в которых и располагаются элементы дизайна. На примере это выглядит следующим образом:

                    <TABLE ALIGN=center BORDER=1 CELLSPACING=0 CELLPADDING=0 WIDTH=100%>
                   <TR ALIGN=center VALIGN=top WIDTH=100%>
                   <TD VALIGN=top COLSPAN=3>
                   <!-- Заголовок -- >
                   <TABLE ALIGN=center BORDER=1 bordercolor=red CELLSPACING=0 CELLPADDING=0 WIDTH=90%>
                   <TR ALIGN=center VALIGN=top WIDTH=100%>
                   <TD ALIGN=center VALIGN=top WIDTH=100%>Таблица в заголовке</TD></TR>
                   </TABLE>
                   <!-- Конец Заголовка -- >
                   </TD>
                   </TR>
                   <TR ALIGN=center VALIGN=top WIDTH=100%>
                   <TD ALIGN=center VALIGN=top WIDTH=33%>
                   <! -- Ячейка 1 -- >
                   <TABLE ALIGN=center BORDER=1 bordercolor=blue CELLSPACING=0 CELLPADDING=0 WIDTH=90%>
                   <TR ALIGN=center VALIGN=top WIDTH=100%>
                   <TD ALIGN=center VALIGN=top WIDTH=100%> Таблица в средней части</TD></TR>
                   </TABLE>
                   <! -- Конец Ячейки 1 -->
                   </TD>
                   <TD ALIGN=center VALIGN=top WIDTH=34%>Ячейка 2</TD>
                   <TD ALIGN=center VALIGN=top WIDTH=33%>Ячейка 3</TD>
                   </TR>
                   <TR ALIGN=center VALIGN=top>
                   <TD ALIGN=center VALIGN=top COLSPAN=3>
                   <!-- Заключение -- >
                   <TABLE ALIGN=center BORDER=1 bordercolor=green CELLSPACING=0 CELLPADDING=0 WIDTH=90%>
                   <TR ALIGN=center VALIGN=top WIDTH=100%>
                   <TD ALIGN=center VALIGN=top WIDTH=100%>Таблица в конце</TD></TR>
                   </TABLE>
                   <!-- Конец Заключения -- >
                   </TD>
                   </TR>
                   </TABLE>

                   Такой способ позиционирования элементов на Web-странице позволяет размещать объекты относительно произвольно, так как функциональные таблицы "привязаны" только к размеру и формату ячеек, в которых они находятся, но не зависят от размера и формата основной таблицы в целом. Поэтому, при таком позиционировании, не появляется эффекта растягивания, к примеру, колонки с кнопками и ссылками вслед за удлинением центральной колонки Web-страницы при вставке в последнюю огромного размера текста.
                   Кроме того, такой способ влияет, как ни странно, на форматирование абзацев текстовых блоков на странице. Дело в том, что опыт показывает - Netscape не понимает выравнивание JUSTIFY в ячейке таблицы. Для этого в ячейке ему необходим тег <P ALIGN=JUSTIFY>. Но он также отказывается понимать <P ALIGN=JUSTIFY>, если тег находится в ячейке, которая оперирует параметром COLSPAN. "Матрёшка" спасает положение. Netscape не переносит формат ячейки на таблицу, расположенную в ней, а рассматривает последнюю как целиком самостоятельный элемент.
                   В "методе Матрёшки" необходимо быть внимательным к тому, в каких единицах вы задаёте размер таблиц - в процентах или в пикселях - и какое выравнивание вы при этом задали. Опять таки, по причине своенравного характера Netscape'а. Иногда, размер внешней таблицы необходимо указывать в пикселях, если вы хотите в последующем указать размеры внутренних таблиц в процентах, а выравнивание обязательно должно быть центральным. Иначе, может случиться так, что внутренняя таблица растянется на огромное расстояние, безобразно исказив внешнюю таблицу и весь дизайн страницы в целом. Вот простой пример:

                   1) <TABLE ALIGN="center" WIDTH="100%">
                   2) <TABLE ALIGN="center" WIDTH="600">
                   3) <TABLE ALIGN="left" WIDTH="600">
                   4) <TABLE ALIGN="left" WIDTH="100%">

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

                   2. Таблицы и графика.

                   Таблицы являются незаменимым инструментом любого Web-дизайнера для размещения графики на странице. Это уже аксиома. Так, используя таблицу, можно сгруппировать отдельные графические файлы, выполняющие самостоятельные функции, в законченное изображение, например заголовок.
                   Однако, размещение графики в ячейках таблицы тоже может сопровождаться совершением целого ряда ошибок.
                   Одной из самых распространенных ошибок является вставка рисунка в ячейку таблицы без употребления параметра выравнивания тега <IMG>. Собственно, когда рисунок расположен в ячейке один и не сопровождается ни текстом, ни какими-либо иными объектами, это не важно. В противном случае, отсутствие выравнивания становится заметным и может испортить весь дизайн.
                   Дело в том, что тег рисунка (изображения) не наследует параметров выравнивания ячейки, он только подчиняется им, как любой другой объект в ячейке. Поэтому, например, при любом выравнивании в ячейке, текст обязательно "уйдет" под изображение. Но вы же хотите, чтобы текст его "обтекал"? В данном случае, необходимо указать в теге IMG параметр выравнивания ALIGN равный LEFT или RIGHT. Тогда изображение будет мягко "окружено" текстом.
                   Также имеет смысл указать параметры вертикального и горизонтального отступов от изображения VSPACE и HSPACE, так как отступы, заданные для ячейки также не наследуются.
                   В некоторых случаях, необходимо, чтобы часть текста выводилась сбоку от изображения, а остальная уходила под него. При этом, "водораздел" должен быть очень хорошо заметен.
                   В этом случае, используются два варианта. Либо в теге <BR> используется параметр CLEAR=LEFT или CLEAR=RIGHT соответственно, и в этом случае часть текста после тега <BR> будет уходить под изображение, а в выравнивании последнего можно использовать свойство MIDDLE, либо, используя, опять таки, табличные ячейки, поместить изображение в одну, "боковой" текст в соседнюю, а "нижний" - соответственно, в ячейку, расположенную в нижестоящей строке и развернутую на всю эту строку (COLSPAN=2). Разумеется, последний способ громоздок, зато гарантировано, что подобное размещение правильно интерпретирует любой браузер, понимающий таблицы.
                   Второй распространенной ошибкой является несоответствие размеров ячеек с размерами вставляемого изображения. Это опасно, когда размеры изображения превышают размеры ячейки. В этом случае ячейка безжалостно растягивается, что, безусловно, влияет на расположение соседних элементов на странице. Например, использование графической линии в качестве разделительной черты, вместо <BR>, без согласования с размерами ячейки-«носителя», может привести к искажению размеров всей таблицы. Избежать этого, конечно же, можно только согласованием размеров.
                   Кроме ошибок, часто допускается невнимание к стандартным возможностям табличных тегов. Например, кто из вас серьезно задумывался над возможностями параметров фона, которые, кстати, поддерживаются и строками, и ячейками? Конечно, с помощью BGCOLOR можно задать цвет таблицы, строки и ячейки, как вместе, так и по отдельности. С помощью BACKGROUND можно вставить изображение в качестве фона. В этом случае оно будет заполнять всю площадь ячейки, строки, таблицы. Тут-то и начинается самое интересное.
                   Мы можем вставить в одну ячейку два различных самостоятельных изображения, одно поверх другого, создав иллюзию их послойного размещения. Одно будет задано параметром BACKGROUND тега <TD>, а другое тегом <IMG>. Надо только не забыть, что размеры ячейки должны совпадать с размерами изображения (тогда не появится эффект "размножения" картинки или её "обрезания"), размещенного в фон, а самостоятельное изображение должно быть значительно меньше фонового, иначе теряется весь смысл подобного дизайна.
                   Таким же образом можно группировать изображение и текст, что небесполезно при дизайне, например, ссылок (только в этом случае шрифт должен быть фиксированной величины). Не бесполезно это и просто при использовании относительно больших законченных изображений (например, групповых фотографий) в качестве фона...
                   Конечно же, возможности таблиц не безграничны, но и не до конца раскрыты. Я попробовал описать лишь малую их часть в данной статье и, надеюсь, она принесет вам пользу.
                   Удачи!

    Автор: Дмитрий М. Сагайдак
    Статья опубликована на сайте www.paco.net/~dms/
    или вы можете найти ёё на www.paco.net/~wd/


    "Домашний компьютер: от А до Я"

    Анекдоты, которые расмешили всю Россию

    "Мышеловка" или всё о мошеничестве в Интернет

    Коллекция самых необходимых ссылок по Internet

    Рассылка для настоящих мужчин

    Интернет без секретов: курс молодого бойца

    Ах какая женщина" или как стать счастливой в короткий срок

    Худеем в два счёта

    Интернет или как стать продвинутым пользователем

    Как стать обаятельной и привлекательной

    Кулинарное искусство
     

    ЖДЁМ   ПИСЕМ
    В избранное