Домой RSS лента сайта




Ответить
 Как сверстать и разместить статью на сайте, Инструкция для сотрудников сайта, ознакомительно - для всех
litterec
18 октября 2010 19:53
Сообщение #1


Активный участник
  • 51

Репутация: 1
Группа: Администраторы
Сообщений: 30
Регистрация: 7.10.2009
ICQ:--
КАК СВЕРСТАТЬ ОДНОФРАГМЕНТНУЮ
СТАТЬЮ И РАЗМЕСТИТЬ ЕЕ НА САЙТЕ trvlworld.net


Данное руководство предназначено для штатных работников сайта – журналистов и переводчиков. Однако же, если обычный посетитель планирует сотрудничать с сайтом на платной основе, ознакомиться с этой инструкцией не будет лишним. Кроме того, если обычный посетитель хочет добавить новость на сайт, не прибегая к верстке, ему будут полезны некоторые фрагменты настоящего документа.
Перейти в начало страницы
litterec
27 августа 2011 09:11
Сообщение #2


Активный участник
  • 51

Репутация: 1
Группа: Администраторы
Сообщений: 30
Регистрация: 7.10.2009
ICQ:--
Как сверстать и разместить статью на сайте Верстка статьи на trvlworld.net – это громко сказано. На самом деле оформление статьи состоит из загрузки фотографий на сайт, расстановки ссылок на фотографии в текст документа и расстановки стандартных управляющих html-кодов в текст документа. Поскольку процесс оформления несложный и не содержит особых условностей, то для его выполнения не нужен WYSIWYG-редактор. Проще говоря, статья оформляется «вслепую», после чего загружается на сайт, и, как правило, без ошибок. Под словом «однофрагментный» подразумевается, что статья состоит из одного фрагмента. В терминологии движка dle – одна новость на сайте – это одна статья. Поскольку длинные материалы плохо смотрятся на сайте, то для них следует применять многофрагментный вариант оформления. Он несколько сложнее, и к его изучению следует приступать только после того, как верстка однофрагментной статьи доведена до полного автоматизма.

Общий план работ по верстке однофрагментной статьи:

1.Подготовка исходного текста
2.Поиск изображений (если их нет в исходном материале для перевода).
3.Загрузка изображений на сайт
4.Расстановка и корректировка ссылок на изображения в тексте статьи
5.Расстановка управляющих HTML-кодов в тексте статьи.
6.Вставка ссылок на другие статьи сайта (требуется дополнительная инструкция)
7.Загрузка сверстанной статьи на сайт

Перейдем теперь к подробному изложению технологии.

1.Подготовка исходного текста

Поскольку движок dle (на котором работает trvlworld.net) предполагает наличие у каждой статьи (в терминологии движка – новости) краткого содержания и полного содержания, следует подготовить недостающее краткое содержание. Для простоты, и для избежания разночтений, в дальнейшем будем использовать терминологию движка. Таким образом, нам следует, помимо полной новости, на основании текста статьи и фотографий подготовить еще и краткую новость.

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

-------------------------------------------------------------------------------
    Вид объекта                                      Терминология
-------------------------------------------------------------------------------
Заголовок новости,
т.е. то название,
которое видно
на плашке и которое                           Название материала
при добавлении
новой статьи вводится в поле
«Введите заголовок:»
-------------------------------------------------------------------------------
Заголовок статьи в тексте,
Который выделяется                           Заголовок материала
прописными буквами
и большим шрифтом
-------------------------------------------------------------------------------
Анонс статьи, который
при добавлении                                     Краткая новость
новой статьи вводится в поле
«Краткое содержание»
-------------------------------------------------------------------------------
Основной текст статьи,
который при добавлении                         Полная новость
новой статьи вводится в поле
«Полная новость (необязательно)»
-------------------------------------------------------------------------------

Итак, смысл названий. Заголовок материала обычно передает общее содержание статьи – если поездка, то речь в заголовке, как правило, идет о ней. Если страна, то об этой стране и т.д. Название материала больше служит для привлечения внимания читателей к данной статье. Оно может не передавать общее содержание статьи, зато заострять внимание читателя на какой-либо изюминке данного материала. Кроме того, в названии материала, в отличие от заголовка, следует применять менее официальный и более «игривый» стиль.

