Семинару «Проектирование и размещение в сети Интернет административных сайтов образовательных учреждений» - korshu.ru o_O
Главная
Поиск по ключевым словам:

на


При этом в теге td приводятся ширина(width) и высота(height) ячейки таблицы, равные ширине и высоте изображения, и параметр background, в котором задается наименование и местоположение фонового изображения.



  1. Вставьте в тег td (там же - 2-я строка главной таблицы (1-я ячейка)) атрибут valign=”top, который задает выравнивание по вертикали в ячейке таблицы.

  2. Проделайте аналогичные действия с третьей ячейкой данной строки и изображением line.gif, внесите текст в ячейку «Тут будет название текущего раздела»

  3. Вставьте в тег td (3-я строка главной таблицы (1-я ячейка)) атрибут valign=”top, который задаст выдачу «Текста статьи» с верха ячейки таблицы.

  4. Проделайте аналогичные действия с 1-ой ячейкой 4-ой строки и изображением fotogal.gif, внесите текст в ячейку «Тут будет меню фотогалереи».

  5. Проделайте аналогичные действия с 1-ой ячейкой 5-ой строки и изображением partners.gif, внесите текст в ячейку «Тут будут гиперссылки на сайты партнеров».

  6. Проделайте аналогичные действия с 1-ой ячейкой 6-ой строки и изображением search.gif, внесите текст в ячейку «Тут будет код формы поиска».

  7. Посмотрите страницу во внешнем браузере (верх. меню ПросмотрПросмотр во внешнем браузере (F9)).

Упражнение 9


Преобразование ширины web-страницы из фиксированной в автоматически растягиваемую по ширине окна браузера пользователя.


  1. В теге
страница 1
Похожие работы
Название работы Кол-во страниц Размер
Г. О. Самары «наука, творчество, интеллект» Секция Гуманитарная «семейная... 1 259.99kb.
Правила использования сети Интернет в моу сош №20 1 60.92kb.
Инструкция по организации и проведению туристских походов, экспедиций... 21 6809.18kb.
Методика организации урока с применением ресурсов сети Интернет 1 127.95kb.
Средства телекоммуникаций и мировые компьютерные сети. Интернет. 1 182.58kb.
Технологии использования готовых сайтов. Размещение на веб сервере 1 34.65kb.
Инструкция по установке видео на сайты образовательных учреждений 1 38kb.
Программа стажировочных модулей для специалистов образовательных... 3 944.22kb.
Инструкция по работе в Интернет кабинете для учителя-участника пнпо... 1 19.45kb.
В сети интернет 11 960.6kb.
Сборник контрольных работ для студентов- заочников образовательных... 17 3105.75kb.
На их мезоморфные свойства 1 303.19kb.
Инструкция по работе с сервисом «sms-платеж» 1 218.94kb.

Семинару «Проектирование и размещение в сети Интернет административных сайтов образовательных - страница №1/1


