Для всех учителей из 37 347 образовательных учреждений по всей стране

Скидка до 75% на все 778 курсов

Выбрать курс
Получите деньги за публикацию своих
разработок в библиотеке «Инфоурок»
Добавить авторскую разработку
и получить бесплатное свидетельство о размещении материала на сайте infourok.ru
Инфоурок Информатика Другие методич. материалыСОЗДАНИЕ ВЕБ-СТРАНИЦУ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ DREAMWEAVER.

СОЗДАНИЕ ВЕБ-СТРАНИЦУ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ DREAMWEAVER.

библиотека
материалов

Лабораторная работа


СОЗДАНИЕ ВЕБ-СТРАНИЦУ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ DREAMWEAVER.

Цель: Освоение базовых принципов создания Web-сайтов. Создание первой простой Web-страницы, содержащей отформатированный текст, рисунки и гиперссылки.

В результате выполнения лабораторной работы студенты должны изучить основные принципы создания Web-сайтов, познакомиться с часто используемыми тегами HTML (Hypertext Markup Language – "язык разметки гипертекста"), изучить вкладки программы Adobe Dreamweaver для быстрого обращения и применения к отдельным элементам Web-страниц, уяснить причину неправильного отображения отдельных компонент сайта и овладеть навыками их быстрого устранения.

В конце лабораторной работы студенты должны создать не менее двух страниц, содержащих отформатированные фрагменты текстов, несколько рисунков и ссылок на свои страницы и другие ресурсы Интернета.

Задание на лабораторную работу

1. Изучить базовую структуру статической страницы.

2. В текстовом редакторе (Блокноте) создать первую страницу с текстом "Моя первая страница".

3. Познакомиться с основными тегами и их параметрами (атрибутами), определяющими структуру и стиль страницы.

4. Изучить теги, задающие гиперссылки и их параметры.

5. Познакомиться с тегами и их атрибутами, с помощью которых добавляются изображение и другие мультимедийные компоненты.

6. Изучить вкладки программы Adobe Dreamweaver и создать страницу my_name_1.html (вместо “my_name_1” используйте свое имя, например, “elina_1”), содержащую отформатированный текст, несколько изображений и ссылок на различные ресурсы Интернет, в том числе на сайт РГГУ – http://www.rsuh.ru.

7. В папке, содержащей файл my_name_1.html, создать папку со своим именем, а в этой папке – страницу my_name_2.html, содержащую отформатированный текст, вашу краткую автобиографию, несколько изображений, ссылку на первую страницу, а также закладку на начало страницы my_name_1.html.

8. Создать ссылку со страницы my_name_1.html на my_name_2.html и наоборот.

1. Введение

HTML - Hyper Text Markup Language, язык разметки гипертекстовой информации Тег – это элемент HTML, заключенный в угловые скобки. Первым тегом всегда является тег , а последним - . Эта пара тегов Web-обозревателю сообщает, что между ними заключен документ в формате HTML.

Сразу после тега <HTML> идет тег <HEAD>. Как правило, между тегами <HEAD> и HEAD> рекомендуется указывать информацию о документе: название, ключевые слова для поиска, описание и т.д. Название HTML документа помещается между тегами <TITLE> и TITLE>. Тело документа начинается тегом <BODY>.

Итак, создадим самую простую страницу с выражением “My first page”. Для этого в блокноте создайте файл под своим именем (например, “elina.htm). Напомним, что блокнот создает файл с расширением .txt. Вам придется поменять расширение файла.

Откройте этот файл с помощью блокнота. Наберите нижеприведенный фрагмент и сохраните его.


Тест-страница

My first page!

h1>

body>

html>

Посмотрите свою первую страницу с помощью Internet Explorer.


2. Знакомство с основными тегами HTML

Атрибуты тела документа

Определяет видимую часть документа
Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB - пример: FF0000 - красный цвет.
<body text="blue"> Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB - пример: 000000 - черный цвет.
Устанавливает цвет гиперссылок, используя значение цвета в виде RRGGBB - пример: 00FF00 - зеленый цвет.
Устанавливает цвет гиперссылок, на которых вы уже побывали, используя значение цвета в виде RRGGBB - пример: 333333 - серый цвет.
Устанавливает цвет гиперссылок при нажатии.


Теги для форматирования текста

