网页设计课程报告 - 图文

武汉理工大学华夏学院

课 程 报 告

课程名称：网页设计与制作

题 目：仙剑四简介

专 业 信息工程系 班 级 物联网1122班 学 号 10213312210 姓 名 李维嘉 成 绩 _________________ 指导教师 苏永红

2014年10月20日至2014年12月30日

1 设计目的

本课程的设计目的是通过实践使同学们经历Dreamweaver cs3开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver cs3可视化开发工具进行网页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。 了解和熟悉网页设计的基础知识和实现技巧。

根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。

熟练掌握Photoshop cs3、Dreamweaver cs3等软件的的操作和应用。 增强动手实践能力，进一步加强自身综合素质。 学会和团队配合，逐渐培养做一个完整项目的能力。

2 开发环境

PC机一台 Dreamweaver软件

Windows Server 2005系统运行平台 IIS6.0WEB服务器和脚本解释器

IE7.0浏览器，Microsoft Visual Studio2005 DirecX9.0系统插件 SQL Server2005企业版。

3 需求分析

设计个人网站的ASP网页设计，要求实现网站信息浏览、超链接、数据库连接、信息查询、信息添加和删除等基本功能。

具体要求为：

（1）网站要有一个明确的主题，网站标志语、界面主色调与网站主题相匹

配，界面布局设计美观、大方、合理，要求用到HTML、表格、表单、框架、导航条、CSS、AP DIV布局对象、插入多媒体对象，JavaScript脚本语言或VBScript脚本语言、ASP技术、IIS服务器，网页与数据库连接技术。

(2) 主页要求有用户登录显示，实现网站信息浏览、超链接、信息查询、信息修改等基本功能。

4 概要设计

(1)设定图像边框粗细：在“外观”选项卡的“布局”栏里可以根据需要定义图像的边框，也可以定义边框值为“0”，即无边框。

(2)设置图像环绕方式：一般情况下一幅图像只能与一行文字处在同一高度，但有时需要将图像和文字分开，且两者互不影响。比如在网页左边插入一幅图像，要求右边的文字就像没有图像时可以多行输入，这就要通过设置图像的环绕方式来实现。在网页中图像的环绕方式有两种：

①左环绕：图像在左边，文本在图像的右边进行环绕。 ②右环绕：图像在右边，文本在图像的左边进行环绕。在“外观”选项卡的“布局”栏中打开“对齐方式”下拉列表框，选择“左”选项，并单击“确定”按钮，图像就被设置为左环绕方式，同样，如果选“右”，图像就被设置为右环绕方式。

(3)编辑图像大小：在Dreamweaver cs3中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。

(4)设置图像缩放比例：网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800×600的窗口，还是1024×768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。

5 详细设计

1、设计登陆界面

图1 登陆界面

2、设计首页界面

图2 首页界面