Учебно-методический комплекс дисциплины дс. Ф. 1 Web-графика и web-дизайн основная образовательная программа подготовки специалиста по специальности
Скачать 3.38 Mb.
|
. Поставим текстовый курсор на строку "Здравствуйте" и выберем в меню форматов пункт Heading 1 — это наилучшим образом подходит для приветствия. Получившийся результат показан на рис. 3.5. Если вы закрыли редактор свойств, не беспокойтесь — то же самое вы можете сделать, используя главное меню или контекстное меню окна документа. В первом случае выберите в меню Text пункт Paragraph Format и в появившемся на экране подменю — нужный формат абзаца. Во втором случае щелкните правой кнопкой мыши на строке приветствия, также выберите пункт Paragraph Format и в подменю — формат абзаца. Теперь давайте выровняем заголовок по центру. В этом нам помогут кнопки выравнивания редактора свойств (рис. 3.6).  Рис. 3.6. Кнопки выравнивания, расположенные в редакторе свойств Эти кнопки задают выравнивание соответственно (порядок перечисления слева направо):
Внимание! Полное выравнивание поддерживается только новыми версиями Web-обозревателей. Одновременно может быть нажата (включена) только одна из этих кнопок либо ни одной. (В последнем случае задается так называемое выравнивание по умолчанию, как правило, по левому краю.) Такие кнопки называются кнопками-переключателями, по аналогии с пунктами-переключателями меню. Итак, снова установим текстовый курсор на заголовок и нажмем кнопку выравнивания по центру. На рис. 3.7 показано, что у нас получится в этом случае.  Рис. 3.7. Центрированный заголовок Аналогичного результата вы можете достигнуть, воспользовавшись подменю Align меню Text или аналогичным подменю контекстного меню. Пункт-переключатель Left задает выравнивание по левому краю, Center — по центру, Right — по правому краю, a Justify — полное выравнивание. Примечание Выравнивание задается значением атрибута ALIGN тегов <р> и Теперь давайте как-нибудь выделим последнюю строку со сведениями об авторских правах. Можно поставить текстовый курсор в ее начало и нажать клавишу Взгляните на кнопки, показанные на рис. 3.8. Эти кнопки позволяют установить или убрать отступ слева у абзаца. Левая кнопка уменьшает (убирает) отступ, а правая — увеличивает.  Рис. 3.8. Кнопки задания отступа абзаца, находящиеся в редакторе свойств Давайте поставим курсор мыши на последнюю строку текста и нажмем кнопку увеличения отступа. Результат показан на рис. 3.9. Вы можете еще раз нажать эту кнопку для увеличения отступа или левую кнопку, чтобы уменьшить отступ.  Рис. 3.9. Строка с отступом Теперь обратим внимание на список тем, доступных на сайте. (Из строк этого списка потом будут сделаны гиперссылки, указывающие на соответствующие страницы.) И вспомним, что "обычные" текстовые редакторы поддерживают создание нумерованных и маркированных списков. Пункты нумерованных (упорядоченных) списков обозначаются порядковыми номерами, а пункты маркированных (неупорядоченных) списков -какими-либо значками. Прежде всего, выделите все строки, которые войдут в список. Всего их три. Для того чтобы преобразовать выделенные строки в список, опять воспользуемся кнопками редактора свойств. Они показаны на рис. 3.10. Левая кнопка создает маркированный список, а правая — нумерованный. В данный момент времени может быть нажата только одна кнопка либо ни одной; в последнем случае абзац возвращается к своему обычному виду.  Рис. 3.10. Кнопки создания списков, расположенные в редакторе свойств Нажмите левую кнопку. Созданный нами маркированный список показан на рис. 3.11.  Рис. 3.11. Маркированный список В меню Text и в контекстном меню предусмотрено специальное подменю List, выполняющее те же действия. В табл. 3.1 описаны все пункты-переключатели этого подменю. Каких-либо комбинаций клавиш для них не предусмотрено. Таблица 3.1. Пункты подменю List
Кроме того, вы получаете возможность изменить некоторые дополнительные параметры списка. Для этого нажмите кнопку List Item на панели редактора свойств (рис. 3.12). На экране появится диалоговое окно List Properties (рис. З.1З). Давайте рассмотрим это окно подробнее.  Рис. 3.12. Кнопка доступа к дополнительным свойствам списков  Рис. 3.13. Диалоговое окно List Properties Раскрывающийся список List Type позволяет задать тип списка. Здесь доступны следующие позиции:
Если выбран первый или второй пункт, становятся доступными другие элементы управления. Раскрывающийся список Style позволяет задать стиль маркера или нумерации списка. Если выбран маркированный список, доступны следующие значения:
Если же выбран нумерованный список, доступны:
Кроме того, если выбран нумерованный список, доступно поле ввода Start Count, где вы сможете ввести номер, с которого начнется нумерация строк списка. Все эти настройки относились к списку в целом. В нижней половине окна расположена группа элементов управления List Item, затрагивающая только ту строку списка, на которой находится текстовый курсор. В эту группу входят раскрывающийся список New Style и поле ввода Reset Count To, аналогичные раскрывающемуся списку Style и полю ввода Start Count верхней части окна. Закончив настройку свойств, нажмите кнопку ОК для сохранения установок или Cancel — для отказа от них. Вы можете немного "поиграться" с этими дополнительными настройками, чтобы узнать их получше. Форматирование отдельных символов Все текстовые редакторы, например Microsoft Word или поставляемый в составе Windows WordPad, позволяют менять начертание и размер шрифта текста, делать его жирным, курсивным или подчеркнутым, а также менять его цвет. Все это доступно и в Dreamweaver. Нужно только иметь в виду, что возможности HTML по форматированию текста сильно ограничены существующими стандартами. Попытаемся сделать некоторые фрагменты текста нашей страницы жирными и курсивными. И помогут нам в этом две кнопки изменения начертания, показанные на рис. 3.14.  Рис. 3.14. Кнопки изменения начертания шрифта Соответственно, левая (В) кнопка позволяет сделать шрифт жирным, а правая (I) — курсивным. Обе эти кнопки могут быть нажаты или отжаты независимо, т. е. текст может быть простым, жирным, курсивом или жирным курсивом. Выделим слова "Иван Иванович Иванов" и нажмем кнопку В. Текст станет жирным. Теперь выделим полностью последнюю строку (со сведениями об авторских правах) и нажмем кнопку I. Последняя строка станет курсивной. Полученный результат можно увидеть на рис. 3.15.  Рис. 3.15. Жирный текст и курсивная строка А вот чтобы включить или выключить подчеркивание текста линией, вам все равно придется воспользоваться пунктом-выключателем Underline подменю Style меню Text или контекстного меню. Ни кнопки, ни комбинации клавиш для этого не предусмотрено. Вы могли заметить, что в подменю Style много пунктов. Давайте их рассмотрим. Здесь нужно сказать, что все теги HTML, предназначенные для оформления текста, делятся на две большие группы. Теги физического форматирования просто говорят Web-обозревателю: "Сделай текст вот таким и не задавай лишних вопросов". Таким образом, если вы сделали текст жирным, то Web-обозреватель просто выведет его жирным шрифтом, не выполняя при этом никакой дополнительной обработки. Такие теги хороши тогда, когда вы не даете оформляемому с их помощью тексту никакого особого значения. В отличие от них, теги логического форматирования дают тексту, составляющему их содержимое, какое-либо дополнительное значение. Например, вы можете превратить с помощью одного из этих тегов фрагмент текста в цитату. Web-обозреватель выведет ее особым шрифтом (как правило, курсивом). Выделение текста жирным и курсивным шрифтом, рассмотренное нами выше, выполняется с помощью тегов физического форматирования. В самом деле, мы просто по-другому выделили некоторые фрагменты текста нашей странички, не давая им какого-то особого значения. И Web-обозреватель нас прекрасно поймет. Давайте же продолжим изучение подменю Style. В нем мы видим пункт-выключатель Strikethrough, включив который мы сделаем выделенный фрагмент текста зачеркнутым. Зачеркивание текста выполняется опять же с помощью тега физического форматирования. А остальные пункты подменю Style задают именно логическое форматирование. В табл. 3.2 приведены все эти пункты и их краткие описания, а на рис. 3.16 — примеры текста, отформатированные с использованием соответствующих пунктов этого подменю. Вы можете сами сделать такой пример и поэкспериментировать с разными стилями текста; сохраните его в файле 3.2.htm. Таблица 3.2. Пункты логического форматирования подменю Style
 Рис. 3.16. Примеры различного форматирования текста с помощью пунктов подменю Style Теперь давайте зададим шрифт, которым набран наш текст. Делается это с помощью двух раскрывающих списков, расположенных в редакторе свойств. Разумеется, Dreamweaver предоставляет в ваше распоряжение также соответствующие пункты меню и комбинации клавиш. Для смены шрифта используется раскрывающийся список, показанный на рис. 3.17, а для смены размера шрифта— список, показанный на рис. 3.18. Но для того, чтобы понять, что же там отображается, нужно дать некоторые разъяснения.  Рис. 3.17. Раскрывающийся список смены шрифта  Рис. 3.18. Раскрывающийся список задания размера шрифта Вспомним, зачем создавалась Всемирная паутина WWW. А именно, чтобы каждый человек, пользуясь любой компьютерной платформой, находясь в любой части света, смог прочитать любой HTML-документ. А т, к. разные компьютерные платформы имеют разные параметры видеоподсистемы, в частности разные стандартные шрифты, то задача одинакового отображения сильно усложняется. Поэтому HTML определяет несколько стандартных шрифтов, которые обязательно должны быть установлены на компьютере клиента, и несколько, а именно семь, размеров этих самых шрифтов. Конечно, вы можете использовать в своих Web-страницах другие шрифты, но тогда потрудитесь, чтобы они были установлены у пользователя. Впрочем, если на клиентском компьютере не будет того или иного шрифта, операционная система и Web-обозреватель используют ближайший максимально похожий из уже установленных шрифтов. Наименования шрифтов в стандарте HTML могут записываться сразу несколько, через запятую. При этом если первого в списке шрифта на клиентском компьютере нет, Web-обозреватель ищет второй, третий и т. д., пока не доберется до стандартного шрифта, который уж точно должен там быть. Посмотрите еще на рис. 3.17. В этом раскрывающемся списке присутствуют все стандартные шрифты, определенные HTML. Вы можете выбрать любой из них. Если же вас не устраивает ни один, то вы можете просто ввести туда название любого другого шрифта, установленного на вашем компьютере и нажать клавишу Пункт Default Font этого списка сбрасывает шрифтовые установки, точнее, возвращает их к установкам родительского элемента. Соответственно, в раскрывающемся списке размеров шрифта (рис. 3.18) отображены все доступные размеры шрифтов. Их семь, как уже и говорилось. Кроме того, в этом меню присутствуют пункты вида +n и —n, где n -число от 1 до 7. Выбор этих пунктов позволяет соответственно увеличить или уменьшить размер шрифта на n ступеней относительно шрифта родительского элемента. Пункт None позволит вернуть размер шрифта к установкам родительского элемента. Перед тем как изменять наименование или размер шрифта, нужно выделить соответствующий фрагмент текста. Это вам уже знакомо: все уже известные вам команды форматирования текста работают таким же образом. Давайте выделим имя нашего героя и увеличим его на два размера. Для этого выберем в раскрывающемся списке размера шрифта пункт +2. Полученный результат показан на рис. 3.19. Теперь сменим шрифт. Но не какого-то выделенного фрагмента, а ВСЕГО текста. Для этого выделим весь текст в окне. Конечно, для этого можно выбрать пункт Select All меню Edit или нажать комбинацию клавиш  Рис. 3.19. Увеличенный шрифт Теперь, когда все содержимое документа выделено, выберите нужный шрифт. Для примера выберем пункт Verdana, Arial, Helvetica, sans-serif -любимый шрифт автора. (Конечно, автор не собирается навязывать вам свои эстетические вкусы — это просто для примера.) Результат показан на рис. 3.20.  Рис. 3.20. Web-страница после изменения шрифта Задать шрифт вы также можете с помощью подменю Font, расположенного в меню Text и контекстном меню. Для смены размера шрифта Dreamweaver предоставляет целых два подменю: Size и Size Change. Оба они располагаются в меню Text. В контекстном меню они объединены в одно подменю Size. Никаких клавишных сочетаний для выполнения этих операций с клавиатуры не предусмотрено. Теперь давайте выделим цветом название программного продукта. Снова обратим внимание на редактор свойств. На рис. 3.21 показан инструмент для задания цвета — так называемый селектор цвета.  Рис. 3.21. Селектор цвета Dreamweaver Селектор цвета состоит из двух частей. Справа находится поле ввода, где вы можете ввести шестнадцатеричный код нужного цвета. Но вряд ли вы помните наизусть шестнадцатеричные коды ваших любимых цветов. Поэтому слева находится кнопка вызова окна выбора цвета, которое показано на рис. 3.22.  Рис. 3.22. Окно выбора цвета селектора цветов Большую часть этого окна занимает палитра, где, собственно, вы и ищете нужный цвет. При этом в небольшом текстовом поле, расположенном в центре верхней серой полосы окна, высвечивается шестнадцатеричный код цвета, над которым вы в данный момент держите курсор мыши. Это очень удобно: впоследствии вам уже не надо будет долго выбирать цвет из палитры — вы просто введете в поле ввода селектора его код. Если же ни один цвет из палитры вам не подходит, вы можете с помощью того же курсора мыши (имеющего вид пипетки) "взять" необходимый цвет откуда угодно: с рабочего стола, из любого окна, из любого элемента управления. Чтобы закрыть окно выбора цвета, нажмите клавишу Примечание Все цвета из палитр Color Cubes и Continuous Tone являются безопасными, цвета из других палитр — нет. Естественно, если вы выбрали какой-то цвет извне окна выбора цветов, он совсем не обязательно уложится в безопасную палитру. Название изучаемой нами программы уже выделено, так что щелкнем по кнопке селектора цветов и выберем любой понравившийся цвет. Если вы предпочитаете работать с меню, то для смены цвета шрифта воспользуйтесь пунктом Color меню Text. Вставка специальных символов Давайте отделим первый и второй абзацы от остального текста. Конечно, можно вставить пустую строку, но мы поступим лучше. И HTML (вкупе с Dreamweaver) нам в этом поможет. Поставим текстовый курсор в начало третьего абзаца и нажмем кнопку Horizontal Rule (рис. 3.23), расположенную на вкладке HTML панели объектов. Между вторым и третьим абзацами появится разделяющая их горизонтальная линия. Вы также можете использовать пункт Horizontal Rule меню Insert.  Рис. 3.24. Горизонтальная линия Щелкните мышью по горизонтальной линии — она будет выделена целиком. После этого обратите внимание на редактор свойств. Вместо свойств текста и шрифта там будут отображены свойства горизонтальной линии, которые вы, конечно же, можете изменить (рис. 3.25).  Рис. 3.25. Вид редактора свойств при выделенной горизонтальной линии Давайте подробно опишем все элементы управления редактора свойств, доступные в этом случае:
