1、 网页设计 课程设计报告 设计题目: 专 业: 学生姓名: 学 号: 起迄日期: 指引教师: 目录 第一某些:实训目 21世纪是一~~~~~~~~~~~~~~~~~~~~~~~~~~。 第二某些:实训准备 通过一种学期web网页设计课
2、程学习,我终于明白咱们浏览每个美丽网页是怎么做出来,我也想自己亲手来做自己个人网站。在做个人网站之前,我做如下准备:理清自己思路,想清晰自己网站设计,做模板,找素材,进行站点规划和素材、资料收集,要按照制作网站环节一步一步来完毕。 第三某些:实训规定 1、主题鲜明、内容充实;颜色清新、舒服、构造合理; 2、导航清晰、栏目合理、层次分明、使用以便 3、设计8至15个页面。内含:顾客注册,登录系统,留言系统、记录在线人数,设为首页、加为收藏等动态网页内容。 第四某些:个人网站总体规划和环节 1. 设计思路 ! 2. 网站意义 3. 网站总体风格
3、 。 4. 网站分析与设计 设计一种个人网站,重要需要考虑两个方面因素: 1.速度:反映出顾客访问网站页面速度。主页是经常被访问页面,最佳把每页风格统一起来,例如:导航某些最佳放在每页相似位置,便于在每个页面中跳转。 2.布局:是个人网站具备吸引力主线所在,它重要说是信息显示视觉效果。 5.规划站点 站点规划是设计站点前一种重要环节。合理地规划站点对后来站点设计甚至网站制作会有事半功倍效果。 5.1 导航草图制作有助于理清思路,避免在制作网站过程中乱了方寸。如图4-1所示就是个人粉色网站初始导航草图。 相册 留言板 日记 我简介 首页 首页 我音乐
4、 图4-1 导航图 在导航草图中,网站首页下面有6个二级网页。各网页重要内容如下: 首页:总述。 我简介:个人资料。 相册:涉及了我自己相册,家人相册、朋友相册、明星相册和漫画图片。 留言板: 是访问我朋友其中可以写上姓名、联系方式和对我网站看法。让朋友给我留言,增进彼此理解与交流。 日记:是用框架素材,有我作品,最新自己日记,我收藏文章,动画效果,文字飘动,供访问者观赏。 音乐:有我最喜欢音乐,我收藏音乐,可以播放,带歌词,下载,有飘动图片,共访问者分享。 5.2 创立站点文献夹 合理地创立站点文献夹可将网站文档
5、分门别类,井井有条地放置其中,这对后来网站制作是极其有利。创立“绿色”网站站点文献夹详细操作如下: 环节1 在本地磁E盘创立一种文献夹,该文献夹在创立动态站点时将作为站点根目录。这里在E盘下创立一种名为黄裕福个人网站文献夹。 环节2 在黄裕福个人网站文献夹内创立不同功能文献来,文献夹分别命名为图片素材库,按钮素材,我主页,我档案,登陆注册,相册,日记,音乐8个文献夹,并将相应素材放到各自文献夹中。 4.1创立站点 环节1 进入Dreamweaver 8工作界面后,选取“站点”/“新建站点”命令弹出“未命名站点1站点定义为”对话框。 环节2 在该对话框中“基本”选项卡中“ 您
6、打算为您站点起什么名字?”文本框中输入 hyfu 环节2 单击“下一步”按钮,在弹出对话框中选中“是,我想使用服务器技术”,在“哪种种服务器技术?”下拉列表中选取“ASP VBScript”。 环节3 单击“下一步”按钮,在弹出对话框中选取在开发过程中如何使用文献,这里选中“在本地进行编辑和测试”,在“你将把文献存储在计算机上什么位置?”文本框中输入F:\ index\ 环节4 在弹出对话框“您应当使用什么URL来浏览站点根目录?”中输入http://localhost/index/ ,输完后,单击“测试URL”按钮。如果这时它提示你URL前缀测试成功,点击“拟定”按钮,你就可以进
7、入下一步了,否则话,你再按照前面环节检查站点浮现问题。 环节5 单击“下一步”按钮,在对话框中选取“否”。 环节6 单击“下一步”按钮,点击“完毕”按钮即可完毕本地站点创立,这时,创立站点就显示在“文献”面板中了 如图所示 4.4首页布局 环节1 选取“布局模式”,将页面布局为如图4-3所示 图4-3 环节2 在第1行第1列里插入一张重要图片。 环节3 在第2行第2列里面插入导航条。 环节4 在相应位置插入相应图片Flash影片。 环节5 在第2行第1列中插入一种表单,在表单中插入一种4行2列表格,输入相应信息如图4
8、4所示 图4-4 环节6 新建一种数据库文献,在其中输入顾客名和密码,在设立一种主键保存退出(注意:再创立服务器行为时必要把数据库关闭,否则会浮现错误) 环节7 尚有就是创立一种注册动态网页如图4-4所示 4-5 环节8 先添加数据源, 在登陆界面创立一种登陆顾客服务器行为,之后在注册界面中创立一种插入记录服务器行为。 环节9 在相信地方插入几张可爱漫画,之后在创立它滚动方式,代码为(“marquee ondirection=”right”>)还要加一种结束标记() 注册登录与留言板提交工作流程图 首页就完毕了
9、4.5制作其他页面 和制作其她首页同样,在布局模式中进行布局,插入相应图片或flash。 4.6制作留言板 留言板设计比其他几种网页都要复杂一点,如果没有搞好话就会浮现差错,其中自己做留言板时候就浮现过诸多差错不是预览不出就是跳转但是来,最后通过教师提点终于把一种一种错误给找出来了。 环节1 插入模板,在模板第1列第1行插入一种重要图片 环节2 在第2行第2列插入导航条 环节3 在第3行第2列插队入一种表单,在表单中插入一种5行2列表格 环节3 做完了相应操做之后就保存,保存完之后再另存为一种一模同样网页,改一下名字,点击拟定 环节4 创立一种数据库文献,其中输入姓名、性别
10、电话、E-mail、QQ留言,在姓名字段中添加一种主键,单击保存。 环节4 在留言板中添加数据源,在添加插入记录服务器行为 环节5 在此外一种留言板中,添加记录集和绑定服务器行为。 环节6 在插入菜单-应用程序对象形字-记录集分页,插入一种记录集分页 4.7设为首页、我信箱、加为收藏夹 环节1 在index1中输入设为首页、我信箱、加为收藏夹字样 环节2 选中设为首页字样,在链接处输入一种空链接,切换到代码视图,在代码视图中输入代码,代码如下: onClick="this.style.behavior='url(#default#homepage)';this.sethom
11、epage('http;//www.我域名.com');" 环节3 选中加为收藏夹字样,在链接处输入一种空链接,切换到代码视图,在代码视图中输入代码,代码如下: onClick="window.external.addfavorite('','mysite')" 环节4 选中我信箱字样,在属性面板链接中输入:mailto: 4.8制作在线人数 环节1 新建一种global.asa网页,在代码视图中插入代码,代码如下: 环节2 在index.asp网页中,在相应位置输入在线人数为: 环节3 在index.asp网页中,在代码视图中插入代码,代码如下: <%=application("sum")%> 4.9制作聊天室
13、 环节1 新建一种动态页面 插入一种表单,在表单中插入一种3行2列表格输入相应文安,插入相应按钮和文字安段。 环节2 “文献”/“保存”,在弹出对话框中输入login1保存 环节3 “文献“/”新建“ 在弹出对话框中选则常规中选取”框架集“,选中”下方固定“框架集 单击”创立“ 环节4 “文献“/”框架集另存为“分别保存main1、sponse1 、display1“ 环节5 在display1网页中输入” 欢迎进入我聊天室“ 环节6 在“插入“/”HTML“/”水平线“ 环节7 在到代码视图中插入代码,代码如下: <% response.write(applica
14、tion("show"))
%>
环节8 切换到sponse1网页,在网页中插入一种表单在输入“我要发言”,在插入一种文本字段,在添加两个按钮
环节9 在到sponse1代码视图中输入代码,代码如下:
<%
if request.form("message")<>"" then
message1=trim(request.form("message"))
application.Lock()
xm3=session("xm2")
application("show")=xm3 & "在" & "说:" & message1 & "
"_
&application(
15、"show") application.UnLock() end if %> 环节10 切换到main1网页中,在代码视图中输入代码,代码如下: <% if request.form("xm1")=""or request.form("mm")="" then response.write("对不起,你资料不全!请返回重填" ) else session("xm2")=trim(request.form("xm1")) end if %> 4.10制作音乐播放效果 音乐页面如图4-7 在站点下新建一种音乐文献夹作为播放网页,在播放网页中插入所需背景音乐,代码设
16、计为:






