Сообщение на тему создание веб страницы

Обновлено: 18.05.2024

Для создания Web-страниц понадобится любой браузер - Internet Explorerили Netscape Communicator, а лучше оба, так как многие элементы HTML по-разному отображаются в разных программах просмотра и весьма желательно контролировать эту разницу. Кроме того, нужен любой текстовой редактор, например, Блокнот из Windows. Программа Блокнот нужна для подготовки HTML-файлов, а браузер - для просмотра и контроля сделанного. С помощью этих инструментов мы создадим сайт на своем локальном компьютере, после чего поместим его на один из WWW-серверов в Интернете, сделав, таким образом, ваши Web-страницы доступными всему миру.

В качестве примера создадим сайт лицея. Цель сайта - рассказать миру о лицее, сфере его деятельности, интересов, найти друзей, партнеров, спонсоров.

Для файлов нашего сайта нужна отдельная папка.

Создайте папку с именем Web на жестком диске вашего компьютера.

Теперь запустим программу Блокнот и приступим к работе.

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

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

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

Для создания Web-страниц используется особый язык HTML (HyperText Markup Language – язык гипертекстовой разметки). Этот язык определяет набор специальных команд, называемых тегами и используемых для задания форматирования или назначения тех или иных элементов Web-страницы. Особые теги используются для размещения на Web-страницах графических изображений, аудио- и видеоклипов и прочих так называемых внедренных объектов.

Содержание

Как создаются веб-страницы
Несколько средств веб-разработки
Простейшие средства создания веб-страниц
Веб-редактор TaxtPad
Веб-редактор Arachnophilia
Текстовые редакторы типа WYSIWYG
Редактор Star Office
Netscape Composer

Прикрепленные файлы: 1 файл

Реферат по ИИКТ

  1. Как создаются веб-страницы
  2. Несколько средств веб-разработки
  3. Простейшие средства создания веб-страниц
  4. Веб-редактор TaxtPad
  5. Веб-редактор Arachnophilia
  6. Текстовые редакторы типа WYSIWYG
  7. Редактор Star Office
  8. Netscape Composer

Как создаются веб-страницы

Для создания Web-страниц используется особый язык HTML (HyperText Markup Language – язык гипертекстовой разметки). Этот язык определяет набор специальных команд, называемых тегами и используемых для задания форматирования или назначения тех или иных элементов Web-страницы. Особые теги используются для размещения на Web-страницах графических изображений, аудио- и видеоклипов и прочих так называемых внедренных объектов.

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

Для того чтобы различные программы Web-обозревателей правильно отображали одну и ту же Web-страницу, язык HTML должен быть стандартизирован. Его стандартизацией (а также множеством других стандартов Интернета) занимается особая организация, называемая World Wide Web Consortium или, сокращенно, WWWC. Это название можно перевести как "Комитет Всемирной паутины".

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

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

Версия 4.01 станет последней версией языка HTML. В дальнейшем он будет постепенно заменен своим потомком — языком XHTML (extensible Hyper-Text Markup Language — расширяемый язык гипертекстовой разметки). Этот язык основан на популярном языке описания данных XML (extensible Markup Language — расширяемый язык разметки), он позволяет расширять доступный набор тегов и считается более строгим и более подходящим для машинной обработки. К тому же, из XHTML выброшено множество устаревших тегов, все еще поддерживаемых HTML в целях совместимости.

Скоро ли наступит эра XHTML? Вряд ли. Старый добрый HTML поцарствует на земле еще не один год.

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

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

Одна из Web-страниц, хранящихся на диске серверного компьютера, при настройке Web-сервера задается в качестве страницы по умолчанию или главной страницы. Она будет загружена, если пользователь наберет в строке адреса Web-обозревателя только интернет-адрес сайта (например, "http:// www.site.ru"), без указания имени файла страницы. Как правило, такая страница имеет имя default или index.htm и расширение htm или html, хотя, опять же, все это в руках администратора.

