Your SlideShare is downloading. ×
  • Like
  • Save
урок 1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
36
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Практическая работа №1Настраиваем редакторПосле запуская программы Мacromedia Dreamweaver 8, появитсяглавное окно программы.Оно служит вместилищем множества других окон, содержащих какоткрытые web страницы, так различные инструменты, предназначенные дляработы с ними. Также в главном окне находится строка главного меню, с
  • 2. помощью которого мы сможем получить доступ ко всем инструментамDreamweaver.Выполняем предварительную настройку редактора.Работа будет происходить в многофункциональном окне настройкиPreferences. Чтобы вызвать его, нужно выбрать пункт Preferences меню Editили нажать комбинацию клавиш <Ctrl>+<U>. В левой части окна Preferencesнаходится список категорий Category, а в правой - элементы управления.Для поддержки русскоязычных страниц выбираем в спискекатегорий пункт New Document. Окно настройки примет следующий вид:В раскрывающемся списке Default document по умолчанию выбранпункт HTML. Так как мы будем создавать web страницу оставим в спискеэтот пункт. В поле ввода Default extension выбран по умолчанию html.Оставим его. Далее следует раскрывающейся список Default DocumentType(DDT). Для создания нашей web страницы выбираем HTML 4.01
  • 3. Transitional. Следующий раскрывающейся список Default encoding задаеткодировку документа. Мы можем смело выбрать Кириллица (Windows),которую поддерживают и распознают все современные web обозреватели.Ниже раскрывающегося списка Default encoding находится флажокUse when opening existing files thet don"t specify an encoding. Он указываетDreamweaver применять заданную в списке кодировку ко всем открываемымweb страницам, кодировка которых не задана в HTML-коде и включен поумолчанию.Последний интересующий нас флажок, включенный по умолчанию,это - Show New Document dialog box Control+N. Он предписывает редакторупосле выполнения команды создания нового документа, выводить на экрандиалоговое окно New Document.Зададим еще несколько настроек. Для этого переключаемся накатегорию General окна Preferences.
  • 4. Здесь много элементов, но нас будут интересовать только два флажка.Флажок Use <strong> and <em> in place of <b> and <i> , если его включить,заставит Dreamweaver использовать для формирования текста тегилогического форматирования <strong> и <em>. При отключенном положенииустаревшие теги физического форматирования <b> и <i>. По умолчаниюфлажок включен.Флажок Use CSS instead of HTML tags включает или отключаетиспользование для форматирования текста стилей CSS вместо теговфизического форматирования. По умолчанию он тоже включен.Вот и все самые необходимые настройки, которые мы должны задать.Разработчики программы, почти все, установили их за нас по умолчанию.Нажимаем кнопку ОК, чтобы закрыть диалоговое окно.Для создания страницы выбираем пункт New в меню File. Появитсяокно:
  • 5. В левой части окна New Document расположен список Category.Выбираем в нем пункт Dasic pege, а в правом HTML, после чего нажимаемкнопку Create.На экране появится пустое окно документа.Настройка страницыДля этого необходимо из главного меню выбрать команду Modify=>PageProperties…. Основное, что необходимо задать в открывшемся диалоговом окне, этоназвание (заголовок) страницы – поле Title в категории Title/Encoding (рис. 2.4).Считается, что каждая страница сайта должна иметь продуманное, кратко и четкосформулированное название. Визуально оно будет отображено в заголовке окна броузераи, кроме того, будет использоваться поисковыми системами и т.п.Кроме заголовка, в категории Appearance этого диалогового окна (рис.4.1), можно установить следующие параметры страницы:• Background image – изображение, которое будет использовано вкачестве фона страницы (графический файл с изображением можно выбрать,нажав кнопку Browse…);•Background / Text – соответственно цвета фона страницы и текста,расположенного на ней (можно выбрать цвет из палитры, нажав накнопке, расположенном рядом);•Links / Visited links / Active links – соответственно цвета ссылок /посещенных ссылок / активных ссылок;• Left margin / Top margin / Margin width / Margin height – задаютотступы (поля) по бокам и в начале и конце страницы (Left и Top margin
  • 6. отображаются только в броузере Internet Explorer, а Margin width иheight только в Netscape Navigator, поэтому рекомендуется использовать обапараметра одновременно для сохранения совместимости).Набираем текстТекст набирается с помощью клавиатуры. Dreamweaver самостоятельноразобьет текст на строки. Для создания нового абзаца нажимаем клавишу<Enter>. Вводим текст и отформатируем его: расставим заголовки, выделимчасти текста полужирным шрифтом. Dreamweaver мало чем отличается отзнакомых нам текстовых редакторов. Рассмотрим панель управленияредактором.Мы видим на панели много знакомых кнопок. Нажимаем кнопкуDesing, в нижней части панели и вводим текст.
  • 7. И так, мы написали текст. Если хотите увидеть это творение в интернетбраузере, откройте подпункт IExplore 6.0 в пункте Preview in Browser в менюFile или нажмите клавишу F12. При подготовке текста мы обошлись безнаписания тегов HTML кода. Но любой грамотный web дизайнер должензнать язык HTML и уметь с ним работать. Как получить доступ к HTML кодунапечатанной страницы? Не нужно забывать, что мы имеем дело сгибридным web редактором. Внимательно посмотрев на панель, мы увидимтри кнопки.Они переключают три доступных режима отображения, которые мысейчас рассмотрим.
  • 8. В данный момент нажата правая кнопка этого набора. Она включаетрежим отображения web страницы, предлагаемый Dreamweaver поумолчанию.Теперь нажмем среднюю кнопку Split, включающую режимотображения web страницы и HTML кода.Как видно, окно документа разделилось на две части. В нижней частиотображается сама страница, в верхней ее HTML-код. Такой режим полезен,когда надо откорректировать код, держа перед глазами саму web страницу.Перемещая мышью серую разделительную полосу, мы можем увеличитьверхнюю или нижнею часть окна.И наконец, левая кнопка Code, включает режим отображения HTMLкода.
  • 9. Визуальное форматирование текстаТекст, как правило, начинается с заголовка. Давайте создадим в нашемтексте красочный заголовок. Чтобы превратить обычный абзац в заголовок,нужно воспользоваться панелью Properties. Эта панель находится в нижнемдоке и называется панелью свойств. Если ее не видно, включите пунктвыключатель Properties в меню Window или нажмите комбинацию клавиш<Ctrl>+<F3>.
  • 10. В редакторе свойств нам понадобится раскрывающейся список Format.Пункт Paragraph форматирует текст как обычный абзац. А вот пунктыHeading 1,..., Heading 6 позволяют превратить его в заголовок.Поставим текстовой курсор на строку "Персональная страница" ивыберем в меню форматов пункт Heading 1. Это будет выглядеть так:Теперь выравним заголовок по центру. В этом нам помогут кнопки-переключатели выравнивания , расположенные в редакторесвойств. Это будет выглядеть так:
  • 11. Теперь посмотрим на кнопки , находящиеся в том же редакторесвойств. Они позволяют создать отступ слева, между краем окна и абзацем.Левая кнопка уменьшает отступ, правая увеличивает. Давайте поставимкурсор мыши на последний абзац и нажмем кнопку увеличения отступа.
  • 12. Создадим маркированные списки, преобразовав выделенные строки впункты списка, воспользовавшись кнопками переключателямиредактора свойств.Левая кнопка превращает выделенные абзацы в пунктымаркированного списка, а правая-в пункты нумерованного.Форматируем фрагмент текста
  • 13. И так перейдем к тексту. Начнем с самого простого. Сделаемнекоторые слова в тексте полужирными и курсивными. Воспользуемся двумякнопками изменения начертания , расположенными в редакторесвойств. Левая кнопка В позволяет сделать шрифт полужирным, правая I-курсивным.Выделим текст "Горбунков Семен Семенович" и нажмем кнопку В.Текст станет полужирным. Теперь выделим полностью последний абзац инажмем кнопку I. Абзац станет курсивным.
  • 14. Теперь давайте зададим шрифт для фрагмента текста. Делается это спомощью двух комбинированных списков, расположенных в редакторесвойств. Для задания самого шрифта используется комбинированный списокFont, а для смены размера шрифта список Size. Пункт Default Font означает,что для отображения текста броузер будет использовать шрифт поумолчанию. Следует обратить внимание, что в этом списке указаны неотдельные названия шрифтов, а комбинации шрифтов со схожимиарнитурами. Это связано с тем, что при отображении на клиентской машине,возможна ситуация, когда указанный шрифт не будет на ней установлен. Вэтом случае будет использован следующий из указанных шрифтов. Если наклиентской машине не окажется ни одного из перечисленных шрифтов, тобудет использован шрифт, заданный в броузере по умолчанию. Изменитьсписок шрифтов (добавить, удалить или изменить комбинации) можно припомощи команды Edit Font List…, расположенной в конце списка. Кроме
  • 15. того, гарнитуру шрифта можно выбрать в разделе Font контекстного менюили выполнив команду Text=>FontОткроем комбинированный список Font.Каждый пункт комбинированного списка соответствует определенномустандартному шрифтовому набору HTML. В комбинированном списке Sizeперечислены все доступные размеры шрифтов. Пункт None cбрасываетразмер шрифта установки по умолчанию.Для полноты картины давайте сменим шрифт всего текста. Для этоговыбираем пункт Select All в меню Edit или нажимаем комбинацию клавиш<Ctrl>+<A. Но проще щелкнуть мышью по кнопке <body> в секции тегов.Теперь поэкспериментируем с текстом задавая различные шрифты иразмеры.
  • 16. Для задания цвета используем селектор цвета .В левой части селектора находится кнопка, вызывающая окно выборацветаБольшую часть окна занимает палитра, где ищем нужный цвет. Найдяего щелкаем по нему мышью, окно выбора закроется.Цвет текста можно указать в поле Text Color в видешестнадцатеричного значения, которое затем и будет вписано в исходныйкод HTML-страницы.Цвет задается в виде #RRGGBB, где # открывает шестнадцатеричнуюзапись, а RR, GG и BB – определяют величину соответственно красной,зеленой и синей цветовых компонент (могут принимать значения в диапазонеот 00 до FF).При помощи кнопок Bold и Italic выделенный фрагмент текстаможно сделать жирным и/или наклонным соответственно. Дополнительныестили оформления текста можно выбрать в меню Text=>Style или в разделеStyle контекстного меню. Выравнивание абзаца текста можно задать припомощи кнопок Left, Center, Right и Justify . Также это можно сделать,выбрав тип выравнивания в меню Text=>Align или в разделе Alignконтекстного меню.
  • 17. Задания для закрепления материала1. Настройте программу редактора Dreamweaver, установив требуемуюкодировку создаваемых Web-страниц.2. Создайте страницу. Установите заголовок у страницы «Dreamwever».Задайте фоном страницы – картинку.3. Наберите текст в соответствии с образцом, представленным ниже: установите у заголовка тип «Заголовок 1» шрифт Times New Roman,14 ко второму абзацу примените два отступа влево, к третьему-3 отступа оформите текст цветом.