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

Если вы прибыли на эту статью извне thesitewizard.com, пожалуйста, внимание, что это 3-я глава из учебника Dreamweaver CS6 . Те, которые являются новыми для Dreamweaver могут предпочесть, чтобы начать в первой главе . Однако, если это первый сайт вы делаете, вы, вероятно, найти его будет проще, если вы начинаете с , как сделать / создать свой собственный сайт: AZ Руководство для начинающих .

Цель этой главы

К концу этой главы вы узнаете ("уроки") Как менять шрифты, цвета и размера текста, а также складывать слова жирным шрифтом и / или курсивом.

Введение в каскадные таблицы стилей (CSS)

До сих пор мы рассматривали изменения, которые вы сделали, чтобы внешний вид вашего веб-страницы, как будто они были чем-то волшебным осуществляется Dreamweaver сам. Например, в главе 2, мы по центру ("центру"), Ваш логотип, вызвав диалоговое окно, в Dreamweaver и изменение поля здесь и там. А потом, после еще нескольких процветает, привлекая дополнительный клик или два, о чудо, ваш логотип был сосредоточен.

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

Когда вы использовали определение правила CSS диалоговое окно, в главе 2, вы создали правило, которое по существу сказал, что хочешь левого и правого поля ни о чем с надписью "логотип", чтобы иметь равное количество пространства. Тогда вы использовали панели свойств, чтобы маркировать свою фотографию "логотип". Это привело к меченым изображение, которое будет помещен в центре страницы, так как все, что имеет равное количество места на его левой и правой действует в центре.

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

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

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

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

В любом случае, вы будете создавать ряд правил CSS начиная с этой главы, хотя и косвенно, через меню Dreamweaver и диалоговых окнах. Таким образом, даже если вы задремали на протяжении большей части приведенных выше объяснений, вы по крайней мере знаю, что это таинственное "CSS" можно сказать.

Изменение шрифтов, размер текста и цвет в Dreamweaver CS6

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

2. Как уже упоминалось в моем краткое введение в CSS ранее , вы будете в первую очередь необходимо создать правило CSS. Это можно сделать, нажав на кнопку "Формат | Стили CSS | Новый ..." из меню. Вспомните из предыдущих глав, что это означает нажать кнопку "Формат" в строке меню, а затем "Стили CSS" из выпадающего меню и "Новый ..." из подменю, которое появляется.

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

   Нажмите на выпадающем списке для "тип селектора" поля (верхнее поле) и выберите "класса (можно применить к любому элементу HTML)". Если поле уже показывает, что вариант, просто переходите к следующему шагу.

4. Нажмите однострочный пустое место для "имя селектора" поле. Это поместит мигающий текстовый курсор в поле. Теперь вы должны дать имя классу.

   Имя класса лишь некоторые произвольное имя, ты придумываешь. Например, если вы хотите использовать Times New Roman шрифт для всех вхождений ваши имена продукт на веб-страницы, вы можете создать класс с именем "PRODUCTNAME" и положил правило, которое говорит ничего с этим классом будет отображаться с Times New Roman шрифт. Тогда вы можете найти на странице, чтобы найти все экземпляры продукции, и назначить эти слова "PRODUCTNAME" класса. Это приведет к тому, как Dreamweaver и браузерах посетителей, чтобы показать эти слова в Times New Roman.

   Как вы уже догадались, вы на самом деле не должны использовать "PRODUCTNAME" для вашего класса. Последняя является лишь пример, который я изобрел для этого урока. Не стесняйтесь монеты другое название. Однако обратите внимание, что все имена классов должны начинаться с буквы алфавита. Оставшаяся часть названия (кроме первой буквы) может содержать либо букв или цифр, но не может содержать знаков препинания и пробелов. Так именами, как "companyslogan" и "PRODUCTNAME" это хорошо, но не "слоган компании" или "название продукта", так как последние два содержать пробелов.

   Это обычно считается хорошей практикой использовать имена, которые описывают содержание, которое они связаны. Например, если ваш план должен поставить все ваши наименований, Times New Roman, лучше вызывать соответствующие классу "PRODUCTNAME", а не "TimesNewRoman". Таким образом, если вы передумаете и хотите использовать Comic Sans для вашей продукции, все что вам нужно сделать, это изменить правила, связанные с классом, и все ваши веб-страницы, использующие этот класс будет автоматически обновляться. Если вы используете "TimesNewRoman", вы в конечном итоге ни с несоответствующей имя класса (где ваш "TimesNewRoman" класса фактически изменяет шрифт Comic Sans), или вы будете вынуждены пройти через все ваши веб-страницы, чтобы изменить этикеток (класс) в новую. Говоря другими словами, под именем "PRODUCTNAME", который описывает содержание, является более перспективной, чем название, как "TimesNewRoman", который описывает конкретные внешний вид (правил).

   Во всяком случае, как только вы определились с названием, просто введите его в "имя селектора" поле. Не тратьте слишком много времени придумывать названия. Это просто описательную метку, чтобы сделать его легким для вас, менять шрифты и тому подобное, так что не получить подчеркнул над ним. Если вы действительно застряли, просто использовать родовые имена, как "CompanyName", "PRODUCTNAME", "Характеристики изделия", "подзаголовки", "longdroningparagraph" и т.д.

