Учебно-методический комплекс дисциплины дс. Ф. 1 Web-графика и web-дизайн основная образовательная программа подготовки специалиста по специальности
Скачать 3.38 Mb.
|
| Тема: Этапы разработки web-сайта Цель работы: научиться планировать и формировать образ будущего сайта. План
Основная литература: [1, 5, 13, 14, 32, 33, 36] Дополнительная литература: [2, 17, 19, 50, 54, 62] Практическая работа №5 (6 часов) Тема: Язык разметки гипертекста HTML Цель работы: научиться реализовывать сайт при помощи технологии HTML. План
Основная литература: [1, 5, 6, 13, 14, 16, 23, 32, 33] Дополнительная литература: [2, 17, 19, 50, 54, 62] Практическая работа №6 (6 часов) Тема: Каскадные таблицы стилей Цель работы: научиться реализовывать сайт при помощи технологии CSS. План
Основная литература: [1, 5, 6, 13, 14, 16, 23, 32, 33] Дополнительная литература: [2, 17, 19, 50, 54, 62] Лабораторная работа №1 Тема: Подготовка графических элементов web-сайта Цель: научиться оптимизировать графику для web-страниц. План 1. Подготовка логотипа. 2. Создание фона. 3. Создание других графических элементов. Лабораторная работа №2 Тема: Знакомство с интерфейсом программы Macromedia DreamWeaver Цель: научиться проектировать и создавать web-узлы. План
Главное окно программы Главное (или основное) окно программы Macromedia Dreamweaver MX показано на рис. 2.2. Рассмотрим его подробнее.  Рис. 2.2. Главное окно Dreamweaver Главное окно служит "вместилищем" для превеликого множества других окон, содержащих как открытые Web-страницы, так и различные инструменты, предназначенные для работы с ними. Также в главном окне находится строка главного меню, с помощью которого вы сможете получить доступ ко всем возможностям Dreamweaver. Выше, ниже и правее окна документа находятся панели. Это небольшие окна, которые могут быть либо "приклеены" к одному краю главного окна, либо свободно "плавать" рядом с ним. В верхней части каждой панели имеется ее заголовок — темно-серая полоса, на которой написано название панели.  Рис. 2.3. Панель, отделенная от края родительского окна "Отклеенная" от края главного окна панель может быть перемещена в любое место экрана, даже за пределы главного окна программы. Кроме Чтобы временно уменьшить площадь, занимаемую "плавающей" панелью (фактически, группой панелей), вы можете ее "сжать", чтобы на экране остался только заголовок (рис. 2.5). Для этого щелкните по названию панели, находящемуся в ее заголовке. Чтобы "развернуть" панель до обычного состояния, снова щелкните по ее заголовку.  Рис. 2.5. "Сжатое" окно панели Теперь обратите внимание на правый край главного окна. Там находится настоящее сборище всяческих панелей. Это так называемый док — область, специально предназначенная для помещения на нее панелей. Док отделен от остального пространства главного окна толстой серой полосой, которую вы можете перетаскивать мышью, изменяя размеры дока. Вы также можете щелкать мышью довольно приметную кнопку (рис. 2.7), чтобы быстро скрыть док со всеми его панелями или открыть его снова.  Рис. 2.7. Кнопка скрытия-раскрытия дока Как правило, все панели Dreamweaver имеют примерно одинаковые возможности (но, конечно, разное назначение). Но две из них стоят особняком. Первая из них — это панель объектов, показанная в "плавающем" виде на рис. 2.3 (она носит название Insert). Эта панель служит для быстрой вставки в документ различных элементов: рисунков, таблиц, специальных символов, расширений Web-обозревателя и пр. (Также она служит для переключения режимов работы окна документа, но об этом поговорим позже.) Панель объектов содержит множество вкладок, между которыми вы можете переключаться, — это способ сделать ее чуть более вместительной. Если в данный момент времени панель объектов вам не нужна, можете закрыть ее, раскрыв ее дополнительное меню и выбрав пункт Close Panel Group. Чтобы открыть ее впоследствии, выберите в меню Windows пункт Insert или нажмите комбинацию клавиш Вторая панель, имеющая заголовок Properties, — это редактор свойств (рис. 2.8), один из важнейших и незаменимейших инструментов Dreamweaver. Редактор свойств служит для задания параметров того или иного элемента Web-страницы (фактически — значений атрибутов соответствующего HTML-тега). Если панель объектов вы можете со спокойной душой закрыть, чтобы освободить место на экране, и использовать для вставки элементов страницы пункты меню главного окна, то редактор свойств вам будет нужен всегда. Поэтому держите его под рукой. Если же вы его все же случайно закрыли, выберите в меню Windows пункт Properties или нажмите комбинацию клавиш  Рис. 2.8. Редактор свойств Редактор свойств можно переключить в компактный или полный вид. Изначально он находится в компактном виде, не показывая некоторых, малоиспользуемых, с точки зрения разработчиков Dreamweaver, свойств. Чтобы развернуть, необходимо щелкнуть мышью по кнопке, имеющей вид стрелки, направленной вниз, — она расположена в правом нижнем углу панели. После этого редактор свойств покажет вам все доступные свойства. (На рис. 2.2 редактор свойств находится как раз в развернутом виде.) Заметьте, что при этом кнопка развертывания изменит вид на стрелку вверх, и при щелчке на ней вы, наоборот, свернете редактор свойств. Управление окнами и панелями Dreamweaver Как видите, Dreamweaver может вывести на экран сразу множество разнообразнейших окон. Как разобраться во всем этом многообразии? Прежде всего, нужно знать пункты меню, с помощью которых осуществляется управление этими окнами. Все эти пункты находятся в подменю Window. Если вы открыли несколько Web-страниц, разобраться в них может быть очень трудно. Окна перекрывают друг друга, и добраться до нужного окна удается далеко не сразу. Откройте подменю Window и посмотрите его нижнюю часть. Там будут находиться пункты, имеющие имена, схожие с именами файлов открытых страниц. Для того чтобы переключиться в окно, где открыт нужный файл, просто выберите соответствующий пункт. Dreamweaver тотчас выведет это окно на первый план, т. е. активизирует его. Если же вы раскрыли одно из окон документов на весь экран (точнее, на все главное окно), то переключаться между окнами станет еще проще. В этом случае все открытые окна будут перечислены в нижней части окна документа в виде вкладок (рис. 2.10) — вам останется только выбрать необходимое.  Рис. 2.10. Вкладки, обозначающие все открытые окна документа в раскрытом состоянии Если вам нужно держать на виду сразу два или больше окон, воспользуйтесь пунктами Cascade, Tile Horizontally или Tile Vertically меню Window. Первый из них "выкладывает" все открытые окна документов в виде "стопки" в окне программы так, что вы можете видеть их заголовки и часть содержимого. Второй и третий пункты "выкладывают" в окне программы "мозаику" из окон документов так, чтобы они не перекрывались. Причем второй пункт выкладывает "мозаику" по горизонтали, а третий — по вертикали. Пункты Insert и Properties служат для вывода на экран или скрытия соответственно панели объектов и редактора свойств. Если слева от имени одного из этих пунктов стоит галочка, это значит, что соответствующая панель выведена на экран (или, как еще говорят, что соответствующий пункт меню "включен"). Чтобы убрать панель, снова выберите нужный пункт — и панель исчезнет вместе с галочкой. Такие пункты меню, меняющие свое состояние на противоположное при выборе, называют выключателями. Вместо выбора пунктов Insert и Properties вы можете нажать "горячие" комбинации клавиш Большую часть меню Window занимает набор аналогичных пунктов-выключателей, служащих для вывода на экран или скрытия различных панелей. Если вам нужно скрыть на время все панели, чтобы без помех просмотреть открытую Web-страницу, выберите пункт Hide Panels в меню Window или одноименный пункт в меню View. Этот пункт работает как выключатель, т. е. при первом выборе он скрывает все панели, а при втором — снова выводит их на экран. Вы также можете нажать клавишу
Три режима отображения Web-страницы Окно документа Dreamweaver может показывать редактируемую Web-страницу в трех режимах отображения. Как уже говорилось, Dreamweaver относится к гибридным Web-редакторам, позволяющим работать как с самой Web-страницей, так и непосредственно с ее HTML-кодом. Осуществляется это очень легко благодаря тому, что Dreamweaver может отображать одновременно и HTML-код, и саму страницу в одном окне. Но как получить доступ к HTML-коду? Ведь по умолчанию Dreamweaver предлагает вам редактировать Web-страницу в режиме WYSIWYG. Взгляните на инструментарий документа (лучше всего держать его открытым). Слева видны три кнопки (рис. 2.15). Они переключают три доступных режима отображения (перечислены в порядке справа налево): страница, страница и HTML-код и только HTML-код.  Рис. 2.15. Кнопки переключения режимов отображения Web-страницы На рис. 2.15 крайняя правая кнопка нажата. Она включает режим отображения, предлагаемый Dreamweaver по умолчанию, — режим отображения страницы. В этом режиме вы можете работать с Web-страницей в режиме WYSIWYG. Теперь нажмем на среднюю кнопку, включающую режим отображения страницы и кода. На рис. 2.16 показано, что из этого получится.  Рис. 2.16. Режим отображения страницы и кода К  ак видите, окно документа разделилось на две части. В верхней части отображается HTML-код нашей страницы, а в нижней — сама страница в режиме WYSIWYG. Такой режим очень полезен, когда нужно "отшлифовать" код, при этом держа перед глазами саму Web-страницу. Вы можете перемещать мышью разделительную полосу, чтобы увеличить ту или иную часть окна.Рис. 2.17. Режим отображения кода Ну, а левая кнопка включает режим отображения кода (рис. 2.17). Для переключения режимов отображения вы также можете воспользоваться пунктами Design, Code and Design и Code меню View, соответственно. При выборе одного из этих пунктов слева от его названия появляется галочка, показывающая, что данный пункт и, следовательно, данный режим включены. Такие пункты называются переключателями, Просмотр Web-страницы Хоть Dreamweaver в режиме просмотра страницы и представляет ее почти в таком виде, как она будет показана в Web-обозревателе, все же часто возникает необходимость увидеть ее в самом Web-обозревателе. Давайте просмотрим в Internet Explorer нашу страничку, загруженную сейчас в окно документа. Для этого нажмем клавишу Есть еще два способа вызова Web-обозревателя для просмотра редактируемой страницы. Первый из них — использование кнопки Preview/Debug in Browser инструментария документа. Эта кнопка показана на рис. 2.31.  Рис. 2.31. Кнопка Preview/Debug in Browser Как видите, при нажатии этой кнопки появляется меню, предлагающее несколько пунктов. В данный момент нас интересует пункт Previews in iexplore. При выборе его, как вы уже поняли, открывается окно Internet Explorer, где будет загружена разрабатываемая вами страница. Второй способ вызвать Web-обозреватель — это использовать подменю Preview in Browser меню File. В нем вы увидите пункт iexplore, аналогичный вышеописанному. Выбрав его, вы получите тот же самый результат. Настройка Dreamweaver А сейчас самое время настроить наш Dreamweaver так, чтобы он нормально понимал русский язык. Вся работа будет происходить в многофункциональном окне настройки программы, состоящем из множества вкладок с разными элементами управления. Чтобы вызвать его, выберите пункт Preferences меню Edit или нажмите комбинацию клавиш Учим русский Выберем в списке вкладок пункт New Document. Окно настройки примет вид, показанный на рис. 2.35. Итак, что же здесь изображено?  Рис. 2.35. Вкладка New Document диалогового окна Preferences Но прежде чем начать разговор о русификации Dreamweaver, немного поговорим об особенностях национального Web-творчества. А именно о кодировках русского языка и борьбе с ними. Вероятно, вы знаете, что каждый символ, который может быть введен с клавиатуры и отображен на экране, имеет уникальный номер, называемый кодом символа. Совокупность таких кодов вместе с описанием, какой код какому символу соответствует, образует кодировку. Каждая кодировка имеет свое наименование. Современные программы Web-обозревателей поддерживают все доступные сейчас кодировки и корректно их распознают. Это первое. Второе: Web-сервер (точнее, его администратор) может потребовать, чтобы публикуемые вами странички были закодированы в какой-либо конкретной кодировке, например в КОИ-8. Это стоит иметь в виду, когда вы будете выбирать кодировку для своего Web-творения. Итак, какие же кодировки поддерживает Dreamweaver? (Имеются в виду, конечно же, русские кодировки.) Все они перечислены в табл. 2.4 и задаются с помощью раскрывающегося списка Default Encoding. Таблица 2.4. Кодировки русского текста, поддерживаемые Dreamweaver
Какую же кодировку выбрать? Ответ прост. Если вы не связаны какими-либо специфическими требованиями администратора Web-сервера, на котором будет опубликован ваш сайт, смело выбирайте пункт Windows-1251. В противном случае выберите ту кодировку, которую требует сервер. Если вы создаете странички на английском языке, ваш выбор — Western (Latinl). Теперь переключитесь на вкладку Fonts (рис. 2.36). На этой вкладке вы сможете настроить шрифты, которыми будет отображаться текст вашей страницы. В списке Font Settings выберите шрифтовой набор, который будет использован для отображения ваших Web-страниц. Здесь альтернатива еще проще: если текст русский — выбирайте Cyrillic, если английский — Western (Latinl).  Рис. 2.36. Вкладка Fonts диалогового окна Preferences Лабораторная работа №3 Тема: Создание и редактирование текстовой информации на web-странице Цель: научиться создавать html-документы. План
Создание новой Web-страницы Для этого нужно выбрать пункт New в меню File или нажать комбинацию клавиш Ввод текста Сейчас мы наберем наш первый текст в окне документа Dreamweaver (рис. 3.2). Набрав текст, сразу же сохраним его в файле под именем 3.1.htm. И поместите ее в отдельную папку — так будет проще управляться со всем нашим Web-хозяйством.  Рис. 3.2. Наш первый текст Одна из Web-страниц на Web-сервере задается в качестве страницы по умолчанию. Такая страница обычно носит имя default или index (и расширение htm или html). Но в данном случае мы пренебрегли этим соглашением, хотя наша первая страница так и просится быть страницей по умолчанию. Давайте назовем ее 3.1.htm Не беспокойтесь по поводу нарушения соглашений — это ненадолго. Форматирование абзацев Прежде всего, давайте сделаем нашей странице заголовок. (Имеется в виду не HTML-заголовок, а обычный заголовок, как у газеты.) Первой строкой как раз набрано "Здравствуйте" — она прекрасный кандидат в заголовки. Чтобы отформатировать текстовый абзац как заголовок, нужно воспользоваться редактором свойств, точнее, раскрывающимся списком форматов абзаца. Он показан на рис. 3.4. Пункт Paragraph этого списка форматирует текст как обычный абзац (отмечаемый тегом <Р>). Пункты Heading 1, ..., Heading 6 позволяют превратить его в заголовок, соответственно, первого, второго уровня и т. д. Пункт Preformatted превращает абзац в текст фиксированного формата, где форматирование задано не тегами HTML, а как в обычном тексте: отступы создаются пробелами, а разбиение на абзацы — символами возврата каретки и перевода строки. Это может быть очень полезно при выкладывании в Сеть больших текстовых документов, созданных в старых текстовых редакторах, без сложного HTML-форматирования.  Рис. 3.4. Раскрывающийся список форматов абзаца, находящийся в редакторе свойств  Рис. 3.5. Созданный нами заголовок Примечание Заголовки создаются парными тегами |
Похожие:
 | Основная образовательная программа подготовки специалиста по специальности (специальностям) | | Основная образовательная программа подготовки специалиста по специальности (специальностям) |
| «Специальная дошкольная педагогика и психология» с дополнительной специальностью «Логопедия» | | Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования |
| Автор – составитель программы: Т. Д. Тегалева, старший преподаватель кафедры социальной работы и организации работы с молодёжью | | Россия, научить оценивать и прогнозировать происходящие в мире процессы, а также процессы, происходящие в его субрегионах, странах... |
| Целью преподавания дисциплины является ознакомление студентов с понятием информационные ресурсы, общей характеристикой процессов... | | Цель курса: обучение студентов ведению бухгалтерского учета в системе 1С: Предприятие, обучение программированию в системе 1С: Предприятие,... |
| Автор программы: старший преподаватель кафедры иностранных языков и методики преподавания Квасюк Е. Н | | Рецензенты: Беличенко Е. А., к ф н., доцент зав каф англ языка и английской филологии мгпу |