网页设计报告.docx

1、网页设计报告网页设计课程报告学 号: 200920101226专 业: 09信息工程2班姓 名: 晏锐题 目: 我的家乡设 计 时 间：2011.11.27电子信息与计算机工程系2011年11月27日一:实训目的21世纪是一个信息时代，Internet已经进入人们生活与工作的各方面，而网页作为Internet信息传递的重要载体，其重要也日趋突出。所以实训的目的就是要我们更好的掌握好这一学期的网页知识和提高自己的动手能力，并且上传到网上去，让更多人认识我，更好的宣传自己。本课程的设计目的是通过实践使同学们经历Dreamweaver cs4开发的全过程和受到一次综合训练，以便能较全面地理解、掌握和

2、综合运用所学的知识。结合具体的开发案例，理解并初步掌握运用Dreamweaver cs4可视化开发工具进行网页开发的方法；了解网页设计制作过程。通过设计达到掌握网页设计、制作的技巧。了解和熟悉网页设计的基础知识和实现技巧。根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。熟练掌握Photoshop cs4、Dreamweaver cs4等软件的的操作和应用。增强动手实践能力，进一步加强自身综合素质。二:实训准备 通过一个学期的网页设计课程的学习，我终于明白我们浏览的每个漂亮的网页是怎么做出来的，我也想自己亲手来做自己的个人网站。在做个人网站之前，我做

3、以下准备：理清自己的思绪，想清楚自己的网站设计，做模板，找素材，进行站点的规划和素材、资料的收集，要按照制作网站的步骤一步一步来完成。三:实训要求1课程设计要求一人一题，每题之间不得有雷同现象。2每个题目至少要有8个不同页面（不能利用模板生成），总页面不少于10个。作品中必须有index.htm为索引页，作品中需包含flash动画、超链接、图片、声音等多媒体元素。3课程设计过程中，首先要进行项目调研分析、技术设计分析及页面布局。4设计结束时，每人须按题目分析设计的要求，上交所有的HTML文档和素材，将所有文件作压缩包，文件名按“学号+姓名+项目名称”来命名（将压缩文件在课堂上发给我或者在课程结

4、课一周内发送至邮箱：zt_project，否则将视为放弃所修课程）。5作品内容必须要和课程设计报告中的项目内容要一致，设计报告要求在3500字以上，报告内容应有课程设计题目、需求分析、设计制作方案及关键制作技术等内容，必要时需要将效果图抓屏后进行插图。课程设计报告要求用A4纸打印后与作品一同上交，无设计报告者不予评定成绩。四：个人网站的总体规划和步骤 1 设计的思路我的个人网站主要是以蓝为主，以淡色为辅。主要是希望所有的朋友看到这个空间能一种和谐、安宁、充满生机的感觉。得到心灵的慰藉！2 绿色网站的意义 我设计的这个网站主要是给人轻松舒爽、赏心悦目的感觉，让人们置身于一种美丽大自然的意境中 ，

5、明快而错落的绿，让人仿佛来到青山翠谷。网站的总体风格 网站的总体风格主要是以绿色为主，以淡色为辅，充满活力，生机。具有个性色彩。网站的布局其实很简单，主要是做好一个模版，模版做好框架了，那网站就初步形成了，虽然主要框架做好了，但是也不要高兴得太早哦，但是你也要想清楚怎样把整个界面搭配得更具有个性化。首先，在框架的最top要插入一个能体现你个人网站的主图。然后在主图的下面插入按钮导航条，之后下面就插入自己想要的风格，虽然用模版做出来的风格都非常相似，但是各个页面都具有各自的特色，让我们感受到自己的空间的个性。绿色网站的内容结构也很简单，分类清楚。页面链接的层次也很明确，访问者可以很明确的感受到制

6、作网站的人的心情和性格。绿色网站的主要色调是以绿色为主。鲜艳的绿色是一种非常美丽、优雅的颜色，它生机勃勃，象征着生命。绿色宽容、大度，几乎能容纳所有的颜色。绿色的用途极为广阔，无论是童年、青年、中年、还是老年，使用绿色决不失其活泼、大方。以淡色为辅，两种颜色的结合更体现出了青春与活力。淡绿色网站主要采用的是环型结构，每一个页面连接另一个页面，使各个页面能方便的跳转。4 网站的分析与设计设计一个个人网站,主要需要考虑两个方面的因素:1.速度:反应出用户访问网站页面的速度。主页是经常被访问的页面，最好把每页的风格统一起来，例如：导航部分最好放在每页相同的位置，便于在每个页面中的跳转。2布局：是个人

7、网站具有吸引力的根本所在，它主要说的是信息显示的视觉效果。5规划站点站点规划是设计站点前的一个重要步骤。合理地规划站点对以后站点的设计甚至网站的制作会有事半功倍的效果。41 导航草图的制作有利于理清思路，避免在制作网站的过程中乱了方寸。如图4-1所示就是个人粉色网站的初始导航草图。 图4-1 导航图在导航草图中，网站首页下面有6个二级网页。各网页主要内容如下：首页：总述。家乡的简介：家乡的大致介绍。地理图片：各个地方的风景片。 新闻：最近发生的事情。经济：乡村的经济发展！教育：介绍了当地的学校建设和发展情况. 42 创建站点文件夹 合理地创建站点文件夹可将网站文档分门别类，井井有条地放置其中，

