网页制作课程设计报告

课程设计报告

课题名称：            印象依阁                            

姓    名：                                       

学    号：                                    

专业班级：          本信息网络技术                            

系：               计算机科学与技术                        

设计时间：         2011.4.4~2011.4.15           

指导教师：                                  

指导教师评语：

成绩：

                签名：               

本课程设计的主要目的是：通过本课程设计，全面帮助学生加强对网站的认知；学会设计和制作网站（全部工作流程），包括完成设计报告，了解网站的软、硬件平台，会发布和维护一个实际的网站，熟练网页制作及相关工具的使用，掌握软件的使用技巧，掌握相关行业的相关标准。从而运用网站界面的设计与可用性分析制作专业的站点，以便能获得就业机会，提高个人的综合竞争力与社会适应力。

2．课程设计任务与要求

⑴设计任务

服装公司站点的制作

⑵设计要求

虚拟一个公司或者现实存在的公司，按公司（客户）要求进行站点设计。宣传公司、推广产品或者服务、人才招聘等。页面中使用到浮动框架布局。使用了行为设计动态效果。

3．课程设计说明书

(1)主题定位

满足公司对外的宣传，按公司要求设计站点，更能有效的为公司推广产品，招聘人才，同时也满足用户在网上方便浏览。网站主要用于宣传，加大用户对本公司的了解，进一步说明公司，网站应用图文并茂，符合大众浏览习惯，包含文字、图像、音频、动画（文字动画、图像动画、Flash动画）等内容。 网站标志使用图像动画。考虑了客户端的传输速度。

(2)结构设计

①栏目组成图

⏹网站首页

◆推荐产品

●产品介绍

⏹公司介绍

◆简介

⏹拥有产品

◆产品列表

●产品介绍

⏹详细介绍

◆主要产品

●详细介绍

⏹关于我们

◆简介

⏹联系我们

◆简介

②目录结构图

③链接结构图

(3)网站风格和CI形象设计

   网站的LOGO主要根据商品的类型设计的，整个网站都用了楷体为字体，以楷体的灵动飘逸凸显网页的活力。

(4)栏目规划部分

①首页栏目规划：

第一栏为导航栏，第二栏为个人中心，第三栏为网站动态，第四栏为服务栏，第五、六栏为产品推荐，第七栏为友情链接

导航草图如下：

在导航草图中，网站首页下面有6个二级网页，每个页面能互相连接。

②其它栏目规划：

第一栏为导航栏，第二栏为个人中心，第三栏为简介

4．课程设计成果

(1)网站主页设计（包括效果图和使用的关键技术和步骤）

关键技术与步骤：

①首页导航栏均使用了二级链接，分别链接到各栏目，其代码为：网站首页

公司介绍

拥有产品

详细介绍

 关于我们

联系我们

 ②在信息图标中使用了邮箱的外链，其代码为：

 ③在网页动态里下的栏目信息，点击第一行文字，在打开的页面中使用了DIV横向轮播技术展示图片，这样能更好的浏览网页，是网页的效果更好。点击第三行文字，在打开的页面中，显示的360度轮转图，该技术使用了jsd脚本，效果是3D的旋转，看起来比较美观。

(2)个人登录栏目设计（包括效果图和使用的关键技术和步骤）

在个人登录栏目中使用了表单技术，具体如下：

color=#d1d5ed class="jnfont6">账号:

  密码:

type=password size=11 name=Password2>

(3)产品推荐栏目设计（包括效果图和使用的关键技术和步骤）

在产品推荐栏目中使用了在DIV标签行为中的交换图像技术，当鼠标移至图像时，会自动交换图像，当鼠标离开图像时，会还原图像。代码如下：

5. 课程设计心得

通过本次Intrenet应用与网页制作课程设计，我更加充分的理解了课本上的知识，并能够加以扩展，在书本中得到的知道在书本外进行实践，应用于实践当中，通过书本的知识来掌握现实的成果！这几天的课程设计令我学到了很多，很多平时模棱两可的知识点都认真复习并实践了，同时也发现自己的不足，以下是我的一些建议：

①灵活运用样式

②活用Format Table命令

在复杂的网页设计中，表格的应用是最多的，因为利用表格可以自由地控制文本和图象在网页上出现的具体位置，从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不甘落后，我们可以使用其中的“Format Table”(格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式，先将光标置于表格的任意一个单元格内，再选择“Command”→“Format Table”命令， 在随后出现的对话框中，从左边的列表中选择一个设计方案。按“Apply” 键来查看效果，如果不满意的话，还可以重新设置或者修改部分参数的值，如边界粗细，背景颜色等等。

③同时链接到两个网页

我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档，可以使用“Go To URL”JavaScript 行为。打开一个有框架的网页，选择文字或图象，然后从行为面板中选择“Go To URL”。我们会注意到Dreamweaver会在“Go To URL”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。

④不给文件起中文名称

大家在制作好网页后，通常会给网页起一个具有代表性的中文名称，一来能使人一看文件名就能大概了解文件所包含的内容，二来能够方便各个超级链接之间的相互调用。但如果你在Dreamweaver中这样做，就会发现Dreamweaver对中文文件名支持得不是太好，经常会有页面调用不正确的现象发生，所以我们以后在Dreamweaver中保存网页的时候，尽量用英文或者数字作为文件名称，这样就可以避免上面的出错现象。

⑤巧妙设置字体分辨率

我们在制作网页的时候，经常有这种体会，那就是制作好的网页在本地计算机上浏览时很正常，但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了，这是为什么呢?原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示，在 Dreamweaver中得到了较好的解决。在文档窗口的右下角，Dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字，在弹出式菜单中可以为当前的页面指定显示分辨率，通过修改可以使你的主页更具灵活性。使不同分辨率的显示器都能较好地显示。

6、参考文献

 [1] 吴怡,《计算机网络配置、管理与应用-Windows Server 2003》,高等教育出版社，北京，2004年

[2] 石硕，林莉，卓志宏，李洛，《交换机/路由器及其配置(第2版)》，电子工业出版社，北京，2007年

[3] [url]http://baike.baidu.com/view/1133379.htm[/url]

[4] [url]http://blog.51cto.com/[/url]…………（51cto技术博客）

http://wenku.baidu.com/view/8331dd1d59eef8c75fbfb351.html