Практическая работа 1 «Создание алгоритма разработки web-сайта»


НазваниеПрактическая работа 1 «Создание алгоритма разработки web-сайта»
страница2/3
ТипПрактическая работа
filling-form.ru > бланк заявлений > Практическая работа
1   2   3

Алгоритм разработки веб-сайта

  1. Постановка целей и определение основных задач.

  2. Создание списка будущих тематических разделов.

  3. Разработка логической и физической структуры ресурса.

  4. Подготовка эскиза дизайна, компоновки сайта, невидимой верстальной таблицы.

  5. Подготовка текстовых материалов.

  6. Подготовка графических материалов в векторной форме.

  7. Экспорт векторных рисунков в растровый формат, оптимизация картинок.

  8. Создание шаблонов web-страниц.

  9. Сборка web-страниц и отладка кода.

  10. Проверка идентичности отображения web-страниц с различным экранным разрешением и цветовой палитрой и в различных броузерах.

Прежде чем браться за разработку любого web-сайта, это подумать о целях, которые вы ставите перед собой, создавая новый проект. От выбора целей будут зависеть методы их достижения, в том числе и сам дизайн. От правильной постановки задач будет зависеть успех всего предприятия.

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

Вы решили создать некоммерческий информационный сайт? Определитесь, чему он будет посвящен. Если это развлекательный проект, после того как вы придумаете перечень соответствующих рубрик (например, «анекдоты», «карикатуры» или «юмористические рассказы»), необходимо подобрать для него подходящее дизайнерское решение, более или менее отвечающее содержанию. У посетителей, скорее всего, вызовет легкое недоумение развлекательный проект, выполненный в стиле серьезного информационного или новостного портала.

Быть может, вы хотите опубликовать ресурс, посвященный приготовлению домашних вин? Прогуляйтесь по Интернету, посмотрите, что уже создали ваши «коллеги», какие разделы есть на аналогичные сайтах, оцените, какой информации на них не хватает, а какой — наоборот, переизбыток, как эта информация «подается» потребителю, скучно ее читать или, наоборот, интересно и увлекательно.

У вас возникла необходимость разработать коммерческий сайт? В этом случае и перечень тематических разделов, и окончательное решение относительно применяемых вами дизайнерских приемов, таких как использование корпоративных цветов, специальных шрифтов или кнопок, стилизованных под общую концепцию проекта, будет принимать, скорее всего, заказчик сайта. Однако в любом случае вам придется предоставить ему несколько пробных вариантов, так называемых дизайн-проектов, показывающих возможные реализации будущего ресурса. Обратитесь к сайтам конкурирующих организаций, отечественных и зарубежных, посмотрите, какие рубрики составляют их web-сайт, какие данные предлагаются в каждом тематическом разделе.

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

Необходимо помнить, что и список рубрик, и количество представленных в них материалов, да и содержимое самих документов будет, скорее всего, неоднократно изменяться и дополняться. Какие-то разделы будут со временем удалены за ненадобностью, какие-то — наоборот, добавлены, какие-то web-страницы вы посчитаете уже неактуальными, а какой-то документ, напротив, необходимо будет переработать заново. Логическая и физическая структуры вашего проекта должны отвечать подобным требованиям «мобильности», у вас не должно возникать ни малейших проблем с организацией или реорганизацией гиперсвязей внутри проекта, если какой-либо составляющий его документ вдруг перестанет существовать. Подробно продумайте все гиперсвязи между страницами ресурса, разработайте структуру директорий и поддиректорий, в которые вы будете размещать документы. Только после этого можно обратиться непосредственно к вопросам дизайна.

Прикиньте и зарисуйте компоновку ваших будущих web-страниц. Карандашом. На бумаге. Учтите, что если логическая структура вашего сайта подразумевает наличие стартовых страниц разделов, или, как их еще называют, индексных файлов, дизайн этих страниц, а также стартового документа самого сайта будет, скорее всего, несколько отличаться от дизайна составляющих рубрику информационных страниц. Индексные файлы содержат обычно ссылки на документы, составляющие данную рубрику, иногда — краткие анонсы этих документов. Основное содержание самих информационных страниц составляет информационный текст и, по мере необходимости, иллюстрации.