Давайте зададим ширину линии, равную 50%. Для этого выберите в раскрывающемся списке единиц измерения проценты (пункт %), введите в поле ввода W число 50 и нажмите клавишу  Рис. 3.26. Новый вид горизонтальной линии Теперь посмотрим на последнюю строку нашего текста, содержащую сведения об авторских правах. Общепринятым стандартом стало использование значка "©" для обозначения авторских прав. У нас же — длинный невразумительный текст. Давайте заменим его коротким и приметным значком. Сначала выделим слова "Авторские права принадлежат мне," (не забыв и запятую), которые мы заменим значком "©", и удалим. После этого переключимся на страницу Text панели объектов. Нас интересует кнопка Copyright (рис. 3.27). Поставьте на нужное место текстовый курсор и щелкните эту кнопку. На рис. 3.29 показан вставленный символ "©". Не забудьте также исправить фамилию нашего персонажа.  Рис. 3.29. Символ "©" Здесь мы столкнулись с так называемыми специальными символами HTML. Для вставки знака "©" вы также можете воспользоваться пунктом HTML подменю Special Characters меню Insert. Остается добавить в текст нашей страницы грозную фразу, предупреждающую всех желающих процитировать что-либо с настоящего сайта о том, что перед этим нужно справиться у владельца авторских прав на сайт. Допишем эту фразу в конце последней строки... Взгляните снова на вкладку Text панели объектов. Мы описали не все специальные символы, которые можно вставить в документ с ее помощью. В табл. 3.4 описаны все остальные символы. Таблица 3.4. Специальные символы, доступные на вкладке Characters панели объектов
Общие свойства Web-страницы Ну вот. Теперь у нас есть практически готовая главная Web-страница нашего сайта. Осталось только сделать несколько завершающих штрихов -и работа над ней будет завершена. Выше мы создали две гиперссылки. И выяснили, что Web-обозреватель форматирует их по-своему, отлично от основного текста. Это, собственно, правильно: гиперссылки должны сразу бросаться в глаза, иначе пользователь будет вынужден едва ли не в лупу просматривать весь ваш текст в поисках гиперссылок, ведущих на другие страницы. И в конце концов уйдет с вашего сайта, что вам совсем не нужно. Может быть и так. Вы тщательно разработали дизайн Web-страницы, подобрали цветовую гамму, а гиперссылки с их фиксированными цветами выбиваются из общего ряда и просто режут глаз. Ведь Web-обозреватель не обращает ни малейшего внимания на цветовые настройки родительского элемента (в данном случае текста), когда расцвечивает их. Что делать в этом случае? Такая проблема решается очень просто. Нужно всего лишь изменить общие свойства вашей Web-страницы, т. е. настройки, затрагивающую саму страницу, а не ее элементы. Давайте выясним, как это сделать. Общие свойства страницы задаются в диалоговом окне Page Properties. Вызвать его можно, выбрав пункт Page Properties в меню Modify или контекстном меню или нажав комбинацию клавиш  Рис. 3.50. Диалоговое окно Page Properties В поле ввода Title вводится название Web-страницы. Селектор цвета Background позволяет вам выбрать цвет фона страницы. По умолчанию он белый, но вы можете выбрать какой угодно, лишь бы после этого текст на вашей странице нормально читался. Например, давайте для нашей страницы выберем светло-желтый цвет. Аналогично селектор цвета Text позволяет выбрать цвет текста (по умолчанию он черный). Опять же здесь действует правило: текст должен читаться нормально, без излишнего напряжения глаз. Для нашей страницы выберем темно-синий цвет. Теперь обратим внимание на три селектора Links, Visited Links и Active Links. Они позволяют выбрать цвет гиперссылок, соответственно, непосещенных (по умолчанию синий), посещенных (темно-красный) и активной гиперссылки (ярко-красный), по которой в данный момент щелкает пользователь. И еще раз повторим то же самое правило: пользователю должно быть удобно читать ваш текст. Но в случае гиперссылок добавляется еще одно правило: обычные гиперссылки должны быть хорошо заметны на фоне текста, посещенные ссылки должны выглядеть чуть менее заметно (но все равно выделяться на фоне текста), а активная гиперссылка — максимально ярко. Исходя из этого правила, выберем, соответственно, ярко-синий (#0066FF), тускло-синий (#006699) и ярко-красный (#FFOOOO) цвета. Мы можем нажать кнопку ОК, чтобы сохранить сделанные установки. Но в данном случае лучше всего воспользоваться кнопкой Apply, которая применяет заданные вами свойства, не закрывая окна Page Properties. Отодвинем окно в сторону и посмотрим на нашу страничку. Поля ввода Left Margin и Top Margin задают расстояния между рамкой окна Web-обозревателя и содержимым Web-страницы, соответственно, слева и сверху. По умолчанию эти значения равны 10 и 15 пикселов. Вы можете задать эти значения равными 0, если хотите вообще убрать свободное пространство между рамкой окна и содержимым страницы, но мы не советуем вам это делать — страница будет выглядеть очень плохо. Раскрывающийся список Document Encoding задает кодировку текста вашей Web-страницы. Закройте диалоговое окно задания свойств Web-страницы, нажав кнопку ОК или Cancel. С окном Page Properties мы закончили. Примечание Все вышеописанные настройки задаются атрибутами тега , перечисленными в табл. 3.5. Таблица 3.5. Атрибуты тега
Примечание Обратите внимание, что значения атрибутов BOTTOMMARGIN и RIGHTMARGIN в среде Dreamweaver вы установить не можете. Для этого вам придется редактировать сам HTML-код. Лабораторная работа №4 |
Похожие:
 | Основная образовательная программа подготовки специалиста по специальности (специальностям) | | Основная образовательная программа подготовки специалиста по специальности (специальностям) |
| «Специальная дошкольная педагогика и психология» с дополнительной специальностью «Логопедия» | | Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования |
| Автор – составитель программы: Т. Д. Тегалева, старший преподаватель кафедры социальной работы и организации работы с молодёжью | | Россия, научить оценивать и прогнозировать происходящие в мире процессы, а также процессы, происходящие в его субрегионах, странах... |
| Целью преподавания дисциплины является ознакомление студентов с понятием информационные ресурсы, общей характеристикой процессов... | | Цель курса: обучение студентов ведению бухгалтерского учета в системе 1С: Предприятие, обучение программированию в системе 1С: Предприятие,... |
| Автор программы: старший преподаватель кафедры иностранных языков и методики преподавания Квасюк Е. Н | | Рецензенты: Беличенко Е. А., к ф н., доцент зав каф англ языка и английской филологии мгпу |