Верстка веб-страниц


Скачать 1.26 Mb.
Название Верстка веб-страниц
страница 1/6
Тип Документы
rykovodstvo.ru > Руководство эксплуатация > Документы
  1   2   3   4   5   6

Верстка веб-страниц


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

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

Отступ первой строки
Использование красной строки с отступом в 2-5 пробела повышает читаемость текста, позволяя легко отыскивать взглядом начало следующего абзаца.

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

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

Проценты и пикселы
Проблема заключается в следующем. Если в документе необходимо поместить таблицу, которая состоит из нескольких колонок, ширина в некоторых браузерах будет отображаться некорректно. Это происходит, когда надо совместить сочетание процентов и пикселей. Так, например, ширина таблицы задается 100%, одна из ячеек должна быть 200 пикселей, ширина оставшихся - все остальное.

Создание колонок
Две и более колонки позволяют разбить длинный текст или другое содержимое на блоки. В левой, например, рубрикатор, в правой - новости.

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

Рамка со скругленными углами

Для создания рамки со скругленными краями необходимо ее предварительно нарисовать в каком-нибудь графическом редакторе (рис. 1). Затем это изображение разрезаем на 9 частей (рис. 2), помеченные на рисунке оранжевыми линиями и номерами. Разрезать изображение можно, например, в программе ImageReady или подобной.





Рис.1. Отрисованный прямоугольник с закругленными рамками

Рис.2. Разрезанный на элементы рисунок

После разрезания рисунка и обрезания фрагментов получим 8 изображений:

Рисунок

Положение

Имя файла



Левый верний угол

1.gif



Верхняя горизонтальная линия

2.gif



Правый верхний угол

3.gif



Левая вертикальная линия

4.gif



Правая вертикальная линия

6.gif



Левый нижний угол

7.gif



Нижняя горизонтальная линия

8.gif



Правый нижний угол

9.gif

Пятого фрагмента рамки не будет (5.gif), поскольку у нас его заменит содержимое. Теперь создаем таблицу размером 3х3 и в ее ячейках размещаем созданные рисунки.

Пример. Создание окошка со скругленными углами

















 
    Содержимое
 


В таблице параметры border, cellspacing и cellpadding должны быть равны нулю, иначе линии не будут состыковываться между собой.

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

Чтобы линии плотно прилегали друг к другу и между ними не было пробелов надо обязательно указывать все размеры ячеек и рисунков.

В ячейках, где фоном размещаются горизонтальные и вертикальные линии, необходимо поместить распорку - это либо пробел, либо прозрачный GIF размером 1 на 1 пиксел (в примере файл называется 1x1.gif). Делается это для того, чтобы обмануть Netscape, который не показывает содержимое ячейки, если в ней ничего нет, фон не в счет.

Концептуальное проектирование сайта

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

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

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

Анализ и постановка проблемы
Описание существующих на данный момент сайтов, их основные недостатки и достоинства. Формулировка основных проблем.

Цель
Описание долгосрочной цели или целей своего сайта.

Этапы
Какие проблемы будут решены в ходе данного этапа, сроки выполнения и ответственные.

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

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

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

Пример разработки сайта школы

Цели
1. Качественная подготовка выпускника;
2. Сделать школу открытой;
3. Повышение имиджа школы.

Пользователи:
Родитель
Ученик
Учитель

Сценарии пользователей
Здесь описаны разделы сайта, интересные данной группе пользователей

Родитель:

 Информация об успеваемости учеников

 Информация о платных/бесплатных услугах

 Рейтинг среди других школ

 Резюме учителей и руководителей

 Информацию о страховании

 Телефоны, адреса, реквизиты школы

 Информация о системе непрерывного образования

Ученик:

 С какими вузами взаимодействует школа

 Расписание занятий

 Расписание мероприятий

 Информация об выпускниках

 Система дополнительного образования

