Учебно-методический комплекс дисциплины дс. Ф. 1 Web-графика и web-дизайн



страница1/5
Дата01.05.2016
Размер3.38 Mb.
  1   2   3   4   5


ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ
Государственное образовательное учреждение высшего профессионального образования

«Мурманский государственный педагогический университет»

(МГПУ)
УЧЕБНО-МЕТОДИЧЕСКИЙ КОМПЛЕКС

ДИСЦИПЛИНЫ


ДС.Ф.1 Web-графика и web-дизайн

ОСНОВНАЯ ОБРАЗОВАТЕЛЬНАЯ ПРОГРАММА ПОДГОТОВКИ СПЕЦИАЛИСТА ПО СПЕЦИАЛЬНОСТИ


«050501 – профессиональное обучение (дизайн)»

Утверждено на заседании кафедры

Изобразительного искусства и дизайна

факультета ХОТиД

(протокол № 2 от 14 сентября 2010 г.)

Зав. кафедрой Т.В. Ашутова

______________________________
РАЗДЕЛ 1. Программа учебной дисциплины.
Структура программы учебной дисциплины


    1. Автор программы: Ашутова Т.В. (старший преподаватель кафедры ИЗОиД МГПУ)

Рецензенты: Возница В.М., к.п.н., доцент

Игнатенко М.В., к.п.н., доцент



  • Целями преподавания дисциплины «Web- графика и web- дизайн» являются: формирование у будущих специалистов общего представления об основах визуального дизайна, интернетовских технологиях, знакомство с современными технологиями и программными средствами создания web-сайтов.

  • Место курса в общей системе подготовки специалиста.

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

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

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

Специализация «Графический дизайн», как и любая творческая профессия, требует владения современными компьютерными технологиями, как технологиями общего назначения, так и специальными пакетами прикладных программ для будущей профессиональной деятельности. Результатом творческой работы всегда являются новые знания, новая информация, а самый простой способ распространения этой информации – публикация в Интернет. Чтобы публикация в Интернет была эффективной, она должна соответствовать некоторым правилам web-дизайна.

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


  • Требования к уровню освоения содержания дисциплины (должны знать, должны уметь)

Студенты должны:


знать

уметь

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

  • основные этапы создания web-сайта;

  • основные модели организации сайта, приемы навигации;

  • основные принципы дизайна web-сайта;

  • основы технологии HTML по созданию web-сайта;

  • основные форматы графических элементов на web-странице;




  • оптимизировать графику;

  • планировать web-сайт;

  • создавать статические web-страницы с использованием различных элементов (текст, графика, таблица, список);

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

  • создавать web-страницу при помощи написания тегов на языке HTML и при помощи WYSIWYG- редактора.




    1. Курс «Web-графика и web-дизайн» является дисциплиной специализации, требования к обязательному минимуму содержания не предусмотрено в ГОС ВПО специальности.




    1. Объем дисциплины и виды учебной работы (для всех специальностей, на которых читается данная дисциплина):




№ п/п

Шифр и наименование специальности

Курс

Семестр

Виды учебной работы в часах

Вид итогового контроля (форма отчетности)




Трудо-емкость

Всего аудит.

ЛК

ПР/

СМ


ЛБ

Сам.

работа


1

050501.65 - профессиональное обучение (дизайн)

заочное отделение



5

6


10

11


104

116


14

26



6

6


-

-


8

20


90

90


Зачет

Экзамен





    1. Содержание дисциплины.

1.6.1. Разделы дисциплины и виды занятий (в часах). Примерное распределение учебного времени:


№ п/п

Наименование раздела, темы

Количество часов

Вариант 1

Вариант 2

Всего ауд.

ЛК

ПР/СМ

ЛБ

Сам.раб.

Всего ауд.

ЛК

ПР/СМ

ЛБ

Сам.раб.




Общее количество часов

116

32

38

46

104

40

12

-

28

180

1

Основы сайтостроения. Классификации web-сайтов. Правила web-дизайна.




8

6




4

10

3




7

45

2

Планирование и реализация сайта. Визуальные редакторы создания сайта. Основные виды верстки сайта. Табличный дизайн. Фреймовая структура




4

6

12

8

10

3




7

45

3

Каскадные таблицы стилей. Свободно позиционируемые элементы




10

12

10

8

10

3




7

45

4

Создание динамических эффектов на странице и интерактивных сайтов




10

14

24

26

10

3




7

45


1.6.2. Содержание разделов дисциплины.
Основы сайтостроения. Классификации web-сайтов. Правила web-дизайна. Интернет, всемирная паутина. Web-сайт, Web- страница, web-сервер. Классификация сайтов по интерактивности, по частоте изменения, по использованию технологий, по функциональному назначению.

Основные этапы разработки сайта: планирование, реализация, тестирование, размещение, рекламирование, сопровождение. Вопросы, решаемые на каждом этапе. Основные элементы, размещаемые на web-странице.

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

Типы формата web-страниц: «резиновый» дизайн; «к верху от сгиба»; панорамные страницы; подгон страницы. Выбор формата и типа сайта.

Пространственные отношения. Формы. Цветовые сочетания. Текстуры. Особенности академического стиля. Дизайн домашней страницы.