После получения файлов Web-страницы Web-обозреватель сохраняет их на жестком диске клиентского компьютера в особой папке, называемой кэшем. Зачем это нужно? Да хотя бы затем, чтобы вы смогли впоследствии просмотреть эту страницу, не подключаясь к Интернету. Все современные Web-обозреватели поддерживают так называемый автономный режим (по-английски — offline mode), когда они отображают только те страницы, что находятся в кэше. Если же вы попытаетесь просмотреть страницу, которой нет в кэше, Web-обозреватель предложит вам подключиться к Интернету и загрузить ее.

Несколько средств веб-разработки

Различные редакторы

На свете существуют две разновидности Web-редакторов: визуальные и невизуальные. Или, как еще говорят, WYSIWYG- и не-WYSIWYG-редакторы. (WYSIWYG или What You See Is What You Get -"что ты видишь, то ты и получишь".)

Невизуальные редакторы работают с "чистым" (или "сырым") HTML-кодом. Они предоставляют возможность быстрого ввода тегов, синтаксического подсвечивания, проверки правильности получившегося кода и ссылок. К ним относится, в частности, известная Arachnophilia.

Невизуальные Web-редакторы часто называют HTML-редакторами.

Визуальные редакторы позволяют работать с самой Web-страницей "как она есть". Пользователь редактирует и форматирует текст, вставляет рисунки, таблицы, как в обычном текстовом редакторе, а уж сама программа формирует соответствующий HTML-код. К такого рода редакторам относится популярный Microsoft FrontPage и целый ряд программ попроще.

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

Специально для таких пользователей, совмещающих прекрасное знание HTML с пристрастием к визуальным средствам редактирования, существуют так называемые гибридные редакторы. Они имеют мощные средства визуального редактирования, одновременно предоставляя доступ к получившемуся HTML-коду. Именно к таким редакторам и относится Macromedia Dreamweaver.

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

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

Простейшие средства создания веб-страниц

Веб-страницы кодируются на языке гипертекстовой разметки — HTML. Вообще говоря, чтобы написать HTML-файл, достаточно иметь любой текстовый редактор, лишь бы он умел не добавлять в текст свои специальные символы. Самый простой вариант — это редактор Notepad (Блокнот), входящий в стандартную поставку Windows. Собственно говоря, это именно то, что нужно, — простейшая программа, сохраняющая написанный текст именно в том виде, в котором он был введен, и ничего лишнего. (Тем, кто не работает под Windows, в качестве замены Блокноту подойдет почти “все что угодно”: Edit — для MS-DOS, vi или jed — для Linux, Kedit — для Linux/KDE и т. д.)

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

Веб-редактор TextPad

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

Веб-редактор TextPad позволяет автоматизировать набор многих тегов. Если не хочется набирать их вручную (многие этого не любят просто из-за того, что приходится переключаться на латинский шрифт), то обратите внимание на левую нижнюю часть окна программы. Там приведен список наиболее распространенных HTML-тегов, которые можно вставлять в свой основной текст двойным щелчком мыши. Правда, в списке указаны не сами теги, а их описание. Например, чтобы вставить тег , нужно выбрать из списка пункт Block > Break Line. Однако к этому быстро привыкаешь. Почти все пункты списка вставляют теги вместе с закрывающим парным тегом. Например, если выбрать пункт Block > Preformatted, в текст автоматически будут добавлены теги и и . Некоторые пункты добавляют сразу целые блоки-заготовки. Если, к примеру, выбрать пункт Table (Таблица), в текст будет вставлен такой код: ? ? ?

Кроме списка тегов TextPad предоставляет нам также возможность выбирать из списка специальные символы (список HTML Characters), а также, если потребуется, любой управляющий символ, например символы псевдографики DOS и другие. Те, кто часто вводят какие-либо последовательности символов, что при написании веб-страниц не редкость, могут облегчить свою задачу, записав в TextPad соответствующие макросы. Для записи макроса надо нажать комбинацию клавиш CTRL+SHIFT+R (или выбрать из меню Macros пункт Record). При этом начнется запись макроса, то есть все последующие действия будут запомнены. Чтобы закончить запись, надо снова нажать комбинацию клавиш CTRL+SHIFT+R, после чего присвоить имя файлу макроса, а также дать название для представления макроса в меню. Здесь можно также дать, если нужно, краткое описание макроса и указать имя его автора. После нажатия на кнопку ОК название макроса появится в меню Macros. Выбрав его, можно ввести сразу всю заданную последовательность символов.

