网页设计与制作

1、 “搜狐”的主页的内容很丰富，色彩鲜艳并有 许多大幅广告和浮动广告栏。 微软中国的主页，内容比较专一，内容非 常有条理，栏目突出，没有凌乱的感觉。 “黑白音乐” 是一个个人主页，它看起来 更简单，色彩也不够丰富，但感觉非常清新。 网页标题 如果文档工具栏没有显示，使用菜单“查看”“工 具”“文档”可打开其显示。 1.META META设置自定义的一组网页属性的描述。 2.关键字关键字 关键字设置网页网站的一组关键字，许多搜索引擎和网站关 联性统计是通过关键字搜索网页的。 3.描述描述 设置对网页的一些描述，一般是网页内容的概述，供其它 开发者参考。 4.刷新刷新 刷新定义网也调入后延迟一段时间

2、的动作 5.基础基础 设置网页的基准地址 6.链接链接 链接用于设置需要链接的CSS等外部文件的地址和类型。 标题正文型结构的顶端是网站标识和标题 ，下面是网页正文。内容非常简单。 网页的版面布局 1.确定显示分辨率确定显示分辨率 2.版面布局的模式版面布局的模式 （1）T型结构布局 （2）口型布局 （3）三型布局 （4）对称对比布局 （5）POP布局 在工具栏上单击扩展表格模式按钮，既可切换到 “扩展表格模式” 。 扩展模式下并不是所见即所得的效果，最好不要在 单元格中添加内容，只进行页面设计操作。 用表格布局的页面，往往给人一种过于整齐的排列 效果，而使用“布局模式”，则可以是网页中的元素

3、快 速、灵活地定位。 在“插入”工具栏单击“布局”按钮，进入布局模式。 v框架集网页 1.创建一个新的框架集网页创建一个新的框架集网页 创建框架网页前先要让框架边框显示。在“文档” 工具栏的最右边单击视图选项按钮 在弹出的菜单中选择“可视化助理”“框架边 框”，使得框架边框被选中。 该图的框架就是先分成上下框架，再把下框架分成左右 框架。一般把下框架称为左右框架的父框架，则左右框架 是下框架的子框架。 右下框架占最大的区域，用来显示主要的网页内容，称 为主框架。 1.设置网页元素的链接目标设置网页元素的链接目标 2.设置网页的缺省显示区域设置网页的缺省显示区域 _blank：打开一个新窗口显示

4、目标网页。 _parent：目标网页的内容在父框架窗口中显示。 _self：目标网页的内容在当前所在框架窗口中显示。 _top：目标网页的内容在最顶层框架窗口中显示。 使用菜单“插入”“HTML”“文件头标签”“基 础”，打开“基础”对话框，在目标中可选择此网页 中超链接的默认显示窗口。Href中设置默认查找的网 络路径。 在网页中插入层 1.新建一个层新建一个层 （1）打开要创建层的网页。 （2）将“插入”工具栏切换到“布局”模式。 （3）单击描绘层按钮 鼠标移动到编辑窗口时变成十字形状，可以在 网页中的任意位置拖动绘制一个层的边框。 （4）在层的边框中可以插入各种网页元素，如文 字、图片、

5、表格等。 在网页中的层的边框上单击可选中这个层，设 置其属性。 拖动边框上的8个控制点可改变层的大小。将鼠标 放在层边框上除控制点的其他位置，此时鼠标变成十 字箭头形状，拖动鼠标可移动层的位置。 1.层的叠加层的叠加 使用菜单“窗口”“层”打开层面板组 。 2.层的嵌套层的嵌套 在一个已有的层中描绘新层时按住Alt键可绘制 现有层的嵌套层，如果不按住Alt键绘制的是连个 重叠的层。 在层面板中按住Ctrl键将一个层拖动到层列表的 另一个层上，可将其变为后者的子层。 1. 将层转换成表格将层转换成表格 选中要转换的层，使用菜单“修改”“转 换”“层到表格”打开转换层为表格对话框。 2.将表格转换

6、成层将表格转换成层 选中要转换为层的表格，使用菜单“修 改”“转换”“表格到层”打开转换表格为层 对话框。 使光标出现在编辑区中，移动鼠标指针到“ 插入”面板的“常用”选项卡中，单击描绘层 按钮。在网页编辑区中拖动鼠标，画出一个区 域，该区域即为插入层的大小。 注意，每插 入一个新层，在 网页顶端就会增 加一个层标记， 重复上述操作，再次插入两个新层。这样 在该单元格中共插入三个层，我们将图片移到 在左上方的层中，文字移到右上方和下面的层 中。 单击该标记可以选中其所对应的层。单击层 的外围框线，选中层。将鼠标指针移动到框线 上，拖动鼠标，更改层的大小为图像大小。 调整文字的字 号和字体 ，以

