(div id=”wpapper”>). Текст был введен в теге
.
Далее, для того, чтобы этот текст был в рамках, был использован css. Использованный id был введен в css и к нему было применено форматирование для этих рамок:
#wpapper {
width: 300px; устанавливает ширину блочных элементов.
height: 100px; устанавливает высоту блочных элементов.
display: inline-block; определяет как элемент будет показан на сайте.
vertical-align: middle; выравнивает элемент по вертикале.
border: 2px solid red; ставит красные границы на блочный элемент.
overflow: auto; } управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных параметров.
Далее снова используется id, но уже для того, чтобы поставить отступы блока с текстом от рамок:
#wrapper p {
margin: 15px 5px 10px 20px;
padding: 15px;
text-align: center; }
Текст был выравнен по ширине при помощи свойства text-align:
#erapper > p:last-child {
margin-top: 20px;
padding: 5px 10px 5px 20px;
text-align: justify; }
Рисунок 62 Результат применения выравнивания, границ, отступов.
В следующем мини-сайте в html были введены теги
, это универсальный блочный элемент, который предназначен для группирования элементов и для них был задан атрибут class, который объединяет элементы со схожими параметрами.
Разберем .layer1 в css. Для этого блока было выполнено абсолютное позиционирование с помощью свойства position: absolute, теперь для left координаты отсчитываются от ближайшего позиционированного родителя. Желтый цвет был сделан при помощи свойства background. Далее было введено свойство margin, которое создает отступ.
Разберем .layer2 в css. Было введено свойство position, которое позволяет сдвигать элемент со своего обычного места, relative делает относительное позиционирование, далее с помощью свойств left и top был сдвинут блок. Далее было введены свойства margin и padding, они задают отступы. Далее было написана свойство border, оно задает рамку у блока с текстом и также была задана ширина рамки и ее цвет.
Далее были добавлены картинки в html, с помощью тега img и адрес файла с картинками с помощью атрибута src.
За то чтобы картинка становилась на передний план при наведении на них курсором отвечает псевдо-элемент :hover.
Рисунок 63 Вставка изображений, границ, заднего фона
Далее мы создали следующий сайт, посвященный бижутерии, за основу был взят первый сайт «Ракета». Основные изменение происходили в html.
Часть html была сделана подобным образом за исключением картинок, они были вставлены в таблице и в теге
был отформатирован их размер. Для начала мы также убрали все отступы, далее назначили ширину, отображение на середине и фон страницы таким же образом, но изменили цвета.
Далее сделали шапку так же, как и с ракетой, но только изменив цвет, название.
Меню сделано таким же образом, как и ракета, посещенные ссылки выполнены так же. В контекстной области был изменен только цвет. Свойства в изображениях слайдера и блок предложений остались, как и в предыдущем сайте. В подвале сайта изменился только цвет и текст, добавилась контактная информация.
4 3 2 1
Рисунок 64 Пример блочного сайта.
1. Шапка 2. Панель навигации 3. Основной контент 4. Подвал.
Далее была создана форма регистрации. Форма регистрации сделана в отдельном файле html, это было сделано для того чтобы можно было переключаться между вкладками на сайте.
Первым делом убираем отступы:
* { margin: 0;
padding: 0;
outline: none; }
nav, nav ul {
list-style-type: none; } отменяет маркеры для списка.
nav {
height: 30px; была выставлена высота.
background-color: #666; был установлен красный цвет.
padding-left: 1px; устанавливает значение поля левого края содержимого элемента.
min-width: 470px; } устанавливает минимальную ширину элемента.
nav li {
float: left; выравнивает элемент по левому краю, а все остальное элементы обтекают его по правой стороне.
position: relative; выставляет относительное позиционирование.
height: 100%; } выставляет высоту на 100%.
nav li a {
display: block; элемент показывается как блочный.
padding: 6px; задает величину поля.
width: 100px; задает ширину.
color: #fff; был выставлен белый цвет.
text-decoration: none; отменено подчеркивание ссылок.
text-align: center; } текст выравнен по центру.
nav ul li {
float: none; } обтекание элемента не задается.
nav li:hover {
background-color: rgb(145, 145, 145); } был выбран цвет.
nav ul li:hover {
background-color: #666; } был выбран красный цвет.
nav ul {
display: none; добавлен для того, чтобы страница воспринимала элемент, словно его не существует.
background-color: grey; был выставлен серый цвет.
position: absolute; было выставлено абсолютное позиционирование.
top: 100%; } выставляет позиционирование от верхнего родительского края до верхнего дочернего края на 100%.
nav li:hover ul {
display: block; } элемент показывается как блочный.
table {
border: 1px; выставляет границы рамки.
margin: auto; } устанавливает величину отступа от каждого края элемента автоматически.
fieldset {
text-align: justify; } текст выравнен по ширине.
3 2 1
Рисунок 65 Пример формы регистрации.
1. Шапка 2. Панель навигации 3. Форма регистрации.
После формы регистрации, подобным образом была сделана форма для отзывов.
Все файлы html подключены к одному файлу css, потому свойства у них у всех одинаковые, меняется только html.
Переключение между вкладок происходит благодаря тегу с атрибутом href.
Заключение Учебная практика помогла мне закрепить навыки, полученные во время обучения. В ходе прохождения учебной практики мною была достигнута основная её цель формирование практических профессиональных умений, приобретение первоначального практического опыта по общим и профессиональным компетенциям предусмотренными при изучении ПМ 01. В частности ПК 1.1 – обрабатывать статический информационный контент, ПК 1.6 ввод и обработка текстовых данных, ПК 1.9 – размещение информации на сайте, ОК 1 – понимание сущности и социальной значимости своей будущей профессии, проявление к ней устойчивого интереса, ОК 2 – организация собственной деятельности, определение методов и способов выполнения профессиональных задач, оценка их эффективности и качества, ОК 3 – решение проблем, оценивание риски и принимать решения в нестандартных ситуациях, ОК 4 – осуществление поиска, анализа и оценки информации, необходимой для постановки решения профессиональных задач, профессионального и личностного развития, ОК 5 – использование информационно-коммуникационных технологий для совершенствования профессиональной деятельности, ОК 6 – работать в коллективе и команде, обеспечивать её сплочение, эффективно общаться с коллегами, руководством, потребителями, ОК 7 – ставить цели, мотивировать деятельность подчинённых, организовывать и контролировать их работу с принятием на себя ответственности за результат выполнения заданий, ОК 8 – самостоятельно определять задачи профессионального и личностного развития, заниматься самообразованием, осознанно планировать повышение квалификации, ОК 9 – быть готовым к смене технологий в профессиональной деятельности, ОК 10 – исполнять воинскую обязанность, в том числе с применением полученных профессиональных знаний.
Список используемых источников -
Рудикова Л.В. Microsoft Word для студента; БХВ-Петербург – М.,2006.-400с.
-
Долженков, Виктор Microsoft Excel 2002. Наиболее полное руководство/ Виктор Долженков, Юлий Колесников. – М.; БХВ-Петербург – М., 2017.-239 с.
-
Джелен Сводные таблицы в Microsoft Excel / Джелен, Александер Билл; , Майкл. - М.: Вильямс, 2012. - 320 c
-
Шмелева А. Г., Ладынин А. И. Информатика. Информационные технологии в профессиональной деятельности: Microsoft Word. Microsoft Excel: теория и применение для решения профессиональных задач. М.: ЛЕНАНД, 2020. 304 с.
-
Дакетт, Д. HTML и CSS. Разработка и дизайн веб-сайтов (+CD) / Д. Дакетт. - Москва: Высшая школа, 2017. - 480 c.
-
Дронов, Владимир HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов / Владимир Дронов. - М.: БХВ-Петербург, 2018. - 738 c.
-
Фрейен, Бен HTML5 и CSS3.Разработка сайтов для любых браузеров и устройств / Бен Фрейен. - М.: Питер, 2020. - 304 c.
-
Гончаров, Алексей Самоучитель HTML / Алексей Гончаров. - М.: Питер, 2000. - 240 c.
-
Петюшкин, А. HTML в Web-дизайне / А. Петюшкин. - М.: Книга по Требованию, 2004. - 400 c.
|