Теперь, когда в терминологию внесена некоторая ясность, рассмотрим формат подготовленного к верстке документа на локальном диске исполнителя:

{ Haзвaниe мaтepиaлa } *
{ Гиперссылка на первоисточник } (если таковой имеется, для переводчиков)
-------------------------------------- (разделитель**)
Краткая новость
-------------------------------------- (разделитель)
Полная новость
-------------------------------------- (разделитель)

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


Текст краткой новости формируется из текста полной новости копипастом, однако, при необходимости может потребоваться некоторая корректировка, например, удаление примечаний редактора и/или переводчика. Для краткой новости следует выбрать два наиболее ярких абзаца статьи. Объем каждого абзаца в краткой новости – около 400 символов без пробелов. Минимальный объем одного абзаца – 250 символов, максимальный объем всей краткой новости – 1200 символов.

Абзацы в тексте полной новости следует разделить пустыми строками. Кроме того, пустыми строками следует выделить заголовок и подзаголовки, если таковые имеются в тексте. Если текст представлен в формате Microsoft Word, то не следует применять какое-либо оформление – задавать цвета, отступы и форматирование абзацев, менять параметры шрифта. Просьба имя файла Microsoft Word задавать в виде {смысл1}_{смысл2}_Source.doc, где смысл1 и смысл2 – смысловое обозначение содержания текста, латинскими буквами. Например, для текста «Как отдохнуть в январе?» можно выбрать имя файла Howtorest_Injanuary_Source.doc. В дальнейшем все примеры также будут взяты из этого текста.

Пример подготовленного текста (для наглядности содержание абзацев в тексте полной новости заменено многоточиями):

Не унывайте, когда за окном вьюга, а лучше отправляйтесь на курорт
-------------------------------------------
Январь – время холодное и довольно унылое. Новизна и свежесть зимы уже не радуют, и очень хочется расцветить свою жизнь яркими красками и интересными событиями, увлекательными местами и новыми эмоциями. Значит, самое время собираться в дорогу. Почему бы не насладиться всеми красками и удовольствиями зимы и не отправиться на зимние курорты? А какие зимние курорты могут сравниться со швейцарскими?

Расстилающиеся в окрестностях Санкт-Морица лесные чащи, вздымающиеся горные вершины и сверкающая гладь озера настраивают на весьма романтический лад. А сам курорт состоит из двух отдельных деревень – это расположенный на берегу озера Санкт-Мориц Бад с его знаменитыми спа-центрами и целебными грязевыми ваннами и Санкт-Мориц Дорф, возвышающийся на склоне холма над озером.
-------------------------------------------
КАК ОТДОХНУТЬ В ЯНВАРЕ?

Январь ……………мся в Швейцарию.

Санкт-Мориц

Невероятно ши……………..тся шампанское.

Расстил…………..ром.

И, конечно, сам………………………цию адреналина!



2.Поиск изображений

Изображения следует искать только в иностранной части сети Интернет, пользуясь, например, такими поисковыми системами, как Yahoo и Lycos . Поскольку некоторые «нерунетные» поисковые системы «саботируют» поиск изображений для рунета, следует пользоваться сайтами-анонимайзерами, например вот этим ресурсом. Естетственно, что при задании контекста поиска следует использовать иностранный язык, например, английский. Особое знание языка при этом не требуется, достаточно найти в сети Интернет корректное написание объекта поиска на иностранном языке. Сделать это можно разными способами, например, путем подбора – для имен собственных, либо при помощи международных онлайн-энциклопедий, таких, например, как Википедия.

Подбирать фото можно только на ресурсах, где нет указания на запрет копирования без разрешения владельцев этого ресурса. Категорически запрещается использовать фото со знаками копирайта или водяными знаками в виде URL-адреса ресурса-источника.

Требования к изображениям следующие. Все они должны быть с цветовым разрешением (не черно-белые, если это не продиктовано смыслом статьи), минимальный размер бОльшей стороны – 400 пикселов. Максимальный размер большей стороны – 600 пикселов. Уменьшить большое изображение можно добрым десятком способов. Для тех, кто не искушен в компьютерной графике, подойдут соответствующие онлайн-сервисы, например вот этот

