個人網頁製作

Data： 2019/7/1 lecturer:譽錚

OUTLINE

html介紹

css介紹

js介紹

綜合運用

html介紹

Hyper Text Markup Language

超文字標示語言

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>

<body>


</body>
</html>

基礎架構

html tag

https://www.w3schools.com/tags/tag_html.asp

Lab 1

透過html tag建立個人網頁的基本架構

1. 網頁標題

2.放入大頭貼

3.寫出我是誰，興趣與愛吃的東西

4.使用<a></a>，加上sirla官網的連結，網址如下：https://sirla-fjulis.github.io/

css介紹

Cascading Style Sheets

階層式樣式表

常用的CSS - 背景

顏色

background-color: <#色碼> 或 <顏色> ;

色碼表：https://www.toodoo.com/db/color.html

圖片

background-image: url('網址或檔案位置');

p{
    background-color: blue;
    background-color: #ff3725;
}

body{
    background-image: url('網址');
}

常用的CSS - 文字

字型

font-family: <第一順位字體>, <第二順位字體>, ...;

大小

font-size: <number>;

位置

text-align: <位置>;

p{
    font-family: Microsoft JhengHei, serif;
    font-size: 30px;
    text-align: center;
}

CSS的位置?

行內樣式

內部樣式表

外部樣式表

JavaScript介紹

JavaScript

一種進階的，直譯的程式語言

JavaScript的位置?

1. 直接用<script></script>嵌入

2.做成單獨的檔案，然後在head裡引入

綜合應用

菜單

    <div class="menu">
      <a href="https://arashi1214.github.io/index.html">首頁簡介</a>
      <a href="網址"target="_blank">宿營照片</a>
      <a href="#">敬請期待</a>
    </div>

html

菜單

.menu {   /* 左側菜單*/
    width: 180px; 
    margin-top:150px;/*頂端高度 */
}

.menu a {
    background-color: #eee; /* 格子為灰色 */
    color: black; 
    display: block; 
    padding: 12px; 
    text-decoration: none; /* 不顯示超連結的底線 */
}

.menu a:hover {
    background-color: #ccc; /* 滑鼠移過去時變成灰色 */
}

css

輪播牆

<div class="slideshow-container">
    <ul class="slideshowul">
      <li class="quotes">青春之後，後悔之前，我依然用力的活著</li>
      <li class="quotes">我在煙霧中尋找期待，手心緊握哪怕只是一片虛幻</li>
      <li class="quotes">想放的內容</li>
    </ul>
</div>

html

輪播牆

<script src="jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function(){
      $(".quotes").hide();
      $(".quotes:nth-child(1)").fadeIn("slow"); 
      let current = 1;   //設定當前quote的位置
      let max = $(".slideshowul li").length;

      startChange();
          console.log(max);

          function prev(){
            $(".quotes").hide();
            current -= 1;

            if(current ==0){
                current = max;
            }
            $(".quotes:nth-child(" + current + ")").fadeIn("slow");
          }

          function next(){
            $(".quotes").hide();
            current += 1;

            if(current ==max){
                current = 1;
            }
            $(".quotes:nth-child(" + current + ")").fadeIn("slow");
          }
          function startChange(){
            changeIt = setInterval(function(){next();}, 4000);
          }
          
          function stoptChange(){
            clearInterval(changeIt);
          }
          
          $(".spot.next").click(function(){
              stoptChange();
              next();
              startChange();
          });
		
   // your jQuery...music
		// under is music
    });
  </script>

JavaScript

輪播牆

.slideshow-container{
  width: 60%;  
  height: 100px;
  margin: 0px auto;  /* 置中 */
  text-align: center;
}

.slideshowul{
  width: 80%;
  list-style-type: none;  /* 不要顯示點點 */
  display: inline-block;  /* 變成inline才不會占用一整行 */
  margin: 0px;  /* 取消預設margin */
  text-align: center;  /* 置中內部元素 */
  margin-top: 45px;
  padding: 0px;  /* 取消預設padding(ul預設有padding-left: 40px) */
}

個人網頁製作

Thank you for listening.

Html

Html

arashi

個人網頁製作

Thank you for listening.

Html

More from arashi