- Добавить в Избранное
-
Сделать стартовой
 
Содержание
Глава 1- 18
Как создаются Web-страницы
Основные принципы работы с Dreamweaver
Начинаем с текста
Рисунки,звуки,фильмы
Таблицы
Работа с Web-сайтом
Фреймы
Табличный дизайн
Использование шаблонов
Каскадные таблицы стилей
Свободно позиционируемые элементы
Анимация элементов Web-страниц
Использование сценариев
Метатегн и серверные директивы
Введение в серверное программирование
Формы
Простейшие серверные приложения
Создание интерактивных сайтов
На заметку
Установите на своем сайте нашу кнопку:

Вебмастеру - портал о редакторе Macromedia Dreamweaver MX. Создание сайтов.


    1  2  3  4  5  6  7  8    
ГЛАВА 3
Начинаем с текста
В этой главе мы, собственно, и начнем работу с Dreamweaver . На первый раз мы не будем усложнять себе жизнь и ограничимся простейшей Web - страницей с краткими сведениями об авторе и набором ссылок на другие, пока еще не существующие страницы Web -сайта.
Здесь мы будем работать с текстом — самым важным составляющим современных Web -страниц. Представьте, что вы работаете в вашем любимом текстовом редакторе, и — вперед!
Создание новой Web - страницы
Но сначала нужно создать новую Web -страницу.
Как вы помните, для этого нужно выбрать пункт New в меню File или на­ жать комбинацию клавиш < Ctrl >+< N >. После этого появится диалоговое окно New Document .
Dreamweaver MX поддерживает создание Web -страниц на основе шаблонов. Шаблон — это особым образом подготовленная и сохраненная Web -страница, на которой уже имеются некоторые элементы, которые вам могут понадобиться (сведения об авторских правах, название и т. п.). Вам останется только добавить основной текст и немного исправить оформление — и го­ товая профессионально оформленная страница у вас в руках. Если вам нужно быстренько "сляпать" страничку с какимто текстом, шаблоны — на­ стоящая находка.
Однако настоящее творчество не терпит суеты. Поэтому давайте начнем с чистого листа и, не торопясь, создадим свой Web -шедевр.
Вы видите, что слева расположен список Category , где вы выбираете категорию шаблонов. Сами шаблоны, относящиеся к выбранной категории, перечислены в списке Basic Page . А внешний вид вы бранного шаблона во многих случаях можно просмотреть в расположенной справа панели предварительного просмотра.
Итак, нам нужен "пустой" шаблон. Выберем в списке Category пункт Basic Page , а в списке Basic Page — пункт HTML , после чего нажмем кнопку ОК. На экране появится пустое окно документа. Новая Web -страница создана.
Работа с текстом
Здесь мы опишем работу с текстом в окне документа Dreamweaver на при­мере нашей первой Web -страницы.
Ввод текста
Вот и наступила торжественная минута! Сейчас мы наберем наш первый текст в окне документа Dreamweaver .
Набрав текст, сразу же сохраним его в файле под именем 3.1. htm . И поместите ее в отдельную папку — так будет проще управляться со всем нашим Web -хозяйством.
Вы уже знаете, что одна из Web -страниц на Web -сервере задается в качестве страницы по умолчанию. Также вы знаете, что такая страница обычно носит имя default или index (и расширение htm или html ). Но в данном случае мы пренебрегли этим соглашением, хотя наша первая страница так и просится быть страницей по умолчанию. Давайте назовем ее 3.1.htm — таким образом, мы не запутаемся в дальнейшем во множестве разнокалиберных страниц, названных как бог на душу положит. Не беспокойтесь по поводу нарушения соглашений — это ненадолго.
Итак, мы создали первую нашу Web -страницу... Ах да, мы же совсем забыли о названии! Помните название, задаваемое тегом < title >, которое не ото­ бражается в окне Web -обозревателя, но выводится в его заголовке. Кроме того, это название помещается в списке "истории" Web -обозревателя, где содержатся названия и адреса всех посещенных в течение некоторого времени страниц. Давайте зададим его для удобства будущих посетителей сайта. Тем более что это делается очень просто: наберите его в поле ввода, находящемся в инструментарии документа. Сохраним нашу страницу еще раз. И посмотрим на нее критически. Чего ей не хватает?
Конечно, вы уже посетили много Web -сайтов. И вы видели, как красочно они оформлены. По сравнению с ними наша первая страничка выглядит не просто бледно — она совсем никак не выглядит. Давайте приведем ее в пристойный вид.
Форматирование абзацев
Прежде всего, давайте сделаем нашей странице нормальный "кричащий" заголовок. (Имеется в виду не HTML -заголовок, а обычный заголовок, как у газеты.) Первой строкой как раз набрано "Здравствуйте" — она прекрас­ный кандидат в заголовки.
Чтобы отформатировать текстовый абзац как заголовок, нужно воспользо ваться редактором свойств, точнее, раскрывающимся списком форматов абзаца.
Пункт Paragraph этого списка форматирует текст как обычный абзац (отмечаемый тегом <р>). Пункты Heading 1, ..., Heading 6 позволяют превратить его в заголовок, соответственно, первого, второго уровня и т. д. Пункт Preformatted превращает абзац в текст фиксированного формата, где форматирование задано не тегами HTML , а как в обычном тексте: отступы создаются пробелами, а разбиение на абзацы — символами возврата каретки и перевода строки. Это может быть очень полезно при выкладывании в Сеть больших текстовых документов, созданных в старых текстовых редакторах, без сложного HTML -форматирования.
Примечание
Заголовки создаются парными тегами <Нn>, где n — число от 1 до 6. Текст фиксированного формата задается парным тегом < pre >.
Поставим текстовый курсор на строку "Здравствуйте" и выберем в меню форматов пункт Heading 1 — это наилучшим образом подходит для привет­ ствия. Если вы закрыли редактор свойств, не беспокойтесь — то же самое вы можете сделать, используя главное меню или контекстное меню окна докумен­ та. В первом случае выберите в меню Text пункт Paragraph Format и в по явившемся на экране подменю — нужный формат абзаца. Во втором случае щелкните правой кнопкой мыши на строке приветствия, также выберите пункт Paragraph Format и в подменю — формат абзаца.
Если же вы предпочитаете не отрывать пальцы от клавиатуры, можете задать формат заголовка комбинацией клавиш < Ctrl >+< n >, где < n > — одна из клавиш <1>, ..., <6>. Формат обычного абзаца можно задать, нажав комбинацию клавиш < Ctrl >+< Shift >+< P >.
Теперь давайте выровняем заголовок по центру. В этом нам помогут кнопки выравнивания редактора свойств.
Эти кнопки задают выравнивание соответственно (порядок перечисления слева направо): по левому краю; по центру; по правому краю; выравнивание по обоим краям (полное выравнивание).
Внимание!
Полное выравнивание поддерживается только новыми версиями Web - обозревателей .
Одновременно может быть нажата (включена) только одна из этих кнопок либо ни одной. (В последнем случае задается так называемое выравнивание по умолчанию, как правило, по левому краю.) Такие кнопки называются кнопками-переключателями, по аналогии с пунктами-переключателями меню.
Итак, снова установим текстовый курсор на заголовок и нажмем кнопку выравнивания по центру.
Аналогичного результата вы можете достигнуть, воспользовавшись подменю Align меню Text или аналогичным подменю контекстного меню. Пункт-переключатель Left задает выравнивание по левому краю, Center — по цен тру, Right — по правому краю, a Justify — полное выравнивание. Также вы можете нажать комбинацию клавиш <С trl >+<А lt >+< Shift >+<клавиша>, где <клавиша> — < L >, < C >, < R > или < J >, соответственно.
Примечание
Выравнивание задается значением атрибута align тегов <P> и <Hn>. Доступны значения left , center , right или justify . Что они означают , вы уже знаете . Теперь давайте как-нибудь выделим последнюю строку со сведениями об авторских правах. Можно поставить текстовый курсор в ее начало и нажать клавишу < Enter >, чтобы вставить между этой строкой и остальным текстом дополнительную пустую строку. А можно поступить по-другому.
Взгляните на кнопки. Эти кнопки позволяют уста­ новить или убрать отступ слева у абзаца. Левая кнопка уменьшает (убирает) отступ, а правая — увеличивает . Давайте поставим курсор мыши на последнюю строку текста и нажмем кнопку увеличения отступа. Вы можете еще раз нажать эту кнопку для увеличения отступа или левую кнопку, чтобы уменьшить отступ.
Аналогичный результат дают пункты Outdent и Indent меню Text или подменю List контекстного меню. Вы также можете нажать комбинацию клавиш < Ctrl>+< Shift >+<]> для увеличения отступа и < Ctrl >+< Shift >+<[> — для его уменьшения. Примечание
Отступ задается парным тегом < blockquote >.
Теперь обратим внимание на список тем, доступных на сайте. (Из строк того списка потом будут сделаны гиперссылки, указывающие на соответствующие страницы.) И вспомним, что "обычные" текстовые редакторы подд ерживают создание нумерованных и маркированных списков. Пункты нумерованных (упорядоченных) списков, как вы знаете, обозначаются поряд ковыми номерами, а пункты маркированных (неупорядоченных) списков — к акими-либо значками. Давайте и мы создадим такой список.
Для этого, прежде всего, выделите все строки, которые войдут в список.Всего их три.
Для того чтобы преобразовать выделенные строки в список, опять воспользуемся кнопками редактора свойств. Левая кнопка создает маркированный список, а правая — нумерованный. В дан­ ный момент времени может быть нажата только одна кнопка либо ни одной; в последнем случае абзац возвращается к своему обычному виду
Нажмите левую кнопку. Созданный нами маркированный список показан
В меню Text и в контекстном меню предусмотрено специальное подменю List , выполняющее те же действия. В табл. 3.1 описаны все пункты-переключатели этого подменю. Каких-либо комбинаций клавиш для них не предусмотрено.
Кроме того, вы получаете возможность изменить некоторые дополнительные параметры списка. Для этого нажмите кнопку List Item на панели редактора свойств. На экране появится диалоговое окно List Properties . Давайте рассмотрим это окно подробнее.
Раскрывающийся список List Type позволяет задать тип списка. Здесь доступны следующие позиции:

Bulleted   List —маркированный список;
Numbered   List —нумерованный список;
Directory List — список папок, визуально похож на маркированный список;
Menu List — список-меню, визуально опять же похоже на маркированный список.
Если выбран первый или второй пункт, становятся доступными другие эле­менты управления.
Раскрывающийся список Style позволяет задать стиль маркера или нумерации списка. Если выбран маркированный список, доступны следующие значения:
Bullet — кружок с заливкой;
Square — квадратик;
[ Default ] — маркер по умолчанию, обычно кружок с заливкой.
Если же выбран нумерованный список, доступны:
Number — арабские цифры;
Roman Small — малые римские цифры;
Roman Large — большие римские цифры;
Alphabet Small — малые латинские буквы;
Alphabet Large — большие латинские буквы;
[ Default ] — нумерация по умолчанию, обычно арабские цифры.
Кроме того, если выбран нумерованный список, доступно поле ввода Start Count , где вы сможете ввести номер, с которого начнется нумерация строк списка.
Все эти настройки относились к списку в целом. В нижней половине окна расположена группа элементов управления List Item , затрагивающая только ту строку списка, на которой находится текстовый курсор. В эту группу входят раскрывающийся список New Style и поле ввода Reset Count To , аналогичные раскрывающемуся списку Style и полю ввода Start Count верхней части окна.
Закончив настройку свойств, нажмите кнопку ОК для сохранения установок или Cancel — для отказа от них.
Вы можете немного "поиграться" с этими дополнительными настройками, чтобы узнать их получше. Лишняя практика никогда не повредит.
Примечание
Списки задаются парными тегами < UL > ( маркированный ), < OL > ( нумерованный ), < DIR >
( список папок ) и < MENU > ( меню ). Между этими тегами помещаются от­ дельные строки , задаваемые тегом < LI>. Удивительно , но у тега < LI > нет пары !

    1  2  3  4  5  6  7  8   Вверх
Copyright©  Бронников М.В 2004г.
Все вопросы комментарии направляйте по адресу SWMR@narod.ru 
  Akavita
Хостинг от uCoz