Введение. Программы, необходимые для Web-дизайна.

Программы визуального дизайна:

1. Macromedia DreamWeawer 3
2. Microsoft FrontPage 2000 (не ставит закрывающие теги)
3. Adobe GoLive 4 (плохо работает с русской кодировкой)

Программы визуального дизайна другого уровня:

1. Adobe ImageReady 2.0 (в составе Photoshop 5.5) (очень хорошая для Web-дизайна)
2. Macromedia FireWorks 3.0 (вышла недавно, очень мощная программа)

Для анимации: Ulead GifAnimator 4.0

Список программ Macromedia:

1. Растровая графика FireWorks 3
2. Векторная графика FreeHand 9
3. Flash 4

Dynamic HTML=HTML+CSS+JavaScript

Macromedia DreamWeawer 3.

Macromedia DreamWeawer - программа визуальной компановки страницы.

Настройка программы на работу с русским языком.

1. Modify >> Page Properties
   Document Encoding: Cyrillic Windows-1251

2. Edit >> Preferences…
   Выбрать Category: Fonts/Encoding
   Установить Default Encoding: Cyrillic Windows-1251
Font Settings: Cyrillic

Чтобы сконфигурировать браузер.

1. File >> Preview in Browser >> Edit Browser List…

2. Добавить браузер: Browsers + >> Add Browser >> Browse…
   Зайти в папки и выбрать netscape.exe:
C:\Program Files\Netscape\Communicator\Program\netscape.exe
3. В окошке Browsers добавится NETSCAPE 4.7
   Отметить второй браузер: Secondary Browser

В результате можно будет пользоваться двумя браузерами для просмотра:
Iexplore - клавиша F12
NETSCAPE 4.7 - клавиши Ctrl+F12

Основные палитры программы.

• Windows >> Objects (Ctrl+F2) - палитра объектов.
• Windows >> Launcher (Ctrl+F4) - эта палитра сдублирована: внизу экрана расположены такие же кнопки.
• Windows >> Properties (Ctrl+F3) - палитра свойств (в правом нижнем углу этой палитры есть раскрывающаяся часть).

Клавиши и кнопки.

• Клавиша Enter соответствует <p> (тег начала нового абзаца)
• Сочетание клавиш Ctrl+Shift+пробел соответствует &nbsp; (неразбиваемый пробел)
• На панели снизу справа - кнопка < > Show HTML Sourse (для работы с кодом)

Чтобы удалить парный тег.

1. Выделить тег и его содержимое (внизу в левом углу, например, <font>).
2. Щелкнуть правой кнопкой мыши на выделенную область.
3. Remove Tag <font>

Все основные настройки параметров страницы находяться в меню
Modify >> Page Properties (Ctrl+J) Перед началом разработки сайта необходимо создать описание сайта:
Меню Site >> Define Sites…

Создание таблицы.

Insert Table (Ctrl+Alt+T)

Добавить новую ячейку в таблицу относительно текущей:
Modify >> Table Insert Rows or Columns…
(удобно пользоваться правой кнопкой мыши для вызова меню)

Создание таблицы с бордюром, но border=0.

Задать параметры таблицы:

<table border="0" cellspacing="1" bgcolor="цвет_бордюра">
<tr> <td bgcolor="цвет_ячеек">…

Особенности NC (Netscape Communicator).

Приведенный выше код при просмотре в NC вместо "бордюра" даст прозрачное место, поэтому универсальным решением будет создание вспомогательной таблицы, внутри которой находится основная таблица:

<table>
   <tr>
      <td bgcolor="цвет_бордюра">
         <table border="0" cellspacing="1">
            <tr> 
               <td bgcolor="цвет_ячеек">
                  … (основная таблица)
               </td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Для новостных сайтов делают фиксированный дизайн, ширина окна, в основном, 600 px (пикселов).
При создании Web-страницы нужно учитывать, что стандартными размерами области экрана пользователя могут быть: 640х480, 720х480, 720х576, 800х600, 1024х768, 1152х864, 1280х1024.

Для Web-дизайна желательно использовать "безопасные" цвета: цвета, которые однозначно отображаются на мониторе. Таких цветов 216 из 256. Код RGB таких цветов содержит: 00, 33, 66, 99, cc, ff. Например: #0099ff.

Для разметки Web-страницы часто используется таблица. В ячейках и строках таблицы располагаются фотографии, рисунки, заголовки, текст.

Как в DreamWeawer выбрать цвет ячейки, близкий к цвету на фотографии.

1. Выберите ячейку таблицы, в которой находится фото (кликнуть на тег <td> в левом нижнем углу экрана).
2. В палитре Properties (палитре свойств) в раскрывающейся части кликнуть на Bg (Background Color). Появится пипетка с палитрой.
   Выбрать "безопасные" цвета, для этого кликнуть по кнопке с пипеткой и паутиной (левая кнопка из трех, расположенных под палитрой).
3. При перемещении пипетки по фото коды цветов точек фото отображаются под палитрой цветов.
   Выберите цвет, щелкнув пипеткой на фото в нужной точке.
   Этот код попадет в поле Bg (Background Color).
   Далее используйте этот цвет в соответствии с дизайном страницы.

Пример персональной странички.

Из примера: создание таблицы с бордюром.

<table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td bgcolor="#ffcccc"> <table width="100%" border="0" cellspacing="2" cellpadding="0"> <tr valign="middle" align="center"> <td class="tdmenu"><a href="#" class="menu">Муми-дол</a></td> <td class="tdmenu"><a href="#" class="menu">Муми-семейство</a></td> <td class="tdmenu"><a href="#" class="menu">Хобби</a></td> <td class="tdmenu"><a href="#" class="menu">Муми-новости</a></td> <td class="tdmenu"><a href="#" class="menu">Друзья и враги</a></td> <td class="tdmenu"><a href="#" class="menu"> Муми-песенки</a></td> </tr> <tr valign="middle" align="center"> <td class="tdmenu"><a href="#" class="menu">Похождения</a></td> <td class="tdmenu"><a href="#" class="menu"> Страшные истории</a></td> <td class="tdmenu"><a href="#" class="menu">Муми-игры</a></td> <td class="tdmenu"><a href="#" class="menu">Путешествия</a></td> <td class="tdmenu"><a href="#" class="menu">Любимые блюда</a>v/td> <td class="tdmenu"><a href="#" class="menu">Гербарий</a></td> </tr> </table> </td></tr> </table>