Для удобства дальнейшего использования и архивирования, найденные изображения следует переименовать согласно имени основного файла Microsoft Word (только строчные буквы):

howtorest_injanuary_01.jpg
howtorest_injanuary_02.jpg
………………..
howtorest_injanuary_03.jpg

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

Например, к статье «как отдохнуть в январе» были найдены следующие фото:

-------------------------------------------------------------------------------
   Поисковая система     Контекст       № картинки в выдаче
-------------------------------------------------------------------------------
   Lycos                   swiss resort st.moritz                   1
   Lycos                   swiss resort st.moritz                   5
   Lycos                   Cartier Polo World Cup                14
   Lycos                   swiss resort zermatt                     6
   Lycos                   swiss resort zermatt                     7
   Lycos                   Salzburg                                      17
   Lycos                   Salzburg                                     136
   Lycos                   Salzburg week mozart                  3
-------------------------------------------------------------------------------

3.Загрузка изображений на сайт

Для того, чтобы загрузить изображения на сайт, следует создать на нем новость. Для того нажмите на ссылку «Добавить новость» в личном кабинете. Сделать это можно либо на главной странице сайта:
Как сверстать и разместить статью на сайте


либо во внутренней его части:
Как сверстать и разместить статью на сайте


Если вы не видите ссылку «Добавить новость» в личном кабинете, значит, вы не авторизованы на сайте. Сделать это проще простого, достаточно указать свой логин и пароль.

После нажатия ссылки «Добавить новость» на экране высветиться форма «Публикация новости на сайте».

Поскольку добавляемая вами статья так или иначе будет дорабатываться соответствующим персоналом сайта, поэтому вам достаточно указать название материала в поле «Введите заголовок», а затем кликнуть в поле для ввода краткой новости (графа «Краткое содержание»):

Как сверстать и разместить статью на сайте


Имеет смысл сразу указывать окончательное название материала (в поле «Введите заголовок:»), поскольку за счет этого сформируется более читабельное имя HTML-страницы на сайте trvlworld.net.

После того, как вы установили курсор в поле ввода краткой новости («Краткое содержание»), следует нажать на символ желтой папки на панели инструментов:

Как сверстать и разместить статью на сайте


В вашем браузере откроется дополнительное окно закачки изображений. Вы можете здесь выбрать, загружать фото по одному, или сразу все. Первый способ мы рассматривать не будем, займемся групповой загрузкой фото. Нажмите на вкладку «Массовая»:

Как сверстать и разместить статью на сайте


Далее нажмите на кнопку «Выбрать файлы»:

Как сверстать и разместить статью на сайте


В открывшемся стандартном диалоге файловой системы Windows перейдите в ту папку, где у вас находятся заготовленные изображения и выделите все файлы с помощью мыши, а затем нажмите «Открыть»:

Как сверстать и разместить статью на сайте


Начнется массовая закачка файлов. После окончания закачки в окне появится таблица с именами файлов. Следует отметить все файлы и нажать на кнопку «Вставить выбранные»:

Как сверстать и разместить статью на сайте


После нажатия этой кнопки произойдет вставка тегов всех выбранных вами изображений в форму «Публикация новости на сайте». Поскольку перед загрузкой вы устанавливали курсор в поле ввода краткой новости, то именно там появятся теги загруженных вами картинок. Для того, чтобы увидеть результат загрузки, можно закрыть окно закачки изображений (а можно и не закрывать), и перейти в то окно, где у вас открыта форма «Публикация новости на сайте». Вы увидите теги всех загруженных и выбранных вами изображений. Выделите все теги мышкой, нажмите на выделенных тегах правую кнопку мыши и укажите пункт меню «Копировать»:

Как сверстать и разместить статью на сайте


Перейдите в свой текстовый редактор, где открыта редактируемая статья (напр. Microsoft Word), установите курсор сразу после подготовленных вами подписей к рисункам и сделайте вставку из буфера обмена. Самое трудное позади, остальные операции, что называется, «дело техники».