Выставочная графика, фон, логотип, баннер, визуалы. Основные графические форматы, используемые на страницах web-сайта: gif, jpeg, png. Палитра и диффузия. Оптимизация графики.


Планирование и реализация сайта. Визуальные редакторы создания сайта. Основные виды верстки сайта. Табличный дизайн. Фреймовая структура.

Табличный дизайн. Создание таблицы. Работа с ячейками. Использование таблиц для оформления страниц. Вложенные таблицы.

Использование шаблонов. Определение, назначение. Создание. Изменяемые и неизменяемые области. Вложенные шаблоны. Недостатки шаблонов и их преодоление.

Фреймы. Фрейм и набор фреймов. Схемы наборов фреймов. Создание фреймов и их оптимизация. Решение проблем с фреймами.


Каскадные таблицы стилей. Свободно позиционируемые элементы.

Каскадные таблицы стилей. Определение, назначение. Переопределение стиля. Способы задания стилевых описаний. Спецификация CSS. Классы. Динамические эффекты с использованием CSS.

Свободно позиционируемые элементы. Определение, назначение. Создание свободно позиционируемых элементов, параметры. Недостатки и их преодоление.
Создание динамических эффектов на странице и интерактивных сайтов Создание динамических эффектов. Создание динамических эффектов средствами программы Macromedia DreamWeaver и ImageReady. Особенности создания Rollovers. Создание кнопок. Создание анимации в DreamWeaver и ImageReady. Эффект движения, эффект изменения прозрачности. Текстовые деформации. Банеры. Язык JavaScript. Объекты. Объектная модель документа. Правила написания web-сценария.

Создание интерактивных сайтов. Введение в серверное программирование. Формы. Принципы создания интерактивных сайтов.


1.6.3. Темы для самостоятельного изучения.
Вариант 1

№ п/п

Наименование раздела

дисциплины.

Тема.


Форма самостоятельной работы

Кол-во часов
180

Форма контроля выполнения самостоятельной работы

1.

Этапы разработки web-сайта.

Расчетно-графическое задание (РГЗ).

22

Защита РГЗ


2.

Навигационная структура web-сайта Тема: «Удобство использования навигации».

Сравнительный анализ систем навигации нескольких web-сайтов

22

Письменный отчет


3.

Основные правила web-дизайна. Тема: «Как повысить юзабилити сайта».

Составление конспекта

22

Проверка конспекта


4.

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

Самостоятельная работа в компьютерном классе

22

Проверка созданных файлов

6

Свободно позиционируемые элементы

С/Р в компьютерном классе

22

Проверка созданных файлов

7

Использование сценариев. Создание сценариев на языке JavaScript

C/P в компьютерном классе

22

Проверка созданных файлов

8

Создание анимации

С/Р в компьютерном классе

26

Проверка созданных файлов



    1. Методические рекомендации по организации изучения дисциплины.

1.7.1. Тематика и планы аудиторной работы студентов по изученному материалу (планы последовательного проведения занятий: ПР, СМ, ЛБ) по предлагаемой схеме:
Практическая работа №1 (2 часа)

Тема: Сжатие и оптимизация изображений для Web
Цель: приобрести навыки по оптимизации изображений для Web-страниц
План

  1. Основные форматы web-графики

  2. Особенности оптимизации gif-формата.

  3. Особенности оптимизации jpeg-формата.

Основная литература: [9, 15, 24, 27, 33, 34, 40]

Дополнительная литература: [3, 4, 10, 28, 29, 56, 58]
Контрольные вопросы:


  1. Что такое «компрессия»?

  2. Как работает метод сжатия изобрпажений?

  3. Как и на каком этапе обработки изображений проводится преобразование неинтернетовских цветов и повышение резкости?

  4. Перечислите способы создания миниатюр для web-галерей.

  5. В результате чего образуются шумы в изображении и как сократить их уровень?



Практическая работа №2 (2 часа)

Тема: Создание дизайна сайта

Цель работы: научиться разрабатывать визуальный образ сайта.
Практическое задание: разработать дизайн сайта, используя программу Adobe PhotoShop
Основная литература: [9, 15, 24, 27, 33, 34, 40]

Дополнительная литература: [3, 4, 10, 28, 29, 56, 58]

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

 Это финальный результат:






Порядок выполнения работы:

1. Создайте новый документ


Размер 760×770 пикселей

Фон: не играет роли

2. Создайте еще один документ размером 4×4 (мы будем делать шаблон)
3. Увеличиваем на 1600%, выбираем инструмент pencil tool (размер 1 пиксель) и начинаем рисовать несколькими цветами, можно использовать эти

4. Затем идем Edit > define pattern


Выбираем имя шаблона и нажимаем OK

5. Создадим новый слой ( CTRL+SHIFT+N)


Выбираем инструмент Paint Bucket Tool. И используем тот шаблон, который мы сделали

Заполняем наш будущий дизайн странички этим видом заливки



6. Затем идем Filter > render > Lightning Effects, и устанавливаем следующие настройки



7. Затем выбираем Rounded rectangle tool, устанавливаем радиус на 5 пикселей, и создаем форму на нашем рисунке



8. Идем Edit > Transform > Warp Tool (у вас есть Warp tool, только если у вас CS2 или выше)

Для warp tool используем такие настройки


Вот результат

