任务二网站主页面布局设计及制作
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<hr noshade>
创建一个没有阴影的水平线
5．表格标签
• 表3-5列出了表格标签的说明。
表3-5
<table></table> <tr></tr> <td></td> <th></th> <table border=数值> <table cellspacing=数值> <table cellpadding=数值> <table width=数值or %>
<font color=?></font>
设置字体的颜色，使用名字或十六 进制值
2．排版格式标签
• 表3-2列出了排版格式标签的说明。
表3-2
排版格式标签说明
<p>
<p align= left、center、right > <br> <ol></ol> <ul></ul> <li>
创建一个新的段落
表格标签说明
创建一个表格 单元行 单元格 设置表格头（标题）：一个通常使用黑 体居中文字的格子 设置围绕表格边框的宽度 设置表格单元格之间的空间大小 设置单元格边框与其内部内容之间空间 的大小 设置表格的宽度（用绝对像素值或文档 总宽度的百分比）
<tr align= left、center、right > or <td align= left、center、right >
步骤： 1、启动photoshop 2、打开“新建”对话框 3、设置前景色，使用渐变工具 4、使用标尺和参考线 5、绘制矩形、保存图片
练习
步骤： 1、打开已有的图片文件tigao.psd 2、设置前景色为蓝色 3、绘制矩形 4、设置前景色为黄色 5、绘制4个矩形 6、保存图片文件
任务2-5:网页内容排版
表格的标签
•
表格的标签是table，一个表格由 <table>开始到</table>结束；<tr>说明表格 的单元行，表有多少行就有多少个<tr>； <th>说明表格的列数和相应栏目的名称， 有多少个栏就有多少个<th>；<td>是单元 格，它是组成表格的最根本元素。
– 置入表格 – 表格的属性
2．超级链接的实现
– – – – – （1）文字或图像链接 （2）热区链接 （3）锚链接 （4）E-mail链接 （5）空链接
任务2-4:用photoshop或进行 主页效果图的制作
网页图片基础知识 编辑图片文件 辅助绘图工具 设置颜色
网页图片基础知识
• 1、矢量图和位图 • 2、颜色模式
编辑图片文件
常用HTML 标签的含义
• 1．文本标签
•
表3-1列出了文本标签的说明。
表3-1 <pre></pre> <h1></h1> <h6></h6> <b></b>
文本标签说明 格式化文本 最大的标题 最小的标题 粗黑体字
<i></i>
<font size=?></font>
斜体字
设置字体大小，从1到7
•
文件中的任何HTML元素（如文字、字 体、字体大小、段落、图片、表格、超级 链接等）都用不同的标签来描述，由此给 出文件的结构和相互间的逻辑关系。 • 为了对网页制作能够更好地把握，应 该了解HTML。
初识HTML
• 1．用HTML编写一个简单的页面 • 2．使用浏览器预览网页
HTML基本结构
3．主体标签
• <body>标签有很多属性，它定义了网 页在浏览器中显示的内容。主体标签可以 定义背景图像、背景颜色、文字颜色、超 级链接的颜色等。
• 主题标签的格式： • < body > background=“图片文件名”、 text=“颜色值”、link=“颜色值”、vlink=“颜 色值”、alink=“颜色值”</ body >
图7-7 “背景”样式属性
3．区块样式
• 在分类里选择“区块（Block）”样式， 一般用来定义页面文本元素的文字间距、 对齐方式、上标、下标、排列方式、首行 缩进等，如图7-8所示。
图7-8
“区块”样式属性
4．方框样式
• 1．页面整体标签
•
一个完整页面，其标签大体可以是如 图3-9所示的结构。
< html > <head> < title> 页面标题 </ title> </head> < body > 页面主体内容 < /body > < /html >
图3-9
HTML页面的标签结构
•
HTML文件以标签<html>开始以标签 </html>为结尾，其中包括头部（head）和 主体（body）。头部是说明页面名称和页 面相关信息的，即是以标签<head>开始、 以标签</head>结束的部分。主体是以标签 < body >开始、以标签< /body >结束的部 分。
– 创建CSS样式 – 自定义样式介绍
• 1．类型样式
•
在“分类”栏里选择“类型（Type）” 样式，一般用来定义字体、字号、颜色和 行间距等，如图7-6所示。里面各项的说明 如下所述。
图7-6
“类型”样式属性
2．背景样式
• 在分类里选择“背景（Background）” 样式，一般用来定义背景颜色或背景图像 以及背景图像添加的位置等，如图7-7所示。
1．页眉 2．导航条 3．文本 4．图像 5．多媒体 6．页脚
Dreamweaver cs3界面简介
制作第一个首页
修改文字属性
添加超级链接
HTML简介
• HTML是英文Hyper Text Markup Language的缩写，中文意为超文本标记语 言，是目前经常采用的一种建立网页的脚 本语言。 • HTML文件是纯文本的文件格式，可以 直接用诸如记事本等任何文本编辑器来进 行编辑。
利用表格搭建页面实例
• 表格是网页中一个非常重要元素，因 为HTML本身并没有提供更多的排版手段， 因此我们往往就要借助表格来实现网页的 精细排版。可以说表格是网页制作中最为 重要的一个技巧，表格运用的好坏，直接 反映了网页设计师的水平。
• 1．插入表格 • 2．各级页面的链接
– 作业：学院各系部网站页面建立
任务二：网站主页面布局 设计与制作
任务2-1 网站用户体验
• 1．依服务类型区分 • 2．依主体性质区分 • 3．各种网站类型在网络中所占的比重
网页设计的基本规律
– 商业、企业和政府机关类网站
• 1．商业、企业类网站 • 2．经济类网站 • 3．社会和政府机关类网站
信息、网络服务、教育类网站
• 1．信息类网站 • 2．网络服务类网站 • 3．教育类网站
表格的一般应用
表格的特殊效果
利用表格设计页面布局
利用表格搭建页面实例
表格的一般应用
• 表格在网页设计中的地位非常重要， 主要表现在网页定位上。 • 先介绍一下表格的标记。当我们在页 面中插入一个表格后，可以在下面的标签 提示区看到<table><tr><th><td>等标签， 如图4-1所示。
图
表格的特殊效果
– 一个像素宽的分隔线 – 制作细线表格 – 制作另一种细线表格 – 制作圆角表格 – 表格制作中的问题
• 在制作表格时，应该注意如下几点。 • （1）一个页面尽量不要使用一个表格制作， 而是拆分成多个表格，且以三个为宜。 • （2）表格的嵌套层次尽量要少，最好不超 过3层。 • （3）单一表格的结构尽量整齐。
• 1、新建网页图片文件 • 2、保存网页图片文件 • 3、打开网页图片
辅助绘图工具
• • • • • 1、使用标尺 2、使用参考线 3、使用矩形工具 4、使用直线工具 5、使用单行（列）选框工具
设置颜色
• 1、设置前景色和背景色 • 2、使用油漆桶工具 • 3、使用渐变工具
实例-设置网页图片
将段落按左、中、右对齐 插入一个回车换行符 创建一个标有数字的列表 创建一个标有圆点的列表 放在每个圆点列表项之前，并加上 一个圆点
<div align= left、center、 right >
一个用来排版大块HTML段落的标签， 也用于格式化表
3．链接标签
• 表3-3给出了链接标签的说明。
表3-3 <a href="URL地址"></a> <a href="mailto:EMAIL"></a> <a name="NAME"></a> <a href="#NAME"></a> 链接标签说明 创建一个超链接 创建一个电子邮件的链接 创建一个位于文档内部的链接 创建一个锚链接
<tr valign=?> or <td valign=?>
设置表格格子的水平对齐（左中右）
设置表格格子的垂直对齐（上中下）
添加超级链接
• 1．什么是超级链接
– （1）绝对链接
• •
绝对链接是一种指向某个页面精确位 置的超级链接。
– （2）相对链接
相对链接是从当前页面位置出发指向 目的页面位置的路径。
4．图像标签
• 表3-4列出了图像标签的说明。
表3-4
<img src="name">
图像标签说明
添加一个图像
<img src="name" align= left、 排列对齐一个图像：左中右或上中 center、right > 下
<img src="name" border=数值> <hr> <hr size=数值> <hr width=数值> 设置围绕一个图像的边框大小 加入一条水平线 设置水平线的大小 设置水平线的宽度（百分比或绝对 像素点）
2．头部标签
• 头部文件一般放置页面标题、创建网 站的信息说明等，头部文件中的内容一般 不在浏览器中显示，标题则在标题栏中显 示。
•
我们要养成制作标题的好习惯，因为 当很多页面被打开在浏览者的屏幕中时， 通常只能看到下面工具栏中显示的网页标 题。此外，搜索引擎显示搜索的结果也是 显示页面的标题。 • 标题的标签是：< title >标题名< /title >
休闲、时尚类网站
• • • • • • 1．时尚网站 2．购物网站 3．医学健康网站 4．饮食网站 5．宠物和儿童网站 6．运动网站
卡通和游戏类网站
• 1．卡通网站 • 2．娱乐和游戏网站 • 3．娱乐圈人物网站
电影、音乐、艺术类网站
• 1．电影网站 • 2．音乐网站 • 3．艺术网站
企业网站
2．表格的对齐属性
– （1）将整个表格居中 – （2）单元格中元素的水平对齐 – （3）单元格中元素的垂直对齐
3．表格、单元格中背景颜色、背景 图属性
– （1）给整个表格添加背景色 – （2）给单元格添加背景色或背景图
• 4．单元格之间的空隙属性 • 5．单元格内容与单元格边界间的距离
– 表格的拆分与合并
• 2．网站
– （1）本地站点 – （2）远程站点 – （3）Web站点
Fra Baidu bibliotek
任务2-3: 主页布局设计
– 网页界面的基本元素
•
网页页面的基本元素由页眉、导航条、 文本、图像、页脚等组成，如图2-1所示。
图2-1 网页的基本元素 http://www.itcatmedia.com/
• • • • • •
任务2-6:网页样式设计
CSS样式概念
CSS滤镜应用
应用标签选择器制作滚动文字
在网页中插入多媒体
CSS样式概念
• CSS是英文Cascading Style Sheets的 缩写，中文意为“层叠样式表”，是一种 制作网页的新技术，为弥补HTML不足而发 展出来的。 • CSS现在已经被大多浏览器所支持， 越来越多的网页工作者认为它是网页设计 中不可缺少的工具。
1．表格的一般属性
• （1）表格的属性是由宽（width）=“像素或 者百分比”和高（height）=“像素或者百分 比”说明的。 • （2）表格边框的宽度（border）=“像素”， “像素”为宽度值。 • （3）表格边框的颜色（bordercolor）=“16 进制的6位数”，格式为RGB，分别表示红、 绿、兰。
商业网站
个人网站
教育、科研网站
非赢利网站
政府网站
其他
图 各种网站类型在网络中所占的大致比重
任务2-1 网站用户体验
• • • • 欣赏典型网站 资讯类 如新浪、搜狐等 资讯和形象类 如淘宝等 形象类 如宝马等
任务2-2初识Dreamweaver
• 1．网页
– （1）动态网页 – （2）交互式网页 – （3）静态网页
利用表格设计页面布局
– – – – 利用表格进行页面布局前的分析 进行切割 在Dreamweaver cs3建立页面 应用表格布局提高页面下载速度
•
用表格界定页面的结构，是在安排 Web页面布局时最常用的方法之一。假设 有一个最常见的Web页面布局，它由顶端 的页眉部分、下面的导航条及两栏的文字 内容构成，如图4-59所示。