Журнал "Мир ПК", #03, 2003 год // Издательство "Открытые системы" (www.osp.ru)
Постоянный адрес статьи: http://www.osp.ru/pcworld/2003/03/092.htm

Уроки Web-мастерства


12.03.2003

Урок 2. Создаем рабочее место Web-мастера

На этом уроке мы поговорим о программном обеспечении, без которого при создании и поддержке сайта не обойтись. Обсудим также полезные программы, делающие работу более удобной и наглядной. Особое внимание уделим вопросам установки этого ПО* .

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

Итак, что же входит в строительный или, точнее, ╚сайтостроительный╩ арсенал Web-мастера?

Необходимые программы:
Вспомогательные программы:

А теперь подробнее...

Необходимые программы

Html-редактор

Что такое html-редактор? Это программа, помогающая Web-мастеру писать html-коды (html-теги) и создавать html-страницы. Такие программы позволяют генерировать код при нажатии на определенные кнопки или при выборе требуемых опций в меню, освобождая пользователя от огромной рутинной работы по написанию кодов, их многочисленных атрибутов и значений.

Но помните, что редакторы не избавят вас от необходимости изучать язык html, а лишь ускорят и упростят дело.

Macromedia Home Site 5

Именно его выбираем в качестве рабочего редактора.

Разработчик ≈ Macromedia Inc. (http://www.macromedia.com/). Все предыдущие версии Home Site разрабатывала компания Allaire (http://www.allaire.com).

Напомню, что Home Site 5 ≈ это профессиональный кодовый редактор, и в процессе создания страниц вы можете и писать код ╚вручную╩, и одновременно использовать возможности редактора:

Иными словами, этот редактор создает ╚чистый╩ html-код. Он потребует от вас знания языка разметки.

Практическая работа. Установка бесплатной пробной (30-дневной) версии html-редактора Macromedia Home Site 5

Прежде всего обратите внимание на требования к аппаратному и программному обеспечению компьютера: процессор Intel Pentium II (и выше); операционная система Microsoft Windows 98/2000/NT 4.0/Me/XP; Web-браузер Internet Explorer или Netscape Navigator (версия 4.5 и выше); разрешение экрана 800Ё600, не менее 256 цветов (рекомендуется high color, 16 бит); 64 Мбайт оперативной памяти (рекомендуется 128 Мбайт); 25 Мбайт свободного пространства на жестком диске.

Поскольку загружать Home Site 5 (Trial Version) мы будем с Web-сайта компании Macromedia, ваш компьютер должен быть подключен к Интернету.

Теперь займемся собственно установкой.

  1. Предварительно на диске С: создаем папку Homesite5.
  2. Входим в Интернет. Набираем адрес http://www.macromedia.com/software/ homesite/trial/.
  3. Мы попали на страницу загрузки бесплатной пробной версии (Free Trial Download). Выбираем версию продукта: Homesite 5 Windows English. (Примечание: предлагаемая пробная версия устанавливается на операционные системы Windows и имеет английский интерфейс.)
  4. Нажимаем кнопку Go to Trial Download, а затем - CONTINUE (NO ID), если у вас нет идентификационного номера Macromedia ID. На следующей странице вам будет предложено заполнить довольно обширную форму - что ж, придется на это пойти.
  5. Наконец-то мы добрались до нужной страницы. Размер загружаемого дистрибутива - 16,40 Mбайт. Нажимаем Try.
  6. В окне Проводника Windows указываем папку Homesite5 (которую мы предварительно создали в п.1).
  7. Запускаем процесс загрузки EXE-файла программы (HomeSite_5_Trial_Installer.exe).
  8. Теперь мы имеем дистрибутив 30-дневной пробной версии и можем начать установку двойным щелчком мыши по файлу Home Site_5_Trial_Installer.exe.
  9. Установка этой программы практически ничем не отличается от установки других Windows-приложений. Далее, следуя инструкциям программы, производим установку редактора (нажимаем несколько раз кнопку Next, и по окончании установки мастер установки предложит перезагрузить компьютер, что и надо сделать).
  10. По завершении установки в Главное меню Windows добавляется еще один раздел - Home Site 5.
  11. Для запуска достаточно выбрать Start∙Programs∙ Macromedia Home Site 5∙Home Site 5.
Рис. 1. Интерфейс программы Home Site 5

Итак, перед вами программа Macromedia Home Site 5. Предлагаю по достоинству оценить ее удобный интерфейс (рис. 1):

Графический редактор

Adobe Photoshop

Лучший на сегодняшний день профессиональный графический редактор растровой графики ≈ Adobe Photoshop 7 (последняя версия ко времени написания статьи), разработанный компанией Adobe Systems (http://www.adobe.com). Выпускаются версии для ОС Windows и Macintosh.

Adobe Photoshop 7 используется не только для создания, редактирования и подготовки изображений для размещения на Web-страницах, но и в полиграфии. Как уже говорилось в предыдущем уроке (см. ╚Мир ПК╩, ╧2/03, c. 84), альтернатив ему практически нет. Но сразу хочу предупредить: программа непростая, имеет множество опций и настроек и требует серьезного изучения.

Вместе с Adobe Photoshop 7 поставляется программа Adobe ImageReady 7, в которой можно найти полезные функции для Web-дизайна, например для создания анимированных изображений, карт-ссылок, функции rollover с автоматической генерацией html- и JavaScript кода.

Практическая работа. Установка бесплатной пробной (30-дневной) версии Adobe Photoshop 7

Для загрузки и установки редактора делаем следующее.

  1. Предварительно на диске С: создаем папку Photoshop 7.
  2. На странице с полным перечнем продуктов Adobe, доступных для загрузки и приобретения (http://www.adobe.com/support/ downloads/main.html), находим Photoshop и выбираем версию для ОС Windows.
  3. В разделе Tryouts (пробные версии) нажимаем на ссылку Adobe Photoshop 7.0 tryout. Обратите внимание на объем предлагаемого для загрузки файла - 162,4 Мбайт, прямо скажем, немаленький .
  4. Чтобы установить пробную версию, вам необходимо получить Adobe ID. Для этого нужно зарегистрироваться - процедура довольно утомительная, так что наберитесь терпения.

Шаг 1. Выбираете в выпадающем списке страну проживания (например, Russia) и нажимаете на кнопку Register.

Шаг 2. Заполняете форму (поля, отмеченные знаком *, для заполнения обязательны):

Шаг 3. На странице Tryouts вы увидите данные, которые уже ввели (имя, фамилия и адрес электронной почты), и продолжение формы. Не пугайтесь ≈ единственным обязательным полем является ZIP/ postal code (почтовый индекс). Нажимайте на кнопку Register.

Вот мы и оказались на нужной странице. Здесь прежде всего обратите внимание на требования к аппаратному и программному обеспечению компьютера: процессор Pentium III или 4; ОС Windows 98/Ме/ХР/2000, Windows NT Service Pack 6; 128 Мбайт оперативной памяти (рекомендуется 192 Мбайт); 280 Мбайт свободного дискового пространства для установки видеоадаптера с 16-битовой глубиной цвета; современный дисковод CD-ROM.

  1. Загружаем дистрибутив Photoshop, указав созданную заранее папку.
  2. По завершении загрузки запускаем процесс инсталляции двойным щелчком мыши по файлу C:\Photoshop7\AdobePS7Tryout.exe.
  3. Далее, следуя инструкциям программы, производим установку редактора, которая практически ничем не отличается от установки других Windows-приложений.
  4. По завершении установки в Главное меню Windows добавлены Adobe Photoshop7.х и Adobe ImageReady7.х.

Программы просмотра ≈ браузеры

На первом уроке мы дали краткий обзор современных популярных программ просмотра Internet Explorer, Netscape Navigator, Opera. Надо сказать, что в настоящий момент подавляющее число пользователей Интернета (более 90%) предпочитают Internet Explorer (IE), который входит в состав ОС Windows (95, 98, Me, NT, 2000, XP). Для наших занятий подойдет любая версия IE, начиная с 4.0.

В дальнейшем для тестирования Web-страниц вам потребуется установить как минимум еще два относительно популярных браузера ≈ Netscape Navigator и Opera.

Web-сервер

Для отладки страниц вам потребуется установить Web-сервер.

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

Динамичная страница предварительно обрабатывается сервером ≈ выполняется встроенный в нее код, и только после этого готовый результат высылается клиенту. В настоящий момент практически любая Web-страница ≈ динамичная, т. е. создается с использованием серверных технологий. Например, технология SSI (Server Side Include) ≈ включения на стороне сервера ≈ была первой, позволяющей осуществлять предварительную обработку кода страницы на сервере. Более подробно речь об этой технологии пойдет на шестом уроке.

На первом же уроке были представлены популярные Web-серверы ≈ Apache и IIS. По статистике около 70% сайтов используют в качестве программного обеспечения Web-серверы Apache и примерно 25% ≈ IIS. Apache рекомендуется устанавливать на операционную систему Unix, а IIS ≈ на Windows (NT/2000 Server).

Apache

Мы с вами установим Apache-сервер. Наш сервер будет служить только для отладки локального сайта, поэтому установим его под операционную систему Windows. Для этого с сайта http://www.apache.org/ мы загрузим дистрибутив Apache для Windows (причем абсолютно бесплатно).

Практическая работа. Установка Apache под Windows.

  1. Предварительно на диске С: создаем папку Apache.
  2. На странице http://www.apache.org/dist/httpd/ binaries/win32/ предлагаются для загрузки дистрибутивы последних версий Apache-сервера. Текущая версия (ко времени написания статьи) - Apache 1.3.27 (файл apache_1.3.27-win32-x86-no_src.exe). Ее мы и загрузим в папку C:\Apache. (К тому моменту, когда вы будете читать этот урок, могут появиться и более свежие релизы.)
  3. Начинаем процесс установки Apache (двойным щелчком мыши по файлу C:\ Apache\apache_1.3.27-win32-x86-no_src.exe) - запускаем мастер установки Apache.
  4. Шаг 1. - в окне приглашения к установке сообщается номер версии Apache.
  5. Шаг 2. - выберите подтверждение, что вы принимаете лицензионное соглашение (accept).
  6. Шаг 3. - перед установкой предлагается ознакомиться с общей информацией по Apache версий 1.3 (и выше) под ОС Windows.
  7. Шаг 4. - на этом этапе вам предложат ввести название домена, сервера и адрес электронной почты администратора (рис. 2). Для нас с вами значения этих полей непринципиальны - ведь мы устанавливаем сервер для локальной отладки динамических страниц сайта. Потому вводим любые данные (например, я ввела в качестве имени домена и имени сервера - web_lessons, адрес электронной почты - admin@domain.ru. Если хотите, можете заменить этот адрес на свой - см. рис. 2). В данном случае поля необходимо заполнить для того, чтобы был создан работоспособный конфигурационный файл для запуска Apache.
Рис. 2. Установка Apache: ввод информации о сервере

В дальнейшем вы всегда сможете изменить эти значения в настройках Web-сервера.

Мастер установки спросит у вас, каким образом ставить Apache ≈ как сервис (рекомендуется ≈ Run as a service... ≈ Recommended) или как обычное Windows-приложение, которое необходимо запускать вручную (Run when started manually...). Следуя рекомендации, выбираем первый вариант.

  1. Шаг 5. Выбираем тип установки - полную (Complete).
  2. Шаг 6. Указываем папку, куда будем устанавливать Apache. По умолчанию предлагается установить его в С:\Program Files\Apache Group\Apache.
  3. Шаг 7. По завершении установки в меню Windows будет добавлен раздел Apache HTTP Server (рис. 3).
Рис. 3. Раздел Apache в Главном меню Windows

Тестирование Web-сервера

Проверим, корректно ли прошла установка Web-сервера. Поскольку мы установили Apache как сервис, то он будет стартовать каждый раз при запуске компьютера (в противном случае придется сделать это вручную).

Для проверки нужно запустить Internet Explorer и в поле адреса набрать:

http://имя_компьютера. Имя компьютера можно узнать следующим образом:

Теперь, зная имя, вы вводите его в поле адреса IE. Перед вами страница, созданная при инсталляции Apache (рис. 4).

Рис. 4. Тестовая страница Web-сервера Apache

Вспомогательные программы

FTP-клиент
CuteFTP

Программа CuteFTP, разработанная компанией GlobalScape (http://www.globalscape.com/), предназначена для передачи и получения файлов через Интернет по протоколу FTP (File Transfer Protocol ≈ протокол передачи файлов между компьютерами, использующими сети на основе TCP/IP, в том числе и Интернет. Для доступа к некоторой информации посредством FTP на компьютере, c которого осуществляют доступ, должен быть установлен так называемый FTP-клиент, а на другом компьютере соответственно FTP-сервер). При помощи данной программы вы сможете разместить на удаленном сервере вашу Web-страницу, получать с FTP-серверов полезное программное обеспечение и др. Уже много лет CuteFTP остается одной из самых популярных FTP-программ.

Notepad

Не удивляйтесь, что простейший текстовый редактор в составе Windows (Start∙Programs∙Accessories∙ Notepa) упоминается в нашем уроке. Он позволяет писать ╚чистый╩ html-код ≈ что написали, то и получили. Так что если умеете быстро набирать на клавиатуре и не ошибаетесь в синтаксисе тегов, то почему бы и нет? Нужно лишь сохранять документы с расширением .html, а не .txt, которое предлагается по умолчанию.

Я рекомендую Notepad как средство для быстрой или несложной правки html-страниц. Элементарная операция просмотра кода и редактирования html-страницы (файл с расширением .html или .htm) производится следующим образом:

Рис. 5. Код html-страницы и ее отображение в IE

На рис. 5 приведен html-код страницы, созданной в Notepad, и ее отображение в браузере Internet Explorer. На следующем уроке мы приступим к изучению языка html, а напоследок небольшое домашнее задание. Попробуйте создать первую html-страницу. Повторите код в Notepad, сохраните с нужным расширением и просмотрите в Internet Explorer.

Программы для работы с CSS
TopStyle Pro

Эта программа фирмы Bradsoft (Bradbury Software, LLC www.bradsoft.com), на мой взгляд, один из лучших редакторов каскадных таблиц стилей.

В настоящий момент TopStyle входит в состав многих html-редакторов как средство для редактирования каскадных таблиц стилей, в том числе и в Home Site 5 ≈ под названием TopStyle Lite.

В заключение обратите внимание на сводную таблицу программного обеспечения рабочего места Web-мастера.

ОБ АВТОРЕ
Мария Мержанова ≈ преподаватель, Web-мастер, учебного центра ╚Микроинформ╩. С ней можно связаться по e-mail: webmaster@microinform.ru.


* На прилагаемом CD находятся программы Photoshop 7.0, Netscape Navigator 7.0.


Преимущества Home Site 5


Кстати

Если на вашем компьютере была установлена предыдущая версия Home Site, то после инсталляции Home Site 5 при первом запуске редактора активизируется мастер обновления конфигурации (Initial Configuration Wizard). Вам будет предложено выполнить обновление предыдущей версии. Таким образом, вы сможете сохранить свои настройки и не придется их делать заново. Очень удобно.


Новые функции в Adobe Photoshop 7


Журнал "Мир ПК", #03, 2003 год // Издательство "Открытые системы" (www.osp.ru)
Постоянный адрес статьи: http://www.osp.ru/pcworld/2003/03/092.htm