5. Убедитесь, что в раскрывающемся списке для поля правила определения (в нижней части диалогового окна) содержит "twoColLiqHdr.css". Если это не так, щелкните стрелку вниз и выберите "twoColLiqHdr.css" из списка. Это "twoColLiqHdr.css" линия относится к файлу CSS Dreamweaver, что создан для вас, когда вы создали 2 колонки макета жидкости в главе 1. При выборе этой опции в выпадающем списке вызовет Dreamweaver для хранения CSS правил, создаваемых для данного класса в этом же файле.

6. Нажмите на кнопку "ОК".

7. Определение правила CSS появится диалоговое окно. Название диалогового окна должен сказать что-то вроде "CSS для определения правила [ваше имя класса] в twoColLiqLtHdr.css», где фактическое имя класса, который вы ввели раньше будет показано вместо "[имя вашего класса]».

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

   По умолчанию, "Тип" линии в левой колонке должен быть выбран. Если это не так, щелкните по нему, чтобы выбрать его.

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

   Перед тем как идти на настройку Frenzy однако, пожалуйста прочитайте мои объяснения ниже.

8. Вещи вы должны знать прежде Изменение шрифта

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

   Обратите внимание, что каждая строка в списке присутствуют несколько шрифтов. Например, вы должны быть в состоянии видеть линию, которая говорит, что "Грузия, Times New Roman, Times, Serif" и другую, которая гласит: "Arial, Helvetica, без засечек", и так далее. Несколько шрифтов перечислены на линию, потому что нет никакой гарантии, что нужный шрифт доступен на компьютерах посетителей. Например, если вы выберите строку "Arial, Helvetica, без засечек", и ваш посетитель не первый шрифт ("Arial") на его / ее компьютер, веб-браузер будет автоматически пытаться использовать второй шрифтом указано («Helvetica»). И если этого нет, он будет пытаться третьей. И так далее до конца списка. В случае "Arial, Helvetica, без засечек" серии, третья вещь упоминается ("без засечек") просто означает, что, если браузер не может найти любой из предыдущих шрифтов, это использовать любой шрифт без засечек шрифт можно найти. Если даже это не доступно, то веб-браузер свободно использовать любой шрифт, что хочет.

   Путь веб-браузеров обрабатывать списки шрифтов имеет два последствия.

   Во-первых, если вы хотите, чтобы ваш текст, который будет отображаться в, скажем, Times New Roman, шрифт в идеальных условиях, то следует выбрать линию, которая ставит "Times New Roman" в качестве первого пункта в списке. Например, вы должны выбрать линию, которая говорит: "Times New Roman, Times, Serif", а не "Грузия, Times New Roman, Times, Serif". Выбор последних будет означать, что ваш веб-страницы будут отображаться в шрифте Грузии для посетителей, которые еще и Грузия, установленных на компьютере, даже если у них также есть Times New Roman, так как веб-браузеры отдать предпочтение ранним доступного шрифта в списке.

   Во-вторых, если вы используете "Редактировать список шрифтов ..." строки, чтобы добавить новые шрифты в списке, и вы используете шрифт, что только немногие люди имеют на своих компьютерах, веб-страницы будут отображаться с использованием других шрифтов для большинства посетителей. Например, если вы установили новый шрифт, скажем, thefreecountry.com 'ы бесплатные шрифты страницу и добавить его в шрифт раскрывающегося списка в Dreamweaver, есть вероятность, что ваш веб-страница появляется, только с этим конкретным шрифта при просмотре на компьютере . Все остальные в мире, вероятно, увидим ваши страницы, отображаемой в Times New Roman (шрифт по умолчанию используются многими веб-браузерами, если он не может найти любой из шрифтов указан).

   В случае, если вам интересно, так как вы используете две колонки жидкости макет из Dreamweaver, шрифт серии в настоящее время используется на вашем веб-страница "Verdana, Arial, Helvetica, без засечек". И так, что вам не нужно писать, чтобы спросить меня, thesitewizard.com в настоящее время использует "Arial, Helvetica, без засечек". Оба эти наборы шрифтов пользуются популярностью у веб-мастеров отчасти потому, что они присутствуют на большинстве (если не все) Окна и компьютеров Macintosh, и отчасти потому, что они очень разборчивы на экране компьютера. То есть, они разработаны таким образом, что делает его легким для людей, чтобы читать много текста, не напрягая глаза или замедление их чтение.

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

