Анализ сайта webformyself.com 23

Практикум

Практическая работа № 2.6 Разработка сайта «Животный мир»

Цель работы: вставка графических изображений, использование графических изображений в качестве гиперссылок, создание простых таблиц в программе KompoZer.

ЗаданиеУровень 2

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

Страница 1 (имя файла — index.htm)

Заголовок окна: Животный мир.

Заголовок страницы: Животный мир (шрифт — Comic Sans MS, стиль шрифта — Заголовок 1, размер — medium, тип выравнивания — по центру).

Гиперссылки (на страницу 2, страницу 3 и страницу 4).

В качестве гиперссылок необходимо использовать уменьшенные копии изображений из файлов bear.jpg, elephant.jpg и camel.jpg (высота изображения — 150 пикселей). Изображения необходимо уменьшить с помощью любого графического редактора и сохранить их под именами bear .jpg, elephant_.jpg и eamel_.jpg. Изображения расположить в один ряд (горизонтально). Первое изображение должно являться гиперссылкой на страницу bear.htm, второе — на страницу elephant.htm и третье — на страницу camel.htm.

Страница 2 (имя файла — bear.htm)

Заголовок окна: Медведь.

Заголовок страницы: Медведи (шрифт — Comic Sans MS, стиль шрифта — Заголовок 1, размер — medium, тип выравнивания — по центру).

Таблица с невидимыми границами из двух столбцов:

1 столбец: рисунок из файла bear.jpg;

2 столбец: текст (выравнивание — по ширине, шрифт — Verdana, размер — medium):

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

Обычно медведь передвигается вразвалку на всех четырех лапах, хотя иногда может встать на задние лапы и проковылять несколько шагов. Медведь — животное стопоходящее, как и человек, т. е. ступает на полную стопу. Если нужно, он переходит на галоп и бежит с впечатляющей скоростью до 50-60 км в час. Медведи умеют хорошо лазить, особенно не очень крупные виды, и часто даже спят на деревьях. Все они умеют плавать, но белый медведь в этом просто профессионал.

Гиперссылка: Назад (на главную страницу сайта).

Страница 3 (имя файла — elephant.htm)

Заголовок окна: Слон.

Заголовок страницы: Слон.

Таблица с невидимыми границами из двух столбцов:

1 столбец: рисунок из файла elephant.jpg.

2 столбец: текст (выравнивание — по ширине, шрифт — Verdana, размер — medium):

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

Гиперссылка: Назад (на главную страницу сайта).

Страница 4 (имя файла — camel.htm)

Заголовок окна: Верблюд.

Заголовок страницы: Верблюд.

Таблица с невидимыми границами из двух столбцов:

1 столбец: рисунок из файла camel.jpg;

2 столбец: текст (выравнивание — по ширине, шрифт — Verdana, размер — medium):

Верблюды — род млекопитающих семейства верблюдовых отряда парнокопытных. Представители почти исчезнувшей группы копытных, которая некогда была широко распространена по всему миру, кроме Австралии. Ближайшие родственники верблюдов — южноамериканские лама, альпака, гуанако и викунья. В настоящее время род представлен двумя одомашненными видами: одногорбым верблюдом, или дромедаром, и двугорбым верблюдом, или бактрианом. Их используют как вьючных и верховых животных. Дромедар достигает высоты 1,8 м в холке и 2,1 м в верхней точке горба. У бактриана ноги короче, и он массивнее. Верблюд в среднем может нести груз около 180 кг. Верблюжий караван идет со скоростью около 5 км/ч и в день преодолевает порядка 50 км.

Гиперссылка: Назад (на главную страницу сайта).

Следующая страница Практическая работа № 2.7 Разработка сайта «Наш класс»

Подписи к слайдам:

Слайд 1

«Основы сайтостроения»

Слайд 2

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

Слайд 3

Веб-сайт (от англ. «место в сети») — место в Интернете, которое определяется своим адресом (URL), имеет своего владельца и состоит из веб-страниц , которые воспринимаются как единое целое.

Слайд 4

Программы для просмотра Web — страниц Примеры браузеров: Internet Explorer, Mozilla Firefox Opera Google Chrome. Веб-обозреватель, браузер (от англ. Web browser)

Слайд 5

Этапы создания сайта Определение цели создания сайта Выбор темы сайта Определение содержания сайта Построение структуры сайта Разработка дизайна сайта Регистрация и размещение сайта в Интернете

Слайд 6

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

Слайд 7

Язык HTML ( от англ. HyperText Markup Language) – это язык гипертекстовой разметки. Язык гипертекстовой разметки HTML HTML-страница – это по сути текстовый файл, который можно создать с помощью обычного Блокнота. Помимо текста, который будет выводиться браузером при просмотре такой странички, этот файл содержит невидимый для программы навигации по Сети и пользователя код. Вот этот код и есть язык гипертекстовой разметки – HTML.

Слайд 8

Пример

Слайд 9

Блокнот ( для создания страницы ) Internet Explorer (для интерпретации файлов) Программы для создания HTML – файлов:

Слайд 10

Структура HTML -файла

заголовок окна … … …

Слайд 11

Цвет фона, цвет шрифта … BODY > Между ними располагаются команды, следуя которым браузер выводит информацию в окно документа

Задает цвет фона и цвет шрифта на протяжении всего документа. Цвет фона задается один раз для всего документа.

Слайд 12

Заголовки Текст заголовка hn > n — 1…6, заголовок n -го уровня HTML поддерживает заголовки шести уровней при помощи конструкции:

Слайд 13

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

горизонтальная линия; size — меняет толщину линии noshade – выводит горизонтальные линии плоскими Бегущая строка

Слайд 14

Абзац …Р> Браузер выполняет команду Р следующим образом: Перед абзацем выводится пустая строка. Абзац выравнивается по левому краю. Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML-коде. Перенос текста на новую строку происходит тогда, когда очередное слово не помещается в экранной строке, а не тогда, когда новая строка начинается в HTML-коде.

Слайд 15

Атрибуты абзаца — выравнивает абзац по левому краю — выравнивает абзац по правому краю — выравнивает абзац по центру — выравнивает абзац по ширине

Слайд 16

Оформление текста текст Изменение цвета текста внутри документа … BlG> Укрупнение шрифта по отношению к текущему Уменьшение шрифта по отношению к текущему текст Изменение размера шрифта … Выделение моноширинным шрифтом … STRONG > Усиление текста. Браузер отображает это выделение полужирным шрифтом. …С I ТЕ> Выделение небольших внутристрочных цитат. Большинство браузеров изображает текстовую ссылку курсивом (наклонным шрифтом). … PRE > браузер выводит текст на экран так, как он записан в программе, — со всеми пробелами и концами строк.

Слайд 17

Специальные символы Некоторые символы, введенные в HTML документ будут интерпретироваться не так, как задумал автор. Это, например, символы «» , используемые для указания тегов. В этих случаях можно вводить нужные символы с помощью специальных кодов. Коды начинаются с символа » амперсанд»(&). За ним следует название символа либо его числовой код в десятичной или шестнадцатеричной системе. Завершает код символ «точка с запятой»(;). Имя Код Вид Описание » » » двойная кавычка & & & амперсанд

Слайд 18

Таблица задаётся парой тегов

. Между этими тегами задаются строки таблицы, тегов … Внутри строк задаются клетки (ячейки) таблицы, теги … ). Создание таблиц

Слайд 19

Пример задания таблицы, состоящей из трёх строк и двух столбцов:

Ссылка на основную публикацию