任务二网站主页面布局设计与制作教学讲义-豆柴文库

您所在位置：网站首页 / 任务二网站主页面布局设计与制作教学讲义.ppt / 文档详情

免费试读已结束，剩余 78 页请下载文档后查看

10 金币

下载文档

/ 83

下载提示

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

文本预览

任务二：网站主页面布局设计与制作任务2-1网站用户体验网页设计的基本规律信息、网络服务、教育类网站卡通和游戏类网站电影、音乐、艺术类网站图各种网站类型在网络中所占的大致比重任务2-1网站用户体验任务2-2初识Dreamweaver任务2-3:主页布局设计图2-1网页的基本元素http://www.itcatmedia.com/1．页眉
2．导航条
3．文本
4．图像
5．多媒体
6．页脚添加超级链接HTML简介文件中的任何HTML元素（如文字、字体、字体大小、段落、图片、表格、超级链接等）都用不同的标签来描述，由此给出文件的结构和相互间的逻辑关系。
为了对网页制作能够更好地把握，应该了解HTML。初识HTMLHTML基本结构图3-9HTML页面的标签结构HTML文件以标签<html>开始以标签</html>为结尾，其中包括头部（head）和主体（body）。头部是说明页面名称和页面相关信息的，即是以标签<head>开始、以标签</head>结束的部分。主体是以标签<body>开始、以标签</body>结束的部分。2．头部标签我们要养成制作标题的好习惯，因为当很多页面被打开在浏览者的屏幕中时，通常只能看到下面工具栏中显示的网页标题。此外，搜索引擎显示搜索的结果也是显示页面的标题。
标题的标签是：<title>标题名</title>
3．主体标签主题标签的格式：
<body>background=“图片文件名”、text=“颜色值”、link=“颜色值”、vlink=“颜色值”、alink=“颜色值”</body>
常用HTML标签的含义<pre></pre>2．排版格式标签<p>3．链接标签4．图像标签<imgsrc="name">5．表格标签<table></table>添加超级链接2．超级链接的实现任务2-4:用photoshop或进行主页效果图的制作网页图片基础知识编辑图片文件辅助绘图工具设置颜色实例-设置网页图片练习任务2-5:网页内容排版表格的一般应用图表格的标签表格的标签是table，一个表格由<table>开始到</table>结束；<tr>说明表格的单元行，表有多少行就有多少个<tr>；<th>说明表格的列数和相应栏目的名称，有多少个栏就有多少个<th>；<td>是单元格，它是组成表格的最根本元素。
置入表格
表格的属性
1．表格的一般属性2．表格的对齐属性3．表格、单元格中背景颜色、背景图属性4．单元格之间的空隙属性
5．单元格内容与单元格边界间的距离
表格的拆分与合并表格的特殊效果在制作表格时，应该注意如下几点。
（1）一个页面尽量不要使用一个表格制作，而是拆分成多个表格，且以三个为宜。
（2）表格的嵌套层次尽量要少，最好不超过3层。
（3）单一表格的结构尽量整齐。利用表格设计页面布局用表格界定页面的结构，是在安排Web页面布局时最常用的方法之一。假设有一个最常见的Web页面布局，它由顶端的页眉部分、下面的导航条及两栏的文字内容构成，如图4-59所示。利用表格搭建页面实例任务2-6:网页样式设计CSS样式概念创建CSS样式
自定义样式介绍
1．类型样式
在“分类”栏里选择“类型（Type）”样式，一般用来定义字体、字号、颜色和行间距等，如图7-6所示。里面各项的说明如下所述。图7-6“类型”样式属性2．背景样式图7-7“背景”样式属性3．区块样式图7-8“区块”样式属性4．方框样式图7-9“方框”样式属性5．边框样式图7-10“边框”样式属性6．列表样式图7-11“列表”样式属性7．定位样式图7-12“定位”样式属性8．扩展样式图7-13“扩展”样式属性添加样式的其他方法CSS样式的使用层层的创建及属性面板层的使用4．层的嵌套关系5．把层转换为表格6．把表格转换为层