Главная » Администрирование сайта » Управление шаблонами » Инструкция "Пенька" №3. Изменение дизайна сайта.

Инструкция "Пенька" №3. Изменение дизайна сайта.

12.02.2012 в 20:23
Автор: Следопыт   

Если вы читали мои более ранние инструкции, то уже прекрасно знаете, что всё взаимодействие с сайтом начинается с пополнения корневой папки сайта материалами, которые вы хотите в нём разместить.
Следовательно, если вы хотите заменить картинку шапки сайта, то изначально вам надо найти или нарисовать собственную картинку.
Я рисовать в полной мере не умею, но с графическими редакторами "шапочно знаком".
Исходя из собственных возможностей и умений, на бескрайних просторах интернета насобирал различных картинок и создал себе рабочую базу заготовок.
Будучи противником плагиата, картинки, в чистом виде не использую, а в меру своего умения создаю свой образ. Получается пока не очень, но это дело наживное и пока не критичное. Пока учимся работать с сайтом, а тут пойдёт и "полуфабрикат", главное понять систему работы с сайтом.

Наверняка есть иной способ, более элегантный, для выполнения этого задания. Я "Пенёк" и это "пеньковая" инструкция для самых неумелых и нетерпеливых. Вылизать в дпльнейшем малость "кривоватые" детали будет проще, да и при получении конкретного результата, появится отличная мотивация к труду и учёбе.

Итак, вы сделали картинку, которую хотите разместить в шапке сайта, вместо картинки доставшейся вам вместе с выбранным шаблоном. К картинкам требование едино – они должны быть в формате фото или рисунков, кроме точечного рисунка, который даёт графический редактор "Пайнт". Так что сохраняйте вашу картинку в соответствующем формате и заливайте её в корневую папку сайта цепочкой команд:
Панель управления --> Файловый менеджер --> кнопочка "Обзор", в которой находите на своём компьютере нужный файл и помечаете его --> затем нажимаете кнопочку "загрузить файл" и файл заносится в корневую папку. На этом подготовка почти закончилась. Ваша картинка на сайте есть и теперь её надо разместить там, где по вашему мнению её место.

Если ваше решение делать сайт самостоятельно достаточно надёжное и крепкое, то всё в порядке. Если же это просто чудачество, то проще заплатить мастеру и не морочиться, выбор за вами.
Для настырных, - начинаем второй этап.

