web网页设计方案报告.doc

web网页设计 专 业 物流工程学院 班 级 物流1301 姓 名 李维源 学 号 9 5月4日第一部分:实训目标二十一世纪是一个信息时代，Internet已经进入大家生活和工作各方面，而网页作为Internet信息传输关键载体，其关键也日趋突出。所以实训目标就是要我们愈加好掌握好这一学期网页知识和提升自己动手能力，而且上传到网上去，让更多人认识我，愈加好宣传自己。第二部分:实训准备 经过一个学期web网页设计课程学习，我最终明白我们浏览每个漂亮网页是怎么做出来，我也想自己亲手来做自己个人网站。在做个人网站之前，我做以下准备：理清自己思绪，想清楚自己网站设计，做模板，找素材，进行站点计划和素材、资料搜集，要根据制作网站步骤一步一步来完成。第三部分:实训要求1、专题鲜明、内容充实；颜色清新、舒适、结构合理；2、导航清楚、栏目合理、层次分明、使用方便3、设计8至15个页面。内含：用户注册，登录系统，留言系统、统计在线人数，设为首页、加为收藏等动态网页内容。第四部分：个人网站总体计划和步骤 1 设计思绪我个人网站关键是以绿为主，以淡色为辅。关键是期望全部好友看到这个空间能一个友好、安宁、充满生机感觉。得到心灵慰藉！2 绿色网站意义 我设计这个网站关键是给人轻松舒爽、赏心悦目标感觉，让大家置身于一个漂亮大自然意境中 ，明快而错落绿，让人仿佛来到青山翠谷。网站总体风格 网站总体风格关键是以绿色为主，以淡色为辅，充满活力，生机。含有个性色彩。网站布局其实很简单，关键是做好一个模版，模版做好框架了，那网站就初步形成了，即使关键框架做好了，不过也不要快乐得太早哦，不过你也要想清楚怎样把整个界面搭配得更含有个性化。首先，在框架最top要插入一个能表现你个人网站主图。然后在主图下面插入按钮导航条，以后下面就插入自己想要风格，即使用模版做出来风格全部很相同，不过各个页面全部含有各自特色，让我们感受到自己空间个性。绿色网站内容结构也很简单，分类清楚。页面链接层次也很明确，访问者能够很明确感受到制作网站人心情和性格。绿色网站关键色调是以绿色为主。鲜艳绿色是一个很漂亮、优雅颜色，它生机勃勃，象征着生命。绿色宽容、大度，几乎能容纳全部颜色。绿色用途极为宽广，不管是童年、青年、中年、还是老年，使用绿色决不失其活泼、大方。以淡色为辅，两种颜色结合更表现出了青春和活力。淡绿色网站关键采取是环型结构，每一个页面连接另一个页面，使各个页面能方便跳转。4 网站分析和设计设计一个个人网站,关键需要考虑两个方面原因:1.速度:反应出用户访问网站页面速度。主页是常常被访问页面，最好把每页风格统一起来，比如：导航部分最好放在每页相同位置，便于在每个页面中跳转。2布局：是个人网站含有吸引力根本所在，它关键说是信息显示视觉效果。5计划站点站点计划是设计站点前一个关键步骤。合理地计划站点对以后站点设计甚至网站制作会有事半功倍效果。41 导航草图制作有利于理清思绪，避免在制作网站过程中乱了方寸。图4-1所表示就是个人粉色网站初始导航草图。相册留言板日志我介绍首页李杰鹏网站首页我音乐 图4-1 导航图在导航草图中，网站首页下面有6个二级网页。各网页关键内容以下：首页：总述。我介绍：个人资料。相册：包含了我自己相册，家人相册、好友相册、明星相册和漫画图片。留言板： 是访问我好友其中能够写上姓名、联络方法和对我网站见解。让好友给我留言，促进相互了解和交流。日志：是用框架素材，有我作品，最新自己日志，我收藏文章，动画效果，文字飘动，供访问者观赏。音乐：有我最喜爱音乐，我收藏音乐，能够播放，带歌词，下载，有飘动图片，共访问者分享。42 创建站点文件夹 合理地创建站点文件夹可将网站文档分门别类，井井有条地放置其中，这对以后网站制作是极其有利。创建“绿色”网站站点文件夹具体操作以下：步骤1 在当地磁E盘创建一个文件夹，该文件夹在创建动态站点时将作为站点根目录。这里在E盘下创建一个名为黄裕福个人网站文件夹。步骤2 在黄裕福个人网站文件夹内创建不一样功效文件来，文件夹分别命名为图片素材库,按钮素材，我主页，我档案，登陆注册，相册，日志，音乐8个文件夹，并将对应素材放到各自文件夹中。41创建站点 步骤1 进入Dreamweaver 8工作界面后，选择“站点”/“新建站点”命令弹出“未命名站点1站点定义为”对话框。步骤2 在该对话框中“基础”选项卡中“ 您计划为您站点起什么名字？”文本框中输入 hyfu步骤2 单击“下一步”按钮，在弹出对话框中选中“是，我想使用服务器技术”，在“哪种种服务器技术？”下拉列表中选择“ASP VBScript”。步骤3 单击“下一步”按钮，在弹出对话框中选择在开发过程中怎样使用文件，这里选中“在当地进行编辑和测试”，在“你将把文件存放在计算机上什么位置？”文本框中输入F: index步骤4 在弹出对话框“您应该使用什么URL来浏览站点根目录？”中输入http:/localhost/index/ ,输完后，单击“测试URL”按钮。假如这时它提醒你URL前缀测试成功，点击“确定”按钮，你就能够进入下一步了，不然话，你再根据前面步骤检验站点出现问题。步骤5 单击“下一步”按钮，在对话框中选择“否”。步骤6 单击“下一步”按钮，点击“完成”按钮即可完成当地站点创建，这时，创建站点就显示在“文件”面板中了图所表示44首页布局步骤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”）还要加一个结束标识()注册登录和留言板提交工作步骤图首页就完成了45制作其它页面和制作其它首页一样，在布局模式中进行布局，插入对应图片或flash。46制作留言板留言板设计比其它多个网页全部要复杂一点，假如没有搞好话就会出现差错，其中自己做留言板时候就出现过很多差错不是预览不出就是跳转不过来，最终经过老师提点最终把一个一个错误给找出来了。步骤1 插入模板，在模板第1列第1行插入一个关键图片步骤2 在第2行第2列插入导航条步骤3 在第3行第2列插队入一个表单，在表单中插入一个5行2列表格步骤3 做完了对应操做以后就保留，保留完以后再另存为一个一模一样网页，改一下名字，点击确定步骤4 创建一个数据库文件，其中输入姓名、性别、电话、E-mail、QQ留言，在姓名字段中添加一个主键，单击保留。步骤4 在留言板中添加数据源，在添加插入统计服务器行为步骤5 在另外一个留言板中，添加统计集和绑定服务器行为。步骤6 在插入菜单-应用程序对象形字-统计集分页，插入一个统计集分页47设为首页、我信箱、加为收藏夹步骤1 在index1中输入设为首页、我信箱、加为收藏夹字样步骤2 选中设为首页字样，在链接处输入一个空链接，切换到代码视图，在代码视图中输入代码，代码以下：onClick=this.style.behavior=url(#default#homepage);this.sethomepage(http;/www.我域名.com);步骤3 选中加为收藏夹字样，在链接处输入一个空链接，切换到代码视图，在代码视图中输入代码，代码以下：onClick=window.external.addfavorite(,mysite)步骤4 选中我信箱字样，在属性面板链接中输入：mailto:4.8制作在线人数步骤1 新建一个global.asa网页，在代码视图中插入代码，代码以下：sub application_onstart()application(sum)=0end subsub session_onstart()session.Timeout=1application(sum)=application(sum)+1end subsub session_onend()application(sum)=application(sum)-1end sub步骤2 在index.asp网页中，在对应位置输入在线人数为：步骤3 在index.asp网页中，在代码视图中插入代码，代码以下：49制作聊天室步骤1 新建一个动态页面 插入一个表单，在表单中插入一个3行2列表格输入对应文安，插入对应按钮和文字安段。步骤2 “文件”/“保留”，在弹出对话框中输入login1保留步骤3 “文件“/”新建“ 在弹出对话框中选则常规中选择”框架集“，选中”下方固定“框架集 单击”创建“步骤4 “文件“/”框架集另存为“分别保留main1、sponse1 、display1“步骤5 在display1网页中输入” 欢迎进入我聊天室“步骤6 在“插入“/”HTML“/”水平线“步骤7 在到代码视图中插入代码，代码以下：步骤8 切换到sponse1网页，在网页中插入一个表单在输入“我要讲话”，在插入一个文本字段，在添加两个按钮步骤9 在到sponse1代码视图中输入代码，代码以下：%if request.form(message) thenmessage1=trim(request.form(message)application.Lock()xm3=session(xm2)application(show)=xm3 & 在 & 说： & message1 & _&application(show)application.UnLock()end if%步骤10 切换到main1网页中，在代码视图中输入代码，代码以下：4.10制作音乐播放效果音乐页面图4-7在站点下新建一个音乐文件夹作为播放网页，在播放网页中插入所需背景音乐，代码设计为：。在播放页中插入方框素材，设置方框大小，将相对应歌词插入方框中，给歌词设置为向上移动效果；而且设置移动位置大小和速度。代码为： 明天你是否仍然爱我 曲：童安格 词：杨立德 午夜收音机 轻轻传来一首歌 .播放图为4-8五试验结果在这次实训中，老师要求我们在网站中实现功效，我全部完成了，经过思索综合利用制作出音乐播放效果。我认为我完成很成功，在这次实训中，我收获了不少，以前不知道做现在全知道做了，我也有了做网站经验，即使经验不足，不过收获很多，让我从中学到了不少，即使在做网站过程中出现过很多错误，不过经过老师指点和同学指点，错误全全部没有了，现在整个网站链接很浏畅，所以这次实训我认为我完成得很成功，从中也学到了不少。六 实训中错误和怎样处理 在这次实训中出现了很多错误，出现最多错误就是把代码输错，还有就是做网页不能正常预览，由其是在主页中出现错误，尤其是网页布局设计视图是好，不过预览图就走位了；在留言板也反复做了好多遍才做出来，那可真是一波三折。，以后复制到机房里面去就运行不了，以后找了很多原因，才找出来，首先要在你放那个文件夹，站一个web 共享，在新建一个站点，这么才能正常运行，还有就是那个数据库就是要重新添加数据源才能够，不然就会出现错误，碰到问题时我努力查阅资料，查阅代码。七 实训心得一连上了一个星期网页实训课，能够说学到很多以前没有学到东西。感觉这一个星期学到远远比以前学一个学期要多，要丰富。在这期间，首先是网页素材准备，在网上查看部分网页背景和背景颜色搭配，让我了解到网页颜色不能多过3种色彩。接下来几天再结合自己网页来进行策划，在做首页之前，先用图纸把网页结构画出来，内容和结构全部想清楚用Fireworks把网页设计出来，再切割图片，把它们导成Html格式在Dreamweaver中进行深入编辑。经过这个实训我学到了很多，也发觉自己不足，一周实习结束了，至于总体感觉只能用八个字来概括即使辛劳，但很充实。在这一周里，我学到了很多有用知识，我也深深地体会到IT行业辛劳和伟大，伴随科学迅猛发展，计算机行业发展愈加快了，新技术广泛应用，会有很多领域是我们未曾接触过，只有勇于去尝试才能有所突破，有所创新。所以搞好一次实训，是我以后走上社会一个财富，所以努力搞好实训才是最要，打高分不是最关键，最关键是你在这次实训中你学到了什么，因为这就是你以后走上社会一个定贵财富。学习能力很关键，尤其是对一个站长来说，因为网络发展太快，新技术，新模式，新思维方法天天全部在出现，假如不学习，很快就会跟不上形势。做网站即使辛劳不过让我知道：“千淘万漉虽辛劳，吹尽黄沙始到金！”