7、 及层的位置， 实现图文混排 。 vCSS基础 1.什么是什么是CSS CSS（Cascading Style sheet）是1996年出现的有关 网页制作的技术，中文叫做级联风格页或层叠样式表。 使用CSS定义的网页风格可以控制HTML语言标志的一 些诸如字体、边框、颜色与背景等属性，也可以通过定 义外部风格文件实现整个网站页面风格的统一。 （1）将格式和结构分离 （2）更容易控制页面的布局 （3）可以制作出体积更小下载更快的网页 （4）可以更快更容易地维护及更新大量的网页 （5）良好的浏览器兼容性 1.新建样式新建样式 （1）在属性面板样式的样式菜单中选择“管理样式”， 在打开的编辑样式表

8、对话框中单击“新建”按钮。 （2）使用菜单“文本”“CSS样式”“新建”。 （3）使用菜单“文本”“CSS样式”“管理样式”，在 打开的编辑样式表对话框中单击“新建”按钮。 （4）使用菜单“窗口”“CSS样式”打开“设计”面板组 中的“CSS样式”面板，单击下面的新建CSS样式按钮 （5）在编辑窗口中单击右键，在弹出的菜单中选择 “CSS样式”下的“管理样式”或“新建”。 Dreamweaver MX2004提供了方便的提供了方便的 CSS属性操作和应用功能的同时，还提供了大属性操作和应用功能的同时，还提供了大 量现成的量现成的CSS应用模板，可以在制作网页时直应用模板，可以在制作网页时直 接

9、使用。接使用。 类型 1.字体（字体（font-family） 2.大小（大小（font-size） 3.粗细（粗细（font-weight） 4.样式（样式（font-style） 5.变量变量 6.行高（行高（line-height） 7.大小写（大小写（text-transform） 8. 颜色（颜色（color） 9. 修饰（修饰（text-decoration） 1.背景颜色（背景颜色（background-color） 2.背景图像（背景图像（background-image） 3.重复（重复（background-repeat） 4.附件（附件（background-attach

10、ment） 5.背景图片位置（背景图片位置（background-position） 1.字母间距（字母间距（letter-spacing） 2. 字词间距（字词间距（word-spacing） 3.垂直对齐（垂直对齐（vertical-align） 4.文本对齐（文本对齐（text-align ） 5. 文本缩进（文本缩进（text-indent ） 6.空格（空格（white-space） 7.显示（显示（display） 1.宽（宽（width）和高（）和高（height）2.漂浮（漂浮（float）和清除（）和清除（clear） 3.填充（填充（padding） 4.边界（边界（mar

11、gin） 1.样式（样式（border-style） 2.宽度（宽度（border-width） 3.边框颜色（边框颜色（border-color） 列表 1.类型（类型（list-style-type ） 2.项目符号图像（项目符号图像（list-style-image） 3.位置（位置（list-style-position） 定位属性包括类型、溢出、Z轴、宽、高、位置、剪 辑的等，其作用和前面介绍的层的定义相同。事实上， 在对层的属性进行定义时，就是在层代码行中加入了 CSS代码。 1、Alpha 滤镜滤镜 2. BlendTrans滤镜滤镜 3.Blur 滤镜滤镜 Alpha滤镜是把一

12、个目标元素与背景混合，可以 指定数值来控制混合的程度，通俗地说就是一个元 素的透明度。通过指定坐标，可以指定点、线、面 的透明度。 BlendTrans滤镜产生一种淡入淡出的效果。 Blur滤镜产生模糊效果。 4.Chroma 滤镜滤镜 5. DropShadow 滤镜滤镜 Chroma属性可以在一个对象中指定一种颜 色为透明色。 DropShaow是设置对象的阴影效果。 6.FlipH和和FlipV 滤镜滤镜 FlipH和FlipV 滤镜分别是水平反转和垂直反转， 这两个滤镜没有参数。 7.Glow 滤镜滤镜 当对一个对象使用glow属性后，这个对象 的边缘就会产生类似发光的效果。 8.Gray ,Invert,Xray 滤镜滤镜 Gray滤镜是把一张图片变成灰度图 9.Light 滤镜滤镜 这个属性模拟光源的投射效果。 10.Mask