Тег «знак меньше и восклицательный знак» (например, ) означает, что текст является комментарием и web-обозревателем не будет отражаться.

 Обрамляет предварительно отформатированный текст. 

Создает САМЫЙ БОЛЬШОЙ заголовок.
Создает самый маленький заголовок.
Создает жирный текст.
Создает наклонный текст.
Создает текст - имитирующий стиль печатной машинки.
Используется для цитат, обычно наклонный текст.
Используется для выделения из текста слова (наклонный).
Используется для выделения наиболее важных частей текста (наклонный или жирный текст).
Устанавливает размер текста в пределах от 1 до 7.
Устанавливает цвет текста, используя значение цвета в виде RRGGBB. (см. файл color.htm).


Форматирование

p> Cоздает новый параграф.

- Выравнивает параграф относительно одной из сторон документа, значения: left, right, или center.


Вставляет перевод строки.

Создает нумерованный список.

Определяет каждый элемент списка и присваивает номер.

Создает ненумерованный список.

Предваряет каждый элемент списка и добавляет кружок или квадратик.

AAAAAAAAAdiv> Важный тег, используемый для форматирования больших блоков текста. HTML документа, также используется в таблицах стилей.


Гиперссылки
Наш Университет Создает гиперссылку на другие документы или часть текущего документа.
Письмо другу Создает гиперссылку вызова почтовой программы для написания письма, например, drugu@rambler.ru.

Я здесь Отмечает часть текста как цель для гиперссылок в документе (куда).
Ты где? Создает гиперссылку на часть текущего документа (откуда).

Параметры “_blank”, “_parent”, “_topи “ _self” тега ссылки задают вид загрузки открываемой страницы (в виде окна, на весь экран и т.п.).


Графические элементы
name Добавляет изображение в HTML документ.
namecenter ”> Выравнивает изображение к одной из сторон документа, принимает значения: left, right, center, bottom, top, middle.
name“1”> Устанавливает толщину рамки вокруг изображения.


3. Создание страниц с помощью “Adobe Dreamweaver”

Загружаем программу “Adobe design premium - Dreamweaver”. В ней создаем новый файл следующим образом:

В меню “Файл” выбираем опцию “Создать”. На открывающейся панели выбираем HTML.

  1. Нажав на кнопку “Разделение”, разделите экран на два окна (если эта вкладка не активна).

  2. В созданной странице находим строку <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

В конце строки после знака “=” строку “ utf-8” меняем на windows-1251” (это желательно, но не обязательно).

Таким образом, Вы должны получить <meta http-equiv="Content-Type" content="text/html; charset= windows-1251" />.

Это нужно для того, чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы. Для операционной системы Windows и кириллицы аргумент charset может принимать значение windows-1251. Если указание кодировки отсутствует, браузер пытается сам определить, какой тип символов используется в документе и выбирает необходимую кодировку автоматически. Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях предлагает "неизвестную" кодировку вместо кириллицы. Хотя почти всегдаutf-8” справляется c этой задачей.

Если Вы будете копировать фрагмент HTML тегов из Worda, то обратите внимание на кавычки. Они должны быть такими, как в Dreamweaver!!!

  1. Если “Dreamweaver автоматически не показывает панели “Свойства” и “Вставка” (панель “Свойства” находится внизу, а “Вставка” – как обычно, наверху), поставьте их, выбрав в меню “Окно” опции “Свойства” и “Вставка”.

  2. Все, что покажет браузер, должно находиться между тегами <body> и body>. Основные параметры страницы определяются в теге <body> (Тег body> указывает на конец страницы и,его не трогаем!). Как Вы уже заметили, теги пишутся внутри угловых скобок “<” и “>”.

  3. Находим строку <title>Документ без названияtitle>. Вместо текста Документ без названия наберите название страницы (не путайте с названием файла!), например, “Моя первая страница”. Вы получите: <title> Моя первая страница title>.

  4. Теперь определим шрифт текста Вашей будущей страницы. Это можно сделать следующим способом: в теге <body> сразу после слова “body и перед скобкой “>” нажимаем на пробел. Выскочит меню с атрибутами тега <body>. Выберите style. Далее нажмите на Enter. Выберитеfont” и “‘Times New Roman’, Times, serif”. У вас должна получиться строка .

  5. Строка 'Times New Roman' должна заключаться в апострофы.

  6. Сохраняем страницу под Вашим именем (например, elina_1.html) в папке, где находятся файлы данной лабораторной работы, т.е. в glava_6.