Представив общую компоновку web-страниц, продумайте структуру невидимой таблицы, в которую затем будут включены их компоненты. Проектируя таблицу, необходимо учитывать, что между ее столбцами, содержащими различные элементы документа, желательно оставлять пустые колонки шириной один-два пиксела. Делается это с целью избежать эффекта «прилипания» колонок друг к другу, наблюдающегося, когда между элементами web-страницы отсутствует горизонтальный отступ, что заметно портит внешний вид документа.

Создание верстальной таблицы — это, пожалуй, одна из наиболее сложных процедур при разработке нового проекта. Начертить таблицу безошибочно с первой попытки практически невозможно. Навык, благодаря которому web-мастер, за несколько секунд, рисует все необходимые строки и столбцы «на глаз», приходит только с опытом. Здесь трудно дать какие-то конкретные советы, чтобы помочь начинающему дизайнеру. Научиться быстро проектировать верстальную таблицу для нового сайта можно только одним способом: загрузите несколько созданных другими авторами web-страниц во FrontPage Express или Macromedia Dreamweaver, посмотрите, какие таблицы применяются ими для отображения данных документов, внимательно изучите их, после чего попытайтесь создать свои. 

Для построения сложных таблиц можно применять вложение одной таблицы в другую: например, первичная таблица шириной 640 точек задает горизонтальное разбиение страницы, в каждую из ее ячеек вкладывается еще одна, равная ей по ширине невидимая таблица, обеспечивающая вертикальное разбиение. Такой подход позволяет дробить различные участки web-страницы независимо друг от друга, создавая, к примеру, в одном ее поле четыре вертикальные колонки различной ширины, а в другом — две, оперируя при этом различными параметрами вложенных таблиц в пределах одного и того же документа — размером пространства между колонками, толщиной границ и т. д.

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

  1. Сначала рекомендуется набрать в любом редакторе все необходимые тексты, причем сохранять их лучше всего в формате plain text, то есть в файле с расширением .txt.

  2. В векторном редакторе (например, в Corel-Draw) создать необходимые графические элементы, экспортировать их в растровый формат.

  3. Обработать рисунки в редакторе растровой графики (Adobe Photoshop), придав картинкам необходимый размер и разрешение, после чего по мере необходимости оптимизировать их с помощью специальных компрессоров или других аналогичных средств.

Только после всех описанных выше процедур можно приступать непосредственно к сборке страницы: созданию ее макета в HTML-редакторе, написанию и окончательной отладке кода.

Поскольку дизайн всех документов, составляющих ваш будущий сайт, скорее всего, будет практически идентичным, в первую очередь рекомендуется создать так называемый шаблон. Шаблон представляет собой html-документ, содержащий невидимую таблицу, заголовок, все графические объекты, элементы навигации — все, за исключением непосредственного информационного наполнения.

Если впоследствии у вас возникнет необходимость включить в проект новый документ, вам будет достаточно открыть в html-редакторе готовый шаблон и импортировать в него текст и все необходимые иллюстрации. Советуется разработать и сохранить на диске два различных шаблона: для информационной страницы и индексного файла.

Когда страница будет готова, ее следует проверить на идентичность отображения в различных броузерах при различных экранных разрешениях и цветовых палитрах. Загрузите созданный вами html-документ в Microsoft Internet Explorer, установите значение цветовой палитры экрана равным 256 цветов, после чего последовательно измените экранное разрешение на 640x480, 800x600 и, наконец, на 1024x768 точек. Посмотрите, не меняется ли компоновка страницы, не «съезжают» ли ее элементы относительно друг друга. Проделайте ту же процедуру для Netscape Navigator. Если никаких существенных изменений вы не заметите, можно быть уверенным, что другие документы, созданные с использованием того же шаблона, с вероятностью 95 % будут отображаться столь же корректно.
Задания для практического занятия:
1. Определите и запишите тему, цели и основные задачи вашего будущего веб-сайта.

2. Составьте и запишите список будущих тематических разделов сайта.

3. Разработайте логическую и физическую структуру ресурса.

4. Подготовьте эскиз дизайна, компоновки сайта, невидимой верстальной таблицы.
Контрольные вопросы
1. Что называется логической структурой сайта?

2. Чем отличается логическая и физическая структура сайта?

