Верстка веб-страниц
|
Скачать 1.26 Mb.
|
Верстка веб-страницВыравнивание по центру Казалось бы, нет ничего сложного, чтобы установить картинку или текст в центре окна браузера. Используем тег CENTER и все становится на то место, куда мы и задумывали. Однако не все так просто. Существует три способа выравнивания по центру, каждый из них имеет свои особенности и отличия в разных браузерах. Колонки с разделителем Блоки текста часто разделяют между собой вертикальной линией, чтобы взгляд читателя не перескакивал с одной колонки на другую. Отступ первой строки Использование красной строки с отступом в 2-5 пробела повышает читаемость текста, позволяя легко отыскивать взглядом начало следующего абзаца. Отступы на веб-странице Горизонтальные и вертикальные отступы от края браузера до содержимого веб-странице встроены в браузер по умолчанию. Тем не менее можно изменять значение этих параметров, делая отступы по желанию больше или меньше. Подрисуночная подпись Подрисуночная подпись - это надпись, являющаяся комментарием к рисунку и его описывающая. Такая подпись важна, поскольку привлекает внимание читателя к рисунку и дает больше информации об изображении. Проценты и пикселы Проблема заключается в следующем. Если в документе необходимо поместить таблицу, которая состоит из нескольких колонок, ширина в некоторых браузерах будет отображаться некорректно. Это происходит, когда надо совместить сочетание процентов и пикселей. Так, например, ширина таблицы задается 100%, одна из ячеек должна быть 200 пикселей, ширина оставшихся - все остальное. Создание колонок Две и более колонки позволяют разбить длинный текст или другое содержимое на блоки. В левой, например, рубрикатор, в правой - новости. Центрирование по вертикали Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположен рисунок или flash-заставка, выражающие главную идею сайта. Это изображение также является и ссылкой на остальные разделы сайта. Задача - разместить такой рисунок по центру окна браузера вне зависимости от разрешения монитора. Рамка со скругленными углами Для создания рамки со скругленными краями необходимо ее предварительно нарисовать в каком-нибудь графическом редакторе (рис. 1). Затем это изображение разрезаем на 9 частей (рис. 2), помеченные на рисунке оранжевыми линиями и номерами. Разрезать изображение можно, например, в программе ImageReady или подобной.
После разрезания рисунка и обрезания фрагментов получим 8 изображений:
Пятого фрагмента рамки не будет (5.gif), поскольку у нас его заменит содержимое. Теперь создаем таблицу размером 3х3 и в ее ячейках размещаем созданные рисунки. Пример. Создание окошка со скругленными углами
В таблице параметры border, cellspacing и cellpadding должны быть равны нулю, иначе линии не будут состыковываться между собой. Уголки вставляем как обычные рисунки с помощью тега IMG, а вот горизонтальные и вертикальные линии следует задавать с помощью фона ячейки таблицы, параметром background. Это позволит сделать нашу рамку масштабируемой и размер ее будет изменяться в зависимости от содержимого. Чтобы линии плотно прилегали друг к другу и между ними не было пробелов надо обязательно указывать все размеры ячеек и рисунков. В ячейках, где фоном размещаются горизонтальные и вертикальные линии, необходимо поместить распорку - это либо пробел, либо прозрачный GIF размером 1 на 1 пиксел (в примере файл называется 1x1.gif). Делается это для того, чтобы обмануть Netscape, который не показывает содержимое ячейки, если в ней ничего нет, фон не в счет. Концептуальное проектирование сайта Создание любого сайта можно уподобить с моделированием из конструктора. Но происходит удивительная вещь - элементы конструктора одни и те же, а в результате их использования в одном случае получается полезный и интересный ресурс, в другом - вещь неизвестного назначения. И в том и другом случае получаемый продукт одинаково называют сайтом, несмотря на их однозначную разнородность. Такая ситуация получается из-за недостаточного понимания разработчиками предназначения результатов своего труда и отсутствие четкой внутренней организации. Прежде всего, любой сайт это эффективный инструмент, который служит как целям разработчика, так и предоставляет в удобном и понятном виде информацию его посетителям. Для того чтобы сайт таким и стал, необходима разработка понятной и четкой внутренней организации содержимого сайта. Концептуальное проектирования сайта - это определение целевой аудитории, анализ, сбор и документирование требований пользователей и выработка способов их реализаций. При проектировании и разработке важно, чтобы сайт был ориентирован на конкретных пользователей и отвечал их требованиям. Ниже приводится, что необходимо описать при проектировании своего сайта. Некоторые пункты являются обязательными, другие просто предназначены для того, чтоб было легче сформулировать остальные. Анализ и постановка проблемы Описание существующих на данный момент сайтов, их основные недостатки и достоинства. Формулировка основных проблем. Цель Описание долгосрочной цели или целей своего сайта. Этапы Какие проблемы будут решены в ходе данного этапа, сроки выполнения и ответственные. Профили пользователей Описание предполагаемых групп пользователей. Сюда входит уровень их обучения (новички, опытные или профессионалы), конфигурация системы (операционная система, тип браузера, используемые дополнительные модули, способ выхода в Интернет, полоса канала и др.). Профили предназначены для выявления целевой аудитории сайта. Понятно, что если сайт ориентирован, в первую очередь, на детей, то необходимо соответствующим образом писать тексты и продумывать его структуру. Если групп получается больше, чем одна, что характерно для большинства сайтов, они ранжируются по степени их важности. Сценарии работы пользователей Сценарии определяют, что, по мнению разработчиков, может заинтересовать группы пользователей, описанных в предыдущем пункте. Кроме интересов, в сценариях указывается, как пользователи будут взаимодействовать с содержимым сайта - какие разделы посетят, какие применяемые на сайте технологии станут использовать. В качестве примера использования данной методики рассмотрим сайт абстрактной школы. Представленная информация дана в урезанном виде, только для лучшего понимания механизмов концептуального проектирования. При создании сайта, чем больше информации будет собрано, тем больше он будет соответствовать своим целям. Пример разработки сайта школы
Из описанного сценария в итоге формируется содержимое сайта, которое должно удовлетворять группы пользователей, на которые он рассчитан. Таким образом, проектирование сайта является первым и важным этапом, определяющий последующую работу над ним - дизайн, обработку графики, написание кода HTML. В данной статье затронута только первая часть информационного проектирования сайта, в которой отражаются интересы пользователей. Кроме концептуального, существует еще логическое и физическое проектирование, представляющих мнение проектной группы и разработчиков. Но и этого уже достаточно, чтобы лучше понять назначение и задачи своего проекта, создавать полезные и интересные ресурсы. |
Похожие:
 |
