Файл: Основы программирования на языке. HTML.pdf

Скачать файл (1,03Мб)

Заказать решение

ВУЗ: Не указан

Категория: Курсовая работа

Дисциплина: Не указана

Добавлен: 25.04.2023

Просмотров: 24

Скачиваний: 2

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Заключение

Список использованной литературы:

Заключение

За web однозначно будущее, в данный момент единственная сложность при работе с ним, это необходимость использовать ряд библиотек или инструментов, помогающих адаптировать код, чтобы итог выглядел одинаково в любом браузере, в том числе морально устаревшем.

Список использованной литературы:

Jennifer Robbins “Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript and Web Graphics”, 2018
David Sawyer McFarland “CSS: The Missing Manual”, 2015
Keith J. Grant “CSS in Depth”, 2018
Terry Felke-Morris “Web Development and Design Foundations with HTML5”, 2018
Jon Duckett “HTML & CSS and JavaScript & JQuery”, 2014
Eric A. Meyer “CSS Pocket Reference: Visual Presentation for the Web”, 2018
Marjin Haverbeke “Eloquent JavaScript, 3^rd edition”, 2018
Kyle Simpson “You Don’t Know JS”, 2015
Steve Krug “Don`t make me think”, 2014
Elizabeth Robson “Head First HTML and CSS: A Learner`s Guide to Creating Standarts-Based Web Pages”, 2012
Jon Duckett “HTML & CSS: Design and Build Websites”, 2014
Jullie C. Meloni “HTML, CSS, and JavaScript All in One”, 2015

Приложения

Приложение 1

Index.html

<!doctype html>

<head>

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<title>Storm</title>

</head>

<body>

</a>

</a>

</a>

</div>

<div class="scr">Услуги</div>

<div class="scr">Портфолио</div>

<div class="scr">Контакты</div>

</div>

<h1>создание сайтов</h1>

<h2>именно так, как вы этого хотите</h2>

<div class="get-started">Начать работу</div>

</div>

</section>

<h1>Услуги</h1>

</div>

<web-comp></web-comp>

</section>

<h1>Портфолио</h1>

</div>

</section>

</div>

</body></html>

Приложение 2

Style.css

@import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700&display=swap');

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

html {

font-size: 0.9vw;

}

body {

font-family: 'Montserrat Alternates', sans-serif;

color: #fff;

background-color: #000;

overflow: hidden;

}

.src-area {

width: 100%;

height: 100vh;

}

section {

width: 100%;

height: 100vh;

transition: transform 1.2s;

}

section:nth-child(1) {

background: url('first.png') no-repeat center / cover;

}

section:nth-child(2) {

background: url('sec.png') no-repeat center center / cover;

}

section:nth-child(3) {

background: url('third.png') no-repeat center center / cover;

}

.flex-side {

position: absolute;

right: 2vw;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

z-index: 1;

}

.side {

display: block;

}

.line {

width: 1vw;

height: 4vw;

margin: 2vw 0;

cursor: pointer;

display: flex;

justify-content: center;

align-items: center;

}

.stick {

background-color: #aeaeae;

height: 100%;

width: 25%;

}

.header {

display: flex;

justify-content: space-between;

width: 100%;

}

.logo {

margin: 6.5vh 0 0 6.7vw;

height: 100px;

}

.nav {

margin: 6.5vh 6.7vw 0 0;

height: 100px;

width: 30%;

display: flex;

align-items: center;

justify-content: space-between;

font-weight: 700;

font-size: 1.3rem;

}

.scr {

cursor: pointer;

transition: .2s all;

}

.scr:hover {

border-bottom: #fff solid 0.2rem;

padding: 0 0 .2rem;

}

.offer {

margin-top: 28vh;

text-align: right;

display: flex;

justify-content: center;

align-items: center;

}

.wrapper {

text-align: right;

font-weight: 700;

}

.offer h1 {

margin: auto;

font-size: 8rem;

text-transform: uppercase;

text-align: right;

}

