ЛАБОРАТОРНАЯ РАБОТА 6.
Создание сайта.
Веб-дизайн (от англ. Web design) — отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений, то есть проектирование практичной, удобной, визуально привлекательной системы.
Существует термин "usability" - целая наука, которая рассказывает, как разрабатывается дизайн, ориентированный на пользователя - понятный и удобный. В русском языке однозначно сложно подобрать аналог этому термину, поэтому часто используется слово "эргономика" - наиболее соответствующий английскому "юзабилити".
Существую несколько основных типов сайтов по функциональному назначению:
Сайт-презентация (визитка) Такие проекты имеют обычно яркий, уникальный дизайн, графическое оформление преобладает перед текстовой информацией
Корпоративный сайт – представительство организации (фирмы, корпорации, спортивной команды, и т.п.) в сети Интернет.
Интернет-магазин - электронная площадка для купли-продажи товаров и услуг
Информационные ресурсы - это электронные библиотеки, газеты, порталы общения, новостные ленты, различные форумы.
Блог - особенный тип сайта, рассчитанный на то, что некую информацию будут не только читать, но и комментировать.
Портал.
Уникальный сайт - ресурс, полностью адаптированный под потребности и задачи конкретной компании или индивидуального лица.
Для нашей задачи подходит тип сайт-визитка – немного страниц, хороший графический дизайн.
Вершиной любого сайта (назовем ее нулевым уровнем) является его стартовая страница. На первом уровне размещены ссылки на основные разделы сайта. Эти ссылки являются основным навигационным элементом сайта, и обычно присутствует на каждой странице сайта. Эти два уровня присутствуют на любом сайте, который состоит более чем из одной страницы. Все последующие уровни являются не обязательными, и их количество зависит от того, как информация будет объединена в разделы. Рекомендуется на одной странице сайта размещать не более 1-2 обычных страниц информации.
Структура сайтов
Можно выделить три основных типа структуры сайтов:
1.Линейная структура:
2.Древовидная структура — это наиболее популярный вид структуры в современном сайтостроении.
3. Решетчатая структура — наиболее сложная из представленных структур.
Далее необходимо детально проработать структуру каждой страницы. Это важная часть в построении сайта, так как от этого зависит удобство пользования Вашим ресурсом. Насколько понятнее для пользователей у Вас получиться структура каждой страницы, настолько выше шансы, что посетителем сайта будет найдена нужная информация.
Пример структуры главной страницы:
Сверху находится Шапка сайта или Header. Обычно там располагается картинка, название сайта и какие либо элементы навигации. Например, ссылка «Главная» – на главную страницу или – ссылка на страницу с важной информацией. Как правило, шапка одинаковая для всех страниц.
Боковые колонки сайта обычно служат для размещения в них меню, элементов навигации, поиска по сайту, опросов, рекламы и т.д. Такие колонки могут располагаться как слева или справа, так и с обеих сторон сразу. Отсюда различают верстку в две или три колонки. Оба варианта весьма распространены в интернете и какой из них выбрать дело вашего вкуса.
Под основное содержимое сайта отводится центральная колонка. Занимает она 2/3 экрана для удобства посетителей при просмотре и изучении информации.
Процесс расположения элементов - текста и картинок на странице называется вёрсткой. Вёрстка бывает двух видов - табличная и блочная. Блочная вёрстка (или, как её ещё называют, вёрстка на "дивах" – тэги div) считается более продвинутым способом, однако она более сложна в освоении.
ЭЛЕМЕНТЫ WEB-СТРАНИЦ
Оформление фона
|
Заголовок
|
Текст
|
Изображение
|
Горизонтальная линия
|
Список
|
Таблица
|
Ссылка внутри документа
|
Ссылка на другую страницу
|
Для визуального построения гипертекстового документа будем использовать приложение Adobe Dreamweaver CS6. Создание новой страницы начинается с выбора опции Создать -> HTML.
В процессе создания страницы рекомендуется периодически ее просматривать, желательно в разных обозревателях (браузерах). Страница открывается в окне обозревателя по меню Файл - Открыть. Повторные просмотры лучше выполнять по кнопке Обновить. Разные элементы на страницу можно добавлять, выбирая их при помощи пункта меню "Вставка".
Более удобным вариантом может быть использование панели инструментов для вставки элементов на страницу. Если этой панели вы не видите, включить её можно, поставив галочку, как показано на рисунке.
1.Оформление фона.
Прежде всего задайте свойства страницы. Для этого перейдите в окне, используя кнопку Свойства страницы.
Сохранить файл со страницей в отдельной папке, он получит расширение .htm.
2. Заголовок
Для оформления заголовков используются специальные стили, можно воспользоваться меню Type - Paragraph Format. Назначение применяется к абзацу текста.
3. Текст. Все настройки текста делаются так же, как в Word.
4. Изображение.
По кнопке Image, находящейся на палитре инструментов, в палитре Inspector появляются инструменты для выбора и настройки изображения.
5. Горизонтальная линия. Горизонтальный разделитель бывает полезен для придания большей выразительности странице. Для него используется кнопка Line. Cвойства разделителя настраиваются в окне Inspector .
6. Список.
Последовательность абзацев можно представить в виде маркированного списка со специальными отметками в начале каждого абзаца:
Для этого абзацы нужно выделить фрагментом и из контекстного меню выбрать List. Свойства списка и отдельных элементов можно изменять из контекстного меню.
7. Таблица.
При вставке таблицы вы указываете ее основные параметры, например такие:
 Формат таблицы настраивается в окне свойств. В клетки таблицы можно заносить любую информацию, включая другую таблицу.
