网页设计与制作

网页设计与制作

第1章网站开发基础

1.2网站开发流程

1.网站总体策划：（1）目标用户定位和网站的主题定位（2）网站整体风格创意设计（3）网页的色彩搭配（4）网站的层次结构和链式结构（5）版面布局设计

2.设计和制作素材：搜集的素材一般包括跟主题有关的文字图片资料；一些优秀的页面风格；开放的源代码。设计和制作的素材包括网站的Logo、Banner、背景图片、列表图表、横幅广告等。

3.建立站点：安装和配置IIS；在Dreamweaver中创建站点。

4.制作网页：创建CSS样式；制作网站首页；制作网站的其他页面；制作超链接

5.测试和发布网站：发布网站前必须要测试网站，测试网页内容、链接的正确性和在不同浏览器中的兼容性等。发布网站先申请站点域名和租用服务器空间，然后通过FTP工具把网站上传到服务器上。

1.4 HTML的概念：HTML是一种用来制作超文本文档的简单标记性语言。

1.4.3HTML标签

标签表示：<标签名称属性>

1.<标签>元素,标签的作用范围:<标签>→<标签>.例：

demo

,即将demo这段文本以2号标题来显示，这对标签之外的文本不受这组标签影响。

2.<标签属性名=”属性值”>元素

一个标签可以包含多个属性属性之间无先后次序，用空格分开。

例：hello,其中background属性用来表示HTML文档的背景图片，tect属性用来表示文本的颜色。

3.<标签>

空标签：标签单独出现，只有开始标签而没有结束标签。

(1)和在最外层，表示这对标签里的代码是HTML语言。

(2)和标签里是网页中的头部信息，如网页总标题，网页关键字等。无头部信息可不要这对标签

(3).在和这对双标签的中间还包含着这对标签，网页标题的内容，标题出现在IE浏览器窗口。

考点：

1.

和

.文本段落的标签。

2.
:换行符。
标签是空标签(它没有结束标签，因此这是错误的:

)。

快捷键：F12预览网页；Shift+Enter分段(行间距小)；

前景色、背景色的调整：前景色是alt+del 背景色是ctrl+del 前后交换是X

1.4.4HTML文档的基本结构p18-p19

（头部信息）

（网页内容：文本、链接、图像、动画等）

欢迎光临

这是我的第一个主页，欢迎大家的访问！

Ps:去掉第6、7、8、10行是HTML的基本结构。

第2章DreamweaverCS5基础

2.1.2 Dreamweaver软件界面P23图2-3

2.1.4视图模式种类及其适应情况

1）代码视图(写代码，主要用于这个，利用Dreamweaver工具编辑网页代码)，

2）拆分视图(编写代码边看视图，直观地编辑网页中的元素，又可以观察到相关的代码）3）设计视图 (可视化设计，以所见所得的方式编辑网页)

第3章制作网页内容

1.创建超链接的方法：给文字创建超链接；给图片创建超链接；添加email链接，mailto:(冒号后不能空格)电子邮件地址；添加空连接。

2.创建超链接的路径：

1)绝对路径:是被链接文档的完整URL,包括所使用的传输协议（网页通常是：http://）。在创建外部链接时必须使用绝对路径。

2）文档相对路径：就是以以前文档所在位置为起点到被连接文档经由的路径。主要用于创建内部链接。如：images/google.gif

3）站点根目录相对路径：是指所有路径都开始于当前站点的根目录。站点根目录相对路径以一个正斜杠开始，该正斜杠表示站点根文件夹，如/images/google.gif.移动含有根目录相对连接的文档时，不需要更改链接。

4.DW新建CSS规则选择器的类型及其特点。

1类：定义的时候前面必须加点（.）,格式是.xxx，可以在一个页面中调用多次；

2.ID（用于任何HTML元素）名称以“#”开头，一般中只用在网页中的一个元素上

3．标签（重新定义HTML元素）可以实现用CSS重新定义HTML标签外观的功能。

4.复合内容（基于选择的内容）：a:link 超链接的正常状态，无任何动作

a:visited 访问过的超链接状态

a：hover 鼠标指针指向超链接的状态

a：active 选中超链接状态

第4章CSS样式表

CSS样式表：内部用于当前网页内部；外部连接到多个网页上

1.创建内部CSS样式表：

（1）用DW打开网页文档4.3.1.html

（2）单击“样式表”面板中的“新建CSS规则”按钮，弹出“新建CSS规则”对话框（3）在“选择器类型”下拉列表中选择“类（可用于任何HTML元素）”在“选择器名称”文本框里输入要定义的CSS样式的名称.ziti，在“规则定义”下拉列表中选择“仅限该文档”

（4）单击“确定”按钮，在“.ziti的CSS规则定义”对话框中，设置完成后，单击“确定”按钮，此时，可以在“CSS样式”面板里看到增加了一个.ziti的CSS样式

或(1)执行“窗口“l"CSS样式”命令.打开“CSS样式”面板。

(2)在“CSS样式”面板中单击“新建CSS样式”按钮。

在“CSS样式，面板的底部的按钮功能如下。

.“附加样式表”按钮:在HTML文档中链接一个外部的CSS文件。二

.“新建CSS样式，按钮:编辑新的CSS样式文件。

.“编辑样式表’按钮:编辑原有的CSS规则。

.“删除CSS样式”按钮:删除选中的CSS规则。

(3)弹出“新建Css规则”对话框。

(4〕在对话框中如果设置“选择器类型’为“标签“，则在“选择器名称”下拉列表中选择一个HTML标签，也可以直接插入这个标签。

在“新建CSS规则’对话框中可以进行如下设置。

.选择器名称:用来设里新建的样式表的名称。

.选择器类型:用来定义样式类型，并将其运用到特定的部分。如果选择“类”选项，要在“选择器名称”文本框中翰人自定义样式的名称，其名称可以是字母和数字的组合，如果没有输入符号“.”Dweaver会自动输入;如果选择“标签”选项，需要在“选择器名称”下拉列表中选择一个HTML标签，也可以直接摘人这个标签;如果选择“复合认”

选项，需要在“选择器名称.下拉列表中选择一个选择器的类型.上海网站建设也可以直接输入一个选择器类型。

.规则定义:用来设置新建的CSS语句的位置。CSS样式按照使用方法可以分为内部样式和外部样式。如果想把CSS语句新建在网页内部.可以选择“仅限该文档”选项.