8、这对以后网站的制作是极其有利的。创建“绿色”网站的站点文件夹的具体操作如下：步骤1 在本地磁E盘创建一个文件夹，该文件夹在创建动态站点时将作为站点的根目录。这里在E盘下创建一个名为我的家乡网站的文件夹。步骤2 在的网站文件夹内创建不同功能的文件来，文件夹分别命名为图片素材库 ，家乡主页，家乡概况，登陆注册，地理图片，教育，新闻8个文件夹，并将对应的素材放到各自的文件夹中。41创建站点 步骤1 进入Dreamweaver cs4工作界面后，选择“站点”/“新建站点”命令弹出“未命名站点1的站点定义为”对话框。步骤2 在该对话框中的“基本”选项卡中的“ 您打算为您的站点起什么名字？”文本框中输入

9、我的家乡步骤2 单击“下一步”按钮，在弹出的对话框中选中“是，我想使用服务器技术”，在“哪种种服务器技术？”下拉列表中选择“无”。步骤3 单击“下一步”按钮，在弹出的对话框中选择在开发过程中如何使用文件，这里选中“在本地进行编辑和测试”，在“你将把文件存储在计算机上的什么位置？”文本框中输入F: index步骤4 在弹出的对话框的“您应该使用什么URL来浏览站点的根目录？”中输入步骤5 单击“下一步”按钮，在对话框中选择“否”。步骤6 单击“下一步”按钮，点击“完成”按钮即可完成本地站点的创建，这时，创建的站点就显示在“文件”面板中了如图所示44首页的布局步骤1 选择“布局模式”，将页面布局

10、在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。Dreamweaver cs4是大多数人设计网页的称手兵器，也是众多入门者的捷径。特别是其在布局方面的出色表现，更受青睐。大家都知道，没有表格的帮助，很难组织出一个协调合理的页面。1.点击“ALT+F6”键，进入布局模式，插入布局表格。建立一个大概的布局。 2.使用背景图片：选中该项，按浏览可以插入一幅准备好的图片作为表格的背景，因为图片是以平铺的形式作为表格背景，所以表格大小和图片尺寸都要控制好步骤2 在第1行第1列里插入一张主要的图片。网页设计的一个重要原则就是网页的兼容性，对于不同的浏览器或者不同的分辨率，不管是800600的窗

11、口，还是1024768的窗口，网页都要能正常的显示。设置图像缩放比例就是将图像设置为大小可以按比例变化，与浏览器的大小成一固定比例，这样在不同大小的浏览器窗口里图像都能正常的显示外观。设置图像缩放比例的步骤如下：1.选中网页中的图像，单击鼠标右键，在弹出的快捷菜单里，选择“图像属性”菜单项，弹出一个“图像属性”对话框.2.在“大小”栏中选中“指定大小”复选框，同时选中“宽度”和“高度”下面的“百分比”单选按钮，然后在“宽度”和“高度”栏里输入想显示的比例，单击“确定”完成设置。外还可以在“外观”选项卡的“水平间距”和“垂直间距”栏里进行设置，水平间距是指图像与周围元素在水平方向的间距，以象素为

12、单位；垂直间距指图像与周围元素在垂直方向的间距。步骤3 在第2行第2列里面插入导航条。步骤4 在相应的位置插入相应的图片。在Dreamweavercs4中，当在网页中加入一幅图像后，图像大小默认设置为其原来的大小，如果加入的图像太大或太小，或有其他特别需要，就得调整图像的大小。调整图像大小非常简单灵活，只要你选中加入的图像，用鼠标左键拖动图像边框，可任意调整图像的宽度和高度直到达到你满意的尺寸。步骤5 在第2行第1列中插入一个表单，在表单中插入一个4行2列的表格，输入相应的信息如图4-4所示 图4-4 步骤6 新建一个数据库文件，在其中输入用户名和密码，在设置一个主键保存退出（注：技术有限此为

13、图片）步骤7 还有就是创建一个注册动态网页如图4-4所示 4-5步骤8 先添加数据源， 在登陆界面创建一个登陆用户的服务器行为，之后在注册界面中创建一个插入记录服务器行为。步骤9 在相信的地方插入几张可爱的漫画，之后在创建它的滚动方式，代码为（“marquee ondirection=”right”）还要加一个结束标记()使字体在页面连续滚动出现，其中某页代码如下 ： 1：水凤村 2：张鹏村 3：湾凼村: 4：皇灵村: 5：双林村 6:：罐坪村 7：大凼村: 8：老荫村: 9：道林村: 10：莲花村 效果如下： 步骤11设置链接选中图片或者文字，在下面的链接属性中输入所要连接到的地址，同时，下方的目标属性被激活，输入blank设置成在新窗口中打开网页。我们设置了链接本站点的网页页面，同时也连接了外网，使得大家访问页面时能够查询更多详细的信息，方便用户查询步骤12：制作尾部合作链接 这样首页就制作完毕了45制作其它页面和制作其他首页一样，在布局模式中进行布局，插入相应的图片或flash。4.5.1经济页面如下：5.5.2.地理概况如下：五实验结果在这次的实训中，老师要求我们在网站中实现的功能，我都完成了，通过思考综合运用制作出图片动作效果。我觉得我完成很成功，