3. Какие правила нужно соблюдать при создании физической структуры сайта?

4. Какого стандартного размера создается рекламный баннер, публикуемый под заголовком документа?

5. Запишите последовательность действий (алгоритм) по разработке web-сайта.

Практическая работа № 2
«Анализ сильных и слабых сторон web-сайта»
Цель работы:

1. Ознакомиться с процессом анализа хороших и плохих web-сайтов.

2. Научиться анализировать сильные и слабые стороны конкурентов.
Образовательные результаты, заявленные во ФГОС третьего поколения:

Студент должен

уметь:

- проетировать web-приложения;



знать:

- инструменты создания web-приложений.
Краткие теоретические и учебно-методические материалы по теме практической работы
Анализ сильных и слабых сторон конкурентов, информационное проектирование сайта, разработка его концепции, понимание аудитории на которую сайт рассчитан. Это первый и важный этап, поскольку он определяет дальнейшую работу над созданием сайта -дизайн, программирование, написание кода. Описание и анализ каждого этапа разработки веб сайта позволяет оценить его с разных позиций, - как пользователей, так и создателей, что должно сделать разрабатываемый проект интересным и удобным для целевой аудитории, а авторам лучше понять его предназначение и структуру.

Первым этапом разработки сайта – это выбор темы, идеи, какие материалы будут на сайте. Но прежде чем перейти непосредственно к разработке содержания и оформления, следует посмотреть, что уже сделано по выбранной тематике. Делается это для того, чтобы учесть сильные и слабые стороны конкурентов, выбрать лучшее, что у них имеется и отказаться от плохих и малоэффективных решений.

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

Для удобства, весь процесс анализа сайтов разбит на несколько этапов.

1. Выбор критериев при оценке сайтов

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

Навигация по сайту

Навигация характеризует удобство перемещения между разделами сайта, возможность быстро переходить на нужную страницу. Хорошо продуманная навигация сайта должна отвечать на вопросы посетителя: какие страницы я уже посетил, где я нахожусь относительно сайта, какие разделы еще могу посетить.

Организация информации на страницах сайта

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

Стиль написания текста

Известно, что читабельность текста с экрана монитора ухудшается процентов на 25. С учетом этой особенности, тексты на сайте должны быть более лаконичными и разбиты при необходимости на несколько страниц. Следует, также, учитывать целевую аудиторию, на которую рассчитан сайт - для детей надо писать проще, для учителей, наверное, еще проще.
Дизайн сайта

Дизайн определяет вид оформления сайта и предназначен для повышения эстетической ценности от его содержимого. Дизайн есть первое, что бросается в глаза посетителю любого сайта и, конечно, он должен быть уместен и производить определенное впечатление. Любое оформление является способом лучше подать идею и информацию, размещенную на веб-страницах сайта.

Полнота информации

Любую информацию по определению можно уточнять и добавлять до бесконечности, поэтому ее полнота по выбранной теме определяется лишь в сравнении с другими источниками.

Скорость загрузки веб-страниц сайта

Один из важных критериев. Большинство посетителей сайта в первую очередь отмечают именно быстроту загрузки страниц, а не суперстильный и навороченный дизайн.

Используемые технологии

Не все современные технологии, такие как Flash, DHTML и другие применяют обоснованно, но их использование может придать создаваемому сайту большую выразительность и удобство. В каждом случае следует учитывать уместность и производимый эффект. Технологии могут быть реализованы по разному в различных браузерах, поэтому сайт рекомендуется просматривать в нескольких, самых популярных.

Интерактивность

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

Частота обновления

По обновлению информации, сайты можно разделить на обновляемые часто и редко. Но в любом случае, обновлять информацию рекомендуется не реже, чем раз в две недели.

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

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

Содержание сайта.

Содержание - это вся информация, представленная на сайте. Информационное наполнение сайта должно привлекать внимание посетителя и отвечать теме сайта. Кроме того, его форма должна соответствовать аудитории - Веб-материалы должны быть ясны, кратки и действенны в среде Интернет. Хорошее информационное наполнение - само по себе позиция. Оно обладает голосом, точкой зрения. Оно может носить информативный, утилитарный или развлекательный характер - но Вы всегда должны желать продолжения.

