Trening modul2-webinar11

Интернет-тренинг
Тема5

Проектирование и создание своего
информационного ресурса.

Домашнее задание по проекту?
1. Протестировать название проекта – при
необходимости – скорректировать.
2. Написать устав проекта – цель, портрет
целевой аудитории, сроки, способ
реализации.
3. Протестировать целевую аудиторию и
перечислить места ее «тусовок» в
интернет.
4. Продумать, разработать и подобрать
атрибуты проекта : логотип, слоган,
доменное имя.
5. Посмотреть шаблоны и выбрать для своего
проекта.

Вебинар 10. «Проектирование и
создание сайта на Microtext и
подобранном шаблоне»

Интернет-проект на базе сайта
посетители посетители посетители

Аккаунты Сайты-
Блоги
в соцсетях сателиты

Посетители
Сайт База
контактов

заявки
информация
продажи

Практикум 11

Проектирование и создание сайта
на Microtext и подобранном
шаблоне.
Часть 2.
Натягивание шаблона.

Создали скелет сайта
1. Скачиваем дистрибутив и распаковываем в папку
на свой компьютер (Dzen + Admin или Standart +
Admin).
2. По ФТП копируем дистрибутив в папку на сервер,
для этого :
3. Прописываем в config.inc.php адрес главной
страницы (cо слэшем на конце) - .
4. Прописываем в .htaccess путь от корня сайта до
папки, в которой он лежит. По умолчанию
стоит RewriteBase /, то есть, предполагается, что
движок будет ложиться в корень. Мы размещали
движок в
папку opanasenro.org/microtext/ecodacha, то
прописать следует RewriteBase /
opanasenro.org/microtext/ecodacha/.

Доступ к серверу –

HOST: opanasenko.org

USER: microtext@opanasenko.org

PASS: R7d1iB1o

Рекомендации по сохранности
сайта
1. Создать у себя 2 папки для копий сайта –
OLD и NEW .
2. Перед каждой корректировкой
копировать по ФТП полностью папку с
сервера в каждую из этих папок.
3. Корректировку делать только в папке
NEW, а затем из нее копировать на
сервер по ФТП
4. Папку OLD не трогать, тогда в OLD
останется вариант сайта до
корректировки, и если что-то
накосячили, то можно из OLD
восстановить все на сервер и начать
корректировку сначала.

На сервере уже созданы сайты :

http://opanasenko.org/microtext/ecodacha/

http://opanasenko.org/microtext/lev/

Выбор шаблона на
http://www.free-css-templates.com/

Выбранный шаблон можно
открыть и загрузить

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

Примеряем логотип и название
на выбранный шаблон

Натягивание шаблона
1. Копируем шаблон и раскрываем архив в папку template
на сервере.
2. Переименовываем индексный файл шаблона под новым
именем, например index.html в design-
ecodacha.inc.php .
3. Правим файл index.inc.php в библиотеке content -
назначаем новое имя дизайна
4. Корректируем файл дизайна – теги по аналогии со
старым дизайном, путь к файлу стилей.
5. Выделяем и очищаем область контента на шаблоне –
файл дизайна.
6. Формируем новые меню в Menu.inc.
7. Заменяем в файле дизайна описание меню командами
для автоматического формирования меню со ссылками
на имя меню.
8. Меняем название, слоган, добавляем логотип, меняем
другие надписи.
9. Вставляем форму подписки.

Копируем шаблон в папку
template на сервере

Заходим в папку template на
сервере

Переименовываем index.html
в design-ecodacha.inc.php
(по умолчанию в движке файл
управления дизайном
design.inc.php)

Правим файл index.inc.php в библиотеке
content ( сначала на компьютере в new),
затем копируем его на сервер

Меняем design на design-ecodacha

Библиотека New / template –
вносим корректировки в design-ecodacha.inc.php
по аналогу design.inc.php

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

Корректируем теги
<meta> - метатеги, которые используются для хранения
информации предназначенной для браузеров и поисковых
систем. Например, механизмы поисковых систем обращаются к
метатегам для получения описания сайта, ключевых слов и
других данных. Разрешается использовать более чем один
метатег, все они размещаются в контейнере <head>. Как
правило, атрибуты любого метатега сводятся к парам
«имя=значение», которые определяются ключевыми
словами content, name или http-equiv.
Атрибуты
charset
Задает кодировку документа.
content
Устанавливает значение атрибута, заданного с
помощью name или http-equiv.
http-equiv
Предназначен для конвертирования метатега в заголовок HTTP.
name
Имя метатега, также косвенно устанавливает его предназначение.

Тег <meta>
Атрибут charset

Задает кодировку документа.
<meta charset="utf-8">

Тег <meta>
Атрибут http-equiv
Браузеры преобразовывают значение атрибута http-
equiv, заданное с помощью content, в формат
заголовка ответа HTTP и обрабатывают их, как будто
они прибыли непосредственно от сервера.

Допустимые значения атрибута http-equiv.
Content-Type
Тип кодировки документа.
expires
Устанавливает дату и время, после которой
информация в документе будет считаться
устаревшей.
pragma
Способ кэширования документа.
refresh
Загрузить другой документ в текущее окно
браузера.

Пример:<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">

Тег <meta>
Атрибут name
Устанавливает идентификатор метатега для пары
«имя=значение». Одновременно использовать
атрибуты name и http-equiv не допускается.

Допустимые значения атрибута name.
author
Имя автора документа.
description
Описание текущего документа.
keywords
Список ключевых слов, встречающихся на странице.

Пример:
<meta name="keywords" content="HTML, META, метатег,
тег, поисковая система">

Тег <meta>
Атрибут content

Устанавливает значение атрибута, заданного
с помощью name или http-equiv.
Атрибут content может содержать более
одного значения, в этом случае они
разделяются запятыми или точкой с
запятой. Это строка символов, которую
надо взять в одинарные или двойные
кавычки.
Пример :
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">

В базовом дизайне
<meta charset="<?php echo config['encoding'];?>" />

<meta name="keywords" content="<?php echo
$keywords;?>" />

<meta name="description" content="<?php echo
$description;?>" />

В выбранном дизайне
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />

Изменяем
кодировку –
Вставляем вместо charset=utf-8
charset=<?php echo $config['encoding'];?>

Получим:
<meta http-equiv="Content-Type" content="text/html;
charset= <?php echo $config['encoding'];?> " />

Тег <title> - Определяет заголовок
документа.
<title> не является частью документа и не показывается
напрямую на веб-странице.

В операционной системе Windows текст заголовка
отображается в левом верхнем углу окна браузера.

Допускается использовать только один тег <title> на
документ и размещать его в контейнере <head>.

<title><?php echo $title;?></title>

В новом дизайне
<title>GardenWeb</title>

Меняем на
<title> <?php echo $title;?> </title>

Тег <link >
Устанавливает связь с внешним документом вроде файла
со стилями или со шрифтами. В отличие от тега <a>,
тег <link>размещается всегда внутри
контейнера <head> и не создает ссылку.
Атрибуты
charset
Кодировка связываемого документа.
href
Путь к связываемому файлу.
media
Определяет устройство, для которого следует применять
стилевое оформление.
rel
Определяет отношения между текущим документом и
файлом, на который делается ссылка.
sizes
Указывает размер иконок для визуального отображения.
type
MIME-тип данных подключаемого файла.

Выделяем область Content в
выбранном дизайне

Фрагмент кода в выбранном шаблоне,
который описывает область Content

Удаляем выделенный фрагмент, а вместо него

копируем из базового дизайна
Заменяем фрагмент
<div class="main fl">
<div id="text">
<h2>Free CSS Templates</h2>
<p> GardenWeb is a CSS template that is free and fully standards compliant. <a
href="http://www.free-css-templates.com/">Free CSS Templates</a> designed this
template. <br/>
<br/>
This template is allowed for all uses, including commercial use, as it is released under
the Creative Commons Attributions 2.5 license. The only stipulation to the use of this free
template is that the links appearing in the footer remain intact. Beyond that, simply
enjoy and have fun with it!</p>
<img src="images/img.jpg" alt="" /> </div>
</div>
на
<div class="main fl">
<div id="text">
<h2><?php echo $title;?></h2>
<?php echo $content;?>

</div>
</div>

Теперь настроим массивы меню –
откроем файл в библиотеке New
template/menu.inc.php
В базовом шаблоне описано 3 меню :

В нашем шаблоне 5 меню

Опишем эти меню. Все ссылки в меню пока
ставим на главную страницу.

Для автоматического
формирования меню из массивов
используем код

<ul class="menu">
<?php echo GetMenuItems($this_page,
$footmenu);?>
</ul>

Footmenu – вставляем имя меню из массива

Вставляем в новый дизайн команды для
автоматического формирования меню из
массивов – главное меню mainmenu:
Вместо блока
<ul id="nav">
<li class="h"><a href="#">Home</a></li>
<li class="a"><a href="#">About us</a></li>
<li class="p"><a href="#">Production</a></li>
<li class="c"><a href="#">Contact</a></li>
</ul>
Вставляем
<ul class="menu" id="nav">
$mainmenu);?>
</ul>

автоматического формирования меню из массивов –
верхнее боковое меню sidemenu1:
<ul class="meun">
<li><a href="#">Latin literature </a></li>
<li><a href="#">making over years </a></li>
<li><a href="#">Richard Clintock </a></li>
<li><a href="#">Latin professor </a></li>
<li><a href="#">Hampden Sydney </a></li>
</ul>
Вставляем
<ul class=" meun " >
<?php echo GetMenuItems($this_page, $sidemenu1);?
>
</ul>

автоматического формирования меню из массивов –
нижнее боковое меню sidemenu2:
<ul class="meun">
<li><a href="#">Vestibulum bibendum tellus.</a></li>
<li><a href="#">Maecenas egestas sapien ac .</a></li>
<li><a href="#">Nam volutpat ante.</a></li>
<li><a href="#">Curabitur rhoncus leo in nisi.</a></li>
<li><a href="#">Nulla fringilla eros at sem.</a></li>
<li><a href="#">Integer euismod id est.</a></li>
<li><a href="#">Aenean viverra mi eu justo.</a></li>
</ul>
Вставляем
<ul class=" meun " >
<?php echo GetMenuItems($this_page, $sidemenu2);?>
</ul>

автоматического формирования меню из
массивов – нижнее меню footmenu:
<div class="ftlink fl"> <a href="#">Home</a> |
<a href="#">About Us</a> | <a
href="#">Production</a> | <a
href="#">Submission</a> | <a
href="#">Contact</a>
Вставляем
<ul class="fmenu">
$footmenu);?>
</ul>

Код в шаблоне – Горячие кнопки

Старый код
<div id="col">
<div class="first fl">
<ul>
<li><a href="#">Latin professor </a></li>
</ul>
</div>
<div class=" fl ">
<ul>
<li><a href="#">Richard Clintock </a></li>
</ul>
</div>
<div class=" fl ">
<ul>
<li><a href="#">Virginia looked one</a></li>
</ul>
</div>
</div>

Новый код
<div id="col">
<div class="first fl">
<ul>
<li><a href="index">Грибы </a></li>
<li><a href="index"> Корейские свинки </a></li>
<li><a href="index"> Собаки лайка </a></li>
</ul>
</div>
<div class=" fl ">
<ul>
<li><a href="index"> Переработка отходов </a></li>
<li><a href="index"> Вермикультивирование </a></li>
<li><a href="index"> Почвосмеси </a></li>
</ul>
</div>
<div class=" fl ">
<ul>
<li><a href="index"> Дом </a></li>
<li><a href="index"> Теплица </a></li>
<li><a href="index"> Постройки</a></li>
</ul>
</div>
</div>

Меняем заголовок, слоган, вставляем
логотип, рисунок логотипа
предварительно загружаем по ФТП в
библиотеку template/images

Формируем форму подписки для
рассылки-подарок (уменьшаем) и
ставим на сайт

Теперь сайт на шаблоне выглядит так

Доступна система управления
страницами

Доступна система управления
меню

Вы имеете динамичный сайт с
легкой системой управления
контетом
Дальше :
- Добавляем новые страницы,
- Корректируем меню – вставляем ссылки на
новые страницы,
- Фотографии и рисунки для размещения на
страницы предварительно помещаем в
библиотеку ecodachs/i , преобразовав их
до необходимого размера

Подключим страницу с
презентацией

Меняем дизайн страницы

Меняем дизайн:
design-ecodacha

Теперь страница отображается
правильно

Еще раз о файловой структуре
Content – папка, где лежат
страницы
Files – можно помещать разные
файлы по проекту, например,
рекламные материалы
I – фотографии и рисунки для
страниц
Template – библиотека дизайна

Template
Images – фотографии и
рисунки для дизайна
Design-ecodaca – основной
файл дизайна
Menu.inc – файл меню,
Style.css- файл стилей

Домашнее задание:
1. Создать свой сайт на микротексте в папке
на моем хостинге.
2. Подобрать шаблон.
3. Глядя на шаблон разработать структуру
сайта, меню.
4. Натянуть шаблон дизайна на сайт.
5. Индивидуальный режим – в скайпе.

Следующее занятие – 16 ноября,

Продолжаем тему 5. Проектирование и создание
своего информационного ресурса.

 Вебинар и практикум «Некоторые
полезные технические моменты по работе
с сайтом на микротексте».
 Индивидуальные консультации.

Опанасенко Ольга
Владимировна
Тел. 067 460 24 00
Web: http://opanasenko.org
E-mail: olga@opanasenko.org
Skype: OLGAOOV
Twitter: OLGAOOV

Trening modul2-webinar11

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (13)

Destaque

Destaque (19)

Semelhante a Trening modul2-webinar11

Semelhante a Trening modul2-webinar11 (20)

Mais de olgaoov

Mais de olgaoov (20)

Trening modul2-webinar11