Редактор веб страниц


Создание web-страницы

КАК СОЗДАТЬ WEB-СТРАНИЦУ

Самый простой способ создать страницу для размещения в Интернете — воспользоваться инструментами пакета Microsoft Office. Последние версии этого пакета предоставляют возможность преобразовать обычный документ в HTML-формат с неплохим качеством кода.

Возможности Word

Подготовленный в текстовом редакторе Word документ можно легко преобразовать в web-страницу. Однако она будет выглядеть не столь привлекательно, как хотелось бы, если не предпринять дополнительные шаги. Рассмотрим несколько примеров.

Возьмем некоторый текст.

Преобразуем документ в web-страницу с помощью операции Сохранить как web-страницу… (вызывается из главного меню — позиция Файл). Тогда html-представление документа будет иметь вид:

Первое, что бросается в глаза — текст занимает все экранное пространство. Длина строки слишком большая. Для комфортного чтения на экране число символов в строке должно быть в диапазоне 50-65.

Использование таблицы

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

Фон и стиль

Можно пойти дальше — например, изменить цвет и фактуру фона, вид гиперссылок, оформление списков. Для изменения общего дизайна страницы можно воспользоваться командой Тема из раздела главного меню Формат.

Желательно выбрать не слишком яркий фон, чтобы на нем хорошо читался текст. Таким фоном в предложенном списке является, например, Рисовая бумага. Вид страницы заметно преобразился:

Вставка картинки

В документ можно добавить картинку, взяв ее, к примеру, из коллекции клипов.

Нужно правой кнопкой мыши щелкнуть на картинку, выполнить операцию копирования, и далее в документе указать место для картинки и выполнить операцию вставки скопированного объекта.

Если вы вставляете картинку внутрь абзаца, то лучше изменить свойства картинки, задав обтекание текста вокруг картинки (нужно выбрать позицию главного меню Формат и далее Рисунок):

В документе при этом не будет создаваться лишнего пустого пространства.

Наконец, можно добавить картинке рамку и тень с помощью кнопок на панели Рисование — Тип линии и Стиль тени. Подобные нюансы заметно прибавляют выразительности странице.

Если панели Рисование нет на странице, то нужно установить ее, выбрав позицию главного меню Вид и далее Панели инструментов и Рисование.

Бегущая строка

Word позволяет внести на web-страницу и другие оформительские элементы, например "бегущую строку". Чтобы воспользоваться этой возможностью нужно открыть на экране панель web-компонентов (из главного меню — позиция Вид, далее Панели инструментов и Веб-компоненты). Щелчок по кнопке операции Бегущая строка открывает дополнительное окно для задания текста параметров бегущей строки.

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

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

Использование шаблонов оформления

Если вы начинаете создавать страницу с нуля, то можно воспользоваться мастером веб-страниц, который в диалоге будет помогать формировать документ. Или же можно использовать готовый шаблон оформления страницы, выбрав его из достаточно представительного набора. Для этого нужно в операции Создать выбрать режим Создание с помощью шаблона и далее Общие шаблоны. На экране появится форма, в которой нужно выбрать закладку Веб-страницы:

Далее в предлагаемой заготовке документа вы должны ввести тексты и картинки:

Цветовое и стилевое решение пользователь может выбирать самостоятельно, например, с помощью настроек Формат - Тема.

Создание гиперссылок и закладок

Последний вопрос, который мы планируем рассмотреть в данном разделе — создание гиперссылок в документе.

Если мы хотим сослаться в документе на другой документ или другой сайт в Интернете, то такую гиперссылку можно сделать так: выделить в документе фрагмент текста (слово) и выполнить операцию Вставка — Гиперссылка… На экране появится форма, в которой задается адрес гиперссылки. Адрес можно ввести явно или можно выбрать файл в окне.

Здесь следует помнить, что адрес выбранного файла на вашем компьютере может измениться, когда вы будете формировать свой сайт. Поэтому неявный способ задания адреса подходит только в том случае, если структура вашей папки на компьютере и на сайте Интернета совпадают.

Если гиперссылка должна ссылаться на другую часть этого же документа, то предварительно нужно вставить закладку в начале нужного фрагмента. Нужно выполнить операцию Вставить — Закладка, и в появившейся на экране форме ввести имя закладки.

Тогда при создании гиперссылки нужно указать эту закладку (кнопка Закладка… расположена в правой части формы), выбрав, например, ее из списка в форме:

Веб-презентация в PowerPoint

Программа PowerPoint ориентирована на создание презентаций на компьютере. Однако у нее имеется функция преобразования подготовленной презентации в веб-формат.

Вы можете открыть подготовленную презентацию и выполнить операции (из главного меню) Файл — Сохранить как веб-страницу. Как обычно нужно задать имя веб-презентации в открывшемся окне. В результате выполнения преобразования презентации будет создан файл с заданным именем и расширением .htm и одноименная папка с дополнительными материалами.

Если теперь из браузера вызвать веб-презентацию, то на экране можно увидеть результат преобразования.

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

Презентацию можно просматривать с показом структуры слайдов. Но если эта информацию не представляет интереса, то зарезервированное для показа структуры поле на экране можно убрать (операция развернуть/свернуть структуру в нижней строке).

С помощью кнопки Показ сладов можно просматривать слайды на полном экране.

Создание гиперссылок

В презентации можно создать гиперссылки, которые связывают объекты на слайде, например, с другими слайдами. Тем самым можно создать структуру гипермедиа, которая естественным образом будет соответствовать идеологии Интернета. Поясним этот прием на примере.

Пусть у нас есть несколько заготовленных слайдов на тему растительного мира Байкала, составленных из коллекции фотографий. Создадим новый слайд — оглавление коллекции.

Если новый слайд получился не первый в последовательности, то нужно выйти в режим сортировщика слайдов (из главного меню с помощью операций Вид — Сортировщик слайдов) и перетащить новый слайд в начало коллекции.

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

Перейдем в обычный режим просмотра слайдов (команды Вид и далее Обычный). На слайде-оглавлении выделим фотографию и выполним команду Вставка — Гиперссылка. В открывшемся окне зададим переход по гиперссылке — номер слайда с большой фотографией, с которой был скопирован меньший образец для оглавления.

Аналогично свяжем другие картинки на слайде-оглавлении с соответствующими слайдами с оригиналами фотографий.

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

Осталось совсем немного усовершенствовать нашу структуру. Добавим на каждый слайд с фотографией в его верхнюю левую часть стрелку (Автофигура на панели инструментов Рисование), и сделаем из этой стрелки гиперссылку, выполняющую переход на слайд-оглавление. Теперь движение по созданной нами структуре гипермедиа станет "двусторонним": из оглавления можно перейти на слайды с фотографиями, и с любого слайда вернуться на оглавление.

После выполнения преобразования презентации в веб-формат наша первая страница будет иметь вид:

Щелчок по картинке из меню вызовет переход к слайду с большой фотографией, а щелчок по стрелке (в левой верхней части слайда) обеспечит переход на страницу с оглавлением коллекции.

Обзор редакторов для верстки веб-страниц

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

В этой статье я дам краткий обзор по наиболее популярным редакторам, чтобы помочь вам сориентироваться. Кроме того я приведу полезные ссылки по каждой программе: сайт разработчика, где можно приобрести/скачать в интернет этот редактор, ссылки на обучающие программы и инструкции по работе с редактором.

Редакторы для верстки веб-страниц бываю двух типов: визуальные и текстовые .

Визуальные редакторы не требуют от вас знаний html, css и прочих технологий для разметки страниц. В визуальном редакторе вы располагаете различные элементы вашего сайта, как будто на листе бумаги, а редактор пишет за вас код самостоятельно. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами. Аббревиатура WYSIWYG расшифровывается как What You See Is What You Get - что видишь, то и получаешь.

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

Какого же типа вам следует заводить редактор? Если вы изучаете html, css или другие технологии для разметки страниц, если вы хотите уметь создавать качественные страницы и быть профессиональным кодером, то безусловно вам нужен текстовой редактор. Если же у вас нет времени на изучение html, css и прочих технологий, если перед вами не стоит очень сложных задач в выполнении страницы, то смело заводите себе визуальный редактор и пользуйтесь им, он очень экономит время и силы. А лучше всего иметь у себя на компьютере и визуальный, и текстовой редакторы для разных нужд.

ВИЗУАЛЬНЫЕ РЕДАКТОРЫ

Macromedia Dreamweaver MX

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

Разработчики утверждают, что Macromedia Dreamweaver MX предназначена для проектирования, разработки и администрирования профессиональных web-сайтов и приложений. Кроме того Dreamweaver легко интегрируется с другими программами от Macromedia, например, такими, как Flash. Т.е. Dreamweaver гораздо больше, чем просто визуальный редактор, это достаточно мощный и сложный инструмент, а всякий сложный инструмент требует, чтобы на его освоение было потрачено какое-то время, прежде, чем пользователь сможет работать в нем. Однако, я считаю, что вас не должно смущать, что придется изучать, как пользоваться программой, Dreamweaver стоит того.

Adobe GoLive и LiveMotion

Возможно, Adobe GoLive понравится тем, кто любит программы от Adobe, и много с ними работал: знакомая среда, достаточно легко разобраться, что к чему. Кроме того, еще один плюс для любителей Adobe - все программы от Adobe прекрасно взаимодействуют друг с другом и дополняют друг друга, GoLive не исключение, он прекрасно дружит с собратьями. Однако, GoLive не более, чем визуальный редактор для верстки веб-страниц, больше чем поддержки таких технологий, как Html, Dhtml, CSS, XML и нескольких готовых Javascript`ов не стоит ждать от этой программы. Однако, следует отметить, что встроенный редактор кода (текстовой) в этой программе очень хороший. Т.е. возможно, GoLive оптимальное сочетание визуального и текстового редактора (два в одном).

Хочу также добавить, что, вероятно, стоит использовать с GoLive такую программу, как Adobe LiveMotion (в предыдущих версиях она называлось Image Styler). Хотя, по идее, LiveMotion является графическим редактором, в котором вы можете создавать незатейливую, но качественную графику для своих веб-сайтов, эта программа также умеет верстать веб-странички, на основе того, что вы нарисовали (не лучшим образом, но довольно прилично, плюсом является то, что LiveMotion сам режет готовый макет на много картинок, которые вы потом можете использовать при верстке сайта в GoLive).

Microsoft FrontPage

Если верить разработчикам, то программа FrontPage позволяет создавать веб-узлы, обладающие широкими возможностями, а также предоставляет средства управления ими. На деле, FrontPage дружит с Html, Css, Dhtml, Javascript. Дает достаточно широкие возможности по управлению изображениями и flash-ролликами. Кроме того FrontPage дружит с такими технологиями, как ASP, XML, VBScript, XSL. Также разработчики утвержают, что в последней версии FrontPage теперь борется за чистоту кода, что ж, остается надеятся, что это так, т.к. раньше данный пункт был не на высоте (раньше FrontPage вставлял в код очень много ненужных комментариев и другой лишней информации, так что правильностью и чистотой кода странички, сделанные в этом редакторе похвастаться не могли).

Hotdog

Программа имеет простой и понятный пользователю интерфейс. Кроме того, что Hotdog дружит с пользователем, эта программа дружит также с Flash, SQL, PHP, ASP, имеет работать с GIF-изображениями (оптимизация, анимация), включает в себя Html-компрессор, может создавать файлы справки (CHM).

ТЕКСТОВЫЕ РЕДАКТОРЫ

Homesite

Этот редактор, пожалуй, самый популярный и мощный среди текстовых, и не зря. Кроме того, что в нем достаточно легко работать не только с Html-кодом (есть все, от списка всевозможных атрибутов ко всем тегам вплоть до проверки кода (правильность проверяется с точки зрения W3C.org)), но также есть поддержка XHTML, CSS-редактор, и так далее.

HTML Pad

Эта программа тоже пользуется большой любовью пользователей. Помимо всего стандартного HTMLPad поддерживает JavaScript, VBScript, SSI, ASP и Perl, умеет создавать макросы (нападобие Word`a и Excel'я), включает в себя кучу различных справочных материалов по CSS и Html, и многое другое.

Notepad

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

За сим все. Если у вас не слишком хорошая и быстрая связь с интернет, чтобы скачать редакторы, то вы можете купить их в магазине, где продаются программы для компьютера.

Если вы считаете, что какой-то редактор для верстки веб-страниц был несправедливо упущен в этой статье, если вы знаете ценный учебник или статью по какому-либо редактору, если вы считаете, что мы незаслуженно отругали или похвалили тот или иной редактор, то сообщите нам об этом на Форуме, или по Е-майл ([email protected]), мы обязательно прислушаемся к вашему мнению и постараемся исправиться.

mirznanii.com

Бесплатные программы для создания html сайтов.

