Учебное пособие Тамбов 2002 г. Авторы составители: Кузьмина Н. В, Инькова Н. А., Зайцева Е. А., Толстых С. Г. Основы работы в Интернет: Учебное пособие. Ч тамбов: Изд-во тгту, 2002. с. 40

Таблица 3.1 Переходить из ячейки в ячейку можно клавишей клавиатуры [Tab], причем если установить курсор в последней ячейке и нажать клавишу [Tab], то будет добавлена новая строка, а курсор переместится в первую ячейку новой строки. В том случае, если сайт будет разрабатываться для монитора с разрешением 800х600 пикселей, самым оптимальным будет поставить ширину таблицы – 760 пикселей. Задание 3.6 Создайте макет каждой страницы Вашего Web-сайта. Свойства таблицы. Значения, присваиваемые параметрам таблицы, определяют ее внешний вид. Щелкните правой кнопкой мыши на таблице и в контекстном меню выберите команду Свойства таблицы, вследствие чего откроется одноименное диалоговое окно (рис.3.5). Рисунок 3.5 Для изменения свойств таблицы нужно выполнить щелчок правой кнопкой мыши на таблице и, в контекстном меню выбрать пункт Свойства таблицы и заполнить диалоговое окно: привязка - размещение таблицы относительно других элементов страницы, плавающее - обтекание таблицы, указать ширину – определяется ширина таблицы в пикселях или процентах, указать высоту – определяется высота таблицы в пикселях или процентах, дополнение ячейки - расстояние между границей ячейки и ее содержимым, промежутки ячейки - интервал между ячейками, размер, цвет, светлая граница, темная граница – толщина рамки таблицы и ее цветовое оформление, цвет – цвет фона, Свойства ячейки. Выполните щелчок правой кнопкой мыши на любой ячейке таблицы и, в контекстном меню, выберите команду Свойства ячейки. Откроется одноименное диалоговое окно. Содержащиеся в нем элементы описаны ниже: Привязка по горизонтали Выравнивание содержимого ячейки по горизонтали. Возможны следующие варианты: по левому краю, по центру,. по правому краю. По умолчанию задано выравнивание по левому краю Привязкапо вертикали Выравнивание содержимого ячейки по вертикали. Возможны следующие варианты: по верхнему краю, по центру, выравнивание содержимого ячейки по опорной линии, по нижнему краю. По умолчанию задано выравнивание по центру Заполнение В этом поле указывается, на сколько строк вы хотите растянуть данную ячейку Заполнение ячеек В этом поле указывается, на сколько столбцов вы хотите растянуть данную ячейку Ячейка заголовка Форматирование ячейки как заголовка строки или столбца (тексту ячейки назначается полужирное начертание) Без переноса Запрет расстановки переносов в пределах ячейки в Web-броузере; в противном случае текст разбивается, если окно броузера слиш­ком узкое для его потного отображения Указать ширину Определение ширины ячейки в пикселях или в процентах от общей ширины таблицы (только в том случае, если установлена опция ширина таблицы). Если указанная опция выключена, ширина ячейки автоматически меняется в зависимости от длины вводи­мого текста или длины размещаемого в ней объекта Указать высоту Определение высоты ячейки в пикселях или в процентах от общей высоты таблицы (только в том случае, если активна опция высота таблицы). Если указанная опция выключена, высота ячейки автоматически меняется таким образом, чтобы вводимый текст или размещаемый в ней объект поместился полностью Границы В этой области окна можно определить цвет для разделительных и ограничительных линий, которые могут быть как одноцветными, так и двухцветными. В первом случае используйте поле ввода граница, во втором — два любых поля из трех предложенных. В последнем случае рамка получается объемной Фон Создание фона для ячейки (как цветного однотонного, так и содержащего изображения) Таблица 3.2 Внимание! Значения свойств можно изменить как для одной ячейки, так и для выделенного диапазона. При изменении ширины ячейки следите за тем, чтобы общая ширина ячеек в строке не превысила 100%, иначе часть страницы будет выходить за область экрана и появится полоса прокрутки. Щелкните на любой ячейке таблицы, откройте меню Таблица. Данное меню содержит четыре подменю. Команды Таблица описаны ниже: Рисов. Таблица Позволяет начертить таблицу подобно тому, как она рисуется каранда­шом на листе бумаги Вставка/Таблица При активизации данной команды открывается диалоговое окно Вставка Таблица. В нем можно задать параметры создаваемой таблицы, которая будет вставлена в той позиции, где находится курсор (если курсор расположен в ячейке другой таблицы, вторая таблица разместится в ней) Вставка/Строки или колонки В диалоговом окне Вставить строки или колонки определяется количество строк и столбцов, которые можно вставить выше, ниже, правее или левее выделенной области Вставка/Ячейки Вставляет новую ячейку слева от выделенной ячейки, которая смещается вправо Вставка/Надпись Предназначена для вставки пустой строки над таблицей. Данная строка связана с таблицей: при выделении или удалении таблицы заголовок также выделяется или удаляется. По умолчанию для заголовка таблицы установлено выравнивание по центру, но его можно выровнять по левому или по правому краю Удал. ячейки Служит для удаления выделенных ячеек Слить клетки Позволяет объединить несколько ячеек как в строке, так и в столбце Разъед. клетки В диалоговом окне можно задать разделение выделенных ячеек как на строки, так и на столбцы Выбор/ Ячейка, Строка, Колонка, Таблица Первая команда служит для выделения текущей ячейки, вторая — текущей строки, третья — текущего столбца, а четвертая — всей таблицы Распределить строки равномерно; Распределить колонки равномерно Первая команда позволяет установить одинаковую ширину для выделенных строк, вторая — для выделенных столбцов АвтоПос. Уменьшает ширину каждого столбца до тех размеров, которые непосредственно занимает находящаяся в них информация. Активизация данной команды приводит к тем же последствиям, что и отключение опции Ширина в диалоговом окне Вставка Таблица, т.е. ширина ячеек автоматически будет меняться в зависимости от объема вводимого текста или ширины размещаемого в них объекта Перевод/Текст в таблицу Позволяет преобразовать выделенный текст в таблицу. При активизации этой команды открывается диалоговое окно для выбора разделительного символа. Для разделения содержимого столбцов следует использовать запятые, а для разделения строк — маркеры абзацев Перевод/ Таблицу в текст Позволяет преобразовать табличные данные в текст, при этом содержимое каждой ячейки образует отдельный абзац Свойства/Таблица, Ячейка, Надпись Эти три команды предоставляют доступ к окнам свойств заглавия таблицы Свойства надписи, выделенного диапазона Свойства ячейки и таблицы Свойства таблицы Таблица 3.3 Теперь давайте перейдем на разрабатываемый Web-сайт и поработаем с таблицей на главной страничке, вставим нужные картинки и текст. Когда мы находимся в режиме Страница, то доступны команды меню, отвечающие за редактирование содержимого Web-страницы. В этом режиме окно FrontPage похоже на окно текстового редактора Microsoft Word. 3.9 Изображения на Web-странице Существует два основных способа, позволяющих вставлять на страницу графические изображения: c помощью диалогового окна Свойства страницы задается фон страницы. c помощью диалогового окна Рисунок, которое открывается через меню Вставка на страницу добавляется графическое изображение. П осле того, как изображение добавлено на страницу, вы можете изменить его с помощью панели инструментов (рис.3.6). Эта панель автоматически появляется при щелчке на изображение. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 Рисунок 3.6 1 - Вставка графического изображения из файла. 2 - Наложение текста. Можно менять вид шрифта (Меню Формат-Шрифт). 3 - Автоматически уменьшает изображение и организовывает ссылку на изображение в полную величину, которое нужно поместить в указанную директорию или изменить путь. 4 - Выбор абсолютной позиции для изображения. (При различных размерах экрана изображение будет оказываться в разных местах). 5,6 - Изображение располагается на переднем, заднем плане. 7,8 – Поворот изображения на 90 градусов против, по часовой стрелки. 9,10 – Поворот изображения по горизонтали, вертикали. 11,12,13,14 – изменение контрастности и яркости изображения. 15 – обрезка изображения. Выбрать нужную область и еще раз нажать на этот инструмент. 16 – Выбор цвета, который нужно сделать прозрачным. 17 – Переход в черно-белый режим. 18 – Изображение становится более бледным. 19 – Рисует объемную рамку. 20 – Сглаживает изображение после увеличения или уменьшения. 21, 22, 23, 24 – Позволяет выделить области и организовать по каждой гиперссылку. (Рисование ломаной заканчивается двойным нажатием л.кн.мыши). 25 – Скрывает изображение, показывает области гиперссылок. 26 – Восстанавливает исходное состояние рисунка. Параметры изображения устанавливаются также в диалоговом окне Свойства рисунка. Окно открывается посредством одноименной команды контекстного меню. В этом окне можно набить текст, который выводится при просмотре страницы в браузере в случае отсутствия графического изображения на Web- сайте (этот текст отображается, если в браузере установлена опция загрузки страниц без изображения). На вкладке Основное определяются следующие параметры: обзор, изменить – местоположение файла, тип – формат графического файла (“GIF”, ”JPEG”, ”PNG”), прозрачный – эффект прозрачности в GIF-изображении, чередов. строк – чересстрочное отображение при загрузке GIF-изображения, качество – степень качества JPG-изображения прогресс. проходы – число этапов, за которое отобразится JPG-изображение низкое разр. - изображение с низким разрешением, которое отображается при отсутствии оригинала или в процессе его загрузки текст - текст, который будет отображаеться при отсутствии изображения или в процессе его загрузки, адрес, обзор – адрес гиперссылки, конечный фрейм – уточнение параметров гиперссылки при использовании фреймовой структуры. На вкладке Внешний вид определяются следующие параметры: привязка – позволяет организовать обтекание изображения другими объектами. Для отмены обтекания текстом какого-либо объекта: Вставка→Прерыватель→Очистить оба отступа толщина границ – размер рамки вокруг графического изображения, горизонт. расстояния, вертикал. Расстояния - величина отступов от графического изображения, ширина, высота – размер графического изображения, хранить коэффициент – поддержка пропорций графического изображения. Задание 3.7 Разместите на Вашем Web-сайте графические изображения. 3.10 Размещение текста на Web-странице Front Page имеет интерфейс текстового процессора Word. Текст может быть введен с клавиатуры или скопирован из другого документа через буфер обмена и вставлен на страницу с помощью команды “Правк→Встав”. Изменить вид шрифта выделенного фрагмента текста можно с помощью кнопок панели инструментов (рис. 3.7) или в диалоговом окне Формат→Шрифт Рисунок 3.7 При редактировании выделенных абзацев можно использовать команды панели инструментов (рис.3.8) Рисунок 3.8 и команды меню Формат: Абзац – выбирается привязка (justify – выравнивание справа и слева), сдвиг, межстрочное расстояние. Маркеры и номера – подпункты простые маркеры и номера позволяют выбрать тип маркера. Подпункт маркеры изображения позволяет заменить типовые маркеры на графические изображения. Для этого нужно активизировать Указать рисунок→Обзор, выбрать графический файл на диске с помощью кнопки . Границы и тени – В подменю границы можно выбрать стиль границы, ее цвет и ширину, расстояние до текста. В подменю тени определяется цвет фона, текста. В качестве фона можно выбрать графическое изображение. Для перехода на новую строку в текущем абзаце используется команда Вставка→Прер→Да. В FrontPage форматирование выполняется в режиме WYSIWYG (что видите – то и получаете). Завершив формирование страницы, сохраните ее. Каждая страница сайта сохраняется отдельно командой Файл→Сохранить. В том случае, если на страницу вставлялось графическое изображение, то появляется окно Сохранить внедренные файлы. Необходимо: Изменить папку и выбрать папку images. Замечание. Не все шрифты поддерживают браузеры, и не все шрифты могут быть установлены на компьютере пользователя. Задание 3.8 Введите текст на ваши Web-страницы и отформатируйте его. 3.11 Просмотр Web-страницы в браузере В процессе создания Web-страницы периодически просматривайте ее с помощью закладки Просмотр и в браузере. Открыть Web-сайт в браузере Internet Explorer можно с помощью кнопки панели инструментов Front Page или запустить программу Internet Explorer, выбрать команду Файл→Открыть→Обзор, найти файл с:\имя папки\web\index.htm, выделить его и нажать последовательно кнопки Открыть и OK. Если вы хотите увидеть HTML-код вашей Web-страницы, выберите закладку HTML в нижней части окна Page. Если вы владеете языком HTML, то вы можете изменять HTML-код страницы. 3.12 Общие представления о языке HTML Следует отметить, что HTML не является языком программирования. HTML – это типичный язык разметки, т.е. с его помощью можно оформлять документы, создавать ссылки, но никак не писать программы. Даже специальные эффекты, которые можно увидеть на web-страницах, создаются не с помощью HTML, а с использованием дополнительных средств – например, встроенных в документ программ на языке JavaScript, или с использованием Java-аплетов. Любой браузер позволяет просмотреть исходный текст HTML-документа. Для IE (Internet Explore) это команда “в виде HTML” из меню “Вид”, а для Netscape – “View Source” из меню “View”. При создании Web-сайта вы используете язык HTML. В HTML-коде страницы содержатся указания на информацию, которую необходимо отобразить (текст и графика) или воспроизвести (звуковое сопровождение) в окне браузера, инструкции о том, как эта информация должна отображаться или воспроизводиться, а также ссылки на другие страницы. HTML – это язык форматирования, в котором для задания параметров форматирования используется система тегов. Тег состоит из имени, заключенного в угловые скобки, и необязательного набора атрибутов. Как правило, теги бывают открывающийся и закрывающийся, между которыми размещается содержимое тега (текст и другие элементы). Конечный тег имеет то же имя, что и начальный, с той разницей, что перед именем конечного тега ставится косая черта (/). Существуют теги, которые помещаются в начале и конце страницы (они определяют разделы страницы), теги, которые загружают на страницу рисунок, выполняют программы и влияют на отображение текста. HTML – текст представляет собой текст в формате ASCII. Гипертекстовая страница описывается на языке HTML и обрамляется парными маркерами: и Комментарий записывается внутри маркера и не отображается браузером: Страница состоит из заголовочной части и тела страницы . Вот так выглядит разметка пустой Web-страницы:

