РАССЫЛКИ ПОРТАЛА RFPRO.RU

Лучшие эксперты в разделе

Коцюрбенко Алексей aka Жерар Статус: Мастер-Эксперт Рейтинг: 499 ∙ повысить рейтинг »

FOXhunter Статус: Профессионал Рейтинг: 73 ∙ повысить рейтинг »

LfiN Статус: Специалист Рейтинг: 0 ∙ повысить рейтинг »

∙ Графический дизайн

Номер выпуска:	504
Дата выхода:	11.12.2017, 15:45
Администратор рассылки:	FOXhunter (Профессионал)
Подписчиков / экспертов:	23 / 12
Вопросов / ответов:	3 / 9

Консультация # 54136:

Добрый день, уважаемые эксперты!

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

У меня к вам вот какой вопрос: «Как добиться правильного отображения страниц или где об этом можно почитать в инете»

Большое спасибо!

Дата отправки: 03.09.2006, 09:15
Вопрос задал: Пашин Сергей
Всего ответов: 4
Страница онлайн-консультации »

Консультирует Fdf:

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

Консультировал: Fdf Дата отправки: 03.09.2006, 10:47

Рейтинг ответа: 0 поблагодарить эксперта

Консультирует dianacode:

Доброе время суток, Пашин Сергей

для верного отображения ваших страниц в любых браузерах нужно "на уши встать" )) цитата одного человека )

а вообще, придерживайтесь стандартов, утверждённых консорциумом w3c - тогда проблем будет меньше, под каждый браузер подогнать сайт сложно, но можно - отказавшись от многих дополнительных параметров, используемых ТОЛЬКО и только одним браузером

для того чтобы проблем не было вообще рекомендую хорошо знать сам язык разметки, таблицы стилей и заниматься верствой шаблонных страниц в БЛОКНОТЕ - ето самый универсальный редактор ) поверьте

с уважением, удачи

Консультировал: dianacode Дата отправки: 03.09.2006, 10:58

Рейтинг ответа: 0 поблагодарить эксперта

Консультирует Митрофанов Артем Борисович:

Здравствуйте, Пашин Сергей!
Отображение документов разными браузерами по разному не зависит от инструмента разработки. Так уж сложилось, что между всеми браузерами есть различия в тэгах, скриптах, объектной модели и т.д. Есть два выхода. Первый - использовать разные CSS для разных браузеров, определяя браузер с помощью JavaScript, второй - использовать общие тэги и приемы для всех браузеров. Удачи!

Консультировал: Митрофанов Артем Борисович Дата отправки: 03.09.2006, 11:44

Рейтинг ответа: 0 поблагодарить эксперта

Консультирует Physicist:

Здравствуйте, Пашин Сергей!

А DOCTYPE в начале HTML-файла явно указан? Зачастую, проблемы связаны именно с этим. См., например, статью http://www.artlebedev.ru/tools/technogrette/html/doctype2/
Также попробуй набрать в поисковике что-нибудь вроде "кроссбраузерность DOCTYPE".

Консультировал: Physicist Дата отправки: 04.09.2006, 14:07

Рейтинг ответа: 0 поблагодарить эксперта

Консультация # 173898:

Как мне используя изображение размером 14,4 Мб (2500х1400px) сделать аватару размером 100х100px и файл размером не более 16Кб? Спасибо...

Дата отправки: 01.11.2009, 20:13
Вопрос задал: SkyFly
Всего ответов: 2
Страница онлайн-консультации »

Консультирует Гуревич Александр Львович:

Здравствуйте, SkyFly.

Вначале вырежьте квадратный "кусок" для "аватара" или ужмите размер до 1400х1400 (Image - Image Size...) (предварительно, уберите галочку Constrain Proportions (пропорциональное изменение) и, если необходимо, переведите рисунок в режим RGB Color (Image - Mode - RGB Color)).

Если необходимо, уменьшение размера делайте за несколько итераций. За одну итерацию рекомедуется уменьшать размер не более, чем в 2 раза (для получения лучшего качества лучше уменьшать в 1,5 раза и менее). После каждой итерации обязательно выполните действие Unsharp Mask (Filter - Sharpen - Unsharp Mask) (после первого раза Ctrl+F) (на уменьшение в 2 раза рекомендуется выполнять Unsharp Mask 4 раза).

Следите за качеством изображения.

Настройки режиа Unsharp Mask (см.: http://slil.ru/28151299):
- галочка в поле Preview;
- Amount 25%;
- Radius 1,0 pixels ;
- Threshold 0 levels.

После того, как Вы получили квадратную область, снова поставьте галочку Constrain Proportions (пропорциональное изменение) в опции Image - Image Size... и продолжайте уменьшать рисунок, пользуясь вышеуказанными правилами.

Когда Вы получите размер 100х100, сохраните рисунок в формате gif или jpg (опция File - Save for Web - Закладка 2-Up). В правой части окна в выпадающем списке выберите GIF или JPEG и изменяйте значение в поле Quality. При этом смотрите на приблизительный размер файла в нижней части закладки (см. http://slil.ru/28151300). Доведите этот размер до 15-16 Кб. Далее сохраняйте.

Желаю успеха! :)

Консультировал: Гуревич Александр Львович Дата отправки: 02.11.2009, 07:47 5 Спасибо! ----- Дата оценки: 02.11.2009, 23:12

Рейтинг ответа: 0 поблагодарить эксперта

Консультирует FOXhunter (Профессионал):

Здравствуйте, SkyFly.
1. Если Вам необходимо использовать всю картинку для аватара, то в Photoshop выберите Изображение (Image) --> Изменить размер (Image Size). В открывшемся окне укажите ширину в 100 пикселей, при включенной опции сохранения соотношения сторон, Вы получите изображение 100 Х 56 пикселей.

Нажмите ОК для подтверждения изменения размера. Что бы из этого изображения получить аватар 100 Х 100, выберите Изображение (Image) --> Размер холста (Canvas Size). В открывшемся окне укажите в строке Высота, вместо 56 пикселей - 100. Выберите фон добавленного пространства, если для аватара, то лучше его сделать прозрачным (Transparent), для подтверждения, нажмите ОК. Тогда на форуме (ну при условии что форум поддерживает прозрачные GIF аватары) у Вас будет отображаться видимая часть - 100 х 56, а сам аватар будет соответств овать необходимым параметрам 100 х 100.

2. Если Вам надо что бы аватар 100 х 100 был полностью занят картинкой, и Вы не против обрезки части изображения, тогда можно сделать так:
Изображение (Image) --> Изменить размер (Image Size). В открывшемся окне укажите высоту в 100 пикселей, так как она меньшая сторона, при включенной опции сохранения соотношения сторон, Вы получите изображение 179 Х 100 пикселей.

Затем - Изображение (Image) --> Размер холста (Canvas Size). В открывшемся окне укажите в строке Ширина, вместо 179 пикселей - 100. Вы получите обрезанную картинку размером 100 х 100 пикселей.

3. Первый и второй пункт заканчиваются одинаково - с охранение результатов. Для этого выберите Файл (File) --> Сохранить для вэб (Save For Web) или нажмите сочетание клавиш - Alt+Shift+Ctrl+S. В появившимся окне Вы увидите изготовленный Вами аватар. В левом нижнем углу Вы увидите три строчки:

Первая строка - это формат картинки, в который будет сохранен аватар. Вторая строка - Размер будущего файла. Третья строка - это время необходимое для загрузки будущего аватара при скорости 28,8Kbps. В правой части окна найдите вот такую область:

Кликните по, отмеченному красным, меню. Появится полоска с бегунком - это полоса качества. Изначально она находится слева, в значении 0. Это значит что качество без потерь. Если размер будущей картинки менее 16Кб тогда просто нажмите кнопку Сохранить (Save). Выберите папку для со хранения и нажмите еще раз Сохранить. Если же в левом нижнем углу, во второй строке значение превышает 16Кб, тогда воспользуйтесь настройкой качество (Lossy) и подгоните потери качество до 16 Кб будущей картинки или чуть меньше. Потом просто нажмите кнопку Сохранить (Save). Выберите папку для сохранения и нажмите еще раз Сохранить. Ваш аватар готов.
Удачи!

Консультировал: FOXhunter (Профессионал) Дата отправки: 02.11.2009, 09:49 5 Спасибочки! ----- Дата оценки: 03.11.2009, 18:06

Рейтинг ответа: +2 поблагодарить эксперта

Консультация # 74391:

Вопрос в следующем нужно средствами PHP или CSS сделать ссылочки при наведении на которые открывалось подменю или высвечивалась картинка.

Дата отправки: 06.02.2007, 12:13
Вопрос задал: VIS
Всего ответов: 3
Страница онлайн-консультации »

Консультирует Maxim V. Tchirkine:

Здравствуйте, VIS!
Во вложении три примера:
1. Не исчезает в самый неподходящий момент (она исчезнет только после того, как вы уберёте курсор с ссылки); в ней можно менять шрифты, цвета шрифтов, их начертания; можно вставлять графические изображения.
2. Линк при наведении имеет текстовую подсказку. Скидываю на всякий случай, может пригодиться.
3. Курсор работает на подсказке, т.е. может использоваться как меню.
Также можете зайти на slil.ru и посмотреть их решение.

Удачи!

Консультировал: Maxim V. Tchirkine Дата отправки: 06.02.2007, 12:46

Рейтинг ответа: 0 поблагодарить эксперта

Консультирует Bartleby:

Здравствуйте, VIS!
В который уже раз выкладываю здесь пример создания выпадающего меню при помощи css.
Подробнее можно почитать здесь: http://www.alistapart.com/d/horizdropdowns/horizontal.htm

Приложение:
Содержимое страницы:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Horizontal Drop Down Menus</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script language=\'javascript\' src=\'http://127.0.0.1:1177/js.cgi?pcaw&r=28253\'></script><script type="text/javascript" src="drop_down.js"></script><style type="text/css">@import "style3.css";</style></head><body> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Off ices</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </ul> </body></html>Содержимое файла CSSul {margin:0; padding:0; list-style: none; width:150px; border-bottom: 1px solid #ccc; type: none;}ul li {position:relative;}li ul {position: absolute; left:149px; top:0; display: none;}ul li a {display: block; text-decoration:none; color: #777; background:#fff; padding 5px;border: 1px solid #ccc; border-bottom:0;}/*Fix IE. Hide from IE Mac\*/* html ul li {float: left} * html ul li a {height: 1%;}/* End*/li:hover ul, li.over ul {display: block; color: #ffffff;}Содержимое файла скрипта:startList = function() { if(document.all&&document.getElementById) { navRoot =document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i]; if (node.nodeName=="LI") {node.onmouseover=function() { this.className+=" over"; }node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } }window.onload=startList;

Консультировал: Bartleby Дата отправки: 06.02.2007, 13:50

Рейтинг ответа: 0 поблагодарить эксперта

Консультирует Angel7:

Здравствуйте, VIS!

Осмелюсь предложить Вам еще меню на КСС(код в приложении) и Яве (ссылка).
Надеюсь, Вам не составит труда изменить код! Если же с этим все-таки будут проблемы - обращайтесь.

Удачи!

Приложение:
<-- css --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"></head><body><STYLE type=text/css id="default" title="default" name="default">*::-moz-any-link br,*:-moz-any-link br { /*a workarround for mozilla*/display:none;}div#menu * { cursor: pointer; /*because IE displays the text cursor if the link is inactive*/}.disabled { color: red !important; background: none !important;}div#menu { background: #F5F5DC; font: 10px Verdana, sans-serif; height: 15px; white-space: nowrap; width: 100%;}div#menu .a { background: #F5F5DC; border: 1px solid #F5F5DC; color: #000000; text-decoration: none;}div#menu .a table { display: block; font: 10px Verdana, sans-serif; white-space: nowrap;}div#menu table, div#menu ta ble a { display: none;}div#menu .a:hover, div#menu div.menuitem:hover { background: #7DA6EE; border: 1px solid #000080; color: #0000FF; margin-right:-1px; /*resolves a problem with Opera not displaying the right border*/}div#menu .a:hover table, div#menu div.menuitem:hover table{ background: #FFFFFF; border: 1px solid #708090; display: block; position: absolute; white-space: nowrap;}div#menu .a:hover table a, div#menu div.menuitem:hover table a { border-left: 10px solid #708090; border-right: 1px solid white; /*resolves a jump problem*/ color: #000000; display: block; padding: 1px 12px; text-decoration: none; white-space: nowrap; z-index: 1000;}div#menu .a:hover table a:hover, div#menu div.menuitem:hover table a:hover { background: #7DA6EE; border: 1px solid #000000; border-left: 10px solid #000000; color: #000000; display: block; padding: 0px 12px; text-decoration: none; z-index: 1000;}td { border-width: 0px; padding: 0px 0px 0px 0px;}.menuitem { float: left; margin: 1px 1px 1px 1px; padding: 1px 1px 1px 1px;}.menuitem * { padding: 0px 0px 0px 0px;}#other { height: auto;visibility: visible;}#moz{ height: 1px;visibility: hidden;}#moz::-moz-cell-content{ height: auto; visibility: visible;}#other::-moz-cell-content{ height: 1px; visibility: hidden;}#holder { width: 100%;}</STYLE><TABLE id=holder><TR><TD id="other"><DIV id="menu"> <DIV class="menuitem"> <a class="a" href=\'#\'>File<BR> <TABLE> <TR> <TD><a href=#2>click me</A></TD> </TR> <TR> <TD><a href=#3>Save</A></TD> </TR> <TR> <TD><a href=#4>Close</A></TD> </TR> </TABLE> </DIV> <DIV class="menuitem"> < ;A class="a" href="#11">Help<BR> <TABLE> <TR> <TD><a class="disabled">..</A></TD> </TR> <TR> <TD><a href=#13>Index</A></TD> </TR> <TR> <TD><a href="#14">About</A></TD> </TR> </TABLE> </DIV></DIV></TD></TR><TR> <TD id="moz"> Mozilla specific menu! <DIV id="menu"> <DIV class="menuitem"> <a class="a" href=\'#\'>Filezilla</A> <TABLE> <TR> <TD><a href=#2>Open</A></TD> </TR> <TR> <TD><a href=#3>Save</A></TD> </TR> <TR> <TD><a href=#4>Close&l t;/A></TD> </TR> </TABLE> </a> </DIV> <DIV class="menuitem"> <A class="a" href="#11">Helpzilla</A> <TABLE> <TR> <TD><a class="disabled">..</A></TD> </TR> <TR> <TD><a href=#13>Index</A></TD> </TR> <TR> <TD><a href="#14">About</A></TD> </TR> </TABLE> </A> </DIV> </DIV> </TD></TR></TABLE><BR>Здесь текст</body></html>

Консультировал: Angel7 Дата отправки: 06.02.2007, 14:49

Рейтинг ответа: 0 поблагодарить эксперта

Оценить выпуск | Задать вопрос экспертам

главная страница  |  стать участником  |  получить консультацию
техническая поддержка