Дистанційна освіта з інформатики в період березня 2021 року
22.03.2021 - 28.03.2021
Конспект уроку для
учнів
Тема: Поняття
про просторовий веб-дизайн. Заголовки сайтів. Розміри сторінок, піктограм,
зображень. Динамічні елементи на веб-сторінці.
Теоретична частина
Створенння
сайту відбувається з дотриманням певних етапів:
Проектування
Збирається
детальна інформація,
ставляться
цілі проекту ,
планується
бюджет.
Результатом
даного етапу є технічне завдання.
Це
- текстовий документ, в якому детально описується проект.
Розробка дизайну
Ідеї,
закладені в технічному завданні, втілюються у вигляді ескізів сторінок.
Результатом є дизайн-макет сайту:
графічний файл, виконаний в одній з графічних
програм.
Дизайн
макет повинен містити докладний опис використаних кольорів, шрифтів тощо. Якщо
початкова та внутрішні сторінки сайту відрізняються, це теж повинно бути
відображено в дизайн-макеті.
Макетування
сторінок
На
основі дизайн-макету створюється макет шаблонних сторінок, втілених вже в мові
HTML, вони містять графічну інформацію, приєднані таблиці стилів.
Програмування
сервісів
Окрім статичної текстової та графічної
інформації сайт може містити різні інтерактивні сервіси:
форми для реєстрації клієнтів, гостьові книги.
Публікація
сайту, наповнення інформацією
На цьому кроці створений каркас переноситься
на віддалений сервер і сайт починає заповнюватися текстовою інформацією.
Професійні сайти для цього забезпечуються системами управління вмістом. Вони
надають можливість додавати інформацію власником сайта, який не є фахівцем ані
в мові HTML ані в програмуванні, він знайомий лише з основами роботи на
комп'ютері.
Супровід та
просування проекту
Будь-який
сайт необхідно «просувати», тобто робити дії з підвищення його популярності. Це
не разова, а планомірна робота з відстеження відвідуваності, збору відгуків
відвідувачів, внесенню змін у вміст, додавання нової інформації.
Просторовий
дизайн веб-сторінок
Згідно
з дослідженнями користувач приділяє найбільшу увагу Fподібній області екрану.
Тому дуже важливо зосередити основну інформацію на початку сторінки, а також
використовувати заголовки, списки, абзаци для виділення значущої інформації та
привертання уваги відвідувача сайту.
При
дизайні веб-сторінок потрібно враховувати їхні розміри. Більшість веб-сторінок
буде відображатись на стандартних моніторах з розширенням 800х600 пікселів.
Таким чином при відображенні сайту на екрані можна розраховувати на 760х410
пікселів (з відкиданням на екрані місця для меню браузера та панелей
операційної системи).
Варто продумувати і довжину сторінок. Довгі
сторінки вимагають більше часу для завантаження, хоча дозволяють при цьому
отримати більше інформації. Краще розмістити більшість функціональних елементів
в межах видимості першого екрана прокручування.
Більшість
домашніх сторінок сайтів в Інтернеті мають схожу структуру, а саме: нагорі
знаходиться горизонтальна панель, переважно кольорова. Зазвичай вона
використовується для розміщення логотипу, навігаційної панелі та панелі пошуку.
Ліва колонка має кольорове тло. Зазвичай містить навігаційне меню. Центральна
частина має біле тло. Переважно має одну широку колонку або дві менші, містить
фотографії, ілюстрації, перелік новин, а також гіперпосилання на окремі розділи
сайту. Права колонка має біле тло і використовується для розміщення
інформаційних блоків на кольоровому тлі. Кількість та назви сторінок сайту
будуть залежати від тематики, обраної інформаційної архітектури, кількості
матеріалів тощо.
Серед
усіх інших сторінок варто відзначити наступні. Карта сайту створюється якщо
веб-вузол є досить великим і містить перелік всіх розділів сайта у вигляді
списку гіперпосилань. Новини. Практично кожен сайт має оновлення, їх варто
виносити у відповідний розділ. Користувачі знатимуть дату додавання матеріалів,
останніх публікацій чи новин. Проте, незалежно від наявності окремої сторінки,
на сайті завжди необхідно подавати інформацію про дату останніх змін.
Контакти.
Важливо
надати користувачеві можливість зв’язатись з автором сайта чи з компанією, яка
на ньому представлена. Передусім це електронна та поштова адреси, інформація
про те, як дістатись. Запитання: Який поширений тип сторінки?
Практична частина
Завдання 1. Реалізувати
кодування веб-сторінки на основі HTML-кодування.
Реалізація.
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Тест
шаблон ІНФОРМАТИКА</TITLE>
<META
http-equiv=Content-Type content="text/html; charset=windows-1251">
<SCRIPT
language=JAVASCRIPT>
<!--
var
r1=0, r2=0, r3=0, r4=0, r5=0, r6=0, r7=0, r8=0, r9=0, r10=0, r11=0, r12=0
var
text=""
OCINKA=0
function CountRez() {
var count=0;
count=(r1+r2+r3+r4+r5+r6+r7+r8+r9+r10+r11+r12);
OCINKA=count
if
((count>=10)&&(count<=12)) {text="Ви склали іспит на
ВІДМІННО!";}
if
((count<10)&&(count>=7)) {text="Ви склали іспит на ДОБРЕ!";}
if
((count<7)&&(count>=4)) {text="Ви склали іспит на
ЗАДОВІЛЬНО!";}
if (count<4)
{text="Ви НЕ володієте знаннями про Інформаційні Системи!";}
myWin= open("",
"displayWindow",
"width=500,height=200,scrollbars=yes,menubar=yes");
myWin.document.open();
myWin.document.write("<html><head><title>Результат
теста");
myWin.document.write("</title></head><body
bgcolor='#ffffcc'>");
myWin.document.write("<center><small><h2>");
myWin.document.write(OCINKA);
myWin.document.write("<br><hr><br>");
myWin.document.write(text);
myWin.document.write("</small></center>");
myWin.document.write("</body></html>");
myWin.document.close(); }
-->
</SCRIPT>
<SCRIPT
language=JavaScript1.2>
<!--//
//
your message here
var
msg='*ТИ ДОБРЕ ПОДУМАВ?*';
var
font='Verdana,Arial';
var
size=4; // up to seven
var
color='#006400';
//
This is not the rotation speed, its the reaction speed, keep low!
//
Set this to 1 for just plain rotation w/out drag
var
speed=.2;
//
This is the rotation speed, set it negative if you want
//
it to spin clockwise
var
rotation=.1;
//
Alter no variables past here!, unless you are good
//---------------------------------------------------
var
ns=(document.layers);
var
ie=(document.all);
var
msg=msg.split('');
var
n=msg.length;
var
a=size*15;
var
currStep=0;
var
ymouse=0;
var
xmouse=0;
var
scrll=0;
var
props="<font face="+font+" size="+size+"
color="+color+">";
if
(ie)
window.pageYOffset=0
//
writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer
name="nsmsg'+i+'" top=0 left=0 height='+a+'
width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
if (ie){
document.write('<div
id="outer"
style="position:absolute;top:0px;left:0px"><div
style="position:relative">');
for (i=0; i < n; i++)
document.write('<div
id="iemsg"
style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center;font-weight:regular;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function
Mouse(evnt){
ymouse =
(ns)?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns)?evnt.pageX+20:event.x-20;
// x-position
}
if
(ns||ie)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
y=new
Array();
x=new
Array();
Y=new
Array();
X=new
Array();
for
(i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}
function
makecircle(){ // rotation properties
if
(ie) outer.style.top=document.body.scrollTop;
currStep-=rotation;
for (i=0; i < n; i++){ // makes the
circle
var
d=(ns)?document.layers['nsmsg'+i]:iemsg[i].style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15;
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2;
// remove *2 for just a plain circle, not oval
}
}
function
drag(){ // makes the resistance
scrll=(ns)?window.pageYOffset:0;
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
makecircle();
// not rotation speed, leave at zero
setTimeout('drag()',10);
}
if
(ns||ie)window.onload=drag;
//
-->
</SCRIPT>
<META
content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY
bgColor=#ffff00 onload=drag><FONT face=arial,helvetica,sans-serif
color=#0000ff
size=4>
<TABLE
cellSpacing=2 cellPadding=2 align=center
background=Тести4.files/Тест3.html
border=0>
<TBODY>
<TR>
<TD colSpan=2>
<H1 align=center><FONT color=#ff3333>ТЕСТ
<BR></H1></FONT></TD></TD></TR>
<TR>
<TD colSpan=2>
<H1 align=center><FONT
color=#55c555><BR>Початковий курс <BR>пошукачів
ВЛАСТИВОСТЕЙ <BR>іноформації.
<BR></H1></FONT></TD></TD></TR></TBODY></TABLE>
<FORM><H4><FONT
color=#ff3333>1. </FONT>
<FORM><H5>
<INPUT
onclick=r1=0 type=radio value=v1 name=R1> <BR>
<INPUT
type=radio value=V2 name=R1onclick=r1=0>
<BR>
<INPUT
onclick=r1=0 type=radio value=V3 name=R1> <BR>
<INPUT
onclick=r1=1 type=radio value=V4 name=R1> </H5></FORM>
<H4><FONT
color=#ff3333>2. </FONT>
<FORM><H5>
<INPUT
onclick=r2=0 type=radio value=V1 name=R2> <BR>
<INPUT
onclick=r2=1 type=radio value=V2 name=R2> <BR>
<INPUT
onclick=r2=0 type=radio value=V3 name=R2> <BR>
<INPUT
onclick=r2=0 type=radio value=V4 name=R2> </H5></FORM>
<H4><FONT
color=#ff3333>3. </FONT>
<FORM><H5>
<INPUT
onclick=r3=1 type=radio value=V1 name=R3> <BR>
<INPUT
onclick=r3=0 type=radio value=V2 name=R3> <BR>
<INPUT
onclick=r3=0 type=radio value=V3 name=R3> <BR>
<INPUT
onclick=r3=0 type=radio value=V4 name=R3> </H5></FORM>
<H4><FONT
color=#ff3333>4. </FONT>
<FORM><H5>
<INPUT
onclick=r4=0 type=radio value=V1 name=R4> <BR>
<INPUT
onclick=r4=0 type=radio value=V2 name=R4> <BR>
<INPUT
onclick=r4=1 type=radio value=V3 name=R4> <BR>
<INPUT
onclick=r4=0 type=radio value=V4 name=R4> </H5></FORM>
<H4><FONT
color=#ff3333>5. </FONT>
<FORM><H5>
<INPUT
onclick=r5=0 type=radio value=V1 name=R5> <BR>
<INPUT
onclick=r5=0 type=radio value=V2 name=R5> <BR>
<INPUT
onclick=r5=1 type=radio value=V3 name=R5> <BR>
<INPUT
onclick=r5=0 type=radio value=V4 name=R5> </H5></FORM>
<H4><FONT
color=#ff3333>6. </FONT>
<FORM><H5>
<INPUT
onclick=r6=0 type=radio value=V1 name=R6> <BR>
<INPUT
onclick=r6=0 type=radio value=V4 name=R6> <BR>
<INPUT
onclick=r6=1 type=radio value=V2 name=R6> <BR>
<INPUT
onclick=r6=0 type=radio value=V3 name=R6> </H5></FORM>
<H4><FONT
color=#ff3333>7. </FONT>
<FORM><H5>
<INPUT
onclick=r7=1 type=radio value=V1 name=R7> <BR>
<INPUT
onclick=r7=0 type=radio value=V2 name=R7> <BR>
<INPUT
onclick=r7=0 type=radio value=V3 name=R7> <BR>
<INPUT
onclick=r7=0 type=radio value=V4 name=R7> </H5></FORM>
<H4><FONT
color=#ff3333>8. </FONT>
<FORM><H5>
<INPUT
onclick=r8=0 type=radio value=V1 name=R8> <BR>
<INPUT
onclick=r8=1 type=radio value=V2 name=R8> <BR>
<INPUT
onclick=r8=0 type=radio value=V3 name=R8> <BR>
<INPUT
onclick=r8=0 type=radio value=V4 name=R8> </H5></FORM>
<H4><FONT
color=#ff3333>9. </FONT>
<FORM><H5>
<INPUT
onclick=r9=0 type=radio value=V1 name=R9> <BR>
<INPUT
onclick=r9=0 type=radio value=V3 name=R9> <BR>
<INPUT
onclick=r9=1 type=radio value=V2 name=R9> <BR>
<INPUT
onclick=r9=0 type=radio value=V4 name=R9> </H5></FORM>
<H4><FONT
color=#ff3333>10. </FONT>
<FORM><H5>
<INPUT
onclick=r10=0 type=radio value=V1 name=R10> <BR>
<INPUT
onclick=r10=0 type=radio value=V2 name=R10> <BR>
<INPUT
onclick=r10=0 type=radio value=V3 name=R10> <BR>
<INPUT
onclick=r10=1 type=radio value=V4 name=R10> </H5>
</FORM>
<H4><FONT
color=#ff3333>11. </FONT>
<FORM><H5>
<INPUT
onclick=r11=1 type=radio value=V1 name=R11> <BR>
<INPUT
onclick=r11=0 type=radio value=V2 name=R11> <BR>
<INPUT
onclick=r11=0 type=radio value=V3 name=R11> <BR>
<INPUT
onclick=r11=0 type=radio value=V4 name=R11> </H5>
</FORM>
<H4><FONT
color=#ff3333>12. </FONT>
<FORM><H5>
<INPUT
onclick=r12=0 type=radio value=V1 name=R12> <BR>
<INPUT
onclick=r12=0 type=radio value=V2 name=R12> <BR>
<INPUT
onclick=r12=1 type=radio value=V3 name=R12> <BR>
<INPUT
onclick=r12=0 type=radio value=V4 name=R12> </H5>
</FORM>
<HR>
<FORM>
<H4>Ви
відповіли на всі запитання? Тепер натисніть на кнопку: <INPUT
onclick=CountRez() type=button value="Видати результат"
name=B1></H4></FORM><TR><TD width="100%"
Align="center" Valing="top" colspan="12">
<H3 align=center> <FONT
face="Times New Roman" color=#0ead>
В інформатиці не все так просто і
легко, як іноді здається.
</FONT><TR><TD
width="100%" Align="center" Valing="top"
colspan="12">
<H3 align=center> <FONT
face="Times New Roman" color=#ff3333>
математик Сергій
Вінницький</FONT></FONT>
<H4><FONT
color=#0000ff size=5>В Інтернеті на сайті <FONT face="Times New
Roman" color=#ff3333>sxz.mylivepage.ru.</FONT> є різні способи
розвязування олімпіадних задач.</FONT></H4></TD>
</H3></H3></PRE></BODY></HTML>
**********************************
Результат виконаної практичної роботи це
файл( index1.html) надіслати вашому учителю на електронну скриньку:
vinnser@gmail.com (Сергій Петрович)
ktdfz@i.ua (Юрій Васильович)
· Анонімна зацікавлена особа, як джерело, що повідомляє факти та події.
· Анонімна незацікавлена особа, як джерело, що повідомляє факти та події.
· Незацікавлений очевидець, що спостерігав подію, перебуваючи безпосередньо на місці події.
· Безпосередній виконавець або учасник події.
· Документ, що засвідчує факт та подію.
· Журналіст, що освітлює дану подію, перебуваючи безпосередньо на місці події.
· Зацікавлена сторона, що повідомляє про подію та факти.
· Експерт або спеціаліст, що знає, як проаналізувати отримані дані та доступні факти.
· Слухи в суспільстві, в мережі про факти та події.
Відповідь. А) ні; б)так; в)так; д)так.
Немає коментарів:
Дописати коментар