Создание документа

Июль 25, 2022

Главная
Информатика
Создание документа

Содержание

2. ЦЕЛЬ ! !
3. Создаем документ Создаем документ index.html. Сохраняем его в созданную папку sinorka: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> Sinorca 2.0 2.
4. Формируем дополнительную навигацию 3. Элементы верхней строки (на голубом фоне) можно объединить в div. Т.к. этот
5. Оформляем заголовок 5. Заголовок «Sinorca 2.0» будет помещен в отдельный div Sinorca 2.0 #sinorca { background-color:
6. Формируем главное меню 6. Элементы главного меню (на синем фоне) можно объединить в div. Его параметры
7. Оформляем заголовок Ответить на вопрос: каким образом добавить к ссылкам главного меню смену цвета при наведении
8. Формируем колонку меню слева 8. Страница имеет двухколоночную верстку. В этом случае левая колонка (меню) должна
9. Формируем колонку меню слева 10. Заполняем текстом блоки левой колонки Navigate this page > Introduction >
10. Формируем колонку меню слева 1. Получите вид такой, как на рисунке выше. 2. Требуются еще доработки.
11. Формируем колонку меню слева
12. Формируем колонку меню слева Обратите внимание, что в последнем блоке ссылки выглядят иначе (и ведут себя
13. Формируем колонку меню слева .bgrey a:hover { color: #000; background-color: #fff; border-top: 1px solid #999999; border-bottom:
14. Формируем область контента 12. Контент заключим в отдельный div 13. Рассмотрим первый блок (заголовок и три
15. Формируем область контента Добавляем абзацы первого блока (текст и адреса ссылок взять из файла .txt) Introduction
16. Формируем область контента Добавляем заголовок второго блока (появляется ссылка «Наверх страницы») … ^ TOP Improved cross-browser
17. Формируем область контента Добавляем абзацы второго блока (текст и адреса ссылок взять из файла .txt) …
18. Формируем область контента Добавляем абзац третьего блока (текст взять из файла .txt). Заголовок – аналогично заголовку
20. Скачать презентацию

Слайд 2

ЦЕЛЬ
!
!

Слайд 3

Создаем документ
Создаем документ index.html. Сохраняем его в созданную папку sinorka:

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Sinorca 2.0

2. Создаем стилевой файл style_sinorca.css и описываем стили элемента body:
body {
margin: 0;
padding: 0;
font-family: Verdana;
}

Слайд 4

Формируем дополнительную навигацию
3. Элементы верхней строки (на голубом фоне) можно объединить

в div. Т.к. этот div имеет одинаковый фон с заголовками в контенте, применим класс (light_blue). Для индивидуальных настроек верхнего div-a применим id (head_div):

4. Внутрь div-a поместим блок ссылок 3-7 и отдельно ссылки 1 и 2:

Link 3 |
Link 4 |
Link 5 |
Link 6 |
Link 7

Link 1 |
Link 2

Ответить на вопросы:

почему в данном случае блок ссылок 3-7 записан раньше, чем ссылки 1 и 2?

Слайд 5

Оформляем заголовок
5. Заголовок «Sinorca 2.0» будет помещен в отдельный div

id=“sinorca”>Sinorca 2.0

#sinorca {
background-color: #8caae6;
font-size: 30pt;
color: #274e90;
padding: 0.1em 0.4em;
}

Сохраните файлы и просмотрите отображение в браузерах

Слайд 6

Формируем главное меню
6. Элементы главного меню (на синем фоне) можно объединить

в div. Его параметры уникальны, поэтому используем id (main_menu).

7. Внутрь div-a поместим ссылки:

Home |
Sinorca 2.0 |
Other |
Header |
Links

#main_menu {
background-color: #003399;
color: #fff;
font-size: 8pt;
padding: 0.6em 0.8em;
}
#main_menu a {
font-weight: bold;
}

Ссылки главного меню - белого цвета и не имеют подчеркивания, аналогично #right_points a, #head_div a => добавим селектор ссылок главного меню к указанным выше через запятую:
#right_points a, #head_div a, #main_menu a {
color: #fff;
text-decoration: none;
}