Здравствуйте, уважаемые читатели блога. Давайте поговорим о программах, которые помогут нам создавать html сайты. Для эффективного написания html-кода, создания веб-страниц и, тем более, для создания сайта, даже небольшого, без таких программ не обойтись. В «Блокноте» это делать очень неудобно и долго. Итак, нам понадобятся следующие программы для создания html страниц:

Рассмотрим эти программы подробнее.

Текстовый редактор с подсветкой html кода

Создаём сайт на фреймворке Yii 2.0

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

Notepad++

Создаём сайт на фреймворке Yii 2.0

Один из лучших, на мой взгляд, текстовых редакторов. Самое главное то, что программа абсолютно бесплатна и скачать ее можно на сайте разработчиков. Notepad++ умеет выделять синтаксис не только языка html, но и языка стилей CSS, синтаксис Javascript и еще многих языков программирования. Кроме подсветки синтаксиса html, Notepad++ предоставляет множество других полезных функций, облегчающих создание web-страниц. Подробное описание возможностей этого редактора можете почитать в статье «Бесплатный текстовый редактор Notepad++». К тому же возможности Notepad ++ можно расширять при помощи плагинов, найти которые можно в интернете. В общем я советую вам этот текстовый редактор, а выбор за вами.

PSPad

Создаём сайт на фреймворке Yii 2.0

Еще один бесплатный тестовый редактор, скачать можно с сайта pspad. Также довольно удобная и простая в использовании программа.

Dreamweaver

Создаём сайт на фреймворке Yii 2.0

А это уже платная программа. Довольно мощный редактор html-кода и предназначен больше для профессиональных web-дизайнеров. Предоставляет возможность визуального создания web-страниц. Т.е. вы переносите на страницу различные элементы, а html-код генерируется автоматически. Но главный минус Dreamweaver — это высокая стоимость. А также программа сложная в использовании. Поэтому не советую ее, если вы делаете только первые шаги в мире web-дизайна.

Браузер

Создаём сайт на фреймворке Yii 2.0

Браузер — это программа предназначенная для просмотра web-сайтов. Все популярные браузеры бесплатны, и будет лучше если вы установите их себе на компьютер как можно больше. Это нужно для того чтобы проверять правильность отображения html-страницы в разных браузерах. Так как каждый браузер может отображать одинаковые участки кода по разному. На сегодняшний день наиболее популярны следующие браузеры: Internet Explorer, Mozilla Firefox, Google Chrome, Opera и Safari.

Internet Explorer

Этот браузер предоставляется вместе с операционной системой Windows. Именно это и объясняет его популярность. Но к сожалению этот браузер хуже всех поддерживает спецификацию HTML и зачастую под него отдельно приходится отлаживать html-код. Скачать его можно с официального сайта Microsoft, но скорей всего, если у вас операционная система Windows, он у вас уже установлен.

Mozilla Firefox

Третий по популярности браузер в мире. Его конек это простота и расширяемость. Изначально Firefox содержит только самые необходимые функции, но благодаря специальным расширениям пользователи могут модифицировать браузер в соответствии с их требованиями. Один из минусов это более медленная работа в сравнении с другими браузерами. Firefox свободно распространяется и скачать его можно на сайте mozilla-russia.org.

Google Chrome

Самый популярный браузер в мире, разрабатываемый компанией Google. Отличается высокой скоростью и стабильностью работы. Найти его можно со страницы браузера.

Opera

Еще один довольно популярный браузер. Считается самым быстрым браузером на Земле. Особенно это касается работы со скриптами JavaScript. Скачиваем с официального сайта Opera.

Safari

Разработанный компанией Apple браузер встроен в операционные системы Mac OS X и iOS.

Я при создании web-страниц обязательно проверяю правильность отображения html-кода в первых четырех браузерах.

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

Создаём сайт на фреймворке Yii 2.0

Графический редактор необходим для редактирования и обработки изображений.

Photoshop

Является самой популярной программой для обработки и создания графических изображений для сайтов. Photoshop разработан и распространяется фирмой Adobe Systems. Содержит в себе множество инструментов для обработки фотографий и является своего рода цифровой фотолабораторией. Но главный минус Photoshop-а, то что он платный. И к тому же в большинстве случаев вся мощь Photoshop-а не нужна и можно воспользоваться бесплатными аналогами.

GIMP

Мощный и свободно распространяемый графический редактор. GIMP поддерживает растровую графику и частичную работу с векторной графикой. Считается бесплатный аналогом Photoshop-а и легко расширяется с помощью дополнений. Скачать можно с сайта разработчиков.

Paint.Net

Еще один бесплатный графический редактор, который позволяет осуществлять все необходимые действия с изображениями. Скачиваем с сайта разработчиков.

Валидатор html

Валидатор нужен для проверки html-документа и выявления в нем ошибок в синтаксисе и расхождений со спецификацией HTML. При наличии интернета валидацию html кода можно проводить на сайте validator.w3.org. При отсутствии подключения к Интернету можно воспользоваться программой Tidy. Я пользуюсь только онлайн валидатором.

Кроме выше описанных программ, для тестирования web-сайта желательно установить WEB-сервер. При тестировании отдельных статичных страниц можно обойтись и без него, но при создании более сложных сайтов с применением языков php, javascript и других, без web-сервера не обойтись. В качестве web-сервера может вполне подойти поставляемый вместе с windows Microsoft Internet Information Services. Он прост в установке и его возможностей вполне хватит. Либо можно установить джентльменский набор Web-разработчика Денвер.

Подведем итоги. Для эффективной и удобной разработки web-сайтов и html-страниц необходим некоторый набор программ:

На этом все! До встречи в следующих статьях!

webcodius.ru

1 Создание и редактирование web-сайта

Визуальный редактор

Nvu 1.0.

Сайт программы - http://nvu.mozilla-russia.org/. Введение

1.1. Создание и редактирование web-сайта.

1.2.1. Работа с текстом.

1.2.2. Вставка и редактирование таблиц.

1.2.3. Вставка графического изображения.

1.2.4. Организация гиперссылок.

1.2.5. Вставка форм.

1.2.6. Шаблоны и редактируемые области.

1.2. Редактирование и оформление web-страниц.

1.3. Редактор стилей CSS.

1. Визуальный редактор Nvu 1.0.

Введение

NVU это Open Source проект Linspire по созданию визуального (WYSIWYG) HTML редактора. Как и для Firefox и Thunderbird основой для создания NVU послужила часть кода выделенного из браузера Mozilla - код Mozilla Composer. К созданию NVU был привлечен главный архитектор Mozilla Composer - Дэниел Глазман.

Программа Nvu 1.0 представляет собой визуальный (WYSIWYG) редактор, это означает, что в процессе создания сразу можно видеть как будет выглядеть web-страница в браузере для пользователей Интернет. На сегодняшний день визуальный web-редактор Nvu 1.0 имеет уже достаточно возможностей для создания и редактирования web-сайтов. Это Менеджер сайтов, позволяющий работать с web-сайтом в целом, встроенный Редактор CSS, с предварительным просмотром стилей, цветная подсветка синтаксиса в режиме редактирования кода, проверка орфографии, инструменты для работы с таблицами, графическими изображениями, гиперссылками, возможность создания шаблонов web-страниц и многое другое. Последняя версия программы разработана в 2005 году.

Сайт программы - http://nvu.mozilla-russia.org/.

На сайте можно скачать установочный файл программы для различных операционных систем (Windows, Linux, MacOS).

Размер установочного файла для Windows – 7,0 Мбайт.

Программа устанавливается по умолчанию в папку C:\Program Files\Nvu, размер которой составляет приблизительно 24 Мбайта.

Окно программы Nvu 1.0, представлено на рисунке 4.1.

1 – окно Полезные советы Nvu, появляется при первом запуске web-редактора, для отмены появление этого окна необходимо снять флажок Показывать при старте (2). 3 - строка заголовка.
4 - строка меню наиболее часто используемых операций.
5 - панель компоновки, которая содержит кнопки 6 - панель форматирования.
7 - панель вкладок открытых файлов. 8 - шкала размера окна.
9 - панель режимов редактирования показывает, в каком режиме просматривается текущий документ. 10 - строка состояния показывает позицию курсора относительно иерархии тэга .
Окно со справочной информацией открывается командой Справка→Содержание и содержит подробную информацию об интерфейсе программы, разработке web-страниц, командах пунктов меню; словарь терминов; список тем в алфавитном порядке; раздел поиска.

1.1. Создание и редактирование web-сайта.

При создании локального web-сайта в web-редакторе Nvu 1.0 необходимо сначала создать на диске корневую папку web-сайта и организовать внутри нее начальную структуру папок, а так же перенести графические изображения, которые планируется использовать в работе в одну из папок сайта (программа Мой компьютер, Проводник).
При запуске программы открывается новая web-страница – вкладка без_имени.

Если web-страница нуждается в сохранении, то перед именем вкладки появляется специальный красный значок (рис.4.2 - 1).

Для сохранения web-страницы необходимо выполнить команду Файл→Сохранить. В том случае если не было задано название web-страницы, появится окно Заголовок страницы, в котором можно ввести необходимую информацию или оставить пустым и нажать кнопку OK.

Далее откроется стандартное диалоговое окно сохранения документа Сохранить страницу как (рис.4.2 - 2), в котором необходимо выбрать одну из папок web-сайта (3), ввести имя файла состоящее только из латинских букв, цифр, разрешенных символов (4) и нажать кнопку Сохранить (5). Расширение полученных файлов будет html.

Создание web-страницы осуществляется с помощью команды Файл→Создать. В этом случае открывается диалоговое окно Новый документ, в котором можно указать параметры новой страницы: тип создаваемого документа, где будет открываться документ (в новой вкладке или в новом окне программы Nvu 1.0). Кнопка Создать на панели компоновки создает новую web-страницу в новой вкладке.

Закрыть текущей документ можно командой Файл→Закрыть или кнопкой “красный крестик” в правой части панели вкладок. Для того чтобы закрыть любую вкладку необходимо нажать на нее правой кнопкой мыши и выбрать пункт Закрыть вкладку.

Для того чтобы открыть web-страницу локального web-сайта необходимо выполнить команду Файл→Открыть файл и выбрать нужный документ. Редактор Nvu 1.0 позволяет редактировать одновременно несколько документов открытых в разных вкладках.

Для удобства работы с конкретным web-сайтом удобно воспользоваться Менеджером сайта (рис.4.3), который открывается командой

Вид→Показать/скры ть→Менеджер сайта. Для описания локального web-сайта нужно выполнить

команду

Редактировать сайты (1). В результате откроется диалоговое окно Параметры публикации (2), в котором нужно указать: Имя сайта (3), корневую папку на диске (4) с помощью кнопки Выбрать директорию (5). После нажатия на кнопку OK (6) папка web-сайта будет отображаться в окне Менеджера сайта (7). При работе с Менеджером сайта можно:
  • открывать любую web-страницу сайта в отдельной вкладке для редактирования двойным щелчком мыши;

1.2. Редактирование и оформление web-страниц.

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

Обычный – визуальный редактор, основы работы с которым будут рассмотрены ниже.

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

Код – редактор HTML-кода web-страницы с подсветкой синтаксиса.

Предварительный просмотр – отображает web-страницу так, как она будет выглядеть в браузере.

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

Редактирование web-страницы можно начать с определения ее заголовка и основных свойств с помощью команды Формат→Заголовок и свойства страницы. В результате открывается диалоговое окно Свойства страницы (рис.4.4) в котором можно задать следующие параметры.

  • Поле Заголовок: (1) - название web-страницы, которое будет отображаться в строке заголовка браузера.
  • Поле Автор: (2) – указать автора.
  • Поле Описание: (3) – задать краткое описание содержимого.
  • Флажок Шаблон (4) – преобразует web-страницу в шаблон.
  • Поле Язык: (5) – указать язык с помощью кнопки Выбрать язык (6).
  • Выпадающее меню Направление письма: (7) – определить направление текста.
  • Поле Кодировка: (8) – определить кодировку web-страницы с помощью кнопки Выбрать кодировку (9).
Цветовое оформление web-страницы задается командой Формат→Цвета и фон страницы… (рис.4.5.). Установив переключатель 1, можно выбрать цвета для текста, гиперссылок и фона. Кнопка Выбрать файл… (2) открывает диалоговое окно

Выберите файл изображения, в котором выбирается графическое фоновое изображение для web-страницы. Для того чтобы web-сайт можно было переносить на другой компьютер или web-сервер выбранный графический файл должен лежать в одной из папок сайта, а флажок 3 должен быть включен. Кнопка Дополнительно… открывает окно Редактора дополнительных свойств.

1.2.1. Работа с текстом.

Заполнение редактируемой web-страницы текстом может быть осуществлено как набором текста на клавиатуре непосредственно в редакторе NVU 1.0, так и вставкой текста через буфер обмена. Во втором случае большая часть форматирования текста сохраняется и записывается с помощью html и css команд.

