Практическая работа 1 «Создание алгоритма разработки web-сайта»
Скачать 2.32 Mb.
|
СБОРНИК МЕТОДИЧЕСКИХ УКАЗАНИЙ ДЛЯ СТУДЕНТОВ ПО ВЫПОЛНЕНИЮ ПРАКТИЧЕСКИХ РАБОТ МЕЖДИСЦИПЛИНАРНЫЙ КУРС «WEB-ТЕХНОЛОГИИ» специальность 09.02.03 «Программирование в компьютерных системах» ДЛЯ СТУДЕНТОВ ОЧНОЙ И ЗАОЧНОЙ ФОРМ ОБУЧЕНИЯ
Уфа 2017 г. СОДЕРЖАНИЕ
ПРЕДИСЛОВИЕ Методические указания для студентов по выполнению практических работ адресованы студентам очной, заочной и заочной с элементами дистанционных технологий форм обучения. Методические указания созданы в помощь для работы на занятиях, подготовки к практическим работам, правильного составления отчетов. Приступая к выполнению практической работы, необходимо внимательно прочитать цель работы, ознакомиться с требованиями к уровню подготовки в соответствии с федеральными государственными стандартами (ФГОС), краткими теоретическими сведениями, выполнить задания работы, ответить на контрольные вопросы для закрепления теоретического материала и сделать выводы. Отчет о практической работе необходимо выполнить и сдать в срок, установленный преподавателем. Наличие положительной оценки по практическим работам необходимо для допуска к экзамену, поэтому в случае отсутствия студента на уроке по любой причине или получения неудовлетворительной оценки за практическую необходимо найти время для ее выполнения или пересдачи. Правила выполнения практических работ 1. Студент должен прийти на практическое занятие, подготовленным к выполнению практической работы. 2. После проведения практической работы студент должен представить отчет о проделанной работе. 3. Отчет о проделанной работе следует выполнять в журнале практических работ на листах формата А4 с одной стороны листа. Оценку по практической работе студент получает, если: - студентом работа выполнена в полном объеме; - студент может пояснить выполнение любого этапа работы; - отчет выполнен в соответствии с требованиями к выполнению работы; - студент отвечает на контрольные вопросы на удовлетворительную оценку и выше. Зачет по выполнению практических работ студент получает при условии выполнения всех предусмотренных программой работ после сдачи журнала с отчетами по работам и оценкам. Внимание! Если в процессе подготовки к практическим работам или при решении задач возникают вопросы, разрешить которые самостоятельно не удается, необходимо обратиться к преподавателю для получения разъяснений или указаний в дни проведения дополнительных занятий. Обеспеченность занятия (средства обучения):
1. Компьютерная графика и web-дизайн: Учебное пособие / Т.И. Немцова, Т.В. Казанкова, А.В. Шнякин. - М.: ИД ФОРУМ: НИЦ ИНФРА-М, 2014. [Электронный ресурс; Режим доступа http://www.znanium.com]. — (Профессиональное образование). 2. Немцова Т. И. Практикум по информатике. Компьютерная графика и web-дизайн: учеб. пособие / Т.И. Немцова, Ю.В. Назарова ; под ред. Л.Г. Гагариной. — М. : ИД «ФОРУМ» : ИНФРА-М, 2017. — 288 с. + Доп. материалы [Электронный ресурс; Режим доступа http://www.znanium.com]. — (Профессиональное образование).
Порядок выполнения отчета по практической работе
Практическая работа № 1 «Создание алгоритма разработки web-сайта» Цель работы: ознакомиться с логической и физической структорой сайта, элементами web-страницы, научиться строить логическую и физическую структуру сайта. Образовательные результаты, заявленные во ФГОС третьего поколения: Студент должен уметь: - проектировать web-приложения. знать: - инструменты создания web-приложений. Краткие теоретические и учебно-методические материалы по теме практической работы Каждый ресурс Интернета, от любительской домашней странички до большого информационного портала, содержит несколько тематических рубрик, соединенных между собой гиперсвязями. Как правило, ссылки на все разделы сайта с краткими анонсами их содержимого приводится на первой, так называемой стартовой странице, которой присваивается имя index.htm (.html). Если тематические рубрики содержат собственные подразделы, каждая из них также имеет свою стартовую страницу, называющуюся index.html. Примечание: Такое имя файла рекомендуется присваивать всем стартовым документам сайта, поскольку в противном случае при обращении к какому-либо разделу посредством сокращенного URL без указания названия стартовой страницы (например, http://www.mysite.ru/photos/ вместо http://www.mysite.ru/photos/startpage.html) броузер отобразит не саму web-страницу, а перечень хранящихся в данной папке файлов. Подобный набор тематических рубрик с распределенными по соответствующим разделам документами и заранее спроектированными гиперсвязями между всеми страницами ресурса и называется логической структурой сайта. Физическая структура, напротив, подразумевает алгоритм размещения физических файлов по поддиректориям папки, в которой опубликован ваш сайт. Пример сравнения логической и физической структур одного и того же ресурса Интернета показан на рис. 1.1.  Рисунок - Сравнение логической и физической структуры сайта Очевидно, что логическая и физическая структуры могут не совпадать, поскольку в общем случае физическая структура ресурса разрабатывается, исходя из удобства размещения файлов. Однако более или менее точное сохранение порядка следования логических разделов в физической структуре сайта позволит вам избежать путаницы при последующем дополнении и обновлении материалов. Совет: Рекомендуется размещать все графические изображения, являющиеся элементами проекта, в отдельной папке с названием «Images», расположенной в корневой директории сайта. Такой подход позволит обновлять хранящиеся в других тематических разделах документы HTML без переноса графики, использовать одни и те же графические файлы во всех разделах сайта и при необходимости удалять целые директории. Для того чтобы все гиперссылки на вашей домашней страничке или web-сайте работали корректно, все документы открывались правильно, и броузер не выдавал ошибок при обращении к каким-либо разделам ресурса, при создании его физической структуры следует соблюдать несколько простых правил: 1. Назначайте имена директорий, имена и расширения документов HTML и графических файлов с использованием символов только латинского алфавита и только в строчном регистре. Старайтесь, чтобы имена созданных вами файлов и директорий не превышали по длине восьми символов. 2. При присвоении имен файлов документам HTML старайтесь следить за тем, чтобы эти имена были «смысловыми»: впоследствии вы легко можете забыть содержимое и назначение какой-либо web-страницы, если имена файлов будут выглядеть, например, как l.htm, 2.htm, 3.htm и т. д. Для того чтобы облегчить процесс обновления web-страниц, дополнения разделов или создания новых рубрик, заведите средство документирования проекта — любую электронную таблицу, созданную, например, в Microsoft Excel, или просто разграфленную тетрадку, в которую записывайте соответствие элементов физической структуры вашего проекта его логической структуре. До тех пор пока количество составляющих ваш сайт файлов относительно мало, это может показаться излишним, когда же оно перевалит за первые два десятка, в обилии html-документов и графических элементов будет легко запутаться, особенно если вы создаете несколько проектов одновременно. Пример оформления такого средства документирования показан в табл. 1.1. Таблица Пример оформления средства документирования проекта
Становится очевидным, что физическая структура сайта скрыта от посетителей вашего ресурса: они могут наблюдать только логическую структуру, причем именно так, как она представлена при помощи элементов навигации. Отсюда следует вполне логический вывод: строение системы навигации должно если не полностью повторять, то хотя бы максимально соответствовать разработанной вами логической структуре сайта. Элементы web-страницы Любая web-страница содержит определенный набор стандартных элементов, являющихся обязательными компонентами каждого ресурса Интернета. Безусловно, ассортимент и количество подобных объектов могут варьироваться в зависимости от тематической направленности сайта, объема опубликованных на нем материалов, а также от целей и задач, которые ставит перед собой создатель данного ресурса. Компоновка таких элементов, проектирование их взаимного расположения и составляет одну из главных задач web-мастера. Первым элементом web-страницы является ее заголовок. Он может быть выполнен как в текстовом, так и в графическом варианте, однако и в том и в другом случае он должен располагаться в верхней части документа. Иногда с заголовком совмещают меню выбора кодировки кириллицы и кнопки для перехода с русскоязычной на англоязычную версию сайта, если данный web-ресурс представлен на двух языках. Непосредственно под заголовком документа, как правило, располагается пространство, отведенное для размещения рекламного баннера. Включение баннера именно в верхнюю часть web-страницы в большинстве случаев является обязательным условием регистрации сайта в службах баннерного обмена — системах, рекламирующих созданный вами ресурс в обмен на показ на страницах вашего сайта рекламы других участников баннерообменной сети. Стандартный размер баннеров, публикуемых под заголовком документа, составляет обычно 468x60 точек. Если вы используете статический принцип компоновки страницы, ширина заголовка вашего документа будет составлять приблизительно 640 пикселов: это значение обусловлено, прежде всего, необходимостью обеспечить корректное отображение документа на мониторах с экранным разрешением 640x480 точек и избежать появления горизонтально полосы прокрутки, затрудняющей его просмотр. Очевидно, что ширина баннера в этом случае будет значительно меньше ширины заголовка, благодаря чему в той части страницы, где вы планируете отвести место под рекламу, образуется незанятое пространство, которое можно заполнить логотипом компании-владельца данного сайта или ссылкой на сервер, осуществляющий web-хостинг. Разумеется, логотип необходим далеко не всегда: как правило, он включается в состав web-страницы лишь в случае, если сайт имеет коммерческую направленность. Основную часть документа занимает так называемое текстовое поле — участок, где и размещается смысловое наполнение страницы: содержательный информационный текст и иллюстрации. Перечисленные элементы еще называют «контент» (от англ, content — содержание). Расположение текстового поля зависит в первую очередь от того, каким образом web-дизайнер разместит остальные элементы документа. Следующей обязательной составляющей частью web-страницы являются элементы навигации — гиперссылки, связывающие данный документ с другими разделами сайта. Элементы навигации могут быть выполнены в виде текстовых строк, графических объектов, то есть кнопок, либо активных компонентов, например Java-апплетов. Последние представляют собой те же кнопки, которые, в отличие от своих «традиционных» сестер, умеют реагировать на движения мыши, выполняя при наведении на них курсора какие-либо несложные действия (включение подсветки, создание эффекта «нажатия», изменение формы и т. д.). Располагать элементы навигации следует таким образом, чтобы они всегда были «на виду», «под рукой», то есть так, чтобы пользователю не приходилось «отматывать» страницу назад, если текстовое поле занимает по высоте несколько физических экранов, после чего подолгу искать ссылки на другие разделы. Наиболее устоявшимся подходом является размещение элементов навигации у левой границы страницы. В нижней части документа принято публиковать информацию о разработчиках сайта и адрес электронной почты. Если web-страница является стартовым документом, в нижней ее части также размещают счетчик посещений — небольшой сценарий, вызывающий установленный на сервере CGI-скрипт, который фиксирует каждое открытие документа в броузере пользователей, изменяя значение индикатора счетчика. Благодаря этому web-мастер без труда определит количество посетителей, навестивших его страничку в течение какого-либо времени. На практике часто встречаются web-сайты, в дизайне которых, элементы навигации позиционированы по правой границе экрана. В этом случае текстовое поле смещается налево, остальные компоненты документа располагаются, исходя из принципа максимальной эстетичности их сочетания. Пример такого исполнения сайта показан на рис.  Рисунок - Пример компоновки web-страницы с правым позиционированием элементов навигации Как видно из рисунка, логотип в этом случае помещен на один уровень с заголовком документа, а рекламный баннер позиционирован относительно центра страницы. При таком подходе рекомендуется выдерживать графическое оформление заголовка, логотипа и поля для размещения рекламы в едином цветовом и художественном стиле — тогда несимметричность положения данных объектов будет не столь очевидна и не станет «резать глаз» сторонникам строгой, «табличной» эстетики дизайна. Элементы навигации можно разместить не только вблизи правой и левой границ страницы, но и в верхней части документа. Такой вариант компоновки наиболее подходит, на мой взгляд, при создании домашних страничек: в этом случае все объекты страницы гармонично «вписываются» в заданную ширину невидимой таблицы, при этом подготовка самой таблицы значительно упрощается. Единственным недостатком подобного подхода является необходимость продублировать элементы навигации в нижней части документа. Очевидно, что вариантов «смешанной компоновки» web-страницы может быть великое множество: конкретные решения зависят от количества составляющих ресурс разделов, объема подготовленного для размещения на сайте текста и, наконец, от фантазии самого дизайнера. Важно лишь, чтобы внешний вид сайта не вызывал нареканий у посетителей. |
Похожие:
 | Практическая работа 7-8 «Дополнительные элементы языка html для форматирования web-страниц» | | Практическая работа 15 «Составление технического задания на разработку web-сайта» |
 | Ресурс – разрабатываемая информационная система, представленная в виде web-сайта и онлайновой системы управления web-сайтом (cms),... | | ... |
| Автоматизация заполнения документов, связанных с их деятельностью по оказанию услуг своим заказчикам и по самим сделкам по отчуждения... | | Практическая работа №6 «Оформление договора на техническое обслуживание оборудования» |
| Разместить текст в журнале, брошюре или объявлении можно с помощью газетных колонок | | Для более быстрой работы web-интерфейса желательно использовать следующие браузеры |
| Заполните бриф, чтобы мы рассчитали стоимость и сроки работ по созданию Вашего сайта | | Сборник практических работ предлагает изучение MicrosoftAccess 2007 методом кратких заданий, позволяющих изучить и использовать широкие... |