9. Копируем этот слой (CTRL+J) и создаем такую же форму, но чуть меньше и располагаем под первым.



10. Затем выбираем инструмент rounded rectangle Tool, создаем простую форму белого цвета, можно использовать другой для наглядности.



11. Затем выбирайте оба слоя



Объединяем их, путем нажатия CTRL+E



12. Затем загрузите выделение для большой формы (для этого идем сюда Select > Load selection)



13. Будьте уверены инструмент Rectangular Marquee Tool уже выбран, затем переместите выделение так же, как и на картинке




14. Сейчас вы должны применить rasterize к главной форме



15. будьте уверены главная форма уже выбрана, затем нажмите CTRL+SHIFT+I (это обратит ваше выделение)


16. нажмите Delete на вашей клавиатуре

17. Затем CTRL+D

Вот результат

18. Снова загрузите выделение для большой формы.


19. Выбирайте rectangular Marquee Tool (используя следующие настройки:)



20. Затем с помощью rectangular marquee tool создаем вот такое выделение:



Вы получите что-то вроде этого после того, как отпустите кнопку мыши.



21. Создайте новый слой ( CTRL+SHIFT+N)


22. Выбираем paint bucket tool, и нажимаем один раз внутри выделения (используйте тот цвет, который хотите)

23. Затем нажмите CTRL+D, и идите в настройки стиля слоя








Вот результат



24. Затем для главной формы используйте те же настройки стиля



25. Для белой формы примените следующий стиль


Вот результат



26. Выбираем белый слой и маленький оранжевый слой в нашем меню слоев


и перетащите их на кнопку" create a new layer "

Это скопирует оба слоя, но при этом 2 останутся выделенными. Объедините их нажатием CTRL+E



27. Выделим этот слой и идем Edit > Transform > Flip Vertical


И с помощью мыши размещаем его следующим образом:


28. Затем выбираем Rounded rectangle Tool и создаем форму, как на рисунке

29. Применяем Rasterize для этой формы, затем создаем форму другого цвета и размещаем, как на рисунке



30. Загружаем выделение для этой формы (для загрузки выделения нажмите CTRL + левой кнопокй мыши по слою с нашей формой)


Вы увидите выделение вокруг формы

31. Выбираем слой с оранжевой формой



32. Нажимаем CTRL+SHIFT+I (обращение выделения), и с помощью eraser tool удаляем некоторые части нашей формы (следите за зеленым цветом)



Использовали зеленый, чтобы вы увидели где надо удалить



33. Снова нажимаем CTRL+SHIFT+I, у вас уже выбран инструмент Rectangular marquee Tool, перемещаем выделение, как на рисунке




34. Затем стираем всё внутри выделения с помощью Eraser tool



35. Нажимем CTRL+D, Затем создаем выделение, как на рисунке, с помощью Rectangular Marquee Tool



36. Будьте уверены, выбран оранжевый слой. Снова стираем Eraser tool. Нажимаем CTRL+D



37. Создаем другое выделение



38. Чистим с помощью eraser toll, так же, как на рисунке



39. Примените следующие стили для слоя









Вот результат



40. Выбираем Rounded Rectangle tool еще один раз, и создаем еще 2 две формы (цвет не важен)



41. Применяем Rasterize к этим слоям

42. Тогда с помощью Esraser tool удаляете главную часть этих 2 зеленых форм (когда Вы будете удалять держите клавишу SHIFT — Таким образом Вы удалите очень хорошо)

Вот результат



43. Примените следующие настройки стиля









44. Теперь продублируем заголовки для наших блоков с контентом и разместим как на рисунке45. Теперь, используя Rounded rectangle Tool, создадим несколько простых форм и разместим их примерно так:



46. Затем добавим какие-нибудь пиксельные иконки, или что-то похожее, ну и конечно же не забудем добавить некоторый текст рядом с иконками.




47. Вставляем очищенную картинку и простой логотип.


Вот, в принципе, и все =)

 

А так же вы можете добавить формы для логина в правой части сверху. Использовали Rounded rectangle tool для добавления этих форм.

Вот финальный результат.





Практическая работа №3 (2 часа)

Тема: Web-дизайн в PhotoShop и Image Ready

Цель работы: научиться разрабатывать визуальный образ сайта.
План

  1. Создание разметки

  2. Цвет при размещении изображений в Интернете

  3. Создание макета, основанного на таблицах

  4. Предварительный просмотр веб- графики

  5. Фотоальбом в Интернете

Основная литература: [9, 15, 24, 27, 33, 34, 40]

Дополнительная литература: [3, 4, 10, 28, 29, 56, 58]
Разработка дизайна веб- сайта с помощью PhotoShop или Image Ready начинается с создания новых документов с размерами, соответствующими размеру на экране будущей веб- страницы и всех ее веб- элементов. Затем нужно задать структуру веб-страницы с помощью сетки разметки – так определяются области страницы с разным назначением; это могут быть столбцы, строки, прямоугольные фрагменты. Такой подход удобен, когда в веб-странице используются HTML-таблицы, поскольку сетка помогает выровнять элементы и позволяет сформировать более явно выраженную структуру, которую легко перевести в таблицы.


  1. Первые шаги по созданию веб- страницы