Для изменения текста необходимо воспользоваться командами меню Формат.

Используя команду Выбор цвета подсветки текста на панели Форматирования можно с помощью диалогового окна Цвет подсветки выбрать фоновый цвет под буквами.

Для того, чтобы отменить форматирования текста необходимо выполнить команду Формат→Прервать стили текста.

Форматирование абзацев выполняется с помощью следующих команд.

Команда Формат→Абзац позволяет выбрать из раскрывающегося подменю следующие типы форматирования для текста.

Команда Формат→Увеличить (Уменьшить) отступ – увеличивает (уменьшает) отступ всего текстового фрагмента от левого края.

Команда Формат→Выравнивание – позволяет выбрать горизонтальное выравнивание текста относительно окна.

Команда Формат→Список - позволяет выбрать из раскрывающегося подменю тип списка (Ничего, Маркированный, Нумерованный, Термин или Определение). Выбор пункта Свойства списка… открывает диалоговое окно Свойства списка, где вручную редактируются свойства списка (выбор типа маркера или нумерации). Для организации вложенного списка, необходимо выделить строки, которые являются пунктами следующего уровня, и нажать клавишу Tab. Обратное действие выполняется с помощью клавиш Shift+Tab.

Используя команды меню Вставка можно вставить на web-страницу следующие текстовые элементы.

Команда Разделитель – вставляет горизонтальную линию в место указанное курсором. Для изменения свойств линии необходимо сделать на ней двойной щелчок левой кнопкой мыши и в открывшемся диалоговом окне Свойства горизонтального разделителя задать необходимые параметры.

Команда HTML… – открывает диалоговое окно для вставки html-кода вручную в место указанное курсором.

Команда Буквы и символы… – открывает диалоговое окно Вставка символа для вставки дополнительных символов из перечисленных категорий на место указанное курсором. Кнопка Вставка – вставляет символ, кнопка Закрыть – закрывает данное окно.

Команда Комментарий – открывает диалоговое окно Редактировать комментарий, в котором указывается текстовый комментарий для места указанного курсором. При просмотре в браузере комментарии не отображаются. В режиме редактирования на месте комментария появляется специальный значок - маленький желтый прямоугольник с восклицательным знаком внутри. Двойной щелчок левой кнопки мыши по значку открывает окно для редактирования данного комментария.

Команда PHP-код – открывает диалоговое окно Редактировать PHP код для вставки программируемого кода на web-страницу.

1.2.2. Вставка и редактирование таблиц.

Таблицы используются для организации текста и изображений относительно друг друга. Чтобы вставить таблицу необходимо установить курсор в нужное место web-страницы, выполнить команду Таблица→Вставить→Таблица…, и в открывшемся диалоговом окне Вставка таблицы (рис.4.6) задать необходимые параметры.

На вкладке Ячейка (рис.4.6 а) определяются выравнивания внутри ячеек таблицы, тип размещения текста внутри ячеек, отступы между ячейками и между содержимым и границами.

На вкладке Точная (рис.4.6 б) задается количество строк и столбцов таблицы, ее ширина в процентах от ширины окна или пикселях и размер рамки таблицы. Для таблицы с границей нулевой ширины редактор Nvu 1.0 показывает условную границу красной пунктирной линией. Эта линия не отображается при просмотре таблицы в браузере.

На вкладке Простая (рис.4.6 в) можно определить размер таблицы щелчком на нужную ячейку. В результате данное окно закрывается.

Кнопка Дополнительно… открывает диалоговое окно редактора дополнительных свойств, где можно задать дополнительные атрибуты таблицы или связать с ней сценарии JavaScript.

Выпадающее меню Стиль ячейки: (6) позволяет определить ячейку как ячейку заголовка.

Кнопка OK подтверждает заданные параметры и показывает таблицу в окне визуального редактора.

Редактирование полученной таблицы может быть выполнено одним из способов.
  1. Изменение таблицы в окне редактора. Выделить таблицу щелчком левой кнопки мыши на нее. В результате таблица окажется выделенной (рис.4.7). Перемещение меток выделения (1) нажатой левой кнопкой мыши изменит размер границ. Выделенная ячейка таблицы содержит команды для удаления столбца (2) или строки (3), которые ее содержат и команды для добавления столбца слева (4) или справа (5) и для добавления строки сверху (6) или снизу (7).
  1. Использование диалогового окна Свойства таблицы, которое можно открыть командой Таблица→Свойства таблицы или двойным щелчком левой кнопкой мыши по таблице. На вкладке Ячейки (рис.4.8 а) можно задать следующие параметры.
  • Группа Выделение предназначена для выбора из выпадающего меню 1 диапазона, к которому будут применены параметры, кнопки Предыдущая (2) , Следующая (3) используются для перехода по таблицы.
  • Группа Размер (4) предназначена для указания высоты и ширины в пикселях или процентах от размера окна.
  • Группа Выравнивание содержимого (5) предназначена для выравнивания содержимого по горизонтали и вертикали.
  • Выпадающее меню Стиль ячейки: (6) позволяет определить ячейку как ячейку заголовка.
  • Выпадающее меню Разбивка текста на строки (7) определяет способ задания текста.
  • Кнопка Цвет фона (8) открывает диалоговое окно Фоновый цвет ячейки для выбора цвета заливки.
На вкладке Таблица (рис.4.8 б) можно задать следующие параметры.
  • Группа Размер (9) позволяет изменить количество строк и столбцов таблицы и ее общий размер.
  • Группа Обрамление и поля (10) позволяет установить толщину границ таблицы (поле Рамка) и отступы между ячейками и их содержимым.
Кнопка Применить устанавливает выбранные параметры не закрывая данного окна. Кнопка ОК применяет параметры и закрывает текущее окно.

3) Использование команд пункта Таблица, с помощью которых можно добавлять, выделять, удалять столбцы, строки, ячейки и выбирать фон для выделенных ячеек или таблицы в целом, а так же объединять выделенные ячейки пункт Объединить выбранные ячейки и разбивать их обратно пункт Разбить ячейки. Команда Создать таблицу из выделения предназначена для преобразования выделенного текста в таблицу. В результате ее выполнения открывается диалоговое окно Преобразование в таблицу, в котором нужно выбрать символ-разделитель для разделения каждой строки на отдельные ячейки. Установка флажка Удалить символ разделителя заставляет редактор Nvu 1.0 удалить эти символы. Форматирование текста будет удалено после его преобразования в таблицу.

1.2.3. Вставка графического изображения.

Для вставки графического изображения необходимо установить курсор в нужное место web-страницы и выполнить команду Вставка→Изображение… . В результате открывается диалоговое окно Свойства изображения (рис.4.9) в котором указываются параметры рисунка.

На вкладке Адрес с помощью кнопки Выбрать файл… (1) указывается относительный адрес (2) графического изображения, которое обязательно должно лежать в одной из папок web-сайта. Только в этом случае перенос всего web-сайта на другой компьютер или web-сервер пройдет корректно. В поле Всплывающая подсказка: (3) указывается текст, который будет появляться при наведении указателя мыши на рисунок в браузере. Поле Альтернативный текст: (4) позволяет задать надпись которая будет появляться в том случае, если отменен показ картинок в браузере.

Кнопка Дополнительно (5) открывает диалоговое окно редактора дополнительных свойств, в котором можно задать дополнительные атрибуты рисунка или связать с ним сценарии JavaScript.

Вкладка Размеры позволяет изменить следующие параметры рисунка.

Вкладка Внешний вид позволяет изменить следующие параметры рисунка Вкладка Ссылка позволяет организовать гиперссылку по рисунку. При этом возможны следующие варианты. С помощью кнопки Обзор необходимо выбрать один из файлов из структуры папок web-сайта и установить флажок Относительный URL. Или установить флажок Адрес электронной почты и ввести e-mail вручную. Или в соответствующем поле указать полный адрес какого-либо ресурса в Интернет. Или из выпадающего списка выбрать нужный якорь (место на той же web-странице). При установки флажка Показывать рамку… вокруг изображения появится рамка.

Вставленное графическое изображение можно выделить щелчком левой кнопки мыши и изменить его размер перемещением метки выделения нажатой левой кнопкой мыши. Перемещение рисунка выполняется перемещением нажатой на него левой кнопки мыши. Для изменения свойств графического изображения необходимо выполнить двойной щелчок левой кнопкой мыши на нем. Если было выбрано обтекание картинки текстом, то для того чтобы прервать обтекание необходимо установить курсор в нужное место web-страницы и выполнить команду Вставка→Разрыв под изображениями.

1.2.4. Организация гиперссылок.

Для организации гипертекстовых связей между web-страницами необходимо создать гиперссылки согласно структуре web-сайта.

Гиперссылки по графическому изображению организуются с помощью вкладки Ссылка диалогового окна Свойства изображения, которое было рассмотрено в предыдущем подразделе.

Для организации гиперссылки по тексту необходимо его выделить и выполнить команду Вставка→Ссылка…. В результате открывается диалоговое окно Свойства ссылки (рис.4.10), в котором необходимо указать следующие параметры.

Группа Текст ссылки – здесь либо приводится выделенный при создании ссылки текст (1), либо появляется текстовое поле, в которое нужно ввести текст гиперссылки.

Группа Адрес объекта ссылки служит для определения конечного объекта ссылки. Используя кнопку Выбрать файл… (2) можно выбрать любой документ из папок web-сайта. Используя выпадающее меню (3) можно выбрать якорь (метку) или один из заголовков (h2-h6) текущей web-страницы. Установив флажок Адрес электронной почты (4) ввести в текстовое поле e-mail. Или ввести в текстовое поле (5) адрес Интерент ресурса. Флажок Относительный URL (6) будет активен в том случае, если web-страница не была сохранена и его необходимо установить.

Кнопка Расширенные (Основные) свойства (7) позволяет получить (закрыть) доступ к дополнительным параметрам гиперссылки.

Установленный флажок Открытие ссылок (8) позволяет выбрать из выпадающего меню (9) место, где будет открыт новый документ.

Кнопка Дополнительно (10) открывает диалоговое окно редактора дополнительных свойств, в котором можно задать дополнительные атрибуты ссылки или связать с ней сценарии JavaScript.

Для изменения параметров созданной гиперссылки необходимо выделить ее и выполнить ту же команду Вставка→Ссылка….

Для удаления гиперссылки необходимо выделить объект текст или графическое изображение и выполнить команду Формат→Убрать ссылки.

Для того чтобы иметь возможность организовывать гиперссылки внутри одной web-страницы необходимо или выделить соответствующие надписи как заголовки (h2-h6), или в нужных местах этой страницы расставить якоря (метки) командой Вставка→Якорь с именем…. В результате выполнения команды откроется диалоговое окно Свойство якоря с именем, в котором нужно ввести имя якоря в текстовое поле Имя якоря:.

Процесс создания оглавления внутри одной web-страницы можно автоматизировать следующим образом.

Если после формирования оглавления в документе были созданы новые разделы или подразделы, то следует обновить оглавление для добавления в него новых пунктов командой Вставка→Оглавление→Обновить. Чтобы полностью удалить оглавление необходимо выполнить команду Вставка→Оглавление→Удалить.

1.2.5. Вставка форм.

Редактор Nvu 1.0 позволяет вставлять и редактировать формы с помощью команд меню Вставка→Форма. Для того чтобы организовать форму необходимо установить курсор в нужное место web-страницы и выполнить команду Вставка→Форма→Определить форму. В результате откроется диалоговое окно Свойства формы (рис.4.11), в котором нужно задать следующие параметры.

  • Поле Имя формы: (1) задается имя для создаваемой формы.
  • Поле URL обработчика: (2) задается имя скрипта обрабатывающего данные формы или адрес электронной почты, на которой будут отправлены данные из формы.
  • Выпадающее меню Метод: (3) определяет способ передачи данных (GET способ передачи данных через адресную строку, POST – способ передачи данных в теле HTTP запроса).
  • Кнопка Расширенные (Основные) свойства (4) открывает (закрывает) доступ к еще двум параметрам.
  • Выпадающее меню Тип содержимого: (5) позволяет выбрать тип кодировки данных формы при отправке на web-сервер. (application/x-www-
form-urlencoded - данные формы кодируются как пары имени и значения, используется по умолчанию; multipart/form-data - данные формы кодируются как сообщение с отдельными частями для каждого элемента управления на странице, используется для отправки форм, содержащих файлы; text/plain – данные формы кодируются как открытый текст, без управляющих и форматирующих символов, используется для отправки данных на адрес электронной почты).
Для изменения параметров созданной формы необходимо установить курсор внутри рамки формы и выполнить ту же команду Вставка→Форма→Определить форму и в диалоговом окне Свойства формы внести необходимые изменения. Дополнительно появляется кнопка Удалить форму с помощью которой можно удалить форму с web-страницы.