4.Расстановка и корректировка ссылок на изображения в тексте статьи

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

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

4.1.Выбор двух изображений для краткой новости
4.2.Копипаст тегов двух избранных изображений в текст краткой новости в редактируемом файле Microsoft Word
4.3.Удаление параметра «=left»
4.4.Копипаст тегов выравнивания изображения и подписи к рисунку
4.5.Перенос полученных блоков рисунков с подписью в требуемое место статьи

Рассмотрим теперь эти пункты более детально

4.1.Выбор двух изображений для краткой новости

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

4.2.Копипаст тегов двух избранных изображений в текст краткой новости в редактируемом файле Microsoft Word

Скопируйте теги выбранных изображений и вставьте их перед двумя частями краткой новости. Затем измените тег «left» на «right», там, где у вас ссылка на второе изображение в краткой новости. В нашем примере мы выбрали изображения с №№ 02 и 07. Начало текста должно выглядеть так:

Не унывайте, когда за окном вьюга, а лучше отправляйтесь на курорт
------------------------------------------------
[thumb=left]http://trvlworld.net/uploads/posts/2010-10/1287247950_ho
wtorest_injanuary_02.jpg[/thumb]Январь – время холодное и довольно унылое. Новизна и свежесть зимы уже не радуют, и очень хочется расцветить свою жизнь яркими красками и интересными событиями, увлекательными местами и новыми эмоциями. Значит, самое время собираться в дорогу. Почему бы не насладиться всеми красками и удовольствиями зимы и не отправиться на зимние курорты? А какие зимние курорты могут сравниться со швейцарскими?

[thumb=right]http://trvlworld.net/uploads/posts/2010-10/1287247962_h
owtorest_injanuary_07.jpg[/thumb]Расстилающиеся в окрестностях Санкт-Морица лесные чащи, вздымающиеся горные вершины и сверкающая гладь озера настраивают на весьма романтический лад. А сам курорт состоит из двух отдельных деревень – это расположенная на берегу озера Санкт-Мориц Бад с ее знаменитыми спа-центрами и целебными грязевыми ваннами и Санкт-Мориц Дорф, возвышающаяся на склоне холма над озером.
------------------------------------------------

КАК ОТДОХНУТЬ В ЯНВАРЕ?

Январь – время холодное и довольно унылое.
……………………


4.3.Удаление параметра “=left”

Теперь можно заняться тегами изображений, которые будут использованы в полной новости. Прежде всего следует удалить параметр “=left” из тегов всех изображений. Если картинок в статье много, делать это лучше с помощью контекстной замены. Кроме того, следует добавить между тегами картинок «Возврат каретки», с помощью клавиши «Enter», чтобы теги выглядели нагляднее. Должно получиться так:

[thumb]http://trvlworld.net/uploads/posts/2010-10/1287248024_howtore
st_injanuary_01.jpg[/thumb]
[thumb]http://trvlworld.net/uploads/posts/2010-10/1287247950_howtore
st_injanuary_02.jpg[/thumb]
[thumb]http://trvlworld.net/uploads/posts/2010-10/1287247958_howtore
st_injanuary_03.jpg[/thumb]
[thumb]http://trvlworld.net/uploads/posts/2010-10/1287248002_howtore
st_injanuary_04.jpg[/thumb]
[thumb]http://trvlworld.net/uploads/posts/2010-10/1287247941_howtore
st_injanuary_05.jpg[/thumb]
[thumb]http://trvlworld.net/uploads/posts/2010-10/1287247966_howtore
st_injanuary_06.jpg[/thumb]
[thumb]http://trvlworld.net/uploads/posts/2010-10/1287247962_howtore
st_injanuary_07.jpg[/thumb]
[thumb]http://trvlworld.net/uploads/posts/2010-10/1287247942_howtore
st_injanuary_08.jpg[/thumb]


4.4.Копипаст тегов выравнивания изображения и подписи к картинкам

Теперь будем объединять подготовленные нами заранее подписи к картинкам с тегами самих картинок, а также с тегами выравнивания и форматирования. Для этого:

-добавляем тег
<div align="center">
перед тегом
[thumb]


-добавляем теги
<br /><em><strong>
после тега
[thumb]


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