<b>Упражнения к семинару </b> <br /> <br /><b>«Проектирование и размещение в сети Интернет административных сайтов образовательных учреждений»</b> <br /><u><b>http</b></u><u><b>://</b></u><u><b>club</b></u><u><b>-</b></u><u><b>edu</b></u><u><b>.</b></u><u><b>tambov</b></u><u><b>.</b></u><u><b>ru</b></u><u><b>/</b></u><u><b>methodic</b></u><u><b>/2007/</b></u><u><b>ppsite</b></u><u><b>/</b></u><u><b>seminar</b></u><u><b>/</b></u><u><b>material</b></u><u><b>_</b></u><u><b>site</b></u><u><b>.</b></u><u><b>rar</b></u> - исходные материалы для выполнения упражнений. <p>В составе архива - папка <b>Материалы для образ. сайта</b>, в которой находится следующее.</p> <br /><ul> <li> <br />Папка <b>Maket</b> – содержит файл макета сайта <b>index</b><b>.</b><b>psd</b>. <br /><li> <br />Папка <b>Pictures</b> – анимационные изображения и баннеры. <br /><li> <br />Папка <b>Result</b> – результаты выполнения упражнений, приведенных ниже. <br /><li> <br />Папка <b>Result</b><b>\</b><b>Maket</b> - файлы (<b>index</b><b>_</b><b>fragm</b><b>.</b><b>psd</b> – макет, разрезанный на фрагменты в Photoshop CS2, <b>index</b><b>_</b><b>fragm</b><b>7.</b><b>psd</b> – макет, разрезанный на фрагменты в Photoshop 7.0) <br /><li> <br />Папка <b>Result</b><b>\</b><b>Web</b> – результаты в html-коде, окончательный результат - <b>_</b><b>index</b><b>.</b><b>html</b>. <br /><li> <br />Папка <b>Texts</b> – тексты, необходимые для выполнения упражнений. <br /><li> <br />Папка <b>web</b><b>-</b><b>editor</b> – дистрибутив свободно-распространяемого html-редактора Smart Web Builder. <br /></ul> <h2> Список упражнений </h2> <h2> (upragnen1.doc и upragnen2.doc)</h2> <h2> <i>Проектирование, макетирование и верстка сайта образовательного учреждения </i><span>(</span><span>upragnen</span><span>1.</span><span>doc</span><span>)</span></h2> <h2> <br /> <br /></h2> <h2> <i>Упражнение 1.</i><span> Проектирование структуры сайта</span></h2> <h2> <i>Упражнение 2.</i><span> Работа с программой Adobe Photoshop по созданию макета сайта</span></h2> <h2> 2.1. Замена изображения в левом верхнем углу макета</h2> <h2> 2.2. Изменение названия сайта в макете</h2> <h2> 2.3. Изменение цветового баланса слоев макета.</h2> <h2> <i>Упражнение 3</i><span>. Разрезка макета на фрагменты (Подготовка макета к верстке – см. рисунок 2)</span></h2> <h2> <i>Упражнение 4.</i><span> Автоматическая верстка в программе Adobe Photoshop</span></h2> <h2> <i>Упражнение 5.</i><span> Просмотр и изменение html-кода файла index.html стандартными средствами.</span></h2> <h2> <i>Упражнение 6.</i><span> Установка html-редактора Smart Web Builder.</span></h2> <h2> <i>Упражнение 7.</i><span> Изучение html-кода файла index.html в HTML-редакторе Smart Web Builder, добавление комментариев.</span></h2> <h2> <i>Упражнение 8.</i><span> Перевод изображений из ячеек таблицы в фоновые изображения ячеек и выравнивание текста по вертикали в ячейках.</span></h2> <h2> <i>Упражнение 9.</i><span> Преобразование ширины web-страницы из фиксированной в автоматически растягиваемую по ширине окна браузера пользователя.</span></h2> <h2> <i>Упражнение 10.</i><span> Переименование файлов с русскими именами, если таковые имеются, и внесение изменений в html-код.</span></h2> <h2> <i>Упражнение 11.</i><span> Теги html работы с текстом (теги <div>,,<b>) и списками (<ul>,<ol>,<li>). Работа c меню.</span></h2> <h2> <i>Упражнение 12.</i><span> Работа c названием текущего раздела.</span></h2> <h2> <i>Упражнение 13.</i><span> Теги заголовков <h2> - <h6>. Работа c текстом текущего раздела или статьи.</span></h2> <h2> <i>Упражнение 14.</i><span> Вставка изображения (тег <img>). Вставка баннеров первую строку.</span></h2> <h2> <i>Упражнение 15</i><span>. Создание гиперссылок на внутренние разделы сайта. Создание гиперссылки в главном меню</span></h2> <h2> <i>Упражнение 16.</i><span> Создание гиперссылок на другие сайты .</span></h2> <h2> <i>Упражнение 17.</i><span> Создание гиперссылок на внутренние разделы сайта в главном меню</span></h2> <h2> <i>Упражнение 18.</i><span> Работа с таблицами стилей CSS. Создание внешних таблиц стилей в отдельном файле.</span></h2> <h2> <i>Упражнение 19.</i><span> Работа с таблицами стилей CSS. Создание внутренних таблиц стилей в отдельных тегах.</span></h2> <h2> <i>Упражнение 20.</i><span> Работа с таблицами стилей CSS. Создание классов во внешних таблицах стилей.</span></h2> <h2> <br /></h2> <h2> <i>Публикация сайта образовательного учреждения на narod.ru </i> </h2> <h2> (upragnen2.doc)</h2> <h2> <br /> <br /></h2> <h2> <i>Упражнение 21.</i></h2> <h2> 21.1 Регистрация на narod.ru. Загрузка файлов в корневую папку сайта. </h2> <h2> 21.2 Перенос структуры и файлов сайта на Народ. </h2> <h2> <i>Упражнение 22. </i></h2> <h2> 22.1 Создание гостевой книги</h2> <h2> 22.1 Администрирование гостевой книги</h2> <h2> <i>Упражнение 23</i><span>. </span><span>Создание счетчика посещаемости </span></h2> <h2> <i>Упражнение 24</i><i>.</i><span> </span><span>Установка формы поиска по сайту</span></h2> <h2> <i>Упражнение 25</i><i>.</i><span> </span><span>Создание персонального чата</span></h2> <h2> <i>Упражнение 26</i><i>.</i><span> </span><span>Создание опросов</span></h2> <h2> <i>Упражнение 27</i><i>.</i><span> </span><span>Подключение к Народ.Ру по FTP с помощью файлового менеджера FAR</span></h2> <h2> <br /></h2> <h2> Проектирование, макетирование и верстка сайта образовательного учреждения</h2> <h2> Упражнение 1</h2> <br /><table dir="ltr" align=right width=392 hspace=6 cellpadding=7 cellspacing=0> <col width=129> <col width=233> <tr valign=top> <td width=129> <br /><b>school</b> <br /></td> <td width=233> <br />– раздел «О школе» <br /></td> </tr> <tr valign=top> <td width=129> <br /><b>document</b> <br /></td> <td width=233> <br />– раздел «Устав» <br /></td> </tr> <tr valign=top> <td width=129> <br /><b>study</b> <br /></td> <td width=233> <br />– раздел «Обучение» <br /></td> </tr> <tr valign=top> <td width=129> <br />… <br /></td> <td width=233> <br /> <br /> <br /></td> </tr> <tr valign=top> <td width=129> <br /><b>fotogallery</b> <br /></td> <td width=233> <br />– раздел «Фотогалерея» <br /></td> </tr> <tr valign=top> <td width=129> <br />… <br /></td> <td width=233> <br /> <br /> <br /></td> </tr> <tr valign=top> <td width=129> <br /><b>contact</b> <br /></td> <td width=233> <br />– раздел «Контакты» <br /></td> </tr> <tr valign=top> <td width=129> <br /><b>internet</b> <br /></td> <td width=233> <br />– раздел «Интересные ссылки» <br /></td> </tr> <tr valign=top> <td width=129> <br /><b>quest</b> <br /></td> <td width=233> <br />– раздел «Гостевая книга» <br /></td> </tr> </table> <br /><b>Таблица 1</b> <br /> <i>Проектирование структуры сайта</i> <p>Создайте папку <b>web</b> на диске C: или D: вашего компьютера. Это будет корневая папка вашего сайта, где будет располагаться главная страница <b>index</b><b>.</b><b>html</b>. </p> <br /> <br /><img src="1.gif" align=left hspace=12>Продумайте состав вашего сайта и в соответствии с выбранными разделами для сайта внутри папки <b>web</b> создайте папки для них (см. в таблице 1). <p>Если в разделе предусмотрено наличие изображений, создайте папку <b>img</b> внутри каждой созданной папки.</p> <br /> <br /><h2> Упражнение 2</h2> <br /><i>Работа с программой Adobe Photoshop по созданию макета сайта</i> <p>Запустите программу <i>Adobe</i><i> </i><i>Photoshop</i> и откройте файл <b>index</b><b>.</b><b>psd</b> (полуфабрикат макета) из папки <b>Материалы для обр.сайта/Макет</b>.</p> <p>На основе данной заготовки создайте собственный макет сайта своего образовательного учреждения. Для этого рекомендуется выполнить следующее: <br /><ul> <li> <br />Ознакомиться cо слоями изображения (состоит из 11 слоев – см. рис 1.). <br /><li> <br />Заменить своим изображение в левом верхнем углу макета <br /><li> <br />Изменить название сайта <br /><li> <br />Изменить цветовой баланс слоев макета <br /></ul> <br /><i>2.1. Замена изображения в левом верхнем углу макета</i> </p> <p>Выключите из просмотра нажатием на кнопку <img src="2.gif" align=bottom width="1px" height="1px"><img src="3.jpg" align=bottom width="23px" height="23px" border=0> слой <b>Логотип.</b> </p> <p>Вставьте в макет свой логотип или просто небольшое изображение вместо слоя <b>Логотип</b> из папки D:/Материалы для сайта/Pictures/Logo (<b>Файл</b> – <b>Открыть</b>). </p> <p>Скопируйте это изображение в файл макета через буфер обмена (<b>Выделение</b>(Выбор) - <b>Все</b><SUP><SUP>1</SUP></SUP>, <b>Редактирование</b>(Редак) – <b>Скопировать</b>(Копировать), перейти в окно index.psd, <b>Редактирование</b>(Редак) – <b>Вклеить</b>(Вставить)).</p> <p>Инструментом <b>Перемещение</b> <img src="4.png" align=bottom width="27px" height="23px" border=0> подвиньте новый слой в левый верхний угол макета и при необходимости уменьшите его (<b>Редактирование</b>(Редак) – <b>Свободное преобразование</b>). </p> <p>Выключите из просмотра нажатием на свою кнопку <img src="2.gif" align=bottom width="1px" height="1px"><img src="3.jpg" align=bottom width="23px" height="23px" border=0> слои Текст раздела, Текст меню, Текст текущего раздела<b>.</b> Эти слои были созданы только для представления макета в более реальном виде. В дальнейшем они нам не нужны.</p> <p>Изображения для своего макета также можно взять из сети Интернет. <br /> <br /><i>2.2. Изменение названия сайта в макете</i> </p> <p>Выберите двойным щелчком мыши кнопку <img src="5.gif" align=bottom width="1px" height="1px"><img src="6.jpg" align=bottom width="39px" height="37px" border=0><img src="5.gif" align=bottom width="1px" height="1px"> в слое «Название» окна<b> Слои</b>. Текст «Название образовательного учреждения» выделился. Вместо этого теста наберите свое название образовательного учреждения. </p> <p>Измените цвет текста. При необходимости примените другие эффекты. Аналогично можно изменить слой «Девиз». <br /> <br /><i>2.3. Изменение цветового баланса слоев макета.</i> </p> <p>Измените цветовой баланс слоев «Фон меню», «Фон фотогалереи», «Фон партнеров», «Фон поиска». Для каждого из этих слоев примените команды <b>Изображение(</b>Образ<b>)</b> – <b>Коррекция</b> – <b>Цветовой</b> <b>баланс</b>. </p> <br /><h2> Упражнение 3</h2> <br /><i>Разрезка макета на фрагменты (Подготовка макета к верстке – см. рисунок 2)</i> <br /> <br /><img src="7.gif" align=left hspace=12> <br /> <br /> <br /><img src="8.png" align=left hspace=12 width="138px" height="167px" border=0> <br /> <br /><ol> <li> <br />Включите (если не включены) горизонтальную и вертикальную линейки командами<b> Просмотр</b> (Вид) – <b>Линейки. </b>Щелкнув правой клавишей на линейке, можно проверить в каких единицах они пронумерованы. <br /><li> <br />Включите показ направляющих <b>Просмотр</b> (Вид) – <b>Показать</b> - <b>Направляющие.</b> <br /><li> <br />Включите показ фрагментов <b>Просмотр</b> (Вид) – <b>Показать</b> - <b>Фрагменты.</b> <br /><li> <br />С<img src="9.gif" align=left hspace=12>оздайте направляющие (вертикальные и горизонтальные) по предполагаемым границам фрагментов командами <b>Просмотр </b>(Вид) – <b>Новая направляющая…</b> - Указать ориентацию (вертикальную или горизонтальную) и положение в пикселах (расстояние от линейки). Если новую направляющую надо подвинуть, используйте инструмент <b>Перемещение</b> <img src="4.png" align=bottom width="27px" height="23px" border=0>. Или провести нажатой левой клавишей мыши с поля линейки до нужного места и отжать клавишу. Должно получиться как на рисунке 3. <br /></ol> <br /> <br /><ol start=5> <li> <br />Включите инструмент <b>Раскройка</b>(Фрагмент) <img src="10.png" align=bottom width="28px" height="23px" border=0> и нажмите кнопку <b>Фрагменты по направляющим</b> (Slices From Quides) на панели свойств инструментов. В результате макет разделится на 35 фрагментов. <br /><li> <br />Объедините 1-й, 2-й, 3-й фрагменты в один, используя инструмент<b> Выделение фрагмента </b>(Выбор фрагмента) <img src="11.png" align=bottom width="26px" height="22px" border=0> вместе с клавишей <b>Shift</b> и команду контекстного меню (через правую клавишу мыши)<b> Объединить фрагменты</b>. (В Adobe Photoshop 7.0 к сожалению нельзя объединить фрагменты, можно только удалить ненужные) <br /><li> <br />В Adobe Photoshop CS2 объедините фрагменты по группам, чтобы осталось 11 фрагментов, как на рисунке 2. <br /></ol> <br />В Adobe Photoshop 7.0 удаляйте все лишние фрагменты и в освободившихся полях, соответствующих фрагментам с рисунка 2 применяйте команду контекстного меню <b>Разрешен. польз. Фрагм.</b> <br /><ol start=5> <li> <br />И<img src="12.jpg" align=left hspace=12 width="540px" height="361px" border=0>змените параметры фрагментов, выбрав правой клавишей мыши каждый фрагмент и позицию <b>Редактировать параметры фрагмента…</b>(Прав.опции фрагментов) контекстного меню в диалоговом окне <b>Параметры фрагмента</b> (Slice Options) согласно таблице 2. <br /></ol> <br /> <br /><b>Таблица 2</b> <br /><table width=695 cellpadding=7 cellspacing=0> <col width=112> <col width=553> <tr valign=top> <td width=112> <br />Фрагмент 01 <br /></td> <td width=553> <br /><b>Тип</b>(Тип среза) = Изображение(Image) <br /> <br /><b>Имя</b> = <i>title</i> <br /> <br /><b>URL</b> = <u>http://name_site.narod.ru</u> <br /></td> </tr> <tr valign=top> <td width=112> <br />Фрагмент 02 <br /></td> <td width=553> <br /><b>Тип</b>(Тип среза) = Без изображения (no Image) <br /> <br /><b>Текст, отображаемый в ячейке</b>(Text displayed in cell) =Любая информация, например баннер, адрес и пр. <br /> <br /></td> </tr> <tr valign=top> <td width=112> <br />Фрагмент 03 <br /></td> <td width=553> <br /><b>Тип</b>(Тип среза) = Изображение(Image) <br /> <br /><b>Имя</b> = <i>menu_main</i> <br /></td> </tr> <tr valign=top> <td width=112> <br />Фрагмент 04 <br /></td> <td width=553> <br /><b>Тип</b>(Тип среза) = Изображение(Image) <br /> <br /><b>Имя</b> = <i>line_marker</i> <br /></td> </tr> <tr valign=top> <td width=112> <br />Фрагмент 05 <br /></td> <td width=553> <br /><b>Тип</b>(Тип среза) = Изображение(Image) <br /> <br /><b>Имя</b> = <i>line</i> <br /></td> </tr> <tr valign=top> <td width=112> <br />Фрагмент 06 <br /></td> <td width=553> <br /><b>Тип</b>(Тип среза) = Изображение(Image) <br /> <br /><b>Имя</b> = <i>line_end</i> <br /></td> </tr> <tr valign=top> <td width=112> <br />Фрагмент 07 <br /></td> <td width=553> <br /><b>Тип</b>(Тип среза) = Без изображения (no Image) <br /> <br /><b>Текст, отображаемый в ячейке</b>(Text displayed in cell) = Текст статьи <br /></td> </tr> <tr valign=top> <td width=112> <br />Фрагмент 08 <br /></td> <td width=553> <br /><b>Тип</b>(Тип среза) = Изображение(Image) <br /> <br /><b>Имя</b> = fotogal <br /></td> </tr> <tr valign=top> <td width=112> <br />Фрагмент 09 <br /></td> <td width=553> <br /><b>Тип</b>(Тип среза) = Изображение(Image) <br /> <br /><b>Имя</b> = partners <br /></td> </tr> <tr valign=top> <td width=112> <br />Фрагмент 10 <br /></td> <td width=553> <br /><b>Тип</b>(Тип среза) = Изображение(Image) <br /> <br /><b>Имя</b> = search <br /></td> </tr> <tr valign=top> <td width=112> <br />Фрагмент 11 <br /></td> <td width=553> <br /><b>Тип</b>(Тип среза) = Без изображения (no Image) <br /> <br /><b>Текст</b><b>, </b><b>отображаемый</b> <b>в</b> <b>ячейке</b>(Text displayed in cell) = Copyright <br /></td> </tr> </table> <br /> <br /> <br /><h2> Упражнение 4</h2> <br /><i>Автоматическая верстка в программе Adobe Photoshop</i> <br />В<img src="13.png" align=left hspace=12 width="563px" height="471px" border=0>ыполните команды <b>Файл</b> – <b>Сохранить для </b><b>web</b>. В диалоговом окне <b>Save</b> <b>For</b> <b>Web</b> при необходимости смените формат вывода изображений GIF на JPEG и установите приемлемое качество изображения для лучшего сжатия Quality. <p>В диалоговом окне <b>Save</b> <b>Optimized</b> <b>As</b> выберите папку <i><u>web</u></i> , <b>Тип файла</b> должен быть <b>HTML</b><b> и изображения(*.</b><b>html</b><b>)</b>(HTML and Images),<b> Имя файла</b> – index, <b>Setting</b> - Default Setting, <b>Slices</b> – Все фрагменты (All Slices). После нажатия на кнопку <b>Сохранить</b>, откройте свою папку web и посмотрите, какие новые файлы в этой папке появились в результате последней операции. </p> <p>Откройте также файл index.html в браузере и отметьте недостатки получившейся html-страницы( <br /><ol> <li> <br />вывод текста без отступа слева; <br /><li> <br />вывод текста не в начале, а в центре текущего раздела и поля меню; <br /><li> <br />черная полоса под названием текущего раздела; <br /><li> <br />увидим позже, что в процессе автоматической верстки был создан файл с русским названием). <br /></ol> <br />Если уже после автоматической верстки понадобилось внести изменения в изображения макета, внесите эти изменения, выделите инструментом <b>Выделение фрагмента </b>(Выбор фрагмента) <img src="11.png" align=bottom width="26px" height="22px" border=0> изменившийся фрагмент или группу фрагментов и командой <b>Save</b> <b>Optimized</b> <b>As</b> пересохраните нужные фрагменты. Только в окне <b>Save</b> <b>Optimized</b> <b>As</b> измените <b>Тип файла</b> на <b>Только изображения</b>(Images Only)<b>, </b> <b>Slices</b> – Выделенные фрагменты(Selected slices). <br /> <br /> <br /><h2> Упражнение 5</h2> <br /><i>Просмотр и изменение html-кода файла index.html стандартными средствами.</i> </p> <p>В программе IE (или в любом браузере) есть обязательно возможность просмотра html-кода. </p> <br /><ol> <li> <br />Выполните в IE команды <b>Вид</b> – <b>Просмотр</b> <b>HTML</b><b>- кода</b>. <br /><li> <br />В результате откроется программа <b>Блокнот</b>. В ней можно не только смотреть, но править. Измените тег <br /></ol> <br /><i><</i><i>titile</i><i>></i><i>index</i><i></</i><i>title</i><i>></i> <p>на <br /></p> <br /><i><titile>Краткое название образовательного учреждения

  1. Сохраните изменения (Файл - Сохранить) и закройте Блокнот

  2. В IE выполните «Обновить». Обратите внимание на изменившийся заголовок окна IE.