Вставка полей формы внутри рамки осуществляется с помощью следующих команд меню Вставка→Форма.

Команда Поле формы… - открывает диалоговое окно Свойства поля формы, в котором (выпадающее меню Тип поля) задаются свойства для различных типов полей (часть из них дублируется последующими командами):

Группа Параметры поля позволяет определить имя поля и начальное значения (для определенных типов полей).

Кнопка Расширенные (Основные) свойства открывает (закрывает) доступ к таким параметрам поля как: последовательность перехода, клавиша доступа, размер поля, максимальная длина, допустимые типы содержимого, которые доступны для определенных типов полей.

Команда Изображение формы позволяет вставить в форму картинку.

Команда Текстовое поле позволяет вставить многострочное текстовое поле.

Команда Список выбора позволяет создать выпадающий или прокручивающий список для выбора одного или нескольких элементов.

Команда Определить кнопку позволяет вставить кнопку ввода данных или очистки формы.

Команда Определить метку служит для создания надписи связанной с каким-либо полем формы.

Команда Определить набор полей позволяет организовать внутри формы рамку с именем для группировки других полей.

При выполнении любой из этих команд открывается диалоговое окно Свойства …, в котором задаются имя поля, начальные значения и т.д. Это же окно открывается при двойном щелчке левой кнопки мыши на уже существующее поле.

1.2.6. Шаблоны и редактируемые области.

Шаблоны удобно использовать, когда нужно создать несколько web-страниц, которые имеют одинаковые области. В редакторе Nvu 1.0 можно создавать собственные шаблоны и использовать их как основу для web-страниц.

Шаблон может быть создан двумя способами.

1) Создание пустого шаблона командой Файл→Создать→Пустой шаблон→Создать. В результате открывается пустая страница, на которую нужно добавить и отформатировать содержимое, которое будет оставаться неизменным обычным для web-страниц способом. Далее добавить области которые можно будет изменять командой Вставка→Шаблоны→Вставить редактируемую область. В результате откроется диалоговое окно Вставка редактируемой области (рис. 4.12), в котором необходимо указать следующие параметры.

2) Преобразование одной из web-страниц в шаблон установкой флажка Эта страница - шаблон в диалоговом окне Свойства страницы (команда Формат→Заголовок и свойства страницы…). Далее в нужных местах добавляются редактируемые области, командой описанной выше.

Полученный документ необходимо сохранить в одну из папок сайта как шаблон с расширением *mzt.

Чтобы использовать шаблон для создания новой web-страницы необходимо выполнить команду Файл→Создать→Новый документ из шаблона, выбрать шаблон, нажав кнопку Выбрать файл и нажать кнопку Создать. В полученном документе можно будет изменять только редактируемые области, которые будут обведены бирюзовой рамкой, по центру верхней стороны которой будет вкладка с ее именем и значок с вариантом редактирования. После внесения изменений файл необходимо сохранить как web-страницу, не забыв изменить ее название командой Формат→Заголовок и свойства страницы….

В том случае если на web-страницу созданную с помощью шаблона требуется внести дополнительные изменения, то необходимо выполнить команду Правка→Отделить от шаблона, чтобы отделить документ от шаблона.

1.3. Редактор стилей CSS.

Каскадные таблицы стилей CSS предназначены для определения шрифта, параметров форматирования текста, фоновых цветов и т.д. Применение CSS состоит из двух этапов: определения стиля (селектора) и применения его к объекту. Наиболее распространенными селекторами являются селекторы тэгов, названия которых совпадают с названиями html-тегов и автоматически изменяют облик их содержимого и селекторы классов, которые нужно прописывать вручную.

Существует три метода добавления таблиц стилей на web-страницу.

  1. Использование внутренних стилей для определения стилей непосредственно в том или ином элементе. В редакторе Nvu 1.0 большая часть форматирования описывается именно с помощью внутренних стилей.
  2. Использование внедренных таблиц стилей для определения стилей в начале web-страницы. При этом правила будут применяться только к элементам данного документа.
  3. Использование внешних таблиц стилей для определения стилей отдельно в другом документе. Правила будут применяться к тем документам, к которым будет подключена внешняя таблица.
Для формирования внутренней или внешней таблицы стилей редактор Nvu 1.0 содержит встроенный редактор стилей, который называется CaScadeS, вызывается командой Инструменты→Редактор CSS и имеет два режима работы. Используя встроенный редактор CaScadeS, можно создавать внутренние или внешние таблицы стилей.

Создание внутренней таблицы стилей для текущей страницы.

В окне редактора CaScadeS (рис.4.13) отменить Режим эксперта (1) и нажать на кнопку Новое правило. В правой части окна редактора выбрать тип создаваемого стиля (3): Именованный стиль – будет создаваться селектор класса (4), Стиль, применяемый ко всем элементам этого типа – будет создаваться селектор тэга (5). Далее нажать на кнопку Создать правило стиля (6) и переходя по стилевым вкладкам (Текст, Фон, Обрамление, Бокс, Звук) (7) задать его описание. Вкладка Основное показывает полное описание правила. При создании самого первого правила в левой части окна появится внутренняя таблица стилей (8) с вложенными описаниями стилей.

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

Создание внешней таблицы стилей. Необходимо сохранить web-страницу к которой будет прикрепляться внешняя таблица стилей. Открыть CSS редактор (4.14) и в режиме эксперта (1) нажать на кнопку Новая ссылка (2). В правой части окна (3) заполнить требуемые поля. В поле URL: (4) - задать имя файла внешней таблицы стилей используя латинские буквы, цифры и разрешенные символы и расширение .css. Нажать на кнопку Создать таблицу стилей (5), выделить в левом окне Таблицы стилей и правила получившуюся таблицу и нажать кнопку Обновить (6).

После создания одной или нескольких таблиц стилей создаются правила для каждой. Чтобы использовать определенную таблицу стилей для создания или изменения правил выделите таблицу стилей (7) в левой панели. В правой панели на вкладке Основное отображается информация о таблице стилей. Создание новых правил выполняется, так же как и для внутренней таблицы стилей (кнопка Новое правило). После выхода из редактора (кнопка Закрыть) необходимо сохранить текущую web-страницу. Для того чтобы прикрепить внешнюю таблицу стилей к сохраненной web-странице необходимо выполнить следующие действия. Открыть редактор CSS (рис.4.14) в режиме эксперта (1), нажать на кнопку Новая ссылка (2) и с помощью кнопки Выбрать файл (8) выбрать нужную внешнюю таблицу стилей. Далее нажать на кнопки Создать новую таблицу стилей (5) и Обновить (6). После выхода из редактора (кнопка Закрыть) необходимо сохранить текущую web-страницу. Затем нужно в режиме Код изменить в тэге file:///C:/WWW/web-nvu/style.css type="text/css"> абсолютную ссылку на относительную, для того чтобы можно было переносить web-сайт на другой компьютер или web-сервер.

Изменять стили объектов можно с помощью строки состояния, в которой отображаются тэги конкретного места web-страницы. Щелчок правой кнопки мыши на любой из тэгов открывает контекстное меню со списком команд (рис.4.15).

Команда Inline стили откроет дополнительное меню с подпунктами: Свойства текста;
  • Свойства обрамления;
  • Свойства фона;
  • Свойства бокса;
  • Свойства звука;
  • Извлечь и создать основной стиль.
Выбор любой секции, кроме последней, откроет соответствующую вкладку в Редакторе CSS, на которой можно определить стиль элемента. Пункт Извлечь и создать основной стиль позволяет извлекать информацию о стиле в стилевое правило и сохранять его во внешней или внутренней таблице стилей.

flatik.ru

Программы для создания Web-страниц, самые лучшие программы для создения сайта, помошники

Adobe GoLive 4.01http://www.adobe.com/.  

Пакет Adobe GoLive 4.01 с рабочей средой, напоминающей настольную издательскую программу, - отличное решение для опытных разработчиков, пока не готовых перейти к программированию на HTML.Компоновка страниц в режиме редактирования WYSIWIG сводится к переносу мышью в документ указателей мест заполнения (для графических изображений, управляемых трансформируемых объектов и т. д.). Благодаря удобной монтажной сетке положение объектов можно определять с точностью до пиксела. GoLive скрыто от пользователя преобразует сетку в таблицу HTML. Допускается изменять атрибуты любого объекта, как элемента страницы HTML (например, таблицы), так и внешнего ресурса (в частности, каскадной стилевой таблицы) или частей самой рабочей среды GoLive (например, карты узла).Интерфейс GoLive с закладками позволяет переключаться между различными способами представления документов - режимом редактирования WYSIWIG, внутренним окном предварительного просмотра (отсутствующим в Dreamweaver), редактором кадров, редактором исходного текста и окном структуры узла, в котором для более ясного представления исходного текста HTML служат сворачиваемые теги. К сожалению, исходный текст HTML и окно WYSIWIG нельзя поместить рядом друг с другом, как в Dreamweaver.GoLive отличается мощными средствами формирования сложных Web-эффектов. В программе имеются готовые к использованию операции JavaScript и DHTML, называемые CyberObjects, и разработчики могут переносить мышью из палитры на страницу такие операции, которые выполняют, например, замену изображений или запись куки-файлов. В программе GoLive допускается использование готовых тегов из таких языков, как ColdFusion, JSP (JavaServer Page) и XML; редактировать их можно в окне исходного текста.На основе временной шкалы подготавливаются мультипликационные клипы с ключевыми кадрами и анимационные подсказки. Альтернативный метод заключается в запоминании перемещений мыши для задания траектории движения объекта.Заслуживают внимания многочисленные дополнительные возможности GoLive. Например, во встроенном редакторе JavaScript предусмотрен перенос мышью событий в окно редактирования для построения сценария. А с помощью простого видеоредактора можно вносить изменения в клипы QuickTime.Модуль Dynamic Link, загружаемый с Web-узла фирмы Adobe, позволяет формировать и изменять активные серверные страницы (ASP) с использованием WYSIWIG-инструментов редактирования GoLive. В модуле Dynamic Link реализованы лишь базовые функции ASP, такие, как привязка указателя места заполнения для текста или изображения к полям базы данных. Но благодаря этому модулю художники-графики впервые увидели свет в конце мрачного туннеля, на который был похож процесс проектирования программ, совместимых с базами данных. В GoLive нет ни заранее подготовленных шаблонов, ни "мастеров". Однако можно автоматизировать работу, составляя собственные шаблоны или используя динамические компоненты для указания на внешние программы HTML.Удачны функции управления узлом. Вы можете организовывать файлы и папки, генерировать карту узла и централизовывать дополнительные ресурсы, например, внешние указатели URL и цветовые палитры. Между страницами устанавливаются ясные взаимосвязи, а добавление родительских, родственных и дочерних страниц не представляет труда. GoLive отслеживает состояние узла, предупреждая о потенциальных ошибках (например, о нарушенных связях и потерянных файлах), и автоматически исправляет внутренние ссылки.Благодаря удачным средствам FTP публиковать материалы очень легко. Можно отображать локальные и удаленные каталоги, автоматически синхронизировать их информационное наполнение и использовать пассивный метод для пересылки данных через брандмауэры. Компоненты для загрузки выбираются из полезного меню модулей.Пакет Adobe GoLive - серьезный конкурент Dreamweaver, однако последний удобнее в работе и обладает более широкими возможностями расширения. Тем не менее GoLive - мощный инструмент проектирования для художников, которые хотят полностью контролировать эстетическое оформление узла, не углубляясь в чащу исходного текста HTML. 

Dreamweaver 3http://www.macromedia.com/.  

