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

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

 

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

 

1) Текстовые редакторы для работы с “чистым” HTML-кодом. Поскольку HTML-документ представляет собой текстовый файл, его можно подготовить в простейшем текстовом редакторе, например, в блокноте (notepad), но при этом все команды разметки придется вводить вручную.

 

2) Программные средства, которые имеют специальные встроенные компоненты для конвертирования данных, созданных в этих продуктах, в HTML формат. Например, программы широко используемого пакета MS Office, начиная с версии 97, позволяет сохранить документ в формате HTML. При этом сохраняются, насколько это возможно, особенности форматирования символов и абзацев, изображения, таблицы, списки и так далее. Многие современные графические редакторы предоставляют возможность сохранить коллекцию картинок в виде HTML-документа. Надо отметить, что при таком конвертировании исходный текст HTML-документа получается крайне избыточным и нуждается в коррекции.

 

3) Специализированные программные средства - web-редакторы, предназначенные специально для разработки web-сайтов. Современные требования, предъявляемые к web-редакторам, включают в себя:

 

Поддержку каскадных таблиц стилей.

 

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

 

Генерацию Dynamic HTML для различных браузеров.

 

Средства наглядного дизайна: вставка изображений, таблиц и фреймов.

 

Динамическое отображение создаваемой страницы в браузере.

 

Шаблоны WWW-страниц или специальные программы - " мастера" по их созданию.

 

Средства по управлению web-сайтом (создание файловой структуры сайта, отслеживание связей и проверка ссылок между страницами, публикация сайта в Интернет).

 

Существуют две разновидности web-редакторов: визуальные и невизуальные.

 

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

 

Визуальные редакторы позволяют работать с самой web-страницей " как она есть", в режиме WYSIWYG (WhatYouSeeIsWhatYouGet - То, что ты видишь, то и получаешь). Редактирование и форматирование текстов, вставка рисунков, таблиц, гиперссылок и других элементов происходит как в обычном текстовом редакторе, а сама программа формирует (генерирует) соответствующий HTML-код. Кроме средств визуального редактирования эти web-редакторы одновременно предоставляют доступ к получившемуся HTML-коду. Визуальные редакторы — отличная стартовая площадка для начинающих web-дизайнеров, плохо знакомых с HTML. Но и опытные дизайнеры часто пользуются визуальными редакторами, чтобы быстро " сверстать" web-страничку, а потом довести ее до ума вручную.

 

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

 

1) Свободно распространяемые (бесплатные). В основном это невизуальныеhtml-редакторы, разработанные небольшой группой авторов. Визуальные редакторы этой группы имеют ограниченный набор средств визуального редактирования. Характеризуются небольшим объемом занимаемой памяти, а некоторые из них даже не требуют специальной установки.

 

2) Условно-бесплатные. Web-редакторы этой группы характеризуются невысокой ценой – от 300 рублей.

 

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

 

 

Пакет визуального программирования Web-страниц – Adobe Dreamweaver.

DreamWeaver - профессиональный редактор HTML для визуального создания и управления сайтами различной сложности и страницами сети Internet. Нравится ли вам вручную писать код HTML или вы предпочитаете работать в визуальной среде, Dreamweaver облегчает эту работу и обеспечивает полезными инструментами и средствами, чтобы сделать свои собственные проекты непревзойденными.

 

Dreamweaver включает в себя много инструментов и средств для редактирования и создания профессионального сайта: HTML, CSS, JavaScript, редакторы кода (просмотр кода и инспектор кода), что позволяет вам, редактировать различные текстовые документы, которые поддерживаются в Dreamweaver. Также вы можете настроить Dreamweaver, чтобы он наводил порядок и переформатировал HTML, как вы этого хотите.

 

Возможность визуального редактирования в Dreamweaver также позволяет быстро создавать или менять дизайн проекта без написания кода. Dreamweaver относится к так называемым " визуальным" редакторам, т.е. вы сразу можете видеть на экране (хотя бы приблизительно) результат своей работы. При этом он предоставляет полный доступ к источнику кода и не вставляет в него ничего лишнего, как это делает, например, FrontPage. Таким образом, можно создавать свою страничку и параллельно изучать HTML, заглядывая в источник. Можно на живом примере убедиться, что HTML - это просто. Простота обращения с редактором DreamWeaver заключается в том, что возможно рассмотреть все централизованные элементы и перетащить их с удобной панели непосредственно в документ.

 

DreamWeaver полностью настраиваемый. Можно использовать Dreamweaver, чтобы создавать свои собственные объекты и команды, изменять " горячие" клавиши и расширять возможности DreamWeaver новыми свойствами, инспекторами свойств и новыми отчетами о сайте.