Учитель:

 Расписание занятий

 План мероприятий

 График работы аттестационной комиссии

 Методические разработки

 Перечень методической литературы

 Информация о повышении квалификации

 Информация о юбилеях, поздравления

 Информация о грантах и финансовых потоках

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

Таким образом, проектирование сайта является первым и важным этапом, определяющий последующую работу над ним - дизайн, обработку графики, написание кода HTML.

В данной статье затронута только первая часть информационного проектирования сайта, в которой отражаются интересы пользователей. Кроме концептуального, существует еще логическое и физическое проектирование, представляющих мнение проектной группы и разработчиков. Но и этого уже достаточно, чтобы лучше понять назначение и задачи своего проекта, создавать полезные и интересные ресурсы.
  1   2   3   4   5   6

Похожие:

Верстка веб-страниц icon Руководство пользователя Книга № Импорт документов. Служебные операции в Системе
Программное обеспечение для поиска, просмотра веб-сайтов, то есть для запроса веб-страниц для их обработки, вывода и перехода от...
Верстка веб-страниц icon Руководство пользователя Приложение Б. Основные операции в системе...
Программное обеспечение для поиска, просмотра веб-сайтов, то есть для запроса веб-страниц для их обработки, вывода и перехода от...
Верстка веб-страниц icon Основы проектирование сайтов
Цель работы: Проектирования и тестирования (исследования) веб-сайтов с помощью редактора html-страниц
Верстка веб-страниц icon Инженерный вестник Дона, №4 ( 201 7 )
Ключевые слова: интернет, веб-приложение, веб-сайт, угроза безопасности, атака, уязвимость, запрос, защита
Верстка веб-страниц icon Ведущий редактор Художник обложки Корректоры Верстка Е. Строганова...
Главный редактор Заведующий редакцией Руководитель проекта Ведущий редактор Художник обложки Корректоры Верстка
Верстка веб-страниц icon Расширение страниц редактирования/просмотра
Одна из самых распространённых операций при настройке приложения для конкретных задач. Расширение карточки может проходить с использованием...
Верстка веб-страниц icon «Мониторинг скорости открытия Top-100 сайтов России» Настоящий информационный...
Создание системы постоянного мониторинга скорости открытия популярных веб-страниц и оперативное выявление ресурсов (далее Система),...
Верстка веб-страниц icon В. В. Пчеловод Последний гамбит
В случае, если Ваша система работает некорректно, и автоматически будут заданы ошибочные номера страниц, то в режиме просмотра страницы...
Верстка веб-страниц icon Работа Учащегося в аис «Образование»
Для работы с системой «Образование» необходим веб-браузер. Желательно загрузить сторонний веб-браузер, например
Верстка веб-страниц icon Пример веб-страницы
Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта....
Верстка веб-страниц icon Учебно-методический комплекс дисциплин по дисциплине «Веб-дизайн»
По дисциплине «Веб-дизайн» 090104. 65 – Комплексная защита объектов информатизации Форма подготовки очная
Верстка веб-страниц icon Руководство для авторов Технические требования к оформлению рукописей
Объём статьи допускается в форматах: 10 страниц, 12,5 и 15 страниц, включая нотные примеры, иллюстрации, cхемы, приложения, примечания,...
Верстка веб-страниц icon Внутренний предиктор СССР основы социологии
В случае, если Ваша система работает некорректно, и автоматически будут заданы ошибочные номера страниц, то в режиме просмотра страницы...
Верстка веб-страниц icon Инструкция по размещению веб-квеста в Google
...
Верстка веб-страниц icon Инструкция по настройке безопасного интернета
Среди них сервисы безопасных и надежных dns-серверов, которые обеспечивают базовую веб-защиту и родительский контроль, фильтруя и...
Верстка веб-страниц icon Руководство пользователя о бщий вид и основные элементы камеры
Благодарим Вас за приобретение веб-камеры Logitech. Данное руководство содержит сведения об установке и эксплуатации веб-камеры

Руководство, инструкция по применению




При копировании материала укажите ссылку © 2024
контакты
rykovodstvo.ru
Поиск