Упражнение 6


Установка html-редактора Smart Web Builder.
Внимание! Это упражнение можно выполнять только войдя в систему под именем пользователя, имеющим полномочия администратора.

Откройте папку Материалы для обр.сайта\web-editor\. Запустите файл SMB_1.4.exe (выберите двойным щелчком). Выполните рекомендации по установке программы.


Упражнение 7


Изучение html-кода файла index.html в HTML-редакторе Smart Web Builder, добавление комментариев.

  1. Запустите HTML-редактор Smart Web Builder. Откройте файл index.html в данной программе. Выясните назначение каждого тега исходного кода файла. Функциональное назначение любого тега можно посмотреть в Справочнике (верх. меню Справка - Справочники).

  2. Освойте просмотр этого файла внутри редактора (Кнопка Просмотр в нижней левой части окна и кнопка Код для возврата обратно к редактированию кода) и во внешнем браузере (верх. меню ПросмотрПросмотр во внешнем браузере (F9)).

  3. С помощью комментариев пометьте каждую строку главной таблицы типа

. Для этого вставьте новую строку с текстом комментария, например «1-я строка», выделите этот текст и выполните ПравкаЗакомментировать.

Внимание!

Если Вы выполняли рекомендации данных упражнений, у вас должно получиться 8 строк!