Сложный, мощный продукт Dreamweaver 3 фирмы Macromedia предназначен для профессиональных авторов Web, создающих узлы, в которых безупречно соединены разнообразные высокоуровневые элементы. Благодаря входящему в комплект поставки пакету Web-графики Macromedia Fireworks 3 возможности Dreamweaver значительно шире, чем у других продуктов в обзоре.Элегантный интерфейс Dreamweaver с множеством плавающих окон и изобилием палитр в высшей степени интуитивно понятен. Он располагает удобным селектором тегов и выдает в реальном времени информацию о размере файлов и прогнозируемом времени загрузки материалов узла в браузер пользователя. К сожалению, функции управления окнами Dreamweaver ограниченны.В процессе редактирования в окне WYSIWIG разрешается переносить с помощью мыши объекты из палитры в рабочую область и назначать атрибуты. В палитре Objects (Объекты) могут содержаться объекты, разработанные в других фирмах, например RealMedia. При размещении объекта, генерируемого программой Fireworks, исходный текст автоматически встраивается в нужные места.Концепция слоев обеспечивает гибкость компоновки страниц Dreamweaver. Слои преобразуются в таблицы для устаревших версий браузеров с помощью удобной команды. Программа Dreamweaver совместима как со стилями CSS, так и встроенными стилями HTML.В отличие от HoTMetaL PRO, в Dreamweaver не предъявляется строгих требований к исходному тексту. Поэтому продукт совместим с Web-узлами, построенными с помощью других программ. Кроме того, он без изменений воспринимает сценарии, составленные на таких языках, как ASP, ColdFusion и JSP. На наших тестах Dreamweaver превосходно справился со страницей ASP и даже отобразил сценарий в качестве пиктограммы в окне WYSIWIG.Исходный текст HTML можно редактировать непосредственно или воспользоваться чрезвычайно удобным редактором Quick Tag Editor. Существует несколько способов внесения глобальных изменений, в том числе с помощью охватывающей весь узел функции поиска с заменой и с использованием библиотеки Library, где редактирование исходного варианта объекта приводит к обновлению всех его экземпляров. В состав Dreamweaver входит очень мощный HTML-редактор HomeSite (также рассматривается в нашем обзоре).Как и Adobe GoLive, пакет Dreamweaver прекрасно подходит для проектирования интерактивных и анимированных Web-узлов. Диалоговые окна позволяют связывать эффекты с перемещениями мыши; временную шкалу можно использовать для создания анимационных клипов, вставляя ключевые кадры или прокладывая траекторию движения непосредственно в рабочем пространстве. Но из-за отсутствия встроенного окна предварительного просмотра для проверки компоновки и интерактивных элементов приходится запускать внешний браузер.Dreamweaver располагает мощными функциями FTP и управления узлом, в том числе интерактивной картой узла, окном для одновременного просмотра локальных и удаленных каталогов, функциями пассивных пересылок FTP и автоматической синхронизации. Уникальна возможность проверки поступающих на сервер и исходящих из него файлов в процессе совместной работы группы авторов.Программа может проверять и обновлять внутренние указатели URL, но не внешние адреса. В ориентированном на профессиональные применения пакете Dreamweaver нет "мастеров" для проектирования страниц, графических заготовок или готовых к использованию шаблонов. К счастью, любой документ можно сохранить в качестве шаблона и даже указать защищенные и доступные для редактирования участки. Кроме того, в палитре History (Предыстория) предусмотрена автоматизация функций путем повторения операций и их сохранения в качестве макрокоманд.Еще более важное значение имеют возможности расширения и настраивания Dreamweaver на конкретное применение. Вы можете изменить интерфейс, отредактировав XML-файл, присоединить XML-заметки для обмена информацией с другими членами проектной группы и добавить новые функции, используя JavaScript. Кроме того, Dreamweaver совместим со сложными сценариями, необходимыми для работы с серверными базами данных и программами электронной коммерции.Dreamweaver - сложный продукт, предназначенный для опытных разработчиков Web. Однако усилия, затраченные на освоение программы, окупаются созданием очень привлекательного и совершенного Web-узла. 

HomeSite 4.5.1http://www.allaire.com/

 

Мысль о том, чтобы слепо передать управление авторской среде WYSIWIG, вызывает содрогание у многих опытных программистов. Для таких пользователей предпочтительным инструментом станет пакет HomeSite 4.5.1 фирмы Allaire. Несмотря на некоторую необычность, программа обеспечивает быстрое и четкое ручное составление исходных текстов. Она наделена такими удобными элементами, как всплывающие списки атрибутов тегов, вставляемые одним щелчком мыши.Принимаемый по умолчанию интерфейс представляет собой редактор исходного текста HTML с позиционируемыми инструментальными линейками и панелью ресурсов. Переключение между редактором исходного текста, окном предварительного просмотра и простым WYSIWIG-редактором производится с помощью закладок. Желающие использовать преимущества различных подходов к проектированию узлов могут приобрести HomeSite в составе пакета Dreamweaver фирмы Macromedia (также рассматриваемого в обзоре).В состав HomeSite входят шаблоны и "мастера" для построения простых страниц. Чтобы добавить подготовленный пользователем шаблон в диалоговое окно File | New, достаточно просто поместить HTML-файл в папку шаблонов. Дополнительные "мастера" помогут вставить мультимедиа-элементы и спроектировать DHTML-эффекты. Предусмотрено даже создание специализированных "мастеров" и диалоговых окон.Все основные элементы интерфейса - в том числе навигационные карты, древовидная структура текущей страницы, справочно-консультационная система и панель ресурсов со списками файлов - могут быть плавающими или занимать постоянное положение. Особенно полезна возможность повторно использовать фрагменты исходного текста.Окно редактирования исходного текста чрезвычайно удобно. Страницы можно открывать непосредственно из Web и предварительно просматривать в любом инсталлированном браузере. Допускается редактирование двух фрагментов одного файла в отдельных окнах - неоценимая возможность при построении страниц с таблицами. В окне редактирования исходного текста можно увидеть миниатюрные изображения любых графических файлов текущей папки и перенести их мышью прямо в редактор. Иностранные и специальные символы автоматически преобразовываются в эквивалентные коды HTML. И наконец, вы можете отменить все автоматизированные операции.Нам понравилась возможность сворачивать теги, что облегчает работу над сложными исходными текстами. Настраиваемая цветная маркировка помогает выделять различные теги и фрагменты исходного текста.HomeSite тесно интегрирован с программами независимых поставщиков; в качестве редактора CSS используется превосходный продукт TopStyle Lite фирмы Bradbury Software. Этот редактор не вносит автоматических изменений в исходный текст, если не запущена встроенная программа оптимизации исходного текста или поставляемая вместе с продуктом утилита HTML Tidy. Два имеющихся в составе пакета инструмента проверки составляют отчеты об ошибках в исходном тексте.Функции публикации отличаются гибкостью. С помощью закладки управления проектом пользователь управляет всеми файлами, подлежащими загрузке на сервер. До тех пор пока файлы проекта не подготовлены к загрузке на сервер, их можно хранить в различных папках и даже на разных машинах. Встроенная функция пересылки FTP работает под управлением сценариев JavaScript и VBScript. К сожалению, для выполнения таким способом даже простейших операций необходимы терпение и технические знания.Пользователи HomeSite со стажем уже знакомы с недостатками пакета, которые давно пора исправить. Клавиатура удобна для работы собственно с редактором, но не с панелью ресурсов. Инструментальная панель специальных символов слишком широка для большинства мониторов, а изменение ее размеров не предусмотрено. Неудобная и неполная справочно-консультационная система на базе HTML недоступна из многих диалоговых окон. То обстоятельство, что даже при таких недостатках HomeSite остается лучшим редактором исходного текста HTML, свидетельствует о несомненных достоинствах продукта.Уровень автоматизации HomeSite ниже, чем у программы Microsoft FrontPage 2000, которая генерирует навигационные панели и выполняет преобразование стилей в масштабах всего узла. Но если вы хотите составить собственный исходный текст, то HomeSite - единственный инструмент, который вам нужен. 

HoTMetaL PRO 6.0http://www.softquad.com/.  

Несмотря на заверения поставщика, что HoTMetaL PRO 6.0 отвечает потребностям как начинающих, так и опытных разработчиков HTML, этот продукт фирмы SoftQuad лучше всего подойдет для опытных программистов, осваивавших свое ремесло на ранних версиях HoTMetaL. Все остальные будут разочарованы неудачным интерфейсом и нетрадиционным подходом к редактированию исходного текста HTML.Документ HTML может быть представлен в четырех видах, в том числе в окнах исходного текста, редактирования WYSIWIG и предварительного просмотра на базе Microsoft Internet Explorer 5.0. В выбираемом по умолчанию окне под названием Tags On исходные тексты сценариев вставляются прямо в WYSIWIG-представление страниц. Этот режим очень удобен для изучения HTML.В программе имеются контекстно-чувствительные палитры HTML-элементов, атрибутов и событий, которые облегчают подготовку безошибочного исходного текста. Помимо того что в HoTMetaL приняты строгие соглашения о структуре документов, проверка исходного текста HTML производится в процессе его проектирования или импорта, что также чрезвычайно важно. Такая мера гарантирует, что узел будет совместим с разнообразными браузерами, однако при этом затрудняется работа с узлами, содержащими нестандартный исходный текст, например сценарии ASP или ColdFusion.К нововведениям версии 6.0 относится возможность импортировать документы HTML, в том числе и нестандартный исходный текст. Эта функция полезна для управления узлом, построенным с помощью другого HTML-редактора, но она работает только в окне исходного текста, что, несомненно, является серьезным недостатком.К достоинствам HoTMetaL можно отнести функции управления узлом и дистанционного редактирования. Исследовать узел или внести в него изменения можно в окне Web (отображающем навигационные связи) или Page (в котором показаны все связи текущей страницы). HoTMetaL отслеживает внутренние адреса URL и автоматически восстанавливает нарушенные связи. Программа также проверяет корректность внешних адресов HTTP, но не адресов FTP.В пакете HoTMetaL предусмотрено несколько уровней автоматизации. В отличие от Adobe GoLive и Macromedia Dreamweaver 3, для генерации новых узлов в программе используется "мастер". В диспетчере ресурсов HoTMetaL задействовано несколько сценариев JavaScript. Но во многих случаях эти функции слабо интегрированы с программой. Например, "мастер" Site Maker (Строитель узлов) строит узел только с фиксированной структурой, плохо настраивается на конкретное применение и не может быть вызван из среды основной программы для обновления узла. Некоторые ресурсы JavaScript, такие, как "мастер" для формирования управляемых трансформируемых изображений, достаточно просты, чтобы их могли применять непрограммисты. Однако другие ресурсы, например сценарий для проверки совместимости с браузером, просто вставляют шаблонный программный код в страницу, и пользователю приходится редактировать исходный текст.Как и в Dreamweaver, в HoTMetaL PRO применяется объектная документная модель DOM (Document Object Model), которая служит для записи или составления макрокоманд и позволяет применять любые стандартные языки сценариев для настройки интерфейса.Совместимая с CSS программа располагает пользовательским интерфейсом для редактирования основных атрибутов, таких, как шрифты и поля. Несмотря на способность определять абсолютные координаты объекта, программа не имеет WYSIWIG-механизма размещения элементов страницы: координаты приходится вводить вручную.Мощный инструментарий FTP используется для отображения локальных и удаленных каталогов, прохождения через брандмауэры и синхронизации двух версий узла. Завершенный вид пакету придают такие дополнительные программы, как PhotoImpact SE фирмы Ulead, WS_FTP Pro компании Ipswitch, "мастер" импорта баз данных и язык сценариев MIVA для организации электронной торговли.HoTMetaL - мощный продукт, для освоения которого требуется время. Однако он привлекателен для авторов, которые высоко ценят строгость соблюдения стандарта HTML. В противном случае следует обратиться к пакетам Adobe GoLive и Dreamweaver, более мощным и удобным в использовании. 

Microsoft FrontPage 2000www.microsoft.com/frontpage.  

Таланты специалистов Microsoft в области автоматизации и интеграции продуктов в полной мере проявились при разработке пакета FrontPage 2000. Пакет станет отличным выбором для начинающих, но его гибкость и обширные функциональные возможности понравятся и опытным программистам.Многооконный интерфейс FrontPage подобен интерфейсам других программ Microsoft Office, например Microsoft Outlook. Главное окно служит для редактирования и решения других задач, а панель пиктограмм -- для переключения между режимами просмотра. Удобен доступ к виду текущей страницы, списку файлов текущей папки, отчетам о состоянии ссылок и статистике узла, к структурной схеме узла и составленному пользователем списку задач.Переключение между режимами WYSIWIG, HTML и предварительного просмотра производится с помощью закладок. Процедуры редактирования страниц поразительно похожи на операции Microsoft Word, большинство инструментов расположено в аналогичных меню и инструментальных панелях. Как и в HoTMetaL PRO 6.0, в программе FrontPage предусмотрена возможность показа тегов в режиме WYSIWIG.FrontPage - быстрый и надежный пакет для создания Web-узлов малых предприятий. Построенные с использованием "мастеров" узлы содержат поля для ввода текста; очень привлекательное оформление узлов обусловлено применением одних из лучших в обзоре шаблонов. Вы можете указать, следует ли размещать в навигационных панелях ссылки на родительские, дочерние или родственные страницы, однако нельзя уточнить свой выбор, добавляя или удаляя конкретные ссылки, как в программе Fusion.Начинающие авторы по достоинству оценят превосходные функции FrontPage, обеспечивающие прозрачное управление гиперсвязями, изображениями и другими элементами. Автоматизированные функции - в частности, преобразования файлов изображений в Web-совместимые форматы и копирования изображений в папку Web-страницы, на которой они отображаются, - работают настолько безупречно, что их даже не замечаешь.Так же как и в наиболее похожей программе NetObjects Fusion 5.0, в FrontPage автоматически изменяется стилевое оформление всего узла при смене заготовок графических проектов и автоматически перестраиваются навигационные панели и ссылки при добавлении или переименовании страниц. В программе FrontPage предусмотрена также проверка внешних и внутренних гиперсвязей.FrontPage безупречно импортирует большинство стандартных форматов, в том числе Office. Правда, мы столкнулись с трудностями при обращении к одной из электронных таблиц Excel. Легко импортируются локальные и удаленные Web-узлы. Но если импортируемый узел был построен без применения FrontPage, то для беспрепятственных перемещений по всему узлу необходимо отбуксировать пиктограммы каждой отдельной страницы в древовидную навигационную схему узла.Благодаря множеству анимационных DHTML-эффектов изображения могут внезапно возникать на странице или "влетать" на нее по спиральной траектории. К сожалению, невозможно записывать специальные анимационные эффекты, как это делается в программах Dreamweaver, Adobe GoLive 4.01 и Namo WebEditor. Графические и текстовые блоки можно позиционировать с точностью до целого числа пикселов. Однако без вертикальных и горизонтальных направляющих линеек выполнить процедуру позиционирования в окне редактирования сложно. Инсталлировав на Web-сервере Windows NT или UNIX модули расширения FrontPage Server Extensions, вы сможете воспользоваться преимуществами наиболее впечатляющих функций FrontPage. Например, при добавлении документов к Web-узлу автоматически формируются ссылки на новые файлы. Модули FrontPage Server Extensions необходимы и для работы с формами. Работа с базами данных обеспечивается Web-сервером, совместимым с Microsoft Active Server Pages.FrontPage - надежный и удобный пакет, в доступном интерфейсе которого реализован ряд сложных функций. В программе отсутствуют некоторые передовые возможности, ценимые опытными специалистами, но пользователи из сферы малого бизнеса с помощью FrontPage смогут решить большинство стоящих перед ними задач с минимальными затратами времени. 

