# 明新資管網頁範例
### 主講人：黃夙賢
---
---
## 架構
- 利用\<div>\</div>架構出網頁七大區塊
- top (頁首)
- nav (巡覽列)
- slider (圖片輪播Carousel)
- banner (資訊)
- faculty (師資)
- contact (聯絡資訊)
- footer (頁尾)
---
## 架構
---
## 架構
- [immust_0_template.html](https://github.com/shhuangmust/html/blob/master/immust_0_template.html)
```html=
<html>
<head><title>明新科技大學資訊管理系</title>
<meta charset="utf-8">
<style>
*{
margin:0;
color:gray;
font-size: 50px;
text-align:center;
}
/* top */
.top{
background-color: black;
height:100px;
}
/* nav */
.nav {
background-color:white;
height:100px;
}
/* slider */
.slider{
background-color: black;
height:200px;
}
/* banner*/
.banner{
background-color:white;
height:200px;
}
/*faculty*/
.faculty {
background-color: black;
height:200px;
}
.contact {
background-color:white;
height:200px;
}
/*footer*/
.footer{
background-color: black;
height:100px;
}
</style>
</head>
<body>
<div class="top">
top
</div>
<div class="nav">
nav
</div>
<div class="slider">
slider
</div>
<div class="banner">
banner
</div>
<div class="faculty">
faculty
</div>
<div class="contact">
contact
</div>
<div class="footer">
footer
</div>
</body>
</html>
```
---
## 頁首
- 頁首包含整個網頁的名稱、LOGO、以及所有重要的相關連結
- LOGO、網頁名稱為(靠左)
- 相關重要連結(靠右)
- 利用三個div來包裹top的所有資訊
- 最外層container包裹logo與top-nav
- logo包裹LOGO與網頁名稱
- top-nav包裹重要連結
---
## 頁首系網範例
- [immust_1_top.html](https://github.com/shhuangmust/html/blob/master/immust_1_top.html)
- \<div>部分
```html=
<div class="top">
<div class="container">
<div class="logo">
<img src="https://github.com/shhuangmust/html/raw/master/IMMUST_LOGO.JPG">
明新科技大學資訊管理系
</div>
<div class="top-nav">
<a href=>明新科大</a>
<a href=>明新管理學院</a>
<a href=>登入</a>
</div>
</div>
</div>
```
---
## 頁首系網範例top排版
- 利用flex來控制logo靠左，連結靠右
- display:flex;
- align-items:center;
- justify-content:space-between;
- 可利用border畫出外框來協助控制排版
- border:1px solid red;
---
```css=
*{
margin:0;
color:gray;
/*font-size: 50px;*/
text-align:center;
}
/* top */
.top{
background-color: white;
}
.top .container{
display: flex;
align-items: center;
justify-content: space-between;
margin:10px;
}
.top .logo{
font-size: 35px;
font-weight: bold;
}
.top .logo img{
width: 100px;
vertical-align: middle;
}
.top .top-nav{
font-size: 25px;
font-weight: bold;
}
.top .top-nav a{
text-decoration: none;
}
```
---
## Nav巡覽列(下拉式選單)
- Navigator(巡覽列)，通常是用來顯示網頁的快速連結
- Navigator可以透過\<ul> \<li>標籤，搭配達成巡覽列的功能
- Navigator可以有好幾層，只要搭配多層的\<ul> \<li>即可
---
## Nav巡覽列(下拉式選單)
- 利用\<ul>以及\<li>元素進行設定，須設定以下元素：
- ul：設定背景、浮動方式邊界、邊寬…等元素
- li：設定選單直向、橫向
- a：設定連結、滑鼠進入、選定…等動作
---
## 單層式選單
```css=
.nav {
background-color:#333;
display: flex;
justify-content: center;
}
ul {
list-style-type: none; /*去掉list原點*/
margin: 0; /*設定下拉式選單邊界*/
padding: 0; /*設定下拉式選單邊界*/
overflow: hidden; /*超過邊界時要隱藏*/
background-color: #333; /*背景顏色*/
}
li {
float: left; /*向左靠齊*/
}
li a { /*設定連結的屬性*/
display: block; /*預設式inline，改成block區塊*/
color: white; /*字體顏色*/
text-align: center; /*字體置中*/
padding: 14px 16px; /*字體邊界距離*/
text-decoration: none; /*去掉連結的底線*/
}
li a:hover {
background-color: #111; /*滑鼠靠近時改變顏色*/
}
```
---
## 單層式選單系網範例
- 網頁內連結，網址可寫成#xxxx，點取後會找尋網頁內id=xxxx的頁面
```html=
<div class="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#introduction">系所簡介</a></li>
<li><a href="#faculty">成員簡介</a></li>
<li><a href="#about">相關資訊</a></li>
</ul>
</div>
```
---
## 單層式選單系網範例
- css部分
```css=
.nav {
background-color:#333;
display: flex;
justify-content: center;
}
.nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.nav li {
float: left;
}
.nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.nav li a:hover {
background-color: #111;
}
```
---
## 多層式選單(下拉式選單)
- 在需要下拉的\<li>底下，使用\<div> + \<a href>設定下拉內容
- CSS加入dropdown、dropdown-content來設定下拉顯示結果
---
```css=
.dropdown:hover .dropdown-content {
display: block; /*使用block呈現上下排列*/
}
li.dropdown:hover{
background-color: #333; /*設定背景顏色*/
}
.dropdown-content { /*設定下拉選單內容格式*/
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {/*設定下拉選單連結內容格式*/
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
```
---
## 多層式選單系網範例
- [immust_2_nav.html](https://github.com/shhuangmust/html/blob/master/immust_2_nav.html)
---
## 多層式選單系網範例
- \<div>部分
```html=
<div class="nav">
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#introduction">系所簡介</a></li>
<li class="dropdown"><a href="#faculty">成員簡介</a>
<div class="dropdown-content">
<a href="#faculty">黃老師</a>
<a href="#faculty">李老師</a>
<a href="#faculty">應老師</a>
</div>
</li>
<li><a href="#about">相關資訊</a></li>
</ul>
</div>
```
---
## 多層式選單系網範例
- css部分
```css=
.dropdown:hover .dropdown-content {
display: block; /*使用block呈現上下排列*/
}
li.dropdown:hover{
background-color: #333; /*設定背景顏色*/
}
.dropdown-content { /*設定下拉選單內容格式*/
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
z-index: 1;
}
.dropdown-content a {/*設定下拉選單連結內容格式*/
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
```
---
## 圖片輪播Carousel
- Flexslider：圖片輪播套件(2024/10停止更新)
- https://github.com/woocommerce/FlexSlider
---
## 圖片輪播
- 在\<head>\</head>加入css、javascript相關套件
- 在\<div>區塊中，另用\<ul>、\<li>設定連結圖片
- 把原先預設的.slider{~~height:100px;~~}內容清空
```javascript=
<link href="https://cdn.bootcss.com/flexslider/2.6.3/flexslider.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/flexslider/2.6.3/jquery.flexslider-min.js"></script>
<script>
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
rtl: true
});
});
</script>
```
---
## 圖片輪播系網範例
- [immust_3_slider.html](https://github.com/shhuangmust/html/blob/master/immust_3_slider.html)
- 在\<div>區塊加入相關圖片
```html=
<div class="slider">
<div class="flexslider">
<ul class="slides">
<li><img src="https://github.com/shhuangmust/html/raw/master/slider1.JPG" /></li>
<li><img src="https://github.com/shhuangmust/html/raw/master/slider2.JPG" /></li>
<li><img src="https://github.com/shhuangmust/html/raw/master/slider3.JPG" /></li>
</ul>
</div>
</div>
```
---
## 圖片輪播系網範例
---
## Banner
- 介紹明新資管系
---
## Banner系網範例
- [immust_4_banner.html](https://github.com/shhuangmust/html/blob/master/immust_4_banner.html)
- \<div>部分
```html=
<div class="banner" id="introduction">
<h1>系所簡介</h1>
<h1>歷年教育部評鑑皆榮獲一等</h1>
<h1>明新科技大學資訊管理系</h1>
<h1>全國私立科大第一資管系</h1>
</div>
```
---
# Banner系網範例
- 漸層顏色linear-gradient(顏色一,顏色二)
```css=
.banner{
background-image: linear-gradient(#ABDCFF,#0396FF);
padding: 30px;
text-align:center;
}
.banner h1{
padding: 20px;
}
```
---
## Faculty
- 擺放三個介紹老師的平均分配區塊
- 利用display:flex與justify-content:space-around，把三個區塊平均擺放
---
## Faculty系網範例
- [immust_5_faculty.html](https://github.com/shhuangmust/html/blob/master/immust_5_faculty.html)
- \<div>部分
```html=
<div class="faculty" id="faculty">
<h2>師資介紹</h2>
<div class="container">
<a class="teacher" href="">
<img src="https://github.com/shhuangmust/html/raw/master/faculty1.jpg" />
<h3>黃老師</h3>
</a>
<a class="teacher" href="">
<img src="https://github.com/shhuangmust/html/raw/master/faculty2.jpg" />
<h3>李老師</h3>
</a>
<a class="teacher" href="">
<img src="https://github.com/shhuangmust/html/raw/master/faculty3.jpg" />
<h3>應老師</h3>
</a>
</div>
</div>
```
---
## Faculty系網範例
- CSS部分
```css=
.faculty {
display: block;
justify-content: center;
background-color:white;
padding:40px;
}
.faculty h2 {
font-size: 25px;
color: rgb(50,51,52);
padding-bottom:40px;
}
.faculty .container {
/*border:1px solid red;*/
display: flex;
justify-content: space-around;
align-items: center;
}
.faculty .teacher{
/*border:1px solid blue;*/
display:block;
text-decoration: none;
}
.faculty .teacher img{
height: 200px;
width: 200px;
}
.faculty .teacher h3{
color: White;
background-color: rgba(39,40,34,.500);
text-align: center;
}
```
---
## 聯絡資訊
- 聯絡資訊分成兩個區塊：左邊文字、右邊地圖
---
## 聯絡資訊
- Google地圖搜尋明新科技大學->分享->嵌入地圖->複製html
---
## 聯絡資訊系網範例
- [immust_6_contact.html](https://github.com/shhuangmust/html/blob/master/immust_6_contact.html)
- \<div>部分
```html=
<div class="contact" id="about">
<h2>聯絡資訊</h2>
<div class="infos">
<div class="left">
<b>明新科技大學管理學院大樓二樓</b>
<span>304新竹縣新豐鄉新興路1號</span>
<b> 電話:03-5593142</b>
<span>分機:3431、3432、3433</span>
<b> 傳真:03-5593142</b>
<span>分機:3440</span>
</div>
<div class="right">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3044.185885150929!2d120.98912333466727!3d24.86332844316392!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x34683154faa8283b%3A0x92cb1c5564a574ef!2z5piO5paw56eR5oqA5aSn5a24!5e0!3m2!1szh-TW!2stw!4v1536665837954" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</div>
</div>
```
---
## 聯絡資訊系網部分
- CSS部分
```css=
.contact {
display: block;
justify-content: center;
margin-top: 30px;
margin-bottom: 30px;
}
.contact h2{
color: rgb(54, 82, 110);
font-size: 25px;
}
.contact .infos{
display:flex;
margin-top: 30px;
justify-content: center;
}
.contact .infos .left{
display:block;
text-align: left;
margin-right: 30px;
}
.contact .infos .left b{
display:block;
text-align: left;
margin-top: 10px;
text-decoration: bold;
color: Gray;
font-size: 18px;
line-height: 18px;
}
.contact .infos .left span{
display:block;
text-align: left;
margin-top: 10px;
color: rgba(39,40,34,0.5);
font-size: 16px;
padding-left: 27px;
}
.contact .infos .right{
height: 200px;
}
.contact .infos .right iframe{
width: 100%;
height: 100%;
border: 1px solid rgba(39,40,34,0.50);
}
```
---
## footer
- 宣告版權
---
## footer系網範例
- [immust_7_footer.html](https://github.com/shhuangmust/html/blob/master/immust_7_footer.html)
- \<div>部分
```html=
<div class="footer">
©Copyright 2022 Department of Information Management, MUST. All rights reserved. 維護者 Tony SHHuang
</div>
```
---
## footer系網範例
- CSS部分
```css=
.footer{
display: flex;
justify-content: center;
background-color: rgb(25,26,30);
padding: 30px 0;
}
```
---
{"metaMigratedAt":"2023-06-17T15:00:56.900Z","metaMigratedFrom":"YAML","title":"明新資管網頁範例","breaks":true,"description":"image","contributors":"[{\"id\":\"ef0225b9-6c2a-4012-82c9-fa1031d2c4db\",\"add\":16976,\"del\":4286}]"}