Текущее время: 28 мар 2024, 22:20

Часовой пояс: UTC + 3 часа [ Летнее время ]


Правила форума


Пожалуйста, прежде чем задавать вопрос, воспользуйтесь поиском, возможно ответ уже существует!



Начать новую тему Эта тема закрыта, вы не можете редактировать и оставлять сообщения в ней.  [ Сообщений: 7 ] 
Автор Сообщение
СообщениеДобавлено: 28 дек 2011, 17:18 
Не в сети
Аватара пользователя

Зарегистрирован: 28 янв 2011, 01:26
Сообщения: 834
Предлагаю Вашему вниманию тему с ответами на вопросы, которые могут интересовать начинающего веб-мастера. Постепенно, данная тема будет пополняться наиболее интересными сведениями о различных удачных решениях, которые Вы можете использовать на своем сайте.

_________________
Я совершенно трезв.


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: Ответы на интересные вопросы
СообщениеДобавлено: 28 дек 2011, 17:25 
Не в сети
Аватара пользователя

Зарегистрирован: 28 янв 2011, 01:26
Сообщения: 834
Как расположить виджеты в ряд

Многие начинающие веб-мастера рано или поздно сталкиваются с проблемой: решив разместить на своем сайте сторонние виджеты (кнопки "Нравится", "Рекомендую" от социальных сетей) - обнаруживают, что их невозможно выстроить в один ряд. То есть, любая информация, находящаяся в контейнере (<div></div>,<table></table> и т.д.) - не выстраивается в одну строчку.

Данную проблему можно решить довольно простым способом:
Код:
<table style="border-color: #ffffff; border-width: 0px;" border="0">
<tbody>
<tr>
<td style="width: 33%; border: 1px solid #ffffff;" align="center" valign="middle">p1</td>
<td style="width: 33%; border: 1px solid #ffffff;" align="center" valign="middle">p2</td>
<td style="width: 33%; border: 1px solid #ffffff;" align="center" valign="middle">р3</td>
</tr>
</tbody>
</table>

Это - код таблицы с тремя столбцами и одной строкой. В эти столбцы Вы можете разместить любую информацию в контейнере (например, виджет, или другую таблицу).