В названиях файлах не используйте: пробелы, точки, кириллицу, тире, символы “(“ и “)”. Вместо дефиса “-” лучше используйте знак подчеркивания “_”.

Вы, наверное, заметили, что в верхнем окне набираются коды с тегами, а внизу отображается результат.

  1. После строки нажмите наEnter”. Наберите текст начало страницы и сразу же добавьте тег <br> наберите текст: Моя Первая страница Наш Университет Российский Государственный Гуманитарный Университет.



hello_html_2c1174bd.png

Рис.1

  1. Находясь в верхнем окне (Код) нажмите на “Enterпосле выражения Моя Первая страница. Перейдя в нижнее окно, вы не заметите никакого изменения. А теперь строку Наш Университет выделите как отдельный абзац. Для этого перед этой строкой добавьте тег <p>, а после нее - p>. Посмотрите результат в нижнем окне. Аналогичную операцию выполните для строки Российский Государственный Гуманитарный Университет, т.е. с обоих сторон добавьте теги <p> и p>, соответственно.

  2. Для форматирования строки, например, Наш Университет, в соответствии с Рис.1 можно использовать следующий способ:

На панели “Свойства” если не отмечена вкладка “CSS” (находится под “<>HTML), то отметьте ее. Выделите текст Моя Первая страница. Используя меню “Целевое правило=>Создать встроенный стиль” отформатируйте текст так, как это приведено на Рис.1 (фрагмент прижат к левой границе документа). Для переопределения стиля данной строки достаточно курсором отметить эту строку (т.е. не нужно выделять всю строку) и задать другие параметры. Аналогично, с помощью меню “Целевое правило=>Создать встроенный стиль” отформатируйте строки Наш Университет и Российский Государственный Гуманитарный Университет в соответствии с Рис.1.

  1. А теперь с помощью каскадных таблиц стилей (CSS - Cascading Style Sheets) определим стиль для заголовка произвольного текста. В конце страницы перед body> наберите текст “<p>Стиль Заголовкаp>”. Выделите строку “Стиль Заголовка” и на панели “Свойства” выберите “Целевое правило => Создать правило CSS”. При определении атрибутов данной строки (размер, цвет или же стиль фонта и т.п.) программа предложит вам создать стиль. Назовите этот стиль, например, как nash_style. Для выделенного фрагмента определите следующий стиль: размер – 24 px; цвет – синий; стиль фонта – жирный и наклонный.

  2. Убедитесь, что “Целевое правило” содержит введенный вами стиль.


4. Добавление изображения

В верхнем окне в конец страницы с помощью тега <img src="rggu.jpg" > добавьте изображение “rggu.jpg (находится в текущей папке)

После рисунка добавьте следующий текст: «Профессорско-преподавательский состав Университета насчитывает более 700 штатных преподавателей и около 400 совместителей, - специалистов из учреждений РАН, вузов Москвы и других научных учреждений. В РГГУ работают 70 академиков и членов-корреспондентов российских и иностранных академий, 214 докторов, 573 кандидата наук. Сегодня в структуре РГГУ работают: 12 институтов, в том числе 4 научно-исследовательских, 18 факультетов, 7 общеуниверситетских учебно-научных и научных центров, 11 международных учебно-научных Центров. В рамках специальностей осуществляется ряд уникальных специализаций - таких, как, например, памятники письменности Древней Руси; историческая антропология (совместно с Францией); еврейские языки, культура, тесты, архивы (совместно с США), история и культура Швеции (совместно со Шведским институтом), античная культура; история и филология Древнего Ближнего Востока, международное информационное право, социология маркетинга, политический и бизнес PR, реклама, и др.»