Namo WebEditorhttp://www.sterlingweb.com/.  

В распоряжение пользователей Namo WebEditor 3.06 предоставляются инструменты WYSIWIG-редактирования Web-страниц и мощные функции, в частности DHTML-анимации; при этом пакет в несколько раз дешевле, чем программы Dreamweaver 3 фирмы Macromedia и Adobe GoLive 4.01. Вместе с программой поставляются простейшие взаимозаменяемые заготовки графических проектов, похожие на имеющиеся в пакетах Microsoft FrontPage 2000 и NetObjects Fusion 5.0.1.Интерфейс продукта подобен интерфейсам HomeSite 4.5 фирмы Allaire и FrontPage. В панели ресурсов с закладками отображаются списки файлов, инструментарий управления проектом и схема ссылок текущей страницы. В нижней части окна редактирования расположен ряд закладок для переключения между режимами HTML, WYSIWIG и предварительного просмотра. Другой ряд закладок, размещенный в верхней части окна, служит для перехода между открытыми страницами. В отдельных подокнах удобно просматривать две или несколько открытых страниц одновременно, чего нельзя сделать в программе FrontPage. В факультативных отдельных плавающих окнах перечислены слои DHTML и временные шкалы.Предусматривается формирование страниц при помощи набора шаблонных макетов. Большинство шаблонов состоит из двух или нескольких колонок с заполнителями места заголовков и текста, которые заменяются собственными материалами автора. Графические заготовки позволяют выбрать единообразный фон для всех страниц проекта или всех файлов, открытых одновременно. Затем в любые места страницы вставляются заранее заготовленные объекты, такие, как кнопки и банеры. При переходе к другим тематическим заготовкам все кнопки и банеры автоматически изменяются в соответствии с новым проектом.Из-за невозможности автоматически строить и обновлять навигационные линейки функции Namo для работы с заготовками проектов не так мощны, как в программах FrontPage и Fusion, но отличаются большей гибкостью. Объекты разрешается вставлять в любое место страницы, а не только в места, отведенные для этой цели разработчиком заготовки. С помощью "мастера" можно построить целый узлы с заранее позиционированными объектами, однако из-за его ограниченных возможностей это вряд ли практически целесообразно.Выдающееся достоинство Namo WebEditor - простота выполнения операций, относящихся к числу сложных в большинстве других продуктов. Программа загрузки материалов на сервер снабжена двухоконным интерфейсом с древовидным списком всех локальных файлов текущего проекта и всех файлов на удаленном сервере. Вы можете отметить флажками все файлы, подлежащие загрузке, и воспользоваться кнопками для выбора всех измененных файлов или всех файлов, открытых для редактирования.Для составления навигационных карт используется инструментарий рисования, в том числе палитра, всплывающая всякий раз, когда пользователь выбирает изображение на странице. При сохранении страницы на диске файлы изображений и другие ресурсы можно копировать в раздел той папки, где хранится страница. Другие передовые функции, такие, как запись анимационных клипов на временной шкале, оказываются столь же простыми в использовании после того как вы отыщете их в глубине запутанной системы меню.Интерфейс организован несколько неудобно. Переключаться между режимом WYSIWIG и редактирования исходного текста можно с помощью клавиатуры, но для перехода в окно предварительного просмотра необходимо использовать мышь. При попытке импортировать несуществующий узел в диалоговом окне появилось сообщение о том, что узел был загружен. Более того, при импортировании страницы ее исходный текст оказывается слегка переформатированным.В целом Namo WebEditor отличается сочетанием четкого интерфейса и ряда мощных инструментов. Пакет с добротными функциональными возможностями и привлекательной ценой достоин вашего внимания. 

NetObjects Fusion 5.0http://www.netobjects.com/.  

Большинство авторских пакетов Web похожи на текстовые процессоры, а NetObjects Fusion функционирует подобно настольной издательской системе. Благодаря способности позиционировать изображения с точностью до пиксела и фиксировать элементы в отведенных для них местах, Fusion - идеальная программа для построения насыщенных графикой узлов. Авторам, желающим проектировать узлы с объемными текстовыми материалами и иметь полный контроль над исходным текстом HTML, лучше выбрать другой пакет.В программе Fusion реализовано множество видов представления данных, в том числе в главном окне редактирования, окне древовидной структуры узла, меню допустимых графических стилей, каталоге файлов, публикуемых на локальном диске или удаленном сервере, и в списках текущих файлов, связей, переменных и подключаемых баз данных узла. Инструментальная линейка в верхней части экрана позволяет без труда переключаться между видами.Процесс построения узла начинается с запуска "мастера" или формирования одностраничного узла на основе избранного стиля. Стиль каждого узла определяется использованием банеров, кнопок, фонов и настраиваемого макета страницы с навигационными кнопками слева и текстовых ссылок снизу. Мы пришли к выводу, что с помощью стилей можно придать узлу эффектный вид.Отметим, что нельзя сразу приступить к вводу текста и размещению элементов. Как принято в настольных издательских программах, для ввода текста, таблиц, форм и графических элементов необходимо сначала построить блок для размещения добавляемого элемента. Альтернативный метод заключается в "буксировке" мышью графического элемента непосредственно на страницу из Windows Explorer.С помощью пиксельных линеек можно проводить направляющие линии для точного размещения элементов на нескольких страницах - особо полезная функция проектирования. Разрешается копировать страницы и использовать их в качестве шаблонов для других страниц.Стили узлов Fusion более разнообразны, чем негибкие заготовки проектов FrontPage, но переключение стилей может привести к нежелательным последствиям. Если в новом стиле используется более широкий банер, то Fusion расширяет все страницы узла до ширины нового банера. Однако при последующем переключении на более узкий банер страницы не суживаются и для возврата к исходному виду вам придется обратиться к резервному файлу.Базовые операции верстки довольно просты, но освоить эффекты DHTML сложно. Однако, изучив запутанные диалоговые окна, вы сможете производить сложные действия. К сожалению, в программе Fusion нельзя записывать действия на временной шкале, как в Macromedia Dreamweaver 3 и Namo WebEditor.При добавлении, переименовании и перемещении страниц навигационные связи автоматически обновляются. Нам особенно понравилась возможность выбора нескольких страниц в окне узла и добавления и удаления навигационного инструментария этих страниц одним щелчком. Как и FrontPage, пакет Fusion обеспечивает прозрачное управление всеми элементами, внесенными автором на страницу, благодаря чему отпадает необходимость в ручном управлении файлами при публикации узла.Очень удобно, что заглавная страница Fusion в Интернете представляет собой интерфейс Web-узла компании NetObjects. Здесь находятся ссылки на учебные пособия, 200 дополнительных стилей узлов и различные модули расширения. Например, один из бесплатных модулей расширения (который мы рекомендуем лишь опытным пользователям) позволяет демонстрировать на узлах, построенных с помощью пакета Fusion, динамические данные. Другой компонент служит для построения всплывающих окон JavaScript. В узел Fusion, на котором используются данные стандартных форматов, можно встроить миниатюрную базу данных.Так же как и в программе TrellixWeb, в пакете Fusion в процессе редактирования используется фирменный формат файлов, а исходный текст HTML генерируется лишь при предварительном просмотре или публикации страницы. А поскольку импортированные в программу Fusion страницы подвергаются переформатированию, мы пришли к выводу, что продукт полезен лишь для построения новых узлов, но не для внесения изменений в узлы, построенные с помощью других пакетов.Несмотря на небольшие изъяны, Fusion - отличный инструмент для построения элегантных и уникальных узлов с минимальными усилиями. 

TrellixWeb 2.6http://www.trellix.com/.  

Отличающийся чрезвычайной простотой пакет TrellixWeb предназначен для потребителей и владельцев малых предприятий, которые хотят строить несложные узлы, совершенно не изучая язык HTML. В пакете отсутствуют передовые функции и даже не предусмотрено средств редактирования HTML, однако с помощью шаблонов и "мастеров" TrellixWeb можно в течение нескольких минут построить вполне привлекательный узел.Работа с TrellixWeb во многом напоминает работу со стандартным офисным пакетом. Инструментальные панели в стиле Microsoft Office, заготовки проектов и указатели места заполнения хорошо знакомы пользователям пакета PowerPoint. Начать работу над узлом можно как с шаблона, так и с "мастера". Кроме выполнения стандартных операций (таких, как выбор заготовки проекта), перед началом процедуры генерирования узла пользователь может выбрать название и реорганизовать страницы.В верхней части рабочего пространства размещена схематическая карта узла, обеспечивающая доступ к ограниченным функциям управления узлом. Помимо добавления и реорганизации страниц можно устанавливать иерархические и последовательные отношения между страницами. Остальная часть экрана занята полноразмерным видом текущей страницы, близким к WYSIWIG.Поскольку TrellixWeb работает с собственным форматом и генерирует исходный текст HTML только в ходе операций экспорта, предварительный вид страницы не всегда точно соответствует ее представлению в браузере. В результате начинающим авторам проще управлять файлами, сохраняя все страницы, текст и графику узла в единственном TLX-файле. К сожалению, для предварительного просмотра ключевых элементов Web-узла (например, анимированных GIF-изображений и интерактивных элементов) необходимо вызвать внешний браузер.Страницы TrellixWeb состоят из отдельных кадров заголовка, основной области и факультативных пограничных участков. Принимаемая по умолчанию компоновка каждого кадра довольно проста; текст и графика размещаются с текущей позиции курсора.В программе TrellixWeb нельзя пользоваться каскадными таблицами стилей (CSS), вместо этого внутренние текстовые стили записываются как простые теги . Не предусмотрено и абсолютное позиционирование объектов. Для построения страниц с несколькими колонками необходимо использовать редактор таблиц.TrellixWeb не выполнила значительную часть тестового сценария лаборатории PC Magazine Labs, поскольку программа не импортирует существующие Web-узлы. Она не позволяет генерировать и сложные Web-эффекты, в частности управляемые трансформируемые объекты. Однако в программе предусмотрено несколько обходных способов, при помощи которых можно дополнить ваш узел сложными элементами.Страницы-контейнеры позволяют делать ссылки или захватывать HTML-документы. Ссылки - предпочтительный метод, безупречно работающий в TrellixWeb. Для захвата HTML-ресурса достаточно щелкнуть на нем мышью, но для выделения связанных ресурсов, таких, как URL-указатели изображений, приходится использовать простое окно редактирования текста.Значительно более сильное впечатление производит Web Gems - способ захвата HTML-элементов на партнерских узлах в Интернете. В сущности, фирма Trellix предоставляет дружественный интерфейс, через который можно выйти в Web и импортировать программный код, превратив свой узел в филиал торгового киоска, завести гостевую книгу или отслеживать статистические показатели узла. Вставляя текст HTML, генерируемый этими узлами, в диалоговое окно Web Gem, пользователи избавляются от необходимости редактировать исходную программу HTML.Trellix экспортирует готовый к публикации узел в HTML. Процедура FTP безупречна. Тем не менее программа TrellixWeb нуждается в некоторых дополнениях. Даже для проектирования простейших узлов в программе не хватает возможности напрямую работать с анимированными изображениями GIF и простого метода построения страниц со многими колонками. Следует полнее использовать мощную функциональность Web Gems.Несмотря на указанные недостатки, программа TrellixWeb прекрасно удовлетворяет элементарные нужды начинающих пользователей. Хотя в TrellixWeb нет ярких эффектов, имеющихся в таких продуктах начального уровня, как FrontPage или NetObjects Fusion, она станет прекрасным выбором для авторов, желающих быстро опубликовать простой узел, обеспечивающий их присутствие в Web.