Структура и навигационные функции сайта.

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

Дизайн сайта.

Дизайн - это характеристика внешнего вида сайта. Сайт не должен быть просто симпатичной домашней страничкой, хотя и не обязан быть ультрасовременным или суперстильным. Критерии оценки визуального оформления - высокое качество, уместность и соответствие той аудитории и задаче, на которые ориентирован сайт. Оформление должно производить впечатление на посетителя - или даже поражать его.

Функциональность сайта.

Этот критерий характеризует технологическую сторону разработки сайта. Хорошая функциональность означает, что сайт быстро загружается, что все его ссылки "живые", а технологии применяются к месту и отвечают предполагаемой аудитории. Сайт должен быть независим от платформы и типа браузера. Возможны решения, когда в случае необходимости сайт самостоятельно обеспечивает переход на альтернативные страницы. Хорошая функциональность -это технология, которая не бросается в глаза.

Интерактивность сайта.

Интерактивность характеризует возможности, которые сайт предоставляет пользователю. Хорошая интерактивность не исчерпывается гиперссылками и всплывающими меню - сайт должен предоставлять пользователю возможности диалога. Интерактивность - это возможность двустороннего обмена информацией, как в поисковых системах, чатах, сетевых играх и пр. Благодаря интерактивным элементам пользователь должен постоянно ощущать отличие Сети от журнала или телевизора.

Общее впечатление от сайта.

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

2. Составление списка сайтов

После определения критериев, необходимо составить список сайтов наиболее подходящих к выбранной области, наиболее характерных сайтов по теме. Такой набор сайтов можно получить разными способами - воспользоваться поисковыми системами, каталогами, обзорами интернет-издателей, журналами, посвященных Интернету и тому подобное. Количество сайтов, которое необходимо выбрать, измеряется от пяти до десяти. Но это должны быть наиболее интересные, популярные и посещаемые ресурсы, они должны составлять лучшую подборку по интересующей теме. Список лучше проранжировать (что, впрочем, необязательно) по релевантности, популярности или другому критерию.


3. Выставление критериев

Создаем следующую таблицу, в которой по горизонтали приведены выбранные критерии, а по вертикали - полученные сайты.


Критерии

Сайт 1

Сайт 2

Сайт 3

Сайт 4

Навигация













Организация информации













Скорость загрузки













Используемые технологии













Интерактивность













Дизайн













Частота обновления














Общее впечатление

На месте пересечения ячеек выставляем оценку веб сайта по данному критерию. Оценка произвольная, от 1 до 10 баллов или от 1 до 5 баллов, просто словами или какая другая.


Критерии

Сайт 1

Сайт 2

Сайт 3

Сайт 4

Навигация













Организация информации













Скорость загрузки













Используемые технологии













Интерактивность













Дизайн













Частота обновления













Общее впечатление














Так как оценки субъективны, то будет лучше, если сайты посмотрят несколько человек, желательно, чтобы они относились к разным группам, т.е., были разного возраста, пола, положения и тому подобное. Чем больше людей сумеете привлечь для оценивания сайтов, тем более точной и объективной получится суммарная их оценка и результат.

4. Оценка результатов и выводы

Из Таблицы 2 видно, что все сайты страдают плохой организацией материала и обладают малой интерактивностью. Дизайн имеет место быть только у одного веб-сайта, который получил оценку 5 баллов, остальные же представляют мало интереса в этом плане и получили среднюю оценку. Также, навигацией по сайту может похвастаться только один сайт.

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

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

Проектирование предназначено для разработки понятной и четкой внутренней организации содержимого веб-сайта, чтобы его посетители могли легко найти нужную им информацию. Речь идет не о создании привлекательной графики и выразительных лозунгов, а об улучшении ясности и функциональности веб-сайта.

Правильно выполненное проектирование дает посетителю возможность оценить, какая информация находится на веб-сайте и насколько быстро можно до нее добраться. На любой странице посетители должны представлять свое местоположение, что они могут сделать на этой странице, и куда могут пойти дальше.


Задания для практического занятия:
1.Определите и запишите тему, цели и основные задачи вашего будущего веб-сайта. Дайте краткую характеристику.

2.Составьте и запишите список сайтов наиболее подходящих к выбранной области, наиболее характерных сайтов по теме (5-10 сайтов).