Слайд 7

Оформляем заголовок
Ответить на вопрос:
каким образом добавить к ссылкам главного меню смену

цвета при наведении мыши?

Сохраните файлы и просмотрите отображение в браузерах

Слайд 8

Формируем колонку меню слева
8. Страница имеет двухколоночную верстку. В этом случае

левая колонка (меню) должна иметь фиксированную ширину, а основная часть справа – занимать все остальное место.
Измеряем ширину меню в Photoshop – 170px. Блок имеет правую границу

9. Меню разделено на 4 блока по вертикали (два на сером фоне, по одному на белом и сером). Они имеют нижнюю границу. Поместим 4 блока внутрь div-a left_menu:

#left_menu {
width: 170px;
font-size: 8pt;
float: left;
border-right: 1px solid #999999;
}

Слайд 9

Формируем колонку меню слева
10. Заполняем текстом блоки левой колонки

Navigate this

page
> Introduction
> Cross-browser
> Stylesheets
> Accessability

Sample menu

> Sidebar
> Links
> Go
> Here
> Submit comments

Alternative stylesheet

Sinorca contains an alternative ...

To view the alternative stylesheet in (certain) Gecko-based browsers, select Sinorca (alternative) from the View > Use Style submenu.

Validation

Validate the XHTML and
CSS of this page.

Слайд 10

Формируем колонку меню слева
1. Получите вид такой, как на рисунке выше.

2. Требуются еще доработки. Далее запишем стили для элементов (ссылок, заголовков, абзацев, span-ов), которые находятся внутри .bgrey и #bwhite

Слайд 11

Формируем колонку меню слева

Слайд 12

Формируем колонку меню слева
Обратите внимание, что в последнем блоке ссылки выглядят

иначе (и ведут себя при наведении иначе), чем в первых двух блоках. Они не должны занимать всю строку. Применим к последнему серому блоку id noblock.

Validation

Validate the XHTML and
CSS of this page.

Опишите стили для этих ссылок

#noblock a, #noblock a:hover{
display: inline; - преобразуем назад в инлайновый элемент
border: 0;
padding-right: 0;
background: transparent;
}

Слайд 13

Формируем колонку меню слева
.bgrey a:hover {
color: #000;
background-color: #fff;
border-top: 1px solid #999999;
border-bottom:

1px solid #999999;
}

11. Добавляем смену фона, цвета текста и появление границ при наведении на ссылки слева

Ответить на вопрос:

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

Слайд 14

Формируем область контента
12. Контент заключим в отдельный div

13. Рассмотрим первый

блок (заголовок и три абзаца). Заголовок имеет такой же фон и отступы, как верхняя строка (дополнительное меню). Применим тот же класс light_blue. Кроме того, есть и особенности (жирный шрифт и др.) Т.к. заголовков несколько, применим еще один класс (cont) и запишем имена классов через пробел

Introduction

.cont {
color: #fff;
font-weight: bold;
font-size: 8pt;
}
+ применить правила для .light_blue

#main_content {
margin-left: 170px;
padding: 40px 20px;
}

Слайд 15

Формируем область контента
Добавляем абзацы первого блока (текст и адреса ссылок взять

из файла .txt)

Introduction

This is …original design I submitted to OSWD in January 2003. Following is a summary of the major differences between this version and the original.

Sinorca … Acronis, a USA-based computer software company. This template is marked up in XHTML 1.0 Strict and styled with CSS… The design does not use any tables (unlike the design’s inspiration) resulting in greater design flexibility and cleaner code.

I hope …e-mail me your site’s URI.

#main_content p {
font-size: 8pt;
margin: 0;
padding: 1em 0.5em;
line-height: 1.5em;
text-align: justify;
}

+ класс .dots

Слайд 16

Формируем область контента
Добавляем заголовок второго блока (появляется ссылка «Наверх страницы»)

…

^ TOP
Improved cross-browser compatibility

Слайд 17

