Разработка и анализ структуры и принципов создания web-сайта

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

     Раздел  «О компании «Mary Kay» »

     Назначение  раздела

     -способствовать формированию имиджа успешной компании («история успеха»);

     -способствовать формированию имиджа открытой компании;

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

     -предложить вниманию посетителей имеющиеся вакансии.

     Навигация по разделам 2-го уровня

     На  странице должны присутствовать ссылки на следующие разделы 2-го уровня:

• «Основательница компании»;
• «"Mary Kay" за рубежом»;
• «Факты о компании»;

     

• «Общ. Деятельность»;
• «Bидео Mary Kay»;
• «Награды компании».

     Контентный блок

        -Страница раздела должна содержать:

• общую информацию о компании (год создания, профиль деятельности, сертификаты, лицензии)
• информацию о социальных проектах (перечень)

     Раздел  «Основательница компании»

     Назначение  раздела

        -Ознакомление с компанией, пояснение по материалом «создания компании».

     Раздел  «"Mary Kay" за рубежом»

     Назначение  раздела

        -Описать сотрудничество компании с другими странами мира, выдать ссылки на их web-сайты.

     Контентный блок

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

     Раздел  «Факты о компании»

     Назначение  раздела

        -Описать цели достигнутые компанией.

     Контентный блок

        -В разделе размещаются официальные пресс-релизы компании.

     Раздел  «Общ. Деятельность»

     Назначение  раздела

     -способствовать формированию имиджа открытой компании;

     

     -предоставить дополнительную информацию о компании;

     -дать положительную оценку деятельности компании со стороны независимых СМИ.

     Контентный блок

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

     Раздел  «Bидео Mary Kay»

     Назначение  раздела

     -Видео ролики для полного ознакомления с компанией и ее производством.

     Раздел  «Награды компании» 

     Назначение  раздела

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

     Раздел  «Бизнес с "Mary Kay"»

     Назначение  разделов

              -Инструкция для пояснения сотрудничество с компанией

     Навигация по разделам 2-го уровня

     На  странице должны присутствовать ссылки на следующие разделы 2-го уровня:

• «Преимущество карьеры»;
• «Как стать консультантом»;
• «Лестница успеха».

     Раздел  «Как стать консультантом "» 

     Назначение  разделов

        -Ознакомление с компанией, пояснение по материалом «как стать консультантом».

     Раздел  «Преимущество карьеры»

     Назначение  раздела

         -Начало бизнеса с Mary Kay.

     Раздел  «Лестница успеха»

     Назначение  раздела

        -Лестница продвижения бизнеса с компанией.

     Раздел  «Хозяйка класса»

     Назначение  раздела

        -Информация по созданию своего класса.

     Разделы «Новинки», «Уход за кожей», «Уход за телом», «Декоративная косметика», «Парфюмерия»,  «Лидер продаж».

     Назначение  раздела

        -Ознакомление с продукцией компании

     Раздел  «Контакты»

     Назначение  раздела

        -Предоставить посетителям сайта контактную информацию (адрес     головного офиса, контактные телефоны, контактный e-mail)

        -Информация в разделе должна быть представлена в виде единой статьи. Форма обратной связи не предусмотрена.

2.3 Реализация информационного ресурса в среде выбранного программного обеспечения. 

     Для реализации web-ресурса потребовалось программное обеспечение Dreamweaver.

     

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

     Запустить программу Dreamweaver.

       На панели инструментов в меню в левом верхнем углу выбрать Файл затем Новое.

  

     Открывается диалоговое окно Новый документ.

       В левом списке Категория выбрать Базовая страница.

       В центре появляется список  Динамическая страница.

    

       В списке динамическая страница страница выбратьphp.

       Нажать кнопку Создать. Файл создан.

       На панели инструментов ниже  меню находятся три кнопки: Код, Оба и

     Дизайн. После создания сайта нажать на кнопку Код и ниже выходит  
 
 

     следующий текст:

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

     <html>

     <head>

     <title>Документ Без_Имени</title>

     <meta http-equiv="Content-Type" content="text/html; charset=windows- 1251">

       </head>

     

           <body>

           </body>

           </html>

     На  панели инструментов в меню выбрать Файл - Сохранить как.

     Появляется  диалоговое окно Сохранить как.

     Нажать  на галочку в текстовом поле Папка. Выскочит меню, в котором будут видны все директории компьютера. Необходимо выбрать место, где на компьютере будет храниться папка сайта. В данном случае; L:\home\localhost\www\mary.

     В текстовом поле Имя файла: пишется название файла: index. То есть главная страница сайта.

            Нажать кнопку Сохранить. Файл сохранен.

     После внесения любых изменений в  web страницу нужно сохранять измененную страницу – в меню выбрать Файл - Сохранить или нажать на изображение дискеты со стрелкой на панели инструментов.

     Далее поставить курсор в начале свободной строки, которая находиться над строкой с тэгом </head>.

     Напечатать следующее (<style type="text/css"></style>)

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

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

     "http://www.w3.org/TR/html4/loose.dtd">

     

     <html>

     <head>

     <title>Главная </title>

     <meta http-equiv="content-type" content="text/html; 

     charset=windows-1251">

     <style type="text/css"></style>

     </head>

     <body>

     </body>

     </html>

     Поставить курсор сразу после тэга <style type="text/css">, перед закрывающим тэгом </style>.

     Нажать на клавишу Enter на клавиатуре компьютера, после чего закрывающий тэг </style> переместится на одну строку ниже.

     Прописать Код и в итоги получается следующее:

 

 Затем создать новую папку blocks ; где будет находится 1.шапка сайта , 2. Левый блок сайта , 3. Нижний блок.

     Создать новый php файл в нем добавить таблицу с разрешением 1000 на 145 px и подключить к ней jpg файл шапки сайта компании.

     

     Сохранить файл. Под именем header.php

     Далее создать еще один php файл, в нем добавить таблицу 220 на 800 px.

     Сохранить под lefttd.php

     И третий файл, таблица 1000 на 20 px

     Сохранить под footer.php

     Далее открыть ранее созданный файл index и подключить блоки ( header, lefttd b и footer) с помощью команды include.

       <table width="1000" border="0" align="center"

     <? include ("blocks/header.php"); ?>  table>

     В итоге получится следующее;

     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

     "http://www.w3.org/TR/html4/loose.dtd">

     <html>

     <head>

     <title>Главная</title>

     <meta http-equiv="content-type" content="text/html; 

     charset=windows-1251">

     <style type="text/css"></style>

     </head>

     <body> <table width="1000" border="0" align="center"

       <? include ("blocks/header.php"); ?>  table>

     <table width="" border="220" align="left"

     <? include ("blocks/header.php"); ?>  table>