наверх

 

УНИКАЛЬНАЯ ПАРТНЕРСКАЯ ПРОГРАММА

life4money.narod.ru

Редактирование web страницы онлайн

Меня на днях попросили отредактировать страницу на сайте. Нужно было всего лишь поменять пару строчек. То есть отредактировать HTML страницу и залить ее на сайт через FTP. Для старой доброй винды я использовал NVU и FileZilla, но так как я решил полностью перейти на Chrome OS, то теперь я обращаюсь к поиском Google чаще.

Получив все пароли и явки от web-сайта я приступил к поиску того как это можно сделать на моем Chromebook

Так как Chrome OS представляет собой операционную систему ориентированную для работы в “облаке” , то оказалось очень мало инструментов для редактирования.

FTP+HTML edit

Для доступа к сайту через FTP google предложил использовать

Net2FTP

SME   (Chrome Web Store)

Easy WebContent

NetFTP

“Connect to your FTP server and start editing your website now.”

Оказался хорошим сервисом для загрузки и редактирования web-сайта.

На сайте нет обязательной регистрации. Достаточно ввести данные FTP сервера

И получить доступ к сайту

C возможность редактирования HTML.

Но есть огромный МИНУС- он не понимает русский язык.

Есть ограничение на размер загружаемого файла в 25Мб

Из минусов

Возможности

SME

После регистрации вы получите  5Gb облачного хранилища и возможность дополнительно подключить  3 своих “облака” в том числе и FTP

После регистрации и входа под свои аккаунтом можно

Мне нужен был доступ через FTP к сайту, поэтому я выбрал “add a Cloud Provider”  и указал данные хоста

В файловом менеджере появится новая папка с сайтом

Есть навигация по FTP с восможность редактировать HTML  онлайн

и самое важное поддержкой русского языка

Из минусов

Возможности

Easy WebContent

Нужна обязательная регистрация.

После успешной регистрации можно добавить свой сайт в список редактируемых или создать индивидуальный  с адресом sitename.easywebcontent.com

Выбираем “Редактировать существующий сайт” и прописываем данные хоста

После заполнения всех данных повиться вкладка сайта, который можно редактировать.

Огромное приемущество данного вида редактирования – это хорошая админская панель

Но есть и минусы. Для публикации отредактированой страницы на своем сайте придется сделать Upgrade до полной версии. Стоимость от 22$ в месяц

Из минусов

Из плюсов

Вместо итога

Хотя в процессе поисков я натыкался на многие другие редакторы и облачные  платформы IDE для моих нужд оптимальным оказался  SME.

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

Похожее

inevidimka.ru

10 бесплатных редакторов для веб страниц ~ Страницы Интернета

Каждый веб дизайнер и кодер нуждается в хорошем редакторе веб страниц для создания и редактирования HTML, CSS и JavaScript кода. Notepad (Windows) и TextEdit (Mac) — отличные инструменты для начала, но вскоре по мере накопления опыта работы захочется использовать более солидный и удобный инструмент.

Существует сотни отличных редакторов, среди которых можно подобрать подходящий, однако многие из них являются платными. А если не хочется нарушать авторское право, а бюджет не располагает средствами на покупку коммерческого продукта? В данной статье рассматриваются несколько отличных бесплатных редакторов.

Если говорить о категориях, то редакторы веб страниц можно разделить на две группы:

KompoZer (Windows, Mac, Linux)

KompoZer — отличный выбор, если вам нужен визуальный редактор в условиях ограниченного бюджета

KompoZer - это единственный WYSIWYG редактор в списке. Очень многие считают, что это лучший из бесплатных редакторов WYSIWYG, доступных на сегодняшний день. Это редактор с открытым исходным кодом, который является потомком почтенного Netscape Composer. Вы можете редактировать страницы в трёх режимах:

Можно легко просмотреть страницу в редакторе, как она будет выглядеть в браузере.

KompoZer поддерживает все элементы HTML, включая изображения, таблицы и формы. В нем также есть встроенный редактор CSS для модифицирования стилей, менеджер сайта работы с файлами на вашем сайте, и свойство "Опубликовать" для загрузки сайта через FTP.

В отличие от других WYSIWYG редакторов, KompoZer старается сохранить вашу разметку. насколько это возможно. Конечно, он выглядит не так презентабельно, как коммерческие редакторы (например, Dreamweaver), но его очень просто освоить и , если нужно обеспечить визуальное редактирование веб страниц в условиях урезанного бюджета, то это отличный выбор.

Komodo Edit (Windows, Mac, Linux)

Komodo Edit - хороший редактор, простой в освоении, но мощный и расширяемый

Komodo Edit - это редактор с открытым исходным кодом, основанный на коммерческом продукте Komodo IDE (Интегрированная среда разработки). Это легко расширяемая система, благодаря использованию поддержки расширений, подобной той, которая используется в Firefox, и большому количеству доступных расширений. Хотя это и редактор общего назначения, он поддерживает HTML и CSS, и имеет свойство контекстного автозаполнения HTML тегов и свойств CSS, а также коллекцию вставок кода для различных элементов HTML. Для того, чтобы получить максимум от использования Komodo, нужно установить расширение HTML Toolkit, которое содержит такие чудесные свойства как, автозакрытие тегов, предварительный просмотр вида CSS, и генератор временного текста.

Komodo Edit позволяет просматривать редактируемые страницы в любом установленном браузере, или использовать встроенный браузер в отдельном окне, так что можно редактировать и видеть результат изменений одновременно.

Редактор имеет встроенную функцию загрузки файлов на сайт (FTP, FTPS, SFTP, или SCP), а также вы можете чудненько группировать ваши файлы с помощью опции менеджера проекта.

Очень полезная функция . Она выделяет текущий основной блок HTML, например, текущий закрытый элемент div или ul. Очень удобная функция, когда нужно выделить целую секцию на странице для копирования или перемещения.

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

Aptana Studio (Windows, Mac, Linux)

Aptana Studio - это полноценная интегрированная среда разработки веб приложений с большим набором плагинов. Хотя вы можете использовать ее только как редактор HTML/CSS/JavaScript кода

Aptana Studio - полноценная среда разработки веб приложений, которая особенно хорошо подходит для работы с Ajax. Она позволяет редактировать HTML, CSS и JavaScript файлы, и много других языков веб программирования поддерживаются плагинами. Также возможно предварительно просматривать динамические веб приложения с использованием встроенного сервера Jetty Web.

Редактор Aptana отлично обрабатывает HTML и CSS: автозавершение кода CSS и HTML, и прекрасная подсветка кода. В действительности, автозаполнение  HTML очень функционально для бесплатного редактора: теги HTML автоматически закрываются и всплывающие подсказки содержат информацию по синтаксису.

Aptana имеет отличную систему управления проектом, которая позволяет хранить все файлы вместе и использовать загрузку на сайт через FTP, SFTP и FTPS.

С другой стороны,  Aptana - это достаточно большая программа, с огромным количеством настроек, плагинов и опций, которое может напугать новичка. Она также может быть иногда очень неповоротливой и нестабильной. (Другой незначительный пустячок: стандартное сочетание клавиш для открытия файла  — Control/Command-O — вместо этого открывает окно Outline!)

Несмотря на недостатки, Aptana Studio является отличным выбором в том случае, если вам нужна полноценная Web IDE, и ее также можно использовать как простой редактор HTML/CSS/JavaScript.

Notepad++ (Windows)

Notepad++ - отличная замена для Notepad из Windows. Несмотря на то, что у него нет такого набора опций, как у других редакторов, он отлично подходит для редактирования HTML, CSS, JavaScript и других файлов с кодом

Notepad++ - это редактор с открытым исходным кодом, который является отличной заменой Windows Notepad. Он поддерживает вкладки и подсветку синтаксиса HTML и CSS.

Он имеет отличную систему поиска и замены, которая включает поддержку регулярных выражений и поиск по списку файлов.

Notepad++ имеет также систему плагинов, позволяющую расширять возможности редактора дополнительными опциями, например, загрузкой через FTP.

Другие полезные для веб разработчика функции:

PSPad (Windows)

PSPad  - другой редактор общего назначения для Windows с большим набором функций полезных для HTML и CSS кодеров

Как и Notepad++, PSPad  - редактор общего назначения для Windows. У него есть опции подсветки синтаксиса и автозавершения, и он хорошо подходит для редактирования HTML и CSS кода. Среди встроенных функций есть:

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

PSPad также имеет встроенный FTP клиент и систему записи макро команд.

jEdit (Windows, Mac, Linux)

jEdit - это кросс-платформенный редактор текста с мощными функциями макро команда и плагинов. Установите плагин XML, если вам нужно редактировать веб страницы

jEdit - это редактор текста с открытым исходным кодом, написанный на Java. С положительной стороны он великолепно работает под Windows, Mac OS X и Linux. С другой, отрицательной стороны интерфейс редактора неуклюжий с нестандартными виджетами, диалогами и горячим клавишами. Однако, если вы сможете преодолеть недостатки интерфейса, то увидите, что jEdit - это отличный редактор с большими возможностями. jEdit имеет все функции, которые можно ожидать от подходящего редактора, включая подсветку синтаксиса и макросы. Однако, чтобы усилить jEdit в сфере веб кодирования, нужно установить плагин XML (это легко сделать, выбрав меню Plugins > Plugin Manager, нажав на закладку Install и выбрав XML plugin). Данный плагин добавляет функции автозавершения HTML и CSS, браузер DOM, аутентификацию кода и другие.

TextWrangler (Mac)

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

TextWrangler - разработан компанией Bare Bones Software как простой текстовый редактор общего назначения, и у него нет многих специальных веб функций. Но несмотря на это. он отлично подходит для несложного редактирования HTML, CSS, JavaScript и PHP кода.

Некоторые замечательные свойства TextWrangler:

Vim (Windows, Mac, Linux)

Vim определенно сложен для освоения, но если вы преодолеете трудности, то никогда не захотите вернуться обратно!

Дедушка редакторов текста для программистов Vim (прямой потомок редактора vi) - это консольный редактор текста с открытым кодом. Он устанавливается редактором по умолчанию в почти всех разновидностях Unix, включая Linux и Mac OS X. Также редактор доступен для использования в Windows и многих других системах.

Vim не является системой, которую можно поставить и начать использовать сразу, до этого никогда не имев с ней дела. Большинство команда редактирования включают странные сочетания наподобие :wq и /. Он также имеет три режима редактирования: режим вставки, в котором вводится текст; визуальный режим для выделения текста; и командный режим для ввода команд. Такое функционирование является наследием Unix тех дней, когда не было ни окон ни мышки.

Почему он попал в  список? Если вы освоите его, то убедитесь в его быстроте и мощности. С помощью нескольких команд можно за несколько секунд сделать то, что в других редакторах может занять минуты.

существует большое количество макросов и плагинов для Vim, которые облегчают работу с кодом HTML, CSS и JavaScript, включая подсветку синтаксиса, автозавершение, HTML Tidy, и просмотр в браузере. Вот большой список полезных ссылок:

Если вы не можете работать с окном терминала, то Vim имеет графическую реализацию под названием gvim, которая имеет в своем составе удобные окна и меню.

gedit (Windows, Mac, Linux)

gedit - простой, но удобный для использования редактор.  Вы можете использовать плагины для превращения его в веб редактор

gedit - редактор по умолчанию для графической среды GNOME, которая широко используется на Linux системах. Редактор отлично работает в Windows и Mac OS X. Загрузить программу можно с домашней страницы. gedit имеет простой интерфейс и легок в использовании. Вы можете настроить редактор под собственные нужды с помощью большого числа плагинов. Для разработки веб приложений будут полезны следующие плагины:

Fraise (Mac)

Fraise - интуитивный редактор для Mac, с набором функций, достаточных для веб редактирования

Как и  TextWrangler и gedit, Fraise - чудесный легкий редактор, который приятно использовать. Он является ответвлением от редактора Smultron. Он относительно новый и у него нет нормального веб сервера. В настоящее время он поддерживается только в Mac OS X 10.6 (Snow Leopard), то есть, если вы используете версию 10.5, то вам придется загрузить Smultron.

Fraise имеет несколько чудесных опций для веб редактирования:

Fraise стоит изучить, если вы используете Mac и вам нужен удобный редактор с большими возможностями, чем встроенный TextEdit.

