Главная
Интернет
Макет веб страницы в ворде. Сохранение документа в виде веб-страницы. Окончательное сохранение документа в качестве веб-страницы

Макет веб страницы в ворде. Сохранение документа в виде веб-страницы. Окончательное сохранение документа в качестве веб-страницы

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

Редакторы HTML-документов обычно принято разбивать на две группы. К первой группе относятся так называемые редакторы тэгов, которые предоставляют возможность записывать коды непосредственно на языке HTML и имеют специальные дополнительные возможности для облегчения процесса включения тегов в создаваемый документ. Современные редакторы тегов имеют дополнительные инструменты для генерации элементов HTML. К ним относятся программы-мастера, шаблоны и иные средства, упрощающие работу с типичными HTML-элементами типа списков, таблиц, форм и фреймов. Некоторые редакторы проверяют синтаксис записи тэгов, что позволяет быстрее находить ошибки форматирования HTML-документов. Одним из наиболее популярных редакторов этой группы является программа HotDog Web Editor, разработанная компанией Sausage Software. Этот редактор используется разработчиками на протяжении уже многих лет и сильно менялся в процессе своего развития.

К другой группе относятся так называемые редакторы WYSIWYG (What You See Is What You Get - что видишь, то и получаешь), типичными представителями которой являются Netscape Composer (редактор, входящий в состав пакета Netscape Communicator) и Microsoft FrontPage. Редакторы такого рода позволяют изменять внешний вид и компоновку страницы визуально, не вдаваясь в подробности реализации в виде тэгов. При этом результирующий HTML-код документа создается автоматически. При работе с этими редакторами разработчик может вообще не представлять правил записи тегов HTML и целиком положиться на возможности соответствующего редактора. С другой стороны такие редакторы могут не обеспечивать гибкости, свойственной работе на уровне тэгов, и не обладают всеми возможностями разметки языка HTML.

На современном этапе деление редакторов на две группы становится все более и более условным. Редакторы тегов все более приближаются по своим возможностям и удобству работы к редакторам WYSIWYG, а последние, в свою очередь, становятся все более мощными и гибкими, позволяя включать все более сложные элементы. Скорее всего, в ближайшем будущем деление редакторов на группы исчезнет.

Одним из средств создания и редактирования HTML-документов является текстовый процессор пакета Microsoft Office, носящий название Microsoft Word. В принципе любая версия этой программы, как обычный текстовый редактор, может служить в качестве HTML-редактора (о различиях в возможностях версий пакета говорится в конце этой главы). Удобство его использования для редактирования HTML-документов определяется широким распространением Microsoft Word среди пользователей для создания отчетов, писем, документации, анкет и даже брошюр и книг. Огромное количество людей, использующих в своей повседневной деятельности Microsoft Word, становятся потенциальными разработчиками HTML-документов. В версии Microsoft Word 97 добавлены специальные возможности для работы с HTML-документами, которые переводят его в разряд мощных средств создания страничек для Интернета (рис. 8.1).

В данной главе будут рассмотрены основные возможности текстового процессора Microsoft Word 97, используемые при редактировании HTML-документов.

Создать новую Web-страницу с помощью Microsoft Word можно одним из двух способов: с помощью мастера или шаблона, либо преобразовать существующий документ Word в формат HTML, используемый для Web-страниц. Для использования мастера (или шаблона) достаточно воспользоваться вкладкой Web-страницы меню Создание документа . Далее следует воспользоваться указаниями мастера, отвечая на его вопросы и заполняя соответствующие поля и графы нужным текстом. Выполнение этих действий не вызовет трудностей у пользователей, владеющих основами работы в Microsoft Word. Другим способом является преобразование существующего документа Word в формат HTML. Это простейшая операция, однако здесь могут возникать некоторые проблемы, описываемые ниже в данной главе.

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

Так же, как и в документах Word, в Web-страницах можно создавать списки. Списки в HTML могут быть маркированные (Bulleted) и нумерованные (Numbered). В маркированных списках могут употребляться стандартные маркеры, реализация вида которых возлагается на браузер, а также графические изображения, загружаемые из отдельного файла. Для нумерованных списков могут быть использованы арабские или римские цифры, а также латинские буквы. Более подробная информация о правилах организации списков приводится в соответствующей главе.

Создание списков выполняется точно так же, как и в обычных документах Word. Выделите текст, который должен быть представлен в виде списка, и выберите пункт Список из меню Формат . Будет выдана панель Список , содержащая две вкладки - Маркированный (рис. 8.2) и Нумерованный (рис. 8.3).

Можно также воспользоваться кнопками панели инструментов Нумерация 111 или Маркеры ill

Рис. 8.2. Выбор вида маркированного списка

Рис. 8.3. Выбор вида нумерованного списка

