Уроки Web- мастерства | Мир ПКУрок 2. Создаем рабочее место Web- мастера.
На этом уроке мы поговорим о программном обеспечении, без которого при создании и поддержке сайта не обойтись. Обсудим также полезные программы, делающие работу более удобной и наглядной. Особое внимание уделим вопросам установки этого ПО* . В настоящее время для разработки и поддержки как отдельных страниц, так и целых сайтов существует множество профессиональных программ.
В этой статье речь пойдет только о некоторых из них, а именно о тех, которые на сегодняшний день наиболее часто используются Web- мастерами. Итак, что же входит в строительный или, точнее, «сайтостроительный» арсенал Web- мастера?
Необходимые программы: Html- редактор. Графический редактор. Вспомогательные программы: FTP- клиент.
AI HTML Utilities 1.6 - набор утилит для разработки веб-сайтов: редактор HTML-текстов, CSS-файлов, утилита для подбора цветов, оптимизатор. Программы для работы с графикой. HTML Colors2000 - программа распознает цвет в любой точке и выдает код - Скачать (0,03Mb)..
Программы для просмотра изображений. Программы для работы с CSS. А теперь подробнее.. Необходимые программы.
Html- редактор. Что такое html- редактор? Это программа, помогающая Web- мастеру писать html- коды (html- теги) и создавать html- страницы. Такие программы позволяют генерировать код при нажатии на определенные кнопки или при выборе требуемых опций в меню, освобождая пользователя от огромной рутинной работы по написанию кодов, их многочисленных атрибутов и значений. Но помните, что редакторы не избавят вас от необходимости изучать язык html, а лишь ускорят и упростят дело.
- Написание. Цвет. R g b. Код для HTML. Snow. Создание сайта | Работа для ВЕБ дизайнеров и программистов..
- Программа подбора безопасного HTML-цвета для оформления веб-страниц. Не требует установки, регистрации, да и вообще ничего не. Если ткнуть мышкой в любой цвет, в нижней части этого блока, появится его название и код в десятичной и шестнадцатеричной системах..
- Палитра состоит из 216 безопасных веб-цветов. Под каждым цветом указаны два значения — RGB, для создания цвета в графическом редакторе, и его шестнадцатеричных HEX-код, для обозначения цвета в HTML. 255 255 204#FFFFCC..
- GetColor поможет выбрать цвет. Ссылка на цвет. #ffffff Выбрать цвет; #bbbbbb Выбрать цвет; #888888 Выбрать цвет; #444444 Выбрать цвет; #000000 .
HTML Colors - программа для определения цвета в html коде. Несколько неудачно реализованы палитры, при наличии многих дополнительных оттенков нет структуированной гаммы безопасных веб цветов..
Macromedia Home Site 5. Именно его выбираем в качестве рабочего редактора.
Разработчик — Macromedia Inc. Все предыдущие версии Home Site разрабатывала компания Allaire (http: //www.
Напомню, что Home Site 5 — это профессиональный кодовый редактор, и в процессе создания страниц вы можете и писать код «вручную», и одновременно использовать возможности редактора: всплывающие меню- подсказки по выбору нужного тега, атрибута или значения тега. Иными словами, этот редактор создает «чистый» html- код. Он потребует от вас знания языка разметки. Практическая работа.
Установка бесплатной пробной (3. Macromedia Home Site 5. Прежде всего обратите внимание на требования к аппаратному и программному обеспечению компьютера: процессор Intel Pentium II (и выше); операционная система Microsoft Windows 9. NT 4. 0/Me/XP; Web- браузер Internet Explorer или Netscape Navigator (версия 4. Мбайт оперативной памяти (рекомендуется 1. Мбайт); 2. 5 Мбайт свободного пространства на жестком диске. Поскольку загружать Home Site 5 (Trial Version) мы будем с Web- сайта компании Macromedia, ваш компьютер должен быть подключен к Интернету.
Теперь займемся собственно установкой. Предварительно на диске С: создаем папку Homesite.
Входим в Интернет. Набираем адрес http: //www. Мы попали на страницу загрузки бесплатной пробной версии (Free Trial Download). Выбираем версию продукта: Homesite 5 Windows English. Примечание: предлагаемая пробная версия устанавливается на операционные системы Windows и имеет английский интерфейс.). Нажимаем кнопку Go to Trial Download, а затем - CONTINUE (NO ID), если у вас нет идентификационного номера Macromedia ID. На следующей странице вам будет предложено заполнить довольно обширную форму - что ж, придется на это пойти.
Наконец- то мы добрались до нужной страницы. Размер загружаемого дистрибутива - 1. Mбайт. Нажимаем Try. В окне Проводника Windows указываем папку Homesite. Запускаем процесс загрузки EXE- файла программы (Home.
Site_5_Trial_Installer. Теперь мы имеем дистрибутив 3. Home Site_5_Trial_Installer. Установка этой программы практически ничем не отличается от установки других Windows- приложений. Далее, следуя инструкциям программы, производим установку редактора (нажимаем несколько раз кнопку Next, и по окончании установки мастер установки предложит перезагрузить компьютер, что и надо сделать). По завершении установки в Главное меню Windows добавляется еще один раздел - Home Site 5. Для запуска достаточно выбрать Start?
Programs? Macromedia Home Site 5? Home Site 5. Итак, перед вами программа Macromedia Home Site 5. Предлагаю по достоинству оценить ее удобный интерфейс (рис.
Windows- проводник для быстрой загрузки требуемых для редактирования и просмотра Web- страниц. Графический редактор. Adobe Photoshop. Лучший на сегодняшний день профессиональный графический редактор растровой графики — Adobe Photoshop 7 (последняя версия ко времени написания статьи), разработанный компанией Adobe Systems (http: //www. Выпускаются версии для ОС Windows и Macintosh. Adobe Photoshop 7 используется не только для создания, редактирования и подготовки изображений для размещения на Web- страницах, но и в полиграфии. Как уже говорилось в предыдущем уроке (см. Мир ПК», №2/0. 3, c.
Но сразу хочу предупредить: программа непростая, имеет множество опций и настроек и требует серьезного изучения. Вместе с Adobe Photoshop 7 поставляется программа Adobe Image. Ready 7, в которой можно найти полезные функции для Web- дизайна, например для создания анимированных изображений, карт- ссылок, функции rollover с автоматической генерацией html- и Java. Script кода. Практическая работа. Установка бесплатной пробной (3.
Adobe Photoshop 7. Для загрузки и установки редактора делаем следующее.
Предварительно на диске С: создаем папку Photoshop 7. На странице с полным перечнем продуктов Adobe, доступных для загрузки и приобретения (http: //www.
Photoshop и выбираем версию для ОС Windows. В разделе Tryouts (пробные версии) нажимаем на ссылку Adobe Photoshop 7. Обратите внимание на объем предлагаемого для загрузки файла - 1. Мбайт, прямо скажем, немаленький . Чтобы установить пробную версию, вам необходимо получить Adobe ID.
Для этого нужно зарегистрироваться - процедура довольно утомительная, так что наберитесь терпения. Шаг 1. Выбираете в выпадающем списке страну проживания (например, Russia) и нажимаете на кнопку Register. Шаг 2. Заполняете форму (поля, отмеченные знаком *, для заполнения обязательны): персональные данные - First name (имя), Last name (фамилия), e- mail address (адрес электронной почты). ID и пароль (не забудьте его подтвердить): Adobe ID (Remember my Adobe ID), Password (at least 6 characters), Confirm password, нажимаете на кнопку Save Changes. Шаг 3. На странице Tryouts вы увидите данные, которые уже ввели (имя, фамилия и адрес электронной почты), и продолжение формы.
Не пугайтесь — единственным обязательным полем является ZIP/ postal code (почтовый индекс). Нажимайте на кнопку Register. Вот мы и оказались на нужной странице. Здесь прежде всего обратите внимание на требования к аппаратному и программному обеспечению компьютера: процессор Pentium III или 4; ОС Windows 9. Ме/ХР/2. 00. 0, Windows NT Service Pack 6; 1. Мбайт оперативной памяти (рекомендуется 1. Мбайт); 2. 80 Мбайт свободного дискового пространства для установки видеоадаптера с 1.
CD- ROM. Загружаем дистрибутив Photoshop, указав созданную заранее папку. По завершении загрузки запускаем процесс инсталляции двойным щелчком мыши по файлу C: Photoshop. Adobe. PS7. Tryout. Далее, следуя инструкциям программы, производим установку редактора, которая практически ничем не отличается от установки других Windows- приложений. По завершении установки в Главное меню Windows добавлены Adobe Photoshop.
Adobe Image. Ready. Программы просмотра — браузеры.
На первом уроке мы дали краткий обзор современных популярных программ просмотра Internet Explorer, Netscape Navigator, Opera. Надо сказать, что в настоящий момент подавляющее число пользователей Интернета (более 9. Internet Explorer (IE), который входит в состав ОС Windows (9. Me, NT, 2. 00. 0, XP).
Для наших занятий подойдет любая версия IE, начиная с 4. В дальнейшем для тестирования Web- страниц вам потребуется установить как минимум еще два относительно популярных браузера — Netscape Navigator и Opera. Web- сервер. Для отладки страниц вам потребуется установить Web- сервер. На первом уроке вы познакомились с понятиями статичной и динамичной страниц.
Напомню, что статичная страница, состоящая из чистых html- кодов (html- разметки), отправляется клиенту (браузеру) в том виде, в каком она находится на жестком диске компьютера, на котором установлен Web- сервер. Динамичная страница предварительно обрабатывается сервером — выполняется встроенный в нее код, и только после этого готовый результат высылается клиенту. В настоящий момент практически любая Web- страница — динамичная, т.
Например, технология SSI (Server Side Include) — включения на стороне сервера — была первой, позволяющей осуществлять предварительную обработку кода страницы на сервере. Более подробно речь об этой технологии пойдет на шестом уроке. На первом же уроке были представлены популярные Web- серверы — Apache и IIS. По статистике около 7.
Web- серверы Apache и примерно 2. IIS. Apache рекомендуется устанавливать на операционную систему Unix, а IIS — на Windows (NT/2. Server). Apache. Мы с вами установим Apache- сервер. Наш сервер будет служить только для отладки локального сайта, поэтому установим его под операционную систему Windows. Для этого с сайта http: //www.
Apache для Windows (причем абсолютно бесплатно). Практическая работа.
Установка Apache под Windows. Предварительно на диске С: создаем папку Apache.
На странице http: //www. Apache- сервера. Текущая версия (ко времени написания статьи) - Apache 1. Ее мы и загрузим в папку C: Apache. К тому моменту, когда вы будете читать этот урок, могут появиться и более свежие релизы.).
Начинаем процесс установки Apache (двойным щелчком мыши по файлу C: Apacheapache_1. Apache. Шаг 1. - в окне приглашения к установке сообщается номер версии Apache. Шаг 2. - выберите подтверждение, что вы принимаете лицензионное соглашение (accept). Шаг 3. - перед установкой предлагается ознакомиться с общей информацией по Apache версий 1. ОС Windows. Шаг 4.
Для нас с вами значения этих полей непринципиальны - ведь мы устанавливаем сервер для локальной отладки динамических страниц сайта. Потому вводим любые данные (например, я ввела в качестве имени домена и имени сервера - web_lessons, адрес электронной почты - admin@domain.
Если хотите, можете заменить этот адрес на свой - см. В данном случае поля необходимо заполнить для того, чтобы был создан работоспособный конфигурационный файл для запуска Apache.