任务二网站主页面布局设计与制作

1依服务类型区分 2依主体性质区分 3各种网站类型在网络中所占的比重 商业、企业和政府机关类网站 1商业、企业类网站 2经济类网站 3社会和政府机关类网站信息、网络服务、教育类网站 1信息类网站 2网络服务类网站 3教育类网站休闲、时尚类网站 1时尚网站 2购物网站 3医学健康网站 4饮食网站 5宠物和儿童网站 6运动网站卡通和游戏类网站 1卡通网站 2娱乐和游戏网站 3娱乐圈人物网站电影、音乐、艺术类网站 1电影网站 2音乐网站 3艺术网站教育、科研网站 其他 政府网站 非赢利网站 个人网站 商业网站 企业网站 图图 各种网站类型在网络中所占的大致比重各种网站类型在网络中所占的大致比重 欣赏典型网站 资讯类 如新浪、搜狐等 资讯和形象类 如淘宝等 形象类 如宝马等 1网页（1）动态网页（2）交互式网页（3）静态网页 2网站（1）本地站点（2）远程站点（3）Web站点 网页界面的基本元素 网页页面的基本元素由页眉、导航条、文本、图像、页脚等组成，如图2-1所示。图图2-1 2-1 网页的基本元素网页的基本元素http:/http:/ 2导航条 3文本 4图像 5多媒体 6页脚添加超级链接添加超级链接修改文字属性修改文字属性制作第一个首页制作第一个首页 Dreamweaver Dreamweaver cs3 cs3界面简介界面简介 HTML是英文Hyper Text Markup Language的缩写，中文意为超文本标记语言，是目前经常采用的一种建立网页的脚本语言。HTML文件是纯文本的文件格式，可以直接用诸如记事本等任何文本编辑器来进行编辑。文件中的任何HTML元素（如文字、字体、字体大小、段落、图片、表格、超级链接等）都用不同的标签来描述，由此给出文件的结构和相互间的逻辑关系。为了对网页制作能够更好地把握，应该了解HTML。初识HTML 1用HTML编写一个简单的页面 2使用浏览器预览网页HTML基本结构 1页面整体标签 一个完整页面，其标签大体可以是如图3-9所示的结构。页面标题 页面主体内容 图图3-9 HTML3-9 HTML页面的标签结构页面的标签结构 HTML文件以标签开始以标签为结尾，其中包括头部（head）和主体（body）。头部是说明页面名称和页面相关信息的，即是以标签开始、以标签结束的部分。主体是以标签开始、以标签结束的部分。2头部标签 头部文件一般放置页面标题、创建网站的信息说明等，头部文件中的内容一般不在浏览器中显示，标题则在标题栏中显示。我们要养成制作标题的好习惯，因为当很多页面被打开在浏览者的屏幕中时，通常只能看到下面工具栏中显示的网页标题。此外，搜索引擎显示搜索的结果也是显示页面的标题。标题的标签是：标题名3主体标签 标签有很多属性，它定义了网页在浏览器中显示的内容。主体标签可以定义背景图像、背景颜色、文字颜色、超级链接的颜色等。主题标签的格式：background=“图片文件名”、text=“颜色值”、link=“颜色值”、vlink=“颜色值”、alink=“颜色值”常用HTML 标签的含义 1文本标签 表3-1列出了文本标签的说明。格式化文本 最大的标题 最小的标题 粗黑体字 斜体字 设置字体大小，从1到7 设置字体的颜色，使用名字或十六进制值 表表3-13-1文本标签说明文本标签说明2排版格式标签 表3-2列出了排版格式标签的说明。创建一个新的段落 将段落按左、中、右对齐 插入一个回车换行符 创建一个标有数字的列表 创建一个标有圆点的列表 放在每个圆点列表项之前，并加上一个圆点 一个用来排版大块HTML段落的标签，也用于格式化表 表表3-23-2排版格式标签说明排版格式标签说明3链接标签 表3-3给出了链接标签的说明。创建一个超链接 创建一个电子邮件的链接 创建一个位于文档内部的链接 创建一个锚链接表表3-33-3链接标签说明链接标签说明4图像标签 表3-4列出了图像标签的说明。添加一个图像 排列对齐一个图像：左中右或上中下 设置围绕一个图像的边框大小 加入一条水平线 设置水平线的大小 设置水平线的宽度（百分比或绝对像素点）创建一个没有阴影的水平线 表表3-43-4图像标签说明图像标签说明5表格标签 表3-5列出了表格标签的说明。创建一个表格单元行单元格 设置表格头（标题）：一个通常使用黑体居中文字的格子 设置围绕表格边框的宽度 设置表格单元格之间的空间大小 设置单元格边框与其内部内容之间空间的大小 设置表格的宽度（用绝对像素值或文档总宽度的百分比）or 设置表格格子的水平对齐（左中右）or 设置表格格子的垂直对齐（上中下）表表3-53-5表格标签说明表格标签说明 1什么是超级链接（1）绝对链接 绝对链接是一种指向某个页面精确位置的超级链接。（2）相对链接 相对链接是从当前页面位置出发指向目的页面位置的路径。2超级链接的实现（1）文字或图像链接（2）热区链接（3）锚链接（4）E-mail链接（5）空链接 1、矢量图和位图 2、颜色模式 1、新建网页图片文件 2、保存网页图片文件 3、打开网页图片 1、使用标尺 2、使用参考线 3、使用矩形工具 4、使用直线工具 5、使用单行（列）选框工具 1、设置前景色和背景色 2、使用油漆桶工具 3、使用渐变工具步骤：1、启动photoshop2、打开“新建”对话框3、设置前景色，使用渐变工具4、使用标尺和参考线5、绘制矩形、保存图片步骤：1、打开已有的图片文件tigao.psd2、设置前景色为蓝色3、绘制矩形4、设置前景色为黄色5、绘制4个矩形6、保存图片文件表格的一般应用表格的一般应用表格的特殊效果表格的特殊效果 利用表格设计页面布局利用表格设计页面布局 利用表格搭建页面实例利用表格搭建页面实例 表格在网页设计中的地位非常重要，主要表现在网页定位上。先介绍一下表格的标记。当我们在页面中插入一个表格后，可以在下面的标签提示区看到等标签，如图4-1所示。图图 表格的标签表格的标签 表格的标签是table，一个表格由开始到结束；说明表格的单元行，表有多少行就有多少个；说明表格的列数和相应栏目的名称，有多少个栏就有多少个；是单元格，它是组成表格的最根本元素。置入表格 表格的属性1表格的一般属性（1）表格的属性是由宽（width）=“像素或者百分比”和高（height）=“像素或者百分比”说明的。（2）表格边框的宽度（border）=“像素”，“像素”为宽度值。（3）表格边框的颜色（bordercolor）=“16进制的6位数”，格式为RGB，分别表示红、绿、兰。2表格的对齐属性（1）将整个表格居中（2）单元格中元素的水平对齐（3）单元格中元素的垂直对齐3表格、单元格中背景颜色、背景图属性（1）给整个表格添加背景色（2）给单元格添加背景色或背景图 4单元格之间的空隙属性 5单元格内容与单元格边界间的距离 表格的拆分与合并 一个像素宽的分隔线 制作细线表格 制作另一种细线表格 制作圆角表格 表格制作中的问题 在制作表格时，应该注意如下几点。（1）一个页面尽量不要使用一个表格制作，而是拆分成多个表格，且以三个为宜。（2）表格的嵌套层次尽量要少，最好不超过3层。（3）单一表格的结构尽量整齐。利用表格进行页面布局前的分析 进行切割 在Dreamweaver cs3建立页面 应用表格布局提高页面下载速度 用表格界定页面的结构，是在安排Web页面布局时最常用的方法之一。假设有一个最常见的Web页面布局，它由顶端的页眉部分、下面的导航条及两栏的文字内容构成，如图4-59所示。表格是网页中一个非常重要元素，因为HTML本身并没有提供更多的排版手段，因此我们往往就要借助表格来实现网页的精细排版。可以说表格是网页制作中最为重要的一个技巧，表格运用的好坏，直接反映了网页设计师的水平。1插入表格 2各级页面的链接 作业：学院各系部网站页面建立CSSCSS样式概念样式概念CSSCSS滤镜应用滤镜应用应用标签选择器制作滚动文字应用标签选择器制作滚动文字在网页中插入多媒体在网页中插入多媒体 CSS是英文Cascading Style Sheets的缩写，中文意为“层叠样式表”，是一种制作网页的新技术，为弥补HTML不足而发展出来的。CSS现在已经被大多浏览器所支持，越来越多的网页工作者认为它是网页设计中不可缺少的工具。创建CSS样式 自定义样式介绍 1类型样式 在“分类”栏里选择“类型（Type）”样式，一般用来定义字体、字号、颜色和行间距等，如图7-6所示。里面各项的说明如下所述。图图7-6 “7-6 “类型类型”样式属性样式属性2背景样式 在分类里选择“背景（Background）”样式，一般用来定义背景颜色或背景图像以及背景图像添加的位置等，如图7-7所示。图图7-7 “7-7 “背景背景”样式属性样式属性3区块样式 在分类里选择“区块（Block）”样式，一般用来定义页面文本元素的文字间距、对齐方式、上标、下标、排列方式、首行缩进等，如图7-8所示。图图7-8 “7-8 “区块区块”样式属性样式属性4方框样式 在分类里选择“方框（Box）”样式，一般用来定义对象的边界、间距、高度、宽度和漂浮方式等，如图7-9所示。图图7-9 “7-9 “方框方框”样式属性样式属性5边框样式 在分类里选择“边框（Border）”样式，一般用来定义对象边框的宽度、颜色及样式，如图7-10所示。图图7-10 “7-10 “边框边框”样式属性样式属性6列表样式 在分类里选择“列表（List）”样式，一般用来定义列表项样式和位置，如图7-11所示。图图7-11 “7-11 “列表列表”样式属性样式属性7定位样式 在分类里选择“定位（Positioning）”样式，一般定义页面元素时相当于给一个层定位，如图7-12所示。图图7-12 “7-12 “定位定位”样式属性样式属性8扩展样式 在分类里选择“扩展（Extensions）样式，一般定义页面元素的滤镜、分页和光标选项等属性，如图7-13所示。图图7-13 “7-13 “扩展扩展”样式属性样式属性添加样式的其他方法 1添加外部样式表 2将样式直接添加在HTML里CSS样式的使用 1设置链接的CSS样式 2添加在属性面板中的CSS样式 3添加在属性面板中的页面CSS属性 4CSS Style面板的应用 5CSS语法提示 层（Layer）也是可以用来定位的网页元素，和表格一样其内可以包含文本、图像或其他HTML文档、制作触发事件等。层的最大特点是它可以重叠放置，能够定义层和层之间的关系，可以在页面中被定义成隐藏或显示等方式。层的属性在于制作下拉菜单、鼠标触发事件、图片应用于时间轴等方面。层的创建及属性面板 1层的创建 2层的属性面板 层的面板层的使用 1利用溢出给层制作滚动条 2层的对齐 页面上有多个层时，可以使用层对齐命令达到对齐层的目的。3层的参数 可以通过设置层参数为新创建的层定义默认值，例如层的可见性、背景颜色、背景图像等。4层的嵌套关系 层的嵌套就是把一层建立在另一层中，就像子层在父层之中似地。通常子层的属性随父层属性。通过层嵌套，可以把层组合在一起。5把层转换为表格 因为层在网页布局上比较方便，所以有的人喜欢先通过层来进行设计。然后再通过Dreamweaver cs3将层转换为表格来确定位置。6把表格转换为层 当对页面布局不满意而需要调整时，也可以先把表格布局转换为层布局，然后通过移动层来调整布局。这样做有时会感到方便而快捷。7层制作实例