Чтоб картинка появилась в шапке сайта, надо в прописи разметки страниц сайта найти место, где прописана штатная картинка выбранного вами шаблона. Как вы помните, язык разметки страниц сайтов – жуткая "абра-кадабра". Будет чуть проще, если вы предварительно познакомитесь с языкам html, который достаточно доступно изложен в учебнике на страницах системы uCoz по адресу (http://forum.ucoz.ru/forum/24-33758-1)
Это поможет, но порядок процедуры я всеже покажу.

Возвращаемся на главную страницу панели управления и нажимаеп надпись-ссылку "Управление дизайном [ Конструктор меню ]" --> далее кнопочка " страницы сайта" и вы снова видите непонятные значки.
На моём сайте я нашёл запись картинки сайта на показанном ниже участке разметки страницы и там же выделю строку и имя введенной картинки.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<title>$SITE_NAME$ - $MODULE_NAME$</title>
<?$META_DESCRIPTION$?>
<link type="text/css" rel="StyleSheet" href="/.s/src/css/995.css" />
</head>

<body style="background:url('/.s/t/995/1.jpg') #362D29; margin:0px; padding:0 1% 0 1%;">
$ADMIN_BAR$

<div style="height:239px;">
<div style="float:left;">
<img src="http://ded-sledak.ucoz.ru/obrazi/shapka.jpg" border="0" alt="" />
</div>
</div>

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

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

P.S. Описывая свои инструкции - упустил изменения на форуме системы uCoz, где дополнительно разместились темы с более подробным описанием процедур работы с сайтом. Познакомившись с азами знаний активней исследуйте темы форума. Это очень помогает в вашем деле, а на возникшие у вас вопросы. вы всегда получите нужный ответ.

На этом заканчиваю данную инструкцию и желаю всем успехов в занятиях по созданию и развитию ваших сайтов.

Измнение дизайна, дизайн


Рейтинг: 9  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 13999          Комментариев: 9

Похожие инструкции

20.07.2012 в 09:09      0  

эммм... Что хотела спросить: есть какой-то определённый формат, вид картинки, подходящей для шапки? просто если есть такой, сделаю сразу такую картинку. Вообщем, что вы делали с этими картинками и к чему приводили?
03.03.2012 в 12:23      0  

Я ожилал около 10000 серий пенек, люблю сериалы. Конечно не очем инструкция, но просто белку убить.
03.03.2012 в 15:20      0  

Вот тут ты чутка ошибся, насчёт ни о чём, а заодно ошибочка и с белками. happy .
Я не ставил себе целью что-то там достичь с помощью мануалов, ведь мои познания в сайтостроении, может на микрон выше нуля. Любой старшеклассник, при должном усердии, может разобраться в системе uCoz гораздо быстрей меня. У меня нет самых базовых знаний и чуть поняв суть html, мне уже несколько проще двигаться дальше. Но даже примитивных значений некоторых деталей, необходимых, чтоб сделать грамотную разметку страницы мне пока не хватает.
Тем не менее, на форуме частенько задают повторяющиеся вопросы о совсем простом, элементарном, в чём даже я смог разобраться. Вот и попробовал изложить свою версию необходимых действий, вдруг кому-то поможет...
Кстати мой мануал про "фавикон" кто-то похвалил, так что не всё потеряно.
Выставлять мануалы конечно приятно, но они тоже требуют довольно много времени, а задача у меня одна, - самому освоить это дело и выложив кажется 6 шт. Переключился на освоение сайта и даже упустил один мануал и его удалили. из-за того, что я его не отредактировал, а я его просто потерял....
Вот уже с неделю занимался опять же с шапкой сайта и теперь, по мере подготовки индивидуальных изображений, очень многие страницы сайта будут иметь собственный элемент декора(оформления, дизайна - не знаю как правильней сказать). И это ещё не всё. Это как бы нижний уровень в работе с дизайном. Закончу этот элемент, - есть для него же более сложная задача, но всё надо делать поэтапно. ПЕНЁК - он и есть пенёк и пока он сгниёт и на его месте что-то вырастет, может много времени пройти... biggrin
Однако постепенно дело идёт и это радует.
09.03.2012 в 19:34      0  

для старшеклассника пойдет..
19.02.2012 в 09:52      0  

<img src="/obrazi/shapka.jpg" border="0" alt="" />
так писать вовсе не обязательно, как и прописывать значение alt
18.02.2012 в 10:51      0  

А мне кажется, что человек, не знающий языка HTML, но пытающийся изменить внешний облик своего сайта, заслуживает уважения. Вот у него такой подход и такой способ изменить "шапку". Я поставлю свой +
16.02.2012 в 18:10      0  

Скажи, а в чем существенная разница-то? biggrin
12.02.2012 в 22:51      0  

В отличие от отличной инструкции Пенька о фавиконке, эта совершенно ни о чем. Изменение дизайна сайта совершенно не рассмотрено, чуть-чуть затронута тема шапки, и то не показано, как ее, собственно, заменить. Особенно умиляет концовка - автор просто посылает читателя на форум, так и не раскрыв свою тему.
13.02.2012 в 08:20      0  

Ну извините, не уважил. cool Фав иконка, на мой взгляд тоже маленькая деталька дизайна образа сайта, так что это почти однотипные инструкции и каждая из них объясняет маленький кусочек действий по преобразованию ВАШЕГО сайта.
Так-как уровень личных знаний достаточно близок присвоенному званию "Пенёк", то и подача материала в инструкциях подается порциями, на 100% доступными к усвоению. Пройдя эти простые шаги на своём сайте и получив возможно "кривенький" результат, но тем не менее результат. Вы, в соответствии с моим напутствием, обратитесь к форуму, для решения вопросов сглаживания шероховатостей в работе с сайтом.
А показать в одной инструкции весь объём работ по дизайну сайта - дело немыслимое! Это надо разложить на составляющие весь сайт и заново собрать. Увы ето не "пеньковый" уровень и даже не уровень бывалого, это уже уровень мастера!
Мои же инструкции в разделе "первые шаги".
ИМзвиняйте если что... biggrin