1611095683-f0e95d7001a513b94262b62a8c96d2db (824959), страница 12
Текст из файла (страница 12)
Теперь файлы находятсяна вашем диске. Помните, что менять названия файлов или папок, а также любые другиеизменения Вам следует выполнять в Expression Web, который автоматически поменяет связиво всем сайте. Иначе у Вас останутся битые ссылки.Итак, мы научились с помощью Expression Web создавать сайт на основе шаблона,редактировать его, добавлять и удалять страницы, наполнять сайт.Для желающих ближе познакомиться с web-программированием, созданием сайтов «снуля», а также лучше освоиться с работой с каскадными таблицами стилей и идеямисовременногоweb-программированияпредлагаетсявыполнитьнесколькоПриложении 1. Краткий справочник по CSS вы найдете в Приложении 2.65уроковв4.4.
Создание одностраничного сайтаЧтобы более детально познакомиться с элементами страницы и последовательностьюее наполнения мы сделаем небольшой одностраничный сайт. Чтобы создать новый сайтвыполните следующие действия:1. Выберите File New Web Site.2. В левой колонке выберите General и в списке укажите Empyt Web Site.3. В строке снизу диалогового окна укажите местоположение и название сайта.Фактически, мы получим только папку, в которой пока нет ни одной страницы. Чтобыдобавить простую HTML-страницу, откройте File New HTML. Сохраните страницупод именем index.html. Рекомендуем сразу указать параметры страницы, такие как название,описание и ключевые слова. Для этого дважды щелкните по названию вашей страницы вкаталоге Folder List, и затем выберите меню File Page Properties.Заполните соответствующие поля.
На вкладке Formatting можете выбрать цвета длягиперссылок, на вкладке Advanced укажите значение отступа 0 для всех сторон.66Если Вы обратили внимание, в предыдущей главе мы создавали динамическийшаблон на основе тэгов <div>, геометрический размер которого зависел от содержимого, аименно от размера редактируемого тэга, где мы располагали содержание лабораторнойработы. Есть другой способ, который позволяет точно указать положение тэга на странице(или относительно родительского тэга), его абсолютный размер, а также z-index – порядокэлементов по z-координате, перпендикулярной плоскости экрана. Для этого служит тэг<layer>. Найдите на панели Toolbox элемент Layer и дважды щелкните на него. В левомверхнем углу появится квадратный тэг размером 100х100 пикселей.
Известным Вамспособом добавьте рисунок masthead_picture.jpg. Тэг <layer> автоматически расширился всоответствие с размерами рисунка, но для корректного отображения в браузере вамнеобходимо указать точные размеры вручную. Для этого узнайте сначала размеры рисунка всвойствах рисунка, либо на вкладке Tag Properties, затем укажите точно такой же размер вCSS-свойствах тэга <layer>.67Наверняка Вы помните, как переключаться между тэгами, но на всякий случайповторимся, что это делается в селекторе тэгов, который находится под строкой с указаниемактивного файла.Теперь добавьте еще два пустых тэга <layer>, и за рамку перетащите их в свободноеместо на странице. В первый тэг поместите картинку personal_photo.jpg и выполнитедействия, аналогичные манипуляциям над первым рисунком. Во втором тэге разместитетекст из файла One_page.txt.
Подберите размеры тэга так, чтобы текст помещался настраницу. Рекомендуем использовать некоторые опции вставки текста в меню Edit PasteText. Примените Normal paragraphs without line breaks.Теперь давайте поработаем со стилями. Изменим формат заголовка. Выделите вашзаголовок первую строку текста, на стандартной панели инструментов выберите стильHeading 1 <h1>. Теперь поменяем некоторые параметры заголовка. Для этого на панели задачApply styles или Manage styles нажмите на кнопку New Style. В диалоговом окне в полеSelector найдите стиль <h1>, а в поле Define in оставьте Current Page. Теперь в категорииFont в поле font-family выберите Arial, Helvetica, sans-serif, а в поле font-size укажитеразмер кегля 16 (проверьте, что единицами измерения выбраны пиксели px).Примечание.Обратитевнимание,чтоизменивсвойствастиля<h1>,Выавтоматически изменяете формат всех тэгов на текущей странице со стилем <h1>.Теперь упорядочим положение тэгов.
С помощью селектора тэгов выделите тэг,содержащий рисунок и на панели CSS Properties задайте значения left = 30px, top = 200px.Для второго тэга, содержащего текст, задайте left = 300px, top = 200px,width = 300px.Примечание. Чтобы лучше ориентироваться в CSS-свойствах, существуют двеполезные кнопки:– Show set properties on top (Показывать все правила сверху).– Show all set properties in all of the applied rules (Показывать все правила,применяемые к выбранному тэгу).Теперь добавим рисунок к тексту. Для этого поместите курсор в начало абзаца.Вызовите меню Insert Picture From File и вставьте рисунок beach.jpg. Чтобыполучить обтекание рисунка нажмитте мышью на рисунок и затем на кнопку New Style и вполе Selector укажите .img_right (название начинается с точки!). В категории Layout укажитеfloat:left, в категории Box уберите галочку напротив Same for all для margin (отступ) иукажите right:10px, bottom:10px.
Нажмите Apply, затем OK.Примечание. Если изменения не вступили в силу, выделите рисунок и щелкните поназванию стиля .img_left68Но на самом деле этот рисунок лучше будет смотреться справа. Создайте еще одинстиль .img_right с обтеканием справа и примените его. (Не забудьте про параметры вкатегории Box).4.4.1. Классификация стилей. Таблицы стилейХотелось бы еще раз поговорить о предназначении стилей и их видах. Мы ужеупоминали, что стили позволяют нам отделить содержание от формы (это существенноупрощает процесс редактирования и уменьшает объем кода). Т.е.
описание правил,применяемых в стиле, находится в строго определенном месте (это может быть начало файлаили отдельный файл). а чтобы применить стиль к объекту мы лишь указываем его названиепри описании объекта. Вы можете посмотреть как это выглядит в коде в режиме Split.Стили бывают следующих видов:1. Стили на основе тэгов. Такие стили могут применяться к определенному типуHTML-элементов, например, к заголовкам или гиперссылкам. В списке Manage Stylesим соответствуют голубые точкиМы уже создавали такой стиль <h1>.2.
Стили на основе классов. Эти стили могут применяться к чему угодно, например, крисункам, к тексту в параграфе или его части, к таблицам, опять же к гиперссылкам изаголовкам. В списке Manage Styles им соответствуют зеленые точки. В тэгсоответствующего элемента включается имя стиля (например, img.img_right).
Мысоздавали такие стили к рисункам (<.img_right> и <.img_left>), и можем создать еще69массу всевозможных стилей, управляя внешним видом подписей к рисункам, важного(выделенного) текста, рамок рисунков и таблиц, списков и т.д.3. Встроенные стили (inline style) применяются только один раз к одному элементу(например, можно выделить один абзац в рамку с помощью встроенного стиля).Теперь дадим классификацию стилей на основе области распространения стилей.Существуют:внутренние таблицы стилей – набор стилей, применимых к данной странице. Ониописываются в заголовке страницы (между <head> и </head>);внешние таблицы стилей – соответственно, набор стилей, применимых ко всемусайту.
Они описываются в отдельном файле с расширением .css. Вы можете создатьнесколько вариантов оформления своего сайта и легко переключаться между ними,присоединяя тот или иной файл со стилями. Разумеется, у ваших несколькихвариантов могут быть несколько общих стилей. Тогда Вам не требуется каждый разописывать одно и тоже, а всего лишь один раз описать их в отдельном файле исделать импорт этого файла в Ваш файл со стилями.Стили на основе тэгов и стили на основе классов могут располагаться как вовнутренней таблице стилей, так и во внешней.
Встроенные стили жестко привязаны кобъекту, к которому они относятся (и описываются в самом объекте).При построении макета сайта применяется еще один вид стилей – контекстныеселекторы. Под этим замысловатым названием скрывается достаточно простая суть – этистили относятся к классам, определенным в некоторой области страницы, обладающейсобственным именем-идентификатором (например, к списку в панели навигации).
Т.к.контекстные селекторы используются в макетах, на которых построен весь сайт, торасполагаются они, естественно, во внешних таблицах стилей. В списке Manage Styles имсоответствуют красные точки. Название стиля состоит из символа #, названияидентификатора и названия класса элементов.И несколько слов о каскаде. Каскадными стили называются от того, существуетиерархия в применении различных стилей к элементам. Если для элемента не заданы правилавстроенного стиля, то применяются правила внутренней таблицы. Если и таковых неимеется, то применяются правила внешней таблицы. Если нет и их, то используютсяправила, заданные по умолчанию.Давайте еще немного поработаем со стилями. Вы уже создавали стили на основе тэгови стили на основе классов.
Вам не составит трудностей создать встроенные стиль (для этогов поле категория нужно указать inline style.70Для того, чтобы создать контекстный селектор, нажмите на кнопку New Style и в полеSelector введите #layer3 h1. Выберите, например в категории Font и поле красный цветшрифта в поле color. Повторим, что этот стиль относится к заголовкам <h1> элемента<layer3>.Список стилей, созданных на вашей странице, отображается в панели Manage Styles.Изначально, все эти стили находятся во внутренней таблице.
Чтобы создать внешнюютаблицу выполните:1. File New CSS. Нажмите Ctrl+S чтобы созхранить файл. Предпочтительноиспользовать отдельную папку layouts для хранения таблиц стилей.2. Чтобы присоединить таблицу стилей к странице, откройте нужный HTML-документ иперетащите созданный Вами файл из списка Folder List на страницу. Теперь Выувидите его в списке Manage Styles .713. Перетащите мышью стили, которые вы хотите поместить во внешнюю таблицу, нафайл с названием этой таблицы.
Теперь под названием файла с таблицей находятсяназвания содержащихся в ней стилей. Сохраните Ваши результаты.4.4.2. Свойства, управляющие позиционированиемИз всего многообразия CSS-свойств элементов, отдельного рассмотрения требуютсвойства позиционирования. Умение управлять этими атрибутами совместно со свойствамиfloat и clear позволяют создавать макеты сайта, размеры которого подстраиваются подразмеры содержимого, либо наоборот, строго определять положение каждого элемента.Наверняка, Вы обратили внимание, что создавая сайт по шаблону, Вы легко можете уместитьсвою информацию в редактируемых областях, ровно как использую другие правила можетерасположить элементы неподвижно относительно друг друга в примере с одностраничнымсайтом.
Давайте разберемся в хитростях использования CSS-свойств позиционирования. Вразделе Position свойство position может принимать 5 значений:absolute – абсолютное позиционирование относительно границ родительского блока(страницы или элемента, внутри которого расположен этот блок). Его положение иразмеры определяются такими параметрами, как top, left, height, width. Размеры блокане зависят от размеров содержимого, поэтому требуется внимательность при созданиимакета.Отметим,чтослои<layers>поумолчаниюимеютабсолютноепозиционирование и их применение при конструировании макета может привести кнеожиданным эффектам при просмотре в браузере;fixed – фиксированное положение относительно окна браузера (точнее, относительноВашего экрана).
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
