网页设计(2)辽宁专升本资料.pdf

网页设计

檀国桉

富海教育青泥校区

目录

HTML前奏曲1

HTML基础篇2

HTML网页基本结构2

HTML语法结构2

p内容/p：段落标记2

br：换行标记3

h：标题标记3

字体标记（在body里面设置字体格式）4

标记的嵌套5

标记的属性5

body的常用属性5

字体标记（再定义一个font标记）6

水平线标记7

预设格式标记7

区段标记8

列表标记：无序列表、有序列表、自定义列表8

自定义项目符号9

表格标记9

超链接属性12

图像和动画标记12

表单（input（单标记）13

HTML5新增的标记（都是围堵标记）15

CSS篇17

内部样式——HTML选择器18

内部样式——类选择器18

内部样式——ID选择器18

附加内容19

JavaScript篇22

BOM对象的具体功能22

document对象的常用属性和方法23

history对象的常用属性和方法23

screen对象的常用属性和方法23

JavaScript中常用的事件23

JavaScript中常用的表单事件24

JavaScript语句与分隔符24

各种对象24

默认添加的标记26

补充习题29

HTML前奏曲

用HTML描述网页的内容结构；

用CSS描述网页的排版布局；

用JavaScript描述网页的事件处理。

网页和网站的关系：网页是构成网站的基本元素；网站是由网页组成的。

Web前端的开发元素：

1)HTML

2)CSS

3)JavaScript

4)Dreamweaver软件的使用

网站设计常用的软件：FrontPage、Dreamweaver、Fireworks、Flash、Photoshop

网站设计流程(一)：

网站策划

①网站定位：确定主题；

②确定网站的风格（颜色最重要）；【风格为主题服务】

③规划网站的站点结构

index.html→主页

image→图像文件

css→层叠样式表

网站设计流程(二)

网站页面布局

网页的构成：网站标志、导航栏、主要内容区、页脚

网站设计流程(三)

网站资料收集：文本内容素材收集；动画图像素材的收集

网站设计流程(四)

设计网页图像

网站设计流程(五)

在编辑软件中制作网页

网站设计流程(六)

开发动态网站模块

网站设计流程(七)

网站的发布：申请域名；申请空间；发布站点

网站设计流程(八)

网站测试：功能性测试、完整性测试

网站设计流程(九)

网站的后期更新与维护

网站设计流程(十)

网站推广

~1~

HTML基础篇

超文本标记语言(HTML)：HTML是一种标记语言，可由任意文本编辑器或网页编辑器编辑。

保存时，文件扩展名为.html或.htm

HTML网页基本结构

◼标签（标记）

标记用括起来。标记名数据/标记名不区分大小写

分为围堵标记(双标记)和单标记两类：

围堵标记（设置网页结构的标记都是成对的）标记…/标记

单标记：标记

HTML语法结构

html

head

/head

body

/body

/html

声明：所有的标记都必须放在html和/html之间；

head/head：网页的头标记；

body/body：网页的主体部分

练习：写第一个网