web网页设计实验报告

WEB系统开发 综合实验报告 题 目 红尘客栈网上订房页面 专 业 计算机科学与技术（信息技术及应用） 班 级 计信2班 学 生 蒋波涛 重 庆 交 通 大 学 2013年 目 录 一、设计目的 .3 二、设计题目 .3 三、结构设计 .3 四、技术分析 .4 五、设计过程 .7 六、实验心得 .10 七、实验总结 .11 一、 设计目的 在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道 ，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应 用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍 受人们的重视。我们当代大学生更是离不开网络给我们带来的好处与便利.但是,我们成天 浏览的网站网页到底是如何制作的呢?我想这一点很多同学都没有去深究过.所以,这学期我 选择了”web网页设计”这门课, 本课程的设计目的是通过实践使同学们经历网页制作的全过程. 通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以 按要求，利用合适图文素材设计制作符合要求的网页设计作品。 熟练掌握Photoshop cs3、Dreamweaver cs等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。学会和团队配 合，逐渐培养做一个完整项目的能力。 二、 设计题目 红尘客栈 三、 结构设计 选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。首先，做好需求 调研。调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。 然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细 化。 我们选做的主题是个人主页，并且选定题目为“红尘客栈”，其目的是做一个简 单的网站，介绍酒店概况，提供一定的资讯信息。 四、 技术分析 (一)建立布局 在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs3是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色 表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。 1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。 2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图 片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好。 （二）网页中的图像 图像传输是WWW的真正魅力所在，它与文字相比具有显著的优点：一是直观，人眼观看图像 时接受信息的速度远远超过观看文字时接受信息的速度；二是能更清楚地表达细节内容。 正是由于这些优点，所以在进行网页设计时图像很受欢迎。如果网页做得像一幅风景画， 浏览者一定会流连忘返（如果图片很大，效果会适得其反）。 图像文件的格式有几十种，如GIF、JPEG、BMP、EPS、PCX、PNG、FAS、TGA、TIFF、WMF等 ，现在Internet Explorer和Netscape支持的、最常用的图像格式是GIF、JPEG和BMP。 （1）在网页中插入图像 利用Dreamweaver cs3可以方便地在网页中插入图像，还可以设置图像边框、大小、和位置，并且可以直接对 图像进行编辑。在网页中加入图像的操作非常简单： 1.新建一个空白网页，把光标定位在网页的开始位置。 2.打开“工具”菜单，选择“图片”菜单项，在子菜单中选择“来自文件”菜单项，或者 单击工具栏中的图片工具图标，弹出一个“图片”对话框。 3.在此对话框中单击“浏览”按钮，出现一个“选择文件”对话框。 4.在“选择文件”对话框的文件列表中选择某个图像文件，然后单击“确定”按钮，或直 接双击该图像文件，该图像即被加入到网页中。在网页中插入图像后我们就可以对图像的 各种属性进行设置了。 （2）图像的各种属性设置 1.选中所插入的图片，单击鼠标右键，弹出一个快捷菜单，在菜单中选择“图片属性”菜 单项，出现一个“图片属性”对话框. 2.打开“外观”选项卡。 (1)设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框， 也可以定义边框值为“0”，即无边框。 (2)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将 图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像 没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕 方式有两种： 左环绕：图像在左边，文本在图像的右边进行环绕。 右环绕：图像在右边，文本在图像的左边进行环绕。 在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单 击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右 环绕方式。 (3)编辑图像大小：在Dreamweaver cs3中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像 太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只 要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到 你满意的尺寸。 (4)设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或 者不同的分辨率，不管是800600的窗口，还是1024768的窗口，网页都要能正常的显示 。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比 例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤 如下： 1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项， 弹出一个“图像属性”对话框. 2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分 比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设 置。外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距 是指图像与周围元素在水平方向的间距，以象素为单位；垂直间距指图像与周围元素在垂 直方向的间距。 （3）怎样编辑网页中的图像 在Dreamweaver cs3中，可以使用“图片”工具栏中的各种工具对网页中的图像进行编辑，编辑功能主要有 ：图像旋转和翻转、剪裁、图像淡化、凹凸效果等等。 另外，为了使图片更符合要求，我们还在photoshop cs3中队所用的图片进行了处理，使得图片看起来更加精细美观，符合我们的主题要求。 （4）使用背景图像 使用背景图像与使用背景色不同，使用背景色只将网页的背景用某种颜色填充，而使用背 景图像则是将网页的背景用图像平铺。这样做可以使制作的网页更美观好看。网页中使用 背景图像的具体步骤如下： 1.新建一个空白网页。 2.单击鼠标右键，弹出的快捷菜单里选“网页属性”，弹出“网页属性”对话框. 3.开“背景”选项卡。 4.在“背景”选项卡的“格式”栏中选中“背景图片”复选框，然后单击下面的“浏览” 按钮，出现一个“选择背景图片”对话框。 5.在“选择背景图像”对话框中单击“浏览文件”按钮，出现一个“选择文件”对话框。 6.在“选择文件”对话框的文件列表中选择图像文件，单击“确定”按钮。 这样，所选图片将作为整个网页的背景，如果在第4步时同时选中“水印”复选框，背景图 片将显示为特殊的水印效果，当网页滚动时，背景不动，只有网页内容滚动，产生一种透 明层的效果，非常吸引人。 （6）设置鼠标经过图片，进行图片交互 再插入图片的下拉菜单中有一项是“鼠标经过”，点击这一项，会弹出一个对话框，在对 话框中可以设置鼠标经过前的图片和经过时的图片，选择“确定”即可。 （7）设置链接 选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性 被激活，输入blank设置成在新窗口中打开网页。我们设置了链接本站点的网页页面，同时 也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询。 五、 设计过程 通过这半年的学习实践中 和老师的指导下以大量明晰的操作步骤和典型的应用实例，教会我们。使更丰富全面的软 件技术和应用技巧，使我们真正对所学的软件融会贯通。所以我结合所学专业的内容制作 了个人网站，作为实习的成果。其内容是多样化的。制作网页用的软件是reamweaver , banner软件。Dreamweaver大大加速了网络时代电子交易应用中的项目交付。它提供了网页 和表单的动态生成到企业级的解决方案，如电子商店，库存管理系统和企业内部局域网的 数据库应用等功能。例如，网页上很流行的阴影和立体按纽等效果，只需单击一下就可以 制作完成。当然，其最方便之处是，它可以将图象切割，图象映射，悬停按纽，图象翻转 等效果直接生成HTML代码，或者嵌入到现有的网页中，或者作为单独的网页出现。主图是 一个网页的门面，它能体现出这个网页的整体风格。 再后是制作网页了，使用dreamweaver制作。首页内容精彩丰富，简洁明快，语言风趣 ，通俗易懂。页面可爱清爽。首页主要是导航作用。首页制作时，时刻考虑着网页的基本 原则：统一，连贯，分割，对比及和谐的原则，内容统一，都是为了主题服务，一个网站 强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的；连贯，页面之间 关系连贯，统成一体；每版内容都自成一体，颜色各异，便于浏览；整个网页有动有静， 颜色不同，形成对比，不呆板，富有生气；颜色各异，但又不同之中又相同，浑然一体。 简洁实用: 这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送 给他就是最好的，所以要去掉所有的冗余的东西。使用方便:同第一个是相一致的，满足使 用者的要求，网页做得越适合使用，就越显示出其功能美；页面用色协调，布局符合形式 美的要求: 布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档 次。当然雅俗共赏是人人都追求的。 利用我们所学的框架集，制作更完美的页面。将动态网页与静态网页结合起来。再后 ，调试过程，好多次本来在dream里好好的，把字调的好好的，位置很对，可在浏览器里御 览就出毛病了，不是靠上了，就是靠下了，很不老实，经过再三调试，整理，加了好多表 格，终于满意了，很是麻烦，想请问老师，为什么会出现这种情况啊，还有怎么解决啊， 不用这么反复调整的办法，还有什么好办法啊？ 数据库的部分情况： 还有，在最超链接过程中，明明在页面属性里设置的是超链接的文字是原色，点击链 接后也是原色，可一链接上就变色了，想了老半天，也做了很多研究，实验，终于知道怎 么回事了，原来应该对文字所在的单元格整体做链接，而不是只选中文字做链接。这次的 网站大部分用的是表格，层用的很少，因为它太灵活了，不好控制，用的很少。 制作过程中，才发现，原来自己懂的太少了，好多不知道的地方，才赶紧查书，开始 的时候只是会建立模版，可不会应用，操作，可这样要修改模版可就麻烦了，要一个网页 一个的修改，于是赶紧上网学习相关内容，阅览书籍，最后才知道文件这有个资源，点击 进入资源面板，点击到数第二个的模版，选项，所有模版就都显示了，点击资源面板左下 角的应用命令，好了，这个模版就应用到你建立的网页中去了。 这只是在制作过程中出现的问题之一，其它问题也是类似相同。现在想想，自己所会的 东西太少了，现在做的网站只是一些简单的网站，看到了一些知名的网站开发出的网页， 不仅栏目内容丰富，信息量大，而且页面图文并茂，五彩缤纷，使得网民赞叹不已，流连 忘返。以我们的经验，当前的软件的功能日趋复杂，不学到一定的深度和广度是难以在实 际工作中应付自如的。因此反映出学习的还不够，缺点疏漏。需在加以刻苦钻研及学习， 不断开拓视野，增强自己的实践操作技能，为以后能做出出色的网页而努力。 六、 实验心得 （一） 页面的设计方面 网页设计跟学习别的东西一样，也需要兴趣，所谓的兴趣也不是三分钟热度，是一种执著 。 学习网页设计需要耐心，如果没有耐心，就学不好网页设计，应为当你碰到一个问题时， 如果不能立刻得到问题的答案，你可能需要很长时间去解决，我就碰到过一个问题，用了 很长时间才解决。 学习网页设计需要坚持，坚持不断的学习，因为设计网页的软件在不断的更新，因此我们 要不断的学习 并且学习网页设计不要掉入技术的陷阱，如果你的网页设计技术一流，并且对软件的掌握 程度已经达到一定水平，但是你设计的网页确不堪目睹，这是因为网页设计是介于平面设 计和编程技术两者之间的“边缘科学.“不仅涉及到美学,心理学,平面构成,色彩搭配等平面 设计的方面的知识,还涉及到html,javascript,css,asp,php等编程语言技术方面的知识.只 有综合运用多种知识,才能设计出视听特效,动感十足,富于个性的web页面,才能全面展现互 联网这一新型媒体的独特魅力和多维空间的超强功能. 并且我认为网页设计应该注重实用性，因为它是让人浏览的，是用户可以抚摸，可以评论 ，可以交互的。因此我提倡简单的美。 （二）网页视觉效果 视觉形象识别即我们通常所说的VI（VisualIdentity），与BI一起用于深化表现企业理念 ，同时也受到BI的影响。所谓视觉形象识别，就是指能够被目标客户通过视觉来认知与企 业相关的一切事物，从最基础的企业标志、吉祥物、标准色到企业日常业务中的信纸、服 装、名片等等，在将其系统化以后就形成了企业的视觉形象识别系统。 视觉形象识别系统在整套CIS中处于最表层的位置，其中所有的设计都将与目标客户发生直 接的接触。 （三）网页的整体布局和导航 网页的布局通常指的是网页的整体架构，说的通俗一点就是排版。如何突出最重要的内容 ，即让用户第一眼就看到这个网页所想要传达的信息。这一点至关重要。在大多数做的比 较成功的网页中，一个共同的特点就是网页的整体架构十分的清晰明了，便于用户浏览 网页布局大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合 框架型、封面型、Flash型、变化型 网页布局是主要考虑以下几点： 1、首先要考虑整个网页的长和宽，以及长度和宽度之间的比例。 2、其次就应该考虑导航条的设置了。 3、正文的框架设置（横向因素和纵向因