ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ

«САМАРСКИЙ ГОСУДАРСТВЕННЫЙ АЭРОКОСМИЧЕСКИЙ УНИВЕРСИТЕТ ИМЕНИ АКАДЕМИКА С.П. КОРОЛЕВА

(НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ)» (СГАУ)

В.В. СЕМЕНОВ, М.П. ШЛЫКОВА

СОЗДАНИЕ ВЕБ-САЙТОВ В MICROSOFT EXPRESSION WEB 4

САМАРА 2 0 1 6

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ

«САМАРСКИЙ ГОСУДАРСТВЕННЫЙ АЭРОКОСМИЧЕСКИЙ УНИВЕРСИТЕТ ИМЕНИ АКАДЕМИКА С.П. КОРОЛЕВА

(НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ)» (СГАУ)

В.В. СЕМЕНОВ, М.П. ШЛЫКОВА

СОЗДАНИЕ ВЕБ-САЙТОВ В MICROSOFT EXPRESSION WEB 4 Утверждено Редакционно-издательским советом университета

в качестве методических указаний

САМАР А Издательство СГАУ

2016

УДК СГАУ: 004.738.5 ББК СГАУ: У9(2) 212.8 С 302

Рецензент: к.т.н., доцент А.О. Новиков

В.В. Семенов, М.П. Шлыкова

Создание веб-сайтов в Microsoft Expression Web 4: метод. указания / сост. В.В. Семенов, М.П. Шлыкова. – Самара: Изд-во Самар. гос. аэрокосм. ун-та, 2016. – 82 с.: ил.

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

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

Методические указания предназначены для выполнения третьей лабораторной работы по дисциплине “Мировые информационные ресурсы” при обучении бакалавров на факультете экономики и управления для укрупненных групп специальностей и направлений подготовки: 080000 - “Экономика и управление”, 080100 - “Экономика”, 080200 - “Менеджмент” и 080500 - “Бизнес-информатика”. Рекомендованы для формирования профессиональных компетенций в соответствии с ФГОС 3-го поколения: ОК-1, ОК-13, ПК-12. Подготовлено на кафедре “Математические методы в экономике”.

© Самарский государственный аэрокосмический университет, 2016

- 3 -

ОГЛАВЛЕНИЕ ВВЕДЕНИЕ ..........................................................................................................................5 1. ЗНАКОМСТВО С MICROSOFT EXPRESSION WEB.............................................7

1.1. Общие сведения.......................................................................................................7 1.2. Загрузка и установка программы ........................................................................9 1.3. Главное окно программы ....................................................................................11 1.4. Задание размера страницы..................................................................................14

2. СОЗДАНИЕ САЙТА И СТРАНИЦ ..........................................................................17 2.1. Общие сведения.....................................................................................................17 2.2. Статические и динамические сайты .................................................................17 2.3. Создание нового одностраничного сайта..........................................................20 2.4. Главная страница и индексный файл ...............................................................22 2.5. Создание нового сайта на основе шаблона.......................................................22 2.6. Добавление и изменение страниц ......................................................................25 2.7. Добавление папок .................................................................................................27 2.8. Имена файлов и папок .........................................................................................29

3. ОФОРМЛЕНИЕ СТРАНИЦ ......................................................................................32 3.1. Общие сведения о HTML. Структура веб-страницы .....................................32 3.2. Общие свойства страницы ..................................................................................34 3.3. Предварительный просмотр страниц в браузере............................................36 3.4. Форматирование текста ......................................................................................38

Ввод, выделение, вырезание и копирование текста.....................................38 Вставка текста ................................................................................................38 Форматирование абзаца и шрифта...............................................................39 Вставка специальных символов......................................................................41 Вставка горизонтальной линии и переноса (разрыва) строки ..................43 Создание списков ...............................................................................................45 Создание заголовков ..........................................................................................47 Комментарии ....................................................................................................48

3.5. Работа с изображениями ......................................................................................49 Общие сведения .................................................................................................49 Вставка изображений ......................................................................................50 Выравнивание, отступы, размеры и рамки изображений.........................51

3.6. Оформление гиперссылок ...................................................................................52 Общие сведения .................................................................................................52 Добавление гиперссылки...................................................................................53 Задание места открытия гиперссылки ........................................................54 Добавление всплывающих подсказок..............................................................55 Добавление закладок (якорей)..........................................................................55 Проверка гиперссылок.......................................................................................57

3.7. Работа с таблицами...............................................................................................59

- 4 -

4. ПУБЛИКАЦИЯ САЙТА ............................................................................................ 62 4.1. Проверка сайта ..................................................................................................... 62 4.2. Пометка страниц, не подлежащих публикации .............................................. 63 4.3. Регистрация на сервере бесплатного хостинга ............................................... 64 4.4. Публикация сайта ................................................................................................ 68

5. ВОПРОСЫ ДЛЯ САМОКОНТРОЛЯ...................................................................... 74 6. ПОРЯДОК ВЫПОЛНЕНИЯ ЛАБОРАТОРНОЙ РАБОТЫ................................ 75

6.1. Порядок выполнения лабораторной работы................................................. 75 6.2. Критерии оценки .................................................................................................. 75

7. ЗАДАНИЯ К ЛАБОРАТОРНОЙ РАБОТЕ ............................................................. 76 ПРИЛОЖЕНИЕ 1. ОБРАЗЕЦ ОТЧЕТА ПО ЛАБОРАТОРНОЙ РАБОТЕ............ 78

- 5 -

ВВЕДЕНИЕ

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

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

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

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

- 6 -

информационной системы, который будет способствовать более эффективной работе с покупателями, поставщиками, партнерами и даже конкурентами. В связи с этим Билл Гейтс, создатель компании Microsoft, однажды сказал: “Если вас нет в Интернете – вас нет в бизнесе”. И с каждым годом спорить с этим утверждением становится все труднее. В связи с этим полезно получать те знания, которые помогут использовать интернет с пользой для себя и своего бизнеса, а не только в качестве развлечений. Создание веб-сайтов является одной из важнейших технологий

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

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

создания веб-сайтов, но лишь некоторые из них способны предоставить разработчикам инструменты для решения подавляющего большинства стоящих перед ним задач. К этим немногим средствам относится Microsoft Expression Web, которому посвящены данные методические указания.

M i c r o s o f t E x p r e s s i o n W e b (кодовое название Quartz) – это визуальный (WYSIWYG) HTML-редактор и инструмент для веб-дизайна от Microsoft, пришедший на замену устаревшему Microsoft FrontPage. Является частью пакета Microsoft Expression Studio.

- 7 -

1. ЗНАКОМСТВО С MICROSOFT EXPRESSION WEB

1.1. Общие сведения При создании веб-страниц, составляющих веб-сайт используются

два подхода. Первый подход заключается в том, что веб-страница создается вручную в любом текстовом редакторе (например, в Блокноте Windows) путем ввода текста и расстановки необходимых тегов. При этом веб-дизайнер должен иметь перед глазами или в памяти макет страницы и после добавления очередного HTML-элемента просматривать результат в каком-либо браузере (например, Internet Explorer, Mozilla FireFox, Opera, Google Chrome и т.п.). Другой подход заключается в использовании программ

визуального редактирования веб-страниц. Основное достоинство такого подхода - наглядность процесса создания и модификации страниц. Кроме того, набор средств большинства современных визуальных веб-редакторов не ограничивается средствами создания отдельных веб-страниц, но и имеет средства создания и интегрированной поддержки веб-сайта, а также публикации сайта в интернете. Примерами популярных современных программных продуктов, реализующих такой подход, являются Microsoft Expression Web (пришедший на смену Microsoft FrontPage) и Adobe Dreamweaver (перекупленный у компании Macromedia), заменивший Adobe GoLive. Существует также группа программных продуктов, которые с

одной стороны реализуют процесс создания веб-страницы путем ручного ввода текста и тегов (как в Блокноте), но с добавлением вспомогательных средств, таких как подсветка и кодирование цветом тегов и атрибутов, подсказки и автоматическая проверка синтаксиса тегов и атрибутов. Примером программного продукта, реализующего такой подход, являлся Macromedia HomeSite, который был одним из самых популярных редакторов HTML-кода, перекупленный компанией Adobe и вошедший в Adobe Dreamweaver. Также имеется

- 8 -

большое количество (в том числе и бесплатных) редакторов HTML-кода и разнообразных языков программирования. Программа Microsoft Expression Web может использоваться и как

визуальный редактор веб-страниц, и как интегрированное средство создания и поддержки веб-сайтов с поддержкой публикации сайта в интернете, и как редактор HTML-кода и других языков веб-программирования и разметки (PHP, ASP, ASPX, XML, DHTML, CSS, AJAX, JavaScript, Flash и другие). Веб-страница (англ. Web Page) – это электронный документ,

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