-добавляем теги
</strong></em></div>
после текста подписи к картинке

Результат:


<div align="center">[thumb]http://trvlworld.net/uploads/posts
/2010-10/1287248024_howtorest_injanuary_01.jpg[/thumb]<br />
<em><strong>Горный пейзаж на курорте Санкт-Мориц</strong></em></div>

<div align="center">[thumb]http://trvlworld.net/uploads/posts
/2010-10/1287247950_howtorest_injanuary_02.jpg[/thumb]<br />
<em><strong>Санкт-Мориц – вечернее очарование</strong></em></div>

<div align="center">[thumb]http://trvlworld.net/uploads/posts
/2010-10/1287247958_howtorest_injanuary_03.jpg[/thumb]<br />
<em><strong>Захватывающие минуты борьбы на турнире «Картье Поло Уорлд Кап»</strong></em></div>

<div align="center">[thumb]http://trvlworld.net/uploads/posts
/2010-10/1287248002_howtorest_injanuary_04.jpg[/thumb]<br />
<em><strong>Символ Швейцарии, гора Маттерхорн</strong></em></div>

<div align="center">[thumb]http://trvlworld.net/uploads/posts
/2010-10/1287247941_howtorest_injanuary_05.jpg[/thumb]<br />
<em><strong>Сумерки на курорте Церматт</strong></em></div>

<div align="center">[thumb]http://trvlworld.net/uploads/posts
/2010-10/1287247966_howtorest_injanuary_06.jpg[/thumb]<br />
<em><strong>Зальцбург, долина Гастайн</strong></em></div>

<div align="center">[thumb]http://trvlworld.net/uploads/posts
/2010-10/1287247962_howtorest_injanuary_07.jpg[/thumb]<br />
<em><strong>Зальцбург в январе</strong></em></div>

<div align="center">[thumb]http://trvlworld.net/uploads/posts
/2010-10/1287247942_howtorest_injanuary_08.jpg[/thumb]<br />
<em><strong>Неделя Моцарта в юбилейном, 2006 г., все человечество отмечает 250-летие со дня рождения великого классика</strong></em></div>


4.5.Перенос полученных блоков рисунка с подписью в требуемое место статьи

Пересчитав абзацы, можно легко «спроектировать» расстановку картинок в тексте. Берем изображения по одному, вырезаем из списка и вставляем в нужное место текста, но обязательно между абзацами.

5.Расстановка управляющих HTML-кодов в тексте статьи.

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

<p style="text-align: justify;">
Устанавливать перед каждым абзацем в краткой новости.

<p style="text-align: justify;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&a
mp;nbsp;&nbsp;&nbsp;&nbsp;
Устанавливать перед каждым абзацем в полной новости, за исключением подписей к рисункам и заголовков, т.е. только в «повествовательные» абзацы.

</p>
Устанавливать в конце абзацев, как в краткой, так и в полной новостях.

<div align="center"><strong><span style="font-size: 18pt; line-height: 100%;">
Устанавливать перед заголовком материала.

<br /><div align="center"><strong><span style="font-size: 14pt; line-height: 100%;">
Устанавливать перед подзаголовками.

</span></strong></div>
Устанавливать после заголовка материала и после подзаголовков.

<br /><br />
<div align="right">____________________________________<br />Подготовила&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Н. Афанасьева<br /><br />&copy; Копировать материалы с сайта строго ЗАПРЕЩЕНО!</div>
Устанавливать в конце материала, вписать свою фамилию (псевдоним). Для переводчиков вместо «Подготовила» устанавливать «Перевод с английского» (или с другого языка).

Остается только перенести полученный код на сайт – отдельно краткую и полную новости.

Результат нашей работы можно посмотреть на сайте
по этой ссылке
Перейти в начало страницы
Быстрый ответ Ответить
1чел. читают эту тему (гостей: 1)
Пользователей: 0

  Сейчас: 17 ноября 2018 16:26






Веб-студия «РА-СОЛО»: разработка сайтов любой сложности
Пляжи Морские путешествия Древности и экзотика Дайвинг Перелеты Водные аттракционы Походы Экстремальные развлечения И многое другое...