web u设计报告.doc

第一部分:实训目的轻松舒爽、赏心悦目明快而错落的绿，让人仿佛来到青山翠谷。 图4-1 导航图 在导航草图中，网站首页下面有6个二级网页。各网页主要内容如下： 首页：总述。 我的简介：个人资料。 相册：包括了我自己的相册，家人相册、朋友相册、明星相册和漫画图片。 留言板： 是访问我的朋友其中可以写上姓名、联系方式和对我的网站的看法。让朋友给我留言，增进彼此的了解与交流。 日记：是用框架素材的，有我的作品，最新自己日记，我收藏的文章，动画效果，文字飘动，供访问者观赏。 音乐：有我最喜欢的音乐，我收藏的音乐，可以播放，带歌词，下载，有飘动图片，共访问者分享。 创建站点文件夹 合理地创建站点文件夹可将网站文档分门别类，井井有条地放置其中，这对以后网站的制作是极其有利的。创建“绿色”网站的站点文件夹的具体操作如下： 步骤1 在本地磁E盘创建一个文件夹，该文件夹在创建动态站点时将作为站点的根目录。这里在E盘下创建一个名为黄裕福个人网站的文件夹。 步骤2 在黄裕福个人网站文件夹内创建不同功能的文件来，文件夹分别命名为图片素材库,按钮素材，我的主页，我的档案，登陆注册，相册，日记，音乐8个文件夹，并将对应的素材放到各自的文件夹中。 4．1创建站点 步骤1 进入Dreamweaver 8工作界面后，选择“站点”/“新建站点”命令弹出“未命名站点1的站点定义为”对话框。 步骤2 在该对话框中的“基本”选项卡中的“ 您打算为您的站点起什么名字？”文本框中输入 hyfu 步骤2 单击“下一步”按钮，在弹出的对话框中选中“是，我想使用服务器技术”，在“哪种种服务器技术？”下拉列表中选择“ASP VBScript”。 步骤3 单击“下一步”按钮，在弹出的对话框中选择在开发过程中如何使用文件，这里选中“在本地进行编辑和测试”，在“你将把文件存储在计算机上的什么位置？”文本框中输入F:\ index\ 步骤4 在弹出的对话框的“您应该使用什么URL来浏览站点的根目录？”中输入http://localhost/index/ ,输完后，单击“测试URL”按钮。如果这时它提醒你URL前缀测试成功，点击“确定”按钮，你就可以进入下一步了，否则的话，你再按照前面的步骤检查站点出现的问题。 步骤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 还有就是创建一个注册动态网页如图4-4所示 4-5 步骤8 先添加数据源， 在登陆界面创建一个登陆用户的服务器行为，之后在注册界面中创建一个插入记录服务器行为。 步骤9 在相信的地方插入几张可爱的漫画，之后在创建它的滚动方式，代码为（“marquee ondirection=”right”）还要加一个结束标记(/marquee) 注册登录与留言板提交的工作流程图 首页就完成了 4．5制作其它页面 和制作其他首页一样，在布局模式中进行布局，插入相应的图片或flash。 4．6制作留言板 留言板的设计比其它几个网页都要复杂一点，如果没有搞好的话就会出现差错，其中自己做留言板的时候就出现过很多差错不是预览不出就是跳转不过来，最后经过老师的提点终于把一个一个的错误给找出来了。 步骤1 插入模板，在模板的第1列第1行插入一个主要图片 步骤2 在第2行第2列插入导航条 步骤3 在第3行第2列插队入一个表单，在表单中插入一个5行2列的表格 步骤3 做完了相应的操做之后就保存，保存完之后再另存为一个一模一样的网页，改一下名字，点击确定 步骤4 创建一个数据库文件，其中输入姓名、性别、电话、E-mail、QQ留言，在姓名的字段中添加一个主键，单击保存。 步骤4 在留言板中添加数据源，在添加插入记录的服务器行为 步骤5 在另外一个留言板中，添加记录集和绑定服务器行为。 步骤6 在插入菜单-应用程序对象形字-记录集分页，插入一个记录集分页 4．7设为首页、我的信箱、加为收藏夹 步骤1 在in