(HTML-документ), то есть это текстовый файл, содержащий теги (Tags) языка HTML (HyperText Markup Language, язык разметки гипертекста). HTML не является языком программирования, он является языком разметки или средством форматирования текстового и мультимедийного содержимого. HTML позволяет размещать на веб-странице обычный текст, графические объекты, гипертекстовые ссылки для перехода на другие веб-страницы или доступа к ссылочным файлам, вставлять звуковые фрагменты, видеоролики и специальный программный код (скрипты JavaScript, VBScript). Информационная составляющая содержания веб-страницы

является информационным ресурсом и обычно называется контентом (от англ. c o n t e n t – содержание). Веб-страница чаще всего имеет расширение .htm или .html (статические страницы). Однако часто встречаются и другие расширения (.php, .phtml, .shtm, .shtml, .asp, .aspx и др.).

- 9 -

Сайт состоит из связанных между собой веб-страниц и файлов, объединенных общей темой и дизайном. Все сайты в глобальной сети Интернет составляют Всемирную паутину (World Wide Web, или сокращенно WWW).

1.2. Загрузка и установка программы Скачать бесплатный дистрибутив лучше всего с официального

сайта компании Microsoft. Откройте в вашем браузере страницу с адресом:

https://www.microsoft.com/en-us/download/details.aspx?id=36179:

Рис. 1. Страница для скачивания программы Microsoft Expression Web 4

На момент написания данных методических указаний текущая версия программы - 4.0.1460.0.

- 10 -

Нажмите кнопку Download и сохраните файл Web_Trial_en.exe в любое место. После загрузки файла запустите установку программы.

Рис. 2. Лицензионное соглашение

Прочитайте (если хотите) Лицензионное соглашение и нажмите кнопку Accept. В следующем окне выберите Yes или No для участия или отказа в программе улучшения качества обслуживания клиентов. Затем нажмите Next. В очередном окне, после нажатия кнопки Install начнется установка:

Рис. 3. Установка программы

Для завершения установки нажмите кнопку Finish:

- 11 -

Рис. 4. Завершение установки программы

Теперь можно приступать к работе. Для запуска программы используйте ярлык Microsoft Expression Web 4 в папке Microsoft Expression.

1.3. Главное окно программы В главном окне программы Microsoft Expression Web находятся те

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

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

соответствующей кнопке в нижней части окна редактирования.

- 12 -

Рис. 7. Главное окно Microsoft Expression Web

§ Файлы, входящие в состав сайта (левый верхний угол). Все файлы и папки, входящие в текущий сайт, отображаются на панели Folder List (Список папок) - одной из четырех, отображаемых по умолчанию. Вид панели и возможные действия в ней аналогичны проводнику Windows. Вы можете при помощи контекстного меню (правая кнопка мыши) в пределах главной папки вашего сайта создавать новые папки и файлы, удалять и переименовывать текущие файлы и папки, открывать файлы во внешних редакторах (например,

Файлы и папки, входящие в состав сайта

Окно редактирования

Вкладка активной страницы

Переключение режимов

редактирования

Панели инструментов

Строка состояния

Вкладки открытых страниц

Панели инструментов

- 13 -

редактировать графический файл в Paint), открывать веб-страницы в различных браузерах и т.п. (рис. 8).

Рис. 8. Панель Folder List

§ Панели инструментов. По умолчанию слева и справа от окна редактирования расположено по две панели инструментов. Таким образом, отображается четыре дополнительных окна, в каждом из которых может быть выбрано несколько панелей инструментов, переключаемых соответствующими вкладками. Ненужные в данный момент панели можно закрыть, щелкнув по “крестику” (Close) в активной вкладке. Можно сразу закрыть несколько, сгруппированных в одном окне, панелей инструментов, щелкнув по “крестику” (Close all) в правом верхнем углу соответствующего окошка. Управление отображением панелей инструментов осуществляется через меню Panels (отображаемые панели инструменты помечены “галочками”). § Строка состояния. Находится в самом низу окна программы и

отображает информацию о текущих параметрах, таких как режим редактирования, режим выполнения и т.д. Также здесь отображается

- 14 -

информация о файле, который в настоящий момент редактируется: HTML-схема, CSS-схема, размер файла, ошибки в коде HTML, размер страницы в пикселях.

1.4. Задание размера страницы В 2006 году большинство пользователей имело экран монитора с

разрешением 800x600 пикселей. Затем, по мере обновления мониторов, в какой-то момент “нормальным” разрешением стало 1024x768 пикселей. Сейчас же наблюдается огромный разброс разрешения экранов пользователей от 3840x2160 пикселей в самых современных мониторах до 228x240 пикселей у пользователей устаревших мобильных устройств. Из-за этого веб-страницы с фиксированной шириной будут иметь пустое пространство по бокам на большом мониторе или же отображаться частично с горизонтальной прокруткой на маленьком экране. Поэтому не существует универсальных размеров, которые бы подходили всем. Все большую популярность стали приобретать так называемые “резиновые” сайты, которые создаются путем использования CSS (каскадных таблиц стилей) и относительных величин. Но и у таких сайтов есть свои недостатки - при больших горизонтальных размерах окна строки текста становятся очень длинными, и читать их становится совсем не комфортно. К тому же, создание таких сайтов невозможно без знания HTML и CSS, поэтому выходит за рамки данного пособия. Одно из решений (самое простое) выбрать ширину страницы, которая бы, при всех недостатках, подошла большинству пользователей (960-980 пикселей). Как бы то ни было, Microsoft Expression Web позволяет легко

задать размер страницы. Чтобы изменить размер страницы щелкните по правой части строки состояния (режим редактирования должен быть Design или Split) и выберите нужный размер из выпадающего меню (рис. 9).

- 15 -

Рис. 9. Выбор размера страницы

То же самое можно сделать с помощью меню View (Вид) à Page Size (Размер страницы) (рис. 10).

Рис. 10. Выбор размера страницы

Новый размер вступит в силу сразу, как вы отпустите кнопку мыши. Для изменения списка размеров страниц выберите пункт меню Modify Page Sizes… (Изменить размеры страниц) (рис. 9 и рис.10). В диалоговом окне Modify Page Sizes отображается текущий список размеров страниц. Выберите размер, который хотите изменить, и нажмите кнопку Modify… (Изменить) (рис. 11).

- 16 -

Рис. 11. Диалоговое окно Modify Page Sizes (Изменить размеры страниц)

Появится окно Page Size (Размер страницы), где в полях Width (Ширина) и Height (Высота) можно задать новые размеры (рис. 12).

Рис. 12. Диалоговое окно Page Size (Размер страницы)

- 17 -

2. СОЗДАНИЕ САЙТА И СТРАНИЦ

2.1. Общие сведения Microsoft Expression Web позволяет как редактировать отдельные

страницы, так и управлять целыми сайтами. При создании и управлении сайтом на локальном диске компьютера пользователя создается папка сайта, где размещаются все страницы и рисунки, а также некоторая дополнительная информация, необходимая для работы самой программы. Затем вся информация переносится на сервер компании, представляющей услуги х о с т и н г а . Хо́стинг (англ. hosting) - это услуга по предоставлению

вычислительных мощностей для размещения информации на сервере, постоянно находящемся в сети (обычно Интернет). Поэтому компанию, представляющую услуги хостинга, часто называют хостером. В Microsoft Expression Web можно создавать как пустые сайты (без

страниц или с одной пустой страницей), так и готовые сайты на основе шаблонов использующих каскадные таблицы стилей (CSS, Cascading Style Sheets).

2.2. Статические и динамические сайты Все огромное количество существующих сайтов можно разбить на

две основные группы: статические сайты и динамические сайты. Чем отличаются эти виды сайтов? Каковы преимущества и недостатки каждой группы? Статическим (статичным) сайтом принято называть сайт,

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

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

- 18 -

необходимо вручную внести изменения непосредственно в код и содержимое страницы. Управление сайтом невозможно без знаний и умений в области

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

более гибкие в управлении. Динамические сайты (динамичные сайты) так же, как и статические сайты, представляют собой совокупность текста, графики и языка разметки. Однако содержимое таких сайтов хранится не в виде статичных веб-страниц, а находится в базе данных, и отображается “на лету”, непосредственно по запросу пользователя. Существует достаточно много систем программирования и широко распространенных и общепризнанных языков веб-программирования (PHP, Perl, ASP и другие). С их помощью можно создать основу для гибкого сайта любой сложности, но это, конечно же, далеко не всем под силу, и порог вхождения в данную предметную область очень высок. В процесс создания такого сайта добавляется новое действующее лицо - программист на одном из языков программирования, вследствие чего разработка увеличивается в сроках и усложняется. Таким образом, если сайт состоит из множества страниц или

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