При создании маркированного списка можно выбрать один из трех стандартных маркеров (последние три элемента первой строки, изображенные на рис. 8.2) или одно из предлагаемых графических изображений. Воспользовавшись кнопкой Другой можно в качестве маркера выбрать любой существующий графический файл. В зависимости от выбора типа маркеров список в HTML будет реализован по-разному. Если выбран один из трех стандартных маркеров, то список будет сформирован с помощью тега

    и элементов списка
  • . При этом будет генерироваться одна из следующих строк кода HTML:

      - для первого стандартного маркера (маленький черный кружок)

        - для второго маркера (квадратик)

          - для третьего маркера (закрашенный квадратик)

          Приведем пример. Пусть был создан следующий текст:

          Первый элемент списка

          Второй элемент списка

          Третий элемент списка

          При разметке этого текста как списка и выборе второго стандартного маркера будет сгенерирован следующий фрагмент кода HTML:

          • Первый элемент списка

          • Второй элемент списка

          • Третий элемент списка

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

            использоваться не будет. Здесь каждый элемент списка будет выделен в отдельный абзац тэгом

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

            Первый элемент списка

            Второй элемент списка

            Третий элемент списка

            Примечание

            Различие в использовании стандартных и графических маркеров проявляется не только в реализации, но и возможности отмены списка. Если были выбраны стандартные маркеры, то список можно отменить так же, как это делается при работе с документом Word. Достаточно выделить список и выбрать режим Нет в панели Список или же нажать соответствующую кнопку на панели инструментов. Если же были выбраны графические маркеры, то отменить список не удается. Необходимо удалить все графические маркеры по отдельности, выделяя их и нажимая клавишу .

            Перейдем к рассмотрению нумерованных списков. Нумерация списков на Web-страницах почти не отличается от нумерации документов Word. Отличие состоит в том, что для Web-страниц невозможна автоматическая нумерация структурных списков и заголовков.

            В зависимости от выбранного формата нумерации списка будут генерироваться следующие коды:

              - для нумерации арабскими цифрами

                - большими римскими цифрами

                  - маленькими римскими цифрами

                    - прописными латинскими буквами

                      - строчными латинскими буквами

                      Например:

                      1. Первый элемент списка

                      2. Второй элемент списка

                      3. Третий элемент списка

                      Примечание

                      Выбрать формат нумерованного или маркированного списка можно только при использовании меню. Если вы воспользовались соответствующими кнопками панели инструментов, то будет выбран формат, использованный последним.

                      Хотя автоматическая нумерация многоуровневых списков не предусмотрена, списку можно придать многоуровневый вид, изменяя размер отступа и используя различные формы нумерации. Для этого нужно выполнить следующие действия:

                      1. Выделите текст, являющийся верхним уровнем списка.

                      2. Выберите нужный формат нумерации из вкладки Нумерованный панели Список .

                      3. Сдвиньте текст, принадлежащий следующему уровню списка, установив курсор в начале каждого абзаца или строки и нажав клавишу . Хотя табуляция не применяется в HTML, в редакторе Word символы табуляции списка будут преобразованы в отступы.

                      4. Выберите формат нумерации для очередного уровня.

                      5. Для каждого уровня в списке повторите шаги 3-4.

                      Примечание

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

                      При создании Web-страницы для текста и ссылок можно определить используемые по умолчанию цвета. Для этого следует воспользоваться командой Цвет текста меню Формат (Format/Text Colors). Появится панель, показанная на рис. 8.7, в которой можно задать цвет текста, цвет ссылок и цвет ссылок, соответствующий уже посещенным страницам. Зададим для примера в качестве цвета текста - синий, цвета ссылок - бирюзовый, а цвета просмотренных ссылок - зеленый. Заданные значения определят параметры тега :

                      Рис. 8.7. Выбор цвета всего текста для HTML-страницы

                      Рис. 8.8. Выбор цвета фрагмента текста для HTML-страницы

                      Эти параметры задают цвета по умолчанию для всего документа. Если же необходимо задать цвет для выбранного фрагмента документа, то следует использовать кнопку Цвет шрифта на панели инструментов или команду Шрифт меню Формат (рис. 8.8). Если для фрагмента текста будет выбран, например, красный цвет, то результат такого выбора в HTML-документе будет отражен так:

                      Этот текст будет отображаться красным цветом

                      Читатель Web-страницы может задать свои собственные устанавливаемые по умолчанию цвета в браузере. Чтобы текст и ссылки изображались в выбираемых по умолчанию цветах браузера, задайте значение Авто во всех трех списках панели Цвета текста .

                      При создании Web-страниц в редакторе Word можно использовать многие средства форматирования, предназначенные для форматирования документов Word. Например, можно присвоить тексту полужирное начертание с помощью кнопки Полужирный или выбрать стиль Заголовок 1 из списка стилей. Задание элементов форматирования текста определяет вставку соответствующих тегов HTML в генерируемый код.

                      Панель Шрифт , вызываемая из меню Формат , служит также для задания типа шрифта, его размеров и форматирования выделенных фрагментов текста. Установка флажков, соответствующих каждому из шести доступных в данной панели эффектов, приводит к вставке в HTML-код следующих тэгов:

                      - Полужирный

                      <I > - Курсив

                      - Подчеркнутый

                      - Зачеркнутый

                      - Верхний индекс

                      - Нижний индекс

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

                      Для быстрого перехода к следующему доступному размеру шрифта используйте кнопки Увеличить размер шрифта и Уменьшить размер шрифта .

                      Для каждого абзаца в HTML генерируется тег начала абзаца

                      А также тег конца абзаца

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

                      Примечание

                      В справочной системе Word 97 "для создания абзацев без интервалов" (именно так сформулировано) ошибочно предлагается воспользоваться клавишами +. Напомним, что совокупность клавиш + обычно используется при редактировании документов Word для принудительного перехода на следующую страницу. При преобразовании документов Word в HTML в этом случае будет лишь создан дополнительный абзац, а при редактировании Web-документов клавиши + вообще недопустимы.

                      Форматирование, не поддерживаемое языком HTML или некоторыми средствами просмотра Web, недоступно в разделе редактирования Web-страниц редактора Word. В число таких средств входят эффекты форматирования символов Приподнятый , С тенью и Утопленный , междустрочный интервал, поля, межсимвольный интервал, кернинг, параметры обтекания текста и интервалы между абзацами. Не следует использовать символы табуляции, так как многие браузеры изображают их как пробелы; вместо них для сдвига первой строки текста вправо можно использовать отступ.

                      Для изменения отступа текста используйте кнопки Увеличить отступ и Уменьшить отступ . С точки зрения языка HTML, отступы реализуются путем обрамления текста парой тегов

                      и . Формально данный тег определяет начало списка и подразумевает использование тэгов элементов списка
                    1. . Однако здесь тег
                    2. не используется, а тег нужен только для организации отступов, которые невозможно задать в HTML естественным образом. Вложенные друг в друга теги подразумевают многоуровневые списки, причем каждый уровень сдвинут на один отступ по отношению к предыдущему. Например:

                      Этот текст имеет один отступ

                      Этот текст имеет два отступа

                      Примечание

                      Аналогичный подход для создания отступов применяют и другие HTML-редакторы. Например, Netscape Composer (так же, как и редактор пакета Netscape Navigator Gold) для отступов используется аналогичный прием, только в качестве тега списка применяется

                        .

                        Примечание

                        При увеличении отступа Word часто генерирует сразу два тега

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

                        И дл я изменения выравнивания текста используйте кнопки По левому краю , По центру и По правому краю . Заметим, однако, что текст на Web-страницах невозможно выровнять по ширине.

                        Примечание

                        Невозможность выравнивания текста на Web-страницах по ширине отмечается в справочной системе Microsoft Word. Действительно, в панели инструментов Форматирование при работе с HTML-документом нет кнопки выравнивания по ширине. Это связано с тем, что в спецификации HTML вплоть до версии 3.2 для параметров выравнивания тега абзаца

                        Не было выравнивания по ширине. Однако в настоящее время ведущие браузеры поддерживают эту возможность,реализуемую следующим образом:

                        . Более того, даже в Microsoft Word это уже заложено. Если работать с документом Word, в которой имеется текст, выровненный по ширине, а затем преобразовать его HTML документ, то появятся абзацы, имеющие приведенный выше код.

                        Не все догадываются, насколько мощные инструменты по работе с текстом нам предлагает Microsoft Word. Благодаря этому редактору мы создадим свой первый функциональный сайт в интернете бесплатно. При этом никакими специфическими знаниями владеть не надо. Достаточно наличия минимальных навыков по работе с данным широкоизвестным текстовым редактором.


                        Первые шаги по созданию сайта в Ворде

                        Создаём свой сайт в Ворде (здесь и далее имеется в виду Microsoft Word), как говорится, с чистого листа. Можно начать со ставшей уже классикой фразы «Hello world», что в русском переводе: «Здравствуй мир». Хотя я бы написал на своей первой страничке в интернете так «Это моя первая страница в интернете. Ура!». Пишем эту (или любую другую) фразу в Ворде на вновь созданной страничке, выбираем в меню «Файл» (в Word 2003), или после нажатия на кнопку «Office» (вверху слева в Word 2007), команду «Сохранить как» и сохраняем документ как «Веб-страница (*.htm; *.html)». Название придумайте сами, но оно должно быть на латинице, например «stranitsa», рекомендую назвать её «index» – дальше нам это очень пригодится при размещении сайта в интернете. Веб-страницы называют ещё html-страницами (от названия языка html — языка гипертекстовой разметки, на базе которого основаны все сайты в интернете).

                        Таким образом, вы создали свою первую страницу: index.htm. Кликните по файлу (два раза конечно ), и вы увидите свою веб-страницу в просмотрщике веб-страниц или браузере (от английского «browser» – обозреватель), установленном на вашем компьютере по умолчанию.

                        На сегодняшний день существует несколько популярных браузеров. Это Internet Explorer, Firefox, Opera, Chrome и другие. Каким браузером пользоваться – зависит только от ваших предпочтений.

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

                        Небольшое отступление. Вы можете написать любой текст в Ворде на вашей новой странице и точно в таком же виде его увидят любые посетители вашего сайта (разместим нашу страницу в интернете во второй части цикла статей по созданию сайта в Ворде). На самом деле не всё так безоблачно, так как не все браузеры совместимы между собой на 100% (та же ситуация с поддержкой интернет стандартов отображения страниц) и бывает, что отображение страницы в браузере и в Ворде не полностью совпадают. Есть, к счастью, очень простой и универсальный способ решения данной проблемы – после сохранения нашей странички, мы просмотрим её в паре браузеров от разных производителей, например в Internet Explorer’е (установлен у вас по умолчанию) и в Firefox’е. Благо все браузеры бесплатны. Таким образом, мы будем уверены, что любой пользователь в интернете увидит тоже, что и мы. Любые несоответствия в браузере и в Вордовском документе мы тут же подкорректируем (например, выравнивание), обычно это делается изменением свойств элемента страницы Ворда (строки, слова, таблицы). После сохранения документа убеждаемся, что у нас всё хорошо и продолжаем работать дальше.

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

                        Теперь начинайте экспериментировать с самыми базовыми элементами Ворда. Нарисуйте таблицу любой сложности, вставляйте любые рисунки, клипы, фигуры (доступно в меню «Вставка»), меняйте фон страницы и цвета отдельных элементов (например, цвет у каждой ячейки может быть разным). Делайте, что душе угодно. Ворд предоставляет массу готовых решений для оформления вашего документа (веб-страницы в нашем случае).

                        В Ворде работа с таблицами происходит в разы быстрее и удобнее чем в любом современном веб-редакторе.

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

                        Проделайте следующее. Нарисуйте в Ворде любым удобным вам способом таблицу 6×6 ячеек. Закрасьте ячейки в шахматном порядке красным цветом. Для простоты вы можете указать в свойствах ячейки красный цвет и на каждой ячейке, которую необходимо окрасить, нажать «F4» (копирование формата). Пример таблицы на рисунке внизу.

                        Вы можете воспользоваться для практики уже готовыми файлами с примерами в ворде. Загрузите zip-архив с этим и другими примерами. Выделите таблицу, кликнув левой кнопкой мыши на квадратике с крестиком в левом верхнем углу таблице и по правому клику мышки выберите «Границы и заливка». В открывшейся вкладке «Граница» установите «Тип»: Нет.

                        Ваша таблица будет иметь невидимую окантовку (бордюр) и другие линии. Далее сохраняйте ваш документ в виде веб-странички и просматривайте её в браузере. На этом примере был показан основной принцип работы со страницами при помощи таблиц, т.е. мы заполняем ячейки необходимой информацией и потом делаем все линии таблицы невидимыми.

                        Когда мы начнём работать с основным материалом на странице, то настойчиво рекомендую вам сохранять Вордовский файл в качестве веб-странички В ОТДЕЛЬНЫЙ ФАЙЛ!!!, тот же index.htm, к примеру. Т.е. у вас будет 2 рабочих файла. Один Вордовский, с расширением.doc (или.docx, в зависимости от версии Ворда) – основной файл, который вы будете редактировать, и другой – файл веб-страницы с расширением.htm. Веб-страницу мы будем открывать в браузере и сравнивать её дизайн с исходным дизайном в Ворде на случай возможных несоответствий.

                        Почему лучше делать именно так? Потому что при сохранении Вордом документа в веб-страницу, часть объектов может быть преобразована в картинку, которую уже нельзя будет подредактировать.

                        Продвинутые инструменты Ворда для украшения веб-страницы

                        Самые интересные эффекты для оформления веб-страницы, а без этого никуда не деться, доступны в панели инструментов «Рисование». Если эта панель у вас не активна, то кликните правой кнопкой мыши в любом месте в области, где находятся панели инструментов и поставьте галочку рядом со словом «Рисование».

                        Вы можете выбрать любую автофигуру из множества доступных в меню «Автофигуры» панели инструментов «Рисование».

                        Любые инструменты, входящие в панель инструментов «Рисование», можно найти разными способами. Первый способ вам уже известен, а второй способ - в главном меню выбрать «Вставка» и перейти к подменю «Рисунок» (для Word 2003). В Ворде следующих версий (Word 2007 и далее) интерфейс отличается большей интеллектуальностью и работать там уже значительно легче и быстрее, здесь при выборе меню «Вставка» на верхней панели все значки инструментов уже присутствуют.

                        Покажем небольшой пример интеллектуальности ворда, начиная с 2007 версии и старше. Например, мы рисуем любую автофигуру в Ворде 2007 и сразу же открывается дополнительная вкладка Средства рисования\Формат, где есть возможнотсь применить к фигуре любой доступный эффект. Причем результаты применения эффекта можно увидеть мгновенно, в отличии от Ворда 2003. Но, тем не менее, конечный результат будет один и тот же. Поэкспериментируйте сами.

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

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

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

                        Делаем полноценный веб-сайт

                        Разобравшись с некоторыми возможностями Ворда, приступаем к созданию полноценного веб-сайта, который уже будет пригоден для подработки в качестве интернет агента банка. Применив все предыдущие наработки, мы получаем первую (главную) страницу нашего сайта.

                        Этот пример вы можете скачать и подредактировать, дополнив вашим текстом. Для удобства на страницу уже добавлены картинки актуальной на сегодняшний день линейки продуктов Москомприватбанка (Приватбанк в России). В последствии вы можете их заменить на другие (поиск вам в помощь).

                        Что нового в данном примере сайта для нас:

                        1) В первой строке таблицы файла agentbankanew.doc присутствуют 3 гиперссылки.

                        Изображение карты и текст «Подробнее о карте…» ссылаются на существующую страничку kreditka.htm. А кнопка «заказать» является уже продающей ссылкой, которая переправляет заинтересовавшегося посетителя на сайт банка. Данная ссылка включает ваш идентификатор , который присваивается вам после регистрации агентом банка . Вставить гиперссылку элементарно. Выделяем любой текст, или объект и, нажав на правую кнопку мышки, выбираем «Гиперссылка». Кнопочку «Гиперссылка» можно найти также на панели инструментов «Стандартная», которая всегда на виду (Word 2003), или в верхнем меню «Вставка» (Word 2007). В правом верхнем углу нажимаем «Подсказка» и вводим текст, который будет отображаться в виде подсказки при наведении указателя мыши на ссылку. Убедитесь в этом сами.

                        Итак, когда мы ссылаемся на существующий файл в нашем рабочем каталоге, мы просто указываем этот файл. А ссылку для кнопки «Заказать» вы берёте с агентского сайта после регистрации агентом и вставляете в поле «Адрес» внизу окошка «Добавление гиперссылки».

                        В продающей ссылке http://agent.privatbank.ru/branches/product/21/XXXX/ самые последние XXXX заменяются на ваш идентификационный номер (ID). Как получить идентификационный номер подробно описано в статье из цикла статей «Руководство по получению дополнительного дохода в Москомприватбанке в трёх шагах».

                        Чтобы добавить новую ссылку вы выделяете текст или объект левой кнопкой мышки, затем по нажатию правой кнопки мышки выбираете «Гиперссылка». Чтобы изменить или посмотреть адрес существующей гиперссылки вы наводите на неё указатель мышки, не нажимая левой кнопки, и СРАЗУ ЖМЁТЕ ПРАВУЮ КНОПКУ МЫШКИ и выбираете «Изменить гиперссылку…».

                        2) Вверху страницы мы создаём меню, где ссылаемся на все банковские продукты на страничке. Это делается для упрощения навигации по страничке и дополнительного удобства посетителя вашей странички. Для удобства навигации в редакторе Ворд (внутри страницы, а также между разными документами или веб-страницами) предусмотрена панель навигации "Веб-узел", на которой можно пользоваться стрелками для быстрого перехода, как в браузере при работе в интернете.

                        Чтобы сослаться на место внутри документа, мы делаем закладку, выделив любое место документа (слово, строку, картинку и т.д.).

                        3) Мы добавляем дополнительные страницы с более подробным описанием продукта, т.к. краткого описания на главной странице явно не достаточно, а писать большой текст описания сразу для всех продуктов – это дурной тон. Дизайн страниц с подробным описанием можно оставить похожим на главную страницу – всё по вашему усмотрению. Вы можете использовать готовую страницу из статьи цикла статей «Руководства по получению дополнительного дохода в Москомприватбанке в трёх шагах» с описанием флагманского продукта Приватбанка - , только в данном случае необходимо переименовать веб-страницу с описанием кредитки (с index.htm на kreditka.htm), т.к. мы ссылаемся на подробное описание кредитки с названем файла kreditka.htm. Подробные описания остальных продуктов сделаете сами, благо информации по ним достаточно.

                        4) Необходимо обратить внимание на информационное наполнение страницы (контент). Здесь стоит придерживаться общепринятых стандартов, а если проще, то правил хорошего тона. Пусть это будет приветствие в начале страницы, краткое описание организации (в нашем случае - банка). Вы можете, кстати, для информации о банке сделать отдельную страницу. Внизу страницы должны быть ваши контактные данные, ведь у посетителей наверняка появятся вопросы. И они их смогут задать на указанную вами электронную почту, аську или телефон. Возможно, информацию в конце страницы вы дополните интересными ссылками или чем то другим – по вашему усмотрению (весь интернет перед вами в качестве примера). Очень важный момент: правилом хорошего тона считается наличие ссылки на сайт, откуда вы взяли (или частично взяли) материалы для вашего сайта. И конечно, для любого сайта важен уникальный материал, что положительно скажется на индексации вашего сайта поисковиками, но это уже отдельная обширная тема не для данной статьи.

                        Окончательное сохранение документа в качестве веб-страницы

                        После того, как последние штрихи в создании сайта будут сделаны, необходимо грамотно преобразовать наш документ в веб-страницу. Есть здесь несколько нюансов, которые очень желательно не забыть - обеспечение полного визуального соответствия исходного документа в ворде с сохранённой веб-страницей и соответствие веб-страницы общепринятым рекомендациям по информационному наполнению сайта при размещении его в интернете . При сохранении файла в виде веб-страницы мы выбираем тип файла: "Веб-страница с фильтром" - это делается для сокращения объёма файла (из него убираются ненужная информация, которая необходима лишь для редактирования в Ворде и не имеет значения для браузера). Далее обязательно надо придумать правильный заголовок для веб-страницы. Это не название файла, а название веб-страницы, которое будет отображаться в строке заголовка браузера.

                        После окончательного сохранения документа в виде веб-страницы ещё раз внимательно посмотрите на полученную веб-страницу в нескольких браузерах. Если вы видите несоответствия (чаще всего проблемы с выравниванием), то подкорректируйте вордовский документ. У вас уже есть готовая веб-страница, которую можно размещать в интернете, но есть один нюанс. Ворд не вставляет в веб-страницу один специфический элемент (так называемый, ). На первый взгляд это не критично, но всё же у браузеров может возникнуть проблемы при интерпретации нашей веб-страницы (проблемы могут возникнуть и с поисковиками - без данного элемента поисковик может считать вашу страницу небезопасной, проверено на собственном опыте). Прочитайте выдержку из справочника:

                        Элемент предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

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

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

                        Подведём итоги

                        После завершения работы над сайтом (создания и заполнения материалом дополнительных и главной страниц) мы получаем бесплатно полноценный сайт – описание вашей деятельности в интернете, без чего ни о какой нормальной подработке и речи быть не может. Несколько несложных действий, описанных в части 2 цикла статей по созданию сайта , позволят увидеть ваш сайт не только вам на собственном компьютере, но и всем посетителям вашего сайта (потенциальным клиентам). Прочитайте, на сайт и ожидайте первых интернет-продаж!

                        ТЕМА 8
                        СОЗДАНИЕ                         WEB -СТРАНИЦ С ПОМОЩЬЮ WORD

                        В качестве редакторов, упрощающих создание Web -сайтов, можно использовать приложения Microsoft Office – Word , Excel , PowerPoint и другие. При этом пользователь может не знать язык HTML и иметь привычную среду для оформления документа – WYSIWYG (что вижу, то и получаю). Огромное количество людей, использующих Word в своей повседневной работе становятся потенциальными разработчиками HTML -документов.

                        Создать Web -станицу в Word можно двумя способами : с помощью мастера или шаблона, либо преобразовав существующий документ Word в формат HTML . При этом Word сам генерирует тэги HTML , хотя и не оптимальным образом.

                        Первый способ создания HTML -документов достаточно прост – надо начать создание документа «с нуля» и только следовать советам Мастера и использовать те средства, которые имеются в меню программы.

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

                        Одной из отличительных особенностей HTML -документов является то, что сам документ содержит только текст, а все остальные объекты встраиваются в документ в момент его отображения Браузером с помощью специальных тэгов и хранятся отдельно. При сохранении HTML -файла в месте размещения документа Word создает на диске папку, в которую помещает сопутствующие ему графические элементы оформления. Например, при сохранении файла с рисунками - frieds . htm , Word создает папку frieds .files , в которой и разместит все рисунки.

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

                        При подготовке публикации в Интернет материалов, созданных в Word , полезно знать особенности преобразования в формат HTML . Некоторые из них приводятся ниже (табл. 8.1).

                        Таблица 8.1

                        Элемент документа Word

                        Преобразование Word ® HTML

                        Размеры шрифтов

                        В Word изображаются шрифты от 9 до 36 пунктов. Размеры шрифтов HTML изменяются от 1 до 7 и служат Браузеру указанием на размер шрифта

                        Текстовые эффекты:
                        приподнятый, с тенью, уплотненный и т.д.

                        Текстовые эффекты не сохраняются, но сам текст остается

                        Начертания:
                        полужирный, курсив, подчеркивание

                        Остаются, но некоторые виды подчеркивания преобразуются в сплошную линию

                        Анимация текста

                        Анимация не сохраняется, но текст остается. Для придания тексту анимационного эффекта можно использовать бегущую строку (панель « Web -компоненты»)

                        Графика

                        Изображения преобразуются в формат GIF или JPEG , если они не были сохранены до этого в таких форматах. Линии преобразуются в горизонтальные линии.

                        Графические объекты: автофигуры, фигурный текст, надписи и тени

                        Объекты преобразуются в файлы формата GIF . В среде редактирования Web -страницы можно вставить графические средства «Вставка» - «Рисунок»

                        Таблицы

                        Таблицы преобразуются, однако параметры, не поддерживаемые HTML , не сохраняются. Например, цветные границы и границы переменой ширины

                        Нумерация страниц и колонтитулы

                        Так как документ HTML считается одной Web -страницей, то понятие колонтитулов отсутствует и нумерация не сохраняется

                        Поля страниц и многоколонный текст

                        Стили

                        Определенные пользователем стили преобразуются в прямое форматирование, если оно поддерживается HTML

                        При необходимости вставить на HTML -страницу собственные тэги, в Word предусмотрено непосредственное редактирование HTML -кода . Это можно сделать, вызвав окно редактора через меню «Вид» - «Источник HTML ». До того, как перейти в этот режим следует сделать сохранение файла. После завершения редактирования перед закрытием окна, файл также нужно сохранить.

                        Другая возможность – открыть документ в Браузере и вызвать меню «Вид» - «В виде HTML ». По умолчанию редактирование выполняется в Блокноте.

                        Хотя Word отображает документ практически в том же виде, как он в дальнейшем будет выглядеть в Браузере, предварительный просмотр Web -документа можно выполнить, не покидая Word .

                        ОСНОВНЫЕ ТЕРМИНЫ

                        ASCII ( American Standard Code for information Interchange – Американский стандартный код для обмена информацией) – семиразрядный код для представления текстовой информации.

                        GIF ( Graphics Interchange Format – формат обмена графикой) – используется для немногоцветных четких изображений, поддерживает прозрачные области и анимацию.

                        HTML ( Hyper Text Markup Language ) – язык разметки гипертекстов.

                        JPEG ( Joint Photography Experts Group – объединенная группа экспертов по машиной обработке фотоизображений) – распространенный формат растровой графики, который идеально подходит для сканируемых фотографий.

                        Web - page ( Web -страница) – электронный документ, предназначенный для размещения (размещенный) в Интернет.

                        Web - site ( Web -сайт) – совокупность Web -страниц, связанных между собой темой, гиперссылками и близким расположением в Интернет.

                        Web server (Web -сервер) – сервер, предназначенный для размещения Web -сайтов в Интернет, и предоставляющий услуги по запросам клиентов.

                        WYSIWYG ( What You See Is What You Get – что вижу, то и имею) – тип редакторов, в которых документ отображается так, как он будет напечатан или представлен в Интернет.

                        ЗАДАНИЕ № 8
                        Тема: Создание Web -сайта на основе программных приложений
                                                 MS Office ( Word и Excel )


                        Часть 1. Создание группы Web -страниц методом преобразования
                        документов                         MS Office

                        1. На рабочем диске подготовить папку для размещения Ваших документов.

                        2. Создать документ Word следующего содержания.

                        Главный заголовок, например Объект WordArt:

                        Затем разместить текст:

                        И создать оглавление, состоящее, например, из 2-х пунктов.

                        Мои увлечения

                        Мои друзья

                        3. Оформить документ и сохранить в своей папке на жестком диске под именем main.doc .

                        4. Создать документ Word, посвященный Вашим увлечениям. Сохранить документ под именем hobby .doc в своей папке. Документ должен быть оформлен, иметь нижний колонтитул и кроме текста содержать рисунки.

                        5. Создать книгу Excel с таблицей по приведенному образцу (рис. 8.2), сохранить под именем friends .xls.
                        Для вычисления средних значений должны быть использованы формулы .

                        Мои друзья

                        Имя

                        Возраст

                        Рост

                        Вес

                        Вася

                        Зина

                        Коля

                        Лена

                        Среднее значение

                        27,5

                        176

                        71,75

                        Рис. 8.2. Пример таблицы для файла friends .xls

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

                        5.2. Подготовить лист к печати:

                        5.2.1. Настроить параметры вкладки «Страница…» в режиме Предварительного просмотра , создать колонтитулы.

                        6. Установить связи между документами с помощью гиперссылок.

                        6.1. Открыть главный документ main.doc и последовательно выделяя заголовки разделов, закрепить за ними гиперссылки («Меню - Вставить») на соответствующие документы.

                        7. В главном документе установить закладку на заголовок Мои увлечения . Дать ей название «Хобби». Сохранить документ.

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

                        8.1. Подготовить рисунок для обеспечения возврата из вспомогательных документов в главный. Например, рисунок можно получить с помощью создания графической копии активного окна в буфере (Alt+PrintScreen) и дальнейшего редактирования рисунка в редакторе Paint.

                        8.2. Вставить в конец каждого из документов рисунок и закрепить за ним гиперссылку на документ main.doc. В файле hobby .doc гиперссылка должна обеспечивать переход на закладку «Хобби».

                        10. Создать группу связанных Web -страниц, методом преобразования подготовленных документов .

                        10.1. Подготовить папку для Web -документов с именем My _ Web .

                        10.2. Последовательно раскрывая подготовленные ранее документы, сохранить их в папке My _ Web , указав
                        Тип файла: Web -страница (*. htm ; *. html )

                        10.3. Закрыть все документы, проанализировать изменения, произошедшие в структуре папок.

                        11. Просмотреть Web -документы, начиная с main . htm . Проанализировать, какие элементы документов изменились или вовсе исчезли. Сделать попытку сделать переход по гиперссылке. Убедиться в том, что связи между Web -страницами нуждаются в редактировании.

                        12. Отредактировать Web -документы, изменить гиперссылки, выполнить дополнительное оформление.

                        Внимание: Для перехода из Браузере в режим редактирования нужно воспользоваться меню «Файл» - «Править в Microsoft Word for Windows » или кнопкой на панели инструментов .

                        13. Сохранить и закрыть все документы, скопировать папку My _ Web на диск A : . Предъявить работу Web -страниц преподавателю.

                        Часть 2. Создание новых Web -документов с помощью
                        приложений                         MS Office

                        1. Познакомиться со структурой и составом многостраничного гипертекстового документа, объединяющего четыре страницы (см. приложение).

                        2. Создать папку с именем Presentation , а в ней папку для Ваших рисунков - Gallery .

                        3. Подготовить рисунки для включения их в соответствующие страницы. Сохранить их в папке Gallery в виде отдельных файлов формата bmp , gif или любого другого формата, используемого в Интернет. Обратить внимание на размер рисунков и объем файлов. Объем файлов не должен превышать 3 - 10 КБ.

                        4. Создать отдельный файл для каждой страницы с помощью текстового процессоа Word (стр.1,2,4). Для Страницы 3 использовать готовый файл friends . htm . Сохранять файлы в формате htm или html в папке Presentation .

                        4.1. Запустить текстовый процессор Word и с его помощью создать главную страницу, сохранить файл в формате html под именем index . htm .

                        4.1.1. При создании структурированного документа рекомендуется использовать таблицу. После размещения объектов снять обрамление таблицы.

                        4.1.2. Выполнить оформление документа. Для главного заголовков использовать объект WordArt , для прочих – стиль Заголовок

                        4.1.3. Для оформления фона использовать один из текстурных способов заливки (меню « Формат» – «Фон» – «Способы заливки» ) или тематическое оформление (меню «Формат» – «Тема» ).

                        4.1.4. Просмотреть в броузере изменения в структуре папок, произошедшие при сохранении Web -странички. Открыть созданную страницу, при необходимости отредактировать ее.

                        4.2. Создать вторую страницу сайта с помощью редактора Word .

                        4.2.1. Для создания документа воспользоваться пунктом меню «Файл»-«Создать» , в открывшемся диалоговом окне «Создание документа» выбрать вкладку « WEB -станицы» и пиктограмму « Новая WEB -страница» . Сохранить чистую WEB -страницу в папке Presentation , дав странице имя на английском языке childhood . htm

                        4.2.2. В качестве заголовка "Мое детство" использовать Бегущую строку , отобразив предварительно панель Web -компонентов. Познакомиться с параметрами Бегущей строки, настроить ее так, чтобы она появлялась не более 2-х раз.

                        4.2.3. Разметку для размещения объектов сделать с помощью таблицы.
                        Рисунок вставить из папки                         Gallery .

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

                        4.3. Создать третью страницу на основе созданного в Части 1 файла friends . htm .

                        4.3.1. Скопировать файл и сопутствующую ему папку в папку Presentation .

                        4.3.2. Открыть файл в Браузере, убедиться, что документ отображается правильно. При необходимости отредактировать.

                        4.4. Создать четвертую страницу сайта с помощью редактора Word .

                        4.4.1. Подготовить рисунок – вид здания ГУТ со стороны Мойки (найти старый сайт ГУТ). Сохранить рисунок в папке Gallery .

                        4.4.2. Создать файл в папке Presentation , с именем university . htm .

                        4.4.3. Вставить в файл рисунок – вид здания ГУТ, предварительно сохраненный в папке Gallery . Скопировать или ввести электронный адрес университета. Написать несколько фраз о Вашем факультете и вставить гиперссылку на сайт факультета.

                        5. Установить связи между документами сайта.

                        5.1. Открыть в Word документ index . htm , и последовательно выделяя пункты "Содержания", вставить гиперссылки на соответствующие документы.

                        6. Вставить в конец каждого из документов рисунок (). Создать гиперссылки, обеспечивающие возврат в главный документ, закрепив из за рисунком.

                        Внимание! Рисунок для переходов на главную страницу также должен находиться в папке Gallery .

                        8. Просмотреть содержание каждого из вновь созданных файлов в формате HTML .

                        8.1. Найти тэги, обеспечивающие вставку гиперссылок, рисунков.

                        9. Скопировать папку Presentation со всем ее содержимым на диска А: или на диск C : в папку Temp . Протестировать работу сайта, запустив его просмотр из нового места размещения.

                        10. Предъявить преподавателю Ваш сайт, начать его просмотр с главной страницы.

                        Приложение

                        Структура сайта



                        Страница 1 (главная страница)

                        Приветствие

                        Мое детство

                        Мои увлечения

                        Мои университеты

                        Представление – краткое резюме

                        Текст

                        (комментарии к фотографии)

                        Текст

                        (несколько строк на заданную тему)

                        Страница3 (Мои друзья) – использовать ранее созданный Web -документ friends . htm , созданный с помощью Excel .

                        Страница 4 (Мои университеты)

                        Полное название Университета, адрес сайта ГУТ, картинка с фотографией главного здания ГУТ

                        Веб страница в Ворде может быть создана даже без каких-либо знаний HTML разметки, и далее мы рассмотрим, как это можно сделать. Создать в Ворде веб страницу можно двумя способами, создать с нуля или перевести в HTML формат уже готовый файл Word.

                        Создание веб страницы в Ворде с нуля начинается с создания нового документа Ворд. После создания нового документа следует установить режим просмотра «Веб-документ» на вкладке «Вид» , что позволит отобразить страницу на ширину всего экрана.

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

                        После оформления страницы или открытия уже готового файла Ворд можно переходить к сохранению документа Word как веб страницы. Для этого переходим на вкладку «Файл» , выбираем меню «Сохранить как» и выбрав место сохранения указываем тип файла для сохранения «Веб-страница» .

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

                        Также статьи о работе со страницами в Ворде:

                        • Как настроить поля страницы в Word?
                        • Как в Word отображать на экране сразу две страницы?
                        • Как в Word выделить страницу?
                        • Как делается зебра в Ворде?

                        Веб страница в Ворде может быть создана даже без каких-либо знаний HTML разметки, и далее мы рассмотрим, как это можно сделать. Создать в Ворде веб страницу можно двумя способами, создать с нуля или перевести в HTML формат уже готовый файл Word.

                        Создание веб страницы в Ворде с нуля начинается с создания нового документа Ворд. После создания нового документа следует установить режим просмотра «Веб-документ» на вкладке «Вид», что позволит отобразить страницу на ширину всего экрана.

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

                        После оформления страницы или открытия уже готового файла Ворд можно переходить к сохранению документа Word как веб страницы. Для этого переходим на вкладку «Файл», выбираем меню «Сохранить как» и выбрав место сохранения указываем тип файла для сохранения «Веб-страница».

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

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

                        Курсы работы в Корде

                        Хотя вполне возможно сгенерировать HTML-страницу в Word, в большинстве случаев это не рекомендовано делать, если вы собираетесь использовать страницу в любой профессиональной или широко распространенной среде. Создание вашего личного сайта с помощью Word – это как строительство своего собственного дома из блоков LEGO: можно сделать и так, если у вас нет иного опыта, однако использование правильных инструментов или профессионала даст неизмеримо лучшие результаты.

                        Word предназначен для создания бумажных документов, которые имеют фиксированный размер страницы, шрифт и макет, в то время как размер страницы, шрифт и оформление, доступные для всех просматривающих веб-сайт, могут значительно отличаться от ваших. Ввиду того, что Word специально придуман для форматирования фиксированного документа, создаваемый код веб-страницы загружается в нестандартном бумажном стиле, который может отображаться не так, как вы подразумевали, в любых других браузерах, кроме Internet Explorer, собственной программы компании Microsoft.

                        Шаги

                          Загрузите Word.


                        1. Напечатайте на странице «Homepage» (Домашняя страница).



                        3. Сохраните вашу страницу как index.html. Для Office 2007 поменяйте тип файла в меню «Сохранить как» (Save as type) на «Веб-страница» (Web Page).


                        4. Сейчас вы увидите, что страница выглядит не как обычный документ Word, – вы теперь находитесь в режиме наброска.


                        5. Добавьте немного дополнительного текста; попробуйте ввести, например, «Это моя домашняя страница».


                        6. Почаще сохраняйте свою работу (просто нажмите на значок сохранения – Word запомнит документ как веб-страницу).


                        7. Делайте то же самое при создании других страниц (прочитайте ниже, как сделать гиперссылку).



                        9. Выделите текст.



                        11. Поищите файл index.html.


                        12. Найдя файл, выберите его и нажмите на кнопку «ОК».


                        13. Обратите внимание, что вы только что создали гиперссылку. Это означает, что в браузере вы можете кликнуть по соответствующей гиперссылке и перейти на другую страницу своего сайта.



                        15. Продолжайте делать так, пока ваш сайт не будет готов!


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

                        • Сделайте свой сайт привлекательным с помощью разнообразных фотографий, ссылок и информации.
                        • Назовите страницы (за исключением главной) так, чтобы легче было запомнить.
                        • Изучите HTML.
                        • Получите хостинг. Никто не может увидеть ваш сайт, пока он не появится в интернете. Существуют бесплатные хостинговые сайты (это на самом деле простые ресурсы), а также профессиональные платные сервисы.
                        • Присмотритесь в сети к некоторым простым веб-сайтам, которые соответствуют тому, что вы пытаетесь сделать. Хотя вы не можете сделать динамический сайт как WikiHow или MSN.com в Word или Publisher – нужны слишком расширенные настройки (PHP, Client-Site Includes, ASP.NET и многие другие).
                        • Гораздо проще сделать сайт в Publisher, где представлены специальные веб-страницы дизайнеров.

                        Предупреждения

                        • Если вы планируете разместит свой сайт в интернете, будьте осторожны, чтобы не включить каких-нибудь личных данных, которые не намерены обнародовать в информации документа.
                        • Как отмечено в заголовке статьи, создание HTML с помощью любого продукта Microsoft Office, кроме Expression Web, по большей части плохая идея. Тот факт, что программа может сохранять файл как HTML, не делает ее программным обеспечением для веб-дизайна.

                        Что вам понадобится

                        • Компьютер
                        • Microsoft Office Word (все версии)

                        Информация о статье

                        Эту страницу просматривали 29 127 раза.

                        Была ли эта статья полезной?

                        Цель работы: освоение приемов создания Web-страниц и Web-сайтов с помощью текстового процессора Microsoft Word: оформление дизайна страницы; организация внутренних гиперссылок; организация внешних гиперссылок.

                        Используемое программноее обеспечение: текстовый процессор Microsoft Word.

                        Замечание. Чтобы проверить, работает ли Web-мастер, выполните команду Файл -> Создать . Если в открывшемся окне имеется вкладка Web-страницы , значит, можно работать дальше. Если такой вкладки нет, то необходима переустановка Microsoft Office с включением режима создания HTML.

                        Задание

                        В данной работе вы реализуете проект семейного сайта. Ниже вы видите макет главной страницы и макет «Папиной страницы». Макеты остальных страниц вы можете по аналогии создать сами.

                        1. Открыть текстовый процессор Word.

                        2. Выполнить команду Файл -> Создать . В появившемся окне выбрать вкладку Web-страницы . Щелкнуть на значке Новая Web-страница .

                        3. Оформить внешний вид страницы в соответствии с приведенным образцом, используя обычные средства Word (управление форматированием, шрифтами; можно сделать цветной фон, подобрать текстуру, заливки и пр.). При наборе текста страницы не подчеркивать слова (Папа, Мама, Сережа, Тимка, биография). Подчеркивания появятся автоматически после вставки гиперссылок.

                        Вставить рисунок можно либо из файла со сканированной фотографией (если у вас такой имеется), либо выбрав любой рисунок из Microsoft Clip Gallery.

                        => установить курсор перед абзацем, начинающимся словами: «Моего папу зовут …»;
                        => выполнить команду Вставка -> Закладка ;
                        => в открывшемся окне в строке Имя закладки ввести какое-нибудь имя, например «М1»; щелкнуть на кнопке Добавить ;
                        => в списке, расположенном выше, выделить слово «Папа»;
                        => выполнить команду Вставка -> Гиперссылка ;
                        => Обзор напротив строки «Имя объекта в документе»;
                        => выбрать имя созданной закладки (M1); щелкнуть на кнопке ОК , затем еще раз на ОК . Гиперссылка готова.

                        5. Аналогичным образом организовать внутренние гиперссылки на других словах из списка (Мама, Сережа, Тимка) к соответствующим абзацам главной страницы.

                        7. Создать «Папину страницу» (см. п. 1-2); гиперссылок в ней пока создавать не нужно. Сохранить страницу в файле father.htm в папке Мои документы .

                        8. Вернуться к главной странице. Создать в ней внешнюю гиперссылку на «Папину страницу». Для этого:

                        => выделить первое в тексте слово «Биография»;
                        => выполнить команду Вставка -> Гиперссылка ;
                        => в появившемся окне щелкнуть на кнопке Обзор напротив строки Связь с файлом/URL ;
                        => найти и выбрать ранее созданный файл father.htm; щелкнуть на кнопке ОК , затем еще раз на ОК . Гиперссылка готова.

                        9. Вернуться к «Папиной странице». Создать в ней внешнюю гиперссылку на сайт Московского университета. Для этого:

                        => выделить текст «Московского государственного университета им. М. В. Ломоносова»;
                        => выполнить команду Вставка -> Гиперссылка ;
                        => в появившемся окне в строке Связь с файлом/URL набрать URL-адрес МГУ: щелкнуть на кнопке ОК , затем еще раз на ОК . Гиперссылка готова.

                        10. Создать остальные страницы семейного сайта, согласно плану, представленному на схеме. Организовать связи между страницами и внешние связи. Не забудьте сохранить все созданные файлы. (Мои документы/11 класс/Ф.И.О)

                        11. Установите автономный режим работы браузера.

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

                        13. Отменить автономный режим, проверить работу внешних гиперссылок.

Разделы