Реферат: Дистанционный курс Web-дизайн. Первые шаги. = Автор курса: Воронина Вероника Вадимовна. E-mail: vv@vinforika ru Раздел 06. Визуальные редакторы

Дистанционный курс

Web-дизайн. Первые шаги.


=================================================

Автор курса: Воронина Вероника Вадимовна.
E-mail: vv@vinforika.ru


Раздел 06. Визуальные редакторы. Учебный модуль 06_2. Создание веб-страниц с помощью Nvu

Содержание

Раздел 06. Визуальные редакторы. 1

Учебный модуль 06_2. Создание веб-страниц с помощью Nvu 1

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

Создание Web-узла 2

Менеджер сайта и создание страниц 2

Вставка изображения 3

Гиперссылки 4

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

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



К оглавлению
^ Создание Web-узла
Web-узел – набор связанных между собой Web-страниц, как правило сходных по теме, оформлению или направленности. Первая ступень в создании Web-узла – планирование. Следующая ступень – разработка основной структуры Web-узла. После разработки локальной структуры можно заполнять ее содержимым, создавая HTML-страницы «с нуля», полагаясь на свой вкус или пользуясь разработанными шаблонами.

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

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

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

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

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

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

 

Кнопка "^ Редактировать сайты" открывает окно "Параметры публикации", где в поле "Имя сайта"  необходимо ввести имя, которое вы выбрали для своего Web-узла. (В принципе название ни к чему не обязывает).
В поле "^ URL публикации" необходимо определить корневую папку, на жестком диске для хранения всех файлов, проекта.

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



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

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


К оглавлению
^ Вставка изображения
Вставить изображение можно щелкнув на кнопке "Изображение" или выбрав команду  "Вставка-Изображение".

 


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



^ Альтернативный текст - альтернативный текст для изображения, который будет выведен на странице вместо изображения, если у пользователя отключён показ картинок (атрибут alt).



 Вкладка ^ Размеры - управление размерами изображения.

 Высота - высота изображения в пикселях (атрибут height).

 Ширина - ширина изображения в пикселях (атрибут width).

 Вкладка Внешний вид - расположение текста по отношению к изображению 

 Поля - отступы между вертикальными границами изображения и текстом (атрибут vspace), и между горизонтальными границами изображения и текстом (атрибут hspace). Вкладка Ссылка - устанавливает гиперссылку на открываемый файл при щелчке на изображении..

^ К оглавлению
Гиперссылки
Гиперссылку можно выбрать  командой "Вставка-Ссылка"   или кнопкой Ссылка на панели инструментов. 



Открывающееся  сразу окно "^ Свойства ссылки" содержит поле "Текст ссылки", который определяет текст между начальным и закрывающим тегами, поле "Адрес объекта ссылки", которое определяет адрес объекта ссылки. Путь может быть указан как вручную, так и с помощью кнопки "Выбрать файл".



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

Чтобы создать в тексте метку, поместите курсор в нужное место документа и дайте команду "^ Вставка-Якорь с именем", либо нажмите кнопку "Якорь". В открывшемся окне "Свойства якоря " внесите название метки. В дальнейшем на нее можно устанавливать гиперссылки как на отдельный документ.




К оглавлению
^ Создание таблицы
Команда меню Таблица-Вставить-Таблицу,  Вставка -Таблица и кнопка  Таблица на панели инструментов открывает диалоговое окно вставки новой таблицы (тег "table"). 



На вкладка ^ Простая: задается  количество строк и количество столбцов строк в таблице..

Вкладки Точная и Ячейка - устанавливают  свойства всей таблицы и отдельных ячеек:

 Отступ от ячейки (px) - отступ текста внутри ячейки от границы ячейки (атри бут cellpadding).

 Расстояние между ячейками (px) - расстояние между границами соседних ячеек (атрибут cellspacing).

 Граница - толщина границы в пикселях (атрибут border).

 Выравнивание - выравнивание таблицы на странице (атрибут align):

 left - по левому краю;

 right - по правому краю;

 center - по центру;


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


 

 

заполнение необходимых полей окна "Свойства таблицы" инициирует появление соответствующих тегов с нужными атрибутами.

К оглавлению


===

 Воронина В.В. г. Павлово Нижегородской области 2007

E-mail: vv@vinforika.ru