Your SlideShare is downloading. ×
1Меня уже давно просили сделать доброе дело и написать не заумные"типсы" для людей, которые разбираются в различных пакета...
2Начнем разбор интерфейса с панели "палитра объектов" - палитры,при помощи которой мы помещаем практически всю внешнюю (не...
3                Палитра Invisibles возволяет добавлять в исходный код                странички:                   • закла...
4                Палитра Frames (фреймы) поможет сделать одним                нажатием на кнопку сложную фреймовую структу...
5                Палитра специальных символов поможет нам просто и                легко добавить на свою страничку знак ко...
6Начнем со вставки rollover image (картинки-перекатыша). В основном,подобные объекты используются для различных навигацион...
7Объект Tabular Data появился только в третьей версии и являет собойочень удобный интерфейс для вставки внешних табличных ...
8Navigation Bar - этот объект побил все рекорды по количеству полей,которые необходимо заполнить. Его нужно рассматривать ...
9строчки кода.Вставка ссылки на электронный адрес. Тем, кто немного знает HTMLуже известно, что для вставки подобной ссылк...
10Так выглядит первая закладка в настройках. Как видите DreamWeaverимеет очень большое количество различных настроек, наст...
11Следующая закладка поможет настроить то, как DreamWeaverработает с CSS. Разница вот в чем - некоторые параметры CSSдопус...
12Следующая настройка поможет вам настроить внешние редакторы.Очень удобная вещь. Например, я себе настроил отдельные реда...
13Закладка Floating Pallettes поможет настроить внешний видDreamWeaver. Вы можете указать, какие из палитр будут всегда"ви...
14Этот раздел один из самых важных. Довольно часто из-занеправильных настроек именно здесь и возникают проблемы.Обратите в...
15Вот и добрались мы с вами до закладки HTML Format (формат HTML).Тоже немаловажный раздел. Здесь вы настраиваете то, как ...
16Пункт HTML Rewriting тоже важен. Если настроить его неправильно,можно наломать немало дров. Дело в том, что DreamWeaver ...
17Пункт Layers помогает настроить параметры слоев, которые высоздаете в DreamWeaver. Рекомендую обязательно ключить галочк...
18Настройки FTP. Без верной настройки этого пункта вы просто несможете заливать файлы на ваш веб-сервер. Практически все п...
19нашем случае структура будет предельно проста:В корневом каталоге мы разместим наши веб-страницы (.html-файлы),в каталог...
20Выбираем кнопочку New и начинаем заполнять "анкету" нашего сайта.Анкета состоит из пяти разделов:Начнем с первого. Запол...
21В ней мы настраиваем параметры доступа к удаленному серверу(месту, куда мы будем наши файлы выкладывать):   • Server Acc...
22Если вы работаете над проектом вместе с другими пользователямиDreamWeaver, то целесообразно настроить данный пункт (т.е....
23Она настраивает внешний вид панели Site Map (именно внешний,физически на структуру сайта или его файлы эти настройки ник...
24Это - так называемый Site Manager, в котором очень удобно совершатьсамые различные действия. Он разделен на две колонки ...
25Для начала работы со страничкой нам нужно иметь какую-то основу,структуру этой странички. Делается эта структура при пом...
26                                                понравятся ссылки вида -                                                ...
27Перед вами откроется вот такой диалог. Что здесь нужно заполнить:  • Title - название вашей странички (как оно будет ото...
28                                                         Ну а теперь пора                                               ...
29                                                         После выделения                                                ...
30                                                         свое внимание на                                               ...
31                                         ***Как и обещал, беремся за изготовление меню нашего сайта.Применять мы сегодня...
32                                                                 После написания                                        ...
33                                                                 В появившейся                                          ...
34Как видите, настроек у стиля до черта. Нам они все пока не нужны.Перейдите в пункт box и задайте параметры отступов, как...
35                                                         Раз уж мы залезли в                                            ...
36                                                           Кроме параграфа мы                                           ...
37                                                           В появившемся окне                                           ...
38меня нет. Хотя даже такой приближенный перевод указывает наглавную особенность CSS - каскадное наследование свойств объе...
39для переназначения) вы оказываетесь в "настройках" стиля. Делаетсяздесь все довольно просто, за изменениями вы можете на...
40На данной закладке мы производим настройки фона. Фона всейстранички или только заданного абзаца текста - это уж как вы с...
41Пункт block служит для настроек параметров блока текста (т.е. здесьречь идет уже не об отдельных буквах, как в пункте Ty...
42Данный пункт управляет ограничениями данного куска текста настранице (ограничивает его расположение в определенномпрямоу...
43Пошли различные декоративные настройки. Например, эта позволитвам создать бордюр вокруг вашего элемента, со всеми необхо...
44Настройки списков (нумерованного и списка с буллетами)   1. Тип оформления буллета (несколько вариантов)   2. Использова...
45Позиционирование - вещь важная и интересная. Оно помогает"поставить" наш объект в любое место на страничке. Итак:1. Тип ...
46                                         ***Сегодня мы будем заниматься чисто текстовым оформлением. Порауже начать напо...
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Saita v  mc_mediadw3_steps
Upcoming SlideShare
Loading in...5
×

Saita v mc_mediadw3_steps

648

Published on

http://www.slideshare.net/upload?from_source=loggedin_profile

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
648
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Saita v mc_mediadw3_steps"

  1. 1. 1Меня уже давно просили сделать доброе дело и написать не заумные"типсы" для людей, которые разбираются в различных пакетах, асделать что-то более приближенное к начинающим, тем, кто еще незнает даже азов того или иного пакета. Я долго сомневался внеобходимости подобной публикации и все-таки решился.Идея данного описания проста - мы с вами, будем постепенно (пошагам) строить некий сайт (например, домашнюю страничку). Приэтом я постараюсь пройтись по всем возможностям DreamWeaver.Расскажу где и чем лучше всего пользоваться. ***Начнем мы с самого простого - с интерфейса пакетаТак выглядит внешний вид DreamWeaver 3 после его установки изагрузки. Основные панели я выделил и подписал. Для удобстваможно эту картинку распечатать, так как я буду довольно часто на неессылаться.Как вы видите, в основном интерфейс представлен основным окномдокумента, где мы производим все основные действия ивспомогательными плавающими панелями. На самом деле, можно(если у вас, например, стоит разрешение менее 800х600) закрыть всеэти плавающие панели, открыть окно документа на весь экран ипользоваться только главным меню (все необходимые пункты в немимеются).Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  2. 2. 2Начнем разбор интерфейса с панели "палитра объектов" - палитры,при помощи которой мы помещаем практически всю внешнюю (некасающуюся текста) информацию на нашу страничку. Эта палитраимеет несколько разных вариантов, которые могут быть открыты припомощи выпадающего меню в верхней части "палитры объектов".Давайте посмотрим, что это за варианты. По умолчанию всегда стоит палитра common objects (основные объекты). В нее включено практически все, что нам нужно (слева-направо, сверху-вниз): • Image (картинка) - вставляет на страничку графический элемент • Rollover Image (перекатыш) - вставляет на страничку конструкцию, которая имитирует анимированную кнопку (кнопку, изменяющую свой вид при наведении на нее курсора мыши) • Table (таблица) - вставляет на страничку таблицу • Tabular data (табличные данные) - вставляет готовую с таблицу с готовыми данными (например, из Exel) • Horizontal Rule (линейка) - вставляет декоративный элемент - линейку (обычно используется как разделитель абзацев) • Navifgation Bar - вставляет навигационную панель, состоящую из нескольких кнопок • Draw Layer (нарисовать слой) - вставляет на страничку слой (как в PhotoShop) • Line Break (мягкий перенос) - вставляет на страничку (в тексте) мягкий перенос • E-mail Link (сслыка на электронную почту) - вставляет на страничку ссылку на электронный адрес • Date (дата) - вставка в документ текущей даты (можно с автообновлением) • Flash - вставляет флеш-анимацию в страничку • ShockWave - вставляет Shockwave-анимацию • Generator - вставляет заготовку Generator • FireWorks - вставляет объект FireWorks • Applet - вставляет ява-апплет • ActiveX - вставляет ActiveX • Plugin - вставляет объект, проигрываемый плагином • SSI - вставляет инклюд (подключаемый внешний HTML-файл)Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  3. 3. 3 Палитра Invisibles возволяет добавлять в исходный код странички: • закладки • комментарии • ява-скрипты • неразрывные пробелы Палитра head помогает нам добавлять различные описания и свойства странички, такие как: • мета-теги • ключевые слова • описания странички • установка параметров обновления странички • указание базовой ссылки (ссылки по умолчанию) • указание ссылкиИспользование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  4. 4. 4 Палитра Frames (фреймы) поможет сделать одним нажатием на кнопку сложную фреймовую структуру. Подробнее о фреймах и их применении - позже. Палитра forms (формы) служит для визуального создания форм (того, что вы довольно часто заполняете на различных сайтах). Она состоит из объектов: • form - сама форма • text field - текстовое поле • button - кнопка • checkbox - чекбокс (это - где вы галочку на выборах ставите) • radio button - радиобаттон, обеспечивает выбор одного из вариантов • list/menu - делает выпадающий список или меню • filefield - форма для закачки файлов • imagefield - поле картинки • hidden filed - скрытое поле • jump menu - меню для перехода по клику на другую страничкуИспользование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  5. 5. 5 Палитра специальных символов поможет нам просто и легко добавить на свою страничку знак копирайта, зарегистрированной торговой марки, йены и многого другого. Достаточно просто нажать на нужную кнопку.Для первого раза, я думаю достаточно. Попробуйте повставлятьразличные объекты в ваш документ. Как вы видите, при нажатии накаждую кнопку возникают различного рода диалоги. На следующемшаге мы разберемся с некоторыми из них. ***В данной части мы познакомимся с основными диалогами,возникающими при добавлении объектов из "палитры объектов" вполе документа.Большая часть этих диалогов, например таких как: вставка картинки,горизонтальной линейки, мягкого переноса, флеш, shockwave,generator, plugin, activeX, java applet и server-side include вообще нетребуют пояснений, так как, либо не содержат никаких диалоговыхокон, либо сводятся к указанию нужного файла на жестком диске.По этому разбиратся мы будем с теми диалогами, которые:а) могут нам пригодитьсяб) не так уж и просты на первый взгляд.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  6. 6. 6Начнем со вставки rollover image (картинки-перекатыша). В основном,подобные объекты используются для различных навигационыхэлементов на сайте.Взляните на окно диалога. Там вы видите четыре основных поля.Сверху-вниз это: • image name - название картинки (используется java-скриптом для разделения различных объектов данного типа на страничке). Никогда не делайте названия одинаковыми! • original image - здесь вы указываете расположение файла с картинкой "по-умолчанию", то есть той картинкой, которая будет отображаться вначале. • rollover image - а здесь указывается файл картинки, которая будет появляться при наведении на наш объект курсора мышки (подпункт Preload Rollover image рекомендую оставлять включенным, так как ни что не смотрится так жутко, как появление, при наведение мышки на подобный объект, пустой картинки) • go to url - здесь нужно написать ссылку, по которой пойдет пользователь при нажатии на наш объект.Вот и все. После нажатия на кнопку OK вы получите готовую кнопку,не написав ни строчки кода.Следующий объект - Insert Table (вставить таблицу). Таблицы впостроении сайтов используются не только как в каком-нибудь Word-еили Excel-е, а и как модульные сетки (собственно некий каркас, накотором, как на паутине, держатся все объекты странички).Что нужно указать в данном случае: • Rows - количество рядов таблицы • Columns - количество колонок • Cell padding - расстояние от границы ячейки до объектов внутри нее • Cell Spacing - расстояние между границами соседних ячеек • Width - ширина таблицы (в пикселях или в процентах) • Border - толщина бордюра между ячейками таблицыТоже не сложно. Все заполнили, указали и получили готовую таблицу.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  7. 7. 7Объект Tabular Data появился только в третьей версии и являет собойочень удобный интерфейс для вставки внешних табличных данных вDreamweaver. Например, прайсов из Excel.Указываем: • data file - исходный файл • delimiter - тип разделителя колонок (с несколькими вариантами) • Table width - ширину таблицы (по ширине данных или указываем свое значение) • Cell padding - расстояние от границы ячейки до объектов внутри нее • Cell Spacing - расстояние между границами соседних ячеек • Format Top Row - выделение или невыделение шапки таблицы • Border - толщина бордюра между ячейками таблицыВсе. После этого ваш (заранее подготовленный) файл с даннымипредстанет перед вами в DreamWeaver.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  8. 8. 8Navigation Bar - этот объект побил все рекорды по количеству полей,которые необходимо заполнить. Его нужно рассматривать какнекоторый очень навороченный инструмент для созданиянавигационных панелей на сайтах.Заполняем: • при помощи кнопок "+" и "-" мы можем добавлять или удалять элементы (кнопки) навигационной панели • element name - название текущей кнопки - никогда не делайте имена одинаковыми, лучше всего давать им имена самих кнопок (home, link, next, prev и т.д.) • Up image - указываем файл с картинкой для состояния кнопки "по-умолчанию" • Over Image - указываем файл с картинкой для состояния кнопки при наведении на нее мышки • Down Image - указываем файл с картинкой для нажатой кнопки • Over While Down - указываем файл с картинкой для состояния кнопки нажата + на нее наведена мышка (с трудом представляю себе иную ситуацию) :) • go to url - ссылка, на которую будет произведен переход (при этом укажите, где она будет открыта) • Preload Images - рекомендую оставить включенным • Show "Down image" initialy - по умолчанию показывать кнопку нажатой • Insert - вид панели (горизонтальная или вертикальная) • Use tables - использовать таблицыУф. Если вы все это заполните и сделаете - то в итоге у вас будетнормальная рабочая навигационная панель, без написания дажеИспользование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  9. 9. 9строчки кода.Вставка ссылки на электронный адрес. Тем, кто немного знает HTMLуже известно, что для вставки подобной ссылки достаточно написать:<A HREF="mailto:dab512@mail.ru">e-mail</A>.Но можно этого не знать, а просто указать текст ссылки и адрес e-mail.Что проще - смотрите сами :)Вставка текущей даты - очень удобная вещь. На своем сайте я ееиспользую постоянно. Достаточно указать формат даты, времени и,если необходимо, пункт Update Automatically on Save (автоматическиобновлять при сохранении).Ну вот, на этом мы пока и закончим. На следующем шаге мырассмотрим то, что необходимо для начала нормальной работы надсайтом - настройки DreamWeaver 3. ***Правильная настройка DreamWeaver на работу является очень важнойв достижении качественного результата. Так как мы с вамидоговорились не касаться исходного текста (даже не заглядыватьтуда), важно настроить DreamWeaver таким образом, чтобы потом непришлось краснеть перед собратьями - HTML-врайтерами.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  10. 10. 10Так выглядит первая закладка в настройках. Как видите DreamWeaverимеет очень большое количество различных настроек, настолькобольшое, что их пришлось разбить на несколько категорий (колонкаслева). Мы с вами затронем те, что нам дейтсвительно важны вработе, поэтому такие пункты как HTML Colors или Highlightning язатрагивать не буду.Ну а на первой закладке я рекомундую настроить только 2 вещи:1. Options: Add Extension when saving - если вы работаете только с.html (.htm) файлами или только .asp файлами, или еще какими (нотолько с одним типом), то я рекомендую указать нужное расширение.Тогда при сохранении DreamWeaver сам будет добавлять нужноерасширение.2. Увеличить количество шагов палитры History, скажем до 100(Maximum Number of History Steps). Тогда у вас будет меньше шансов,что, допустив ошибку, вы не сможете ее исправить.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  11. 11. 11Следующая закладка поможет настроить то, как DreamWeaverработает с CSS. Разница вот в чем - некоторые параметры CSSдопускают так называемую "сокращенную" запись. Если вы экономитеместо и хотите использовать подобный тип написания CSS, то вамдостаточно включить все пункты на этой закладке.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  12. 12. 12Следующая настройка поможет вам настроить внешние редакторы.Очень удобная вещь. Например, я себе настроил отдельные редакторыдля HTML (тот же HomeSite 4.5), GIF,JPG - Adobe ImageReady. Итеперь не знаю бед - необходимо подредактировать, ткнул в нужнуюкнопку - получил картинку. Удобно. Обратите внимание на пунктыReload Modified Files и Save on Launch - лучше оставить их как есть - вположении Prompt. Тогда у вас каждый раз будут спрашивать,сохранять ли файл перед открытием в новом редакторе и перегружатьли файл после его отработки во внешнем редакторе.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  13. 13. 13Закладка Floating Pallettes поможет настроить внешний видDreamWeaver. Вы можете указать, какие из палитр будут всегда"висеть" над экраном документа, а какие будут отображаться"навигаторе панелей".Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  14. 14. 14Этот раздел один из самых важных. Довольно часто из-занеправильных настроек именно здесь и возникают проблемы.Обратите внимание на самый верхний пункт - Default Encoding. Именноего необходимо ОБЯЗАТЕЛЬНО настроить правильно. Так, для меняправильным является выбор кодировки Windows-1251 (так как яработаю под Windows). Если вы настроите не так как нужно,DreamWeaver просто начнет автоматически перегонять набранныйвами текст в коды. То есть, ваш текст может выглядеть вот так: "ïîëíûéèçâðàò" - согласитесь, это не есть хорошо.Кроме того, на этой закладке можно настроить основные шрифты,которыми будет отображаться текст и размеры этих шрифтов.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  15. 15. 15Вот и добрались мы с вами до закладки HTML Format (формат HTML).Тоже немаловажный раздел. Здесь вы настраиваете то, как будетвыглядеть ваш исходный HTML-код после его сохраненияDreamWeaver. В основном, этот раздел настраивает "внешний" видHTML - какие остступы использовать, какого размера, после какойколонки обрывать строку. Но есть и более важные пункты, например,пункт Line Breaks настраивает, каким символом должен обозначатьсяперевод строки.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  16. 16. 16Пункт HTML Rewriting тоже важен. Если настроить его неправильно,можно наломать немало дров. Дело в том, что DreamWeaver снабженпарсером (проверочным модулем), который при открытии файлапроверяет исходный HTML-код и делает выводы об ошибках, в немсодержащихся. Иногда то, что DreamWeaver считает ошибкой, таковойвовсе не является. Поэтому пункты Rewrite HTML: Fix Invalidly Nestedand Enclosed Tags и Remove Extra Closing Tags лучше убрать от грехаподальше. Верный DreamWeaver все равно будет отображать"нехорошие" теги желтым цветом. И при желании вы сможете ихудалить вручную.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  17. 17. 17Пункт Layers помогает настроить параметры слоев, которые высоздаете в DreamWeaver. Рекомендую обязательно ключить галочкуNetscape 4 Compatibility во избежание проблем с отображением вNetscape. Кстати, я пока не рискую пользоваться слоями вообще, таккак на сегодняшний день они достаточно неоднозначно отображаютсяв разных версиях браузеров.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  18. 18. 18Настройки FTP. Без верной настройки этого пункта вы просто несможете заливать файлы на ваш веб-сервер. Практически все пунктыможно оставить как есть, только обращаю ваше внимание на пунктFirewall Host – здесь нужно указать адрес вашего прокси-сервера(если вы ходите через прокси). Иначе ничего не получится.Если вы все сделали как надо, то можно считать ваш DreamWeaverнастроенным. Готовьте ваши графические элементы - в следующемуроке мы начнем строить сайт. ***Вот мы и добрались до самого главного момента - начала созданиянашего сайта. Я подготовил минимум материалов, которые могутпригодиться нам в работе над ним. Для того, чтобы пользоватьсяэтими материалами, достаточно просто скачать (36Кб) их. Но никто немешает вам пользоваться собственными наработками. Пожалуй,начнем.Прежде чем вообще браться за изготовление сайта, нужно четкопредставить себе его структуру, размещение основных материалов покаталогам. Чтобы затем просто не запутаться в этих материалах. ВИспользование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  19. 19. 19нашем случае структура будет предельно проста:В корневом каталоге мы разместим наши веб-страницы (.html-файлы),в каталоге Images - картинки (фотографии, элементы дизайна имногое другое) и в каталоге CSS - Cascading Style Sheets (об этомвкратце расскажу позже).После того, как большая часть материалов готова, можно приступать ксозданию сайта в DreamWeaver. Для этого нужно зайти в меню edit ивыбрать пункт preferences. Как, опять настройки?. Да, именнонастройки. Ведь там есть пункт Site FTP (помните прошлый шаг?)Обратите внимание на кнопку Define Sites (определить сайты). Вот онато нам и нужна. Смело нажимайте ее.После нажатия вы увидите вот такое меню:Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  20. 20. 20Выбираем кнопочку New и начинаем заполнять "анкету" нашего сайта.Анкета состоит из пяти разделов:Начнем с первого. Заполняем: • Site name (название сайта) - лобое удобное для вас название (я написал - моя домашняя страничка) • Local Root Folder (локальный корневой каталог) - собственно наш каталог test (см. картинку в начале статьи). • Оставляем как есть галочку напротив Refresh Local File List Automatically • Обязательно включаем пункт Cache [ ] Use Cache to Speed Link Updates - пригодится если мы начнем менять ссылки (быстрее будет)Теперь вторая:Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  21. 21. 21В ней мы настраиваем параметры доступа к удаленному серверу(месту, куда мы будем наши файлы выкладывать): • Server Access - доступ к серверу (варианты: none - нет, FTP - по FTP, Local/Network - по локальной сети • FTP Host - адрес сервера, на который будут выкладываться файлы, например, ftp.cdrom.com • Host Directory - каталог на сервере. Будьте внимательны, когда заполняете этот пункт, если ваш каталог набран БОЛЬШИМИ буквами, то вам тоже нужно указывать его название большими буквами, кроме того, путь вы указываете от корня, то есть строчка может выглядеть вот так: users/design/ace • Login - имя пользователя, под которым вы заходите на сайт • Password - пароль пользователя, под которым вы заходите на сайт. Пипку save включайте только в том случае, если вы пользуетесь этим компьютером один. Иначе ваш пароль доступа легко достается из registry (он хранится там в открытом виде) • Use Passive FTP и Use Firewall - настройки, которые необходимы в конкретных случаях. Например, Use Firewall необходимо указывать, если вы ходите через прокси-сервер. Если вы работаете по модему - эти настройки вас не волнуют.Перейдем к третьей закладке:Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  22. 22. 22Если вы работаете над проектом вместе с другими пользователямиDreamWeaver, то целесообразно настроить данный пункт (т.е.включить галочку рядом с Enable File Check In and Check Out и указатьсвое имя в поле Check Out Name). Просто при таких настройках вашиколлеги всегда будут видеть, занят ли данный файл вами в данноевремя (редактируете ли вы его), и не смогут сами взять его наредактирование (и тем самым уничтожить плоды вашего труда). Длятех, кто работает один, этот пункт не интересен.Четвертая закладка:Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  23. 23. 23Она настраивает внешний вид панели Site Map (именно внешний,физически на структуру сайта или его файлы эти настройки никакоговоздействия не оказывают). Настройки просты - указываем: • Home Page - начальную страницу сайта • Numper of Columns, Column Width - количество колонок и их размер (ширину) • Icon Labels - что использовать в качестве подписей под значками - названия файлов или названия страниц • Options - дополнительные настройки - показывать или нет скрытые файлы и показывать или нет зависимые файлы.Ну и, наконец, последняя - пятая закладка:Она тоже в большей степени имеет значение при групповой работе,чем при работе в одиночку. Настройки просты - сохранять ли такназываемые Design Notes (заметки, которые можно добавлять в файлпри работе с ним) и закачивать ли их на удаленный сервер. Крометого, можно удалить эти самые рабочие заметки, нажав на кнопкуClean Up.После всех этих настроек можно смело нажимать OK и получатьготовый результат. Некоторые из закладок, такие как 3, 4 и 5-ю, яобычно пропускаю.Итак, если вы все сделали правильно, вы увидите вот такую картинку:Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  24. 24. 24Это - так называемый Site Manager, в котором очень удобно совершатьсамые различные действия. Он разделен на две колонки - левая дляфайлов, находящихся на удаленном сервере, правая - для локальныхфайлов. Кроме того, вы можете видеть несколько кнопок: • Connect - подключение к удаленному серверу • Refresh - обновление списка файлов на удаленном и локальном серверах • Get - закачка выделенного файла (каталога, группы файлов) на локальный диск • Put - противоположная операция - закачка файлов, каталогов или групп фалов на удаленный сервер (замечу, что при закачке файла из подкаталога CSS или любого другого, файл автоматически помещается в тот же каталог на удаленном сервере, то есть тоже окажется в каталоге CSS).Ну вот. Сайт создан, и мы готовы продолжать. На следующем занятиимы начнем дизайн нашего сайта с применением table (таблиц) и нашихзаготовок. ***Вот мы добрались и до создания первой странички (все правильно,ведь сайт - это не одна страничка, и даже не две, сайт - это идея,концепция, некий цельный проект). Кстати, прежде чем мы начнемсобственно делать страничку, мне придется сделать небольшое(лирическое) отступление:Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  25. 25. 25Для начала работы со страничкой нам нужно иметь какую-то основу,структуру этой странички. Делается эта структура при помощимодульной сетки. Что-то такое в теории можно подробно прочесть вотна этой страничке(http://www.mrdesign.krasline.ru/articles/art13b.shtml). Я жепостараюсь написать максимально приближенно к практике.Слева вы видите модульную сетку для нашей домашней странички.Как видите, страничка разбивается на несколько блоков, каждый изкоторых имеет свое наполнение.В нашем случае это: • Logo - логотип нашей странички, некий броский рисунок (визуал) или любое другое средство привлечения внимания • Menu - главное меню сайта • SubMenu - подменю текущего раздела • Text - основное наполнение, контент • Copyright - "подвальный" раздел для баннеров, кнопок, копирайтов и прочей мишурыКроме того, я сразу указал основные размеры. Как видите, я решилсделать правый край нашей странички "резиновым" для того, чтобыпользователи с большими мониторами могли наслаждаться своимразрешением 1600х1200...Начнем создание всего этого в HTML. Для начала войдите в свой сайт (просто выберите его из списка) и создайте новый файл, выбрав пункт New File. "А почему не New Window?" - спросите вы. Отвечаю - при открытии нового окна файл сразу не создается (он создается только при записи на диск), а все ссылки обычно указываются относительно положения файла. ВамИспользование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  26. 26. 26 понравятся ссылки вида - d:vasyaworkimageslogo. gif? Мне нет, да и отображаться подобная конструкция будет только на вашей локальной машине. Так что выбираем New File, и никаких гвоздей! После выбора пункта New File на панели справа (локальные файлы) появится файл untitled.htm, который стоит сразу переименовать в index.htm или default.htm - так обычно указывается название первой (головной) странички сайта Двойным щелчком открываем созданный файл и видим чистый белый лист (что может быть прекраснее), на котором мы и будет создавать нашу страничку. Но перед созданием таблицы и занесением в нее наших элементов дизайна стоит задать основные свойства нашей странички (это важно!). Для этого нужно зайти в меню Modify и выбрать пунтк Page Properties (или просто нажать Ctrl + J).Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  27. 27. 27Перед вами откроется вот такой диалог. Что здесь нужно заполнить: • Title - название вашей странички (как оно будет отображаться в заголовке окна браузера) • Background Image - фоновый рисунок (в нашем случае не используем) • Background - цвет фона (в нашем случае белый) • Text - цвет текста (черный) • Links - цвет ссылок (темно-синий) • Visited Links - цвет посещенных ссылок (фолетовый) • Active Links - цвет текущей активной ссылки (темно-красный) • Left Margin, Margin Width - отступ от края страницы до начала контента слева (в нашем случае 0) • Top Margin, Margin Height - то же, но сверху • Document Encoding - кодировка документа (будьте внимательны, указывайте правильную кодировку) • Tracing image - кладет на фон полупрозрачную картинку с дизайном - удобно для точного совмещения дизайна в HTML с дизайном (наброском), сделанным в PhotoShop.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  28. 28. 28 Ну а теперь пора заняться таблицами и прочим. Для начала сделайте таблицу с параметрами, как показано на рисунке слева: 3 ряда, 2 колонки, отступы и бордюр по нулям, ширина таблицы 100%. Заметьте, что эти данные полностью совпадают с тем, что мы планировали вначале при разработке модульной сетки. После нажатия на OK вы получите пустую таблицу, которую нужно корректировать и заполнять нашими графическими элементами. Прежде всего, выберите первую ячейку (просто кликните внутрь) и вставьте картинку с логотипом (My homepage). После этого выделите колонку слева (самую крайнюю). Делается это примерно как в том же Word - подводите к самой верхней границе колонки, дожидаетесь появления стрелочки вниз и нажимаете. Кроме того, можно выделить ячейки колонки по- отдельности, нажав кнопку ctrl и, не отпуская ее, кликать по ячейкам.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  29. 29. 29 После выделения укажите ширину (Width) вашей колонки, которую мы определили еще в модульной сетке - 247 Pix. Где вводить это значение? Обратите внимание на самую нижнюю плавающую панель - свойства. Там как раз и есть нужное окошко (я его выделил красным). Проделайте ту же операцию со второй колонкой, только теперь укажите ширину 100%. Теперь займемся рядами. Для начала кликните в любую из ячеек верхнего ряда. Теперь поглядите в левый нижний угол окна DreamWeaver. Видите список <body><table><tr><td> ? Этот список демонстрирует все теги HTML, которые являются более "старшими" по отношению к текущему тегу. То есть показывают некую иерархию документа. Но нам это пока не очень важно, нам важно то, что, просто нажав на <tr>, мы сразу получаем выделенный ряд. Давайте зададим нашему верхнему ряду фон. Для этого снова обратитеИспользование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  30. 30. 30 свое внимание на нижнюю панель - свойства. Там есть пункт Bg (background). Нажав на значок папки, вы можете указать файл, который будет играть роль фона. В нашем случае это top_back.gif. Кроме того, то же самое можно сделать, нажав на перекрестье рядом, и, потянув стрелочку, указать на панели менеджмента сайта нужный файл (этакий dragndrop). Если вы все сделали верно, верхний ряд будет залит нужным фоном.Напоследок давайте отформатируем еще нижний ряд. Для этоговыделите его, как рассказывалось ранее, и выберите пункт Bg (тольконе тот, где выбирали картинку, а другой, чуть ниже). При нажатии наквадратик со стрелочкой вы увидите меню, подобное тому, чтоизображено выше. Обязательно выключите указанную на рисункекнопку (нам в данном случае это не нужно).Появившимся курсором - пипеткой кликните по синей части нашеговерхнего фона, после чего ваш нижний ряд будет закрашен таким жецветом, как эта синяя часть верхнего фона.Ну вот. Начало уже положено. На результат можно взглянуть вотздесь. На следующем шаге мы рассмотрим, как сделать меню, причемсделать его удобным для изменения и дополнения.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  31. 31. 31 ***Как и обещал, беремся за изготовление меню нашего сайта.Применять мы сегодня будем много чего, так что приготовьтесь кдлительному чтению. Для начала выберите ячейку таблицы (верхнюю правую), для которой мы отвели место под меню. В свойствах измените горизонтальное и вертикальное выравнивание на "влево" и "вниз" соответственно (см. рисунок слева). Заметили, что курсор сместился в левый нижний угол ячейки? Так и должно быть. Теперь напишите текст, состоящий из названий основных разделов и ссылок на них. Обратите внимание, что текст прижат к нижней части ячейки и целиком находится на синем поле фона (что нам, собственно и нужно).Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  32. 32. 32 После написания текста измените в свойствах его форматирование с none на paragraph. В HTML это означает заключение текста в тег <P></P>. Для чего я это сделал? Чтобы получить строку, с которой мне затем будет просто, удобно и легко работать. Не знаю как вас, а меня внешний вид нашего меню не устраивает. Хотелось бы его немного приподнять над краем ячейки, покрасить в другой (более контрастный) цвет + сделать еще кое-какие косметические вещи. Сделать это можно при помощи CSS Styles (CSS - стилей). Находятся они в правой нижней части окна DreamWeaver.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  33. 33. 33 В появившейся панели нажимаем на кнопку "создать" (она выделена на рисунке). Затем в диалоге выбираем тип Make Custom Style (class), дадим нашему стилю название и приступим к его определению.Укажите размер шрифта (Size), цвет (Color) и Decoration как показанона рисунке. Остальные настройки мы пока не трогаем.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  34. 34. 34Как видите, настроек у стиля до черта. Нам они все пока не нужны.Перейдите в пункт box и задайте параметры отступов, как показано уменя на картинке. Обращаю ваше внимание, что сами отступы вDreamWeaver могут не отобразиться как надо. Не пугайтесь, вбраузере все будет в порядке. Так, теперь выделяем наше меню нажатием на букву <P> в нижнем левом углу окна. В панели стилей просто выбираем наш стиль (menu). Ну вот, стиль на параграф текста мы назначили. Можно проверить, как все это выглядит в браузере. Для этого нужно лишь нажать F12.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  35. 35. 35 Раз уж мы залезли в CSS-стили, давайте доведем наше черное дело до конца. Зададим параметры еще нескольким элементам. В отличие от предыдущего раза, когда мы делали свой стиль, теперь мы будем переназначать уже готовый стиль. Например, стиль параграфа (<P>). Для этого создаем новый стиль, выбираем пункт Redefine HTML Tag и выбираем тег p.Для параграфа мы укажем конкретный шрифт (font), размер (size) ицвет (color). Остальное оставим как есть.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  36. 36. 36 Кроме параграфа мы еще и парочку тегов a:link и a:hover изменим. Эти теги отвечают за внешний вид ссылки в стандартном состоянии и в состоянии при наведенной на нее мышки. Зададим цвет ссылок (белый) и при наведении сделаем изменение Decoration с none на underline. Пришло время указать ссылки на основные страницы нашего сайта. Делается это просто - выделяете нужный текст (если это одно слово, то можно просто пару раз щелкнуть по нему мышкой) и пишем в свойствах сслылку. Самих файлов у нас пока (реально на диске) нет, поэтому мы именно пишем нужные нам названия (а не ищем их на диске). Наша последняя задача - облегчить установку и изменение (по необходимости) нашего меню. Ее можно решить при помощи удобного инструмента DreamWeaver под названием "библиотека" (library). Где она находится, вы видите на рисунке слева.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  37. 37. 37 В появившемся окне выбираем "создать новый элемент" (наше меню должно быть целиком выделено!).Сразу же вылетает предупреждение о том, что мы применяем кэлементу меню особые стили, и он может не отображаться корректнона других страничках. Не пугайтесь, все в порядке, просто нажимайтеOK. Все, осталось только назвать наш элемент поудобнее и, при необходимости, вставлять его в любой документ при помощи кнопки Insert. Кстати, все изменения, которые мы будем вносить в наш элемент, будут автоматически вноситься во все страницы, на которых он используется.На результат сегодняшнего урока можно взглянуть вот здесь. Наследующем шаге мы будем разбираться с особенностямиформатирования текста в DreamWeaver и познакомимся поближе сCSS-стилями. ***CSS или Cascading Style Sheets... Тут меня в аське спросили - чего,мол, не переводишь - все CSS, да CSS... Ну, если перевод "каскадныестилевые таблицы" устроит, то я безумно рад. Других вариантов уИспользование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  38. 38. 38меня нет. Хотя даже такой приближенный перевод указывает наглавную особенность CSS - каскадное наследование свойств объекта...Но об этом позже. А пока - большое лирическое отступление о том,как делаются CSS в DreamWeaver. С чего начинается создание стиля, мы уже говорили на прошлом уроке, но "повторение - мать учения". Слева вы видите стандартный диалог, возникающий при создании нового стиля. Вы можете выбрать один из трех вариантов - создать новый стиль, переназначить свойства стандартного HTML-тега и использовать специальные расширения CSS.После указания имени вашего стиля (или выбора стандартного стиляИспользование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  39. 39. 39для переназначения) вы оказываетесь в "настройках" стиля. Делаетсяздесь все довольно просто, за изменениями вы можете наблюдать врежиме realtime (правда с некоторыми оговорками).На первой закладке мы определяем, как будет выглядеть отдельнаябуква нашего текста: 1. Указываем шрифт, которым будет писаться текст. Обратите внимание, что вы можете либо указать конкретный шрифт, хоть FreeSet, но нет шансов, что он есть у пользователя на машине (а раз его нет - отображаться страничка будет не так). Так что рекомендую пользоваться конструкциями, предлагаемыми самим DreamWeaver - например, Verdana, Arial, Helvetica, sans-serif. В этом случае сначала будет искаться шрифт Verdana - не нашли, тогда Arial, нет такого? Тогда Helvetica, ну а если и ее нет, тогда любой шрифт без засечек - гротеск. 2. Указываем размер шрифта - по сравнению с возможностями HTML, тут все просто здорово. Размер можно указать практически в чем угодно, начиная от % и заканчивая пикселями и пунктами. 3. Здесь настраивается степень "веса" буквы или, проще говоря, ее толщина. Вариантов, как видите, тоже немало. 4. Стиль написания - наклонный (италлик), стандартный (normal) 5. Вариации написания - например, весь текст набран только строчными или только заглавными буквами 6. Высота базовой линии шрифта в пунктах, поинтах или любых других величинах 7. Какими буквами мы пользуемся - большими, маленькими или стандартно и теми и другими 8. Различный декор - подчеркивание, мигание и прочее 9. Цвет текста.Обратите внимание на пункты помеченные *. На этой и на другихпанелях звездочка означает, что данный вариант не отображаетсявизуально в DreamWeaver (т.е. в браузере надо проверять)Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  40. 40. 40На данной закладке мы производим настройки фона. Фона всейстранички или только заданного абзаца текста - это уж как вы стильрешили создавать. 10.Цвет фона (выбираете вариант из стандартных 256 цветов или создаете свой цвет) 11.Файл с фоновым изображением 12.Настройка повторения (размножения) фонового изображения по странице, например, можно задать, чтобы изображение копировалось только по оси X 13.Здесь указывается, как ведет себя фоновое изображение при прокрутке страницы - прокручивается вместе с ней или стоит на месте 14.Указание горизонтальной позиции начала фона 15.Указание вертикальной позиции начала фонаСразу замечу, что пунктами 3 и 4 надо пользоваться "с оглядкой" - т.е.проверять во всех необходимых версиях браузеров на совместимость -иначе, может получиться расхождение в отображении...Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  41. 41. 41Пункт block служит для настроек параметров блока текста (т.е. здесьречь идет уже не об отдельных буквах, как в пункте Type). 1. Настройка расстояния между словами 2. Настройка межбуквенного расстояния или трекинг 3. Вертикальное выравнивание строки текста 4. Горизонтальное выравнивание текста 5. Отступ первой строки текста 6. Настраивает систему расстановки дополнительных пробелов между словами и предложениями (несколько вариантов)Здесь все достаточно просто, я обычно использую только Text Align иText Indent. Остальные пункты только при необходимости созданияэлементов дизайна именно на основе стилей (при создании текстовойверсии).Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  42. 42. 42Данный пункт управляет ограничениями данного куска текста настранице (ограничивает его расположение в определенномпрямоугольнике) 1. Ширина прямоугольника 2. Высота прямоугольника 3. Настройка выключки влево или вправо 4. Настройка того, как ведет себя текст при использовании элемента с выключкой влево или вправо (как текст обтекает подобный объект) 5. Настройка отступа от края прямоугольника до расположенных рядом других элементов 6. Настройка отступа от краев прямоугольника до текста.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  43. 43. 43Пошли различные декоративные настройки. Например, эта позволитвам создать бордюр вокруг вашего элемента, со всеми необходиымымивам настройками. 1. Указываем ширину бордюра слева, справа, сверху и снизу 2. То же самое, но для цвета бордюра 3. Стиль бордюра - различные варианты сочетания точек и черточек :)Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  44. 44. 44Настройки списков (нумерованного и списка с буллетами) 1. Тип оформления буллета (несколько вариантов) 2. Использование в качестве буллета картинки 3. Позиционирование буллетаИспользование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  45. 45. 45Позиционирование - вещь важная и интересная. Оно помогает"поставить" наш объект в любое место на страничке. Итак:1. Тип позиционирования (относительное, абсолютное и т.д.)2. Расположение по Z-координате - в каком слое будет находитьсянаш объект.3. Видимый или невидимый наш объект (может использоваться длясоздания пустых полей в документе)4. Чего будем делать с переполнением (т.е. если текст весь не влез)5. Расположение объекта - указание координат вершины + ширины ивысоты6. Отступы со всех сторон в пикселях или других единицах.Ну и последнее... 1. Указание обрыва страницы (в основном для печати) 2. Визуальный эффект - при наведении на объект курсора он может менять свою форму или при загрузке объекта срабатывает один из стандартных фильтров (последнее верно только для Internet Explorer).Ну вот, теперь у вас есть базовые знания в области CSS. Примеровникаких не будет, только сухая и скучная теория. На следующем шагемы будем полученные знания применять. И изучим еще одининтересный механизм DreamWeaver под названием Library.Использование данного документа в коммерческих целях без согласия автора запрещено.© 2000 Александр Аверин, http://www.design.krsk.ru
  46. 46. 46 ***Сегодня мы будем заниматься чисто текстовым оформлением. Порауже начать наполнять нашу страничку каким-то содержанием. Но еслимы будем просто сваливать это содержание в одну кучу - ничегЀ

×