Учебное пособие издается по решению Редакционно-издательского совета Санкт-Петербургского государственного университета культуры и искусств

Скачать 413.68 Kb.

Название	Учебное пособие издается по решению Редакционно-издательского совета Санкт-Петербургского государственного университета культуры и искусств
страница	2/2
Тип	Учебное пособие

filling-form.ru > бланк резюме > Учебное пособие

1 2

структурные тэги области заголовка и тела страницы. Для справки открыть предварительно скопированный в свою папку файл …/Tutorial.htm.

5. Сохранить модифицированную веб-страницу в папке HTML-2 как файл с именем Web-страница ФамилияИмя.htm.

Внимание! Во избежание потери данных при сбоях формируемый файл время от времени сохранять в той же папке.

6. Перейти в окно браузера, открыть файл (Файл/Открыть/Обзор).

7. Перейти в Блокнот. Вставить между тэгами области заголовка тэги , между ними написать название страницы. Сохранить файл.

8. Перейти в браузер, обновить изображение страницы (Вид/Обновить или кнопка Обновить или F5). Посмотреть, где в окне браузера отобразилось название страницы.

Внимание! Все дальнейшие изменения просматривать таким же образом.

9. В открывающем тэге области основного текста страницы (тела веб-документа) задать цвет фона и текста. Для задания цвета использовать текстовый формат: red, green, blue, yellow, black, white и т.д.

10. Между тэгами области основного текста вставить заголовки

1-го уровня: Фамилия Имя;

2-го уровня: Биографическая справка, Профессиональные интересы, Хобби.

11. В разделе Биографическая справка вставить текст, задавая переход на новую строку: Дата рождения: дд.мм.гг., Место Рождения: …, Адрес: г. … ул. …д. …, Телефон:000-00-00, Е-mail: aaa@bbb.ccc.

12. В разделе Профессиональные интересы написать текст, отформатировав его аналогичным образом, например: Работаю:…Учусь на факультете… Специальность:… Специализация:… Владею иностранным языком:…Имею опыт:… Особые умения:… Хочу получить работу:…

13. В разделе Хобби создать несколько разделов в виде маркированного списка, например:

Спорт;

Искусство;

Рукоделия.

14. Запустить Word. Cоздать в своей папке файлы: Спорт.html, Искусство. html, Рукоделия. html, кратко написав в них о своих увлечениях.

15. Слова раздела Хобби сделать гиперссылками на одноименные файлы.

16. Сохранить полученную страницу. Закрыть созданные файлы. Проверить работоспособность ссылок в браузере.

17. В конце раздела вставить картинку, предварительно выбрав или в папке Мои документы/Мои рисунки (или Пуск/Найти) и сохранив как файл в своей папке.

18. Запустить графический редактор. Нарисовать стилизованный автопортрет и сохранить его в своей папке. Вставить это изображение после заголовка 1-го уровня, указав параметры размеров, выравнивание и др.

19. Сохранить последний раз полученную страницу. Предъявить работу преподавателю.

4.3. Создание простейшего мини-сайта (HTML-3)

С помощью инструмента, заданного преподавателем (редактор Блокнот и язык HTML, веб-редакторы – FrontPage, FrontPage Express, Netscape Composer. DreamWeaver и др., текстовый процессор Word) создать мини-сайт – совокупность связанных файлов (веб-страниц).

Структура сайта следующая:

