网页设计与制作Word格式.docx

网页设计与制作Word格式.docx

《网页设计与制作Word格式.docx》由会员分享，可在线阅读，更多相关《网页设计与制作Word格式.docx（50页珍藏版）》请在冰豆网上搜索。

类型：

以不同的后缀代表不同类型的网页文件。

通常分为静态页面、动态页面。

动态网页（activewebpage）：

指网页内容可根据用户的不同请求从而返

回其对应的数据，一般情况下动态网页通过数据库进行架构，一般文件名均以开

服务器

发语言做后缀，如php、asp等。

也可以说凡是结合了HTML以外的高级程序设计语言和数据库技术进行的网页编程技术生成的网页都是动态网页。

静态网页：

指全部由HTMI标记页面，页面的内容和显示效果基本不发生变

化，所有的内容包含在网页文件中。

一般文件名均以htm、html、shtml等为后

缀。

术语

WWWWorldWideWeb），亦称作“Web、“WWW“'

W3'

”，中文名字为“万维网”，"

环球网"

等，常简称为Web分为Web客户端和Web服务器程序。

WW可以让Web客户端（常用浏览器）访问浏览Web!

务器上的页面。

在这个系统中，每个有用的事物，称为一样“资源”；

并且由一个全局“统一资源标识符”

（URL标识；

这些资源通过超文本传输协议（HypertextTransferProtocol）传送给用户，而后者通过点击链接来获得资源。

URL（UniformResourceLocator），统一资源定位符，是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。

互联网上的每个文件都有一个唯一的URL它包含的信息指出文件的位置以及浏

览器应该怎么处理它。

动态网页的URL是不固定的；

而静态网页的URL是固定的。

HTTP（Hypertexttransferprotocol），超文本传输协议，是一种详细规

定了浏览器和万维网服务器之间互相通信的规则，通过因特网传送万维网文档的数据传送协议。

第3章网站配色

216网页安全色

216网页安全色：

指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合（调色板），这些颜色在任何显示设备上的显示效果都是相同的。

0,51,102,153,204和255。

网页文字及配色

文字是网页的主体。

文字的优势主要体现在信息量大、所用存储空间非常小,利于网页的快速打开，信息的直观呈现。

要求：

字体不超过三种（标题、正文、导航），文本字号形成对比一一突出（网页标题）、层次（栏目标题）、分明（正文，字体偏小，适于文字信息量大的内容）

规定：

字号影响文字的清晰度，分辨率1024*768，正文：

12号、宋体字;

分辨率高于1024,正文：

13-14号、宋体字；

文章标题字号偏大，一般要使用平滑（消除锯齿）的字体。

文字与背景色彩搭配：

1）文字能见度：

高明度色彩背景+低明度文字

2）错误色彩搭配：

黄+白；

绿+灰、绿+红；

紫+红、紫+黑；

青+黑

3）前进色：

红、黄、橙、白

背景色柔和、淡雅一一深色文字

深色背景一一浅色文字

不深不浅根据色彩选择适合的颜色（色相、明度、饱和度）

文字色彩可以与网站主题相呼应，协调主色调、副主色调等。

文字色彩有划分层次的作用，网页上相同色彩的文字都属于同一层次。

文字与图片的配色

遵循三个原则：

1.文字周围的背景尽量单纯化。

2.图片与文字对比尽量明显，易于识别。

（通常浅色图片配深色文字，深色图片配浅色和高亮度的文字）

3.文字与背景图片对比较弱不易识别时，可用其他色彩衬托文字的方式强化文字与图片间的对比。

网页中的图像

图像给人的视觉效果要比文字强烈得多。

灵活应用图像，在网页中可以起到点缀的效果。

但是应用不当，会使网页变得凌乱不堪。

Web页上的图像文件大部分都是使用JPG和GIF格式。

因为他们除了具有压缩比例高外，还具有跨平台特性。

图像在网页中的应用主要有以下几种形式。

1.图像标题

一般在网页中都要有标题，用以提示浏览者这个网站是做什么的，起到了导航的作用，应用图像标题可以使网页更加美观，

图像的另一个重要应用是作为网页的背景。

网页背景千变万化，特别是一些个人网站，应用图片背景比较多。

3.网页主图

网页上除了用小图像美化网页外，通常还会在网页上用一些较大的图片来突出网页主题，占满网页的整个空间。

特别是主页中用主图的比较多，或者直接用图片取代文字作为超级链接按钮，可以使网页更加美观。

网页图像分类

网页图像分为静态图像和动态图像。

动态图像：

1.gif动画：

适于短小动画，画面数少，图像简单。

【89a】

2.flash动画（.swf）:

3.flv视频（.flv）:

体积小，压缩率高，适于传播但画面不够清晰。

静态图像：

1.JPG优秀的图画品质，较为合理的文件大小，不支持透明格式。

2.GIF:

256色，压缩后损失图像色彩但不影响图像失真；

支持透明格式'

【87a】

3.PNG支持透明背景，支持48位色彩的图像模式；

平滑的透明边缘;

品质好，体积小。

网页上图片注意事项

1.良好的视觉吸引力，“阅读最省力原则”

2.图片要清晰，不能模糊、变形，太大的图片要进行分割。

3.图片的主体含义要简单明了，图片上的文字要清晰容易识别。

4.采用的图片颜色要符合网页整体色彩。

关于色彩

由光谱可以得出6个基础色相，增加过渡色可形成12色相环和24色相环。

同类色：

指在同一色相中不同的颜色变化。

邻近色：

在色环上任一颜色同其毗邻之色。

补色：

在色环上彼此相距180°

的两个色相互为补色

色彩对

比

网页色彩搭配主要从色彩冷暖、面积、色相、明度、纯度

1.色相对比

色相对比：

两种以上色彩组合时，由于色相差别而形成的色彩对比效果。

对比强弱关系可以从色相环上的距离（角度）入手，距离越小对比越弱;

反之亦然。

有彩色间的对比，按弱-强关系分为:

离在130左右）一

—鲜明、强烈（配色时需要考虑主色与次色间的关系、

色彩面积，降低视觉疲劳）

互补色对比（色相距离在180°

左右）一一色彩对比很强（易产生不

安定感，配色时需考虑色彩面积、色彩的分散度）

2.明度对比

明度对比：

指色彩明暗度的对比，也称作黑白度对比，即黑、白、灰效果。

3.纯度对比

纯度对比分为高、中、低纯度＜

纯度对比表现出色彩艳丽效果，也是决定色调感觉的关键。

特点：

增强用色的鲜艳感，即通常说的明确感。

表现：

艳丽、生动、活泼

无彩色对比，如黑与白、深灰与浅灰。

大方、稳重、高雅、朴素

4.冷暖对比

暖色系：

颜色接近红、橙、黄。

冷色系：

颜色偏向蓝、青。

中色系：

绿色和紫色

5.面积对比

同一视觉范围内色彩的面积不同会产生不同的对比效果

网页色彩的搭配

网页的色调：

网页中的色彩，总存在某种内容联系组成一个统一的整体，从而形成画面色彩的趋势。

主色调一一页面色彩的主要色调。

显示站点整体内容和风格；

其他配色面积

般不大于该视觉面积。

辅色调烘托主色调，支持主色调，协助主色调营造整体视觉氛围（面积

次之）。

突出颜色——强调色，用于突出主题效果，一般多用于按钮、标签之类。

背景色协调、衬托整体

第4章软件介绍

软件界面

常见问题

1.窗口不显示插入工具栏。

［方法］Ctrl+F2;

或者菜单命令［窗口-插入］，勾选

2.找不到属性窗口。

［方法］Ctrl+F3;

或者菜单命令［窗口-属性］，勾选

3.文件面板显示根节点不是命名的站点名称。

［方法］文件面板-管理站点；

或者菜单命令［站点-管理站点］

4.窗口显示的信息不完整，感觉窗口小了。

［方法］检查计算机的屏幕分辨率，分辨率不低于1024*768。

第5章站点建立

制作网站之前除了准备网站资料、规划网站结构、设计网站布局以外，最好创建一个本地站点，易于管理和上传。

特别是制作动态网站，本地站点的创建必不可少。

站点的建立应注意以下情况：

1.站点的路径结构中不能含有中文，即文件夹、文件的命名都不含有中文，且命名有规律易查找。

2.习惯上在站点根文件夹下建立用于存放图片的子文件夹，如果网站中用到其他较多媒体类文件也可以建立相应的文件夹存放，但目录层次不易过深。

3.创建网站的素材不能放在站点根文件夹中，站点文件夹中存入的图片、音频、视频或者动画只能是真正在网页中应用到的元素，一般在制作页面的过程中都会提示保存到站点文件夹下。

创建站点的视频演示

创建站点的命令

菜单命令：

［站点-新建站点］

文件面板：

［管理站点-新建］

创建站点的关键步骤说明

1.新建站点对话框中，［基本］选项卡相当于一个建立站点的向导，引导设计者一步步地完成基本的站点设置，［高级］选项卡用于站点属性的详细设置。

2.初学者可先在［基本］选项卡中完成站点的基本设置，再进入［高级］选项卡做

进一步设置，如“默认图像文件夹”，应注意：

1）设置了默认图像文件夹

后，制作页面时每次插入图像都会自动将应用到的图片自动存放到该文件夹

中；

2）不能将所有下载或处理过的图像素材都拷贝到该文件夹中，造成不必要的存储负担。

3.新建站点的名称可以包含中文、符号或字母，但站点路径不能包含中文和符号。

创建站点的关联操作

站点编辑：

进行站点定义的补充设置或者重新设置。

站点删除：

删除无关站点或者冗余站点。

站点导出：

导出站点信息，并以.ste为扩展名的存储一个站点定义文件，

该文件一般存储在站点根文件夹内。

站点导入：

将站点根文件夹内的站点定义文件导入（扩展名.ste），导入中

注意站点根文件夹和站点图像文件夹的指向，便于快速、正确的重构站点。

第6章常用布局方法简介

版面布局基础

1.网页默认习惯

网站标志放在页面上部

竖排导航时，导航放在页面左侧；

横排导航时，放在网站标志或顶部广告之下

版权信息放在页面底部

2.第一屏：

是指打开一个网站页面不拖动滚动条的情况下能看到的页面部分。

分辨率

800*600

1024*768

第一屏

760*420

1002*600

页面宽度：

＜=1002

页面高度：

＜=3*600

表格

表格是Dreamweaver中最常用的布局工具，不但可以精确定位网页在浏览器中的显示位置，还可以控制网页元素在网页中的精确布局

创建表格及表格属性设置的视频演示

创建表格的命令

［插入记录-表格］

插入工具栏：

［常用-表格］

表格的重要属性说明

1.表格的宽度可以用两种方式表