Создание и оформление web-сайта

Создание и оформление web-сайта

В статье создание и оформление web-сайта рассматривается структура сайта, его функции и возможность его оформления.

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

Web-программирование – это частный случай программирования клиент-серверного приложения.

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

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

SQL расшифровывается как «язык структурированных запросов». SQL является необходимой частью Web-разработки. Если Web-разработчик использует базы данных такие как Microsoft SQL Server, Oracle, MySQL, и т.д., то он должен знать об этом языке и уметь его использовать.

Perl – это интерпретируемый язык сценариев, компилируемый в двоичный исполняемый или платформа – совместимый байт – код. Perl является общепризнанным языком программирования в области Web-разработки. Язык представляет уникальные инструменты для разрешения различных неопределенных сбоев в системном программировании [3].

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

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

Язык программирования CSS. С английского переводится как каскадные таблицы стилей, – это язык, который используется как средство оформления Web-страниц, а именно для работы с шрифтами, цветами, полями, таблицам, картинками, расположением элементов.

Язык программирования PHP. Это язык программирования, используемый на стороне WEB-сервера для динамической генерации HTML-страниц.

Denwer. Это программная среда, предназначенная для разработки Web-приложений на базе популярного языка программирования PHP, Web-сервера Apache и базы данных MySQL на локальном сервере.

Этапы создания сайта. Шаблон – это своеобразный образец, «скелет» Web-страницы, содержащий общие для всех страниц элементы. Когда вы создаете новую страницу на основе шаблона, вам остается только вписать в нужные места уникальное содержимое этой самой страницы и сохранить ее. Впоследствии вы можете изменить шаблон.

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

Создание главной страницы. Главная страница сайта – это его «лицо». Эта страница должна выглядеть привлекательно и нести в себе актуальную информацию.

Прежде всего рекомендуется скачать скачать Notepad++. Начало создания главной страницы заключается в создании шаблона. Сайты создаются с помощью тегов. Открывает и закрывает страницу теги < HTML> и < /HTML>, они ставятся в начале и конце страницы. Затем идут теги < HEAD> и < /HEAD>, это служебные теги, между ними пишутся команды для браузера. Например, теги < TITLE> и < /TITLE>, все, что написано межу этими тегами, будет отображаться при открытии страницы в самом верху браузера.

Между тегами < BODY> и < /BODY> помещается все содержимое страницы сайта, таблицы, тексты, картинки, в общем, все из чего состоит сайт.

Цвет страницы прописывается в теге <BODY> атрибутом bgcolor = "# CCCCFF ". В кавычках обозначается код цвета, может быть любым. Так же фоном страницы можно сделать картинку. Для этого в теге < BODY> вместо атрибута BGCOLOR, применим атрибут BACKGROUND=" images/имя картинки". Для форматирования главной страницы применяются таблицы. Таблицы оформляются тегами < TABLE> и < /TABLE>. Между ними теги < TR> и < /TR>, а между тегами TR теги < TD> и < /TD>. Между тегами < TD> и < /TD>, помещается текст, вставляются картинки и все что будет видно на странице сайта.

Теги < TR> и < /TR>, обозначают горизонтальную строку таблицы, а теги < TD> и < /TD> – вертикальную колонку или ячейку. Внутри тега <TABLE> прописываются атрибуты: BORDER, CELLPADDING, CELLSPACING. В нашем случае прописывался такой атрибут, как BORDER.

BORDER – указывает, будет ли рамка вокруг таблицы и ее размеры. Рамки можно задать любой цвет, делается это значением BORDERCOLOR="#CC6666″.

Таблице нужно указать размеры, ширину – WIDTH = "" и высоту – HEIGHT = "", а также цвет – BGCOLOR = "#". Для каждой ячейки, можно задавать свой размер и цвет.

Все эти значения прописываются внутри тега < TD>, так:

< TD width= 650 height=550 bgcolor = "#00FFCC">.

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

Здесь пишется текст ссылки </a>.