8. Ссылка внутри документа.
Для оформления ссылки на другую часть той же страницы нужно:
поставить метку (кнопка Anchor) в том месте страницы, куда будет осуществляться переход. В палитре Inspector следует выбрать атрибут Name. Каждая метка имеет свое уникальное имя, желательно писать его латинскими буквами;
задать ссылку. Текст ссылки помещается в нужное место страницы, выделяется фрагментом и форматируется как ссылка (кнопка Create link) в строке настроек текста. На палитре Inspector в поле Link набирается символ # и за ним без пробела имя метки.
При выборе этой ссылки в программе просмотра страницы документ переместится в окне так, чтобы место ссылки оказалось вверху окна (если место ссылки - в конце документа, то он разместится так, чтобы это место было видно в окне).
9. Ссылка на другую страницу.
Текст ссылки помещается в нужное место страницы, выделяется фрагментом и форматируется как ссылка (кнопка Create link) в строке настроек текста. Другая страница находится в другом файле, поэтому на палитре Inspector в поле Link выбирается нужный htm-файл.
ЗАДАНИЕ. Создать 2 Web-страницы, на которых содержатся ВСЕ описанные выше элементы. Объединить страницы ссылками так, чтобы по ним можно было переходить с одной страницы на другую и назад.
ЛАБОРАТОРНАЯ РАБОТА 7
«ТЭГИ HTML»
Web-страница, созданная в, обычно требует доводки вручную, т.е. непосредственной работы с тэгами. Эти действия можно выполнить непосредственно в DreamWeaver, изменяя исходный текст в окне представления кода страницы, или в любом текстовом редакторе, например, в Блокноте.
1. Название страницы
Название вашего документа, которое будет появляться в заголовке окна обозревателя, задается тэгом <TITLE>.
ЗАДАНИЕ. Дайте своему документу название ТЭГИ HTML.
2. Выравнивание заголовка
Расположение заголовка на странице (выравнивание) регулируется атрибутом Align.
ЗАДАНИЕ. Установить для заголовка выравнивание по правому краю (right).
3. Изображение с сопроводительным текстом
Пересылка изображений по сети обычно требует довольно много времени. Для экономии можно настроить обозреватель так, чтобы рисунки не пересылались. Те места страницы, где они должны были бы выводиться, останутся пустыми, и появится специальный стандартный ярлык. С помощью атрибута Alt можно задать текст, который будет выведен на месте отсутствующего рисунка.
ЗАДАНИЕ. Добавить к изображению сопроводительный текст.
4. Символьные примитивы
При выводе страницы на экран в программе-обозревателе производится удаление лишних пробелов из текста. В тех случаях, когда дополнительные пробелы действительно нужны, они оформляются в виде так называемых символьных примитивов – .
ЗАДАНИЕ. Удалить из текста ненужные символьные примитивы для пробелов.
5. Цветной текст
Цвет буквы задается в тэге <FONT> с помощью атрибута Color. Значение этого атрибута указывается либо названием цвета по-английски, либо набором базовых цветов из модели RGB. RGB-код можно узнать в среде PhotoShop в окне выбора цветов (поле с обозначением #).
ЗАДАНИЕ. «Раскрасить» какое-нибудь слово из 5-6 букв на вашей странице в разные оттенки одного тона, от более темных к светлым.
6. Маркировка списка
Каждый элемент списка можно отметить цветным маркером – кругом, диском или квадратом. В тэге <LI> для этих целей применяются атрибуты Type (значения circle, disk, square) и Color.
ЗАДАНИЕ. Изменить маркировку списка на своей странице так, чтобы каждый элемент был отмечен по-разному.
7. Редактирование ссылки
При переименовании файла, на который есть ссылка на странице, нужно менять значение атрибута Href.
ЗАДАНИЕ. Скопировать файл со второй Web-страницей в другой файл и отредактировать ссылку на него.
8. Разнообразие в оформлении таблицы
Для настройки толщины границы таблицы используется атрибут Border. Цвет границы задается значением атрибута Bordercolor. В каждой клетке таблицы можно указать свой цвет фона с помощью атрибута Bgcolor.
ЗАДАНИЕ. Применить перечисленные атрибуты для оформления таблицы.
|