Руководство пользователя Книга № Импорт документов. Служебные операции в Системе Программное обеспечение для поиска, просмотра веб-сайтов, то есть для запроса веб-страниц для их обработки, вывода и перехода от... |
|
Руководство пользователя Приложение Б. Основные операции в системе... Программное обеспечение для поиска, просмотра веб-сайтов, то есть для запроса веб-страниц для их обработки, вывода и перехода от... |
 |
Основы проектирование сайтов Цель работы: Проектирования и тестирования (исследования) веб-сайтов с помощью редактора html-страниц |
|
Инженерный вестник Дона, №4 ( 201 7 ) Ключевые слова: интернет, веб-приложение, веб-сайт, угроза безопасности, атака, уязвимость, запрос, защита |
|
Ведущий редактор Художник обложки Корректоры Верстка Е. Строганова... Главный редактор Заведующий редакцией Руководитель проекта Ведущий редактор Художник обложки Корректоры Верстка |
|
Расширение страниц редактирования/просмотра Одна из самых распространённых операций при настройке приложения для конкретных задач. Расширение карточки может проходить с использованием... |
|
«Мониторинг скорости открытия Top-100 сайтов России» Настоящий информационный... Создание системы постоянного мониторинга скорости открытия популярных веб-страниц и оперативное выявление ресурсов (далее Система),... |
|
В. В. Пчеловод Последний гамбит В случае, если Ваша система работает некорректно, и автоматически будут заданы ошибочные номера страниц, то в режиме просмотра страницы... |
|
Работа Учащегося в аис «Образование» Для работы с системой «Образование» необходим веб-браузер. Желательно загрузить сторонний веб-браузер, например |
|
Пример веб-страницы Если открыть любую веб-страницу, то она будет содержать в себе типичные элементы, которые не меняются от вида и направленности сайта.... |
|
Учебно-методический комплекс дисциплин по дисциплине «Веб-дизайн» По дисциплине «Веб-дизайн» 090104. 65 – Комплексная защита объектов информатизации Форма подготовки очная |
|
Руководство для авторов Технические требования к оформлению рукописей Объём статьи допускается в форматах: 10 страниц, 12,5 и 15 страниц, включая нотные примеры, иллюстрации, cхемы, приложения, примечания,... |
|
Внутренний предиктор СССР основы социологии В случае, если Ваша система работает некорректно, и автоматически будут заданы ошибочные номера страниц, то в режиме просмотра страницы... |
|
Инструкция по размещению веб-квеста в Google ... |
|
Инструкция по настройке безопасного интернета Среди них сервисы безопасных и надежных dns-серверов, которые обеспечивают базовую веб-защиту и родительский контроль, фильтруя и... |
|
Руководство пользователя о бщий вид и основные элементы камеры Благодарим Вас за приобретение веб-камеры Logitech. Данное руководство содержит сведения об установке и эксплуатации веб-камеры |