网页设计实训报告材料.doc

《网页设计实训报告材料.doc》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、网页设计课程设计报告 设计题目：专业：学生：学号:起迄日期：指导教师：目录第一部分:实训目的21世纪是一～～～～～～～～～～～～～～～～～～～～～～～～～～。第二部分:实训准备通过一个学期的web网页设计课程的学习，我终于明白我们浏览的每个漂亮的网页是怎么做出来的，我也想自己亲手来做自己的个人。在做个人之前，我做以下准备：理清自己的思绪，想清楚自己的设计，做模板，找素材，进行站点的规划和素材、资料的收集，要按照制作的步骤一步一步来完成。第三部分:实训要求1、主题鲜明、容充实；颜色清新、舒适、结构合理；2、导航清楚、栏目合理、层次分明、使用方便3、设计8至15个页面。含

2、：用户注册，登录系统，留言系统、统计在线人数，设为首页、加为收藏等动态网页容。第四部分：个人的总体规划和步骤1．设计的思路！2．的意义3.的总体风格。4.的分析与设计设计一个个人,主要需要考虑两个方面的因素:1.速度:反应出用户访问页面的速度。主页是经常被访问的页面，最好把每页的风格统一起来，例如：导航部分最好放在每页相同的位置，便于在每个页面中的跳转。2．布局：是个人具有吸引力的根本所在，它主要说的是信息显示的视觉效果。5．规划站点站点规划是设计站点前的一个重要步骤。合理地规划站点对以后站点的设计甚至的制作会有事半功倍的效果。5．1导航草图的制作有利于理清思路，避免

3、在制作的过程中乱了方寸。如图4-1所示就是个人粉色的初始导航草图。相册留言板日记我的简介首页首页我的音乐图4-1导航图在导航草图中，首页下面有6个二级网页。各网页主要容如下：首页：总述。我的简介：个人资料。相册：包括了我自己的相册，家人相册、朋友相册、明星相册和漫画图片。留言板：是访问我的朋友其中可以写上、联系方式和对我的的看法。让朋友给我留言，增进彼此的了解与交流。日记：是用框架素材的，有我的作品，最新自己日记，我收藏的文章，动画效果，文字飘动，供访问者观赏。音乐：有我最喜欢的音乐，我收藏的音乐，可以播放，带歌词，下载，有飘动图片，共访问者分享。5．1创建站点文件夹

4、合理地创建站点文件夹可将文档分门别类，井井有条地放置其中，这对以后的制作是极其有利的。创建“绿色”的站点文件夹的具体操作如下：步骤1在本地磁E盘创建一个文件夹，该文件夹在创建动态站点时将作为站点的根目录。这里在E盘下创建一个名为黄裕福个人的文件夹。步骤2在黄裕福个人文件夹创建不同功能的文件来，文件夹分别命名为图片素材库,按钮素材，我的主页，我的档案，登陆注册，相册，日记，音乐8个文件夹，并将对应的素材放到各自的文件夹中。4．1创建站点步骤1进入Dreamweaver8工作界面后，选择“站点”/“新建站点”命令弹出“未命名站点1的站点定义为”对话框。步骤2在该对话框中的

5、“基本”选项卡中的“您打算为您的站点起什么名字？”文本框中输入hyfu步骤2单击“下一步”按钮，在弹出的对话框中选中“是，我想使用服务器技术”，在“哪种种服务器技术？”下拉列表中选择“ASPVBScript”。步骤3单击“下一步”按钮，在弹出的对话框中选择在开发过程中如何使用文件，这里选中“在本地进行编辑和测试”，在“你将把文件存储在计算机上的什么位置？”文本框中输入F:index步骤4在弹出的对话框的“您应该使用什么URL来浏览站点的根目录？”中输入localhost/index/,输完后，单击“测试URL”按钮。如果这时它提醒你URL前缀测试成功，点击“确定”

6、按钮，你就可以进入下一步了，否则的话，你再按照前面的步骤检查站点出现的问题。步骤5单击“下一步”按钮，在对话框中选择“否”。步骤6单击“下一步”按钮，点击“完成”按钮即可完成本地站点的创建，这时，创建的站点就显示在“文件”面板中了如图所示4．4首页的布局步骤1选择“布局模式”，将页面布局为如图4-3所示图4-3步骤2在第1行第1列里插入一主要的图片。步骤3在第2行第2列里面插入导航条。步骤4在相应的位置插入相应的图片的Flash影片。步骤5在第2行第1列中插入一个表单，在表单中插入一个4行2列的表格，输入相应的信息如图4-4所示图4-4步骤6新建一个数据库文件，在其中

7、输入用户名和密码，在设置一个主键保存退出（注意：再创建服务器行为时必须把数据库关闭，否则会出现错误）步骤7还有就是创建一个注册动态网页如图4-4所示4-5步骤8先添加数据源，在登陆界面创建一个登陆用户的服务器行为，之后在注册界面中创建一个插入记录服务器行为。步骤9在相信的地方插入几可爱的漫画，之后在创建它的滚动方式，代码为（“marqueeondirection=”right”>）还要加一个结束标记()注册登录与留言板提交的工作流程图首页就完成了4．5制作其它页面和制作其他首页一样，在布局模式中进行布局，插入相应的图片或flash