Создание веб- страницы.
И в PhotoShop, и в Image Ready новую страницу можно сформировать командой File\New (Файл\Создать). В открывшемся диалоговом окне веси название нового файла, выбрать один из заданных размеров в списке Size (размер) или ввести ширину и высоту прямо в поля Width (ширина) и Height (высота) и затем переключателем в разделе Background Contents (содержимое фонового слоя) (PhotoShop) или Contents of first Layer (содержимое первого слоя (Image Ready) выберите исходное заполнение самого нижнего слоя документа. Доступны варианты White (белый), Background Color (цвет фона) и Transparent (прозрачный). Если вы работаете в PhotoShop, проверьте разрешение – оно должно равняться 72 ppi, в качестве режима должен быть установлен RGB, и, кроме того, измените единицы разрешения на пиксели.

Диалоговое окно New Document (создать документ) в Image Ready немного отличается от аналогичного диалогового окна в PhotoShop. Поскольку программа Image Ready предназначается только для веб- дизайна, в ней автоматически формируется документ с разрешением 72 ppi, в качестве единиц измерения используются только пиксели и устанавливается цветовой режим RGB. Кроме того, предлагается несколько заданных размеров документа: Web Banner (веб- баннер), Half Web Banner (половинный веб-баннер), web-page (веб- страница), размер которой совпадает с местом, остающимся для просмотра веб- страницы на мониторе с разрешением 800x600 и 1024x768 пикселов.


Создание разметки
Сетка из направляющих определяет области веб- страницы. В Image Ready или PhotoShop направляющие устанавливаются путем вытягивания мышью из соответствующих линеек и расположения в окне документа. Но в Image Ready есть дополнительное средство, позволяющее создавать шаблоны с регулярной сеткой из направляющих. Чтобы им воспользоваться , необходимо выбрать команду View\ Create Guides (Вид\ Создать направляющие), и на экране появится диалоговое окно Create Guides (Создать направляющие).

Для добавления в окно документа горизонтальных и (или) вертикальных направляющих нужно установить флажок Horizontal Guides (горизонтальные направляющие) и (или) Vertical Guides (вертикальные направляющие). Затем для обоих типов направляющих определить их количество. Это можно сделать одним из трех способов:



  • Указать собственно количество направляющих (переключатель в поле guides, evenly spaced (направляющие равномерно распределенные));

  • Задать расстояние между соседними направляющими в пикселях (переключатель и поле pixels between guides (пикселов между направляющими));

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

Количество направляющих должно находиться между 0 и половиной ширины или высоты изображения минус 1. Например, для изображения шириной 640 пикселов максимальное количество горизонтальных направляющих равно 319. Расстояние между направляющими в пикселях не должно быть меньше 2 и больше ширины или высоты изображения минус 1. Например, для изображения 480 пикселов высотой максимальное расстояние между горизонтальными направляющими равно 479 пикселям.

Кроме того, можно удалить все существующие в изображении направляющие, установив флажок Clear Existing Guides (стереть существующие направляющие), а чтобы видеть новые направляющие во время их настройки, необходимо установить флажок Preview (предварительный просмотр).


  1. Цвет при размещении изображений в Интернете

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



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

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

  • Графический формат. В выбранном для веб- изображений графическом формате может быть ограничено количество сохраняемых цветов. Например, в формате GIF записывается только 256 цветов.


Цветовая таблица

Цветовой таблицей называется пронумерованный список цветов изображения, используемый для сохранения в форматах GIF и PNG-8. В таком списке может содержаться максимум 256 цветов и минимум 2 цвета. Работая над графическими элементами веб- страницы, можно не заботиться о точной таблице цветов, но при оптимизации изображений для сохранения их в формате GIF или PNG-8 цветовая таблица играет очень важную роль.
Сглаживание

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

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



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

  • В PhotoShop или ImageReady. Если планируется сохранить изображение в формате GIF, PNG-8 или WBMP или же демонстрировать на 8-битовом мониторе, можно вручную сгладить его в PhotoShop. При этом вы контролируете степень сглаживания, то есть количество удаляемых цветов, выбираете метод сглаживания и сохраняемую цветовую таблицу.


Веб- палитра цветов

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

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

При оптимизации. Когда изображение уже готово к оптимизации для размещения на веб- сайте, несколько элементов настройки в палитрах Optimize (оптимизация) и Color Table (цветовая таблица) помогут преобразовать его цвета в безопасные цвета из веб- палитры.


Настройка гаммы в ImageReady

При создании изображений для размещения в Интернете необходимо учитывать настройки гаммы на мониторах посетителей вашего сайта. ImageReady позволяет выполнять специальную цветовую коррекцию для настройки изображения под различные значения гаммы. Выберите команду Image\Adjustments\Gamma (изображения \настройки \гамма), в открывшемся диалоговом окне выполните настройку и нажмите ОК.

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

Настройка гаммы в этом диалоговом окне изменяет фактические значения цветов всех пикселей изображения. Любая команда из подменю Preview (предварительный просмотр) меню View (вид) меняет вид изображения на экране монитора, но не приводит к редактированию самого изображения.





  1. Создание макета, основанного на таблицах

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

И PhotoShop и ImageReady способны сохранять html-код таблицы вместе с изображениями, делается это установкой параметров вывода. Но кроме того, в ImageReady можно настраивать таблицы прямо в изображении, определив фрагменты нарезки как ячейки таблицы. Эти фрагменты преобразуются в таблицы, вложенные в основную таблицу изображения. Атрибуты таблиц устанавливаются с помощью палитры Table (таблица), в них входят интервалы между ячейками и ширина границ в таблице, а также отступ от границ ячейки до ее содержимого.

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


  • Щелкните на кнопке Group Slice Into Table (сгруппировать фрагменты в таблицу) внизу палитры Web Content (веб- содержимое).

  • В палитре Slice (нарезка) измените тип фрагментов нарезки в списке Type (тип) с Image (Изображение) на Table (таблица), при этом из каждого фрагмента создается отдельная таблица.

  • Если один или несколько выделенных фрагментов нарезки являются частью существующей таблицы, выберите команду Slices\Add Slices To Table (нарезка \добавить фрагменты в таблицу). В этом случае в существующую таблицу добавятся все не входившие в нее фрагменты нарезки.

Для дополнения выделенных фрагментов нарезки до прямоугольной таблицы ImageReady автоматически создает дополнительные пользовательские фрагменты. Кроме того, программа также автоматически формирует пробельные ячейки (под названием spacer.gif), если это требуется для правильной демонстрации изображения в определенных браузерах. При этом в палитре Web Content (веб- содержимое) рядом с названием таблицы появляется желтый треугольник с восклицательным знаком.

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



  • В окне документа выделите значок таблицы инструментом Slice Select (выделение фрагмента нарезки)

  • В палитре web Content (веб- содержимое щелкните на названии таблицы.

Параметры таблицы задаются в палитре Table (таблица)

    1. В поле ID (идентификация) введите название таблицы.

    2. В разделе Dimensions (Размеры) в полях X и Y задайте позицию таблицы относительно левого (X) и верхнего (Y) краев изображения. В поля W и H введите ширину и высоту таблицы в пикселях или процентах от размеров окна браузера.

    3. В разделе Auto Slicing (автоматическая нарезка) выберите метод перевода автоматических фрагментов нарезки в таблицы: Default (по умолчанию), As Columns (rowspans) (Как столбцы, объединяются строки) или As Rows (colspans) (Как строки, объединяются столбцы).

    4. Настройте вид ячейки в разделе Cell Options (параметры ячейки). Параметр Border (граница) определяет ширину границы таблицы, а также наличие рамок ячеек (когда он равен нулю, рамки не видны). Ширину границ между ячейками задает параметр Space (интервал). Параметр Pad (заполнение) устанавливает отступ от границ ячейки до ее содержимого.

Чтобы удалить таблицу, основанную на нарезке (разгруппировав при этом фрагменты), выделите таблицу и выполните одно из действий:

      • Выберите команду Delete Slice (удалить фрагменты нарезки) из меню палитры Slices (нарезка) или палитры web Content (веб-содержимое).

      • Выберите команду Slices\ Delete Slice (нарезка \удалить фрагменты нарезки)

      • Выберите команду Slices\ Delete All (нарезка \удалить все), чтобы удалить всю нарезку и, соответственно, все таблицы из документа (при этом можно ничего предварительно не выделять)

      • Если выделена только часть фрагментов, составляющих таблицу, и их нужно исключить из таблицы, выберите команду Remove Slices From Table (удалить фрагменты нарезки из таблицы).

Для первых двух случаев появится диалоговое окно, в котором нужно выбрать, что именно требуется удалить: Table Only (только таблицу) или Tables and Contents (таблицу и содержимое).


  1. Предварительный просмотр веб- графики

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


Предварительный просмотр на холсте

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

Чтобы просмотреть изображение в окне документа ImageReady, выберите команду Image\Prewiew Document (Изображение \Просмотр документа) или нажмите кнопку Preview Document (предварительный просмотр документа).
Предварительный просмотр оптимизированного изображения.

В ImageReady можно выводить на экран исходное несжатое изображение и (или) один или три варианта его оптимизированных версий. Для перехода от одного вида к другому достаточно щелкнуть на нужной вкладке в левом верхнем углу окна документа:



  • Original (оригинал) – исходное несжатое изображение

  • Optimized (оптимизированное) – изображение с заданной степенью сжатия

  • Режимы 2-up и 4-up – в окне документа в разных окнах показывают одновременно две или четыре версии изображения: исходное и один или три варианта оптимизации. Такой способ просмотра позволяет сравнивать оптимизированные версии с оригиналом и видеть влияние параметров оптимизации на изображение. Под каждым вариантом отображается следующая информация: параметры оптимизации, ожидаемый размер файла и время его загрузки при заданной скорости соединения с Интернетом.


Предварительный просмотр в браузере

ImageReady позволяет открыть изображение в веб- браузере.



  • Чтобы быстро открыть изображение в браузере, щелкните по кнопке Preview In (просмотр в) на панели инструментов.

  • Второй способ: выбрать браузер в подменю Preview In (просмотр в) в меню File или там же выбрать вариант Other Browser (другой браузер) и затем найти файл приложения в открывшемся диалоговом окне. По умолчанию при отображении документа ImageReady в веб- браузере под содержимым страницы демонстрируется создаваемый программой html-код. Эту функцию можно отключить, выбрав команду File\Preview In \ Include Source on Page (файл\ просмотр в\ включить код)



  1. Фотоальбом в Интернете

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



Рассмотрим процесс создания фотоальбомов для веб.

  1. Подготовьте фотографии к размещению в Интернете следующим образом:

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

  • В палитре File Browser (обозреватель файлов) в PhotoShop (открывается командой Window\ File Browser (окно \обозреватель файлов)) выделите изображения, которые требуется включить в альбом. Поскольку вы уже расположили их в отдельной папке, сейчас достаточно выделить все файлы только из одной папки.

  1. Из основного меню PhotoShop выберите команду File\ Automate\ Web Photo Gallery (файл\ автоматизация\ фотогалерея для веб) или из меню палитры File Browser (обозреватель файлов) команду Automate\ Web Photo Gallery (автоматизация\ фотогалерея для веб)

  2. Откроется диалоговое окно Web Photo Gallery (фотогалерея для веб).

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

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

  • В разделе Source Images (исходные изображения) определяется источник изображений для веб- страницы. В списке use (использовать) выберите один из вариантов: folder (папка) или Selected Images From File Browser (выделенные изображения из палитры File Browser). Если папка содержит вложенные папки и изображения из них также нужно включить в веб- галерею, установите флажок Include All Subfolders (включить все вложенные папки).

  • С помощью кнопки destination (размещение) определите место, куда будут записываться файлы и папки веб-сайта.

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

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

    • General (основные). Это параметры создания html-кода.

    • Large Image (большое изображение). Здесь собраны параметры для формирования больших изображений на веб- странице. В них входит степень качества изображения, его размеры, ширина границы, текст подписи к изображению, шрифт и кегль шрифта.

    • Thumbnails (миниатюры). Это параметры миниатюр: их размеры, количество в строке и (или) столбце, подпись.

    • Custom Colors (заданные цвета). В данном разделе определяются цвета элементов страницы – фона, текста, ссылок и баннера.

    • Security (защита). Поверх больших изображений можно разместить текст: имя файла, информацию об авторском праве, описания, заголовки или заданный текст (в списке Content (содержимое) вариант Custom Text (заданный текст), сам текст вводится в одноименное поле). В его параметры входит шрифт, кегль шрифта, цвет, прозрачность, позиция на изображении и поворот.

  2. Установив все параметры, нажмите кнопку ОК. PhotoShop начнет создавать новый веб- сайт. При этом вы будете видеть, как файлы открываются в PhotoShop, изменяются в размере, а затем сохраняются.

По окончании процедуры откроется веб- броузер, и PhotoShop передаст туда получившийся продукт (загрузится страница index.html).

Практическая работа №4 (6 часов)

Тема: Этапы разработки web-сайта

Цель работы: научиться планировать и формировать образ будущего сайта.
План

  1. Выбор темы сайта.

  2. Планирование:

  • цель создания;

  • целевая аудитория;

  • обратная связь с посетителем;

  • обновление информации.

Основная литература: [1, 5, 13, 14, 32, 33, 36]

Дополнительная литература: [2, 17, 19, 50, 54, 62]

Практическая работа №5 (6 часов)

Тема: Язык разметки гипертекста HTML

Цель работы: научиться реализовывать сайт при помощи технологии HTML.
План


  1. Структура документа HTML. Основные текстовые элементы страницы. Теги форматирования.

  2. Вставка графических элементов на web-страницу.

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

  4. Таблицы.

  5. Фреймы.

Основная литература: [1, 5, 6, 13, 14, 16, 23, 32, 33]

Дополнительная литература: [2, 17, 19, 50, 54, 62]

Практическая работа №6 (6 часов)

Тема: Каскадные таблицы стилей

Цель работы: научиться реализовывать сайт при помощи технологии CSS.
План


  1. Основные правила и свойства CSS

  2. Способы подключения каскадных таблиц стилей

  3. Свободно позиционируемые элементы и их применение для верстки сайта.

Основная литература: [1, 5, 6, 13, 14, 16, 23, 32, 33]

Дополнительная литература: [2, 17, 19, 50, 54, 62]

Лабораторная работа №1

Тема: Подготовка графических элементов web-сайта

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

План


1. Подготовка логотипа.

2. Создание фона.

3. Создание других графических элементов.
Лабораторная работа №2

Тема: Знакомство с интерфейсом программы Macromedia DreamWeaver

Цель: научиться проектировать и создавать web-узлы.
План


  1. Основные элементы окна программы.

  2. Планирование web-узла.

  3. Создание локального web-узла.


Главное окно программы

Главное (или основное) окно программы Macromedia Dreamweaver MX показано на рис. 2.2. Рассмотрим его подробнее.





Рис. 2.2. Главное окно Dreamweaver

Главное окно служит "вместилищем" для превеликого множества других окон, содержащих как открытые Web-страницы, так и различные инструменты, предназначенные для работы с ними. Также в главном окне находится строка главного меню, с помощью которого вы сможете получить доступ ко всем возможностям Dreamweaver.

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



Рис. 2.3. Панель, отделенная от края родительского окна

"Отклеенная" от края главного окна панель может быть перемещена в любое место экрана, даже за пределы главного окна программы. Кроме

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



Рис. 2.5. "Сжатое" окно панели

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





Рис. 2.7. Кнопка скрытия-раскрытия дока

Как правило, все панели Dreamweaver имеют примерно одинаковые возможности (но, конечно, разное назначение). Но две из них стоят особняком.

Первая из них — это панель объектов, показанная в "плавающем" виде на рис. 2.3 (она носит название Insert). Эта панель служит для быстрой вставки в документ различных элементов: рисунков, таблиц, специальных символов, расширений Web-обозревателя и пр. (Также она служит для переключения режимов работы окна документа, но об этом поговорим позже.) Панель объектов содержит множество вкладок, между которыми вы можете переключаться, — это способ сделать ее чуть более вместительной.

Если в данный момент времени панель объектов вам не нужна, можете закрыть ее, раскрыв ее дополнительное меню и выбрав пункт Close Panel Group. Чтобы открыть ее впоследствии, выберите в меню Windows пункт Insert или нажмите комбинацию клавиш +.

Вторая панель, имеющая заголовок Properties, — это редактор свойств (рис. 2.8), один из важнейших и незаменимейших инструментов Dreamweaver. Редактор свойств служит для задания параметров того или иного элемента Web-страницы (фактически — значений атрибутов соответствующего HTML-тега). Если панель объектов вы можете со спокойной душой закрыть, чтобы освободить место на экране, и использовать для вставки элементов страницы пункты меню главного окна, то редактор свойств вам будет нужен всегда. Поэтому держите его под рукой. Если же вы его все же случайно закрыли, выберите в меню Windows пункт Properties или нажмите комбинацию клавиш +.



Рис. 2.8. Редактор свойств

Редактор свойств можно переключить в компактный или полный вид. Изначально он находится в компактном виде, не показывая некоторых, малоиспользуемых, с точки зрения разработчиков Dreamweaver, свойств. Чтобы развернуть, необходимо щелкнуть мышью по кнопке, имеющей вид стрелки, направленной вниз, — она расположена в правом нижнем углу панели. После этого редактор свойств покажет вам все доступные свойства. (На рис. 2.2 редактор свойств находится как раз в развернутом виде.) Заметьте, что при этом кнопка развертывания изменит вид на стрелку вверх, и при щелчке на ней вы, наоборот, свернете редактор свойств.



Управление окнами и панелями Dreamweaver

Как видите, Dreamweaver может вывести на экран сразу множество разнообразнейших окон. Как разобраться во всем этом многообразии?

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

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

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



Рис. 2.10. Вкладки, обозначающие все открытые окна документа в раскрытом состоянии

Если вам нужно держать на виду сразу два или больше окон, воспользуйтесь пунктами Cascade, Tile Horizontally или Tile Vertically меню Window. Первый из них "выкладывает" все открытые окна документов в виде "стопки" в окне программы так, что вы можете видеть их заголовки и часть содержимого. Второй и третий пункты "выкладывают" в окне программы "мозаику" из окон документов так, чтобы они не перекрывались. Причем второй пункт выкладывает "мозаику" по горизонтали, а третий — по вертикали.

Пункты Insert и Properties служат для вывода на экран или скрытия соответственно панели объектов и редактора свойств. Если слева от имени одного из этих пунктов стоит галочка, это значит, что соответствующая панель выведена на экран (или, как еще говорят, что соответствующий пункт меню "включен"). Чтобы убрать панель, снова выберите нужный пункт — и панель исчезнет вместе с галочкой. Такие пункты меню, меняющие свое состояние на противоположное при выборе, называют выключателями. Вместо выбора пунктов Insert и Properties вы можете нажать "горячие" комбинации клавиш + и + соответственно.

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

Если вам нужно скрыть на время все панели, чтобы без помех просмотреть открытую Web-страницу, выберите пункт Hide Panels в меню Window или одноименный пункт в меню View. Этот пункт работает как выключатель, т. е. при первом выборе он скрывает все панели, а при втором — снова выводит их на экран. Вы также можете нажать клавишу — это проще и быстрее, чем лезть в меню.


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

Три режима отображения Web-страницы

Окно документа Dreamweaver может показывать редактируемую Web-страницу в трех режимах отображения.

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

Но как получить доступ к HTML-коду? Ведь по умолчанию Dreamweaver предлагает вам редактировать Web-страницу в режиме WYSIWYG.

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

Рис. 2.15. Кнопки переключения режимов отображения Web-страницы

На рис. 2.15 крайняя правая кнопка нажата. Она включает режим отображения, предлагаемый Dreamweaver по умолчанию, — режим отображения страницы. В этом режиме вы можете работать с Web-страницей в режиме WYSIWYG.

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



Рис. 2.16. Режим отображения страницы и кода

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



Рис. 2.17. Режим отображения кода

Ну, а левая кнопка включает режим отображения кода (рис. 2.17).

Для переключения режимов отображения вы также можете воспользоваться пунктами Design, Code and Design и Code меню View, соответственно. При выборе одного из этих пунктов слева от его названия появляется галочка, показывающая, что данный пункт и, следовательно, данный режим включены. Такие пункты называются переключателями,

Просмотр Web-страницы

Хоть Dreamweaver в режиме просмотра страницы и представляет ее почти в таком виде, как она будет показана в Web-обозревателе, все же часто возникает необходимость увидеть ее в самом Web-обозревателе.

Давайте просмотрим в Internet Explorer нашу страничку, загруженную сейчас в окно документа. Для этого нажмем клавишу . На экране появится окно Web-обозревателя, знакомое нам по рис. 1.1.

Есть еще два способа вызова Web-обозревателя для просмотра редактируемой страницы. Первый из них — использование кнопки Preview/Debug in Browser инструментария документа. Эта кнопка показана на рис. 2.31.





Рис. 2.31. Кнопка Preview/Debug in Browser

Как видите, при нажатии этой кнопки появляется меню, предлагающее несколько пунктов. В данный момент нас интересует пункт Previews in iexplore. При выборе его, как вы уже поняли, открывается окно Internet Explorer, где будет загружена разрабатываемая вами страница.

Второй способ вызвать Web-обозреватель — это использовать подменю Preview in Browser меню File. В нем вы увидите пункт iexplore, аналогичный вышеописанному. Выбрав его, вы получите тот же самый результат.

Настройка Dreamweaver

А сейчас самое время настроить наш Dreamweaver так, чтобы он нормально понимал русский язык.

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

Учим русский

Выберем в списке вкладок пункт New Document. Окно настройки примет вид, показанный на рис. 2.35. Итак, что же здесь изображено?





Рис. 2.35. Вкладка New Document диалогового окна Preferences

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

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

Современные программы Web-обозревателей поддерживают все доступные сейчас кодировки и корректно их распознают. Это первое. Второе: Web-сервер (точнее, его администратор) может потребовать, чтобы публикуемые вами странички были закодированы в какой-либо конкретной кодировке, например в КОИ-8. Это стоит иметь в виду, когда вы будете выбирать кодировку для своего Web-творения.

Итак, какие же кодировки поддерживает Dreamweaver? (Имеются в виду, конечно же, русские кодировки.) Все они перечислены в табл. 2.4 и задаются с помощью раскрывающегося списка Default Encoding.

Таблица 2.4. Кодировки русского текста, поддерживаемые Dreamweaver
















Обозначение

Описание







ISO-8859-5 КОИ8 (KOI-8R) MacCyrillic Windows-1251

Русская версия MS-DOS
Русские версии UNIX-совместимых систем
Русская версия ОС Macintosh
Русские версии Windows, начиная от версии 3.0







Western (Latin1)

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
















Какую же кодировку выбрать? Ответ прост. Если вы не связаны какими-либо специфическими требованиями администратора Web-сервера, на котором будет опубликован ваш сайт, смело выбирайте пункт Windows-1251. В противном случае выберите ту кодировку, которую требует сервер. Если вы создаете странички на английском языке, ваш выбор — Western (Latinl).

Теперь переключитесь на вкладку Fonts (рис. 2.36). На этой вкладке вы сможете настроить шрифты, которыми будет отображаться текст вашей страницы. В списке Font Settings выберите шрифтовой набор, который будет использован для отображения ваших Web-страниц. Здесь альтернатива еще проще: если текст русский — выбирайте Cyrillic, если английский — Western (Latinl).





Рис. 2.36. Вкладка Fonts диалогового окна Preferences
Лабораторная работа №3

Тема: Создание и редактирование текстовой информации на web-странице

Цель: научиться создавать html-документы.
План

  1. Определение параметров страницы.

  2. Ввод и форматирование текста.


Создание новой Web-страницы

Для этого нужно выбрать пункт New в меню File или нажать комбинацию клавиш +. После этого появится диалоговое окно New Document (рис. 3.1).



Ввод текста

Сейчас мы наберем наш первый текст в окне документа Dreamweaver (рис. 3.2).

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



Рис. 3.2. Наш первый текст

Одна из Web-страниц на Web-сервере задается в качестве страницы по умолчанию. Такая страница обычно носит имя default или index (и расширение htm или html). Но в данном случае мы пренебрегли этим соглашением, хотя наша первая страница так и просится быть страницей по умолчанию. Давайте назовем ее 3.1.htm Не беспокойтесь по поводу нарушения соглашений — это ненадолго.



Форматирование абзацев

Прежде всего, давайте сделаем нашей странице заголовок. (Имеется в виду не HTML-заголовок, а обычный заголовок, как у газеты.) Первой строкой как раз набрано "Здравствуйте" — она прекрасный кандидат в заголовки.

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

Пункт Paragraph этого списка форматирует текст как обычный абзац (отмечаемый тегом <Р>). Пункты Heading 1, ..., Heading 6 позволяют превратить его в заголовок, соответственно, первого, второго уровня и т. д. Пункт Preformatted превращает абзац в текст фиксированного формата, где форматирование задано не тегами HTML, а как в обычном тексте: отступы создаются пробелами, а разбиение на абзацы — символами возврата каретки и перевода строки. Это может быть очень полезно при выкладывании в Сеть больших текстовых документов, созданных в старых текстовых редакторах, без сложного HTML-форматирования.





Рис. 3.4. Раскрывающийся список форматов абзаца, находящийся в редакторе свойств



Рис. 3.5. Созданный нами заголовок

Примечание

Заголовки создаются парными тегами

  1   2   3   4   5


База данных защищена авторским правом ©refedu.ru 2016
обратиться к администрации

    Главная страница