internet-pages.blogspot.ru

Создание web-страницы

КАК СОЗДАТЬ WEB-СТРАНИЦУ

Самый простой способ создать страницу для размещения в Интернете — воспользоваться инструментами пакета Microsoft Office. Последние версии этого пакета предоставляют возможность преобразовать обычный документ в HTML-формат с неплохим качеством кода.

Возможности Word

Подготовленный в текстовом редакторе Word документ можно легко преобразовать в web-страницу. Однако она будет выглядеть не столь привлекательно, как хотелось бы, если не предпринять дополнительные шаги. Рассмотрим несколько примеров.

Возьмем некоторый текст.

Преобразуем документ в web-страницу с помощью операции Сохранить как web-страницу… (вызывается из главного меню — позиция Файл). Тогда html-представление документа будет иметь вид:

Первое, что бросается в глаза — текст занимает все экранное пространство. Длина строки слишком большая. Для комфортного чтения на экране число символов в строке должно быть в диапазоне 50-65.

Использование таблицы

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

Фон и стиль

Можно пойти дальше — например, изменить цвет и фактуру фона, вид гиперссылок, оформление списков. Для изменения общего дизайна страницы можно воспользоваться командой Тема из раздела главного меню Формат.

Желательно выбрать не слишком яркий фон, чтобы на нем хорошо читался текст. Таким фоном в предложенном списке является, например, Рисовая бумага. Вид страницы заметно преобразился:

Вставка картинки

В документ можно добавить картинку, взяв ее, к примеру, из коллекции клипов.

Нужно правой кнопкой мыши щелкнуть на картинку, выполнить операцию копирования, и далее в документе указать место для картинки и выполнить операцию вставки скопированного объекта.

Если вы вставляете картинку внутрь абзаца, то лучше изменить свойства картинки, задав обтекание текста вокруг картинки (нужно выбрать позицию главного меню Формат и далее Рисунок):

В документе при этом не будет создаваться лишнего пустого пространства.

Наконец, можно добавить картинке рамку и тень с помощью кнопок на панели Рисование — Тип линии и Стиль тени. Подобные нюансы заметно прибавляют выразительности странице.

Если панели Рисование нет на странице, то нужно установить ее, выбрав позицию главного меню Вид и далее Панели инструментов и Рисование.

Бегущая строка

Word позволяет внести на web-страницу и другие оформительские элементы, например "бегущую строку". Чтобы воспользоваться этой возможностью нужно открыть на экране панель web-компонентов (из главного меню — позиция Вид, далее Панели инструментов и Веб-компоненты). Щелчок по кнопке операции Бегущая строка открывает дополнительное окно для задания текста параметров бегущей строки.

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

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

Использование шаблонов оформления

Если вы начинаете создавать страницу с нуля, то можно воспользоваться мастером веб-страниц, который в диалоге будет помогать формировать документ. Или же можно использовать готовый шаблон оформления страницы, выбрав его из достаточно представительного набора. Для этого нужно в операции Создать выбрать режим Создание с помощью шаблона и далее Общие шаблоны. На экране появится форма, в которой нужно выбрать закладку Веб-страницы:

Далее в предлагаемой заготовке документа вы должны ввести тексты и картинки:

Цветовое и стилевое решение пользователь может выбирать самостоятельно, например, с помощью настроек Формат - Тема.

Создание гиперссылок и закладок

Последний вопрос, который мы планируем рассмотреть в данном разделе — создание гиперссылок в документе.

Если мы хотим сослаться в документе на другой документ или другой сайт в Интернете, то такую гиперссылку можно сделать так: выделить в документе фрагмент текста (слово) и выполнить операцию Вставка — Гиперссылка… На экране появится форма, в которой задается адрес гиперссылки. Адрес можно ввести явно или можно выбрать файл в окне.

Здесь следует помнить, что адрес выбранного файла на вашем компьютере может измениться, когда вы будете формировать свой сайт. Поэтому неявный способ задания адреса подходит только в том случае, если структура вашей папки на компьютере и на сайте Интернета совпадают.

Если гиперссылка должна ссылаться на другую часть этого же документа, то предварительно нужно вставить закладку в начале нужного фрагмента. Нужно выполнить операцию Вставить — Закладка, и в появившейся на экране форме ввести имя закладки.

Тогда при создании гиперссылки нужно указать эту закладку (кнопка Закладка… расположена в правой части формы), выбрав, например, ее из списка в форме:

Веб-презентация в PowerPoint

Программа PowerPoint ориентирована на создание презентаций на компьютере. Однако у нее имеется функция преобразования подготовленной презентации в веб-формат.

Вы можете открыть подготовленную презентацию и выполнить операции (из главного меню) Файл — Сохранить как веб-страницу. Как обычно нужно задать имя веб-презентации в открывшемся окне. В результате выполнения преобразования презентации будет создан файл с заданным именем и расширением .htm и одноименная папка с дополнительными материалами.

Если теперь из браузера вызвать веб-презентацию, то на экране можно увидеть результат преобразования.

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

Презентацию можно просматривать с показом структуры слайдов. Но если эта информацию не представляет интереса, то зарезервированное для показа структуры поле на экране можно убрать (операция развернуть/свернуть структуру в нижней строке).

С помощью кнопки Показ сладов можно просматривать слайды на полном экране.

Создание гиперссылок

В презентации можно создать гиперссылки, которые связывают объекты на слайде, например, с другими слайдами. Тем самым можно создать структуру гипермедиа, которая естественным образом будет соответствовать идеологии Интернета. Поясним этот прием на примере.

Пусть у нас есть несколько заготовленных слайдов на тему растительного мира Байкала, составленных из коллекции фотографий. Создадим новый слайд — оглавление коллекции.

Если новый слайд получился не первый в последовательности, то нужно выйти в режим сортировщика слайдов (из главного меню с помощью операций Вид — Сортировщик слайдов) и перетащить новый слайд в начало коллекции.

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

Перейдем в обычный режим просмотра слайдов (команды Вид и далее Обычный). На слайде-оглавлении выделим фотографию и выполним команду Вставка — Гиперссылка. В открывшемся окне зададим переход по гиперссылке — номер слайда с большой фотографией, с которой был скопирован меньший образец для оглавления.

Аналогично свяжем другие картинки на слайде-оглавлении с соответствующими слайдами с оригиналами фотографий.

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

Осталось совсем немного усовершенствовать нашу структуру. Добавим на каждый слайд с фотографией в его верхнюю левую часть стрелку (Автофигура на панели инструментов Рисование), и сделаем из этой стрелки гиперссылку, выполняющую переход на слайд-оглавление. Теперь движение по созданной нами структуре гипермедиа станет "двусторонним": из оглавления можно перейти на слайды с фотографиями, и с любого слайда вернуться на оглавление.

После выполнения преобразования презентации в веб-формат наша первая страница будет иметь вид:

Щелчок по картинке из меню вызовет переход к слайду с большой фотографией, а щелчок по стрелке (в левой верхней части слайда) обеспечит переход на страницу с оглавлением коллекции.

Обзор редакторов для верстки веб-страниц

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

В этой статье я дам краткий обзор по наиболее популярным редакторам, чтобы помочь вам сориентироваться. Кроме того я приведу полезные ссылки по каждой программе: сайт разработчика, где можно приобрести/скачать в интернет этот редактор, ссылки на обучающие программы и инструкции по работе с редактором.

Редакторы для верстки веб-страниц бываю двух типов: визуальные и текстовые.

Визуальные редакторы не требуют от вас знаний html, css и прочих технологий для разметки страниц. В визуальном редакторе вы располагаете различные элементы вашего сайта, как будто на листе бумаги, а редактор пишет за вас код самостоятельно. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами. Аббревиатура WYSIWYG расшифровывается как What You See Is What You Get - что видишь, то и получаешь.

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

Какого же типа вам следует заводить редактор? Если вы изучаете html, css или другие технологии для разметки страниц, если вы хотите уметь создавать качественные страницы и быть профессиональным кодером, то безусловно вам нужен текстовой редактор. Если же у вас нет времени на изучение html, css и прочих технологий, если перед вами не стоит очень сложных задач в выполнении страницы, то смело заводите себе визуальный редактор и пользуйтесь им, он очень экономит время и силы. А лучше всего иметь у себя на компьютере и визуальный, и текстовой редакторы для разных нужд.

ВИЗУАЛЬНЫЕ РЕДАКТОРЫ

Macromedia Dreamweaver MX

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

Разработчики утверждают, что Macromedia Dreamweaver MX предназначена для проектирования, разработки и администрирования профессиональных web-сайтов и приложений. Кроме того Dreamweaver легко интегрируется с другими программами от Macromedia, например, такими, как Flash. Т.е. Dreamweaver гораздо больше, чем просто визуальный редактор, это достаточно мощный и сложный инструмент, а всякий сложный инструмент требует, чтобы на его освоение было потрачено какое-то время, прежде, чем пользователь сможет работать в нем. Однако, я считаю, что вас не должно смущать, что придется изучать, как пользоваться программой, Dreamweaver стоит того.

Adobe GoLive и LiveMotion

Возможно, Adobe GoLive понравится тем, кто любит программы от Adobe, и много с ними работал: знакомая среда, достаточно легко разобраться, что к чему. Кроме того, еще один плюс для любителей Adobe - все программы от Adobe прекрасно взаимодействуют друг с другом и дополняют друг друга, GoLive не исключение, он прекрасно дружит с собратьями. Однако, GoLive не более, чем визуальный редактор для верстки веб-страниц, больше чем поддержки таких технологий, как Html, Dhtml, CSS, XML и нескольких готовых Javascript`ов не стоит ждать от этой программы. Однако, следует отметить, что встроенный редактор кода (текстовой) в этой программе очень хороший. Т.е. возможно, GoLive оптимальное сочетание визуального и текстового редактора (два в одном).

Хочу также добавить, что, вероятно, стоит использовать с GoLive такую программу, как Adobe LiveMotion (в предыдущих версиях она называлось Image Styler). Хотя, по идее, LiveMotion является графическим редактором, в котором вы можете создавать незатейливую, но качественную графику для своих веб-сайтов, эта программа также умеет верстать веб-странички, на основе того, что вы нарисовали (не лучшим образом, но довольно прилично, плюсом является то, что LiveMotion сам режет готовый макет на много картинок, которые вы потом можете использовать при верстке сайта в GoLive).

Microsoft FrontPage

Если верить разработчикам, то программа FrontPage позволяет создавать веб-узлы, обладающие широкими возможностями, а также предоставляет средства управления ими. На деле, FrontPage дружит с Html, Css, Dhtml, Javascript. Дает достаточно широкие возможности по управлению изображениями и flash-ролликами. Кроме того FrontPage дружит с такими технологиями, как ASP, XML, VBScript, XSL. Также разработчики утвержают, что в последней версии FrontPage теперь борется за чистоту кода, что ж, остается надеятся, что это так, т.к. раньше данный пункт был не на высоте (раньше FrontPage вставлял в код очень много ненужных комментариев и другой лишней информации, так что правильностью и чистотой кода странички, сделанные в этом редакторе похвастаться не могли).

Hotdog

Программа имеет простой и понятный пользователю интерфейс. Кроме того, что Hotdog дружит с пользователем, эта программа дружит также с Flash, SQL, PHP, ASP, имеет работать с GIF-изображениями (оптимизация, анимация), включает в себя Html-компрессор, может создавать файлы справки (CHM).

ТЕКСТОВЫЕ РЕДАКТОРЫ

Homesite

Этот редактор, пожалуй, самый популярный и мощный среди текстовых, и не зря. Кроме того, что в нем достаточно легко работать не только с Html-кодом (есть все, от списка всевозможных атрибутов ко всем тегам вплоть до проверки кода (правильность проверяется с точки зрения W3C.org)), но также есть поддержка XHTML, CSS-редактор, и так далее.

HTML Pad

Эта программа тоже пользуется большой любовью пользователей. Помимо всего стандартного HTMLPad поддерживает JavaScript, VBScript, SSI, ASP и Perl, умеет создавать макросы (нападобие Word`a и Excel'я), включает в себя кучу различных справочных материалов по CSS и Html, и многое другое.

Notepad

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

За сим все. Если у вас не слишком хорошая и быстрая связь с интернет, чтобы скачать редакторы, то вы можете купить их в магазине, где продаются программы для компьютера.

Если вы считаете, что какой-то редактор для верстки веб-страниц был несправедливо упущен в этой статье, если вы знаете ценный учебник или статью по какому-либо редактору, если вы считаете, что мы незаслуженно отругали или похвалили тот или иной редактор, то сообщите нам об этом на Форуме, или по Е-майл ([email protected]), мы обязательно прислушаемся к вашему мнению и постараемся исправиться.

baza-referat.ru


Смотрите также