HTML-страницах - сложны в поддержке, архаичны и не подходят для

- 19 -

представления сложных структур информационных данных. Динамические сайты не просто выдвигают новые требования к их созданию и сопровождению, они и значительно дороже в разработке, а так же требуется содержание новой штатной единицы - программиста. И вот тут был найден выход в виде создания качественных сайтов на CMS. Аббревиатура CMS расшифровывается как “Content Management

Software” (Программное обеспечение для управления содержимым, Программный комплекс управления сайтом). В нашей стране принято последнюю букву «S» расшифровывать как “System”, по-русски это звучит как “Система управления контентом”. Иногда употребляется жаргонное выражение - “движок сайта”.

CMS, в подавляющем большинстве случаев, программируются на языке PHP, хотя иногда применяются и другие языки. В любом случае, CMS всегда работает в связке с базой данных MySQL и выполняет две основные функции:

- Показывать страницы сайта пользователям, формируя их “на лету” в момент запроса из заранее определенных шаблонов с дизайном и контента, то есть текстов, картинок, таблиц и других материалов, которые хранятся в базе данных. При этом, в зависимости от ситуации, пользователю может быть показана какая-то уникальная информация, которая больше никому и никогда не будет видна. Например, содержимое его корзины в интернет-магазине.

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

- 20 -

В настоящее время существует огромное количество как платных, так и бесплатных систем (Joomla, Drupal, 1С-Битрикс, WordPress и многие-многие другие). Однако вовсе необязательно создавать сложные динамические

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

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

2.3. Создание нового одностраничного сайта 1. Выберите в меню Site (Сайт) пункт New Site… (Новый сайт)

или нажмите комбинацию клавиш клавиатуры CTRL + Shift + N. Появится диалоговое окно New (Новый).

Рис. 13. Диалоговое окно New

- 21 -

В нем уже отмечена группа шаблонов General (Общие), вам остается выбрать в средней панели шаблон One Page Site (Одностраничный сайт) или Empty Site (Пустой сайт) (рис. 13).

2. По умолчанию программа предлагает сохранить сайт в папке My Web Sites, которая находится в папке Мои документы. Нажав кнопку Browse… (Обзор) можно изменить место сохранения. Имя сайта (название папки, в которой локально будут сохранены все файлы) можно задать в окошке Name (Имя).

3. После нажатия кнопки OK, в окне редактирования появится вкладка Site View (Просмотр сайта), на которой представлен список файлов, входящих в состав сайта, - в данном случае единственная, пока пустая, начальная страница default.html (рис. 14). Такой же список появится на панели Folder List слева. Теперь можно редактировать пустую страницу или создать другие страницы.

Рис. 14. На вкладке Site View представлен список файлов, входящих в состав сайта, - в данном случае единственная начальная страница default.html

- 22 -

2.4. Главная страница и индексный файл Ин д е к с ны й ф а й л (файл-индекс) - это файл страницы на

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

http://yandex.ru/video/, то в ответ веб-сервер вернет ему как раз содержимое индексного файла из соответствующей папки. Если в папке нет индексного файла, сервер может выдать или список всех файлов из папки, или какую-либо ошибку доступа (403, 404 или 405). Таким образом, г л а в н о й с т р а н и ц е й сайта является

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

именем i n d e x (намного реже используются имена default и home). Расширение имени может быть различным, но чаще всего используются .htm и .html для статических сайтов и .php - для динамических сайтов. В Microsoft Expression Web в качестве индексного файла используется default.html.

2.5. Создание нового сайта на основе шаблона Создание собственного веб-сайта - решительный шаг вперед

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

- 23 -

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

Чтобы выбрать и настроить шаблон сайта: 1. Выберите в меню Site (Сайт) пункт New Site… (Новый сайт)

или нажмите комбинацию клавиш клавиатуры CTRL + Shift + N. Появится диалоговое окно New (Новый).

Рис. 15. Диалоговое окно New

2. В окне New (Новый) выберите группу Templates (Шаблоны) в

левой колонке, а в средней колонке укажите шаблон, наиболее

- 24 -

подходящий для вашего сайта. При этом, в колонке справа, вы увидите, как будут выглядеть страницы сайта (рис. 15).

3. По умолчанию программа предлагает сохранить сайт в папке My Web Sites, которая находится в папке Мои документы. Нажав кнопку Browse… (Обзор) можно изменить место сохранения. Имя сайта (название папки, в которой локально будут сохранены все файлы) можно задать в окошке Name (Имя).

4. После нажатия кнопки OK, в окне редактирования появится вкладка Site View (Просмотр сайта), на которой представлен список файлов и папок, входящих в состав сайта (рис. 16). Такой же список появится на панели Folder List слева. Теперь можно редактировать созданные страницы или создать новые.

Рис. 16. На вкладке Site View представлен список файлов и папок,

входящих в состав сайта

- 25 -

2.6. Добавление и изменение страниц

Чтобы создать пустую страницу: 1. Выберите в меню File (Файл) подменю New (Новая), а в нем

пункт Page… (Страница). Появится диалоговое окно New (Новая) (рис. 17).

Рис. 17. Диалоговое окно New

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

2. После нажатия кнопки ОК в окне редактирования появится пустая веб-страница. Для создания пустой страницы можно обойтись и без открытия промежуточного диалогового окна. Для этого в подменю New (Новая) нужно сразу выбрать пункт HTML (Пустая HTML-страница) (рис. 18).

- 26 -

Рис. 18. Меню File (Файл)

3. Для добавления страницы к уже существующему сайту можно также использовать контекстное меню (правая кнопка мыши) в панели Folder List (рис. 19).

Рис. 19. Контекстное меню в панели Folder List

- 27 -

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

Чтобы создать новую страницу по шаблону: 1. Выберите в меню File (Файл) подменю New (Новая), а в нем

пункт Page… (Страница). Появится диалоговое окно New (Новая) (рис. 20).

Рис. 20. Диалоговое окно New

2. Выберите в левой колонке пункт CSS Layouts (CSS-макеты), а в средней - нужный шаблон, ориентируясь на внешний вид, который отображается в области Preview (Образец) (рис. 20).

3. После нажатия кнопки ОК в окне редактирования появится веб-страница, основанная на выбранном шаблоне.

2.7. Добавление папок Для создания новой пустой папки выберите в меню File (Файл)

подменю New (Новая), а в нем пункт Folder (Папка). В панели Folder

- 28 -

List появится новая пустая папка, в которую можно добавлять другие папки и файлы (рис. 21).

Рис. 21. Панель Folder List

Для добавления папки можно также использовать контекстное меню (правая кнопка мыши) в панели Folder List (рис. 22).

Рис. 22. Контекстное меню в панели Folder List

- 29 -

2.8. Имена файлов и папок После создания локального сайта и его отладки придет время

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

серверах (FreeBSD, Debian, Ubuntu и многие другие), имеют отличную от Windows файловую систему. Именно эти отличия и приводят к ошибкам у начинающих веб-мастеров. Во-первых, ф а й л о в а я с и с т е м а с е р в е р а к р и т и ч н а к

р е г и с т р у б у к в в и м е н а х ф а й л о в и п а п о к . Например, файлы foto.jpg, Foto.JPG, Foto.jpg (совершенно разные файлы с разным содержимым) могут размещаться на сервере в одной папке, что невозможно в Windows, в которой регистр имени и расширения файла не имеет значения. Поэтому, если вы создали папку для картинок Images на своем

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

