Файл: Основы программирования на языке HTML (Техническое задание).pdf
Добавлен: 01.04.2023
Просмотров: 250
Скачиваний: 2
line-height: 100%;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
@font-face {
font-family: 'Lobster13Regular';
src: url('Lobster_1.3-webfont.eot');
src: url('Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'), url('Lobster_1.3-webfont.woff') format('woff'), url('Lobster_1.3-webfont.ttf') format('truetype'), url('Lobster_1.3-webfont.svg#Lobster13Regular') format('svg');
font-weight: normal;
font-style: normal;
}
body {
background: #f5f0e0 url(../images/noise.png);
font-family: Century Gothic, sans-serif;
color: #252525;
font-size: 14px;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.10);
}
h1 {
font-size: 50px;
}
h2 {
font-size: 45px;
}
h3 {
font-size: 40px;
}
h4 {
font-size: 35px;
}
h5 {
font-size: 30px;
}
h6 {
font-size: 25px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Lobster13Regular', cursive;
color: #9c5959;
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
font-weight: normal;
}
a {
color: #9c5959;
text-decoration: none;
border-bottom: 1px dotted #9c5959;
}
.pikachoose a, #fancybox-close, .fancyimage {
border-bottom: 0px dotted #9c5959;
}
.clear {
clear: both;
}
.left {
float: left;
margin-right: 10px;
}
.right {
float: right;
margin-left: 10px;
}
.title {
font-family: 'Lobster13Regular', cursive;
font-size: 80px;
float: left;
-webkit-transition: all .20s ease-out;
-moz-transition: all .20s ease-out;
-o-transition: all .20s ease-out;
-ms-transition: all .20s ease-out;
transition: all .20s ease-out;
}
.title:hover {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(156, 89, 89,.1), 0 0 5px rgba(156, 89, 89,.1), 0 1px 3px rgba(156, 89, 89,.3), 0 3px 5px rgba(156, 89, 89,.2), 0 5px 10px rgba(156, 89, 89,.25), 0 10px 10px rgba(156, 89, 89,.2), 0 20px 20px rgba(156, 89, 89,.15);
-webkit-transition: all .20s ease-out;
-moz-transition: all .20s ease-out;
-o-transition: all .20s ease-out;
-ms-transition: all .20s ease-out;
transition: all .20s ease-out;
}
.tagline {
font-family: 'Lobster13Regular', cursive;
clear: both;
font-size: 27px;
float: left;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.10);
}
.intro {
float: left;
width: 500px;
}
.reservations {
float: right;
width: 200px;
font-family: 'Lobster13Regular', cursive;
font-size: 20px;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.10);
text-align: center;
color: #9C5959;
}
.reservations-title {
font-size: 27px;
}
.hr-solid {
border: 0;
border-bottom: 1px solid #9c5959;
margin: 2px;
}
.hr-dashed {
border: 0;
border-bottom: 1px dotted #9c5959;
margin: 2px;
}
.button {
font-family: 'Lobster13Regular', cursive;
color: #f5f5f5;
padding: 8px 14px 10px;
background-color: #9c5959;
border: none;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0px -3px 1px rgba(0, 0, 0, 0.45), 0px 2px 2px rgba(0, 0, 0, 0.25);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
-moz-text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
text-decoration: none;
font-size: 20px;
}
.reservations .button {
padding: 4px 47px 9px;
}
.button:active {
position: relative;
top: 3px;
-webkit-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
-moz-box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
box-shadow: inset 0px -3px 1px rgba(255, 255, 255, 1), inset 0 0px 3px rgba(0, 0, 0, 0.9);
}
.button:active:after {
content: "";
width: 100%;
height: 3px;
background: #fff;
position: absolute;
bottom: -1px;
left: 0;
}
.date {
float: left;
position: relative;
margin-right: 10px;
padding: 44px 5px 0;
color: #9c5959;
}
.date .month {
text-transform: uppercase;
font-size: 25px;
}
.date .day {
font-size: 35px;
line-height: 45px;
position: absolute;
left: 5px;
top: 0;
}
.date .year {
display: block;
position: absolute;
right: -5px;
top: 15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#container {
background: url(../images/bg.png) center top repeat-x;
width: 960px;
margin-left: auto;
margin-right: auto;
}
ul#nav {
font-family: 'Lobster13Regular', cursive;
width: 1000px;
margin: 0 auto;
text-align: center;
overflow: hidden;
font-size: 22px;
letter-spacing: 1px;
}
ul#nav li {
float: left;
list-style: none;
}
ul#nav li a {
letter-spacing: 2px;
display: block;
width: 95px;
height: 85px;
padding: 65px 0 0 0;
margin: 0 32px 0 32px;
color: #9c5959;
text-decoration: none;
background: url(../images/label.png) 0 -149px no-repeat;
-webkit-transition: all .20s ease-out;
-moz-transition: all .20s ease-out;
-o-transition: all .20s ease-out;
-ms-transition: all .20s ease-out;
transition: all .20s ease-out;
border-bottom: 0px dotted #9c5959;
}
ul#nav li a:hover, ul#nav li .current {
background: url(../images/label.png) 0 0 no-repeat;
color: #eee9d9;
-webkit-transition: all .20s ease-out;
-moz-transition: all .20s ease-out;
-o-transition: all .20s ease-out;
-ms-transition: all .20s ease-out;
transition: all .20s ease-out;
}
.border {
height: 3px;
border-top: 1px solid #9c5959;
border-bottom: 1px dashed #9c5959;
}
.border2 {
height: 3px;
clear: both;
border-bottom: 1px solid #9c5959;
border-top: 1px dashed #9c5959;
}
.border3 {
height: 3px;
clear: both;
border-bottom: 1px dotted #9c5959;
}
.wrapper {
margin-top: 30px;
}
p {
font-size: 14px;
font-family: Century Gothic, sans-serif;
padding: 10px;
}
article {
width: 630px;
float: left;
padding: 10px;
border-right: 1px dashed #9c5959;
}
.fullwidth {
border-right: 0px dashed #9c5959;
width: 960px;
}
.sidebar {
width: 280px;
height: 100%;
float: right;
padding: 10px;
}
aside h3, .footer-widget h4 {
text-align: center;
}
.home-widget, .footer-widget {
width: 310px;
float: left;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 10px;
text-align: left;
}
.content-widget, .content-menu {
margin-right: 10px;
margin-bottom: 50px;
}
.home-widget h3 {
text-align: center;
margin-bottom: 10px;
}
.content-widget h1, .content-menu h1 {
text-align: center;
margin-bottom: 10px;
}
.home-widget img {
background: #9C5959;
padding: 1px;
margin-left: 4px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.50);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.50);
box-shadow: 0 0 4px rgba(0,0,0,0.50);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.pikachoose img, article img, aside img {
background: #9C5959;
padding: 1px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.50);
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.50);
box-shadow: 0 0 4px rgba(0,0,0,0.50);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.noeffects {
background: none;
padding: 0;
margin-left: 0;
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0.50);
-moz-box-shadow: 0 0 0 rgba(0,0,0,0.50);
box-shadow: 0 0 0 rgba(0,0,0,0.50);
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
Среды разработки
Среда разработки – это платформа для создания HTML документа. Первый HTML документ был создан в простом тестовом редакторе, то есть в блокноте. Имея установленный блокнот, Вы уже можете создать HTML документ, используя основные теги. Но писать в ручную все теги и всю информацию для отображения долго и для упрощения создания документов HTML были придуманы специальные среды разработки, это как усовершенствованные блокноты, так и отдельные программы. Естественно самым главным инструментом в разработке HTML документов останется блокнот. Рассмотрим на сегодняшний день самые популярные среды создания HTML документов.[3]
Блокнот – самая первая и самая популярная среда разработки для HTML документов. Блокнот полностью адаптирован для написания кода. В настоящее время есть множество других блокнотов, которые были усовершенствованы и целенаправлены на создание HTML документов и WEB страниц.
Edit Plus - является одним из лучших представителей этого класса программ. Поддерживает авто в ставку тегов, подсветку синтаксиса и много чего ещё. Великолепный инструмент для профессиональной разработки.
Macromedia HomeSite - редактор HTML/XML.
NOTEPAD++ - не ориентирован на разработку web-страниц, но подсвечивает синтаксис умеет.
QuantaPlus - тоже достаточно хороший редактор HTML кода. В linux используется чаще всего именно его. Хорошая реализация, поддержка подключаемых модулей.
BlueFish - Редактор с подсветкой синтаксиса для linux. Поддерживает DNS, PHP, HTML, CSS и т.п. Есть примеры готовых решений и инструменты проверки кода.
После блокнота идут уже программные среды, то есть уже визуальная программа, дающая возможность визуально видеть, управлять и изменять необходимые вам параметры. То есть в обычном написании мы можем взять теги и начать составлять HTML документ, а в данной специальной среде мы уже видим визуально какой объект, и может редактировать его «мышкой». Сама задумка данных сред очень полезна для будущего, она экономит время, а так же помогает нам перейти на новый уровень создания HTML документов. Ну конечно же, у этих сред есть и минусы, к таким минусам относятся то, что мы не сможем корректировать уже готовые элементы, которые мы выставляем на страницу. То есть, нам предоставляется уже готовые элементы, будто элемент таблицы или определенное вставки для картинки, они нам даётся в таком виде в каком были созданы изначально, редактировать их мы не сможем. [3]
Описание создания сайта "Кондитерская"
Сайт – это электронная страница, активная страница, то есть активный HTML документ. Сайт содержит в себе не только язык HTML, но и другие языки для активного или «живого» сайта. Приступая к созданию сайта, как и к созданию программы, всегда необходимо собрать информацию. Информацию о том, что требуется, как хотят видеть заказчики и т.д., а так же необходима и техническая информация, например: наименования, если это продажа то и стоимость. Так же клиент попросил сохранить в тайне информацию о заведении и об изделиях. Поэтому попросил представить в виде шаблона.[1,2]
Для написания полноценного сайта, одного языка HTML не достаточно, потому необходимо будет добавить немного PHP, JavaScript, и немного внешней стилистики CSS. [11]
И так, нам поступил заказ, на создание сайта для кондитерской, которая называется условно «Кондитерская». Заказчик предоставил всю необходимую информацию, теперь начнем основывать техническое задание.
Техническое задание
Для создания сайта необходимо составить план построения и написания сайта. План необходимо составлять исходя из предоставленных данных и пожеланий заказчика.
Сайт будет состоять из 6 страниц HTML документов, которые связаны между собой. Каждая страница предоставляет определенную информацию. Каждая страница имеет свое название. Так же присоединен специальный стиль CSS и JavaScript.
Каждая из страниц будет содержать анимацию и ссылки на другие страницы. Как и всегда первая страница будет иметь название Index[1]. Рассмотрим каждую страницу и их примерное содержание:
Index – это главная страница, на которой будет содержаться основная информация, такая как называние кондитерской, самые популярные блюда и их стоимость, а так же контактный телефон. Этой информации на первой странице достаточно. Она хорошо даст понять с какой целью создан этот и сайт и сразу покажет пользователю все преимущества кондитерской и даст ориентир на все остальное. Так же, как и на всех страницах, будет содержаться навигационное меню между всеми страницами.
About – это следующая страница, дословный перевод как «о нас», то есть эта страница содержит всю информацию о кондитерской, а именно небольшую историю, когда была основана, чем занимается, сколько уже лет на рынке, и самые лучшие отзывы.
Menu – название этой страницы говорит само за себя, дословный перевод как «Меню». На этой странице мы отобразим специальный перечень кондитерских изделий, их цены, примерное время приготовления а так же их состав, и примерное время доставки, так как у нас так же имеется доставка.
Gallery – эта страница для галереи, то есть ее дословный перевод так и есть. Здесь у нас будет просто фотографии кондитерских изделий , продуктов, а может быть и коллектива, который занимается готовкой данных произведений.
Reviews – это следующая страница, дословный перевод которой «Отзыв». Эта страница нацелена на отзывы, которые будет оставлять клиенты и пользователи сайта, отзывы могут быть как положительные, так и отрицательные.
Contact – страница которая дословно переводится как «Контакты», и естественно вы уже понимаете что будет содержаться на этой странице. Здесь будет номера, по которым мы сможем связаться с кондитерской, подробный адрес всех магазинов или одного магазина, а так же вы можете оставить свои контактные данные и задать вопрос, что бы с вами связались.
Теперь необходимо разобраться в цветовой гамме, как именно будет сочетаться цвет. Сам клиент проявил желание что бы цвета были нежные и желательно побольше розового контента, исходя из этих данных, основной фон будет розово-фиолетового цвета, шрифт будет темно розового цвета, активные кнопки будет носить такой же цвет.
Так же в наш сайт будут входить определенные картинки, которые будут содержаться на странице, отображают они разный контент. Содержаться они будут в отдельной папке, в самой странице мы пропишем к ним путь.
CSS – это язык визуального оформления сайта, написанный на языке HTML. Он содержит в себе основные теги, которые могут менять цвет, шрифт и другие визуальные параметры. Для создания этого инструмента, необходимо отдельное пространство. Поэтому создается отдельная папка, туда помещаются отдельные свойства, то есть файл с дизайнами шрифтов, стилей и т.д. Как правило такая папка называется styles.[3]
Выполнение технического задания
Итак, у нас будет 6 HTML документов, которые связаны между собой. Это index, menu, gallery, contact, about, reviews.
Index – это главная страница, от нее будут идти основные понятия. Рассмотрим синтаксис.
Страница Index:
Первый блок, блок HEAD
<head> ( Парный тег, который открывает первый блок)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> (Этот тег не отображается, но имеет очень большое значение для документа. Он обозначает кодировку символов на странице и обозначает вид контента.)
<title>CONFECTIONERY</title> (Этот тег отображаемый, но отображаться он будет только в наименовании страницы. То есть наш сайт называется кондитерская)[9]