h2 {

font-size: 3rem;

}

.get-started {

font-size: 1.6rem;

width: 20vw;

height: 6.5vh;

border: 7px solid #D21F3C;

box-shadow: 0 0 14px 0 rgba(0,0,0,0.50);

border-radius: 8px;

float: right;

display: flex;

justify-content: center;

align-items: center;

cursor: pointer;

margin-top: 2vh;

}

section:nth-child(2) {

display: flex;

flex-direction: column;

}

.headline {

text-align: right;

}

.headline h1 {

position: relative;

top: 4vh;

right: 6.7vw;

font-size: 7rem;

}

Приложение 3

Main.js

import { SimpleComp } from './Components/web-comp.js';

customElements.define('web-comp', SimpleComp);

const init = () => {

const

sect = document.querySelectorAll('section'),

line = document.querySelectorAll('.line'),

stick = document.querySelectorAll('.stick'),

scr = document.querySelectorAll('.scr');

let pos_Scr = 1;

const

toFirst = () => {

for (let i = 0; i < sect.length; i++) {

sect[i].style.transform = 'translateY(0)';

console.log(sect[i].style.transform);

}

stick[0].style.backgroundColor = '#ffffff';

stick[1].style.backgroundColor = '#aeaeae';

stick[2].style.backgroundColor = '#aeaeae';

pos_Scr = 1;

toSecond = () => {

for (let i = 0; i < sect.length; i++) {

sect[i].style.transform = 'translateY(-100%)';

console.log(sect[i].style.transform);

}

stick[0].style.backgroundColor = '#aeaeae';

stick[1].style.backgroundColor = '#ffffff';

stick[2].style.backgroundColor = '#aeaeae';

pos_Scr = 2;

toThird = () => {

for (let i = 0; i < sect.length; i++) {

sect[i].style.transform = 'translateY(-200%)';

console.log(sect[i].style.transform);

}

stick[0].style.backgroundColor = '#aeaeae';

stick[1].style.backgroundColor = '#aeaeae';

stick[2].style.backgroundColor = '#ffffff';

pos_Scr = 3;

};

const

scrollDat = e => {

let direction = e.deltaY;

if (pos_Scr === 1) {

if (direction > 0) {

document.removeEventListener('wheel', scrollDat);

console.log('down');

toSecond();

setTimeout( () => {

document.addEventListener('wheel', scrollDat);

}, 1200 );

} else {

console.log('up');

}

} else if (pos_Scr === 2) {

if (direction > 0) {

document.removeEventListener('wheel', scrollDat);

console.log('down');

toThird();

setTimeout( () => {

document.addEventListener('wheel', scrollDat);

}, 1200 );

} else {

document.removeEventListener('wheel', scrollDat);

console.log('up');

toFirst();

setTimeout( () => {

document.addEventListener('wheel', scrollDat);

}, 1200 );

}

} else if (pos_Scr === 3) {

if (direction > 0) {

console.log('down');

} else {

document.removeEventListener('wheel', scrollDat);

console.log('up');

toSecond();

setTimeout( () => {

document.addEventListener('wheel', scrollDat);

}, 1200 );

}

butScroll = i => {

if ( i === 1 ) {

toFirst();

} else if ( i === 2 ) {

toSecond();

} else if ( i === 3 ) {

toThird();

}

};

for (let i = 0; i < line.length; i++) {

line[i].addEventListener('click', () => butScroll(i + 1));

}

for (let i = 0; i < scr.length - 1; i++) {

scr[i].addEventListener('click', () => butScroll(i + 2));

}

document.addEventListener('wheel', scrollDat);

stick[0].style.backgroundColor = '#fff';

}

document.addEventListener('DOMContentLoaded', init);

Приложение 4

Web-comp.js

import { connect } from '../Services/simple-service.js';

const template =

<style>

/*@import url('https://fonts.googleapis.com/css?family=Arimo:400,700&display=swap');*/

/*@import url('https://fonts.googleapis.com/css?family=Alegreya+Sans+SC|Arimo:400,700|Montserrat+Alternates:700&display=swap');*/

@import url('https://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700&display=swap');

:host {

margin: 0;

padding: 0;

box-sizing: border-box;

}

.services {

display: flex;

align-items: center;

justify-content: space-between;

width: 85vw;

height: 65vh;

margin: auto;

/*font-family: 'Arimo', sans-serif;*/

font-family: 'Montserrat Alternates', sans-serif;

color: #fff;

}

.wrapper {

width: 45%;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

text-align: center;

}

#photo {

width: 100%;

}

#header {

font-size: 2.5rem;

font-weight: 700;

margin: 1.5vh;

}

.underline {

width: 9.5vw;

height: 3px;

background-color: #fff;

margin: auto;

}

#text {

font-size: 1.25rem;

letter-spacing: 0.2em;

line-height: 1.5;

padding: 0 1vw;

margin: 1.5vh;

}

.bot {

margin: 12vh 0 2vh;

width: 100%;

position: relative;

display: flex;

justify-content: space-between;

align-items: center;

color: #fff;

}

.change {

font-size: 2rem;

width: 33%;

display: flex;

justify-content: center;

}

#first, #sec, #third {

cursor: pointer;

}