Упражнение 8


Перевод изображений из ячеек таблицы в фоновые изображения ячеек и выравнивание текста по вертикали в ячейках.
Во фрагментах 3 (меню сайта), 5 (вывод названия текущего раздела сайта), 8 (меню фотогалереи), 9 (список партнеров), 10 (место для формы поиска) (нумерация расставлена на рис.2) впоследствии должен быть внесен текст на изображения, находящиеся в этих ячейках. Поэтому сделаем эти изображения фоновыми в этих ячейках.


  1. Во второй строке главной таблицы (1-я ячейка) замените код




Тут будет текст меню
главной таблицы замените фиксированную ширину таблицы на width=”100%”.

  • Замените фиксированную ширину ячейки на width=”100%” или добавьте width=”100%” в тег


    1. Выделите содержимое этой ячейки (между тегами
    ) и примените команды HTML-теги - Теги текста. В открывшемся диалоговом окне выберите шрифт, цвет и размер шрифта, единицу размера (px) шрифта, выравнивание (Слева) и нажмите кнопку Вставить код (см. рисунок 4).

  • Обратите внимание, что в результате выделенный текст был заключен в теги



    Текст меню



    1. Вновь выделите тот же текст меню выберите кнопку Списки на панели инструментов, а затем кнопку Маркированный квадратами . Текст будет помещен в теги ненумерованного (маркированного квадратами) списка.



    1. Вставьте в каждую строчку меню тег <li>, его закрывать необязательно

    2. Код должен получиться следующим





    1. Чтобы список начинался ниже в ячейке, введем тег
      (вставляем новую строку) перед первым <li>.

    2. Посмотрите, что получилось с помощью кнопки Просмотр.

    3. Заключите весь список в тег <strong> strong>

    Упражнение 12


    Работа c названием текущего раздела.

    Продолжаем работать в html-редакторе Smart Web Builder.



    1. Вставьте во 2-ю строку 2-ю ячейку взамен находящегося там текста («Тут будет название текущего раздела») строку текста «Новости, анонсы мероприятий, постановления, решения педсовета» аналогично предыдущему упражнению.

    2. Заключите эту строчку в тег <strong> strong>

    Упражнение 13


    Теги заголовков

    -
    . Работа c текстом текущего раздела или статьи.

    1. Внесите в 3-ю строку 1-ю ячейку взамен находящегося там текста («Текст статьи…») содержимое файла D:\Материалы для сайта\ Texts\news.txt.

    2. Примените для всего текста команды HTML-теги - Теги текста (аналогично 11-ому упражнению). В открывшемся диалоговом окне выберите шрифт, цвет (лучше не черный, а темно-серый) и размер шрифта(например 11), единицу размера (px) шрифта, выравнивание (Слева) и нажмите кнопку Вставить код.

    3. Строки «Новости», «Объявления», «Постановления», «Решения педсовета» заключите в теги <h3>h3>, например <h3>Новостиh3>.

    4. Даты новостей заключите в теги <h5>h5>, например, <h5>4 июня 2007h5>.

    5. Посмотрите, что получилось с помощью кнопки Просмотр

    Примечание. Если текста много, рекомендуется разбивать его на абзацы тегом <p> и использовать в теге <div> атрибут align =”justify”, который задает выравнивание по ширине.

    Упражнение 14


    Вставка изображения (тег ). Вставка баннеров первую строку.

    1. Скопируйте из папки D:\Материалы для сайта\ Pictures\Banners в папку D:\web\images следующие четыре файла

    fiot.jpg

    ipk.jpg


    tstu.jpg

    uont.jpg



    1. Вставьте в 1-ю строку 2-ю ячейку взамен находящегося там текста («Любая информация, например баннер, адрес и пр.») эти изображения командами HTML-теги Изображения. Кнопкой найдите и выберите из папки D:\web\images файл fiot.jpg. Внесите альтернативный текст «Тамбовский региональный центр Федерации Интернет Образования» . Задайте горизонтальный отступ – 15. Задайте Границы0. Нажмите Вставить код. Разрешите вычисление относительного пути вместо абсолютного. В результате в коде появится новая строка


    тамбовский региональный центр федерации интернет образования


    1. Вставьте аналогично еще три изображения. После первых двух поставьте
      .

    Альтер. тексты для других изображений

    ipk.jpg - Тамбовский областной институт повышения квалификации

    tstu.jpg – Тамбовский государственный технический университет



    uont.jpg – Управление образования и науки Тамбовской области.
    Результат показан на рисунке 5

    Упражнение 15


    Создание гиперссылок на внутренние разделы сайта. Создание гиперссылки в главном меню


    1. Создайте файл (хотя бы пустой) school.html в папке D:\web\school.

    2. Выделите текст «О школе» во 2-й строке 1-ой ячейки.

    3. Выполните команды HTML-теги Ссылка.

    4. В диалоговом окне Вставить ссылку кнопкой выберите файл school.html из папки D:\web\school.

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

  • О школе

    1. Выберите Просмотр и посмотрите результат.



    Упражнение 16


    Создание гиперссылок на другие сайты .

    1. Теперь давайте на баннеры поставим соответствующие гиперссылки, т.е. чтобы при клике на баннере Центра Федерации Интернет Образования в новом окне открылся сайт Тамбовского регионального центра Федерации Интернет Образования (http://www.tambov.fio.ru)/ Аналогично и следующих баннерах.




    1. Выделите тег изображения полностью (того, которое должно быть гиперссылкой)



    тамбовский региональный центр федерации интернет образования


    1. Выполните команды HTML-теги Ссылка.

    В поле Адрес – укажите протокол http:// и адрес сайта www.tambov.fio.ru. В поле Target – значение аргумента target _blank – ссылка будет открываться в новом окне браузера. Выберите Вставить код.


    1. Проверьте полученный код. Аналогично можно поставить гиперссылки на остальные баннеры.



  • в следующих по порядку ячейках

    1-я строка, 2-я ячейка,

    2-я строка, 3-я ячейка,

    3-я строка, 1-я ячейка,

    7-я строка, 1-я ячейка,

    8-я строка, 4-я ячейка.
    В последней строке 4-й ячейке уберите фиксированную ширину в теге


    1. Посмотрите страницу во внешнем браузере (верх. меню ПросмотрПросмотр во внешнем браузере (F9)). Измените размеры окна браузера. Проверьте на масштабируемость страницу.

    Упражнение 10


    Переименование файлов с русскими именами, если таковые имеются, и внесение изменений в html-код.

    Русифицированный Adobe Photoshop CS2, к сожалению, формирует файл с русским именем «разделитель.gif». Чтобы не возникло проблем при публикации сайта, переименуйте этот файл, например, в файл space.gif и замените в коде html «разделитель.gif» на «space.gif» командами ПоискЗамена.


    Упражнение 11


    Теги html работы с текстом (теги <div>,<font, <br>,<strong>) и списками (<ul>,<ol>,<li>). Работа c меню.

    Продолжаем работать в html-редакторе Smart Web Builder.



    1. Вставьте во 2-ю строку 1-ю ячейку взамен находящегося там текста («Тут будет текст меню») содержимое файла D:\Материалы для сайта\ Texts\menu.txt.

    2. У нас должно получиться



    Главная

    О школе

    Документы

    Обучение

    Предметы

    Экзамены, ЕГЭ

    Учителя

    Ученики

    Контакты

    Расписание

    Успехи

    Для родителей

    Спонсоры

    Гостевая книга


    ipk.jpg

    Тамбовский областной институт повышения квалификации

    http://ipk.admin.tstu.ru

    tstu.jpg

    Тамбовский государственный технический университет

    http://www.tstu.ru

    uont.jpg

    Управление образования и науки Тамбовской области

    http://www.regadm.tambov.ru/oiv/obraz/

    Упражнение 17


    Создание гиперссылок на внутренние разделы сайта в главном меню
    Повторите упражнение 15 для других разделов сайта.

    Упражнение 18


    Работа с таблицами стилей CSS2. Создание внешних таблиц стилей в отдельном файле.

    1. Командами ФайлСоздать новый документ – Выбор двойным щелчком CSS создается новый документ, в котором определен селектор


    body{
    }

    Добавьте к селектору body атрибут color: blue. У Вас должно получиться



    body{

    color: blue.

    }
    Это означает, что текст, выводимый в документе без дополнительного переопределения будет синего цвета. Сохраните файл в папку web под именем style.css.

    1. Переключитесь в документ index.html и внесите на новой строке перед тегом head> следующий код




    Этот текст можно скопировать из файла D:\Материалы для обр.сайта\Texts\style1.txt

    1. Сохраните документ и проверьте появление синего текста при просмотре веб-страницы.




    1. Скопируйте содержимое файла D:\Материалы для обр.сайта\Texts\style2.txt в конец таблицы стилей style.css

    2. В результате в таблице стилей появится код




    td{

    background-repeat: repeat-x;

    }


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


    A{

    color:#E67000;

    text-decoration: none;

    }


    Гиперссылки будут цвета color:#E67000 (), текст гиперссылок без подчеркивания и какого-либо видоизменения

    A:hover{

    color: red;

    text-decoration: underline;

    }


    Данный псевдокласс обозначает, что при наведении мышью на гиперссылку ее цвет поменяется на красный и появится подчеркивание

    A:visited{

    color: #ad9d30;

    }

    Данный псевдокласс обозначает, что посещенная гиперссылка имеет другой цвет3 () во всех случаях

    1. Сохраните таблицу стилей, перейдите в документ index.html и посмотрите результат.



    Упражнение 19


    Работа с таблицами стилей CSS. Создание внутренних таблиц стилей в отдельных тегах.

    Зададим вертикальный отступ в верхнем меню (2-я строка 1-я ячейка главной таблицы). Внесите в тег <td> код style="padding-top: 20px;", уберите тег <br> в этой ячейке и посмотрите результат.


    Упражнение 20


    Работа с таблицами стилей CSS. Создание классов во внешних таблицах стилей.


    1. Скопируйте содержимое файла D:\Материалы для обр.сайта\Texts\style3.txt в конец таблицы стилей style.css

    2. Определенные свойства объектов (набор атрибутов) можно задавать в виде классов. Для вывода текста в панели «Фотогалерея » создадим класс PhotoGal , который представляет из себя следующее.




    .PhotoGal

    {

    color:#647184;
    font-family: Verdana;
    font-weight : bold;
    font-size:9px;
    margin-left:15px;



    margin-right:0px;



    margin-top:35px;



    text-transform : uppercase;

    }

    цвет текста


    гарнитура шрифта
    насыщенность шрифта,
    размер шрифта
    отступ слева
    отступ справа
    отступ сверху
    преобразование текста во все заглавные буквы

    Исходя из знания атрибутов (см. http://club-edu.tambov.ru/methodic/2007/po-web/pril/pril-2.html) такие классы обычно создаются подбором и визуальной оценкой выведенного на основе класса текста при просмотре.

    Чтобы применить этот класс, в 4-й строке 1-й ячейке главной таблицы файла index.html задайте вместо текста «Тут будет меню фотогалереи» задайте следующий код



    Вечер встреч выпускников 2007




    Последний звонок 2007




    1. Посмотрите результат. Попробуйте изменить цифровые значения атрибутов и посмотрите результат.

    В 5-й строке 1-й ячейке вместо текста «Тут будут гиперссылки на сайты партнеров» поставим в качестве партнера Тамбовский педагогический клуб с помощью кода:





    Тамбовский педагогический клуб


    Если нас не устраивают какие-либо параметры класса PhotoGal, а исправить его нельзя, так как он используется в другом месте, то подкорректируем применение данного класса указанием атрибута style="margin-top: 25px;".Тег div будет тогда иметь вид


    Тамбовский педагогический клуб




    1. Посмотрите результат

    1 Полужирным выделением приведены команды Adobe Photoshop версии CS, рядом в скобках аналогичная команда Adobe Photoshop версии 7.0.

    2 Справочные сведения о таблицах стилей CSS можно получить в учебно-методическом пособии «Применение современного программного обеспечения при разработке web-сайтов»
    http://club-edu.tambov.ru/methodic/2007/po-web/web/razdel-2_2_3.html

    http://club-edu.tambov.ru/methodic/2007/po-web/pril/pril-2.html


    3 Цифровое значение цвета можно получить с помощью команд редактора Smart Web Builder ИнструментыПодбор цвета, а также используя выбор цвета в Adobe Photoshop/