|
Даю задания для студентов. Они хотят повторно пройти курс. Как отписаться от выполненного курса, что бы пройти его заново? |
Инспектор
Спонсор: Microsoft
Вы можете этот курс.
Опубликован: 29.08.2012 | Уровень: специалист | Доступ: платный
Практическая работа 2:
Разработка галереи изображений
< Лекция 2 || Практическая работа 2 || Практическое занятие >
Аннотация: В ходе выполнения данной работы учащиеся познакомятся со способами создания галереи изображений.
В ходе выполнения второй практической работы мы разработаем две галереи изображений. В первом примере мы будем использовать каскадную таблицу стилей, во втором случае нам понадобится синтаксис Razor.
Пример 1(sample_1)
Создаем папку images и помещаем в нее 15 изображений с именами от 1.jpg до 15.jpg. Далее, в блокноте создаем файл index.html со следующим кодом:
index.html
<!DOCTYPE html>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Галереяизображений</title>
<linkhref="myStyle.css"rel="stylesheet"type="text/css"/>
</head>
<body>
<divclass="container"id="container">
<divclass="gallery">
<atabindex="1"><imgsrc="images/1.jpg"/></a>
<atabindex="1"><imgsrc="images/2.jpg"/></a>
<atabindex="1"><imgsrc="images/3.jpg"/></a>
<atabindex="1"><imgsrc="images/4.jpg"/></a>
<atabindex="1"><imgsrc="images/5.jpg"/></a>
<atabindex="1"><imgsrc="images/6.jpg"/></a>
<atabindex="1"><imgsrc="images/7.jpg"/></a>
<atabindex="1"><imgsrc="images/8.jpg"/></a>
<atabindex="1"><imgsrc="images/9.jpg"/></a>
<atabindex="1"><imgsrc="images/10.jpg"/></a>
<atabindex="1"><imgsrc="images/11.jpg"/></a>
<atabindex="1"><imgsrc="images/12.jpg"/></a>
<atabindex="1"><imgsrc="images/13.jpg"/></a>
<atabindex="1"><imgsrc="images/14.jpg"/></a>
<atabindex="1"><imgsrc="images/15.jpg"/></a>
<spanclass="close"></span>
</div>
</div>
</body>
</html>
После этого вновь открываем блокнот и создаем каскадную таблицу стилей myStyle.css:
myStyle.css
.container {
margin:5pxauto;
padding:20px;
position:relative;
width:800px;
}
.gallery {
width:800px;
margin:0auto;
}
.gallerya {
display:inline-block;
position:relative;
width:200px;
height:150px;
}
.galleryaimg {
border:1pxsolid#fff;
cursor:pointer;
display:block;
height:100%;
left:0px;
position:absolute;
top:0px;
width:100%;
z-index:1;
-moz-user-select: none;
-khtml-user-select: none;
-moz-box-sizing:border-box;
box-sizing:border-box;
-moz-transition-property:width, height, top, bottom, left, right, z-index, border;
-moz-transition-duration:1s;
-o-transition-duration:1s;
transition-property:width, height, top, bottom, left, right, z-index, border;
transition-duration:1s;
}
.gallerya:focusimg {
border:15pxsolid#fff;
cursor:default;
height:500%;
position:absolute;
width:500%;
z-index:25;
box-shadow:1px1px5px#888;
-moz-box-shadow:1px1px5px#888;
-moz-transition-property:width, height, top, bottom, left, right, z-index, border;
-moz-transition-duration:1s;
transition-property:width, height, top, bottom, left, right, z-index, border;
transition-duration:1s;
}
.gallerya:focus:nth-child(3n+1)img {
left:150px;
}
.gallerya:focus:nth-child(3n+2)img {
left:-50px;
}
.gallerya:focus:nth-child(3n+3)img {
left:-250px;
}
.gallerya:focus:nth-child(-n+3)img {
top:140px;
}
.gallerya:focus:nth-child(n+7)img {
top:-150px;
}
.gallerya:focus:nth-child(n+10)img {
top:-295px;
}
.gallery.close {
background:transparent;
cursor:pointer;
display:none;
height:360px;
left:180px;
position:absolute;
top:160px;
width:500px;
z-index:30;
}
.gallerya:focus~.close {
display:block;
}
Пример 2 (sample_2)
Запустите программу WebMatrix, создайте веб-сайт Gallery. Создайте папку images и поместите в нее 18 изображений домов с именами от 1.jpg до 18.jpg. Создайте файл Gallery.cshtml со следующим кодом.
Gallery.cshtml
@{varmyPath= "";
if( Request["SelectPhoto"] != null){
myPath = @"images\"+ Request["SelectPhoto"];
}
}
<!DOCTYPEhtml>
<html>
<head>
<title>Картиннаягалерея</title>
<styletype="text/css">
h1 {
font-family: 'Comic Sans MS';color: #0094ff;
}
</style>
</head>
<body>
<h1>Галерея</h1>
<formmethod="post"action="">
<div>
<selectname="SelectPhoto">
<optionvalue="1.jpg">Дом 1</option>
<optionvalue="2.jpg">Дом 2</option>
<optionvalue="3.jpg">Дом 3</option>
<optionvalue="4.jpg">Дом 4</option>
<optionvalue="5.jpg">Дом 5</option>
<optionvalue="6.jpg">Дом 6</option>
<optionvalue="7.jpg">Дом 7</option>
<optionvalue="8.jpg">Дом 8</option>
<optionvalue="9.jpg">Дом 9</option>
<optionvalue="10.jpg">Дом 10</option>
<optionvalue="11.jpg">Дом 11</option>
<optionvalue="12.jpg">Дом 12</option>
<optionvalue="13.jpg">Дом 13</option>
<optionvalue="14.jpg">Дом 14</option>
<optionvalue="15.jpg">Дом 15</option>
<optionvalue="16.jpg">Дом 16</option>
<optionvalue="17.jpg">Дом 17</option>
<optionvalue="18.jpg">Дом 18</option>
</select>
<inputtype="submit"value="Смотреть"/>
</div>
<divstyle="padding:10px;">
@if(myPath != ""){
<imgsrc="@myPath"alt="Дом"width="800px"/>
}
</div>
</form>
</body>
</html>
Запустите проект
< Лекция 2 || Практическая работа 2 || Практическое занятие >
Александр Лобанов
