《网页制作报告》word版

《《网页制作报告》word版》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、网页制作报告作者:侯杰方本次工程设计作品为柠檬，本网页已柠檬为主题，重点介绍了点介绍了设计项目、产品理念、产品特性、团队组成、关键技术等模块。版面设计美观，链接四通八达，图文并茂，声色俱佳，让你在浏览网页的同时享受软件带给你的的欢乐，绝对值得一看。一、网页设计1.首页布局我们的布局分为导航条和项目内容等。团队介绍，我们的团队为轻氧工作室，轻代表年轻，青春。氧，是英文youny的谐音，象征着生命和活力。具体布局如下首页是一个静态网页，由一些图片，和文字介绍组成，这些页面是用模板做的，上面的图片，导航条以及下面的版权联系方式是不用改变的，都保持着首页的风格，背景图一样，字体与样

2、式一样，图片风格一样。中间是两个可编辑区域。在所有的页面导航条下面，插入层对象制作了一个层动画，来回移动的层，里面存放日期，利用行为面板为此层添加了鼠标行为，做布局大多使用表格布局，使用了少量的css样式，字体，字号，颜色都统一套用相应的样式。2.版面设计网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。　　但网页的排版与书籍杂

3、志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。二、目录设计由于网站较为简单，不需要太复杂的系统支持，所以我采用IIS系统。设计一个主文件夹，在里面加入Img图片文件夹和Mdb的数据库文件夹，这样的结构就已经可以满足要求了，节约资源。三、网站设计的技术解决方案1.表格的设计  我们在这次的网页设计中用到大量的表格，所以怎么样建立表格是关键。Dreamweaver8是大多数人设计网页的称手兵器，也是众多入

4、门者的捷径。特别是其在表格方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个布局协调合理的页面。但在使用表格时，一些细节问题往往成为入门者的拦路虎，令人望而却步。（1）插入表格 点击“表格”菜单中的“插入表格”，在弹出的对话框中可以对所需表格的行列数及边框属性进行设置。插入一个大概样子的表格，自己调整它在整个网页中的位置，为之后填充内容做好准备。  （2）表格属性的设置  设置表格属性的时候，一定要让光标停留在该表格中才能使用。比如可用右键在表格中点一下，选“表格属性”，弹出对话框。分别介绍其中的几个要点：a.对齐与浮动：先制作一个表格，然后分别选择该框中

5、的各项，察看控制效果。b.单元格边距：随便改变数值，察看控制效果，比如调整数值到8，看一下表格是否别有情趣了？c.使用暗边框、亮边框颜色设置，结合表格线粗细及单元格边距，联合变化，看看能制作出什么效果。d.指定宽度和指定高度项的设置，主要是为了控制页面中表格的大小。一般在页面视图下用鼠标拖动，这里的数值就会发生变化。一些小的细节，用鼠标拖动难以准确控制时，可以从这里进行控制。选择百分比控制可以让页面随浏览者电脑的不同分辨率自动调整宽度，充满屏幕。选择像素则根据浏览者电脑的分辨率，有时会超出屏幕显示范围，需左右拖动才能完整浏览；而有些时候，又不能充分利用屏幕的显示区域。网页制

6、作中我们选择选择两者都有，看情况。2.网页中的图像图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。(1)网页中插入图像 利用Dreamweaver8可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单：a.新建一个空白网页，把光标定位在网页的开始位置。b.打开“插入”

7、菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。c.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。d.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。(2)图像的属性设置a.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框.b.打开“外观”选项卡。设置图