б у к вы р у с с к о г о а л ф а в и т а , п р о б е л ы и с п е ц и а л ь ны е с и м в о лы , разрешенные в Windows (!, №, #, (, ), @ и т.п.). При передаче файлов на сервер имена могут преобразовываться автоматически, удаляя недопустимые символы, после чего перестанут работать гиперссылки на внутренние страницы и отображаться картинки.

- 30 -

В Microsoft Expression Web при добавлении новых страниц им даются следующие имена: Untitled_1.html, Untitled_2.html, Untitled_2.html и т.д. Новые папки получают имена: New_Folder, New_Folder2, New_Folder3 и т.д. (рис. 23).

Рис. 23. Панель Folder List

Вы можете переименовать папки и страницы по своему усмотрению, используя в контекстном меню команду Rename. Например, структура простого 4-х страничного сайта с рисунками в папке images, может выглядеть так (рис. 24).

Рис. 24. Панель Folder List

- 31 -

Файл default.html (имеющий значок домика) - это главная страница сайта. Не стоит менять ее имя без крайней необходимости, хотя допустимо использовать имя index.html (раздел 2.4). Страницы page2.html, page3.html, page4.html - это внутренние страницы сайта. Главное, чтобы при дальнейшей публикации на веб-сервере была

создана точно такая же структура сайта и не были бы изменены имена файлов и их регистр.

- 32 -

3. ОФОРМЛЕНИЕ СТРАНИЦ

3.1. Общие сведения о HTML. Структура веб-страницы HTML (аббревиатура от Hyper Text Markup Language) это язык

гипертекстовой разметки, предназначенный для создания веб-страниц. При просмотре страницы браузер (Internet Explorer, Firefox, Opera,

Google Chrome, Safari и др.) преобразовывает HTML-код в веб-страницу, отображаемую на экране пользователя. Веб-страница состоит из двух частей: � З а г о л о в о к с т р а н и ц ы - содержит название страницы, описание, ключевые слова и другую служебную информацию. � О с н о в н а я ч а с т ь - содержит основной текст и элементы страницы, т.е. это та информация, которую показывает браузер.

HTML-код веб-страницы выглядит в простейшем случае так: <html>

<head> З а г ол о во к с т р ан и ц ы

</head> <body>

О с н ов н ая ча с т ь </body>

</html> Здесь используются элементы языка HTML, которые называются

т е г а м и (англ. t a g s ) или д е с к р и п т о р а м и . Тег состоит из имени, заключенного в угловые скобки, и необязательного набора атрибутов. Теги бывают парными и непарными. Парные теги состоят из о т к ры в а ющ е г о или начального тега (<html>, <head>, <body>) и з а к р ы в ающ е г о или конечного, отличающегося от первого только значком с л еш а (англ. s l a s h , косая черта). Между открывающим и закрывающим тегом размещается содержимое

- 33 -

тега (текст, ссылка и другие элементы). К непарным тегам относится, например, тег разрыва строки <br>. В приведенном примере используются следующие парные теги: <html>, </html> - устанавливаются в начале и конце страницы. <head>, </head> - используются для задания заголовка

страницы. <body>, </body> - содержат основную часть (текст, картинки,

таблицы и т.д.). Для работы с HTML в Microsoft Expression Web используется

режим редактирования Code ( см. раздел 1.3) (рис. 25).

Рис. 25. Режим редактирования Code

Чтобы создать простейшую веб-страницу, в Блокноте Windows наберите на клавиатуре или скопируйте следующий текст:

<html> <head> <title>Моя первая веб-страница</title> </head> <body> Здравствуй, Мир! </body> </html>

- 34 -

Сохраните содержимое в файл с расширением .htm или .html, например first.html. Этот файл можно открыть в любом браузере. Любой браузер позволяет посмотреть исходный текст HTML-

документа. Для этого на пустом месте страницы выберите соответствующую команду из контекстного меню (правая кнопка мыши). Для Internet Explorer это команда “Просмотр HTML-кода”, для Opera - “Исходный код”, для Google Chrome - “Просмотр кода страницы”, для Mozilla Firefox - “Исходный код страницы” и т.п.

3.2. Общие свойства страницы После добавления страницы, можно задать ее основные свойства: � заголовок страницы, который будет отображаться в заголовке окна браузера (тег <title>); � кодовую страницу (язык); � цвет фона или фоновый рисунок; � цвет текста по умолчанию, цвет гиперссылок и т.п. Сначала надо выбрать один из режимов редактирования (так,

чтобы в окне редактирования был виден курсор), а затем в меню File (Файл) выбрать пункт Properties… (Свойства).

Рис. 26. Указание заголовка страницы

- 35 -

Рис. 27. Вкладка с заголовком страницы

После записи заголовка в HTML-коде страницы появится элемент с указанным текстом между парными тегами <title>…</title>, который размещен в служебной области <head>…</head> (рис. 28).

Рис. 28. HTML-код с элементом <title>

На вкладке Formatting (Форматирование) окна Page Properties (Свойства страницы) можно задать фон страницы, цвет шрифта текста и цвета гиперссылок (рис. 29).

- 36 -

Рис. 29. Свойства форматирования страницы

В качестве фона может быть выбран рисунок, либо простая одноцветная заливка. Для указания фонового рисунка нужно поставить галочку в пункте Background picture (Фоновый рисунок), затем выбрать нужный файл, нажав кнопку Browse… (Обзор). Если необходимо сделать фон страницы одноцветный, то галочка

Background picture (Фоновый рисунок) снимается и ниже выбирается цвет фона. Выбор Automatic означает, что цвет фона задаваться не будет, и при просмотре фон будет того цвета, который выбран у пользователей по умолчанию. На этой же вкладке (рис. 29) можно установить цвет шрифта

текста по умолчанию и цвета гиперссылок (исходный цвет ссылки, ссылка по которой уже переходили, активная ссылка, выделенная курсором ссылка).

3.3. Предварительный просмотр страниц в браузере В режиме визуального редактирования Design Microsoft

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

- 37 -

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

программой, можно быстро переключаться с одного на другой. Чтобы просмотреть страницу в браузере, нужно в меню File (Файл) в подменю Preview in Browser (Посмотреть в браузере) выбрать требуемый браузер, который установлен на компьютере (рис. 30). Чтобы сделать любой из перечисленных в списке браузеров

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

Рис. 30. Выбор браузера для просмотра страницы

- 38 -

3.4. Форматирование текста

Ввод, выделение, вырезание и копирование текста

Работа с текстом в режиме визуального конструирования Design очень похожа на редактирование и форматирование текста в других текстовых редакторах (например, в Microsoft Word). В Microsoft Expression Web можно использовать все стандартные приемы, применяемые при редактировании - ручной ввод текста с клавиатуры, выделение, перемещение, вырезание и копирование отдельных фрагментов. Ручной ввод, выделение, вырезание и копирование не имеют

никаких принципиальных особенностей. Для копирования и вырезания выделенного фрагмента можно использовать соответствующие команды Cut (Вырезать) и Copy (Копировать) из меню Edit (Правка) (рис. 31), контекстное меню (правая кнопка мыши) или стандартные клавиатурные сочетания Ctrl+X и Ctrl+C.

Рис. 31. Меню Edit

Вставка текста

В Microsoft Expression Web есть два способа вставки текста. Наиболее употребительная команда Paste (Вставить) или Ctrl+V сохраняет форматирование, заимствованное из исходного документа. Команда Paste Text… (Вставить текст), для которой нет сокращенной комбинации клавиш, позволяет управлять разрывом строк и пропусками во вставляемом тексте (рис. 32).

- 39 -

Рис. 32. Окно Paste Text

В окне Paste Text можно выбрать один из пяти вариантов: � Plain text (Простой текст) - вставить только текст, заменяя все разрывы строк пробелами; � One <pre> formatted paragraph (Один предформатированный абзац) - заключить текст в пару тегов <рге>…</рге>, чтобы сохранить все разрывы строк; � Many <pre> formatted paragraphs (Несколько предформатированных абзацев) - использовать тег <рге> для сохранения всех разрывов строк и абзацев; � Normal paragraphs with line breaks (Обычные абзацы с разрывами строк) - преобразовать все разрывы строк в теги <br>, а абзацы окружить тегами <р>; � Normal paragraphs without line breaks (Обычные абзацы без разрывов строк) - Не требует дополнительных пояснений.

Форматирование абзаца и шрифта

При оформлении фрагментов обычного текста рекомендуется оформлять их в виде абзацев (тег <p>…</p>), добавляя затем дополнительное форматирование (выравнивание, отступы,

- 40 -

межстрочное расстояние для абзацев; гарнитура, цвет, начертание, размер, подчеркивание и т.п. для шрифта). Выделите какой-либо фрагмент текста, затем в меню Format

(Форматирование) выберите пункт Paragraph… (Абзац) (рис. 33).

Рис. 33. Окно Paragraph

В этом окне можно задать следующие параметры Alignment (Выравнивание), Left side (Отступ слева), Right side (Отступ справа), Indent first line (Отступ для первой строки), Before (Отступ сверху), After (Отступ снизу), Line spacing (Межстрочное расстояние). Значения всех параметров задаются пикселях. Некоторые свойства абзаца (выравнивание по левому краю,

выравнивание по центру, выравнивание по правому краю, уменьшить отступ слева, увеличить отступ слева) можно изменить, используя кнопки общей панели инструментов Common (рис. 34).

Рис. 34. Панель Common

- 41 -

Чтобы изменить свойства шрифта для выделенного абзаца, фрагмента текста или отдельного слова, нужно в меню Format (Форматирование) выбрать пункт Font… (Шрифт) (рис. 35).

Рис. 35. Окно Font

Некоторые свойства шрифта (гарнитура, размер, начертание, подчеркивание, фон и цвет) можно изменить, используя кнопки общей панели инструментов Common (рис. 34).

Вставка специальных символов

Для отображения символов, которые отсутствуют на клавиатуре или же использование которых запрещено (например, угловые скобки, используемые для обозначения тегов), в HTML применяются специальные знаки, начинающиеся с амперсанда & и заканчивающиеся точкой с запятой (например, &nbsp;). В р е д а к т о р е к о д а (режим Code или верхнее окно в режиме Split) специальные символы выделяются красным цветом (рис. 36).

- 42 -

При вводе в р е д а к т о р е т е к с т а (режим Design или нижнее окно в режиме Split), программа сама заменит угловые скобки на специальные символы (&lt; и &gt;) в HTML-коде. Знакомое многим клавиатурное сочетание Ctrl+Shift+Пробел (н е р а з р ы в ны й п р о б е л ), используемое в Microsoft Word, заменяется в HTML на специальный символ &nbsp;. Н е р а з р ы в н ы й п р о б е л применяют в длинной строке для словосочетаний, которые должны переноситься на новую строку полностью. Например, так можно записывать цену товара или фамилию с инициалами (рис. 36).

Рис. 36. Специальные символы в HTML

Для вставки специальных символов щелкните мышью в требуемое место окна редактора, затем в меню Insert (Вставить) выберите пункт Symbol… (Символ). При этом появится диалоговое окно (рис. 37), в котором на одной из двух вкладок можно найти нужный символ. После нажатия кнопки Insert (Вставить) в текст будет вставлен HTML-код, соответствующий выбранному символу. Можно также выбрать символ из строки Recently used symbols, в которую добавляются недавно использовавшиеся символы. Со временем все символы, которыми вы часто пользуетесь, попадут в эту строку.

- 43 -

Рис. 37. Диалоговое окно Symbol

Вставка горизонтальной линии и переноса (разрыва) строки

Чтобы вставить горизонтальную линию (одиночный тег <hr/> в HTML), щелкните мышью в нужном месте редактируемой страницы, затем в меню Insert (Вставить) из подменю HTML выберите пункт Horizontal Line (Горизонтальная линия) (рис. 38).

Рис. 38. Вставка горизонтальной линии

- 44 -

Если открыта панель Toolbox (рис. 7 справа), то в категории HTML в группе Tags можно выбрать пункт Horizontal Line (двойной щелчок) (рис. 39).

Рис. 39. Вставка горизонтальной линии из панели Toolbox

Чтобы изменить свойства линии в текстовом редакторе, щелкните по ней правой кнопкой мыши и выберите из контекстного меню пункт Horizontal Line Properties… (Свойства горизонтальной линии). В диалоговом окне можно изменить ширину Width (лучше задавать ее в процентах от ширины окна, а не в виде абсолютного значения в пикселях), а также толщину Height, выравнивание Alignment и цвет Color (рис. 40).

Рис. 40. Свойства горизонтальной линии

- 45 -

В редакторе текста Microsoft Expression Web так же, как и в Microsoft Word, нажатие на клавишу Enter на клавиатуре означает окончание абзаца. Чтобы сделать разрыв (перенос) строки не завершая абзаца

(одиночный тег <br/> в HTML), щелкните мышью в нужном месте редактируемой страницы, затем в меню Insert (Вставить) из подменю HTML выберите пункт Break… (Разрыв). В появившемся окне оставьте пункт Normal line break (Обычный разрыв строки).

Рис. 41. Окно Break

Так же, как и в Microsoft Word, в текстовом редакторе для разрыва строки можно использовать клавиатурное сочетание Shift+Enter. Если открыта панель Toolbox (рис. 7 справа), то в категории HTML в группе Tags можно выбрать пункт Break (двойной щелчок) (рис. 39).

Создание списков

Для создания нумерованного или маркированного списка выделите нужные абзацы, затем нажмите кнопку или на общей панели инструментов Common (рис. 34). Другие варианты оформления списка можно задать в диалоговом

окне, которое вызывается при выборе пункта Bullets and Numbering… (Маркеры и нумерация) из меню Format (Форматирование). На соответствующих вкладках: Picture Bullets, Plain Bullets и Numbers можно выбрать вид маркера (картинка или шрифт) или вариант нумерации (цифры арабские, римские или латинские буквы, задать начальное значение номера) (рис. 42).

- 46 -

Рис. 42. Диалоговое окно Bullets and Numbering

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

мышкой в любом месте списка, затем из меню Format (Форматирование) выберите пункт Bullets and Numbering… (Маркеры и нумерация). При этом появится диалоговое окно List Properties (Свойства списка), которое отличается от диалогового окна Bullets and Numbering (Маркеры и нумерация) только дополнительной вкладкой Other (Другие) (рис. 43). Это диалоговое окно можно вызвать также через контекстное

меню (правая кнопка мыши) выбрав пункт List Properties….

- 47 -

Рис. 43. Диалоговое окно List Properties

На вкладке Other пункт (None) отменяет список, остальные пункты переключают текущий список в с п и с о к о п р е д е л е н и й , н у м е р о в а н ны й с п и с о к или м а р к и р о в а н н ы й с п и с о к .

Создание заголовков

Заголовки помогают ориентироваться в веб-страницах и придают тексту смысловую структуру. Заголовки помогают посетителю сайта быстро найти нужную тему, не читая весь текст. В HTML предусмотрено шесть уровней заголовков, от самого крупного <h1> до самого мелкого <h6>. Для самых важных заголовков (название статьи или заголовок всей страницы) используется <h1>. Для подзаголовков используются <h2> и <h3>, а <h4> или <h5> - для разделов на боковых панелях. Чтобы создать заголовок, щелкните мышью в любом месте

нужного абзаца, затем из раскрывающегося списка Style (Стиль) на

- 48 -

панели инструментов Common выберите нужный стиль заголовка Heading 1 ÷ Heading 6 (рис. 44).

Рис. 44. Выбор стилей абзаца

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

Комментарии

Комментарием в HTML считается любой текст, заключенный между символьными элементами <!-- и -->. Например, следующий фрагмент, помещенный в HTML-код страницы, будет считаться комментарием, и, следовательно, не будет отображаться браузером.

<!-- А тут мы вставили комментарий --> Для вставки комментария, переключитесь в режим редактирования

кода (режим Code или верхнее окно в режиме Split) и вручную добавьте комментарий. В окне редактирования кода комментарии выделяются зеленым цветом.

- 49 -

3.5. Работа с изображениями

Общие сведения

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

с изображениями, вставляемыми в текст, HTML-файлы не содержат внутри себя картинки. Изображения находятся в отдельных файлах и подгружаются браузером отдельно при отображении страницы на экране. Внутри веб-страницы хранятся только ссылки на файлы изображений (непарный тег <img>). Благодаря этому можно использовать на своих страницах не только картинки со своего сайта, но и рисунки с других сайтов (если это разрешено в настройках удаленного сервера), просто правильно указав ссылку на рисунок с чужой веб-страницы. При создании сайтов используются в основном три формата

графических файлов: GIF (расширение файла .gif), JPEG (расширение файла .jpg) и PNG (расширение файла .png). Формат GIF наилучшим образом подходит для изображений небольшого размера с высокой контрастностью, картинок с прозрачностью (например, для логотипов, схем, надписей), и для анимированной растровой графики. JPEG используют для фотографий, картин, рисунков высокого качества с большим количеством цветов. Прозрачность и анимация в JPEG не поддерживаются. Формат PNG разрабатывался как альтернатива защищенному патентом и не поддерживающему переменную прозрачность формату GIF. Формат PNG сочетает лучшие качества форматов JPEG и GIF - сжимает изображение, оставляя только нужные цвета, и при этом обеспечивает четкость и контрастность для графики. В большинстве случаев изображения в формате PNG занимают меньше места, чем в JPEG (кроме фотографий) и в GIF (кроме крошечных изображений с несколькими цветами).

- 50 -

Вставка изображений

Для вставки изображения щелкните мышью в требуемом месте редактируемой страницы, затем в меню Insert (Вставить) из подменю Picture (Картинка), выберите пункт From File… (Из файла). После этого появится окно выбора файла изображения. После выбора файла с изображением появится диалоговое окно, в

котором можно задать краткое описание в поле Alternate text (это так называемый краткий текст замены). Введенный в это поле текст должен отображаться в том случае, если картинки не загружаются (например, из-за медленного интернета) или же показ изображений отключен в браузере (например, для экономии трафика при мобильном подключении) (рис. 45).

Рис. 45. Диалоговое окно Accessibility Properties

Если убрать галочку в пункте Show this prompt when inserting images (Показывать подсказку при вставке изображений), то это окно больше не будет появляться. После нажатия кнопки ОК картинка появится на странице. Если

нужно, нажмите клавишу Enter, чтобы следующий за ней заголовок или текст начинался с новой строки. Сохраните изменения, выбрав в меню File (Файл) пункт Save

(Сохранить), или используя клавиатурное сочетание Ctrl + S. Если добавленная картинка еще не входила в состав файлов сайта, то откроется окно Save Embedded Files (Сохранить прикрепленные файлы). Нажмите кнопку Change Folder (Изменить папку), чтобы перейти в ту папку сайта, где хранятся картинки, затем нажмите ОК.

- 51 -

Выравнивание, отступы, размеры и рамки изображений

Выравнивание по горизонтали (обтекание) определяет, как изображение располагается относительно элементов, находящихся слева и справа от нее. Выравнивание по вертикали определяет, находится ли изображение на том же уровне, выше или ниже соседних элементов, которые могут быть как другими изображениями, так и текстом. Чтобы задать параметры выравнивания, дважды щелкните по

картинке (или выберите в контекстном меню пункт Picture Properties…), затем в диалоговом окне Picture Properties (Свойства картинки) перейдите на вкладку Appearance (Внешний вид). По умолчанию параметр Wrapping style (Обтекание) установлен

в None (Нет), а поля равны нулю. В зависимости от того, как текст должен обтекать картинку, выберите значение Left (Слева) или Right (Справа) (рис. 46).

Рис. 46. Диалоговое окно Picture Properties

- 52 -

В раскрывающемся списке Alignment (Выравнивание) обычно выбрано значение Default (По умолчанию). Установите в этом списке нужное значение (точнее, одно из следующих): Default (По умолчанию), Тор (По верхнему краю), Middle (По центру) или Bottom (По нижнему краю) (рис. 46). Остальные способы современные браузеры не поддерживают. Эффект выравнивания зависит от установленного режима

обтекания. Сравните, например, рис. 47 слева, на котором установлено выравнивание по верхнему краю без обтекания, и рис. 47 справа, на котором установлено такое же выравнивание, но с обтеканием справа.

Рис. 47. Положение рисунка относительно текста при различном выравнивании

На вкладке Appearance диалогового окна Picture Properties можно также задать толщину рамки (Border thickness), горизонтальные и вертикальные отступы (Horizontal margin и Vertical margin), размеры (Width и Height). Все значения задаются в пикселях (рис. 46). Изменять цвет, толщину и стиль рамки можно в диалоговом окне

Borders and Shading (Границы и заливка), которое вызывается командой Borders and Shading в меню Format.

3.6. Оформление гиперссылок

Общие сведения

Главная особенность Всемирной паутины (World Wide Web, или WWW) – это возможность переходить с одной страницы на другую, где бы та ни находилась. Для этого используются г и п е р с с ы л к и

- 53 -

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

Добавление гиперссылки

Для вставки гиперссылки предварительно выделите фрагмент текста или рисунок, который будет работать как гиперссылка, затем в меню Insert (Вставить) выберите пункт Hyperlink… (Гиперссылка). Еще проще выбрать команду из контекстного меню или использовать комбинацию клавиш Ctrl + K. В любом случае появится диалоговое окно Insert Hyperlink (Добавление гиперссылки) (рис. 48).

Рис. 48. Диалоговое окно Insert Hyperlink

- 54 -

В строке Address (Адрес) вводится путь к файлу страницы, на которую должна ссылаться гиперссылка или полный адрес (URL) страницы с другого сайта. Если страница, на которую будет ссылаться гиперссылка, расположена в текущем сайте, то имя файла страница можно выбрать мышью в списке и это имя автоматически вставится в строку Address. Для редактирования уже существующей ссылки курсор ввода

нужно установить на гиперссылку и в меню Insert опять выбрать пункт Hyperlink… (Ctrl + K) или же выбрать в контекстном меню пункт Hyperlink Properties (Свойства гиперссылки). При этом появится окно редактирования гиперссылки, аналогичное рис. 48. Пример внешней гиперссылки в HTML на веб-страницу или сайт:

<a href="http://company.yandex.ru">О компании</a> Для создания ссылки на электронный почтовый адрес необходимо

в окне редактирования или вставки гиперссылки (рис. 48) щелкнуть в левой колонке Link to (Связать) по пункту E-mail Address (Почтовый адрес), а затем набрать нужный адрес в поле E-mail Address. В поле Subject (Тема) можно добавить тему письма. Пример почтовой гиперссылки в HTML (без темы письма):

<a href="mailto:mike@mail.ru">Написать автору</a> При щелчке на такой ссылке у пользователя, просматривающего

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

Задание места открытия гиперссылки

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

- 55 -

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

мыши по существующей ссылке и вызовите любым вышеописанным способом диалоговое окно редактирования гиперссылки (рис. 48). Теперь нажмите кнопку Target Frame… (Конечный фрейм) и в новом окне выберите вариант New Window (Новое окно).

Добавление всплывающих подсказок

Когда вы перемещаете курсор над ссылкой на какой-либо странице, иногда появляется короткий текст, описывающий назначение ссылки. Конечно, задавать этот параметр не обязательно, но, поскольку он помогает пользователям ориентироваться, делайте это, когда есть возможность. Чтобы добавить всплывающую подсказку, щелкните правой кнопкой мыши по существующей ссылке и вызовите любым вышеописанным способом диалоговое окно редактирования гиперссылки (рис. 48). Теперь нажмите кнопку ScreenTip… (Подсказка) и в новом окне введите нужный текст.

Добавление закладок (якорей)

Закладки, или, как их еще называют, я к о р я , позволяют переходить в заданное место длинной веб-страницы. Закладка создается в два этапа: сначала сама закладка (якорь), а потом - ссылка, ведущая на эту закладку. Чтобы создать закладку, предварительно выделите текст, на который будет осуществляться переход, затем в меню Insert (Вставить) выберите пункт Bookmark… (Закладка) или же используйте клавиатурную комбинацию Ctrl + G. В диалоговом окне Bookmark выделенный текст автоматически предлагается в качестве имени закладки (рис. 49). Если хотите, введите другое имя, затем нажмите кнопку ОК. Окно закроется, и выделенный текст станет закладкой, о чем свидетельствует пунктирное подчеркивание.

- 56 -

Рис. 49. Диалоговое окно Bookmark

Чтобы убрать закладку, выделите текст, который раньше был помечен закладкой, затем в контекстного меню (правая кнопка мыши) выберите пункт Bookmark Properties… (Свойства закладки). Выберите имя закладки и нажмите кнопку Clear (Очистить). Чтобы создать ссылку на закладку текущей страницы, в

диалоговом окне Insert Hyperlink (рис. 48) щелкните в левой колонке по пункту Place in This Document (Место в этом документе), затем укажите на закладку в списке, который расположен в центральной части окна, и нажмите кнопку OK (рис. 50).

Рис. 50. Диалоговое окно Insert Hyperlink

- 57 -

Для создания ссылки на закладку другой страницы нужно предварительно сохранить целевую страницу или все страницы сайта (команды Save (Сохранить) и Save All (Сохранить все) в меню File), затем в диалоговом окне Insert Hyperlink щелкнуть в левой колонке по пункту Existing File or Web Page (Существующий файл или веб-страница), затем в списке файлов выбрать страницу с закладкой и нажать кнопку Bookmark… (рис. 48).

Проверка гиперссылок

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

обязательно сделайте общее сохранение (команда Save All (Сохранить все) в меню File), затем перейдите на вкладку Site View (Просмотр сайта) (кнопка в верхней части окна редактирования). На вкладке Folders (Папки) (кнопка в нижней части окна редактирования) отметьте нужную веб-страницу, а затем перейдите на вкладку Hyperlinks (Гиперссылки) (рис. 51).

Рис. 51. Просмотр гиперссылок веб-страницы

- 58 -

В режиме просмотра гиперссылок показываются все ссылки,

ведущие на страницу и с нее. Чтобы проанализировать какую-либо другую, из представленных на этой диаграмме страниц, щелкните по ней правой кнопкой мыши и выберите из контекстного меню команду Move to Center (Переместить в центр). Для того, чтобы проверить отдельную ссылку щелкните правой

кнопкой мыши по внешней ссылке и выберите из контекстного меню команду Verify Hyperlink (Проверить ссылку). Если ссылка “битая”, то соответствующая ей стрелка будет разорвана (рис. 51). Чтобы проверить все ссылки на сайте выберите в меню Panels

(Панели инструментов) пункт Hyperlinks. На панели Hyperlinks перечислены все внутренние “битые” ссылки (Broken), а непроверенные (Unknown) внешние помечены вопросительным знаком (рис. 52).

Рис. 52. Просмотр гиперссылок всего сайта

Нажмите кнопку Verifies hyperlinks in the current web (Проверить гиперссылки в текущем сайте) в верхнем левом углу панели. В появившемся диалоговом окне Verify Hyperlinks отметьте переключатель Verify all hyperlinks (Проверить все ссылки) и нажмите кнопку Start (Начать). Спустя некоторое время на панели Hyperlinks будет показано состояние всех ссылок на сайте.

- 59 -

3.7. Работа с таблицами В HTML документах таблицы используются как по прямому

назначению - представление информации в табличном виде, так и для сложной разметки страниц: создания многоколоночных текстов, точного позиционирования текста и рисунков относительно друг друга и т.п. Таблицы позволяют представить текст и графику в виде, удобном для восприятия. Чтобы вставить таблицу в режиме визуального конструирования,

сначала щелкните мышью в том месте, куда хотите вставить таблицу, затем в меню Table (Таблица) выберите пункт Insert Table… (Вставить таблицу). В диалоговом окне Insert Table (рис. 53) укажите в секции Size (Размер) число строк (Rows) и столбцов (Columns).

Рис. 53. Диалоговое окно Insert Table

- 60 -

В секции Layout (Формат) задайте выравнивание (Alignment), способ обтекания таблицы (Float), а также величины отступов (Cell padding) и полей (Cell spacing). Отметьте флажок Specify width (Задать ширину), если хотите задать ширину всей таблицы, и с помощью переключателей укажите, должна ли ширина измеряться в абсолютных единицах (пикселях) или в процентах относительно ширины всей страницы. Точно так же поступите с высотой (флажок Specify height). В секции Borders (Границы) укажите толщину рамки вокруг таблицы. При желании можете задать цвет и с помощью кнопки Browse добавить фоновую картинку. Когда все будет сделано, нажмите кнопку ОК (рис. 53). Вставить простую таблицу с параметрами по умолчанию можно,

нажав кнопку Insert Table (Вставить таблицу) на панели инструментов Common (рис. 34) и обведя курсором нужное число строк и столбцов в выпадающей таблице (рис. 54).

Рис. 54. Вставка таблицы кнопкой Insert Table на панели инструментов Common Когда вы отпустите кнопку мыши, на странице появится таблица

указанного размера. Чтобы задать другие параметры нажмите кнопку More Options (Дополнительные параметры). Параметры созданной таблицы можно изменить, выделив

предварительно таблицу и выбрав в контекстном меню (правая кнопка мыши) пункт Table Properties… (Свойства таблицы). Помимо общих свойств таблицы, можно устанавливать параметры отдельной ячейки или сразу нескольких ячеек. Для этого установите курсор в нужную

- 61 -

ячейку или выделите несколько ячеек, затем в контекстном меню используйте пункт Cell Properties… (Свойства ячейки). Чтобы добавить заголовок таблицы щелкните мышью в любом

месте внутри таблицы, затем выберите из меню Table в подменю Insert (Вставить) пункт Caption (Заголовок). Теперь можно ввести заголовок, изменить гарнитуру или размер шрифта, как и для любого другого текста.

- 62 -

4. ПУБЛИКАЦИЯ САЙТА

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

4.1. Проверка сайта Встроенные в Microsoft Expression Web средства формирования

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

могут помочь в поиске проблем с кодом: § Accessibility Reports или Accessibility Checker (Проверка

доступности) - находит проблемы кода, влияющие на доступность сайта. § Compatibility Reports (Проверка совместимости) -

анализирует код страницы и показывает проблемы с кодом, который не соответствует указанным HTML и CSS стандартам. § CSS (Проверка CSS) - находит проблемы CSS-кода на сайте. Все инструменты проверки доступны в меню Tools

(Инструменты). Для просмотра общей информации о сайте, перейдите на вкладку

Site View (Просмотр сайта) (кнопка в верхней части окна редактирования), затем щелкните по кнопке Reports (Отчеты) в нижней части окна редактирования (рис. 55).

- 63 -

Рис. 55. Суммарная статистика сайта Site Summary

В окне Site Summary приведена общая статистика сайта: общее количество всех файлов, количество графических файлов, файлов на которые нет ни одной ссылки, общее количество гиперссылок, число “битых” гиперссылок, внутренних гиперссылок и т.п.

4.2. Пометка страниц, не подлежащих публикации Быстрый просмотр статуса публикации страниц сайта позволит

вам пометить страницы, которые еще не готовы для всеобщего обозрения. Заодно вы сможете опубликовать страницы, для которых раньше стояла пометка “Не публиковать”, если работа над ними уже завершена. При выполнении просмотра не делается ничего такого, что фактически помогло бы подготовить страницы для публикации. Единственная его цель - предотвратить случайную публикацию неготовых страниц, показав, какие страницы будут опубликованы. Чтобы проверить или изменить статус публикации страниц,

используйте меню, которое находится ниже кнопки вкладки Site View. Первоначально на этой кнопке указано Site Summary. В подменю Files выберите пункт All Files (рис. 56). В окне теперь будут показаны все файлы сайта (рис. 57). Файлы,

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

- 64 -

Рис. 56. Меню на вкладке Reports

Для того, чтобы установить или снять пометку, выделите нужный файл, затем в контекстном меню (правая кнопка мыши) выберите пункт Exclude from Publishing (Исключить из публикации).

Рис. 57. Список всех файлов сайта

4.3. Регистрация на сервере бесплатного хостинга Для размещения сайта необходимо, прежде всего, найти

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

- 65 -

перечисленным требованиям. Наиболее подходящим вариантом в настоящее время является хостинг 000webhost.com. Пр и м е ч а н и е . FTP (File Transfer Protocol - протокол передачи

файлов) - стандартный протокол, предназначенный для передачи файлов в сети Интернет. FTP является одним из старейших прикладных протоколов, появившимся задолго до HTTP, в далеком 1971 году. Однако, несмотря на внушительный возраст, он и сегодня широко используется для распространения программного обеспечения и документации, а также для удаленного доступа к различным серверам. Часто для передачи файлов по этому протоколу используют как специализированные FTP-клиенты (например, FileZilla), так и встроенные средства различных программ (например, Microsoft Expression Web). Сначала необходимо зарегистрировать бесплатный домен. Сделать

это можно на сайте https://www.000webhost.com. Закрывайте дополнительные рекламные окна, если они будут открываться! Для регистрации перейдите по ссылке Sign Up! (рис. 58).

Рис. 58. Сайт 000webhost.com

- 66 -

Оставьте выбранным пункт I will choose your free subdomain (recommended), введите желаемое имя поддомена, заполните поля Name (любое) и Email (свой действующий адрес электронной почты). Введите два раза пароль (обязательно буквы и цифры) в поля Password и Repeat password. Поставьте “галочку” в пункте I agree to Terms Of Service. Прим е ч а н и е . Не используйте для регистрации почтовый

адрес, зарегистрированный на MAIL.RU! Очень многие пользователи этого популярного бесплатного почтового сервиса жалуются, что письма, содержащие ссылку для активации, не приходят. Используйте для регистрации другой почтовый адрес. Теперь докажите, что вы не верблюд робот. Для этого щелкните по

пустому квадратику слева от соответствующей надписи (рис. 59).

Рис. 59. Регистрация

- 67 -

Выберите три требуемые картинки и нажмите кнопку Подтвердить (рис. 60).

Рис. 60. Регистрация

Теперь нажмите кнопку Create My Account (рис. 59). Если все прошло нормально, то вы увидите что-то вроде этого

(рис. 61).

Рис. 61. Завершение регистрации

- 68 -

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

Рис. 62. Подтверждение регистрации

После активации вам придет второе письмо, содержащее важную информацию для доступа к бесплатному серверу. Информация для доступа к вашему сайту через FTP содержится в разделе *** File Upload Details ***:

FTP Hostname: ftp.pupkin.net23.net or 31.170.160.84

FTP Username: a6130896 FTP Passsword: ******

4.4. Публикация сайта В меню Site (Сайт) программы Microsoft Expression Web выберите

пункт Publishing Settings… (Настройки публикации). При этом откроется вкладка Publishing в диалоговом окне Site Settings (Настройки сайта). Нажмите кнопку Add... (Добавить) (рис. 63). В диалоговом окне Connection Settings (Настройки соединения)

введите произвольное имя в поле Name и правильно введите свои данные в поля Location, User name и Password (рис. 64). Эти

- 69 -

сведения есть в полученном вами регистрационном письме (Полное Имя FTP Сервера, Имя пользователя FTP, Пароль FTP). В поле Directory введите public_html. После ввода данных нажмите кнопку Save (Сохранить).

Рис. 63. Диалоговое окно Site Settings

Рис. 64. Диалоговое окно Connection Settings

- 70 -

Теперь попробуйте соединиться с сервером. Для этого в меню Site выберите пункт Publishing (Публикация). В центре окна нажмите ссылку Connect to the current publishing destination (Соединить с текущим местом публикации). Если при попытке соединения вы увидите окно похожее на это

(рис. 65), то это, скорее всего, означает, что пароль для FTP-доступа не совпадает с паролем вашего аккаунта. Чтобы установить новый пароль на странице List of your accounts списка аккаунтов (рис. 62) щелкните по ссылке Go to CPanel справа от имени вашего домена. В открывшейся панели управления найдите в группе » Files ссылку Change FTP Password.

Рис. 65. Неправильный пароль на FTP-доступ

Если же соединение установилось, то в главном окне программы появятся две панели с файлами (рис. 66).

Рис. 66. Соединение с сервером по протоколу FTP

- 71 -

В левой панели находится список локальных файлов и папок вашего сайта, справа перечислено содержимое вашего сайта на сервере хостера (там пока что только два файла - служебный файл .htaccess и веб-страница с приветствием default.php). Сразу удалите файл default.php при помощи кнопки Delete в верхней части правой панели. Нажмите в верхней части левой панели кнопку Select All

(Выделить все) или же воспользуйтесь клавиатурной комбинацией Ctrl + A. Теперь нажмите кнопку между панелями, чтобы начать

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

строке зарегистрированное вами доменное имя. К сожалению, вместо главной страницы вашего сайта, вы увидите список всех файлов и папок в корневой директории (рис. 67).

Рис. 67. Список всех файлов и папок в корневой директории сайта

Это произошло из-за того, что на сервере файл вашей главной страницы default.html не воспринимается как индексный файл (см. раздел 2.4). Исправить эту неприятную ситуацию можно двумя способами.

- 72 -

П е р вы й в а р и а н т - изменить файл .htaccess. Это файл без названия, имеющий только расширение. Написание расширения происходит от английских слов hypertext (гипертекст) и access (доступ). С его помощью легко внести локальные изменения в настройки сервера, не обладая правами администратора сервера (если обработка файла .htaccess разрешена администратором). Файл влияет только на содержащую его папку и на вложенные папки. Для внесения изменений, сначала скопируйте файл .htaccess в папку на своем компьютере, затем откройте в блокноте (дважды щелкнув по строке с файлом). Допишите в конце содержимого файла с новой строки команду DirectoryIndex default.html. Теперь сделайте сохранение, а затем замените исходный файл в папке сервера на измененный файл. В т о р о й в а р и а н т связан с переименованием главной

страницы. Выделите в левой панели файл default.html, затем в контекстном меню (правая кнопка мыши) выберите команду Rename (Переименовать) или же используйте клавишу клавиатуры F2. Замените название файла на index.html, потом в диалоговом окне Confirm Rename (Подтвердите переименование) нажмите кнопку Yes. Если на других веб-страницах вашего сайта есть гиперссылки, которые указывают на текущую страницу, то появится диалоговое окно, в котором предлагается автоматически исправить эти ссылки (рис. 68). Обязательно нажмите кнопку Yes.

Рис. 68. Предложение исправить ссылки на текущую страницу

Теперь заново скопируйте все веб-страницы вашего сайта на сервер и обновите главную страницу в браузере (Ctrl + F5).

- 73 -

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

(кнопка “Обновить” или F5) вы можете сразу не увидеть изменений, если браузер отобразит старый вариант страницы из своей временной памяти (кэша). В этом случае лучше обновлять страницы при помощи сочетания клавиш Ctrl + “Обновить” или Ctrl + F5. В этом случае кэш браузера игнорируется, и страница заново скачивается с сайта.

- 74 -

5. ВОПРОСЫ ДЛЯ САМОКОНТРОЛЯ

1. Что такое веб-страница? 2. Что такое HTML? 3. Что означает термин д о м е н ? 4. Какие режимы редактирования можно использовать в

Microsoft Expression Web? 5. Что означает запись http в адресе сайта? 6. Что означает запись https в адресе сайта? 7. Какие расширения чаще всего используются для гипертекстовых файлов?

8. Что такое х о с т и н г ? 9. Чем отличаются статические сайты от динамических? 10. Перечислите форматы графических файлов, которые могут быть использованы для показа изображений на веб-странице.

11. Что такое C M S ? 12. Что такое т е г ? 13. Для чего нужен и н д е к с ны й ф а й л ? 14. Какие требования предъявляются к именам файлов для сайта? 15. Для чего нужны г и п е р с с ы л к и ? 16. Что такое з а к л а д к а ( я к о р ь ) ? 17. Что такое п у б л и к а ц и я сайта? 18. Перечислите этапы п у б л и к а ц и и сайта. 19. Что обозначает аббревиатура F T P ? 20. Назначение и расположение файла .htaccess.

- 75 -

6. ПОРЯДОК ВЫПОЛНЕНИЯ ЛАБОРАТОРНОЙ РАБОТЫ

6.1. Порядок выполнения лабораторной работы 1. Изучить содержание основных разделов данных методических указаний.

2. Ответить на вопросы для самоконтроля. 3. Проанализировать задание, найти и прочитать соответствующие разделы данных методических указаний.

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

5. Оформить в редакторе Word и распечатать отчет по лабораторной работе.

6. Ответить на контрольные вопросы преподавателя.

6.2. Критерии оценки Работа будет зачтена, если студент самостоятельно выполнил

работу в соответствии с заданием, продемонстрировал созданный и опубликованный веб-сайт, ответил на вопросы для самоконтроля и вопросы преподавателя, оформил отчет в соответствии с требованиями настоящих методических указаний.

- 76 -

7. ЗАДАНИЯ К ЛАБОРАТОРНОЙ РАБОТЕ

1. Установите программу Microsoft Expression Web, если она не установлена. Создайте в программе новый одностраничный сайт.

2. Путем добавления и оформления новых страниц создайте сайт, состоящий (как минимум) из четырех веб-страниц, с оформлением и структурой, аналогичными рисунку.

3. Тематика страниц создаваемого сайта – интернет-технологии в бизнесе или же согласованная с преподавателем собственная тема.

4. В качестве источников информации для страниц своего сайта используйте сайты соответствующей тематики (например, elcomrevue.ru, ecommercelaw.ru, http://emagazin.info, http://cmsmagazine.ru, forbes.ru и т.п.).

5. На страницах сайта о б я з а т е л ь н о должны присутствовать следующие элементы: - На главной странице:

· Заголовки разного уровня. · Различное начертание шрифтов в тексте. · Абзацы и заголовки с различным типом выравнивания. · Рисунки с различным типом выравнивания. · Ссылки на три другие страницы сайта. · Ссылки на любые другие сайты в интернете. · Списки. · Горизонтальная линия. · Фамилия и группа студента, выполнившего работу

- На каждой из внутренних страниц: · Заголовки разного уровня. · Различное начертание шрифтов в тексте. · Абзацы и заголовки с различным выравниванием. · Рисунки с различным типом выравнивания. · С сы л к а н а г л а в н ую с т р а н и ц у с а й т а .

- 77 -

· Списки (хотя бы на одной из внутренних страниц). · Таблица (хотя бы на одной из внутренних страниц).

6. После оформления главной страницы перейдите в режим Code и добавьте между тегами </head> и <body> комментарий следующего вида: <!-- Сайт выполнил Иванов И.И., гр. 721 -->

7. Разместите свой сайт на бесплатном хостинге.

www.rbcdaily.ru www.e-commerce.ru

- 78 -

Приложение 1. Образец отчета по лабораторной работе

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ

ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ

«САМАРСКИЙ ГОСУДАРСТВЕННЫЙ АЭРОКОСМИЧЕСКИЙ УНИВЕРСИТЕТ ИМЕНИ АКАДЕМИКА С.П. КОРОЛЕВА

(НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ УНИВЕРСИТЕТ)» (СГАУ)

МИРОВЫЕ ИНФОРМАЦИОННЫЕ РЕСУРСЫ

ЛАБОРАТОРНАЯ РАБОТА № 3

Выполнил Иванов М.А. группа 7202 Проверил оценка дата

Самара 2016

- 79 -

Адрес созданного сайта: http://pupkin.net23.net

Главная страница

Вторая страница

- 80 -

Третья страница

Четвертая страница

- 81 -

Учебное издание

СОЗДАНИЕ ВЕБ-САЙТОВ В MICROSOFT EXPRESSION WEB 4 Методические указания

Составители: Семенов Валерий Владимирович Шлыкова Марина Петровна

Редактор Доверстка

Подписано в печать . Формат 60х84 1/16. Бумага офсетная. Печать офсетная.

Печ. л. . Тираж экз. Заказ _ ___ . Арт. С- /2013

Самарский государственный аэрокосмический университет.

443086 Самара, Московское шоссе, 34. _________________________________________________

Изд-во Самарского государственного аэрокосмического университета.

443086 Самара, Московское шоссе, 34