Формируем область контента
Добавляем абзацы второго блока (текст и адреса ссылок взять

из файла .txt)

…

^ TOP Improved cross-browser compatibility

I did not test version one of Sinorca in Opera before submitting it to OSWD. As a result, the original does not render properly in that browser. In contrast, this version of Sinorca has been fully tested in Opera (7.01), Gecko (Mozilla 1.3) and Internet Explorer (6.0) for consistent rendering.

This means that people using standards-compliant browsers will see the same format and layout of your page.

Слайд 18

Формируем область контента
Добавляем абзац третьего блока (текст взять из файла .txt).

Заголовок – аналогично заголовку второго блока

…

^ TOP Modified stylesheets

More comprehensive screen stylesheet

The improved cross-browser consistency…

* еще два абзаца третьего блока добавить аналогично

.left_moved {
width: 96%;
float: right;
text-indent: -20px;
}
делаем абзацы более узкими
смещаем их вправо
первая строка выступает ВЛЕВО на 20рх

Создание документа

Содержание

ЦЕЛЬ!!

Создаем документСоздаем документ index.html. Сохраняем его в созданную папку sinorka:

Формируем дополнительную навигацию3. Элементы верхней строки (на голубом фоне) можно объединить

Оформляем заголовок5. Заголовок «Sinorca 2.0» будет помещен в отдельный div

Формируем главное меню6. Элементы главного меню (на синем фоне) можно объединить

Оформляем заголовокОтветить на вопрос:каким образом добавить к ссылкам главного меню смену

Формируем колонку меню слева8. Страница имеет двухколоночную верстку. В этом случае

Формируем колонку меню слева10. Заполняем текстом блоки левой колонкиNavigate this

Navigate this

Sample menu

Alternative stylesheet

Validation

Формируем колонку меню слева1. Получите вид такой, как на рисунке выше.

Формируем колонку меню слева

Формируем колонку меню слеваОбратите внимание, что в последнем блоке ссылки выглядят

Validation

Формируем колонку меню слева.bgrey a:hover {color: #000;background-color: #fff;border-top: 1px solid #999999;border-bottom:

Формируем область контента12. Контент заключим в отдельный div13. Рассмотрим первый

Формируем область контентаДобавляем абзацы первого блока (текст и адреса ссылок взять

Формируем область контентаДобавляем заголовок второго блока (появляется ссылка «Наверх страницы»)

Формируем область контентаДобавляем абзацы второго блока (текст и адреса ссылок взять

Формируем область контентаДобавляем абзац третьего блока (текст взять из файла .txt).

Похожие презентации

ЦЕЛЬ
!
!

Создаем документ
Создаем документ index.html. Сохраняем его в созданную папку sinorka:

Формируем дополнительную навигацию
3. Элементы верхней строки (на голубом фоне) можно объединить

Оформляем заголовок
5. Заголовок «Sinorca 2.0» будет помещен в отдельный div

Формируем главное меню
6. Элементы главного меню (на синем фоне) можно объединить

Оформляем заголовок
Ответить на вопрос:
каким образом добавить к ссылкам главного меню смену

Формируем колонку меню слева
8. Страница имеет двухколоночную верстку. В этом случае

Формируем колонку меню слева
10. Заполняем текстом блоки левой колонки

Navigate this

Формируем колонку меню слева
1. Получите вид такой, как на рисунке выше.

Формируем колонку меню слева
Обратите внимание, что в последнем блоке ссылки выглядят

Формируем колонку меню слева
.bgrey a:hover {
color: #000;
background-color: #fff;
border-top: 1px solid #999999;
border-bottom:

Формируем область контента
12. Контент заключим в отдельный div

13. Рассмотрим первый

Формируем область контента
Добавляем абзацы первого блока (текст и адреса ссылок взять

Формируем область контента
Добавляем заголовок второго блока (появляется ссылка «Наверх страницы»)

Формируем область контента
Добавляем абзацы второго блока (текст и адреса ссылок взять

Формируем область контента
Добавляем абзац третьего блока (текст взять из файла .txt).