9. Изменение размера шрифта

   "Размер шрифта" поле состоит из двух коробок. Вы должны ввести число в первом боксе и единицы измерения в секунду. Например, если вы хотите, чтобы текст был 20% больше, чем в настоящее время, введите «120» (без кавычек) в первое поле, а затем нажмите стрелку вниз для второго поля и выберите "%".

   Хотя целый ряд различных единицах измерения доступны для Вас, чтобы выбрать, такие вещи, как веб-страницы, то лучше придерживатьсяотносительных единицах , как "%" и "EM", или, если вы действительно должны иметь фиксированную единицу, пиксель ( "ПХ"). Другие подразделения, например, "ПТ" (который вы можете быть знакомы с использованием wordprocessors ), "см", "мм" и "В", которые больше подходят для печатных средств массовой информации.

   Если вы используете "%" в качестве единицы, 100% относится к текущему размеру текста. По существу, 130% означает, что текст станет на 30% больше, чем текущий размер, а 80% означает, что он будет на 20% меньше.

10. Изменение цвета текста

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

    Если вы измените свое мнение об изменении цвета, просто нажмите клавишу ESC (на клавиатуре), чтобы выйти из окна выбора цвета. Не нажимайте кнопку где-то в другом месте в диалоговом окне в надежде, что это действие будет закрыть на это глаза. Это может привести цвет под указателем мыши (там, где оно произойдет, будет) должна быть выбрана. Если это предупреждение приходит слишком поздно для вас, и вы уже где-то нажата, вы, вероятно, заметите, что кнопка будет отражать новый цвет и некоторые, казалось бы бредом последовательность символов (например, "# FFF") будет вставлен в поле рядом с кнопкой. Чтобы избавиться от вашего случайного выбора, нажмите, чтобы поставить текстовый курсор в это поле, и удалить эти персонажи с бредом Backspace Удалить или клавишу (на клавиатуре). (Это на самом деле не бред, это текстовое представление выбранный цвет Например, "# FFF" означает "белый"..), Затем нажмите некоторые другие поля в диалоговом окне (чтобы переместить курсор от цвета поля). Вы заметите, что кнопка возвращается цвет по умолчанию она имела до вашей ошибкой.

11. Полужирный, курсив, подчеркивание

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

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

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

12. Когда вы закончите все, что нужно делать в этом диалоговом окне нажмите кнопку ОК.

    Диалоговое окно исчезнет, и вы будете, вероятно, разочарованы, обнаружив, что ничего не изменилось на вашей странице. Если да, то помните, что у вас есть только создал CSS правила для нового класса. Вы на самом деле не установлен, что класс еще ничего.

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

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

14. Нажмите на выпадающее окно для "Класс" поле на панели свойств, и выберите класс, который только что создали ранее. Например, если вы создали класс с именем "PRODUCTNAME", нажмите на строку, которая говорит "PRODUCTNAME" в выпадающем списке.

    Текст выбранный вами немедленно принять от характеристик, определенный ранее.

    Если вы пытались изменить размер, и не замечают никаких видимых изменений, это может означать, что разница в размерах вы сделали слишком малы, чтобы быть изображено на экране. Например, полагая размер "101%" или "99%", где разница составляет всего 1%, вероятно, приведет к ничем появляться случиться. Кроме того, если ваш текст полностью исчезает, это может означать, что вы случайно установите цвет текста на белый ("# FFF", в поле цвета). Белый текст на белом фоне не приводит к обогащению чтения.

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

16. Если вы хотите что-то иметь различный внешний вид (например, если вы хотите еще одного шрифта на другой фрагмент текста), просто создать новый класс и указать внешний вид вы хотите в правилах для класса. Затем выбрать (выделить) текст как раньше, и присвоить ему класс, который вы создали.

Как изменить существующий класс CSS в Dreamweaver CS6

После назначения класса CSS к объекту, и, глядя на результат, вы можете решить, что вам нужно использовать другой шрифт, цвет, размер и т.д. Dreamweaver позволяет изменять правила, которые вы создали ранее.

1. Положите вашу текстовый курсор в фрагмент текста, в который ранее назначенных классом. Например, если ранее вы уже назначили "PRODUCTNAME" класса все экземпляры слова "Super Widget 1000" на вашей странице, и теперь хотите изменить шрифт, используемый, нажмите кнопку мыши где-то в середине одного из вхождений "Super виджетов 1000", например, после буквой "у" в "Super". Это вызовет текстовый курсор, чтобы появиться в этом месте. (Это всего лишь пример. Это действительно не должно быть после второго письма. Это может быть после первого письма, или 3-й. В самом деле, если вы чувствуете себя действительно дикий, это может быть даже после 4-го письма. Или 5-ом. И так далее. Просто убедитесь, что курсор находится в одном из слов, которые относятся к классу вы хотите изменить, в противном случае следующим шагом не будет работать.)

2. Теперь ищем "стилей CSS" панель с правой стороны Dreamweaver (см. рисунок). Посмотрим на раздел в этой панели, которая начинается с смелых заголовком "Правила". Это CSS правила, которые применяются к месту, где ваш текст курсором в настоящее время находится.

   

   Если ваш "стилей CSS" панели слишком коротка, и не имеет достаточно места, чтобы показать, что угодно, расширить его, перемещая линию, разделяющую панель CSS Styles от "Business Catalyst" вниз панели. То есть, нажмите левую кнопку мыши, когда курсор наведен на разделительную линию, и продолжая удерживать кнопку нажатой, переместите мышь вниз. Указатель мыши должны переодеваться в двустороннюю стрелку, когда он находится над разделительной линией показывает вам, что вы можете изменить размер панелей. Тогда, как вы наведите курсор мыши, панель CSS будет увеличиваться в размерах за счет панелей под ним. Если эта сила ваших файлов панели под стать слишком мало, считают рушится "Business Catalyst" панели, дважды щелкнув слов "Business Catalyst".

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

3. Посмотрите на класс, который вы хотите изменить в линии только под "Правила" заголовком и двойного его. В зависимости от того, сколько пространства вы выделили на панели стилей CSS, возможно, придется нажать на стрелку вверх или вниз на полосе прокрутки на правой стороне, чтобы увидеть все. Например, если вы создали класс под названием "PRODUCTNAME", который вы хотите изменить, DoubleClick строку, которая начинается со слова ". PRODUCTNAME" (обведено мой рисунок выше). (Это не имеет значения, где вы дважды, пока он находится в строке, содержащей ваше имя класса, так как любой клик автоматически выберет всю строку. Если вы сомневаетесь, просто дважды кликнуть вашего класса само название.)

4. Определение правила CSS диалоговое окно для этого класса появятся. Посмотрите на названия. Стоит сказать, "CSS для определения правила. PRODUCTNAME в twoColLiqLtHdr.css", за исключением того, что имя вашего класса будет показано вместо ". PRODUCTNAME". Если заголовок указывает имя класса, который является не тот, который вы хотите изменить, это означает, что вы случайно doubleclicked неправильную линию. В таком случае, нажмите кнопку Отмена, чтобы закрыть диалоговое окно и повторите попытку.

   В противном случае, просто измените все, что вы хотите в диалоговом окне. Это то же самое окно вы столкнулись ранее при создании правил, поэтому она должна содержать все правила, которые вы ранее установленные для этого класса.

