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