Одна из последних версий HTML-редактора компании Macromedia- DreamWeaver 3, который относится к категории WYSIWYG-редакторов(т.е.What You See Is What You Get), и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и заключается преимущество технологии WYSIWYG - что вижу, то и получаю).

 

Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции " запись последовательности команд" вы можете записывать последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит всё в той же последовательности.

 

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

 

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

Adobe Dreamweaver как средство структурного построения сайта и его публикации.

Определения

Сайт - это совокупность взаимосвязанных документов.

Контент - это содержание сайта.

Тег (языки разметки) — элемент языка разметки гипертекста (например, XML, HTML): < >.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

Преимущественно используется как средство описания, оформления внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML.

JavaScript (/ˈ dʒ ɑ ː vɑ ː ˌ skrɪ pt/; аббр. JS) — прототипно-ориентированный сценарный язык программирования.

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

Adobe Dreamweaver - (в пер. « ткач мечты », « мечтаплет », « плетельщик мечты »)- HTML- редактор. Это программа для создания веб-сайтов. Изучение этой программы может оказаться довольно сложной задачей, особенно если вы — новичок в веб-дизайне и не знаете языка html.

Дримвейвер является одним из флагманов в области программ компании Adobe. В какой-то степени он объединяет и другие программы от Adobe. Например, сначала дизайнеры создают дизайн будущего сайта в программе Photoshop или Fireworks, затем разрезают картинку, подготавливая ее к верстке, и далее формируют непосредственно html-код шаблона, где как в Дримвейвере. То же самое касается и флэш-роликов, которые после разработки в Adobe Flash попадают в Дримвейвер для внедрения в сайт.

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

Способ создания: Программный- этот способ используется для создания дизайнерских изысков и сложных сайтов.

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

Система Dreamweaver -- это визуальный редактор гипертекстовых документов. Эта формулировка не способна точно передать существо дела.

Мощная профессиональная программа Dreamweaver обладает всеми необходимыми средствами для генерации страниц HTML любой сложности и масштаба.

Она обеспечивает режим визуального проектирования (WYSIWYG или What You See Is What You Get - “ что ты видишь, то ты и получишь”.), отличается очень чистой работой с исходным текстом Web-документов, обладает встроенными средствами поддержки больших сетевых проектов. Ни в одном из существующих в наше время редакторов концепция WYSIWYG не реализована полностью.

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

Программа не только обладает мощным арсеналом средств визуального проектирования, но и способна отображать Web-страницы почти как специализированные программы просмотра: Microsoft Internet Explorer или Netscape Navigator.

В Dreamweaver термином «сайт» обозначается локальное или удаленное местоположение для хранения документов, относящихся к веб-сайту. Сайт Dreamweaver предоставляет возможности упорядочения и управления всеми веб-документами, загрузки сайта на веб-сервер, отслеживания и поддержания работоспособности ссылок, управления и совместного использования файлов. Чтобы воспользоваться всеми преимуществами функций Dreamweaver, необходимо определить сайт.

Чтобы задать сайт Dreamweaver, нужно только настроить локальную папку. Для передачи файлов на веб-сервер или разработки веб-приложений нужно также добавить сведения об отдаленном сайте и тестовом сервере.

Сайт Dreamweaver состоит как минимум из трех частей, или папок, в зависимости от среды разработки и типа разрабатываемого веб-сайта.

¢ Локальная корневая папка.

В ней хранятся файлы, над которыми ведется работа. В Dreamweaver эта папка называется «Локальный сайт». Эта папка обычно расположена на локальном компьютере, однако может находиться и на сервере в сети.

¢ Удаленная папка.

 

В этой папке хранятся файлы для тестирования, производственной деятельности, совместной работы и т.д. В Dreamweaver эта папка называется «Удаленный сайт» на панели «Файлы». Обычно удаленная папка находится на компьютере, на котором запущен веб-сервер. Удаленная папка содержит файлы, к которым предоставляется доступ через Интернет.

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

¢ Папка тестового сервера.

 

Папка, в которой Dreamweaver обрабатывает динамические страницы.

 

 

Чтобы создать новый документ просто нажмите на ссылку или воспользовавшись меню " создать новый документ".

Для более удобного создания сайта можно воспользоваться вкладкой " веб сайт". Нажмите на нее и создайте сайт, укажите напраление на папку, где лежат файлы сайта. После этого вы сможете редактировать файлы прямо с программы.

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

 

⇐ Предыдущая78910111213141516Следующая ⇒

Поделиться: