Авторизация

 

Описание редактирования HTML, CSS кода Вашего сайта 

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

- Открываем файл index_red.html в браузере. Здесь видим копию кода главной страницы сайта  index.html - для наглядности. Редактировать будем другую страницу.
Обратите внимание только на то, что выделено разными цветами: меню (навигация) сайта, имена картинок (при желании), адреса ссылок на страницы (если переименуете их), основное текстовое содержание сайта (обязательно) и, так называемые, мета теги (обязательно), которые находятся в начале кода, нужны для поисковых систем - посещаемости сайта. Менять будем только цветные места.

- Открываем главную страницу index.html с помощью текстового редактора и видим то, что нам предстоит редактировать. Не пугайтесь, это только при первом взгляде страшно, по мере работы присмотритесь и все встанет на свои места.
При редактировании кода используйте поиск: выделите и скопируйте код на странице инструкции и вставьте в окошко поиска редактора  на редактируемой странице.

Замене подлежат: Русский текст -  ЦВЕТ Имя картинки -  ЦВЕТ , Ссылки (переходы) -  ЦВЕТ  

Вы можете начать замену. Не забывайте периодически сохранять и просматривать результат работы (стр. index.html) в браузере, перезагрузка окна - F5.

Атрибуты HTML страницы.

<title</b>>Название сайта - Видно в окне браузера</title>
 <meta name="description" content="Описание сайта. Будет видно в анонсе поисковых систем. Не более 200 символов" />
 <meta name="keywords" content="ключевые, слова, через, запятую" />

Мета-теги в начале страницы: title, description, keywords, являются важным атрибутом любой страницы, размещенной в Интернете.
Title - текст отображается в заголовке браузера (выше не куда). Основной источник информации о странице для поисковых систем. Влияет на поиск, а значит посещаемость сайта. Должен содержать ключевые слова без повторов.
Description - описание сайта при отображении Вашей страницы в результате поиска. Должно быть не более 200 символов. Наличие ключевых слов.
Keywords - ключевые слова, которые чаще встречаются в тексте страницы, несут смысловую нагрузку содержания страницы, пишутся через запятую, не более 7-8 слов. В самом тексте должны встречаться не более 4 раз (каждое слово) на 2000 символов, выделяться жирным, присутствовать в первом предложении и последнем.

СОХРАНЯЕМ!

МЕНЮ сайта и логотип.

Это основная навигация по сайту. У нас МЕНЮ расположено в заголовке после логотипа.

ЛОГОТИП
<h1 id="logo"><a href="index.html">Ваш логотип<span>Название сайта или код-адрес картинки</span></a></h1> - для начала достаточно текста.

МЕНЮ
<li><a class="active" href="index.html">На ГЛАВНУЮ</a></li>
 <li><a href="page1.html">О сайте</a></li>
 <li><a href="page2.html">Скачать бесплатно</a></li>
 <li><a href="page3.html">Анонс</a></li>
 <li><a href="page4.html">Фотографии</a></li>
 <li><a href="video.html">Видео</a></li>
 <li><a href="pusto.html">Пустая страница</a></li>
Ссылки типа page1.html можете оставить без изменений или изменить на свои, но тогда не забудьте внести изменения в другие страницы сайта.
Здесь указана относительная ссылка: page1.html, можно указать абсолютную: http://Ваш сайт/page1.html, что одно и тоже. При первом варианте ссылки, страницы должны находиться в одной и той же папке, в пределах компьютера или хостинга.
index.html - является индексным названием, его не менять! При обращении браузера к папке в которой находиться файл index.html, по умолчанию открывается сразу этот файл.
Пример: если Вы набрали в браузере адрес: http://Вашсайт.ru, то автоматически (по умолчанию) откроется файл первой страницы index.html, если он лежит в папке Вашсайт.ru
Два адреса http://Вашсайт.ru и http://Вашсайт.ru/index.html одинаковы.

Поменяйте заголовки меню. Следите за тем, чтобы текст меню уместился в строке страницы.

СОХРАНЯЕМ!

ШАПКА САЙТА

В шапке будем менять текст слева от большой картинки. С этим Вы справитесь, далее о картинке.
Размер картинки 600х220 px, поменяйте изображение, создайте свое таких же размеров. Сама картинка лежит в папке images, называется logo.png, параметры картинки в файле style.css (папка css). При изменении ширины изображения, поменяйте параметр width:600px; (он такой один) на свой размер.
Отступы от верхнего и правого края меняйте атрибутами, соответственно: padding-top:10px; padding-right:10px; которые ниже параметра width:600px;
Следите за тем, чтобы вес картинки был не большим. Влияет на скорость первого открытия сайта для посетителя. На дальнейших переходах по страницам сайта не отображается, за счет прописки в файле .css, но тем не менее лучше держаться в пределах 50-100 кб.

СОХРАНЯЕМ!

СЛАЙДЕР - картинки в движении

В нашем случае состоит из восьми картинок размером 200х100. Размеры не менять. Если измените ширину, то расстояние между картинками увеличиться или уменьшиться. Могут наехать друг на друга. Имена картинок: slider1.gif, slider1.gif, slider1.gif и т.д., лежат в папке images. Замените их на свои, таких же размеров.
Название можете изменить, но тогда поменяйте его и в коде, пример:  slider1.gif меняем на mylove1.jpg. Обратите внимание, формат картинки .gif, jpg, png... в коде должен соответствовать фотмату картинки.
Код:
<a href="https://sitey.ru">
 <img src="images/slider1.gif" alt="" /></a></div>
 </li>
 <li>
 <div class="slider-image">
 <a href="#"><img src="images/slider2.gif" alt="" /></a></div>
 </li>
Ссылку https://sitey.ru замените на свою, куда-нибудь отправьте посетителя при ее нажатии. Далее меняйте символ #.  Скорость смены картинок в файле jquery-func.js (папка js) , параметр: auto:4, - в секундах. Будьте осторожнее при редактировании этого скрипта.

СОХРАНЯЕМ!

ТЕЛО страницы - контент

Содержимое (тело) страницы состоит у нас из трех блоков: левый, средний и правый. Размеры фиксированные (подогнуты под дизайн), изменить можно лишь высоту одновременно 3х блоков. Файл style.css параметр height:300px; - замените 300 на большее значение. Не советую увеличивать содержимое главной страницы на много. Будет дольше открываться для посетителей. Много жрут картинки, особенно не прописанные в файле .css
Заполняйте блоки своим содержимым: текст, картинки 100x100 px не более. В имеющийся текст для наглядности уже включены ссылки на другие страницы, удалите их или замените.

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

СОХРАНЯЕМ!

ПОДВАЛ низ страницы

Здесь все просто. Замените текст и ссылки. Сюда же можно установить счетчик посещаемости сайта.

СОХРАНЯЕМ!

Завершение 

Все страницы сайта имеют похожую структуру, за исключением тела страницы, т.е. блоков находящихся после слайдера и перед подвалом. Далее Вами будет изменяться только тело страницы и блок слайдера (при желании). Сейчас в шаблонах страниц блок слайдера заполнен текстом с особенностями редактирования каждой страницы. Этот текст необходимо заменить на описание страницы или вставить туда сам слайдер с главной страницы (он выделен комментариями). Все, что выше слайдера и подвал страницы будут одинаковы на всех страницах сайта. Изменения в Мета-Теги страниц и в Заголовок внесете позже.
Итак, завершаем работу с шаблонами страниц.
Выделяем мышкой часть кода готовой страницы index.html, начиная от комментария <!--- КОНЕЦ Шапка ---> до самого верха, копируем ее и заменяем на всех оставшихся страницах именно эту часть, также выделив ее и удалив.
Подобным образом поступаем с подвалом страницы: выделяем код начиная от комментария <!---Подвал страницы--->  до самого низа и заменяем на других страницах. Почему до самого верха или низа? Так проще не промахнуться.

Не забываем СОХРАНЯТЬ страницы!

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

 

Скачать готовый шаблон

 

Шаблон достаточно простой, но для совершенствования опыта вполне удобен.

 

 

Навигация по сайту
  • Скачать 1
  • Скачать 2
  • Скачать 3
Универсальный шаблон готового сайта UseSite

Универсальный шаблон готового сайта UseSite


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

Подробнее →  

  • Просмотров: 25 935
Готовый сайт оплаты и доставки электронного товара. OnPay Система платежей

Готовый сайт оплаты и доставки электронного товара. OnPay Система платежей


Готовый шаблон сайта для продажи и доставки электронных товаров. Автоматическая оплата товара и мгновенная его отправка покупателю. Шаблон настроен для работы с платежной системой OnPay. Персональный аттестат WebMoney не...

Подробнее →  

  • Просмотров: 7 989
Редактируем шаблоны готового сайта. Скачать книгу для начинающих вебмастеров

Редактируем шаблоны готового сайта. Скачать книгу для начинающих вебмастеров


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

Подробнее →  

  • Просмотров: 13 856

 

 

Нименование Количество Цена / 1 шт.
Всего: 0 руб.