Источник: http://www.homepc.ru/
Евгений Яворских
Человеку всегда было свойственно
желание выделиться из массы подобных себе. Тяга к
самореализации подарила человечеству литературу и живопись,
науку и технику, войны и разрушения. Обыватель находил
утешение в праздной болтовне и сплетнях, домашнем хоровом
пении и, нередко, графоманстве. Однако до появления Интернета
плоды творчества одиночек так и оставались неизвестны широким
массам. Теперь же стало возможно то, что ранее казалось
несбыточным: миллионы смогут узнать об имярек из содержания
так называемых домашних страниц.
И все бы хорошо, да
отсутствие элементарных познаний о принципах построения своего
сайта останавливает разгоряченные головы, а значит, отодвигает
на неопределенный срок вожделенную «мировую известность в
узких кругах». Конечно, можно выделить из бюджета определенную
сумму1 на
оплату услуг веб-дизайнера, но, согласитесь, в этом случае
радость от обладания своим сетевым ресурсом будет несколько
омрачена…
Почему-то сложилось мнение, что создание веб-ресурса, будь то корпоративный сайт или простой «хомячок»2, — удел избранных, владеющих неким таинством заумного программирования. Это не так. Разработчики программного обеспечения не сидели сложа руки и придумали массу доступных приложений, а с их помощью самый обычный пользователь может создать вполне приличный сайт.
Профи от веб-дизайна при каждом удобном случае рады лягнуть визуальные редакторы, в которых создаются HTML-страницы. Но на то они и профи — им за это деньги платят. Наша задача состоит в освоении основных приемов создания домашней страницы при помощи так называемых WYSIWYG3-редакторов, незаменимого подспорья для новичков в области сайтостроения.
Основа основ
Для начала попробуем зайти на любой сайт, например compulenta.ru, и посмотреть на то, что откроется взору: красивые картинки и ровные столбцы текста, рекламные баннеры (как же без них?) и прочие штуковины радуют глаз. Теперь немного омрачим себе настроение: щелкнем в поле окна со страницей правой кнопкой мыши и выберем команду «Просмотр HTML-кода». Откроется окно «Блокнота», в котором отображена какая-то тарабарщина (рис. 1). Однако именно эта «шифровка» и есть основа любого Интернет-ресурса, и представляет она собой не что иное, как HTML-код, с чьей помощью браузер, как принято называть программы для просмотра HTML-страничек4, показывает нам тот или иной объект: текст, графику и прочее. Непонятно? Хорошо, попробую сказать так: Интернет-страница в готовом виде в реальной жизни не существует, на самом деле, такая страничка — всего лишь текстовый файл, размеченный определенным образом, чтобы различные браузеры в любых операционных системах смогли отобразить нам всю информацию, заложенную в такой файл автором ресурса.
Еще одно заблуждение, бытующее в среде начинающих: HTML — язык программирования. Нет, аббревиатура HTML расшифровывается как Hypertext Markup Language — да, язык, но не программирования, а гипертекстовой разметки. Дело в том, что до сих пор в мире нет официального стандарта оформления WWW-документов, и HTML как раз предназначен был заменить его, чтобы пользователи и IBM PC-совместимых машин, и те, кто предпочитает Mac, видели страницы так, как это изначально задумывалось разработчиками сайтов.
Именно посредством написания HTML-кода и создается любая5 веб-страница. В первом приближении такой код можно написать и в обычном системном «Блокноте», а затем сохранить текстовый файл с расширением .HTM или .HTML. Но дело это крайне нудное и требующее хорошего владения языком гипертекстовой разметки. Большинство профессионалов используют для создания веб-ресурсов текстовые HTML-редакторы, в которых заложено множество готовых решений на все случаи жизни. На рис. 2 показано окно популярного текстового HTML-редактора Arachnophilia 5.1 (http://vps.arachnoid.com/ arachnophilia) с фрагментом кода. Однако то, что создает разработчик в окне текстового редактора, будет представлять собой такие же фрагменты HTML-кода, как и те, что автоматически генерируются визуальными редакторами. В них ввод и форматирование текста осуществляется, как и в обычном текстовом процессоре, импортируемая графика показывается как есть — наглядно и удобно. Правда, HTML-код, генерируемый такими приложениями, часто бывает далек от идеала (излишне громоздок), за что эти программы и не любят снобы-профессионалы.
Наибольшую популярность получили два редактора: Microsoft FrontPage (существует как «в диком виде», так и в составе пакета Microsoft Office 2000 и XP) и Macromedia Dreamweaver MX (http://www.macromedia.com/). На шести журнальных полосах невозможно разместить даже самый краткий самоучитель работы с этими программами, а уж тем более некий «Настоящий самоучитель HTML для «чайников». Об этом пишутся толстые книги, которые будет нелишне купить и изучить, а у нас задача: познакомить начинающих с основными приемами создания и верстки HTML-страниц с учетом применения WYSIWYG-редакторов.
С чего начать?
Наверное, с похода в книжный магазин, где нам предстоит купить книги с описанием работы этих редакторов и основ HTML. Конечно, можно обойтись и сетевыми ресурсами, и некоторые из них приведены во врезке.
Прежде чем открыть HTML-редактор и приступить к мучительным размышлениям над дизайном своего проекта, просто попутешествуете по Сети, неторопливо просматривая массу «хомяков», созданных до вас. Поверьте, вам встретятся очень неплохие страницы, красиво оформленные и достойные служить образцом для подражания (но не плагиата!). После такого серфинга у вас сложится некоторое представление о необходимой компоновке страниц: расположение и виды навигационного меню, текстовой и графической составляющих сайта.
Создайте на диске папку (например, с именем homepage), где до поры до времени будет храниться проект, а внутри ее — еще одну папку для графики, используемой на вашем сайте — каша из HTML и графических файлов вовсе ни к чему.
И, наконец, откройте выбранный вами редактор: Microsoft FrontPage (рис. 3) или Macromedia Dreamweaver (рис. 4). По моему скромному разумению, продукт от Macromedia подходит больше, нежели FrontPage, благодаря своим возможностям. Хотя у последнего более «дружественный» интерфейс6.
Настройки HTML-редакторов
Мы рассмотрим лишь самые важные программные настройки FrontPage и Macromedia Dreamweaver MX, которые заметно облегчают нашу работу. Они будут сводиться к тому, чтобы оба редактора правильно отображали кириллицу в создаваемых страницах. Дело в том, что по умолчанию эти программы генерируют HTML-код, изначально «заточенный» под латиницу, в кодировке Windows-1252. Нам же понадобится Windows-1251.
Откроем «фронтовой» редактор и в поле страницы щелкнем правой кнопкой, после чего обратимся к команде Page Properties контекстного меню и в одноименном окне на вкладке Language в списке Save the document выберем параметр Cyrillic (рис. 5). Увы, такие манипуляции придется делать для каждой страницы. Для полного счастья можно снять галочку против команды View Bar меню View.
Теперь научим русскому языку Dreamweaver: в меню Edit — Preferences сначала заглянем в раздел Category — Fonts, где выберем «великий и могучий» в списке Font Settings — Cyrillic (рис. 6). Шрифт по умолчанию выбирается в списке Proportional Font. Затем проследуем маршрутом Category — New Document, где в списке Default Encoding зададим «родную» кодировку Cyrillic (Windows-1251) — рис. 7. Теперь эти параметры станут работать по умолчанию.
И учтите: при первом запуске Dreamweaver предлагает выбрать интерфейс, наиболее приятный вашему глазу. Советую выбрать вариант Dreamweaver 4 Workspace — «классический» интерфейс предыдущей, четвертой версии: все под рукой, и ничего лишнего. В любом случае, изменить «морду лица» можно в упомянутом разделе: Category — General, кнопка Change Workspace (рис. 8).
Кто меня научит? Мы уже говорили о необходимости
самостоятельного обучения основам веб-дизайна с помощью
книг. Книги, конечно же, великая вещь, но и изучение
чужих ошибок никому еще не повредило. Рунет весьма богат
толковыми ресурсами по этой тематике. |
1 Причем довольно ощутимую.
2 Home Page —
домашняя страница.
3 What You See Is What You
Get — что видишь, то и получаешь.
4 Browse —
просматривать.
5 Ну, почти любая, кроме
ресурсов, что созданы при помощи других
языков.
6 FrontPage
(как и MSWord в качестве редактора HTML) отличается особой
любовью к введению лишних тегов, сильно увеличивающих объем
странички, поэтому личное мнение редактора: постараться обойти
его стороной. — Прим. ред.