Методические указания по выполнению лабораторных, практических и контрольных работ по дисциплине одп 02. Информатика для студентов первого курса по профессии спо


Тема 5.1.1 Методы создания и сопровождения сайта



Pdf көрінісі
бет35/38
Дата12.10.2023
өлшемі0.86 Mb.
#480520
түріМетодические указания
1   ...   30   31   32   33   34   35   36   37   38
Метод. указания -Инф-ка - Ноговицына Л.А.

Тема 5.1.1 Методы создания и сопровождения сайта 
Лабораторные работы №№12-13 «Современные технологии создания Web-
сайтов через HTML5 & CSS» 
Цель:
Разработка web-страницы «Дерево Пифагора».
Перечень используемых материалов: ПК, текстовый процессор MS Access, 
задание 
Технология выполнения работы: 
1. Создать web-страницу на основе HTML5 и CSS 
2. В процессе создания web-страницы изучить тэги и коды. 
3. Напечатать в текстовом редакторе: 
<html>
<head
<title>Дерево Пифагораtitle> 
<script type="text/javascript"> 
// функция рисует под углом angle линию из указанной точки длиной ln 
function drawLine(x, y, ln, angle) {context.moveTo(x, y); 
context.lineTo(Math.round(x + ln * Math.cos(angle)), Math.round(y - ln * 
Math.sin(angle)));} 
// Функция рисует дерево 
function drawTree(x, y, ln, minLn, angle) { 
if (ln > minLn) { 


55 
ln = ln * 0.75; 
drawLine(x, y, ln, angle); 
x = Math.round(x + ln * Math.cos(angle)); 
y = Math.round(y - ln * Math.sin(angle)); 
ln = 120, // начальная длина линии 
minLn = 5; // минимальная длина линии 
canvas.width = 480; // Ширина холста 
canvas.height = 320; // высота холста  
context= canvas.getContext('2d'); 
context.fillStyle = '#ddf'; // цвет фона 
context.strokeStyle = '#020'; //цвет линий 
context.fillRect(0, 0, canvas.width, canvas.height); 
context.lineWidth = 2; // ширина линий 
context.beginPath(); 
drawTree(x, y, ln, minLn, Math.PI / 2); 
context.stroke();} 
window.onload = init; 
script> 
head> 
<body
<canvas id="tree">canvas> 
body>
html> 
6. По окончании показать результаты работы. 
7. Составить аналитический отчёт работы о разных способах создания web-
страниц. 


Достарыңызбен бөлісу:
1   ...   30   31   32   33   34   35   36   37   38




©dereksiz.org 2024
әкімшілігінің қараңыз

    Басты бет