网页设计实训报告85790

1、网页设计报告题目:网页实训学号:_5姓名:吴晨一. 实训意义:网页设计与制作综合实训是教学过程中重要的实践性教学环节.它是根据专业教学计划的要求，在教师的指导下对学生进行网页制作专业技能的训练，培养学生综合运用理论知识分析和解决实际问题的能力，实现由理论知识向操作技能 的转化，是对理论与实践教学效果的检验，也是对学生综合分析能力与独立工作 能力的培养过程.因此加强实践教学环节，搞好实训教学，对实现本专业的培养目 标,提高学生的综合素质有着重要的作用。二. 实训目的:1. 通过综合实训进一步巩固，深化和拓展学生的理论知识与专业技能。(1)掌握规划网站的内容结构，目录结构，链接结构的方法。 熟练掌

2、握网页制作软件FrontPage 2003和的基本操作和使用技能。(3) 掌握页面的整体控制和头部内容设置的方法。(4) 熟练掌握网页页面布局的各种方法。(5) 熟练掌握在网页中输入，设置标题和正文文字的方法。(6) 熟练掌握在网页中插入图象flash动画和背景音乐的方法。(7) 熟练建立各种形式的超级链接的方法。(8) 掌握表单网页制作方法。(9) 掌握网页特效制作方法。(10) 掌握网站测试的方法。2. 训练和培养学生获取信息和处理信息的能力，充分培养和提高学生的动手能力学会通过网站、书籍、素材光盘等方式收集所需的文字资料、图象资料、flash动画和网页特效等。3. 培养学生运用所学的理论

3、知识和技能解决网站开发过程中所遇到的实际问题的能力及其基本工作素质。4. 培养学生理论联系实际的工作作风，严肃认真的科学态度以及独立工作的能力 树立自信心。三实验步骤:1、网站主题我的网站的主旨在于从各个方面全面的介绍我自己，展示自己，包括我的个 人资料、个人相片和爱好。另外，网站里还包括我的好友和好友资料，建立一个 展示自我形象的平台。同时，网站里的每一个网页都有统一的风格， 每一个网页 的主题色彩都是浅红色，用以展示自己性格的效果。最重要的是做出自己的风格， 给浏览者好的欣赏感受。2、网站材料主要在网站上搜集所要的网页信息，包括图片、文字、相关的新闻。同时， 查询相关的书籍、百度和素材光盘

4、等方式收集所需的文字资料，图象资料flash动画和网页特效等，用以得来更加具有说服力的页面。 要想做好自己的网站，能 够给浏览者好的欣赏感受，就要尽量搜集材料，搜集得材料越多，以后制作网站 就越容易。精选自己收集的材料，作为自己制作网页的素材，这样就可以做好一 个好的网站。3、网站规划我的网站共有5个主页面：首页、相册、简历、图书、好友、留言版和音乐。 每一个页面用统一 的背景图片，以保证网站统一的页面风格。如下 图：目应圧书Jsife吕甘呼艮罔工枸架我是用自己的姓名和学号命名网站名，用以方便存储和转发。网站整体色调为浅 红色，然后点缀其他不同的颜色相配，突出主题，颜色没有过多，过杂，用以避

5、免给人一种杂乱的感觉。版面设计十分灵活，根据各部分内容的不同适当的自由 设计。网页布局主要用框架和表格，用框架定位内容的大体结构，再用表格具体 定位。位子的设计也是重要的一个部分，根据具体内容决定字体风格，相同的风格多次调用是用css设计一个样式，以保证随时、准确的调用。另外，为了网页 布局的协调，我加入了适当的flash透明动态图片，用以达到更好的浏览效果。4、网站的制作工具做网页时主要使用的是 FrontPage 2003，但我还使用了 Deamweave。另外, 为了处理网页中的其他元素，还使用了 Photoshop、Gif Animator等软件。5、制作网站的网页素材、风格、模板都设

