ГЛАВА 3. Начинаем с текста В этой главе мы, собственно, и начнем работу с Dreamweaver. На первый раз мы не будем усложнять себе жизнь и ограничимся простейшей Web-страницей с краткими сведе...
Создание обычных гиперссылок
Создание обычных гиперссылок А создаются они очень просто. И в этом — большая заслуга разработчиков Dreamweaver, сделавших продукт, реализующий просто даже весьма сложные задачи. Но хватит п...
Рисунок 3 39 Поле ввода интернетадреса в редакторе свойств
Рисунок 3.39. Поле ввода интернет-адреса в редакторе свойств Все, что нам нужно сделать, — это ввести в него интернет-адрес сайта Macromedia и нажать клавишу <Entcr>. Результат появится...
Рисунок 3 40 Гиперссылка указывающая на сайт Macromedia
Рисунок 3.40. Гиперссылка, указывающая на сайт Macromedia Для создания гиперссылки из выделенного текста вы также можете воспользоваться пунктом Make Link меню Modify или контекстного меню ил...
Рисунок 3 41 Диалоговое окно Select File
Рисунок 3.41. Диалоговое окно Select File Просматривая Рисунок 3.39, вы, вероятно, обратили внимание, что справа от поля ввода интернет-адреса находятся две небольшие кнопки. Кнопка в виде ми...
Рисунок 3 42 Раскрывающийся список
Рисунок 3.42. Раскрывающийся список задания цели гиперссылки, расположенный в редакторе свойств Этот список содержит четыре пункта, но сейчас полезными для нас будут только два: _blank и _se...
Создание почтовых гиперссылок
Создание почтовых гиперссылок Вторая гиперссылка будет слегка отличаться от первой. Хотя бы потому, что она указывает не на Web-страницу, а на почтовый адрес, и при щелчке на ней пользователь...
Рисунок 3 43 Гиперссылка указывающая на почтовый адрес
Рисунок 3.43. Гиперссылка, указывающая на почтовый адрес Как видите, эта гиперссылка внешне ничем не отличается от сделанной нами ранее. Фактически, гиперссылки, указывающие на Web-страницы и...
Рисунок 3 44 Кнопка Email Link панели объектов
Рисунок 3.44. Кнопка Email Link панели объектов...
Рисунок 3 45 Диалоговое окно Email Link
Рисунок 3.45. Диалоговое окно Email Link В поле Text самим Dreamweaver подставляется текст, который будет являться содержимым гиперссылки — имя, выделенное нами в окне документа. К сожалению,...
Другие гиперссылки
Другие гиперссылки А теперь рассмотрим создание в среде Dreamweaver гиперссылок, указывающих на другие интернет-ресурсы. Вам, должно быть, известно, что, кроме WWW и электронной почты, Интерн...
Создание гиперссылок на РТРсерверы
Создание гиперссылок на РТР-серверы FTP (File Transfer Protocol — протокол передачи файлов) — один из старейших сервисов Интернета. Он служит для распространения файлов в Сети. Файлы помещаютс...
Использование "якорей"
Использование "якорей" Теперь самое время узнать еще об одном виде гиперссылок, весьма специфичном. Это так называемые "якоря" (по-английски — anchors). В отличие от других...
Рисунок 3 46 Учебная Webстраница
Рисунок 3.46. Учебная Web-страница, где будут использованы "якоря"...
Рисунок 3 47 Кнопка Named Anchor панели объектов
Рисунок 3.47. Кнопка Named Anchor панели объектов...
Рисунок 3 48 Диалоговое окно Named Anchor
Рисунок 3.48. Диалоговое окно Named Anchor...
Рисунок 3 49 Значок "якоря"
Рисунок 3.49. Значок "якоря" в окне документа Dreamweaver Теперь создадим гиперссылку, ссылающуюся на "якорь". Выделим строку "Абзац 1" в оглавлении. Адрес, на к...
Общие свойства Webстраницы
Общие свойства Web-страницы Ну вот. Теперь у нас есть практически готовая главная Web-страница нашего сайта. Осталось только сделать несколько завершающих штрихов -и работа над ней будет заве...
Рисунок 3 50 Диалоговое окно Page Properties
Рисунок 3.50. Диалоговое окно Page Properties В поле ввода Title вводится название Web-страницы. Вы можете пользоваться полем ввода, расположенным на инструментарии документа (см. Рисунок 3.3...
Внимание
Внимание Значения, введенные в поля ввода Left Margin и Top Margin, не воспринимаются Navigator. Поля ввода Margin Width и Margin Height задают расстояние между рамкой окна Web-обозрева...
Таблица 3 5 Атрибуты тега <BODY>
Таблица 3.5. Атрибуты тега <BODY> Атрибут Описание Где задается...
Внимание
Внимание Кодировка документа задается с помощью одинарного тега <МЕТА>, размещающегося в HTML-заголовке страницы. Подробнее о теге <МЕТА> мы поговорим в главе 14....
Дополнительные возможности Dreamweaver
Дополнительные возможности Dreamweaver Здесь мы рассмотрим некоторые дополнительные, но отнюдь не второстепенные возможности Dreamweaver, которые обязательно вам пригодятся....
Использование цветовых схем
Использование цветовых схем Только что мы рассмотрели, как с помощью диалогового окна Page Properties можно быстро поменять всю расцветку Web-страницы. Но Dreamweaver предлагает большее. Вмес...
Рисунок 3 51 Диалоговое окно Set Color Scheme Command
Рисунок 3.51. Диалоговое окно Set Color Scheme Command Процесс выбора цветовой схемы состоит из двух шагов. Сначала вы должны выбрать одну из категорий цветовых схем, называемых по цвету фона...
Вставка и чтение комментариев
Вставка и чтение комментариев Вот и все. На этом этапе мы закончили. Наша Web-страничка уже полностью функциональна; осталось только написать остальные четыре страницы и связать их с главной....
Рисунок 3 52 Кнопка Comment панели объектов
Рисунок 3.52. Кнопка Comment панели объектов...
Рисунок 3 53 Диалоговое окно Comment
Рисунок 3.53. Диалоговое окно Comment Это окно устроено очень просто. Вы вводите текст комментария в область редактирования Comment и нажимаете кнопку ОК для вставки комментария или Cancel —...
Рисунок 3 54 Значок комментария в окне документа Dreamweaver
Рисунок 3.54. Значок комментария в окне документа Dreamweaver Для вставки комментария вы также можете выбрать пункт Comment подменю Text Objects меню Insert. Теперь щелкните мышью на значке...
Рисунок 3 55 Вид редактора свойств
Рисунок 3.55. Вид редактора свойств при выделенном комментарии Чтобы впоследствии удалить ненужный комментарий, просто выделите мышью его значок и нажмите клавишу <Del>. Примечание 1Пр...
Вставка даты
Вставка даты Хорошим тоном в Web-дизайне считается указание даты последнего обновления Web-страницы. В самом деле, дату вставить очень легко — достаточно просто написать число, месяц и год в...
Рисунок 3 56 Кнопка Date панели объектов
Рисунок 3.56. Кнопка Date панели объектов...
Рисунок 3 57 Диалоговое окно Insert Date
Рисунок 3.57. Диалоговое окно Insert Date Раскрывающийся список Day Format для нас бесполезен, т. к. представляет все имена дней недели по-английски. Поэтому оставьте выбранным пункт [No Day]...
Создание новой Webстраницы
Создание новой Web-страницы Но сначала нужно создать новую Web-страницу. Как вы помните, для этого нужно выбрать пункт New в меню File или нажать комбинацию клавиш <Ctrl>+<N>. По...
Рисунок 3 1 Диалоговое окно New Document
Рисунок 3.1. Диалоговое окно New Document Итак, нам нужен "пустой" шаблон. Выберем в списке Category пункт Basic Page, а в списке Basic Page — пункт HTML, после чего нажмем кнопку...
"Чистка" HTMLкода
"Чистка" HTML-кода В процессе работы над Web-страницей Dreamweaver вставляет в текст и убирает из него множество различных HTML-тегов. Хоть он и очень "интеллектуален" и н...
Рисунок 3 58 Диалоговое окно Clean Up HTML / XHTML
Рисунок 3.58. Диалоговое окно Clean Up HTML / XHTML Группа флажков Remove поможет вам задать, что именно следует удалять при "чистке": Empty Container Tags -"пустые" те...
Рисунок 3 59 Окно статистики "чистки" HTMLкода
Рисунок 3.59. Окно статистики "чистки" HTML-кода...
Проверка совместимости HTMLкода
Проверка совместимости HTML-кода В мире эксплуатируется много разных программ Web-обозревателей, сильно различающихся как функциональными возможностями, так и степенью совместимости с различны...
Рисунок 3 60 Диалоговое окно Check Target Browsers
Рисунок 3.60. Диалоговое окно Check Target Browsers В списке Browsers представлены все программы, о которых "знает" Dreamweaver. Версия MX поддерживает разные версии Internet Explor...
Рисунок 3 61 Панель Target Browser Check
Рисунок 3.61. Панель Target Browser Check Здесь сразу видно, что атрибут ALINK (цвет активной гиперссылки) тега <BODY> не поддерживается Opera. Конечно, это не смертельно — в целом наша...
Что дальше?
Что дальше? Итак, мы создали первую, главную страницу нашего сайта. В процессе ее создания мы научились работать с текстом и гиперссылками, используя для этого стандартные инструменты Dreamwe...
Работа с текстом
Работа с текстом Здесь мы опишем работу с текстом в окне документа Dreamweaver на примере нашей первой Web-страницы....
Ввод текста
Ввод текста Вот и наступила торжественная минута! Сейчас мы наберем наш первый текст в окне документа Dreamweaver (Рисунок 3.2). Набрав текст, сразу же сохраним его в файле под именем 3.1.ht...
Рисунок 3 2 Наш первый текст
Рисунок 3.2. Наш первый текст Вы уже знаете, что одна из Web-страниц на Web-сервере задается в качестве страницы по умолчанию. Также вы знаете, что такая страница обычно носит имя default или...
Рисунок 3 3 Поле ввода названия
Рисунок 3.3. Поле ввода названия Web-страницы в инструментарии документа Сохраним нашу страницу еще раз. И посмотрим на нее критически. Чего ей не хватает? Конечно, вы уже посетили много Web...
Форматирование абзацев
Форматирование абзацев Прежде всего, давайте сделаем нашей странице нормальный "кричащий" заголовок. (Имеется в виду не HTML-заголовок, а обычный заголовок, как у газеты.) Первой ст...
Рисунок 3 4 Раскрывающийся список
Рисунок 3.4. Раскрывающийся список форматов абзаца, находящийся в редакторе свойств...
Рисунок 3 5 Созданный нами заголовок
Рисунок 3.5. Созданный нами заголовок Примечание 1Примечание 1 Заголовки создаются парными тегами <нп>, где л — число от 1 до 6. Текст фиксированного формата задается парным тегом...
Рисунок 3 6 Кнопки выравнивания
Рисунок 3.6. Кнопки выравнивания, расположенные в редакторе свойств Эти кнопки задают выравнивание соответственно (порядок перечисления слева направо): по левому краю; по центру; по пр...
Внимание
Внимание Полное выравнивание поддерживается только новыми версиями Web-обозревателей. Одновременно может быть нажата (включена) только одна из этих кнопок либо ни одной. (В последнем слу...
Рисунок 3 7 Центрированный заголовок
Рисунок 3.7. Центрированный заголовок Аналогичного результата вы можете достигнуть, воспользовавшись подменю Align меню Text или аналогичным подменю контекстного меню. Пункт-переключатель Lef...
Рисунок 3 8 Кнопки задания отступа
Рисунок 3.8. Кнопки задания отступа абзаца, находящиеся в редакторе свойств Давайте поставим курсор мыши на последнюю строку текста и нажмем кнопку увеличения отступа. Результат показан на Ри...
Рисунок 3 9 Строка с отступом
Рисунок 3.9. Строка с отступом Аналогичный результат дают пункты Outdent и Indent меню Text или подменю List контекстного меню. Вы также можете нажать комбинацию клавиш <Ctrl>+<Shift...
Рисунок 3 10 Кнопки создания списков
Рисунок 3.10. Кнопки создания списков, расположенные в редакторе свойств Нажмите левую кнопку. Созданный нами маркированный список показан на Рисунок 3.11....
Рисунок 3 11 Маркированный список
Рисунок 3.11. Маркированный список В меню Text и в контекстном меню предусмотрено специальное подменю List, выполняющее те же действия. В табл. 3.1 описаны все пункты-переключатели этого под...
Таблица 3 1 Пункты подменю List
Таблица 3.1. Пункты подменю List Пункт Описание None Unordered List Ordered List...
Рисунок 3 12 Кнопка доступа к
Рисунок 3.12. Кнопка доступа к дополнительным свойствам списков...
Рисунок 3 13 Диалоговое окно List Properties
Рисунок 3.13. Диалоговое окно List Properties Раскрывающийся список List Type позволяет задать тип списка. Здесь доступны следующие позиции: Bulleted List — маркированный список; Numbere...
Форматирование отдельных символов
Форматирование отдельных символов Итак, мы научились форматировать целиком абзацы текста. Теперь поговорим, что можно сотворить с отдельными символами текста. Все текстовые редакторы, наприм...
Рисунок 3 14 Кнопки изменения начертания шрифта
Рисунок 3.14. Кнопки изменения начертания шрифта Соответственно, левая (В) кнопка позволяет сделать шрифт жирным, а правая (I) — курсивным. Обе эти кнопки могут быть нажаты или отжаты независ...
Рисунок 3 15 Жирный текст и курсивная строка
Рисунок 3.15. Жирный текст и курсивная строка Вместо нажатия кнопки В вы можете выбрать пункт-выключатель Bold в подменю Style меню Text или контекстного меню. В том же подменю существует пун...
Таблица 3 2 Пункты логического форматирования подменю Style
Таблица 3.2. Пункты логического форматирования подменю Style Пункт
Описание Teletype...
Рисунок 3 16 Примеры различного
Рисунок 3.16. Примеры различного форматирования текста с помощью пунктов подменю Style В табл. 3.3 перечислены теги, вставляемые в HTML-код пунктами подменю Style....
Таблица 3 3 Теги вставляемые в
Таблица 3.3. Теги, вставляемые в HTML-код пунктами подменю Style Пункт Пара тегов Bold...
Рисунок 3 17 Раскрывающийся список смены шрифта
Рисунок 3.17. Раскрывающийся список смены шрифта...
Рисунок 3 18 Раскрывающийся список задания размера шрифта
Рисунок 3.18. Раскрывающийся список задания размера шрифта Вспомним, зачем создавалась Всемирная паутина WWW. А именно, чтобы каждый человек, пользуясь любой компьютерной платформой, находясь...
Рисунок 3 19 Увеличенный шрифт
Рисунок 3.19. Увеличенный шрифт Теперь, когда все содержимое документа выделено, выберите нужный шрифт. Для примера выберем пункт Verdana, Arial, Helvetica, sans-serif -любимый шрифт автора....
Рисунок 3 20 Webстраница после изменения шрифта
Рисунок 3.20. Web-страница после изменения шрифта Задать шрифт вы также можете с помощью подменю Font, расположенного в меню Text и контекстном меню. Для смены размера шрифта Dreamweaver пред...
Рисунок 3 21 Селектор цвета Dreamweaver
Рисунок 3.21. Селектор цвета Dreamweaver Селектор цвета состоит из двух частей. Справа находится поле ввода, где вы можете ввести шестнадцатеричный код нужного цвета. Но вряд ли вы помните на...
Рисунок 3 22 Окно выбора цвета селектора цветов
Рисунок 3.22. Окно выбора цвета селектора цветов Большую часть этого окна занимает палитра, где, собственно, вы и ищете нужный цвет. При этом в небольшом текстовом поле, расположенном в центр...
Рисунок мы приводить не будем
Рисунок мы приводить не будем — все равно черно-белая иллюстрация не может передать цвет. Если вы предпочитаете работать с меню, то для смены цвета шрифта воспользуйтесь пунктом Color меню Tex...
Вставка специальных символов
Вставка специальных символов Чего нам еще не хватает для полного счастья? Давайте отделим первый и второй абзацы от остального текста. Конечно, можно вставить пустую строку, но мы поступим л...
Рисунок 3 23 Кнопка Horizontal Rule панели объектов
Рисунок 3.23. Кнопка Horizontal Rule панели объектов...
Рисунок 3 24 Горизонтальная линия
Рисунок 3.24. Горизонтальная линия Щелкните мышью по горизонтальной линии — она будет выделена целиком. После этого обратите внимание на редактор свойств. Вместо свойств текста и шрифта там б...
Рисунок 3 25 Вид редактора свойств
Рисунок 3.25. Вид редактора свойств при выделенной горизонтальной линии Давайте подробно опишем все элементы управления редактора свойств, доступные в этом случае: поле ввода W позволяет...
Рисунок 3 26 Новый вид горизонтальной линии
Рисунок 3.26. Новый вид горизонтальной линии Примечание 1Примечание 1 Горизонтальная линия вставляется в текст с помощью одинарного тега <нк>. Этот тег может содержать атрибуты ALI...
Внимание
Внимание Среди атрибутов тега <HR> особняком стоит . Этот атрибут не имеет значения (так называемый атрибут без значения), а просто либо присутствует, либо не присутствует в...
Рисунок 3 27 Кнопка Copyright панели объектов
Рисунок 3.27. Кнопка Copyright панели объектов Поставьте на нужное место текстовый курсор и щелкните эту кнопку. Dreamweaver выведет небольшое предупреждение (Рисунок 3.28), говорящее о том,...
Рисунок 3 28 Панель специальных символов
Рисунок 3.28. Панель специальных символов На Рисунок 3.29 показан вставленный символ "©". Не забудьте также исправить фамилию нашего персонажа....
Рисунок 3 29 Символ "©"
Рисунок 3.29. Символ "©" Здесь мы столкнулись с так называемыми специальными символами HTML. Эти символы из соображений все той же совместимости не могут быть просто так вставл...
Рисунок 3 31 Использование разрыва строк
Рисунок 3.31. Использование разрыва строк Вы также можете для вставки разрыва строк использовать пункт Line Break подменю Special Characters меню Insert или — что проще всего — комбинацию кл...
Рисунок 3 32 Кнопка NonBreaking Space панели объектов
Рисунок 3.32. Кнопка Non-Breaking Space панели объектов Для вставки неразрывного пробела вы также можете использовать пункт Non-Breaking Space подменю Special Characters меню Insert или сочет...
Таблица 3 4 Специальные символы
Таблица 3.4. Специальные символы, доступные на вкладке Characters панели объектов Символ Описание Пу...
Рисунок 3 33 Кнопка Other Characters панели объектов
Рисунок 3.33. Кнопка Other Characters панели объектов...
Рисунок 3 34 Диалоговое окно Insert Other Character
Рисунок 3.34. Диалоговое окно Insert Other Character Для вызова диалогового окна вставки символа вы также можете использовать пункт Other подменю Special Characters меню Insert....
Использование HTMLстилей
Использование HTML-стилей Очень и очень многие мощные текстовые редакторы предлагают пользователю так называемые стили, т. е. описания формата фрагментов текста, имеющие имя и сохраненные отд...
Рисунок 3 35 Панель HTML Styles
Рисунок 3.35. Панель HTML Styles Большую часть этой панели занимает собственно список HTML-стилей. Кроме пунктов, задающих определенные вами HTML-стили, там есть еще два: Clear Selection Styl...
Рисунок 3 36 Кнопка New Style панели HTML Styles
Рисунок 3.36. Кнопка New Style панели HTML Styles...
Рисунок 3 37 Диалоговое окно Define HTML Style
Рисунок 3.37. Диалоговое окно Define HTML Style В поле ввода Name вводится имя стиля. Введем сюда слово имя. С помощью группы переключателей Apply To задается тип HTML-стиля: Selection зада...
Рисунок 3 38 Кнопка Delete Style панели HTML Styles
Рисунок 3.38. Кнопка Delete Style панели HTML Styles Пункт Duplicate контекстного меню списка стилей и дополнительного меню панели позволит вам создать новый стиль третьим возможным способом:...
Работа с гиперссылками
Работа с гиперссылками В главе 1 мы уже говорили о гиперссылках. Пора научиться создавать их в среде Dreamweaver. Для того чтобы описать личность нашего незабвенного Ивана Ивановича Иванова,...
