《网页制作报告》word版.doc

网页制作报告 作者:侯杰方 本次工程设计作品为柠檬，本网页已柠檬为主题，重点介绍了点介绍了设计项目、产品理念、产品特性、团队组成、关键技术等模块。版面设计美观，链接四通八达，图文并茂，声色俱佳，让你在浏览网页的同时享受软件带给你的的欢乐，绝对值得一看。 一、网页设计1. 首页布局我们的布局分为导航条和项目内容等。团队介绍，我们的团队为轻氧工作室，轻代表年轻，青春。氧，是英文youny的谐音，象征着生命和活力。具体布局如下 首页是一个静态网页，由一些图片，和文字介绍组成，这些页面是用模板做的，上面的图片，导航条以及下面的版权联系方式是不用改变的，都保持着首页的风格，背景图一样，字体与样式一样，图片风格一样。中间是两个可编辑区域。在所有的页面导航条下面，插入层对象制作了一个层动画，来回移动的层，里面存放日期，利用行为面板为此层添加了鼠标行为，做布局大多使用表格布局，使用了少量的css样式，字体，字号，颜色都统一套用相应的样式。2.版面设计网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺术设计中占据着重要的地位。所谓网页的版式设计，是在有限的屏幕空间上将视听多媒体元素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。 但网页的排版与书籍杂志的排版又有很多差异。印刷品都有固定的规格尺寸，网页则不然，它的尺寸是由读者来控制的。这使网页设计者不能精确控制页面上每个元素的尺寸和位置。而且，网页的组织结构不像印刷品那样为线性组合，这给网页的版式设计带来了一定的难度。二、 目录设计 由于网站较为简单，不需要太复杂的系统支持，所以我采用IIS系统。设计一个主文件夹，在里面加入Img图片文件夹和Mdb的数据库文件夹，这样的结构就已经可以满足要求了，节约资源。三、网站设计的技术解决方案 1.表格的设计 我们在这次的网页设计中用到大量的表格，所以怎么样建立表格是关键。Dreamweaver 8是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在表格方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个布局协调合理的页面。但在使用表格时，一些细节问题往往成为入门者的拦路虎，令人望而却步。 （1）插入表格 点击“表格”菜单中的“插入表格”，在弹出的对话框中可以对所需表格的行列数及边框属性进行设置。插入一个大概样子的表格，自己调整它在整个网页中的位置，为之后填充内容做好准备。 （2）表格属性的设置 设置表格属性的时候，一定要让光标停留在该表格中才能使用。比如可用右键在表格中点一下，选“表格属性”，弹出对话框。分别介绍其中的几个要点： a.对齐与浮动：先制作一个表格，然后分别选择该框中的各项，察看控制效果。 b.单元格边距：随便改变数值，察看控制效果，比如调整数值到8，看一下表格是否别有情趣了？ c.使用暗边框、亮边框颜色设置，结合表格线粗细及单元格边距，联合变化，看看能制作出什么效果。 d.指定宽度和指定高度项的设置，主要是为了控制页面中表格的大小。一般在页面视图下用鼠标拖动，这里的数值就会发生变化。一些小的细节，用鼠标拖动难以准确控制时，可以从这里进行控制。选择百分比控制可以让页面随浏览者电脑的不同分辨率自动调整宽度，充满屏幕。选择像素则根据浏览者电脑的分辨率，有时会超出屏幕显示范围，需左右拖动才能完整浏览；而有些时候，又不能充分利用屏幕的显示区域。网页制作中我们选择选择两者都有，看情况。 2.网页中的图像 图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画，浏览者一定会流连忘返（如果图片很大，效果会适得其反）。(1)网页中插入图像 利用Dreamweaver 8可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对图像进行编辑。在网页中加入图像的操作非常简单： a.新建一个空白网页，把光标定位在网页的开始位置。 b.打开“插入”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者单击工具栏中的图片工具图标，弹出一个“图片”对话框。 c.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。 d.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的各种属性进行设置了。 (2)图像的属性设置 a.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜单项，出现一个“图片属性”对话框. b.打开“外观”选项卡。 设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。编辑图像大小：在Dreamweaver 8中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。 设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800600的窗口，还是1024768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。 （3）编辑网页中的图像 在Dreamweaver 8中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。 四、网站的发布和维护我所做的只是一个小网站，从节约成本的角度出发，不需要单独的服务器，只需要在别人的服务器上租借一点空间，先在互联网上申请或购买一个域名，再将