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

WebDesign.Doc

Подписаться Бесплатная новостная рассылка Подписчиков 1.563 RSS
←   Январь 2006   →
 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


За последние 60 дней ни разу не выходила


Сайт рассылки: http://internetsoft.16mb.com/
Открыта: 15-02-2005

Автор
Andrew

Статистика

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

WebDesign.Doc - электронная библиотека веб-мастера - 22


Информационный Канал Subscribe.Ru

 электронная библиотека веб-мастера | выпуск # 22

visit : www.webmastershop.ru

 WEBDESiGN.DOC
o

mailto : webmastersoft@mail.ru

 1. Лучшие предложения Рунета для веб-мастеров

  • "Энциклопедия веб-дизайна: Создание сайта от А до Я"

 2. Документация (статьи, учебники, пособия, off-line журналы)

  • «All of Photoshop» // издание 2

4. Статья

  • Хитрости табличного дизайна

***

*

1. Лучшие предложения Рунета для веб-мастеров

"Энциклопедия веб-дизайна: Создание сайта от А до Я"

Пакет включает в себя полный набор программ и документации для создания современного веб-сайта:

  • 1.6 Gb отличного веб-дизайнерского софта (на 3-х CD-r)
  • учебники и пособия по веб-дизайну
  • 250 профессиональных шаблонов сайтов
  • более 280 ява-скриптов и аплетов
  • коммерческие скрипты с детальным описанием настройки
  • руководства по раскрутке и интернет-рекламе
  • электронные книги по интернет-бизнесу
  • обновления и консультации в течении 2-х месяцев!

Что нового? В состав пакета включены 3 CD, содержащие все необходимые для создания и сопровождения сайта программы: последние версии популярных редакторов, лучшие графические программы и утилиты, программы для эффективной раскрутки и т.д. Всего более 140 (!) проверенных временем и опытом программ. Цена - 340 руб (включая стоимость доставки по России). Возможна оплата наложенным платежом. По вопросу приобретения пакета обращайтесь на e-mail - info@webmastershop.ru

*

2. Документация

«All of Photoshop» // издание 2
СОДЕРЖАНИЕ
(1) ОБЩИЕ И ТЕХНИЧЕСКИЕ ВОПРОСЫ
(2) РАБОТА С ТЕКСТОМ, ШРИФТЫ
(3) ТРЮКИ, ЭФФЕКТЫ, ПЛАГИНЫ
(4) РАБОТА С ЦВЕТОМ
(5) НЕПОЛАДКИ, ПРОБЛЕМЫ, ОШИБКИ
Скачать: aop_vol2.pdf (16,5 МБ)
Для просмотра и печати PDF файлов, используйте Acrobat Reader (версии 6.0 и выше).

*

3. Статья

Хитрости табличного дизайна.

Часть 1.

Формируем рамку таблицы.

Любому веб-мастеру, ввиду своей профессиональной деятельности, приходится создавать те или иные сложные элементы на сайте (например: оптекание текстом графики, создание колонок с текстом, фиксация элементов сайта).

Однако, стандарт html имеет небольшое количество стандартных элементов оформления страницы, и не все элементы одинаково отображаются в разных браузерах. Каждая компания пытается разработать свой собственный html, порой уходя далеко от основной концепции html, разработанной консорциумом WWW.

Поэтому веб-мастеру приходится эксперементировать с элементами, которые являются общими для всех браузеров.

Наиболее удачно подходят таблицы т.к в ячейках таблицы удобно размещать информацию.
Кроме того, таблицы в html имеют атрибут "border="0" - этот атрибут со значением "0" скрывает границы таблицы т.е остаётся видно содержимое ячейки а сама рамка не видна.
Давайте теперь рассмотрим пример разработки табличного дизайна.

Цветная граница рамки таблицы.

Сразу отмечу, что в html, по умолчанию, встроен атрибут, который отвечает за цвет рамки таблицы. (bordercolor). Однако, нам он не подойдёт, потому что данный атрибут поддерживается только браузером Internet Explorer. В других браузерах этот элемент не работает. Но нам необходимо, чтобы страница одинаково отображалась в любом браузере. К нам на помощь приходят таблицы. Давайте сначала создадим обычную таблицу.

<table width="255" height="72" border="0" align="left" cellpadding="0" cellspacing="2" bgcolor="#000000">
<tr>
<td valign="top">&nbsp;</td>
</tr>
</table>

Атрибут "border" должен быть равен "0". cellspacing приравняем к "2" (чем больше число, тем шире получится рамка таблицы).

Атрибут "cellspacing" служит для того, чтобы указать расстояние между двумя ячейками. В данном случае, он будет указывать расстояние между двумя таблицами.

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

