Главная
Скачать (Download)
Dreamweaver CS6
Dreamweaver CS5
Dreamweaver CS4
Dreamweaver 8
- "Горячие клавиши"
Dreamweaver MX 2004
- Рабочая область
- Создание/ открытие документов
- Настройка сайта
- Компоновка страниц с CSS
- Табличный контент
- Шаблоны в MX 2004
- Работа с страницами
- Настройка серверных приложений
- Рабочая область для динамических страниц
Dreamweaver 4
Уроки (Tutorials)
Видеоуроки new!!!
Fireworks
ЧаВо
Документация
Статьи
- Macromedia Dreamweaver
- CSS
- Раскрутка
- PHP
- SQL
- Дизайн [1 2]
- Java
- Разное
Программы и скрипты
Бесплатные шаблоны
Каталог сайтов
Форум
Карта сайта
Контакты



Документация - Главная
- Macromedia Dreamweaver
- CSS
- Раскрутка
- PHP
- SQL
- Дизайн [1 2]
- Java
- Разное

главная > статьи >

Редактирование текстовых элементов.

В версию 5.5, всенародно любимого браузера ;), ввели очень интересное свойство contentEditable. Используя это свойство к любому элементу HTML-документа, вы можете его (элемент) редактировать прямо в окне браузера (elementID.contentEditable=true). А самое главное то, что после внесения изменений, можно отключить редактирование и наслаждаться результатом не перезагружая сам документ (elementID.contentEditable=false). Теперь Internet Explorer можно использовать как простенький WYSIWYG-редактор.

Пример использования редактирования элемента:

<html><head><title>
 Редактируем DIV </title>
</head>
<body bgcolor=white text=black>
<div contentEditable=true>
 Этот текст редактируемый.
 </div>

</body></html>

Также, вы можете создать кнопку которая будет переключать режимы редактирования (включить/отключить). В этом вам поможет свойство isContentEditable, которое возвращает true если объект можно редактировать, или false если нельзя.

Добавим в наш пример кнопку (включить/отключить): 

<html><head><title>
 Редактируем DIV </title>
<script language=jscript>
function onOff(){
 sButton.value = 
 (eDiv2.isContentEditable)
  ? "включить редактирование"
  : "отключить редактирование";
 eDiv2.contentEditable =
  (eDiv2.isContentEditable)
   ? false
   : true;
}
</script>
</head>
<body bgcolor=white text=black>

<div id=eDiv2
 contentEditable=false>
 Этот текст редактируемый.</div>
<p><button id=sButton
 onClick=onOff(); style=width:240px;>
 включить редактирование</button>
</body></html>

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

Не полный список клавиатурных сокращений.

Ctrl + Bполужирный (тег STRONG).
Ctrl + Iкурсив (тег EM).
Ctrl + Uподчеркнутый (тег U).
Ctrl + Kсоздать ссылку (тег А).
ENTERпараграф (тег P)
Shift + ENTERперевод строки (тег BR)
Ctrl + Alt + C его величество copyright ©

Картинки можно втавлять по copy -> paste...

А теперь, можете войти на любой сайт в интернете (к другу — пошутить, к врагу — напакостить), и в адресной строке вашего браузера (как я заметил в начале, это должен быть IE5.5 и выше) написать следующую строчку, и нажать ENTER:

javascript:void(document.body.contentEditable = true);

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

Для последующих редизайнов можно создать JS-закладку состаящую из одной следующей строчки:

javascript:void(document.body.contentEditable = (document.body.isContentEditable) ? false : true);

Взято с www.infocity.kiev.ua

главная > статьи >

Реклама