В-третьих, таблица должна быть достаточно гибкой, чтобы в нее можно было поместить широкий диапазон непредусмотренных элементов. Вам предстоит создать свою таблицу, исходя из вышеозначенных предпосылок.
Особенности WWW и собственно языка HTML приводят к тому, что вид вашей страницы зависит от настроек конкретного компьютера пользователя. Что же касается макета, то здесь вы ограничены по большей части экранным разрешением (то есть количеством точек, которые способен отображать среднестатистический монитор). Задача создания макета наполовину состоит из решения задачи, как разместить все элементы на ограниченном поле страницы так, чтобы полученный результат выглядел гармонично и аккуратно.
После того как создан макет и подготовлены материалы, можно заняться дизайном. Основные дав направления в дизайне это выбор цветовой гаммы и шрифтов. Начните с того, что разработайте цветовую гамму для вашего сайта. В работе обязательно учитывайте направленность вашего сайта, его задачи, контролируйте образ, который возникает у посетителя вашего ресурса, поскольку цветовая гамма имеет не только эстетическое, но и глубокое психическое влияние на человека. Крайне желательно иметь единую цветовую гамму по всему сайту, по крайней мере, если вы нарушаете это единство, то должны четко осознавать в каких целях вы привносите диссонанс на свой ресурс. Очевидно, что дизайн ресурса (аналогично единообразию макета и как следствие этого), должен быть выдержан в едином стиле для обеспечения комфорта пользователя и создания цельного впечатления от узла, как от неделимого источника информации (развлечений, покупок etc.), а не как набора отдельно взятых страниц. И одним из механизмов создания единого облика является цветовая гамма. Стоит обратить пристальное внимание на общность шрифтового и графического оформления. Используйте единый шрифтовой тег для всех заголовков ресурса, для близких по смыслу элементов и пр. Очень важная область дизайна - типографика - шрифтовое решение композиции. К сожалению, в отличие от печатных изданий, современные веб-возможности ограничены двумя группами очень похожих и не очень красивых шрифтов: рублеными (Arial, Verdana etc.) и антиквами во главе с Times New Roman. Все остальные шрифты могут оказаться не установленными на компьютере пользователя, и их использование регулярно приводит к невозможности посетителем прочесть ваше послание, - вместо текста будут показаны жуткие закорючки. Если же вам необходимо написать текст каким-нибудь особенным шрифтом, то используйте gif изображение для всего текста (например, для заголовков) или для каждой буквы в отдельности, что гораздо экономичнее, но чрезвычайно трудоемко (так, например, сделан сайт журнала "КАК"). Тем не менее, как бы вы не ухищрялись, использование текста в виде картинок приведет к многократному увеличению объема страницы, что крайне нежелательно, учитывая современные средства связи и загрузку интернет-каналов. Поэтому стоит подумать о том, чтобы суметь выразить представляемые вами образы существующими средствами, не используя громоздкие картинки.
Перейдем к созданию сайта. Как было сказано выше, структура сайта представляет собой совокупность отдельных страниц, где каждая страница описывается одним персональным файлом-сборкой и некоторым количеством дополнительных файлов-включений. То есть, для каждой страницы у вас должен быть один общий файл (Htm, Html, Shtml, Dhtml, Xml и т.д.), который описывает структуру страницы, а к нему прилагаются картинки, возможно, программные модули, дополнительные модули, таблицы стилей и прочее, что может понадобиться на этой странице. Очень важно - на каждую страницу сайта должен быть создан свой, отдельный и единственный файл-сборка, - именно этот файл и будет выдаваться сервером в ответ на запрос от браузера, именно на него вы будете ставить ссылки в навигации по сайту.
Для того чтобы web-мастер чувствовал себя максимально комфортно при разработке нового проекта, помимо рабочего места и персонального компьютера ему необходим определенный набор программного обеспечения, базовый инструментарий, без которого создателю web-сайта просто не обойтись.
Сайт в Интернете практически всегда располагается на удаленном сервере, который может работать под одной из версий Unix или под NT, причем первый вариант встречается значительно чаще. Если ваш сервер расположен на Unix-сервере, то следует быть очень внимательным с названиями файлов и ссылками на них, поскольку Unix различает прописные и заглавные буквы и воспринимает их, как разные, следовательно, ссылка на страницу Beretta.html, записанная как beretta.html, будет неработоспособной.
Существует два основных варианта создания HTML-страниц. Первый - это работа с техническими редакторами, такими как Home Site, Hot Dog, Ultra Pad и др. (при необходимости можно использовать любой текстовый редактор, например Notepad, но по ряду причин удобнее использовать специализированные).
Элементы на странице связаны тегами - операторами языка разметки страниц HTML. В отличие от других языков описания страниц, HTML чрезвычайно прост. Между собой отдельные страницы узла связаны гиперссылками, которые задаются специальными тегами. С помощью гиперссылок можно связать не только любые две страницы, но и вообще два произвольных объекта, так, чтобы при щелчке на первом, браузер переходил на второй. Именно таким образом организуется оглавление, если оно расположено на одной странице с текстом.
Документы, размеченные при помощи этого HTML-языка визуализируются браузерами конечных пользователей в большинстве случаев одинаково , благодаря тому, что "понимают" и правильно обрабатывают структурные элементы HTML. Исходный код представляет собой текст, между строк которого вставляются элементы разметки, посетителю страницы эти элементы не видны, а виден результат их воздействия на документ.
Элементы разметки состоят из заключённых в угловые скобки (< и >) дескрипторов - тэгов(tags) и их атрибутов. Совокупность открывающего (< >) и закрывающего (< / >) дескрипторов - есть контейнер. Элементы HTML подразделяются на структурные - которые организуют текст и на форматирующие - которые задают его стиль.
Файл HTML - это обычный текстовый файл с расширением htm или html, содержащий текст страницы, который мы видим в браузере и некоторые управляющие записи - теги.
Тэг - оформленная единица HTML-кода. Например, <HEAD>, <FONT ...>, <BODY>, <HTML> и так далее. Тэги бывают начальными (открывающими) и конечными (закрывающими, начинающимися со знака "/"). За каждым открывающим тегом обычно следует закрывающий.
Например, вышеуказанным тэгам соответствуют закрывающие тэги </HEAD>>, <</FONT>, </BODY>, </HTML>. Теги могут указывать браузеру, каким шрифтом отображать текст, вставить в страницу картинку, гиперссылку, указывать расположение текста и т.д. Теги заключены в треугольные скобки. Заглавные буквы в теге или строчные, значения не имеет.
Основные этапы процесса создания документа HTML ручками, не прибегая к специализированным приложениям:
Набор содержимого в любом из текстовых редакторов (например) и сохранение обычного текстового файла.
Логическое и физическое форматирование текста (разбивка на абзацы, блоки, заголовки и пр., внешнее их оформление) при помощи тэгов и сохранение текстового файла с расширением .htm или .html
Организация переходов по гиперссылкам документа при помощи элемента < А > - основного связующего элемента языка HTML.
Внедрение в документ необходимых объектов: рисунков, таблиц, видео клипов, аудио файлов, апплетов Java, скриптов и т.д. и т.п. опять же при помощи тэгов языка HTML.
Для того, чтобы в последствии изменить любой из созданных файлов, достаточно открыть его при помощи того же Notepad откорректировать и сохранить изменения. Браузер Internet Explorer позволяет делать прямо в нем самом, для этого необходимо в меню Вид выбрать просмотр В виде HTML, или кликнуть правой кнопкой мыши и выбрать тот же пункт меню. Для того, чтобы увидеть изменения в документе достаточно в меню Вид выбрать обновить, либо кликнуть в панели управления браузера на значке
В таких редакторах вы самостоятельно пишете код, видя перед собой именно текстовую страничку с тегами. Конечно, редактор поможет вам в написании тегов, проверит за вами строгость кода, даст посмотреть, ваше творение в окне браузера, однако основная работа будет состоять именно из скрупулезного написания, проверки и подгонки тегов. Второй вариант - это WYSIWYG редакторы, с помощью которых вы создаете визуальную картинку вашей страницы, то есть, имеете дело непосредственно с блоками информации, которые произвольно располагаете на странице, как это делается, например, в Word или Page Maker. Самым известным в этой области редактором является, пожалуй, Front Page производства Microsoft, а самым лучшим (по отзывам многих дизайнеров) - Macromedia Dream Weaver. Принципиальная разница между этими двумя методами только в подходе: вы либо "делаете" страницу, либо "программируете" ее. Соответственно, дизайнерские вещи, наверное, проще делать в WYSIWYG редакторах, тогда как скоростная верстка - это удел Home Site и подобных ему. Отсюда вытекают и особенности той или иной верстки: программирование всегда более точная, более структурированная работа, чем визуальное редактирование. Кроме двух вышеописанных способов для создания HTML-страницы можно использовать множество "посторонних" программ, которые умеют сохранять свои данные в этом формате.
Ниже предложен полный список средств, которыми вы должны располагать перед тем, как возьметесь за разработку своего первого Интернет-проекта. Данные программы рассчитаны на использование под управлением Microsoft Windows 9X. Итак, для полноценной работы web-дизайнеру необходимы:
Среда разработчика документов HTML — так называемый WYSIWYG-peдактор, рекомендуется программа Microsoft FrontPage версии 98 или 2000, либо FrontPage Express.