#sec, #third {

opacity: 0.4;

}

</style>

</div>

<h2 id="header">Дизайн макет</h2>

<p id="text">Около половины пользователей

оценивают сайт по его внешним качествам,

правильный дизайн более вероятно

превратит визит сайта в лид</p>

</div>

<div id="first">Дизайн</div>

</div>

<div id="sec">Вёрстка</div>

</div>

<div id="third">Всё лучшее сразу</div>

</div>

export class SimpleComp extends HTMLElement

{

connectedCallback()

{

this.shadow_root = this.attachShadow({mode: 'open'});

this.shadow_root.innerHTML = template;

const

photo = this.shadow_root.getElementById('photo'),

header = this.shadow_root.getElementById('header'),

text = this.shadow_root.getElementById('text'),

but = {

first: this.shadow_root.getElementById('first'),

sec: this.shadow_root.getElementById('sec'),

third: this.shadow_root.getElementById('third'),

con = connect();

but.first.addEventListener('click', () => con.first(photo, header, text, but));

but.sec.addEventListener('click', () => con.sec(photo, header, text, but));

but.third.addEventListener('click', () => con.third(photo, header, text, but));

console.log('connected');

}

disconnectedCallback()

{

console.log('disconnected');

}

Приложение 5

Simple-service.js

const

heados = {

des: `Дизайн макет`,

build: `Вёрстка по вашему макету`,

both: `Пакет дизайн + вёрстка`,

textos = {

des: `Около половины пользователей

оценивают сайт по его внешним качествам,

правильный дизайн более вероятно

превратит визит сайта в лид`,

build: `От качества постройки зависит почти всё,

от стабильности работы до удобства

внесения изменений в будущем`,

both: `Создание сайта полностью с нуля,

разработка концепции сайта в зависимости от

направления компании и подстроимся

под целевую аудиторию`,

};

export const connect = () => {

return {

first: (photo, header, text, but) => {

photo.src = '../StormLandos/des.png';

photo.transform = 'translateX(0)';

Смотрите также файлы

Роль мотивации в поведении организации (Теоретические аспекты системы мотивации труда персонала предприятия).pdf

Тенденция развития индустрии гостеприимства (Туризм и индустрия туризма: понятие, сущность, система управления).pdf

Колористическая , цветовая и тональная организация живописного произведения Кеса Ван Донгена «Портрет дамы».pdf

.Корпоративная культура в организации..pdf

Социальный интеллект и его измерение.pdf

Файл: Основы программирования на языке. HTML.pdf

Заключение

Список использованной литературы:

Приложение 1

Приложение 2

Приложение 3

Приложение 4

Приложение 5

Смотрите также файлы

Информация

Списки файлов

Дополнительно