6、计好以后，下一步就是具体的制作网页。制作网站时， 首先要做的就是站点的规划，建立一个本地站点“mysite ”，建立的各个页面都应该放在本地站点中，在网页制作时所需的各个元素都进行了统一的管理，建立统一的文件夹放同一类型的文件， 我在制作时建立了 “tupian ”文件夹来存放图 片。同时，由于“相册”页面中的信息太多，于是建立了一个专门的文件夹存放 相册信息，网页中的css样式文件也应统一管理，做到有条不紊，我设计的网 站的首页如下图：土生.19E9,I.qK JL板耳托|粋带H z 召堆勒齡!棚ft 白 aHbR9i以导航栏为界，上面插入了两个flash动画，用以给浏览者好的视觉享受。 左

7、下 方有我的个人资料、相片和相关链接。插入相关链接的菜单栏，一方面为了布局 合理，弥补左下角的空缺，另一方面给浏览者提供放表的导航， 点击其中任意一 个都会连接到其他网页，如点击 google就会连接到下面网页：厲口禅盍I手气不更所有可蔓0中文啊页3間聲中文网贯 枫埔 閘片 m 植屈 音乐 耐 2碎寻蔚根据自己的网页风格，在网上搜集合适的图片，另外网页的页宽一般没有超过 900像素，以保证左右不出现滚动条。右下边插入的是表格，表格中添加了浅红 色的背景图片。用以体现网站的主题色彩，表格还定位了网页特效、系统时间和 flash动画。网页特效为上下滚动的字幕，当鼠标停在字幕上时，字幕停止滚动。 特

8、效代码如下：vSCRIPT LANGUAGE=JavaScript!- Beg in /scroller width var swidth=300 /scroller height var sheight=100/scrollers speed;var sspeed=2var wholemessage=/text: change to your ownwholemessage= 欢迎光临我的个人网站 下面是 网 页 背景 音 乐歌 词 渡情 西 湖 美 景 三 月 天 勒 春雨如酒柳如烟勒 有缘千里来相 会 无缘对面手难牵 十年修得同般渡v/divxdivalign=center百年修得共枕眠