Теперь, находясь в окне дизайна (нижнем), сразу после изображения “rggu.jpg добавьте изображение “ipu.jpg (файл находится в текущей папке). Для этого в меню “Вставка” программы Dreamweaver выберите Изображение. Далее найдите файл в папке и добавьте его на страницу.

  1. Сравните строку <img src="ipu.jpg" width="250" height="180"> с предыдущей строкой rggu.jpg. В верхнем окне в тег rggu.jpg добавьте атрибут alt="наша школа" (rggu.jpgalt="наша школа" >). После последней кавычки и перед скобкой “>” нажмите на пробел. Вы увидите атрибуты тега <img>. Из списка выберите align, далее - left”. Аналогичную операцию выполняем для второго рисунка и вместо left ставим right”.

  2. Сохраните текст. Посмотрите результат с помощью “Internet Explorer”, нажав на значок «глобус» на панели “Dreamweaver(см. рисунок).

  3. В конец страницы, т.е. перед тегом body> добавьте горизонтальную линию след. образом: <hr color="#CC3300" size="4" width="92%">

  4. В теге <body > (в начале страницы) поставьте пробел после слова “body(сразу после буквы “у”) и в раскрывающемся меню выберите параметр “background” для фоновой картинки вашей страницы. Далее нажав на “Обзор”, выберите файл "log.jpg". Посмотрите результат действия в нижнем окне.


5. Ссылки

  1. В текущей папке т.е. в glava_6, содержащей файлы данной лабораторной работы, создайте папку со своим именем (например “elina”).

  2. Создайте еще одну страницу в редакторе “Dreamweaver”.