5. Когда вы закончите внесения изменений, нажмите кнопку "ОК".

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

Как изменить шрифт по умолчанию для всей веб-страницы в Dreamweaver CS6

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

1. Самый простой способ сделать это нажать на кнопку "Изменить | Свойства страницы" из меню.

2. "Свойства страницы" появится диалоговое окно. Посмотрите на "страницу шрифтом" поле с правой стороны. Он должен показать "Verdana, Arial, Helvetica, без засечек". Нажмите стрелку раскрывающегося списка для поля и выберите нужный шрифт.

3. Нажмите на кнопку "ОК".

Как изменить шрифт для всей влево и вправо в Dreamweaver CS6

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

1. Щелкните в любом месте в столбце под вопросом. То есть, если вы хотите изменить шрифт для всего текста в левой колонке, щелкните в любом месте в левой колонке (я предлагаю где-то в абзац текста, который начинается "выше ссылкам продемонстрировать основные навигационные ...", и т.д. ). Аналогично, если вы хотите изменить шрифт для правой колонке, щелкните в любом месте в этом столбце.

2. Для левой колонке, DoubleClick строку, которая начинается с ". Sidebar1" в разделе Правила Панель CSS. Если вы настройки в правой колонке, DoubleClick строку, которая начинается с ". Содержания».

3. Она вызовет Определение правила CSS диалоговое окно для любого ". Sidebar1" (если вы изменение шрифта для левой колонке) или ". Содержания» (если вы изменяете правая колонка).

   Внесите необходимые изменения и нажмите кнопку "ОК", когда вы до конца.

Как сделать разовый жирным шрифтом и курсивом текста

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

1. Выделите текст, который хотите подчеркнуть.

2. В панели Свойства (в нижней части Dreamweaver), нажмите кнопку " B "значок, если вы хотите поместить ваши слова жирным шрифтом, а" я "значок, если вы хотите их курсивом. (" B "и" Я "Значки находятся справа от полей классов. Как вы, вероятно, предположить из моих слов, эти 2 буквы на самом деле интерактивными, хотя они выглядят, как ни иконки, ни кнопок.)

   Кроме того, для тех, кто знаком с клавиш, используемых в текстовых процессорах , как Microsoft Word, можно также использовать стандартные Ctrl + B и Ctrl + I (для пользователей Windows) клавиш для выполнения тех же действий. Если вы не понимаете этого пункта, не волнуйтесь, просто придерживаться нажав кнопку " B "и" Я "иконки в панели свойств.

Сохранение работы правильный путь

Сохраните настройки, нажав кнопку "Файл | Сохранить все" из меню. Заметьте, что я сказал использовать "Файл | Сохранить все", а не "Файл | Сохранить». Это важно, потому что все CSS классы и правила, которые вы создали, были вставлены в файл CSS ("twoColLiqLtHdr.css"), а не файл «index.html». Если вы используете только "File | Save", вы только сохраните измененные файл «index.html», но не (также изменены) CSS файл. Конечным результатом является то, что ни один из визуальных изменений вы делаете не будет увидеть на вашем сайте, когда вы опубликовать его.

Публикация и тестирование

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

Вы должны увидеть все изменения, которые вы сделали отражение на сайте. Если только некоторые из сделанных изменений появляются, а другие нет, то это означает, что вы либо не в состоянии использовать "Файл | Сохранить все", чтобы сохранить вашу работу раньше, или вы забыли нажмите «Да» в ответ на быстрое Dreamweaver, чтобы перенести зависимые файлы.

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

Обратите внимание, что это не всегда вина веб-браузера, когда вы видите старые версии веб-страницы. Иногда может быть вине ваших услуг широкополосного доступа (так называемые Интернет-провайдер или ISP). Некоторые провайдеры кэше копии посещенных вами страниц используя что-то известно как "прокси". Если они не настроены правильно их доверенных лиц, в конечном итоге можно видеть новые копии "index.html" рядом со старыми копии ваших CSS или файлы изображений. Единственным решением доступны для вас на вашей стороне (если не считать жаловаться поставщика услуг) является использование "перезагрузка" на вашем веб-браузере, и надеемся, что прокси-сервер принимает намек когда ваш браузер запрашивает страницу.

Следующая глава

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