9、 若是千呀年呀有造化 白首同心在 眼 前 若 是 千 呀 年 呀 有 造 化 白首同心在眼前 新白娘子传奇片尾曲 高胜美 渡情 欢迎光临我的个人网站 ns4layer.top-=sizeupns4slide()functionns4slide()if(ns4layer.top=sizeup*(-1)ns4layer.top-=sspeed setTimeout(ns4slide(),100)elsens4layer.top=sheightns4slide()function ns6marquee(whichdiv)ns6slide()/ End - if (document.all)docum

10、ent.writeln()document.writeln(wholemessage) ieslider.onmouseover=new Function(ieslider.scrollAmount=0) ieslider.onmouseout=new Function(if (document.readyState=complete) ieslider.scrollAmount=2)document.write()if (document.getElementById&!document.all) document.write() document.write() document.writ

11、e() 取系统时间代码如下： 今天是： 主页中还插入了背景音乐，音乐名为“渡情” ，这首音乐为 midi 音乐，占用内存 小，音乐清脆悦耳，十分适合做背景音乐。另外，网页特效滚动字幕就是歌词。 插入过程如下图：第二个主页面是相册，如下图:为了使页面连接清晰，相册中插入了五个交互式按钮，分别是个人相片、好友相 片、风景相片、明星相片和古董相片，当点击任一按钮都会在右下版块出现对应 浏览图片版块。交互式按钮的制做：在设计窗口中插入一个五行一列的表格，表 格的间距为0,颜色为黑色，居中对齐，然后插入背景图片，就做成了表格的背 景。在表格的一个单元格内点击菜单中的插入， 再点击交互式按钮，修改按钮的

12、相应属性就可以了 。第三个主页面是简历，如下图:简历中包含我的姓名、年龄、职业、理想和兴趣爱好等。简历的右下方插入了漂 亮的flash动画，动画为游动的金鱼，为了达到亮眼的效果，加入了透明flash, 既与主网页相同，又有新意。插入这个动画是为了使页面的整体布局合理，既突 出网站的主色调，又给人以凝重的感觉，同时增加页面的可看性。第四个主页面是图书，如下图：號广i/Kid科主HEi丿面草右艺桂农劉T7上肉悴比和萌車Trrh的扎七艺古芮丼且主負为轻車直怕的上鶴巨竝祂和I 丁直苜一 +51KX由14 r讯才丁啲布牙狀吃共的近廉碎+近此的更*由悄1*丙，rrw*i-是.*临对氐屯端出上的 它畛色古工

13、匚轼夕音F0结.丈=和心的二卞匸启 隹到戲也圭勺三*乓，F主弋呵|.然到一 -*型的至刖FA艮折屠闻廉取.中炯井，由千tBP-fl的岳MKffU.書你 幻的内舌岑列事:*,丰林自由ewt佝卯，迫想右的卡址帯丰的一忸七旳晦，它与第二个主页面采用了相同的背景，相同的布局。为了使页面连接清晰，图书 中也插入了五个交互式按钮，分别是唐诗、宋词、元曲、明清传奇和现代小说五 个子页。在唐诗子页中的右边网页中所有的诗人名都有超链接，如单击“骆宾王”， 就会出现如下页面：讦曲子页ME欣人nm /亘踊樂果.礦安无抽一哎4U循毎”棗島色岸曲江仏 七岁能i,号沐“神 空吐.皐歼键兀展燼砸it王範t反册勺陌居-乓耳不

14、礼臥BA - W - SRLERffl Aff-昨为护* 村剃廟匸.IW死哉录人虫申它!ten甘a冲新用用缶肓p市训）筍中心的酬I广歌楚区逅苗* 亍陆商严空的月律才朮 每一甚弭旷词兀 f兀尺是U曲羽fit廿羽:.1 綽L也 兀尖出和生俸：木过潮阳啊E崔过曲曲 &1比也百 址丄“弋由整 托也*册叮 丘強基中华冃慎辿苣立邑主中朗一奉册皑三在足艷计fl芒*赵上莓飙TSfeW的壮也和言I牛足并 #的勺杠卫龙啤豐丄二fiNNsUW*虹亠鼻扯百霍怡圧Jf雷晁税AK；E18P?. P-rlfiWIW. TWltW?iXV身诈出旬闭舉芮fll.肯低尢釣更庖性，所 建丄止电门发奄.e-s 彌“齿周首町羊魅朮一羿

15、氈鼻乜味苟1踊睥口丰斟鼻少豹一層=”*重禧1培待 干记立劳蔚啣一专芈：？銅元闊直着芮的一古面.计曲逐承7讲毎的点丽伸，一万而一云件社命矗廉书人花干71 丄* M鼻 十丐-硕也 政梧夸罠1S台因丹袪吒曲栈罄出（古音目抽故卄|恺叙 曲出应荻的Ft芒宜柯社台M第五个主页面是好友，如下图:初中好友 L呼好灵羔安餐八安: 碧迪隹鳖衣安雀已县富.主一苹T:TIHI自定:幼）刑 如果您对我的网站、本人、老师或 其他方面有任何想法，请告知我们。欢迎提出宝贵意见和建议。该网页中还插入了时钟，显示当前时间，给浏览者提供方便。图片如下：10 2时钟代码如下：vSCRIPT Ian guage=javascript!

16、-pX=400;pY=200obs = new Array(13)fun cti on ob () for (i=0; i13; i+) if (document.all) obsi=new Array (eval(ob+i).style,-100,-100)else obsi = new Array (eval(docume nt.ob+i),-100,-100)fun cti on cl(a,b,c)if (docume nt.all) if (a!=0) b+=-1eval(c+a+.style.pixelTop=+(pY+(c)eval(c+a+.style.pixelLeft=+(p

17、X+(b)elseif (a!=0) b+=10eval(docume nt.c+a+.top=+(pY+(c)eval(docume nt.c+a+.left=+(pX+(b)fun cti on run Clock() for (i=0; i13; i+) obsi0.left=obsi1+pX obsi0.top=obsi2+pYvar lastsec function timer() time = new Date ()sec = time.getSeconds() if (sec!=lastsec) lastsec = )/360for (i=1;i6;i+) obsi1 = Mat

18、h.sin(sec) * (44 - (i-1)*11)-16; if (document.layers)obsi1+=10;obsi2 = -Math.cos(sec) * (44 - (i-1)*11)-27; for (i=6;i10;i+) obsi1 = Math.sin(min) * (40 - (i-6)*10)-16; if (document.layers)obsi1+=10; obsi2 = -Math.cos(min) * (40 - (i-6)*10)-27;for (i=10;i 12 3456789101112 . . . . . . . . . vfont siz

19、e=+3 color=#F30000xb.v/bv/fo ntv/div vfont size=+3 color=#F30000.“ onLoad=ob(),setNum(),setlnterval(timer(),100);setInterval(runCl ock(),100)” vbody下面是表单的下部分，用以提交留言到服务器。请在下面的空白处留言：请告知我如何与您联系:姓名：1电子邮件：电话：传真：有关上述事宜请尽快与我联系。作着；吴燃君脈权所有K) 2001单位名称：粽西学院*保留所有权利奇15订时间：10年D6月03 0o-工上图的最下面是版权信息，尽量用简洁的语言和稳重的色彩，

20、 给人留下清新，简 练的感觉。版权信息标名了作者和版权用以提高内容的可读性和使内容充实，既突出网站的主色调，又给人以凝重的感觉。提交留言代码如下：vform method=POST action=we nzha ng.asp 姓 名 ： vfontcolor=#FF0000*邮 箱地址：* 文 章标题：* 文 章 内 容:vtextarea style=vertical-alig n:color=#FF0000* 您 的 留 言:vtextarearows=5n ame=n am4 cols=80text-top 数据写入 您的姓名是 :, 您的文章已经上传 ! 感谢您的参与 !这样，用户在提

21、交完后，内容就会储存进 wu.txt 中。表单的制作过程：首先打 开 FronrPage 2003, 再新建网页，单击插入按钮，在插入按钮中选择表单，最后 插入表单的各个属性就可以完成表单的插入了。第七个主页面是音乐，如下图：单去肓聲彈列虽一卫衙.厂谢曲 acd的Fal如F (Ffeaq.心、:！卩 /r I r*itLr - 卜趙*岂鴉滋 r v:-“.#.：* rtl 塑* r z r - t t.fl.fi.r家它两tti -怦7(j-CM* 3 咱臆” ：l：iflt “ITb 廿 畔甲 b：lt-n-* .-HI I _ SUXrfr11酹舟丄1|PlREUfcS, 丁丘 厂 Ah

22、Jfeft Ls 谢8 F护醫普斛期卷01SM一辛弓一亭 %_框卍卜隔玉#臨 WffWIB 一 4 知a -BQ#夷上5_丧来吾口瞬忙MS在*-右死心1聲昭住忤貶叮帚匸东Nna#T?lr.&生琲勞腹桁宪虧-硒月下解誓不晝 *冊神邂的售人伺 *Zlft-J-r* :霓加的干1 厲*皿構页面:上面的页面是网络上的页面， 还可以使内容更加简洁。单击链接到网络上的可以节省制作网站的周期。而且, “一剪梅”链接到如下页面：1 EgO JLtrAfftf idE fLlW-r - hiI *11 m IUPFltrirCE WI4I：*厂事ES 凤iEFfECT*5?育云萍日岀Hfl tttTE-SFil栅楫不岐序遊 g !tfT 了*弄 itmw*Oils an0iritffL