Главнаястр.1<Гл.2. Элементы Web-страницч1ч2ч3>Создадим первую страничку. Для начала откройте свой сайт (выбрав его из списка Site в Site Manager) и создайте новый файл, выбрав пункт New File – на панели справа (локальные файлы) появится файл untitled.htm, который стоит сразу переименовать в index.htm – так обычно указывается название основной (домашней) странички сайта. Теперь двойным щелчком открываем созданный файл и увидим чистый белый лист, на котором и будем создавать нашу страничку. Важно задать свойства вашей странички. Для этого нужно зайти в меню Modify и выбрать пункт Page Properties. Откроется окно, в котором можно определить:
Для начала работы со страничкой нам нужно представить структуру этой странички при помощи модульной сетки.
Простая модульная сетка – это просто формат экрана. Самые первые странички так и выглядели. Текст с заголовками и картинками, просто сверху вниз. Однако со временем мощным средством построения модульной сетки стали таблицы (и фреймы). При разбивке страницы на модули используют шаблоны с табличной сеткой, в ячейки которой грузится текстовая или графическая информация. Блочное устройство страницы должно определять:
Размеры отдельных блоков зависят от общей таблицы и их предназначения. Часто в качестве модульного размера для ширины колонки употребляются размеры близкие к стандартным размерам рекламных блоков – баннеров.
Наиболее часто употребляемые стандарты баннеров – 468х60, 88х31, 125х125 (западный стандарт, при котором высота может изменяться), 100х100 (стандарт, используемый в российской баннерной системе ВВ2).
Обычно вверху страницы находится логотип. Часто логотип ставят только на начальной странице, а на последующих – названия рубрик с набором графики.
Ниже логотипа можно поместить блок горизонтальной навигации (иногда блок горизонтальной навигации размещают внизу страницы). Распространено применение левого вертикального навигационного блока.
Существуют и сайты с расширенным количеством навигационных панелей (3-4). Это связано в основном с обилием тем и рубрик, а так же стремлением сократить количество переходов пользователя от текущей страницы к искомой.
Современные серверные технологии позволяют облегчить создание крупных сайтов и последующее обновление информации на них. Используя шаблон модульной сетки, можно размещать информацию прямо в блок по технологии SSI, подгружая файлы. Информационная начинка блока может храниться в отдельном файле, базе данных, на другом сервере или динамически формируется с помощью программы, выполняемой на сервере.
Ниже показана одна из возможных модульных сеток домашней странички, которая разбита на несколько блоков, каждый из которых имеет свое наполнение:
Для создания такой модульной сетки с помощью панели объектов вставьте таблицу с 3 рядами, 2 колонками. При вставке укажите в диалоговом окне ширину таблицы – 100% и нулевые отступы – CellPad, CellSpace и бордюр – Border (эти параметры можно будет изменить с помощью панели свойств объектов). После нажатия на OK, на лист будет вставлена пустая таблица, которую можно заполнять.
Выберите первую ячейку и вставьте, с помощью панели объектов, картинку – логотип. После этого выделите самую крайнюю колонку слева – подводите курсор к верхней границе колонки, дождитесь появления стрелочки вниз и нажмите клавишу мыши. 
Можно выделить ячейки колонки по отдельности, нажав кнопку Ctrl и не отпуская ее кликать по ячейкам.
После выделения колонки укажите ее ширину (Width) – 247 Pix, как определено в модульной сетке. Для этого используйте панель свойств окошко – W (обведено). Проделайте ту же операцию со второй колонкой, только теперь укажите ширину в процентах 100%.
Перейдем к рядам. Укажите любую из ячеек верхнего ряда.
При этом в левом нижнем углу окна DreamWeaver появится список <body><table><tr><td> (на схеме). В списке находятся все теги HTML, которые являются более «старшими» по отношению к текущему тегу, показывая иерархию документа. Просто нажав на <tr>, мы сразу выделяем ряд.
Зададим нашему выделенному верхнему ряду фон. Для этого снова воспользуемся панелью свойств.
Там есть пункт Bg (background). Нажав на значок папки, можно указать файл, который будет фоном. Например, top_back.gif. Кроме того, то же самое можно сделать, нажав на перекрестье рядом и потянув стрелочку указать на панели менеджера сайта нужный файл. Если Вы все сделали верно, верхний ряд будет залит нужным фоном.
Теперь закрасим нижний ряд. Для этого выделите его и выберите пункт Bg (не тот где выбирали картинку, а другой, чуть ниже). При нажатии на квадратик со стрелочкой Вы увидите меню выбора цветов. Появившимся курсором-пипеткой укажите нужный Вам цвет, после чего ваш нижний ряд будет закрашен.
При необходимости ячейки таблицы можно объединять и разделять на несколько ячеек. Например, сделаем следующее – выделим две ячейки левого столбца, объединим их с помощью пункта меню свойств (показан стрелкой на схеме).
Ну и, наконец – готовые ячейки можно копировать и вставлять, куда Вам хочется. Например, вот так: выделяем нужный ряд или колонку, копируем ее в буфер (Ctrl + Insert), а затем вставляем ее (Shift + Insert). То, что Вы скопировали, будет вставлено выше (если это строка) или левее (если это столбец) текущей ячейки.
Если Вы создали ячейку таблицы и задали ее размеры, но не поместили туда содержимое (либо оно не занимает всю ячейку), то некоторые браузеры могут не выдержать размеры ячейки, а иногда и вовсе «схлопывают» ее. Вставка в ячейку неразрывных пробелов – позволяет частично ликвидировать указанную проблему, но для ее кардинального решения необходимы однопиксельные распорки.
Рассмотрим модульную сетку, изображенную ранее на схеме в настоящем разделе. Предположим, что логотип и подменю (submenu) полностью занимают площади соответствующих блоков, а меню (menu), содержание странички (text), «подвал» – баннер, контактная информация и т.д. (copyright) могут не занимать предназначенные для них площади. В нашу задачу входит достижение жесткого расположения логотипа и подменю. Кроме того, нужно добиться корректного расположения элементов menu, text и copyright вне зависимости от выбранного разрешения (плавающий правый край). Слегка изменим таблицу, показанную ранее на схеме с модульной сеткой. Добавим еще один ряд снизу (или сверху). Этот ряд мы заполним однопиксельными распорками.
Создадим в любом графическом редакторе прозрачную картинку – файл формата .gif размером 1х1 пиксель (например, spacer.gif в FireWorks) и вставим ее в пустые ячейки нового ряда таблицы. Благодаря такой «распорке» таблицы будут выглядеть так, как задумано. Как только Вы поставите распорки внутрь всех ячеек ряда они (ячейки) тут же сожмутся по высоте до 1 пикселя. Теперь зададим распоркам нужное значение ширины. Выделим первую точку (в левой ячейке). Проще всего это сделать, переведя курсор в нужную ячейку из соседней «нормальной» ячейки при помощи курсорных клавиш. Левый столбец нашей модульной сетки имеет ширину 247pix, поэтому и для распорки установим такую же ширину. Для распорки в правом столбце (шириной в 100%) укажем ширину в 300pix. Теперь распорки не дадут при любом размере окна браузера и количестве текста в столбцах сжать левый столбец менее 247pix и правый менее 300 пикселей.
Однопиксельные картинки можно использовать не только в качестве распорок. С их помощью можно с точностью до пикселя регулировать высоту и ширину ячеек. Для этого прозрачные однопиксельные картинки помещают в каждую ячейку строки или столбца, размер которых регулируют. Из закрашенных однопиксельных картинок можно создавать горизонтальные и вертикальные линии на страничках, а также области прямоугольной формы, залитые одним цветом (в качестве фона таблиц, ячеек и целых страниц).
Принципы создания и применения стилей CSS (Cascading Style Sheets) рассматривались нами ранее.
Меню настройки (схема) содержит подразделы:
Начнем наполнять созданную ранее страничку содержимым. Для начала создадим заголовок страницы, написав его в самом верху над таблицей – модульной сеткой.
Стиль заголовка
Определим стиль заголовка. Для этого вызовите меню CSS-стилей в DreamWeaver и создайте отдельный стиль с типом класс, назовите его .title и укажите имя файла (например, school.css), в котором будет находиться этот стиль (и все остальные стили для сайта).
Теперь установите параметры стиля. В закладке Type задаем, например: Font = Verdna, Arial, Hevletica, sans-serif; Size = 16 px; Weight = bold; Color = #6699CC. В закладке Block добавим: Text Align = center и Letter Spacing = 4px.
Осталось «применить» стиль к нашему заголовку – выделите заголовок и укажите на стиль .title в окне CSS стилей. Результат проверьте в браузере, так как DreamWeaver не отображает все эффекты.
Стиль текста
Добавьте на страничку текст (в соответствующий блок). Можно скопировать уже готовый текст, через буфер обмена, например, из Word.
Текст состоит из абзацев (параграфов). Поэтому для изменения его вида настроим CSS-стиль для тега <p>. В отличие от создания нового класса для заголовка, теперь будем переопределять уже существующий стиль абзаца (<p>).
Для этого при создании стиля, укажем пункт Redefine HTML Tag, в поле Name выберем тег – <p> и в разделе Define In место сохранения – в том же файле, что и ранее заголовок (school.css).
Установим параметры стиля. В закладке Type задаем: Font = Arial, Hevletica, sans-serif; Size = 12px; Color = #009966. В закладке Box зададим расстояние между абзацами – укажем для свойств padding и margin во всех ячейках значение = 1px.
В отличие от класса (для заголовка) стиль абзаца будет автоматически применен ко всем абзацам. Если некоторые абзацы должны отличаться от остальных, например, их необходимо выровнять по ширине, то можно дополнительно создать стиль-класс (назвав, его, например .just), установив для этого стиля выравнивание в пункте Block – Text Align = Justify. Чтобы применить этот стиль к абзацу, надо выделить абзац и указать стиль .just в окне CSS стилей.
Стиль меню
Впишите в блок menu модульной сетки пункты меню, т.е. текст, состоящий из названий основных разделов и ссылок на них. Для создания ссылки выделите пункт меню и укажите в панели свойств Link – необходимую ссылку на файл или адрес в Интернет, как показано на схеме.
Если файлов пока реально на диске нет, то можно просто вписать нужные нам названия, а файлы создать позже. В свойствах ячейки измените цвет закраски, например на темно-зеленый. Теперь создадим стиль меню типа класс, как было описано выше, дав ему имя, например .menn. Место хранения укажем то же, что и для других стилей, т.е. в файле school.css. В разделе Type установим шрифт=Arial, размер=10px и Decoration=none. В разделе Box определим все параметры отступов (Padding, Margin) равными 1. Теперь выделим пункты меню и укажем стиль .menn в окне CSS стилей.
Чтобы внешний вид ссылок – пунктов меню, отличался от установленных по умолчанию в браузере, определим псевдо-классы: a:link и a:hover. Для этого при создании стиля выберем Use CSS Selector и название псевдокласса в поле Name.
Для ссылки в стандартном состоянии – a:link зададим белый цвет текста, а для a:hover (т.е. при наведении на ссылку мышки) цвет текста – желтый и Decoration – underline.
В браузере будут видны белые пункты меню на темно-зеленом фоне, которые при наведении станут желтыми и появится подчеркивание.
Обновлено 20.05.2004