3 .Составьте таблицу «Оценка сайтов», в которой по горизонтали приведены выбранные критерии, а по вертикали - полученные сайты. Оцените выбранные web-сайты.

4.Оцените полученные результаты. Сделайте вывод.

Контрольные вопросы
1.С какой целью проводится анализ сильных и слабых сторон конкурентов?

2.Что такое критерии?

3.Каким правилами необходимо руководствоваться при составлении критерий?

4.По каким критериям вы оценивали сайты?

5.Зарисуйте в виде схемы последовательность (алгоритм) анализа web-сайтов.

Практическая работа № 3
«Синтаксис документа HTML»
Цель работы: научиться определятьь основные теги HTML-документа, их артибуты
Образовательные результаты, заявленные во ФГОС третьего поколения:

Студент должен

уметь:

- составлять HTML-код страницы;

- проектировать web-приложения;



знать:

- синтаксис HTML.
Краткие теоретические и учебно-методические материалы по теме практической работы
HTML-файл содержит один тип управляющих конструкций - теги (tags).

тег — единица разметки;

элемент — составная часть документа.

Назначение тегов:

- разделяют исходный неформатированный текст документа на элементы;

- создают новые элементы, которым ничего не соответствовало в тексте (например, графические вставки или Java-апплеты).

Виды тегов:

- парные, охватывающие какой-то фрагмент текста и/или другие теги,

<парный-тег>текст или другие теги

Парные теги должны вкладываться друг в друга без пересе­чений, т. е. если в области действия тега А открылся тег В, он должен закрыться до того, как закроется тег А.



- непарные, стоящие в одиночестве:

<непарный-тег>

Атрибуты

Многие теги, как парные, так и непарные, имеют атрибуты, изменяющие и уточняющие действие тега:

<тег атрибут1="значение" атрибут2="значение" ...>

Регистр букв в идентификаторах тегов и атрибутов (но не в значениях атрибутов) не учитывается. Пары атрибут="значение" распознаются как таковые только внутри угловых скобок тега и отделяются друг от друга пробелами.

Подстановки

Чтобы ввести в документ символы, от­сутствующие на клавиатуре или же имеющие в синтаксисе HTML специальное значение, употребляются подстановки двух видов:

1. мнемонические - имеют вид

& мнемонический код;

например:

è для ё
< для <

  для символа неразрываемого пробела

2. числовыеимеют вид

& # десятичный числовой код;

например:

б0; для символа неразрываемого пробела

Ссылки и привязки

тег А

Любая ссылка в HTML имеет два обязатель­ных элемента:

источник - то изображение или фрагмент, который заключен между <А> и и щелчок по которо­му активизирует ссылку;

пункт назначения - URL-адрес документа, на который ведет ссылка.

Адрес назначения может указывать не только на весь документ в целом, но и на какое-то место (точнее, опять-таки, какой-то элемент) внутри документа, в том числе и внутри самого документа со ссылкой. Для этого пункт назначения должен быть помечен с помощью атрибута name тега А создателем того документа, на который делается ссылка. В свою очередь, в теге А в документе-источнике эта метка приписывается к адресу назначения через символ #.

Формы

тег FORM

Формы (forms), или бланки, предназначены для «обратной связи», т.е. отсылки информации от пользователя обратно на сервер. Набор органов управления HTML-бланков соответ­ствует возможностям современных графических операци­онных систем и включает в себя поля для ввода текста (однострочные и многострочные), флажки, переключатели, выпадающие списки, списки с прокруткой и кнопки.

Тег FORM, объединяет группу связанных по смы­слу элементов и указывает адрес той программы на сервере, которой будут посланы введенные пользователем данные из всех элементов формы. HTML-страница может содержать любое количество независимых друг от друга форм, в каждой из которых должна присутствовать «пуско­вая кнопка», отправляющая данные на сервер. Кнопке этой не обязательно быть стандартной интерфейсной кнопкой, в этой же роли может использоваться изображение, а для простых форм, состоящих из одного поля ввода или выпа­дающего списка, посылка данных может активизироваться нажатием Enter в поле ввода или операцией выбора элемента в списке.

Изображения и объект

Тег IMG