Для удобства отладки можно установить флажок в пункте Line Numbers (Нумерация строк) в меню View (Вид), — в этом случае все строки текста будут пронумерованы. Хочется отметить, что если в меню Configure (Настройка) включен пункт Word Wrap (Перенос по словам) для автоматического переноса концов длинных строк в видимую часть экрана, то каждая такая длинная строка все равно будет нумероваться одним номером, а не двумя или тремя (кстати, такая нумерация почему-то недоступна в замечательной программе Homesite, о которой речь пойдет ниже). А если в меню View (Вид) включить флажок Visible Spaces (Отображать пробелы), то можно увидеть на экране и “невидимые символы”, такие, как пробелы, символы табуляции и прочие.

В программе TextPad можно легко сравнить два файла, выбрав из меню Tools (Сервис) пункт Compare Files (Сравнить файлы). А если есть два (или более) похожих файла, в некоторые местах которых надо внести изменения, удобно использовать функцию Synchronize Scrolling (Одновременная прокрутка) из меню Configure (Настройка). В этом случае можно открыть сразу несколько файлов, например, выбрав из меню Windows (Окна) пункт Tile Vertically (Расположить по вертикали), и тогда при прокрутке одного из них другие прокручиваются синхронно. Среди других полезных функций программы TextPad стоит отметить возможность автоматической смены клавиатурного регистра командой Edit > Change Case (Правка > Сменить регистр), автоматического копирования в буфер слова или строки, на которой находится курсор, с помощью команд Edit ” Cut Other (Правка > Вырезать) и Edit > Сору Other (Правка > Копировать), а также функцию проверки орфографии Tools > Spelling (Сервис > Правописание). И, конечно, здесь присутствует возможность просмотра созданного файла в броузере View > In Web Browser (Вид > В броузере).

Самый простой способ создать страницу для размещения в Интернете — воспользоваться инструментами пакета 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 дружит с пользователем, эта программа дружит также с Flash, SQL, PHP, ASP, имеет работать с GIF-изображениями (оптимизация, анимация), включает в себя Html-компрессор, может создавать файлы справки (CHM).

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

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

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

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

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

Введение в HTML

HTML – это язык гипертекстовой разметки

  • Гипертекст – это текст, в который включена ссылка.
  • Язык разметки определяет расположение информации макета в документе.

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

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

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

HTML5

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

HTML5 является пятым выпуском HTML. Синтаксис HTML5 согласован с основным синтаксисом HTML4 и XHTML1. Но в чем же различия? HTML5 осуществляет поддержку видео и аудио. HTML5 стал одним из мощных инструментов для дизайна веб-страницы. В HTML5 потоковая передача мультимедиа возможна без использования сторонних плагинов, таких как Flash. Среди прочего, HTML5 поддерживает хранение информации на стороне клиента. Пользователь может пользоваться этой функцией offline для поддержки веб-приложений.

Сеть и HTML

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

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

Согласно исследованию W3Techs, HTML язык используется на 74.3% вебсайтах.

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

500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500
500

Основные понятия World Wide Web – средство графического представления информации в Интернете Web-страница – гипермедийный HTML-документ HTML (Hyper Text Markup Language) – язык гипертекстовой разметки Web-сайт – группа Web-страниц, связанных единой темой, схемой оформления и гипертекстовыми ссылками Браузер – программа, предназначенная для просмотра Web-страниц

World Wide Web Интерактивная мультимедийная гипертекстовая среда, использующая язык разметки и поддерживающая множество протоколов Интернета (текст, графика, видеоклипы, звук)

Гипертекст - означает, что определенная часть выделенной информации ссылается на другие фрагменты информации

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

Создание Web-сайта Цель создания сайта Задачи, решаемые посредством сайта Потенциальная аудитория Информация на сайте

Логическая структура сайта Разбиение материла на логические разделы с заранее спроектированными гиперсвязями Домашняя (стартовая) страница содержит ссылки на все (или основные) разделы сайта, анонсы их содержимого и т.д. Заглавная страница – не содержит содержательной информации и элементов навигации. Содержит логотип, выбор кодировки, языка, счетчик посещений и т.д.

Читайте также: