Download presentation
Presentation is loading. Please wait.
1
任务二：网站主页面布局设计与制作
2
任务2-1 网站用户体验 1．依服务类型区分 2．依主体性质区分 3．各种网站类型在网络中所占的比重
3
网页设计的基本规律 商业、企业和政府机关类网站 1．商业、企业类网站 2．经济类网站 3．社会和政府机关类网站
4
信息、网络服务、教育类网站 1．信息类网站 2．网络服务类网站 3．教育类网站
5
休闲、时尚类网站 1．时尚网站 2．购物网站 3．医学健康网站 4．饮食网站 5．宠物和儿童网站 6．运动网站
6
卡通和游戏类网站 1．卡通网站 2．娱乐和游戏网站 3．娱乐圈人物网站
7
电影、音乐、艺术类网站 1．电影网站 2．音乐网站 3．艺术网站
8
图 各种网站类型在网络中所占的大致比重
9
任务2-1 网站用户体验 欣赏典型网站 资讯类 如新浪、搜狐等 资讯和形象类 如淘宝等 形象类 如宝马等
10
任务2-2初识Dreamweaver 1．网页 2．网站 （1）动态网页 （2）交互式网页 （3）静态网页 （1）本地站点 （2）远程站点
（3）Web站点
11
任务2-3: 主页布局设计 网页界面的基本元素 网页页面的基本元素由页眉、导航条、文本、图像、页脚等组成，如图2-1所示。
12
图2-1 网页的基本元素 http://www.itcatmedia.com/
图2-1 网页的基本元素
13
1．页眉 2．导航条 3．文本 4．图像 5．多媒体 6．页脚
14
Dreamweaver cs3界面简介 制作第一个首页 修改文字属性 添加超级链接
15
HTML简介 HTML是英文Hyper Text Markup Language的缩写，中文意为超文本标记语言，是目前经常采用的一种建立网页的脚本语言。 HTML文件是纯文本的文件格式，可以直接用诸如记事本等任何文本编辑器来进行编辑。
16
文件中的任何HTML元素（如文字、字体、字体大小、段落、图片、表格、超级链接等）都用不同的标签来描述，由此给出文件的结构和相互间的逻辑关系。
17
初识HTML 1．用HTML编写一个简单的页面 2．使用浏览器预览网页
18
HTML基本结构 1．页面整体标签 一个完整页面，其标签大体可以是如图3-9所示的结构。
19
图3-9 HTML页面的标签结构
20
HTML文件以标签<html>开始以标签</html>为结尾，其中包括头部（head）和主体（body）。头部是说明页面名称和页面相关信息的，即是以标签<head>开始、以标签</head>结束的部分。主体是以标签< body >开始、以标签< /body >结束的部分。
21
2．头部标签 头部文件一般放置页面标题、创建网站的信息说明等，头部文件中的内容一般不在浏览器中显示，标题则在标题栏中显示。
22
我们要养成制作标题的好习惯，因为当很多页面被打开在浏览者的屏幕中时，通常只能看到下面工具栏中显示的网页标题。此外，搜索引擎显示搜索的结果也是显示页面的标题。
标题的标签是：< title >标题名< /title >
23
3．主体标签 <body>标签有很多属性，它定义了网页在浏览器中显示的内容。主体标签可以定义背景图像、背景颜色、文字颜色、超级链接的颜色等。
24
主题标签的格式： < body > background=“图片文件名”、text=“颜色值”、link=“颜色值”、vlink=“颜色值”、alink=“颜色值”</ body >
25
常用HTML 标签的含义 1．文本标签 表3-1列出了文本标签的说明。
26
表3-1 文本标签说明 <pre></pre> 格式化文本 <h1></h1> 最大的标题 <h6></h6> 最小的标题 <b></b> 粗黑体字 <i></i> 斜体字 <font size=?></font> 设置字体大小，从1到7 <font color=?></font> 设置字体的颜色，使用名字或十六进制值
27
2．排版格式标签 表3-2列出了排版格式标签的说明。
28
表3-2 排版格式标签说明 <p> 创建一个新的段落 <p align= left、center、right > 将段落按左、中、右对齐 <br> 插入一个回车换行符 <ol></ol> 创建一个标有数字的列表 <ul></ul> 创建一个标有圆点的列表 <li> 放在每个圆点列表项之前，并加上一个圆点 <div align= left、center、right > 一个用来排版大块HTML段落的标签，也用于格式化表
29
3．链接标签 表3-3给出了链接标签的说明。 表3-3 链接标签说明 <a href="URL地址"></a>
表3-3 链接标签说明 <a href="URL地址"></a> 创建一个超链接 <a href="mailto: "></a> 创建一个电子邮件的链接 <a name="NAME"></a> 创建一个位于文档内部的链接 <a href="#NAME"></a> 创建一个锚链接
30
4．图像标签 表3-4列出了图像标签的说明。
31
表3-4 图像标签说明 <img src="name"> 添加一个图像 <img src="name" align= left、center、right > 排列对齐一个图像：左中右或上中下 <img src="name" border=数值> 设置围绕一个图像的边框大小 <hr> 加入一条水平线 <hr size=数值> 设置水平线的大小 <hr width=数值> 设置水平线的宽度（百分比或绝对像素点） <hr noshade> 创建一个没有阴影的水平线
32
5．表格标签 表3-5列出了表格标签的说明。
33
表3-5 表格标签说明 <table></table> 创建一个表格 <tr></tr>
表3-5 表格标签说明 <table></table> 创建一个表格 <tr></tr> 单元行 <td></td> 单元格 <th></th> 设置表格头（标题）：一个通常使用黑体居中文字的格子 <table border=数值> 设置围绕表格边框的宽度 <table cellspacing=数值> 设置表格单元格之间的空间大小 <table cellpadding=数值> 设置单元格边框与其内部内容之间空间的大小 <table width=数值or %> 设置表格的宽度（用绝对像素值或文档总宽度的百分比） <tr align= left、center、right > or <td align= left、center、right > 设置表格格子的水平对齐（左中右） <tr valign=?> or <td valign=?> 设置表格格子的垂直对齐（上中下）
34
添加超级链接 绝对链接是一种指向某个页面精确位置的超级链接。 相对链接是从当前页面位置出发指向目的页面位置的路径。 1．什么是超级链接
（1）绝对链接 绝对链接是一种指向某个页面精确位置的超级链接。 （2）相对链接 相对链接是从当前页面位置出发指向目的页面位置的路径。
35
2．超级链接的实现 （1）文字或图像链接 （2）热区链接 （3）锚链接 （4） 链接 （5）空链接
36
任务2-4:用photoshop或进行主页效果图的制作
网页图片基础知识 编辑图片文件 辅助绘图工具 设置颜色
37
网页图片基础知识 1、矢量图和位图 2、颜色模式
38
编辑图片文件 1、新建网页图片文件 2、保存网页图片文件 3、打开网页图片
39
辅助绘图工具 1、使用标尺 2、使用参考线 3、使用矩形工具 4、使用直线工具 5、使用单行（列）选框工具
40
设置颜色 1、设置前景色和背景色 2、使用油漆桶工具 3、使用渐变工具
41
实例-设置网页图片 步骤： 1、启动photoshop 2、打开“新建”对话框 3、设置前景色，使用渐变工具 4、使用标尺和参考线
5、绘制矩形、保存图片
42
练习 步骤： 1、打开已有的图片文件tigao.psd 2、设置前景色为蓝色 3、绘制矩形 4、设置前景色为黄色 5、绘制4个矩形
6、保存图片文件
43
任务2-5:网页内容排版 表格的一般应用 表格的特殊效果 利用表格设计页面布局 利用表格搭建页面实例
44
表格的一般应用 表格在网页设计中的地位非常重要，主要表现在网页定位上。
先介绍一下表格的标记。当我们在页面中插入一个表格后，可以在下面的标签提示区看到<table><tr><th><td>等标签，如图4-1所示。
45
图 表格的标签
46
表格的标签是table，一个表格由<table>开始到</table>结束；<tr>说明表格的单元行，表有多少行就有多少个<tr>；<th>说明表格的列数和相应栏目的名称，有多少个栏就有多少个<th>；<td>是单元格，它是组成表格的最根本元素。
47
置入表格 表格的属性
48
1．表格的一般属性 （1）表格的属性是由宽（width）=“像素或者百分比”和高（height）=“像素或者百分比”说明的。
（2）表格边框的宽度（border）=“像素”，“像素”为宽度值。 （3）表格边框的颜色（bordercolor）=“16进制的6位数”，格式为RGB，分别表示红、绿、兰。
49
2．表格的对齐属性 （1）将整个表格居中 （2）单元格中元素的水平对齐 （3）单元格中元素的垂直对齐
50
3．表格、单元格中背景颜色、背景图属性 （1）给整个表格添加背景色 （2）给单元格添加背景色或背景图
51
4．单元格之间的空隙属性 5．单元格内容与单元格边界间的距离 表格的拆分与合并
52
表格的特殊效果 一个像素宽的分隔线 制作细线表格 制作另一种细线表格 制作圆角表格 表格制作中的问题
53
在制作表格时，应该注意如下几点。 （1）一个页面尽量不要使用一个表格制作，而是拆分成多个表格，且以三个为宜。 （2）表格的嵌套层次尽量要少，最好不超过3层。 （3）单一表格的结构尽量整齐。
54
利用表格设计页面布局 利用表格进行页面布局前的分析 进行切割 在Dreamweaver cs3建立页面 应用表格布局提高页面下载速度
55
用表格界定页面的结构，是在安排Web页面布局时最常用的方法之一。假设有一个最常见的Web页面布局，它由顶端的页眉部分、下面的导航条及两栏的文字内容构成，如图4-59所示。
56
利用表格搭建页面实例 表格是网页中一个非常重要元素，因为HTML本身并没有提供更多的排版手段，因此我们往往就要借助表格来实现网页的精细排版。可以说表格是网页制作中最为重要的一个技巧，表格运用的好坏，直接反映了网页设计师的水平。
57
1．插入表格 2．各级页面的链接 作业：学院各系部网站页面建立
58
任务2-6:网页样式设计 CSS样式概念 CSS滤镜应用 应用标签选择器制作滚动文字 在网页中插入多媒体
59
CSS样式概念 CSS是英文Cascading Style Sheets的缩写，中文意为“层叠样式表”，是一种制作网页的新技术，为弥补HTML不足而发展出来的。 CSS现在已经被大多浏览器所支持，越来越多的网页工作者认为它是网页设计中不可缺少的工具。
60
在“分类”栏里选择“类型（Type）”样式，一般用来定义字体、字号、颜色和行间距等，如图7-6所示。里面各项的说明如下所述。
创建CSS样式 自定义样式介绍 1．类型样式 在“分类”栏里选择“类型（Type）”样式，一般用来定义字体、字号、颜色和行间距等，如图7-6所示。里面各项的说明如下所述。
61
图7-6 “类型”样式属性
62
2．背景样式 在分类里选择“背景（Background）”样式，一般用来定义背景颜色或背景图像以及背景图像添加的位置等，如图7-7所示。
63
图7-7 “背景”样式属性
64
3．区块样式 在分类里选择“区块（Block）”样式，一般用来定义页面文本元素的文字间距、对齐方式、上标、下标、排列方式、首行缩进等，如图7-8所示。
65
图7-8 “区块”样式属性
66
4．方框样式 在分类里选择“方框（Box）”样式，一般用来定义对象的边界、间距、高度、宽度和漂浮方式等，如图7-9所示。
67
图7-9 “方框”样式属性
68
5．边框样式 在分类里选择“边框（Border）”样式，一般用来定义对象边框的宽度、颜色及样式，如图7-10所示。
69
图7-10 “边框”样式属性
70
6．列表样式 在分类里选择“列表（List）”样式，一般用来定义列表项样式和位置，如图7-11所示。
71
图7-11 “列表”样式属性
72
7．定位样式 在分类里选择“定位（Positioning）”样式，一般定义页面元素时相当于给一个层定位，如图7-12所示。
73
图7-12 “定位”样式属性
74
8．扩展样式 在分类里选择“扩展（Extensions）样式，一般定义页面元素的滤镜、分页和光标选项等属性，如图7-13所示。
75
图7-13 “扩展”样式属性
76
添加样式的其他方法 1．添加外部样式表 2．将样式直接添加在HTML里
77
CSS样式的使用 1．设置链接的CSS样式 2．添加在属性面板中的CSS样式 3．添加在属性面板中的页面CSS属性
4．CSS Style面板的应用 5．CSS语法提示
78
层 层（Layer）也是可以用来定位的网页元素，和表格一样其内可以包含文本、图像或其他HTML文档、制作触发事件等。层的最大特点是它可以重叠放置，能够定义层和层之间的关系，可以在页面中被定义成隐藏或显示等方式。层的属性在于制作下拉菜单、鼠标触发事件、图片应用于时间轴等方面。
79
层的创建及属性面板 1．层的创建 2．层的属性面板 层的面板
80
层的使用 页面上有多个层时，可以使用层对齐命令达到对齐层的目的。
1．利用溢出给层制作滚动条 2．层的对齐 页面上有多个层时，可以使用层对齐命令达到对齐层的目的。 3．层的参数 可以通过设置层参数为新创建的层定义默认值，例如层的可见性、背景颜色、背景图像等。
81
4．层的嵌套关系 层的嵌套就是把一层建立在另一层中，就像子层在父层之中似地。通常子层的属性随父层属性。通过层嵌套，可以把层组合在一起。
82
5．把层转换为表格 因为层在网页布局上比较方便，所以有的人喜欢先通过层来进行设计。然后再通过Dreamweaver cs3将层转换为表格来确定位置。
83
6．把表格转换为层 当对页面布局不满意而需要调整时，也可以先把表格布局转换为层布局，然后通过移动层来调整布局。这样做有时会感到方便而快捷。
7．层制作实例
Similar presentations
