网页设计第七章.ppt

网页设计与制作教程网页设计与制作教程第七章第七章网站设计案例网站设计案例第七章第七章 网站设计案例网站设计案例网站网站设计设计是一个系是一个系统统工程，由多工程，由多项项工作工作组组成，成，各各项项工作之工作之间间互相依互相依赖赖，并不孤立。在开始，并不孤立。在开始设计设计之前，之前，设计设计者者应该对应该对网站的网站的设计设计流程有一个流程有一个总总体体性的把握。更具体地，即性的把握。更具体地，即设计设计者者应应遵循一定的原遵循一定的原则设计则设计网站，并在网站，并在设计设计之前先之前先对对网站有一个整体网站有一个整体的的规规划，划，进进行各种准行各种准备备工作。工作。准准备备工作全部完成后，才可工作全部完成后，才可进进行行细节细节化的化的页页面面设计设计与制作。制作完成后可以将网站与制作。制作完成后可以将网站发发布，即申布，即申请购买请购买域名与空域名与空间间，将制作好的网站文件，将制作好的网站文件夹夹上上传传至空至空间间中并与域名中并与域名绑绑定。完成定。完成这这一步后即得到了一步后即得到了一个完整一个完整实实用、可在整个用、可在整个InternetInternet上上访问访问的网站。的网站。7.1 网站系网站系统设计统设计7.1.1 网站设计的基本过程1.分析阶段：确定站点的目标、客户群、主题、规模、站点结构、栏目和界面风格，制定出详细的计划。2.设计阶段：制定主页的结构、连接方式和站点的模块划分方式，并收集相关的素材，制作必要的组件。3.实现阶段：选择适当的工具、语言创建网页，编写或制作出各个不同功能网页的代码，确定网页之间的关系，建立网页之间的链接。4.测试阶段：利用浏览器测试网页文档的正确性、可用性和健壮性，及时纠正错误，杜绝漏洞。5.维护阶段：在站点运行过程中，需要经常对制作好的网页文档进行更新和完善。7.1.2 网站设计的基本原则1.速度优先原则2.标题设计原则3.内容更新原则4.艺术处理原则（1）网络统一（2）版面编排（3）总体性（4）色彩处理5.操作简便原则6.易于维护原则7.2 网站内容设计 一般的可以将网站按照主题性质不同分为政府网站、企业网站、商业网站、教育科研机构网站、个人网站、其它非盈利机构网站以及其它类型的网站。进行网站规划也就是组织网站的内容和结构。1.线性结构2.树型结构3.网型结构7.2.1 网页外观设计网站规划完成后，就可以开始设计具体的页面了。在设计页面时要明确网站发布的是什么信息，不同的网站有不同的风格。例如这里制作的是一个汽车租赁公司的网站，明确主题后，可绘制出网站的结构图。1.绘制页面结构草图2.绘制网页效果图效果图是网页结构草图的基础上，利用绘图软件进行进一步精细地描绘3.效果图切割保存（1）效果图中并非所有的图样都会应用在网页当中，尤其是效果图当中那些需要修改的地方，更不能直接贴入网页。（2）效果图整体上较大，如果不分开插入网页，用户会感觉网页的打开速度很慢。分割成许多小图之后，打开网页时边浏览器一边显示部分图片，一边打开还未显示的那些，提升了用户体验。（3）效果图切割也是为了满足Dreamweaver设计网页时的排版布局需要。Photoshop除了可以用来绘制效果图，也能完成效果图的切割工作，如图所示，选取Photoshop工具箱中的“切片工具”，将效果图中有用的部分切割下来。绘制切片时注意查看切片的属性，要精确调整它们的大小和位置。所有的切片绘制、调整完毕后，选择文件存储为Web所用格式，将所有切片保存下来，每一个都自动保存成一个小图像文件7.2.2 网站制作流程简介在网站的创作过程中，一般的流程是制作人先在本地计算机上将网站全部制作完成，再将网站的所有文件上传发布到事先申请的Web服务器上。所以第一步要做的事情是创建一个本地网站并开始制作，其过程如下。1.建立空白站点2.给空白站点添加文件夹和文件（1）添加主页（2）添加文件夹和其它文件。1.页面布局（1）打开主页，进入布局模式（2）绘制布局表格和布局单元格2.添加内容进入标准模式后，布局表格连同布局单元格一起，变成了普通的虚线表格（零线宽表格）。将效果图切割下来的小图片依次插入到对应的单元格中，如图完成后的效果如图3.设置超链接在Dreamweaver中设置超链接十分简单。只要选中想到设置为超链接的文字、图片等元素，在该元素的属性窗口中就有链接设置框，将相应的URL填入即可。7.3 个人网站设计实例7.3.1首页设计第一步，使用平面图形设计软件Photoshop制作网站效果图，将效果图进行切片以获取网页制作中需要的图像素材设计好的效果图如图第二步，在Dreamweaver软件中建立空白网站，并向空白网站中添加必要的文件夹和文件，如图第三步，在文件面板中双击打开index.html进行编辑本例中的网站准备实现这样一种效果：在浏览网站的过程中页面的上部维持不变，变化的是网页的中下部分。可以用框架结构实现这样的功能。具体步骤是：在index.html的编辑界面下，点击Dreamweaver插入工具栏的“布局”选项卡，找到其中的“框架”图标，在下拉菜单中选择“顶部”框架。这里会弹出对话框提示输入每个框架的名称，可以不输入，即保留框架的默认名称：TopFrame和MainFrame。在页面中添加了上下二分式的“顶部框架”后，还需要对各个框架和框架的集合：“框架”集进进行设置，调整它们的高度或宽度，设置其边框是否可见，及是否允许框架中嵌入的网页滚动等。设置框架和框架集最好使用“框架面板”框架面板如图框架和框架集属性设置完成之后，点击菜单文件保存全部，将所有的设置保存。这里会提示保存框架集文件，一定要把框架集文件保存成index.html文件。框架集属性设置编辑上部框架源文件top.html。虽然可以在主页index.html中编辑这两个文件，但实际上这种做法是很不方便的。正确的方法是在文件面板中分别双击打开top.html和main.html进行编辑。top.html的制作为了使制作更加简单，可以将效果图或效果图的一部分作为“跟踪图像”加载到网页中来。“跟踪图像”类似于网页背景图，只不过这种“背景图”只在网页编辑制作时显示，网站完成、上传之后，“跟踪图像”就不再显示了。将网站首页整体效果图的上部切下保存，选择菜单查看跟踪图像载入，将效果图的上部加载到网页当中来，可以将透明度设小一点，如60%。加载后的效果如图接下来的工作是页面布局。页面布局的作用是使上述的页面元素在网页上位置固定下来，从而使网页的结构、风格在每次浏览时都固定一致，也方便了网页的设计者在制作页面时能够严格按照网页草图或效果图实现自己的设计意图。“布局表格”和“普通表格”两种布局的区别是，利用前者进行设计时制作者的自由度非常大，可以将单元格很方便地绘制在任何地方，因此这种方法比较适合网页制作的熟练者或有美术功底的制作者。普通表格排版方式与之相反，使用起来相对简单、规整，更适用于初学者和非艺术类设计者。下面介绍具体的布局方法。在top.html设计视图中插入一个表格，设置为3行2列，表格宽度为100%，“边框粗细”、“单元格边距”和“单元格间距”均为0，点击确定，如图表格插入后，调整表格各行的高度和各列的宽度，适当地合并或拆分一些单元格，使效果图上的各个元素恰好位于各单元格之中，如图注意调整行和列的时候，要遵守“从上到下，从左到右”的原则，原因是改变某一行时，会影响到其下各行的位置；调整某一列也是类似的，会使其右边各列的位置发生改变。做完之后不要忘记选中整个表格，选择对齐方式为“居中对象”。刚刚插入的表格并没有顾及到右下角的“首页”和“日志”等几个超链接。这时可以插入一个新的表格，设置其行数为一行，把这几个超链接包括在其中。方法是将光标移动到原表格的右边，按键盘下的回车键，当光标出现在表格下方时，再插入一个表格，对齐方式也要设为“居中对象”，效果如图下面的操作是在布局完成之后的表格中插入文字和图片等页面元素。方法是点击菜单查看跟踪图像显示，将“显示”选项中的勾取消掉，达到隐藏跟踪图像的效果。这一步做完之后的效果如图下面结合本例介绍CSS设置大量不同的文字格式点击打开Dreamweaver窗口右侧的CSS面板，如图再点击其中的“新建CSS规则”小图标，弹出“新建CSS规则”对话框，如图新建CSS规则对话框中包括三个必要设置：类型、名称（或标签、选择器）和规则的定义位置。CSS类型有三种：CSS类、CSS标签和CSS高级。这里将“选择器类型”设置为“类”，名称设为“.Text1”，注意CSS类的名称前必须有一个“.”，以免和标签等其它的名称相混淆。因为之前并没有建立样式表文件，故选择将该CSS类定义在“新建样式表文件”中。点击“确定”按钮，将新建的样式表文件命名为“Style.css”，保存在站点根目录下，如图点击“保存”按钮将Style.css文件保存后，随即弹出“.Text1的CSS规则定义”对话框，在对话框中填入文字字体、大小、样式和颜色等设置。这里将字体设置成“Verdana”，大小设置为14像素，粗细设置为“粗体”，颜色为“#1d6bae”，如图用同样的方法建立另三个CSS类.Title1、.Text2和.Text3。.Title1类设置为“Verdana”字体，14像素大小，粗细为“粗体”，颜色为黑色。.Text2和.Text3类均设置为“Verdana”字体，11像素大小，颜色为“#474747”，所不同的是.Text2带下划线，.Text3不带。这三个CSS类也都选择定义在Style.css文件中完成并保存后，将上述定义的CSS类应用于当前制作的网页，方法是选中需要设置格式的文字，在属性面板“样式”下框中选择所需要的CSS类，如图。完成后的文字效果如图。超链接的默认格式是比较粗糙的，如图自定义超链接格式比较好的方法就是前面提到的CSS高级规则。完成后的效果如图至此，top.html的制作已接近尾声。关于CSS的定义最后要介绍的是修改光标图案。众所周知，浏览器窗口内的默认光标形状是一个“箭头”，实际上这是可以改变的。预先在images文件夹中放入一个图标文件cur.ani，接着在Style.css样式表文件中添加代码：body cursor:url(images/cur.ani);即可实现自定义浏览器光标的效果，最终效果如图最后介绍如何在top.html中添加音乐。添加完成后添加完成后编辑编辑下框架源文件下框架源文件main.html。在。在Dreamweaver文件面板中双文件面板中双击击打开打开main.html进进行行编辑编辑，和和top.html的制作方法一的制作方法一样样，一开始也可以，一开始也可以载载入跟踪入跟踪图图像，并插入一个表格像，并插入一个表格进进行排版布局。跟踪行排版布局。跟踪图图像像载载入入后如果位置不合理，可以利用菜后如果位置不合理，可以利用菜单查单查看跟踪看跟踪图图像像调调整整位置位置这这一一选项进选项进行行调调整。插入表格的整。插入表格的规规格是格是5行行5列，列，其它其它设设置同置同top.html。插入表格后。插入表格后进进行行调调整，合并一整，合并一些些单单元格，效果如元格，效果如图图同样向表格中的各单元格中插入准备好的图像素材，注意Dreamweaver提示“是否愿意将文件复制到站点根目录”时一定要选“是”。首先将周围四个角的图片插入，效果如图，然后把表格中央填充代码为“#474747”的颜色，如图最后向填充了颜色的中心单元格中加入预先准备的flash动画，设置该单元格的水平对齐方式为“居中”，垂直对齐方式也为“居中”。完成后保存文件，回到index.html编辑界面进入首页的最终预览，到这里首页的制作全部完成，如图7.3.2其他其他页设计第一个要介绍的是blog.html页面 第二个子页面pic.html对应首页中的超链接“照片”第三个子页面名称为my.html，对应首页中的超链接“关于”第四个子页面是link.html，对应超链接“链接”最后的子页面名称为guest.html，对应首页中的超链接“留言”1.blog.html页面 2.pic.html 和 3.my.html 4.link.html 5.guest.html 创建并打开编译guest.html，在空白页面中插入一个一行一列，768像素宽的表格，居中对齐并设高度为500。打开“表单”插入栏，在表格中插入一个“字段集”，设置标签为“用户名与密码 创建并打开编译guest.html，在空白页面中插入一个一行一列，768像素宽的表格，居中对齐并设高度为500。打开“表单”插入栏，在表格中插入一个“字段集”，设置标签为“用户名与密码：”选中刚插入的文本字段，可以在属性面板中设置其他的属性，比如将类型设为“单行”，初始值设为“Lucy”等 7.3.2其他其他页设计插入字段集和插入文本字段 设置文本字段属性和字段集和文本字段 文本区域属性设置 guest.html设计视图 和guest.html效果预览 7.3.3网站整合网站整合首页和子页制作完成后，就可以通过超链接将所有页面联系在一起了 设置超链接时一定要将目标设为mainFrame。完成后保存全部文件，在浏览器中测试超链接是否有效，以及网站的各个页面，各种效果和各个设置是否正确。7.3.2其他其他页设计最后还要在网页中加入版权信息。可以使用“库项目”完成这一功能 7.3.3网站整合网站整合作用“指向文件”图标快速设置超链接和整合后的网站最终效果之一7.4 发布站点布站点7.4.1 申申请空空间1注册域名2缴纳费用3.申请空间 7.4.2 发布内容布内容在将网站上传到服务器之前，首先应该在本地机器上进行测试 1.测试网页外观2.测试链接3.测试下载时间4.脚本和程序测试7.5 网站宣网站宣传