2015/04/08@致理技術學院
Photo by
http://home.gamer.com.tw/creationDetail.php?sn=1645805
現在要把這本技能書交給你們了!
東吳大學資訊管理系
VSSecurity 研發工程師
阿腸網頁設計工作室 工程師
TDOHacker 網路組組員
一個首頁
然後另一頁
更多其他頁XD
俗話說的好
Sublime Text
ATOM
Brackets
Notepad++
JavaScript 程式設計語言由 Netscape, Inc. 開發,並非 Java 平台的一部分。
JavaScript 並不會建立 Applet 或獨立應用程式。JavaScript 最常見的形式是位於 HTML 文件內,且可提供單靠 HTML 無法達到的網頁互動。
資料的驗證。
將動態的檔案寫入到網頁中。
可以對事件做出回應。
可以讀寫html中的內容。
可以檢測瀏覽器。
可以儲存與返回cookie。
跨瀏覽器的DOM元素選擇
經由jQuery的DHTML DOM選擇器,可以更容易的操作在複雜的樹狀HTML中的任何DHTML DOM物件,並可用鏈式語法對同一物件的不同屬性進行操作。例如:
$("p.surprise").addClass("ohmy").show("slow");
簡單:較其它JavaScript庫更易於入門。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
構成HTML文件的格式
<div id="container">
THE WITNESSES
MYSTERY IS EVERYWHERE
START THE INVESTIGATION
Find hidden clues to preview an episode of the
new series from Hervé Hadmar and Marc Herpoux.
Explore the scene and use your
headphones for a better experience
WITH
THIERRY LHERMITTE & MARIE DOMPNIER LAURENT LUCAS - JAN HAMMENECKER – CATHERINE MOUCHET – ROXANE
DURAN - MEHDI NEBBOU WITH THE PARTICIPATION OF FRÉDÉRIC BOURALY
PRODUCED BY FABIENNE SERVAN SCHREIBER & JEAN-PIERRE FAYER SCREENPLAY MARC HERPOUX, HERVÉ HADMAR
& DOMINIQUE MONTAY FOR EPISODE 1, ORIGINAL MUSIC COMPOSED BYERIC DEMARSAN
COPRODUCED BY CINÉTÉVÉ & PICTANOVO BROADCASTER FRANCE TÉLÉVISIONS & WITH THE PARTICIPATION OF
LA RÉGION NORD-PAS-DE-CALAIS, LA RÉGION HAUTE-NORMANDIE, CENTRE NATIONAL DE LA
CINÉMATOGRAPHIE ET DE L’IMAGE ANIMÉE. DISTRIBUTORS : NEWEN DISTRIBUTION - LES TÉMOINS 6X52’
THE WITNESSES AVAILABLE
IN VOD / BLURAY / DVD
FOLLOW US ON
Cine tévé France 2 Pictanovo Haute Normandie Newen CNC VOD / BLURAY / DVD LEGAL NOTICE CREDITS
</div>
id = container
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background-image: url("background.png");
background-color: #000;
color: #fff;
}
#container {
width: 100%;
}
<link rel="stylesheet" href="style.css" />
</head>
<p>THE WITNESSES</p>
<p>MYSTERY IS EVERYWHERE</p>
<p>START THE INVESTIGATION</p>
<p>Find hidden clues to preview an episode of the</p>
<p>new series from Hervé Hadmar and Marc Herpoux.</p>
<p>Explore the scene and use your</p>
<p>headphones for a better experience</p>
<p>WITH</p>
<p>THIERRY LHERMITTE & MARIE DOMPNIER LAURENT LUCAS - JAN HAMMENECKER – CATHERINE MOUCHET – ROXANE
DURAN - MEHDI NEBBOU WITH THE PARTICIPATION OF FRÉDÉRIC BOURALY
PRODUCED BY FABIENNE SERVAN SCHREIBER & JEAN-PIERRE FAYER SCREENPLAY MARC HERPOUX, HERVÉ HADMAR
& DOMINIQUE MONTAY FOR EPISODE 1, ORIGINAL MUSIC COMPOSED BYERIC DEMARSAN
COPRODUCED BY CINÉTÉVÉ & PICTANOVO BROADCASTER FRANCE TÉLÉVISIONS & WITH THE PARTICIPATION OF
LA RÉGION NORD-PAS-DE-CALAIS, LA RÉGION HAUTE-NORMANDIE, CENTRE NATIONAL DE LA
CINÉMATOGRAPHIE ET DE L’IMAGE ANIMÉE. DISTRIBUTORS : NEWEN DISTRIBUTION - LES TÉMOINS 6X52’HE WITNESSES AVAILABLE
IN VOD / BLURAY / DVD</p>
<p>FOLLOW US ON</p>
<p>Cine tévé France 2 Pictanovo Haute Normandie Newen CNC VOD / BLURAY / DVD LEGAL NOTICE CREDITS</p>
body {
background-image: url("background.png");
background-color: #000;
color: #fff;
font-family: NimbusMonLEE, sans-serif;//字體
font-weight: 400;//寬度
text-transform: uppercase; //大寫
text-rendering: optimizeLegibility;//渲染
-webkit-font-smoothing: antialiased; //平滑
-moz-osx-font-smoothing: grayscale;//平滑
}
#container {
position: absolute;//位置
top: 180px;//離頂部距離
text-align: center;//文字對齊
}
.red {
color: red;//文字顏色
}
.bigtitle {
font-size: 46.2px;//文字大小
letter-spacing: 17.6px; //文字間隔
}
<p><div class="red">THE <div class="bigtitle">WITNESSES</div></div></p>
上色,換字體,網頁就換變得不一樣
跟上一張圖差在哪?
.red {
color: red;
}
.smalltitle {
font-size: 22px;
letter-spacing: 6.6px;
}
.bigtitle {
font-size: 64px;
letter-spacing: 20px;
font-family: serif;
display: inline-block;
}
<p><div class="red smalltitle">THE <div class="bigtitle">WITNESSES</div></div></p>
h3 {
font-size: 29px;
letter-spacing: 5px;
font-weight: 100;
}
<h3>MYSTERY IS EVERYWHERE</h3>
.start {
color: #fff;
font-size: 24px;
text-decoration: none;
display: inline-block;
margin: 60px 0;
cursor: pointer;
}
<p><div class="start">START THE INVESTIGATION</div></p>
.stop {
line-height: 6px;
font-weight: 400;
font-size: 16px;
color: #bdbcbc;
opacity: .5;
}
<p><div class="stop">Find hidden clues to preview an episode of the</p>
<p>new series from Hervé Hadmar and Marc Herpoux.</p>
<p>Explore the scene and use your</p>
<p>headphones for a better experience</div></p>
.footer {
background: #000;
opacity: .5;
width: 100%;
height: 100px;
bottom: 0px;
position: fixed;
margin-left: -8px;
}
謝謝大家
Q & A Time.