网页制作课程设计报告1

1、internet应用与网页制作课程设计报告课题名称： 印象依阁 姓 名： 学 号： 专业班级： 本信息网络技术 系： 计算机科学与技术 设计时间： 2011.4.42011.4.15 指导教师： 指导教师评语：成绩： 签名： 年 月 日2目录1课程设计目的12课程设计任务与要求1设计任务1设计要求13课程设计说明书1(1)主题定位1(2)结构设计1(3)网站风格和ci形象设计5(4)栏目规划部分54课程设计成果6(1)网站主页设计（包括效果图和使用的关键技术和步骤）6(2)个人登录栏目设计（包括效果图和使用的关键技术和步骤）8(3)产品推荐栏目设计（包括效果图和使用的关键技术和步骤）95. 课

2、程设计心得96、参考文献101课程设计目的本课程设计的主要目的是：通过本课程设计，全面帮助学生加强对网站的认知；学会设计和制作网站（全部工作流程），包括完成设计报告，了解网站的软、硬件平台，会发布和维护一个实际的网站，熟练网页制作及相关工具的使用，掌握软件的使用技巧，掌握相关行业的相关标准。从而运用网站界面的设计与可用性分析制作专业的站点，以便能获得就业机会，提高个人的综合竞争力与社会适应力。2课程设计任务与要求设计任务服装公司站点的制作设计要求虚拟一个公司或者现实存在的公司，按公司（客户）要求进行站点设计。宣传公司、推广产品或者服务、人才招聘等。页面中使用到浮动框架布局。使用了行为设计动态效

3、果。3课程设计说明书(1)主题定位满足公司对外的宣传，按公司要求设计站点，更能有效的为公司推广产品，招聘人才，同时也满足用户在网上方便浏览。网站主要用于宣传，加大用户对本公司的了解，进一步说明公司，网站应用图文并茂，符合大众浏览习惯，包含文字、图像、音频、动画（文字动画、图像动画、flash动画）等内容。 网站标志使用图像动画。考虑了客户端的传输速度。(2)结构设计栏目组成图n 网站首页u 推荐产品l 产品介绍n 公司介绍u 简介n 拥有产品u 产品列表l 产品介绍n 详细介绍u 主要产品l 详细介绍n 关于我们u 简介n 联系我们u 简介目录结构图网站首页网站首页公司介绍拥有产品简介简介简介

4、产品介绍产品介绍推荐产品推荐产品推荐产品网站首页详细介绍关于我们联系我们简介简介产品信息产品信息产品信息链接结构图公司首页公司首页公司介绍拥有产品详细介绍关于我们联系我们推荐产品个人中心简介产品介绍产品介绍简介简介(3)网站风格和ci形象设计 网站的logo主要根据商品的类型设计的，整个网站都用了楷体为字体，以楷体的灵动飘逸凸显网页的活力。(4)栏目规划部分首页栏目规划：第一栏为导航栏，第二栏为个人中心，第三栏为网站动态，第四栏为服务栏，第五、六栏为产品推荐，第七栏为友情链接导航草图如下：拥有产品详细介绍关于我们公司介绍网站首页印象依阁的首页联系我们在导航草图中，网站首页下面有6个二级网页，每

5、个页面能互相连接。其它栏目规划：第一栏为导航栏，第二栏为个人中心，第三栏为简介4课程设计成果(1)网站主页设计（包括效果图和使用的关键技术和步骤）关键技术与步骤：首页导航栏均使用了二级链接，分别链接到各栏目，其代码为：网站首页公司介绍拥有产品详细介绍 关于我们联系我们 在信息图标中使用了邮箱的外链，其代码为： 在网页动态里下的栏目信息，点击第一行文字，在打开的页面中使用了div横向轮播技术展示图片，这样能更好的浏览网页，是网页的效果更好。点击第三行文字，在打开的页面中，显示的360度轮转图，该技术使用了jsd脚本，效果是3d的旋转，看起来比较美观。(2)个人登录栏目设计（包括效果图和使用的关键

6、技术和步骤）在个人登录栏目中使用了表单技术，具体如下： 账号: 密码: (3)产品推荐栏目设计（包括效果图和使用的关键技术和步骤）在产品推荐栏目中使用了在div标签行为中的交换图像技术，当鼠标移至图像时，会自动交换图像，当鼠标离开图像时，会还原图像。代码如下：5. 课程设计心得通过本次intrenet应用与网页制作课程设计，我更加充分的理解了课本上的知识，并能够加以扩展，在书本中得到的知道在书本外进行实践，应用于实践当中，通过书本的知识来掌握现实的成果！这几天的课程设计令我学到了很多，很多平时模棱两可的知识点都认真复习并实践了，同时也发现自己的不足，以下是我的一些建议：灵活运用样式活用form

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

8、知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档，可以使用“go to url”javascript 行为。打开一个有框架的网页，选择文字或图象，然后从行为面板中选择“go to url”。我们会注意到dreamweaver会在“go to url”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的url后再选择另一个框架并输入另一个url。不给文件起中文名称大家在制作好网页后，通常会给网页起一个具有代表性的中文名称，一来能使人一看文件名就能大概了解文件所包含的内容，二来能够方便各个超级链接之间的相互调用。但如果你在dreamweaver中这样做，就

9、会发现dreamweaver对中文文件名支持得不是太好，经常会有页面调用不正确的现象发生，所以我们以后在dreamweaver中保存网页的时候，尽量用英文或者数字作为文件名称，这样就可以避免上面的出错现象。巧妙设置字体分辨率我们在制作网页的时候，经常有这种体会，那就是制作好的网页在本地计算机上浏览时很正常，但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了，这是为什么呢?原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示，在 dreamweaver中得到了较好的解决。在文档窗口的右下角，dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字，在弹出式菜单中可以为当前的页面指定显示分辨率，通过修改可以使你的主页更具灵