Теоретическое основы создания Web-сайта

Размещено на http://www.allbest.ru/

Введение

Глобальная сеть Интернет уже настолько прочно вошла в нашу жизнь, что публикация информации в ней стала для каждого нормой. Поэтому организация взаимодействия информационной системы с web-сервером является сейчас актуальной. Развитие Интернета расширило возможности работы с удалёнными подразделениями, предоставило помощь и поддержку по различным вопросам. И все это было бы невозможно без веб-сайтов, предоставляющих огромный выбор информации различного рода. В наши дни вопрос «Зачем нужен сайт?» задается все реже. И это не удивительно, ведь ответ на него давно уже стал очевидным: сайт нужен, в основном, для того, чтобы помочь его владельцу продать свой товар или услугу интернет-пользователям или дать исчерпывающую информацию по какой-либо теме.

ОБЪЕКТ ИССЛЕДОВАНИЯ: Web-сайт «Архитектура ЭВМ».

ПРЕДМЕТ - создание структуры Web-сайта.

ЦЕЛЬ - создание Web-сайта, посвященного архитектуры ЭВМ.

Приступая к созданию сайта, возникла следующая проблема: как разработать максимально эффективный сайт, отвечающий всем требованиям веб-пользователей?

Для решения поставленной проблемы были выделены следующие задачи:

· ознакомиться с современными Интернет-технологиями и, по возможности, использовать их в своей разработке;

· изучить основные понятия и программный инструментарий, применяемый для разработки и создания Web-сайтов;

· выявить и учесть методы и способы представления на Web-страницах различных видов информации (текстов и изображений);

· ознакомиться с основными правилами и рекомендациями по разработке и созданию Web-сайтов и неукоснительно следовать им в своей практике;

· определиться со структурой Web-страниц;

· найти и использовать информационный материал по выбранной теме.

НОВИЗНА РАБОТЫ заключается в том, что в современном Рунете сайтов, содержащих всеобъемлющую информацию о архитектуре эвм сопровождающуюся обширной фактографической информацией, практически нет. Поэтому, в какой-то мере, данный сайт станет первоисточником для большого числа студентов.

ПРАКТИЧЕСКАЯ ЗНАЧИМОСТЬ работы заключается в том, что многие веб-пользователи, интересующиеся архитектурой эвм, смогут найти полную и полезную информацию о нем именно на этом сайте.

1. Web-страницы и Web-сайты

Сайт (веб-сайт англ. website, от web -- паутина, «веб» и site -- «место») - это место во всемирной сети (интернете), которое имеет свой адрес, собственного хозяина и состоит из отдельных веб-страниц, которые мы видим как одно целое.

Глобальная сеть состоит из всех сайтов, доступных для общего пользования. Все странички каждого сайта объединяются одним корневым адресом (то, что мы набираем в адресной строке браузера), тематикой, системой и дизайном. Каждая страница веб-сайта это текстовый документ, который написан на языке программирования (HTML, XHTML, JAVA или другие). Эти текстовые файлы загружаются на ваш компьютер, обрабатываются браузером и отображаются на мониторе компьютера в виде страницы сайта. Язык программирования позволяет редактировать текст странички, добавлять ссылки, вставлять картинки, звуковые и видео файлы. Страницы сайтов могут быть как простыми наборами информации - тексты и картинки, так и сложными, с огромным количеством функций, которые управляются различными программами(1,с.64).

Достоинства Web-страниц:

· Малый информационный объем;

· Возможность просмотра в различных операционных системах

Для создания веб страниц в различных ОС используются различные редакторы. В частности,

· Простейшие текстовые редакторы:

в ОС Windows - Блокнот (Рисунок 1)

Рисунок 1. Блокнот

Рисунок 2. Kate

· Web - редакторы :

в ОС Windows - Microsoft SharepointDesigner(Рисунок 3)

Рисунок 3. Microsoft SharepointDesigner

2. Осмотр программного обеспечения для создания Web сайта

Adobe Dreamweaver - программный пакет, предназначенный для редактирования и разработки веб-сайтов. Он обладает всеми нужными функциями - от простого ввода HTML кода и его редактирования, до создания скриптов и настройки таблицы стилей CSS.

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

Сегодня Adobe Dreamweaver предлагает пользователям:

- разработку и дизайн кода в одном пакете;

- поддержку и удобное редактирование CCS3;

- работу с html5 и xml;

- свою коллекцию скриптов;

- простую работу с мультимедиа - добавление картинки или видео на сайт, не вызывает никаких трудностей;

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

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

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

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

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

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

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

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

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

различных браузерах.

Поддерживаемые форматы файлов: .htm, .html, .shtm, .shtml, .stm, .ssi, .inc, js, .xml, .xsd,.xsl, .xslt, .dtd, .rss, .lbi, .dwt, .css, .asp, .asa, .aspx, .aspcx, .asmx, .cs, .vb, .config, .master, .ctm, .ctml, .cfc, .as, .asc, .asr, .txt, .php, .lasso, .jsp, .jst, .jsf, .tld, .java, .wml, .edml, .vbs, .vtm, .vtml.

3. Рассмотреть основные элементы в Web-редакторе Adobe Dreamweaver

1) Для создания страницы выбираем пункт New в меню File. Появится окно:

2) Далее на панели нажимаем на кнопку Desing и вводим текс

3) Левая кнопка Code, включает режим отображения HTML кода.

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

5) Поставим текстовой курсор на строку "Персональная страница" и выберем в меню форматов пункт Heading 1.

6) Зададим шрифт. Откроем комбинированный список Font.

7) Для задания цвета используем селектор цвета.

8) Общие параметры web-страницы задаются в диалоговом окне Свойства страницы(Page Propertis). Вызвать его можно, выбрав пункт Свойства страницы (Page Propertis) меню Изменить(Modify) или щелкнув кнопкой Свойства страницы (Page Propertis) находящуюся в редакторе свойств.

web страница сайт dreamweaver

9) В списке Категория(Category), выбирается категория параметров страницы. Изначально там выбрана категория Внешний вид(Appearance), где задаются параметры обычных текстовых абзацев. Комбинированный список Шрифт страницы(Page font) задает шрифт абзацев. Кнопки В и I позволяют сделать его начертание полужирным и курсивом. Комбинированный список Размер(Size) задает размер шрифта. Селектор цвета Цвет текста (Text color) позволяет выбрать текст цвета. Селектор цвета Цвет фона (Background color) позволяет задать фон страницы. Поля ввода Левое поле(Left margin), Верхнее поле (Top margin), Правое поле (Right margin), и Нижнее поле (Bottom margin) задают отступы между рамкой окна web-обозревателя и содержимым web-страницы, соответственно слева, сверху, справа и снизу. Перейдем на категорию Ссылки (Links).

10) Название/кодировка. Она задает основные параметры web-страницы.

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