Тег IMG, предназначенный для вставки изображений, относится к тегам, создающим но­вые элементы документа, отсутствовавшие в исходном тексте. Тег этот ссылается на хранящееся в отдельном файле изображение в формате GIF или JPEG; этот графический файл может располагаться там же, где и HTML-файл страницы (в таком случае в атрибуте src достаточно указать имя файла), а может лежать и в дру­гом каталоге и даже на другом сервере (в этом случае нужно указывать полный URL-адрес). Большинство атри­бутов этого тега управляют форматированием изображения, устанавливая его размеры, поля, выравнивание и проч.

Таблицы

Тег TABLE

Тег TABLE чаще используется для визуального форматирования страницы, чем для представления табличного по своей природе материала.

Используются атрибуты height, width, cellspacing, cellpadding, border для форматирования внешнего вида таблицы.
Задания для практического занятия:
1. Определите, с какого тега начинается HTML-код web-страницы, запишите его. Является ли он парным тегом?

2. Запишите все парные и непарные теги, имеющиеся в примере, что они означают.

3. Найдите и запишите все ссылки, имеющиеся в примере, подчеркните путь назначения ссылки.

4. Найдите и запишите 3 примера тегов с атрибутами.

5. Найдите все вставленные в web-страницу изображения. Запишите их код.

6. Имеются ли в коде примера формы? Если есть запишите его код.

7. Имеется ли в коде примера подстановки? Какие? Запишите их все. Что они обозначают?

8. Найдите и запишите коды всех имеющихся таблиц. Подчеркните атрибут border. Что он означает?

9. Имеются ли в коде каскадные таблицы стилей? Запишите их код.
Вариант 1





Задания В8
















Учебный центр "Логарифм Плюс"



тел. 8 925 158 36 96









1   2   3

Похожие:

Практическая работа 1 «Создание алгоритма разработки web-сайта» iconПрактическая работа 1 «Создание алгоритма разработки web-сайта»
Практическая работа 7-8 «Дополнительные элементы языка html для форматирования web-страниц»

Практическая работа 1 «Создание алгоритма разработки web-сайта» iconПрактическая работа 13 «Анализ сильных и слабых сторон web-сайта»
Практическая работа 15 «Составление технического задания на разработку web-сайта»

Практическая работа 1 «Создание алгоритма разработки web-сайта» iconТехническое задание на разработку веб-сайта
Ресурс – разрабатываемая информационная система, представленная в виде web-сайта и онлайновой системы управления web-сайтом (cms),...

Практическая работа 1 «Создание алгоритма разработки web-сайта» iconПрактическая работа №1 «Работа с нормативными документами»
...

Практическая работа 1 «Создание алгоритма разработки web-сайта» iconАнкета на разработку и создание Интернет-сайта бриф на разработку и создание сайта
Автоматизация заполнения документов, связанных с их деятельностью по оказанию услуг своим заказчикам и по самим сделкам по отчуждения...

Практическая работа 1 «Создание алгоритма разработки web-сайта» iconПрактическая работа №1 «Разработка бланков документов»
Практическая работа №6 «Оформление договора на техническое обслуживание оборудования»

Практическая работа 1 «Создание алгоритма разработки web-сайта» iconПрактическая работа №1. «Колонки и списки». Практическая работа №2....
Разместить текст в журнале, брошюре или объявлении можно с помощью газетных колонок

Практическая работа 1 «Создание алгоритма разработки web-сайта» iconИнструкция пользователя Работа в web-интерфейсе версия 0 Москва 2012
Для более быстрой работы web-интерфейса желательно использовать следующие браузеры

Практическая работа 1 «Создание алгоритма разработки web-сайта» iconБриф на создание сайта
Заполните бриф, чтобы мы рассчитали стоимость и сроки работ по созданию Вашего сайта

Практическая работа 1 «Создание алгоритма разработки web-сайта» iconПрактическая работа №1 «Создание таблицы с помощью конструктора»
Сборник практических работ предлагает изучение MicrosoftAccess 2007 методом кратких заданий, позволяющих изучить и использовать широкие...

Вы можете разместить ссылку на наш сайт:


Все бланки и формы на filling-form.ru




При копировании материала укажите ссылку © 2019
контакты
filling-form.ru

Поиск