Файл poet.htm
Заглавие документа (гиперссылка на Заглавие Текста2) ()
Таблица: Портрет____ Ф.И.Тютчева Текст1 (файл photo1.jpg) (файл article) (гиперссылка на п-т Мерзлякова				Файл photo2.gif Портрет А.Ф.Мерзлякова (файл photo2)
Заглавие 2-го уровня (гиперссылка на Текст3) Текст2 (файл bio)
Горизонтальная черта Текст4 (файл groza)				Файл about.htm Текст3 (гиперссылка на Текст4)

Содержание работы:

1. В своей папке создать папку лабораторной работы HTML-3. Скопировать в нее все файлы из папки, указанной преподавателем (HTML_ТЮТЧЕВ).

2. Открыть файл аrticle.txt. Задать кодировку “Кириллица Windows-1251”. Сохранить его в как файл (Web-страницу) poet.htm в своей папке. Название страницы (заголовок – поле title) изменить на Great Russian Poet F.Tutchev.

Внимание! Во время работы во избежание потери данных при сбоях формируемые файлы время от времени сохранять.

3. Запустить браузер Internet Explorer, загрузить (открыть) сохраненный файл poet.htm, просмотреть его. Вернуться в окно редактора.

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

4. Слова “Поэтическое наследие Тютчева” сделать заглавием, выделив в отдельную строку, оформить их как заголовок 1-го уровня.

5. Задать цвет фона (серый) и цвета ссылок (непросмотренные – красный, просмотренные – синий, наведенные – фиолетовый).

6. Под заголовком создать таблицу из двух столбцов и одной строки. Задать рамку вокруг таблицы толщиной 5 пикселей (4,5 пт.), цвет темно-синий (Word: Таблица – Свойства таблицы – Границы и заливки – Рамка – Ширина., Цвет). Установить промежуток между столбцами 10 пикселей (0,25 см) (Word: Таблица – Свойства таблицы – Параметры – Интервал между ячейками 1 пт.). Цвет ячеек таблицы сделать желтым.

7. Поместить в левую часть рисунок photo1.jpg (портрет Тютчева), изменив его размеры до 300 пикселей в высоту, выровнять его по центру ячейки. Задать альтернативное текстовое имя (alt=”Ф.И.Тютчев”).

8. В правый столбец переместить остальной текст статьи и отформатировать его (фонт Arial, размер 12).

9. К фрагменту текста “А.Ф.Мерзляков” вставить thumbnail (миниатюру) портрета А.Ф.Мерзлякова шириной в 35 пикселей (Вставка-Гиперссылка” или тег <A>) и от него сделать гиперссылку на полноразмерный портрет (файл photo2.gif), используя для этого инструмент “Вставка-Гиперссылка” или тег <A>”.

10. Ниже таблицы вставить горизонтальную линию и текст биографической справки о Тютчеве (файл: bio.txt) и отформатировать его (Заголовок – стиль 2-го уровня, подчеркнуть, текст шрифтом Times Roman, размером 14).

11. Ниже текста биографической справки вставить горизонтальную линию размером 5 см и текст стихотворения “Гроза…” (файл: groza.txt).

12. Текст стихотворения отформатировать (Заголовок – стиль 3-го уровня, каждая строфа –– отдельный абзац, выровненный влево, шрифт – Courier, текст – размером 12, начертание – курсив, дату под стихотворением выровнять вправо).

13. Вставить закладку № 1 (тег с атрибутом name) на Заголовок биографической справки о Тютчеве (“Вставка-Закладка” или “Правка-Закладка”).

14. Вставить закладку № 2 (тег с атрибутом name) на начало стихотворения “Гроза…” в файле poet.htm.

15. Сделать гиперссылку из заглавия от слова “Тютчев”, на закладку № 1 (начало биографической справки), используя для этой цели инструмент гиперссылки, указав в качестве адреса имя закладки.

16. Сделать гиперссылку из текста биографической справки от слов “символический параллелизм и космические мотивы” на файл about.htm.

17. Из файла about.htm от слов первой строфы стихотворения (“Люблю грозу в начале мая,//Когда весенний, первый гром,//Как бы резвяся и играя//Грохочет в небе голубом”) сделать гиперссылку на текст данного стихотворения в файле poet.htm (закладка № 2).

18. В последний раз сохранить веб-страницу как файл poet.htm. Проверить оформление веб-страниц и работоспособность ссылок в браузере. Предъявить работу преподавателю.

4.4. Формы (HTML-4)

С помощью инструмента, заданного преподавателем (редактор Блокнот и язык HTML, веб-редакторы – FrontPage, FrontPage Express, Netscape Composer. DreamWeaver и др., текстовый процессор Word) создать форму (веб-страницу) для отправки личных данных.

Содержание работы:

1. В своей папке создать папку лабораторной работы HTML-4. В ней создать файл form.htm.

2. Присвоить форме имя pers_data. Озаглавить веб-страницу как Résumé (элемент title). Задать кодировку “Кириллица Windows-1251”. Цвет фона страницы – светло-зеленый.
Форма должна быть переслана методом post по адресу электронной почты informatika21@yandex.ru (атрибут action тега form). Форма состоит из нескольких разделов, разделенных отцентрированной горизонтальной линией шириной 80% и толщиной 2 пикселя с затенением. Разделы включают названия полей и собственно поля ввода данных формы. Названия разделов – заголовки уровня 2, по центру, шрифт Arial, размер шрифта 14. Названия подразделов – шрифт Times Roman, размер шрифта 12, начертание курсив.

3. Заголовок Resume повторить на самой веб-странице по-русски (Резюме), оформив его как заголовок уровня 1, по центру, с подчерком, размер шрифта 18.

4. Создать текстовое однострочное поле типа пароль (тег input, type=password) (длина поля 10 знаков, значение по умолчанию guest, максимальная длина вводимого пароля 7 символов), присвоив ему название “Введите пароль:” (слева от поля ввода, красным цветом). Название поля и поле для ввода пароля выровнять по центру. После этого вставить разделитель – горизонтальную линию толщиной 5 пикселя красного цвета.

5. Первый раздел формы озаглавить Личные данные. В первом разделе поместить следующие три текстовых однострочных поля (с названиями):

Имя, Фамилия, Отчество (текстовые поля, ширина 30, максимальная ширина 40);
Пол (кнопки-переключатели (поля выбора));
Семейное положение (открывающееся меню) (значения подбирают студенты);
Дата рождения:
число (текстовое поле ввода),
месяц (поле типа меню, варианты выбора: январь-декабрь (значения: 1-12)),
год (поле типа меню, варианты выбора и значения: 1975-1985).
Несмотря на разные типы полей, начальный вид полей оформить единообразно в виде трех окон: число месяц год

6. Во втором разделе с заголовком Профессиональные данные поместить поля со следующими названиями:

Образование (меню из 4 пунктов: среднее, среднее специальное, незаконченное высшее, высшее; по умолчанию – высшее);

Опыт работы (текстовое многострочное поле ввода (окно) высотой четыре строки и шириной 80 колонок);

Языки программирования (6 вариантов: Fortran, VBasic, C++. Java, Pascal, Ada) (поля флажки);

Иностранные языки (4 пункта) (поля флажки).
Оформить поля иностранных языков и языков программирования как таблицы, в ячейки которых поместить названия языков и флажки выбора.

Хобби, дополнительная информация (текстовое многострочное поле ввода (окно) высотой три строки и шириной 80 колонок).

7.Третий раздел озаглавить Отправка данных. В разделе поместить две кнопки: Переслать и Ввести заново. Расположить их по центру страницы на одном уровне на расстоянии пять пробелов.

8. Сохранить последний раз полученную страницу. Предъявить работу преподавателю.

4.5. Фреймы (HTML-5.)

1. Создать в папке лабораторной работы HTML-5 файлы веб-страницы frame_lab#10, состоящей из 3 фреймов. Вначале разбить экран на два вертикальных столбца (20 и 80 процентов соответственно; боковые поля 4 пиксела). Затем, используя вложенную структуру FRAMESET, разделить второй столбец на две горизонтальных части, так чтобы первая (верхняя) была в два с половиной раза больше второй. Задать атрибут, определяющий наличие полос прокрутки во фреймах только при их необходимости, и разрешить изменение размеров фреймов. Фреймы поименуем слева направо и сверху вниз как А, Б и В.

2. Создать файл веб-страницы с заголовком (крупными цветными буквами) “Великие русские поэты” (№ 1).

3. Создать страницу – маркированный список со ссылками на файлы, посвященные нескольким русским поэтам (Пушкин, Лермонтов, Тютчев, Блок, Маяковский и т.д.) (№ 2).

4. Создать страницу с содержанием Page is under construction и соответствующим рисунком (№ 3).

5. Скопировать в папку данной работы файлы мини-сайта “Тютчев” из предыдущей лабораторной работы. Если нет, создать хотя бы одну страницу, посвященную какому-либо поэту с двумя ссылками с нее на другие файлы (файл poet.htm и другие – обобщенно № 4).

6. Первоначально во фрейм А поместить страницу № 2, во фрейм Б поместить страницу № 1, фрейм В оставить пустым.

7. Веб-страницы, посвященные поэтам (№ 4) и загружаемые по ссылкам из фрейма A, отображать во фрейме Б. В случае, если страница какого-либо поэта отсутствует, сделать ссылку на страницу № 3.

8. Файлы по ссылкам со страницы № 4 загружать во фрейм В (на странице о Тютчеве это ссылки на портрет А.Ф.Мерзлякова и на файл bio.htm).

9. Сохранить последний раз полученную страницу. Предъявить работу преподавателю.

Краткая информация.

Фреймы определяются тэгом FRAMESET, который для Web-страниц, использующих фреймы, употребляется вместо тэга BODY. Тэг FRAMESET имеет два параметра ROWS и COLS. Параметры ROWS и COLS состоят из списка значений, заключенных в кавычки и разделенных запятой. Эти параметры определяют структуру фрейма (кол-во горизонтальных и вертикальных фреймов (кадров)) и их размер. Размеры могут задаваться тремя способами:

с помощью пикселей (напр.,"140, 297", в данном случае соответствующие элементы будут иметь ширину (или длину) 140 и 297 пикселей);
с помощью процентных соотношений (“40%, 35%, 25%”) относительно общей величины экрана;
или же с помощью относительных единиц (“*, 6*, 3*”), в этом случае складываются все звездочки и величина фреймов определяется как соответствующая часть от величины экрана (1/10, 6/10, 3/10).

Внутри контейнеров FRAMESET с помощью тэга FRAME определяются соответствующие фреймы, заданные параметрами ROWS и COLS (заметим, что тэг FRAME является одиночным тэгом и не требует закрывающего тэга). Необходимо написать столько тэгов FRAME, сколько одиночных фреймов было определено в тэге FRAMESET.

Тэг FRAME имеет 6 атрибутов:

SRC – URL документа, отображаемого в этом фрейме;

NAME – имя фрейма, используется при обращении к этому фрейму;

MARGINWIDTH – величина полей между фрэймами по горизонтали;

MARGINHEIGHT – величина полей между фрэймами по вертикали;

SCROLLING – отображение полей прокрутки (“Yes”, “No”, “Auto”);

NORESIZE – запрещает пользователю изменять величину фреймов.

Вместо тэга FRAME можно задать контейнер FRAMESET, который будет определять дальнейшее разбиение данного фрейма на несколько более мелких (по горизонтали или по вертикали). Соответственно подокна внутри данного фрейма описываются своими тэгами FRAME. И т.д.

Если требуется, чтобы веб-страница по ссылке из какого-либо фрейма открывалась не в нем самом, а в окне другого фрейма, то используется атрибут TARGET тэга A. Его значение устанавливается равным имени фрейма, в котором следует открыть ссылку (т.е. значению атрибута NAME тэга FRAME, куда должна загружаться вызываемая страница). Для некоторых специальных ситуаций используются зарезервированные имена фреймов.

Содержание

ББК 73 3

СПбГУКИ. 13.11.2003. Тир.100. Зак.

1 2

	Учебно-методическое пособие Улан-Удэ Печатается по решению редакционно-издательского совета Восточно-Сибирского государственного технологического университета		Нижний Новгород, 2005 Печатается по решению редакционно-издательского... Печатается по решению редакционно-издательского совета гоу нижегородского государственного лингвистического университета им. Н. А....
	Научно-исследовательский институт проблем физической культуры и спорта ...		Адыгской народной педагогики Печатается по решению редакционно-издательского совета Адыгейского государственного университета
	Спорные тексты сми Печатается по решению редакционно-издательского совета Мурманского государственного педагогического университета		Сборник научных статей Печатается по решению редакционно-издательского совета Мурманского государственного педагогического университета
	Сборник научных статей Печатается по решению редакционно-издательского совета Мурманского государственного педагогического университета		Дневни к учебно-ознакомительной практики Печатается по решению редакционно-издательского совета Мурманского государственного педагогического университета
	Печатается по решению Редакционно-издательского совета Елабужского... Рабочий журнал по педагогической практике для студентов факультета физической культуры: Сборник методических указаний. Егпу, 2011....		Мурманский государственный гуманитарный университет актуальные проблемы психологии в образовании Печатается по решению редакционно-издательского совета Мурманского государственного гуманитарного университета

Учебное пособие издается по решению Редакционно-издательского совета Санкт-Петербургского государственного университета культуры и искусств

Похожие: