Понятие IP адресации, масок подсетей и их расчет. Проектирование структуры веб-сайта

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

1. Выберите в меню Site пункт New Site. Появится диалоговое окно New.

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

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

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

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

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

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

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

По умолчанию для многих серверов индексным является файл с именем index (намного реже используются имена default и home).

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

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

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

Чтобы выбрать и настроить шаблон сайта надо:

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

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

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

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

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

Для создания пустой страницы надо:

1. Выбрать в меню File подменю New, а в нем пункт Page. Появится диалоговое окно New.

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

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

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

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

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

Создание новой страницы по шаблону:

1. Выберите в меню File подменю New, а в нем пункт Page. Появится диалоговое окно New.

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

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

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

Для создания новой пустой папки выберите в меню File, подменю New, а в нем пункт Folder (Папка). В панели Folder List появится новая пустая папка, в которую можно добавлять другие папки и файлы.

Для добавления папки можно также использовать контекстное в панели Folder List.

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

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

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

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

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

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

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

Например, структура простого 4-х страничного сайта с рисунками в папке images, может выглядеть как на рисунке 21

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

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

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

HTML (аббревиатура от Hyper Text Markup Language) это язык гипертекстовой разметки, предназначенный для создания веб-страниц. При просмотре страницы браузер (Internet Explorer, Firefox, Opera, Google Chrome, Safari и др.) преобразовывает HTML-код в веб-страницу, отображаемую на экране пользователя.

Веб-страница состоит из двух частей:

- заголовок страницы - содержит название страницы, описание, ключевые слова и другую служебную информацию;

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

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

<html>

<head>

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

</head>

<body>

Основная часть

</body>

</html>

Здесь используются элементы языка HTML, которые называются тегами (tag - бирка, ярлык, этикетка) или дескрипторами (description - описание). Тег состоит из имени, заключенного в угловые скобки, и необязательного набора атрибутов. Теги бывают парными и непарными. Парные теги состоят из открывающего или начального тега (<html>, <head>, <body>) и закрывающего или конечного тега, отличающегося от первого только значком слеша (slash - косая черта). Между открывающим и закрывающим тегом размещается содержимое тега (текст, ссылка и другие элементы). К непарным тегам относится, например, тег разрыва строки <br>.

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

<html>, </html> - устанавливаются в начале и конце страницы.

<head>, </head> - используются для задания заголовка страницы.

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

Для работы с HTML в Microsoft Expression Web используется режим редактирования Code.

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

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

<html>

<head>

<title>Моя первая веб-страница</title>

</head>

<body>

Кубанский институт информзащиты!

</body>

</html>

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

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

После добавления страницы, можно задать ее основные свойства:

- заголовок страницы, который будет отображаться в заголовке окна браузера (тег <title>);

- кодовую страницу (язык);

- цвет фона или фоновый Рис.;

- цвет текста по умолчанию, цвет гиперссылок и т.п.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рис. 26 - Окно 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>), добавляя затем дополнительное форматирование (выравнивание, отступы, межстрочное расстояние для абзацев; гарнитура, цвет, начертание, размер, подчеркивание и т.п. для шрифта).

Выделите какой-либо фрагмент текста, затем в меню Format (Форматирование) выберите пункт Paragraph… (Абзац).

Рис. 27. Окно Paragraph

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

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

Размещено на Allbest.ru