HTML & CSS.

Slides:



Advertisements
Similar presentations
Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
Advertisements

HyperText Markup Language
第5章 HTML 標籤介紹.
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
教学内容 1、演示并讲解用表格布局制作的网页 2、用表格制作网页.
Web图片搜索引擎设计 ——基于文本的图片信息提取.
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
网页 设计与制作.
第8章 CSS基础知识 【学习目标】 对于一个网页设计者来说,对HTML语言一定不感到陌生,因为它是网页制作的基础,但是如果希望网页能够美观、大方,并且升级维护方便,那么仅仅知道HTML还是不够的,还需要了解CSS。了解CSS基础知识,可以为后面的学习打下基础。 本章主要内容包括: 为什么在网页中加入CSS。
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
XML 第05讲 使用CSS显示XML.
第五单元课1-3 层叠样式表.
Css2/css3全教程 选择器 群号: 韬略课堂:何韬.
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
CSS – 進階 IDIC.
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
第二部分 HTML语言控制 本次课的主要内容: 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用
RWD網頁設計實務 李欣螢 以誠研發有限公司.
网页编程基础 曾宪文,Rex Zeng 纸飞机网络技术部部长 Leader of ACE.
第四章 样式表CSS CSS技术是一种格式化网页的标准方式,它通过设置CSS属性债周页元素获得各种不同效果。本章共分9个实例,主要内容包括的基础知识、CSS创建与导入、CSS的语法结构、常用CSS的分类、CSS的使用原则等内容。
第8章 样式表.
ASP动态网页设计实用教程 主讲教师: 开课单位:.
CSS简介 WEB前端三剑客之二.
Ajax编程技术 第十章 使用外部数据.
顏色與背景CSS樣式.
湖北职院计科系.
教師: 陳明瑤 電郵: 網際網路應用-網頁設計3 教師: 陳明瑤 電郵:
标准规范 2.自己偏好习惯 3.讨论/建议 永远遵循同一套编码规范 -- 不管多少人同时参与编码,所有代码都应该看上去像是一个人编写的一样。
Web前端开发技术与实践 第12章 布局 阮晓龙 /
Ch01 HTML 5 資料格式 網頁程式設計.
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
CSS 教學 下載並修改自: 資工系涂世俊老師教學網站.
HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法
第 13 章 用CSS 設定 文字顏色與背景.
Ch.13 HTML網頁實作.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
8 网页制作基础知识 赵国庆 博士 北京师范大学教育技术学院
Css全教程 边框背景轮廓 群号: 韬略课堂:何韬.
HTML5全栈开发序列课程 《前端入门》之CSS3新特性 余鹏作品.
Web前端开发技术与实践 第11章:背景与边框 阮晓龙 /
动态专题制作 凤凰网技术中心 应用管理部.
CHAPTER 18 CSS樣式表的動態效果.
HTML – 文字格式 資訊教育.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
CSS樣式 靜宜大學 資管系 楊子青.
基礎程式設計範例 -網頁名片.
主讲:陶建平 华中科技大学网络与计算中心
W3C标准网页制作 主讲教师:张 涛.
CSS技术 蒋玉华.
大家所认为的电子商务行业有哪些途径来赚钱?
现代教育技术部 张建威
网页设计与制作 Dreamweaver CS6 标准教程
網路程式設計期末project 指導教授:馬尚彬 學生:楊依林 學號:B
第4章 CSS基础 主讲人:刘泰然 经济管理学院.
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
武汉纺织大学传媒学院 cm.wtu.edu.cn
主讲:陶建平 华中科技大学网络与计算中心
《网页设计与制作》.
布局大师——表格.
CSS排版:盒子模式 靜宜大學 資管系 楊子青.
第15节 CSS超链接样式 武汉纺织大学传媒学院 cm.wtu.edu.cn 2019/5/10 传媒学院.
第7章 使用CSS设置链接与导航菜单 经济管理学院.
網路商店裝修之二 CSS樣式編輯.
CSS基礎 靜宜大學 資管系 楊子青.
第5章 Div+CSS布局技术 经济管理学院.
第2章 块级标签 经济管理学院.
CSS 一起來美化網頁吧!!.
使用Dreamweaver 8 國立竹東高級中學 資訊科技概論 黃秋雅老師
第4章 JSP动态网页设计基础 教学目标 教学重点 教学过程 2019年10月21日.
Presentation transcript:

HTML & CSS

HTML

基本html架構 <html xmlns="http://www.w3.org/1999/xh tml"> <head> <title>標題</title> </head> <body> 內文 </body> </html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

常見HTML標籤