Теперь, давайте вместе разберемся: где здесь что. Итак, первая строчка кода
<table style="border-color: #ffffff; border-width: 0px;" border="0">
То, что выделено - это цвет границы таблицы (рамочка). Если Вы не хотите, чтобы таблица была видна - пропишите ей цвет фона, на котором она размещается. В данном примере, цвет для рамки задан белый (#ffffff, или white).
Далее, мы видим теги - <tbody> и <tr>, первый отвечает за начало "тела" таблицы, второй - обозначает начало строки. Строка у нас всего одна, поэтому таких тегов в нашей таблице лишь два: один открывающий и один закрывающий. Тегов <tbody> - также два: один в начале, другой в конце таблицы.
Ниже - следующая строка:
<td style="width: 33%; border: 1px solid #ffffff;" align="center" valign="middle">p1</td>.
Она дублируется три раза, потому, что у нас три столбца. Каждая строка - это один столбец.
Разбираем значения. Width: 33% - это ширина одного столбца. Вы можете задать для нее любое значение, в процентах (%), или в пикселях (px).
Ниже, мы снова видим параметр цвета - это цвет собственной границы столбца.Делаем его таким же, как и цвет общей границы всей таблицы, и идем дальше. Следующая загвоздка - p1. Этими двумя символами я обозначил то место в столбце, где будет находиться сама информация (текст, картинка, код виджета). Просто удаляем мой текст, и вставляем свой.
Заключает наш код уже известный нам тег </tr>. Только, в отличае от предыдущего - он является закрывающем, то есть является концом строки. Далее следуют такие же закрывающие </tbody> и </table> (конец тела таблицы и конец всего контейнера, соответственно).

Вот и все. Если Вы сделали все правильно, у Вас должно получиться расположение виджетов строго по линии, а не один под другим.

_________________
Я совершенно трезв.


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: Ответы на интересные вопросы
СообщениеДобавлено: 28 дек 2011, 22:24 
Не в сети
Аватара пользователя

Зарегистрирован: 28 янв 2011, 01:26
Сообщения: 834
Советы по работе с таблицами

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

Некоторая информация по этому вопросу, уже изложена в теме выше. Здесь же, я попробую дополнить первую тему некоторыми практическими советами.

1. Если вы хотите создать таблицу с шапкой, в которой будет находиться фоновая картинка - не забудьте о том, что указывать в свойствах строки высоту Вашей картинки - не нужно. В этом случае, высота строки будет несколько большей, чем высота картинки - что выльется в некрасивый, ничем не заполненный промежуток. Поставьте значение auto. В этом случае, высота ячейки будет соответствовать высоте фоновой картики (возможно, чуть меньше).

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

3. Обратите внимание на то, что в визуальном редакторе, при повторном редактировании свойств ячейки - сбиваются настройки фоновой картинки. То есть, редактируя к примеру, свойства ширины - перед сохранением изменений Вам придется удалять из строчки с адресом картинки лишние "новообразования" (глюк Tiny MCE). Поэтому, на мой взгляд - подобные изменения лучше всего производить непосредственно в коде.

4. Вы можете облегчить себя работу в создании новой таблицы, создав саму структру таблицы - в MS Word. Зетем, выделив - импортируйте ее в плагин визуального редактора "вставить из Word".

5. В браузере Opera, происходит один странный эффект c таблицами, где ширина границы - 1px: если таблица размещена не на странице сайта, а предположим, в блоке для рекламы - то, при прокрутке страницы у таблицы может исчезнуть граница. Поэтому, я рекомендую задавать для таблицы значение border - от 2px.

_________________
Я совершенно трезв.


Вернуться к началу
 Профиль  
 
 Заголовок сообщения: Re: Ответы на интересные вопросы
СообщениеДобавлено: 09 янв 2012, 01:00 
Не в сети
Аватара пользователя

Зарегистрирован: 28 янв 2011, 01:26
Сообщения: 834
Как написать текстовую начинку для своего сайта

Итак, Вы создали свой сайт. Во-первых, примите искренние поздравления - ведь теперь у Вас есть собственная площадь в Сети, собственный "кусок" Интернета!
Однако, это еще не все. Для того, чтобы Ваш сайт жил, функционировал, процветал и приносил пользу своему владельцу (то есть, Вам), его необходимо довести до стадии, на которой он будет являться полноценным. Как это сделать?

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

Составляя текстовую верстку для своего сайта, следует помнить несколько основных вещей:

1. Грамотно составленный текст - есть один из главных залогов успеха не только сайта, но и всего Вашего дела.

2. Четко поставленная и ясно сформулированная цель привлекает новых клиентов с завидной постоянностью.

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

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

5. В рекламно-маркетинговой среде давно пользуются тремя фишками, которые на инстинктивном уровне заставляют человека интересоваться той, или иной новостью. Эти фишки - еда, секс и опасность. Людей во все времена привлекали и интриговали любые сообщения, связанные с этими тремя тематиками, так как они затрагивают три основных инстинкта живых существ. Дайте намек на один из них в заголовке статьи - и статья будет прочитана до конца. Но ни в коем случае не прибегайте ко лжи: если люди поймут, что в статье нет ни слова о том, что сказано в заголовке - Вы потеряете доверие Ваших клиентов.

6. Ваш текст должен выглядеть красиво и читаться легко. Посетитель же, должен не ломать язык, произнося его вслух, а наслаждаться его гармонией. Представьте, что Вы пишите песню. Точно также должен выглядеть и Ваш текст - пусть его поют, а не читают.

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

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

_________________
Я совершенно трезв.


Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 09 янв 2012, 02:32 
Не в сети
Аватара пользователя

Зарегистрирован: 28 янв 2011, 01:26
Сообщения: 834
Как красиво оформить свой сайт

Падающие снежинки, поющие птички, летающие бабочки, ползающие таракашки и прочие Java Script-скринсейверы играют далеко не доминирующую роль в создании хорошего впечатления о Вашем сайте, а уже тем более - в доверии к Вашей продукции. К сожалению, все чаще и чаще встречаются сайты, оформленные крайне бездарно, но с нескончаемым потоком льющихся красивых эффектов. Что можно этим вызвать? Улыбку, но... Улыбнувшись, потенциальный клиент уйдет с такого сайта.
JS-скринсейверы способны лишь дополнить удачно собранный дизайн сайта. Однако, они не смогут ни заменить выполненное "на скорую руку" оформление, ни даже затмить его.

Как же красиво оформить свой сайт? На этот вопрос найдется много ответов, и каждый возможно, будет по-своему правильным. Но давайте разберем с Вами несколько моментов, которые способны прояснить хотя бы какие-то стандарты для начинающего веб-дизайнера.
Итак, некоторые советы:

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

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

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

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

_________________
Я совершенно трезв.


Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 15 июн 2012, 14:22 
Не в сети
Аватара пользователя

Зарегистрирован: 28 янв 2011, 01:26
Сообщения: 834
"Кривое" отображение сайта в браузере

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

Итак, если Вы неожиданно обнаружили, что подвал Вашего сайта уехал в сторону, счетчики оказались на совершенно новом месте, а ширина всего сайта увеличилась в 2 раза - значит, Вы столкнулись именно с вышеуказанной ошибкой. Но в чем же ее причина?

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

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

Рассмотрим типичный пример. Мы хотим добавить две картинки и приписываем HTML-код, но случайно допускаем опечатку:
Код:
<center><img src="http://site.ru/file/site/pictures/01.jpg"/></center
<center><img src="http://site.ru/file/site/pictures/02.jpg"/></center>

Так выглядит то самое незначительное звено, которое создает ошибку в огромной цепи. А всего-то навсего, в первой строчке отсутствует угловая скобка у закрывающего тега.
То есть, в исправленном варианте это будет выглядеть так:
Код:
<center><img src="http://site.ru/file/site/pictures/01.jpg"/></center>
<center><img src="http://site.ru/file/site/pictures/02.jpg"/></center>

_________________
Я совершенно трезв.


Вернуться к началу
 Профиль  
 
СообщениеДобавлено: 15 июн 2012, 18:23 
Не в сети
Аватара пользователя

Зарегистрирован: 28 янв 2011, 01:26
Сообщения: 834
Почему не работает CSS-код?

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

Буквально сегодня, я снова столкнулся лицом к лицу с данной дилеммой. Безуспешно провозившись в течении получаса с относительно несложным кодом я уже хотел сдаться. Однако, решив попробовать еще раз, и уже почти не надеясь, я вдруг обнаружил причину.
Этой причиной были точка с запятой, которые я по невнимательности вынес за фигурные скобки предыдущего CSS-кода. Не относясь ни к одному из контейнеров кода, они создавали шлак и препятствовали корректному отображению последующих кодов. Вот почему я не заметил ошибку сразу - ведь все коды, написанные до злополучного символа отображались корректно!

Интересно то, что подобная ошибка может проявляться не во всех браузерах. Например, Internet Explorer 7, к моему величайшему изумлению частенько видит и распознает такие маленькие шлаки, отображая веб-страницу без искажений.

Вывод. Здесь я отмечу даже не один, а сразу два аспекта. Первое, что я понял еще один раз - это то, что никогда не стоит сдаваться. Ведь если бы я отказался от мысли понять причину ошибки, то возможно столкнулся бы с этим еще не один раз. Я почти был уверен, что баг находится на стороне Okis, поскольку считал свой код полностью "чистым". А в итоге оказалось, что сообщив об этой якобы ошибке, я лишь понапрасну тревожил бы людей.
Второе - это безусловно внимательность. Только в этом случае можно получить ожидаемый результат, данное утверждение я проверил на себе.

Тема не закончена!

_________________
Я совершенно трезв.


Вернуться к началу
 Профиль  
 
Показать сообщения за:  Поле сортировки  
Начать новую тему Эта тема закрыта, вы не можете редактировать и оставлять сообщения в ней.  [ Сообщений: 7 ] 

Часовой пояс: UTC + 3 часа [ Летнее время ]


Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей


Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения

Найти:
Перейти:  
cron