<td valign="top">&nbsp;</td>

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

Вставляем в ячейку нашей таблицы другую таблицу.

<table width="251" height="69" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="69"><div align="center">Текст</div></td>
</tr>
</table>

Указываем цвет фона таблицы. В данном случае, нам понадобится белый фон.

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

Посмотрите, как выглядит эта таблица.

Текст

 

 

 

Напоследок, приведу весь код, который мы создали.

<table width="255" height="72" border="0" align="left" cellpadding="0" cellspacing="2" bgcolor="#000000">
<tr>
<td valign="top"><table width="251" height="69" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="69"><div align="center">Текст</div></td>
</tr>
</table></td>
</tr>
</table>

Часть 2

Расположение 2 таблиц с данными в одной строке.

Начинающие веб-мастеры довольно часто встречаются с проблемой расположения информации в один ряд. Будь то картинка слева и текст, расположенный справа, или два текстовых блока, представленных в виде колонок.

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

Наиболее удачным способом разметки дизайна страницы в языке html является таблица. Помимо своей основной функции таблица позволяет очень удачно служить "каркасом" дизайна сайта.

В нашем случае, мы будем использовать таблицу для создания колонок с текстом.

Расположение двух таблиц в одной строке.

Для начала, давайте создадим таблицу, состоящую из двух столбцов со значением ширины рамки, равной 0 пикселов (border="0").
Для тега <td> (тег столбца таблицы) указываем атрибут valign со значением "top", отвечающий за то, чтобы информация располагалась с верхнего края таблицы.

Вот, примерно, какой html-код вы должны были получить:

<table width="366" height="46" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">&nbsp;</td>
<td valign="top">&nbsp;</td>
</tr>
</table>

В каждой ячейке (между тегами <td>&nbsp;</td>) нашей таблицы создаем ещё одну таблицу, но c шириной рамки, равной 1 пиксель, и с одним столбцом.
Посмотрите, какая таблица должна получиться у вас:

 
 

Если Вы хотите, чтобы видимые таблицы находились на некотором расстоянии друг от друга, тогда измените значение атрибута cellspacing, отвечающего за расстояние в пикселях между двумя ячейками таблицы, тега <table> нашей основной таблицы, т.е. той, в которой содержатся 2 наши видимые таблицы.

Вот, что получилось у меня:

 
 

Атрибут "cellspace" в основной таблице равен 2.

Привожу весь html-код, разработанный нами в данный момент:

<table width="460" height="49" border="0" cellpadding="0" cellspacing="2">
<tr>
<td height="49" valign="top"><table width="230" height="50" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="48" valign="top">&nbsp;</td>
</tr>
</table></td>
<td valign="top"><table width="230" height="50" border="1" cellpadding="0" cellspacing="0">
<tr>
<td height="48" valign="top">&nbsp;</td>
</tr>
</table></td>
</tr>
</table>

Видите, ничего сложного. А главное - код читается во всех браузерах.

Колонки с текстом.

На основе этого мы можем с Вами создать колонки с текстом.

Для этого в полученных нами таблицах меняем параметр "border" тега <table>.
Во всех таблицах поменяем значение атрибута border с 0 на 1, и в ячейках вложенных таблиц напишем произвольный текст.

Вот, что в результате должно у вас получиться:

Колонка 1

Текст, написанный в первой колонке вложенной таблицы.

Колонка 2

Текст, написанный в первой колонке вложенной таблицы.

Довольно привлекательно, не правда ли?

Успехов в веб-дизайне!

ИСТОЧНИК: http://vitaweb.jino-net.ru/, http://home.onego.ru/~vitalik.d/

:: Лучшие предложения Рунета для веб-мастеров! ::

"Профессиональные ШАБЛОНЫ САЙТОВ" (3 CD)

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

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

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

В состав каждого шаблона включены все необходимые исходники (psd, fla, html) вплоть до используемых шрифтов. 70% шаблонов представлены в 2-х вариантах - html- и flash-версиях. Всего на дисках собрано более 500 шаблонов! Незаменимая вещь и для начинающих, и для опытных веб-мастеров. Стоимость 3-х CD (с учетом доставки по России) - 450 руб. По вопросу приобретения обращайтесь на e-mail - info@webmastershop.ru

*

the end of maillist
Subscribe.Ru
Поддержка подписчиков
Другие рассылки этой тематики
Другие рассылки этого автора		 Подписан адрес:
Код этой рассылки: inet.webbuild.webdesigndoc
Архив рассылки		 Отписаться Вебом Почтой
Вспомнить пароль
В избранное