Повторите пункты 1 и 6 из третьего раздела, т.е. определите charset=windows-1251” и фонт шрифта. В качестве цвета фона выберите, например, цвет khaki” (код цвета – “#F0E68C”) следующим образом: в теге <body > (в начале страницы) поставьте пробел после слова body и в раскрывающемся меню выберите параметр “bgcolorи задайте нужный вам цвет для фона, т.е. цвет хаки.

  1. На этой странице красным цветом и крупным шрифтом наберите текст Это моя вторая страница<br>. Напомним, что здесь <br> указывает на перевод строки, т.е. начало новой строки.

  2. Назовите ее также своим имением, но с добавлением к названию «2» (например, “elina_2.html”) и сохраните в папке, которую Вы только что создали в пункте 1.

Убедитесь, что Вы правильно выполнили предыдущий пункт, т.е. пункт 4.

  1. Со второй страницы создайте ссылку на первую следующим образом: в верхнем окне после выражения Это моя вторая страница<br> наберите текст

Моя первая страница<br>.

Понятно, что вместо elina_1.html нужно указать название своего файла. Также обратите внимание на расширение файла: если файл был создан с расширением .html, значит, при ссылке на этот файл нужно указать именно такое расширение, а не .htm.

  1. Сохраните данную страницу.

  2. Перейдите в конец первой страницы. С помощью меню “Вставка - Гиперссылка или же ярлыка “ Гиперссылка ” в “Dreamweaver(см. Рис.2) создайте ссылку на вторую страницу следующим образом: перед тегом body> наберите строку <br>Моя вторая страница.


hello_html_m5724bb80.jpg

Рис.2


  1. Выделив выражение Моя вторая страница, нажмите на значок “Гиперссылка” (он находится наверху слева, в группе ярлыков меню “Вставка”). Вы увидите меню с пунктами “Текст”, “Ссылка”, “Целевой объект” и т.п. (см., Рис.3). Заполните его следующим образом.

hello_html_m5aa0b9d1.jpg

Рис.3


  1. В качестве параметра “Целевой объект” выберите ключ “_blank”. После строки Моя вторая страница добавьте тег <br> - начало новой строки.

  2. Создайте закладку на самой первой строке "начало страницы" Вашей первой страницы следующим образом:

Строку "начало страницы" замените строкой <a name="ayay">начало страницыa>.

В конце этой, т.е. первой страницы перед тегом body> с новой строки наберите:

<a href="#ayay"><br>Где начало страницыa>.

  1. Перейдите на вторую страницу! В конце этой страницы с новой строки наберите:

<p><a href="../elina_1.html#ayay"><br>Где начало моей первой страницыa>p>.

  1. На второй странице создайте ссылку на сайты Института проблем управления – www.ipu.ru и вашего Университета www.rsuh.ru следующим образом:

ris3.jpg

<a href ="http://www.ipu.ru/">Институт проблем управления РАНa><br>

  1. Сохраните оба файла и проверьте ссылки и закладки.

  2. Ознакомьтесь со следующим методом ссылки на фрагмент рисунка. Убедитесь, что файл ipu.jpg также находится в текущей папке.

hello_html_m4f333ae8.jpg

Рис.4

  1. Создайте ссылку на фрагмент рисунка rggu.jpg Вашего Университета (этот рисунок находится на Вашей первой странице). Например, сделайте так, чтобы при нажатии на дерево открылся сайт Вашего Университета.


Дополнительные вопросы


  1. Что такое HTML? В чем разница между статическими и динамическими страницами?

  2. Какие программы используются для разработки Web-страниц? Какие недостатки у программы MS OfficeFrontPage?

  3. Перечислите все параметры (атрибуты) тега <a href ...>? С помощью какого параметра новая страница, открываемая по ссылке, загружается во весь экран?

  4. Для чего используются ключи _blank, _parent, _top, _self параметра <target> тега

<a href>?

  1. Приведите все параметры тега <img src=""...>. Что нужно сделать, чтобы браузер пропорционально отображал уменьшенное изображение, размеры которого заранее не известны?

  2. Как создается ссылка на фрагмент рисунка? Покажите на примере.

  3. Укажите основные преимущества программы Adobe Dreamweaver.

  4. Какие стандартные шаблоны (страницы) создается с помощью программы Dreamweaver?

  5. Какие метатеги служат для правильного распознавания языка страницы браузером?

  6. Какие метатеги помогают подняться к верхним строчкам рейтинга поисковых серверов?

  7. Является ли достаточным условием правильное описание ключевых слов, чтобы быть в центре внимания поисковых машин? Почему?

  8. Какие еще факты влияют на успешное индексирование ваших страниц поисковыми машинами?

  9. Что вы знаете о PageRank?


Курс повышения квалификации
Курс профессиональной переподготовки
Учитель информатики
Курс профессиональной переподготовки
Педагог-библиотекарь
Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:
также Вы можете выбрать тип материала:
Краткое описание документа:

Для надежной ЗИ необходима комплексная реализация всех перечисленных механизмов. Некоторые из них могут быть реализованы в более полной мере, другие – нет. Защита ИС в первую очередь зависит от реализации механизма идентификации и аутентификации.

Аутентификация бывает односторонней (обычно субъект доказывает свою подлинность системе) и двусторонней (взаимной).

Надежная идентификация и аутентификация затруднена по целому ряду причин.

  • В ИС между сторонами может не существовать доверенного маршрута; это значит, что в общем случае данные, переданные субъектом, могут не совпадать с данными, полученными и использованными для проверки подлинности.
  • Почти все аутентификационные сущности можно узнать, украсть или подделать.
  • Имеется противоречие между надежностью аутентификации, с одной стороны, и удобствами субъекта с другой. Так, из соображений безопасности необходимо с определенной частотой просить пользователя повторно вводить аутентификационную информацию.

Чем надежнее средство защиты, тем оно дороже

Проверен экспертом
Общая информация
Учебник: «Информатика (базовый уровень)», Семакин И.Г., Хеннер Е.К., Шеина Т.Ю.
Тема: § 13. Инструменты для разработки web-сайтов

Номер материала: ДБ-1155781

Вам будут интересны эти курсы:

Курс повышения квалификации «Табличный процессор MS Excel в профессиональной деятельности учителя математики»
Курс повышения квалификации «Информационные технологии в деятельности учителя физики»
Курс повышения квалификации «Внедрение системы компьютерной математики в процесс обучения математике в старших классах в рамках реализации ФГОС»
Курс повышения квалификации «Организация работы по формированию медиаграмотности и повышению уровня информационных компетенций всех участников образовательного процесса»
Курс профессиональной переподготовки «Информатика: теория и методика преподавания в образовательной организации»
Курс повышения квалификации «Облачные технологии в образовании»
Курс повышения квалификации «Сетевые и дистанционные (электронные) формы обучения в условиях реализации ФГОС по ТОП-50»
Курс повышения квалификации «Развитие информационно-коммуникационных компетенций учителя в процессе внедрения ФГОС: работа в Московской электронной школе»
Курс повышения квалификации «Специфика преподавания информатики в начальных классах с учетом ФГОС НОО»
Курс повышения квалификации «Современные языки программирования интегрированной оболочки Microsoft Visual Studio C# NET., C++. NET, VB.NET. с использованием структурного и объектно-ориентированного методов разработки корпоративных систем»
Курс повышения квалификации «Применение интерактивных образовательных платформ на примере платформы Moodle»

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

Репетиторы онлайн

✅ Подготовка к ЕГЭ/ГИА
✅ По школьным предметам

✅ На балансе занятий — 1

Подробнее