Чтобы задать ссылке нужный цвет, в теге <BODY> устанавливаем атрибут LINK="#FFFFFF" – цвет ссылки, атрибут VLINK = " #FFFFFF " – цвет посещенной ссылки, атрибут ALINK = " #63FFB7 ″ – цвет ссылки при наведении на нее курсора мыши. Если страница лежит в той же папке, то путь прописывается, так как в нашем коде, если же страница лежит в другой папке, например у нас папка называется «Сайт» и в ней лежит несколько страниц сайта – «форум. html», «галерея.html», «регистрация.html» и другие страницы «html», также в этой папке может находится еще одна папка, допустим, называется «курсовая», в ней тоже лежат страницы. Так мы создали только главную страницу нашего сайта, сейчас аналогичным способом мы создадим еще несколько страниц для каждой подкатегории.

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

Картинки вставляются с помощью тега < img > с атрибутом src. Код для вставки картинки пишется так: < img src = " images/имя картинки" > Если у папки с картинками будет другое имя, то вместо images пишем ее имя. Так же для картинок применяются размеры, width и height, в коде будет так: < img src = " images/имя картинки " width = 120 height = 130 >. сли не указывать размер картинки, то по умолчанию она будет вставлена на сайт своего реального размера.

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

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

Собственно говоря, регистрация представляет собой процесс сохранения данных о пользователе в специальном «месте». В качестве места хранения логинов и паролей пользователей сайта могут быть использованы текстовые файлы с расширением .txt и .dat, XML – файл и база данных. Первые два способа уже изжили себя и считаются небезопасными методами хранения данных, так как любой человек может получить к ним доступ прямо из адресной строки браузера.

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

Регистрация состоит их двух частей: кода регистрации и её стиля. В коде мы прописываем все интересующие нас вопросы, для регистрации.

Открываем html файл и начинаем ввод кода. Тэг, отвечающий за создание формы – "form". Записываем тэг вместе с атрибутами "form action = “obrabotka.php” method = “post” name “forma1” ". Приступаем к созданию элементов формы. Практически все элементы делаются с помощью тэга <input>, и его атрибут “type”, который отвечает за тип данных, к примеру текста, пароля и прочего. Всегда задаем имя «name» любому из атрибутов. Прописываем:

<br> <input type = "text" name = "fio" size = 30> <br>.

<br> <input type = "text" name = "email" size = 30> <p>.

Переходим к созданию элемента формы, при котором можно делать несколько выборов. Делаются такие элементы с помощью type=«checkbox».

Прописываем код:

<br> <input type="checkbox" name="service[]" value="Комната"> Комната <br>

<input type="checkbox" name="service[]" value="Санузел"> Санузел <p>.

Далее делаем поле для примечаний или адреса пользователя. Тэг "textarea", атрибуты этого тэга “rows” и “cols”, которые отвечают за размеры этого поля:

<br>

<textarea name = "pojelanie" rows=4 cols=30> </textarea>

<p>

<input type = "submit" value = "Отправить">

<input type="reset" value="Очистить">

<br>

<input type="reset" value="Очистить"> <br>

<br>

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

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

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

С помощью углубленного изучения данной темы и создания Web-сайта самостоятельно «вручную» данная цель была полностью выполнена.

Текст статьи
  1. Алексеев А.П. Введение в Web-дизайн: учебное пособие. – М.: СОЛОН – ПРЕСС, 2008.
  2. Аленова Н.Л. HTML для чайников. – Питер, 2010. – 214 с.
  3. Кроудер Д.М. Создание Web-сайта для чайников: 3 – е издание. – М.: Диалектика, 2009.
  4. Леонтьев В.П. Web-дизайн. Руководство пользователя. – М.: ИнфоАрт, 2011.
  5. Мациевский Н.А. Разгони свой сайт: учеб. / Н. Мациевский. – Оренбург, 2016. – 207 с.
  6. Панфилов К.С. По ту сторону Web-страницы. – СПб.: ДМК Пресс, 2008.
Список литературы
Ведется прием статей
Прием материалов
c 19 июня по 25 июня
Осталось 7 дней до окончания
Публикация электронной версии статьи происходит сразу после оплаты
Справка о публикации
сразу после оплаты
Размещение электронной версии журнала
29 июня
Загрузка в eLibrary
29 июня
Рассылка печатных экземпляров
07 июля