超連結 href=“xxx” :連接的網址 target=“xxx”: 開啟方式 寄信 <a href=“http://www.yahoo.com.tw” target =“_blank”>Yahoo</a> href=“xxx” :連接的網址 target=“xxx”: 開啟方式 “_self” :自己 “_blank”: 開新視窗 “_top”:最頂端框架 “_parent”: 父框架 寄信 <a href=“mailto:xxx@gmail.com”>寄信給我</a>

超連結(Cont.) 錨點 定位: 移動:<a href=“#hello”>移到hello處</a> <a name=“hello”>xxxxxxx</a> <a id=“hello”>xxxxxx</a> 移動:<a href=“#hello”>移到hello處</a>

插入圖片 <img src=“xxx.jpg” title=“快顯視窗” width=“寬度px” height=“高度px”/> 單寫寬度或高度可等比例調整圖片大小 px 也可以換成百分比表示 alt屬性表示圖片無法讀取時所顯示的文字

排版 <div>這是一個段落</div> <span>這是一個區塊</span> 取代早期的font

排版(Cont.) 斷行 <P>AAA</P> <p>BBB</p> AAA<p>BBB AAA<br/> <br/>BBB

表格 標題儲存格用<th>取代<td> 合併兩欄 <table> <tr> <td></td> </tr> </table> 標題儲存格用<th>取代<td> 合併兩欄 <tr><td colspan=“2”></td></tr> 分割儲存格 <tr><td rowspan=“2”></td></tr>

清單 有序 無序 <ul> </ul> <ol type=“樣式” start=“1”> <li>項目一</li> <li>項目二</li> </ol> 無序 <ul> </ul> Type 1: 阿拉伯數字 A or a : 英文字母 I or i : 羅馬數字

CSS教學

表示方式 屬性: 值; Ex. color: red; font-size: 14pt;

套用方式 Inline <span style=“color:#ff0000;”> Embed <head> <style type=“text/css”> div{ background-color: #ff0000; } </style> </head> External <link rel=“stylesheet” type=“text/css” href=“外部css檔路徑”>

選擇器 配合html標籤 p b{ color:#ff0000;} 使用class: <div class=“className”> .className{color:#ff0000;} 配合ID: <div id=“footer”></div> #footer{color:#ff0000;}

色彩 表示色彩 – RGB 範例: 16進位: #ff0000 10進位:rgb(255,0,0) 文字:red 這是<span style=“color: #ff0000”>紅色的字</span> <div style=“background-color: rgb(255,0,0);”>紅色背景 </div>

文字 字型:font-family style=“font-family: arial;” 大小:font-size 文字:”xx-large” “x-large” “large” “medium” “small” “x- small” “xx-small” 數值:9px 粗體:font-weight 文字:”normal” ”bold” “bolder” 數值(無單位):100 斜體:font-style 文字:”italic”

超連結 a:link: 一般時候 a:visited: 已經看過的網頁 a:hover: 滑鼠移過 a:active: 按下去

表格 表格線範圍 樣式 border-style border 四邊 “border-top” “border-bottom” “border-left” “border-right” 樣式 border-style solid(實線) dashed(虛線) double(雙線) dotted(點點線) groove(凹線) ridge(凸線) Inset(下嵌) outset(上浮)

表格(Count.) 框線寬度 border-width 框線色彩 border-color 數值: 9px 框線色彩 border-color 摺疊框線 border-collapse: collapse; 整合:色彩 寬度 樣式 border-top: #00ff00 3px dashed;

清單 圖片:list-style-image 記號與文字:list-style-position 整合: list 樣式 list-style-type 圖標:“none” “disc” “circle” “square” 文字: “upper-”(大寫) | “lower-”(小寫) + “latin”(拉丁文)| “roman”(羅馬文)|”alpha”(希臘文) 圖片:list-style-image list-style-image: url(圖片路徑) 記號與文字:list-style-position “inside” : 記號與文字視為一組 “outside”: 記號與文字不同一組 整合: list ul {    list-style: url(“路徑") none inside;  }

排版 位置:position “static” “absolute” “relative” “fixed” “top“ “right” “bottom” “left” “z-index” (值越大越上面) 邊界 “margin-top” “margin-bottom” “margin-left” “margin-right” 整合 margin: 上 右 下 左  padding 跟margin一樣

背景repeat 背景顏色 背景圖片 浮水印 background-attachment 背景重複 background-repeat background-color: #ff0000 背景圖片 background-image: url(圖片路徑) 浮水印 background-attachment “fixed” “scroll” 背景重複 background-repeat “no-repeat” “repeat” “repeat-x” “repeat-y”