Похожие:

	Учебное пособие С 59 Общая теория социальной коммуникации: Учеб­ное пособие. — Спб.: Изд-во Михайлова В. А., 2002 г. — 461 с		Учебное пособие для преподавателей Заповедное дело: Пособие для преподавателей общеобразовательной школы -тамбов; ООО «Издательство Юлис», 2011. 00с
	Учебно-методическое пособие Тамбов 2002 г. I. Ббк 32. 81 II. Ав ...		Маленкова Л. И. М18 Теория и методика воспитания. Учебное пособие М18 Теория и методика воспитания. Учебное пособие. — М.: Педагогическое общество России, 2002. — 480 с. Isbn 5-93134-169-2
	1. Проблема «к-гия» Антропология: Хрестоматия. Учебное пособие / Авторы-составители: канд. Биол наук, доц. Л. Б. Рыбалов, канд. Биол наук, доц. Т. Е....		Прикладная математика Загузов И. С.,Головинский В. Н., Федечев А. Ф. и др. Введение в специальность (Механика). Часть II. Механика деформируемого твердого...
	Литература для подготовки к коллоквиуму Антропология: Хрестоматия. Учебное пособие / Авторы-составители: канд. Биол наук, доц. Л. Б. Рыбалов, канд. Биол наук, доц. Т. Е....		Бреус Е. В. Основы теории и практики перевода с русского языка на... Основы теории и практики перевода с русского языка на английский: Учебное пособие. 2-е изд., испр и доп. — М.: Изд-во урао, 2000....
	Основы педагогического мастерства Учебное пособие Учебное пособие к п н. Якушевой С. Д. предназначено для преподавателей и студентов (обучающихся по педагогическим специальностям...		Учебное пособие для студентов высших учебных заведений, обучающихся... Г46 Гигиена труда : учебное пособие / авт сост. Л. В. Козачук. — Балашов : Изд-во «Николаев», 2005. — 60 с
	Учебное пособие Издательство ТулГУ Бродовская, Е. В. Переговоры: стратегии, тактики, техники: Учебное пособие [Текст] / Е. В. Бродовская, А. А. Лаврикова. – Тула: Изд-во...		Международный опыт социальной работы нижний новгород 2002 М петрова И. Э., Сизова И. Л. Международный опыт социальной работы: Учебное пособие / Нижний Новгород, 2002. – 211 с
	Учебное пособие по дисциплине ен. 01 Математика составлено в соответствии... Учебное пособие предназначено студентам очной формы обучения. Данное пособие методические указания по выполнению самостоятельной...		Горелов А. А. Концепции современного естествознания: Учебное пособие для вузов / А. А. Концепции современного естествознания: Учебное пособие для вузов / А. А. Горелов. – М.: Владос, 2002. – 511 с.: ил
	Психология Учебное пособие Учебное пособие предназначено для студентов заочного отделения и обучающихся в сокращенные сроки		Учебное пособие М.: Руссобит-М, 2001. 1 Cd-rom математика. 5 класс....