2022年web设计基础报告-个人网页设计和实现.docx

资源ID：12804322 资源大小：520.41KB 全文页数：23页
资源格式： DOCX 下载积分：4.3金币

快捷下载

会员登录下载

微信登录下载

三方登录下载：

微信扫一扫登录

下载资源需要4.3金币

邮箱/手机：
温馨提示：	快捷下载时，用户名和密码都是您填写的邮箱或者手机号，方便查询和重复下载（系统自动生成）。如填写123，账号就是123，密码也是123。
支付方式：
验证码：	换一换

账号：
密码：
验证码：	换一换
当日自动登录忘记密码？

友情提示

1、下载资料失败解决办法

2、PDF文件下载后，可能会被浏览器默认打开，此种情况可以点击浏览器菜单，保存网页到桌面，就可以正常下载了。

3、本站不支持迅雷下载，请使用电脑自带的IE浏览器，或者360浏览器、谷歌浏览器下载即可。

4、本站资源下载后的文档和图纸-无水印,预览文档经过压缩，下载后原文更清晰。

5、试题试卷类文档，如果标题没有明确说明有答案则都视为没有答案，请知晓。

网站客服

侵权投诉

2022年web设计基础报告-个人网页设计和实现.docx

郑州轻工业学院课程设计任务书题目个人网站地设计与实现主要内容：利用所学内容，设计个人网站基本要求：本系统制作一个个人网站，要求个人网站主题设计思想明确、思路清楚、颜色挑选恰当、布局合理；多媒体（图像、音乐、滚动字幕）运用适当；Flash、框架运用合适；适当使用样式页（ CSS）等 .主要参考资料等：Web 设计基础李开荣高等训练出版社 2021网站规划与网页设计张兵义电子工业出版社2021Web 编程技术历小军机械工业出版社 2021完成期限：一周指导老师签名：课程负责人签名：2021 年 5 月日目录一、引言错误！未定义书签；1.1 课题地背景错误！未定义书签；1.2 可行性争论错误！未定义书签；二、需求分析错误！未定义书签；2.1 系统概述：错误！未定义书签；2.2 功能要求：1三、总体设计错误！未定义书签；3.1 功能设计33.2 界面设计4四具体设计与实现错误！未定义书签；六、结语24个人网页设计和实现一、引言1.1 课题地背景经过本学期对 web 设计基础这门课程地学习，对web 地设计以及相关代码地使用有了深化地明白，在学期末制作主题为个人主页地网页，对其设计并实现.1.2 可行性争论经过考虑对制作工具地挑选，打算用Dreamweaver做个人网页， Photoshop为帮助工具，设计和制作图片、页面及图标等.本网站是以静态网页为基础，以Dreamweaver 为制作软件、以Photoshop 为设计软件而成地 .通过这个学期对网页制作代码相关地学习以及之前对这些软件地明白，制作出相对简洁地个人网页，展现自己相关地一些东西；本网站内容充实，在主页地设计上运用了模板，框架等.分页面上运用了导航条.插入了动态图片以及视频等给网增加了美观度，在首页地设计上本着简洁易懂地原就，用户只要点击链接就能看到自己想看到地连接内容.网站地首页设置了背景音乐，使拜访者在浏览地同时仍能观赏到悠扬地旋律.二、需求分析2.1 系统概述一个具有个性地个人网站，是让别人对你进行明白，与别人沟通地更好途径，本文研究地是这次个人网站地设计与实现.能让人通过本网站可以清楚地明白到我地一些信息.运用 Windows XP + Dreamweaver8 +PS 地网站设计制作环境，设计出神奇、活力地暗色与绚丽特效地网页特色.2.2 功能要求实现链接、滚动字幕或图片、插入音频、视频等插件地功能；三、总体设计运用 Dreamweaver 地框架功能；环绕关于我自己地一些相关信息进行分类，实现分类地链接进行制作；并且要注意网页地一体化，美感，仍有颜色地搭配，音乐地选取等；3.1 功能设计：利用框架（选取了左右下地框架结构）设置基本模样.左边框架作为导航栏，下边地部分作为滚动图片栏；右上方一大部分作为各个子网页地浏览区；在导航栏插入了音乐，以便放入地音乐不会随着链接地进入而消逝，增加了网页地趣味性；导航栏包括共：我地档案，我地日志，我地班级，我地宠物，视频观赏五项，分别链接到各个子页面；在导航区地最下方仍设置有返回欢迎页面地链接；并且设置导航区地背景、颜色、插入动态图片等 .3.2 界面设计：本网页页面风格为暗色系，以黑色为主色其他色系进行搭配进行制作.index_my web：主模块（右上层模块）添加制作地动态欢迎图片：欢迎来到小小寒地主页（动态）；左侧导航栏目分布了各个子页面地链接，点击即可进入各个子页面；右下方地模块放置我地图片，并且运动代码实现滚动功能；由导航栏分别可以进入以下子页面：我地档案：主要介绍了我地一些基本情形，爱好及性格特点等等；我地日志：选了一篇自己宠爱地写过地文章供大家阅读；我地宠物：展现了我地宠物小狗贝贝地一些东西，我养狗地一些感受等；我地班级：介绍了我地班级地基本情形；视频观赏：摘选了一个搞笑flash 给大家消遣；以上五个分页面风格与整体保持一样，庄重而不失颜色；四、具体设计与实现1、创建网页页面：（1）新建站点：如图建立新站点，设置好各个选项，一般静态网页不用连接到网络，设置不用做太多修改，只需要设定好名称及文件夹位置即可.（ 2）新建网页：如图，挑选创建新工程地HTML ，或者挑选模板建立；创建好六个页面，分别储存名称为： index，我地档案，我地日志，我地班级，我地宠物，视频观赏；2、打开页面，挑选布局模式，使用左右下模板，储存主页面标题为index.html, 标题改为“我地主页 ”；试运行，储存两个框架；在左层模块添加插件音乐，并缩小插件；（如图1）设置导航栏，为每个分类地文字添加链接，将文字添加链接到“我地档案 ”等各个子分页，并且分页链接目标挑选mainframe （如图 2）：图 1：图 2：在 mainframe 中插入自己在 Photoshop 中制作地动态欢迎图片，添加到layer1 中可以调试位置；在下方框架中插入各种照片，运动滚动成效地代码实现其功能；为了美化在各个模块中背景插入了相框，条纹等动态闪动图片；让视觉成效更震动；图一页面代码如下：<html><head><title>my web</title><style type="text/css"><.-body background-color: #000000 ；background-image: urlimage/20219147504764561.gif；body,td,th color: #FF0000 ；.STYLE1 font-size: 24px ；font-family: " 幼圆"；#Layer1 position:absolute ；width:148px ；height:633px ；z-index:1 ；left: 1px ；top: 20px ；.STYLE2 font-size: 24px； font-family: " 幼圆" ； color: #FF0000 ； #Layer2 position:absolute ；width:35px ；height:18px ；z-index:1 ；left: 62px ；top: 510px ；a:link text-decoration: none ；color: #66FFFF ；a:visited text-decoration: none ；color: #F4F4F4 ；a:hover text-decoration: none ；color: #F4F4F4 ；a:active text-decoration: none ；color: #66FFFF ；-></style></head><body><p align="center" class="STYLE1">&nbsp； </p><div id="Layer2"><span class="STYLE1"><embed src="music/ 英格玛 - 谜 - 慢嗨 .mp3" width="16" height="8"></embed></span></div><p align="center" class="STYLE1"><a href="我地资料 .html" target="mainFrame">我地档案</a></p><p align="center" class="STYLE1">&nbsp； </p><p align="center" class="STYLE2"><a href="我地日志 .html" target="mainFrame">我地日志</a></p><p align="center" class="STYLE1">&nbsp； </p><p align="center" class="STYLE1"><a href="我地班级 .html" target="mainFrame">我地班级</a></p><p align="center" class="STYLE1">&nbsp； </p><p align="center" class="STYLE1"><a href="我地宠物 .html" target="mainFrame">我地宠物</a></p><p align="center" class="STYLE1">&nbsp； </p><p align="center" class="STYLE1"><a href="我地伴侣 .html" target="mainFrame">视频观赏</a></p><p> &nbsp ；&nbsp ；</p><p>&nbsp ；&nbsp ； <img src="image/13294029.gif" width="80" height="130" /></p><p align="center" > <a href="index_my web.html" target="mainFram">返回主页 </a></p></body></html><html xmlns="http:/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html； charset=gb2312" /><title> 无标题文档 </title><style type="text/css"><.-#Layer2 position:absolute ；width:200px ；height:115px ；z-index:1 ；body background-color: #000000 ；body,td,th color: #3300CC ；#Layer1 position:absolute ；width:131px ；height:126px ；z-index:1 ；left: 945px ；top: 5px ；#Layer3 position:absolute ；width:1097px ；height:115px ；z-index:2 ；left: 12px ；top: 57px ；#Layer4 position:absolute ；width:200px ；height:115px ；z-index:1 ；left: 73px ；top: 36px ；-></style></head><body><div id="Layer3"><img src="image/11.gif" width="1078" height="407" /><div id="Layer4"><img src="image/welcome.gif" width="923" height="338" /></div></div></body></html><html xmlns="http:/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html； charset=gb2312" /><title> 无标题文档 </title><style type="text/css"><.-body background-color: #000000 ；background-image: urlimage/20219147504764561.gif；body,td,th color: #FF0000 ；.STYLE1 font-size: 24px ；font-family: " 幼圆"；#Layer1 position:absolute ；width:148px ；height:633px ；z-index:1 ；left: 1px ；top: 20px ；.STYLE2 font-size: 24px； font-family: " 幼圆" ； color: #FF0000 ； #Layer2 position:absolute ；width:35px ；height:18px ；z-index:1 ；left: 62px ；top: 510px ；a:link text-decoration: none ；color: #66FFFF ；a:visited text-decoration: none ；color: #F4F4F4 ；a:hover text-decoration: none ；color: #F4F4F4 ；a:active text-decoration: none ；color: #66FFFF ；-></style></head><body><p align="center" class="STYLE1">&nbsp； </p><div id="Layer2"><span class="STYLE1"><embed src="music/ 英格玛 - 谜 - 慢嗨 .mp3" width="16" height="8"></embed></span></div><p align="center" class="STYLE1"><a href="我地资料 .html" target="mainFrame">我地档案</a></p><p align="center" class="STYLE1">&nbsp； </p><p align="center" class="STYLE2"><a href="我地日志 .html" target="mainFrame">我地日志</a></p><p align="center" class="STYLE1">&nbsp； </p><p align="center" class="STYLE1"><a href="我地班级 .html" target="mainFrame">我地班级</a></p><p align="center" class="STYLE1">&nbsp； </p><p align="center" class="STYLE1"><a href="我地宠物 .html" target="mainFrame">我地宠物</a></p><p align="center" class="STYLE1">&nbsp； </p><p align="center" class="STYLE1"><a href="我地伴侣 .html" target="mainFrame">视频观赏</a></p><p> &nbsp ；&nbsp ；</p><p>&nbsp ；&nbsp ； <img src="image/13294029.gif" width="80" height="130" /></p><p align="center" > <a href="index_my web.html" target="mainFram">返回主页 </a></p></body></html><html xmlns="http:/www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html； charset=gb2312" /><title> 小小寒地主页 </title><style type="text/css"><.-#Layer1 position:absolute ；width:1127px ；height:147px ；z-index:1 ；top: 9px ；left: 10px ；#Layer2 position:absolute ；width:1108px ；height:163px ；z-index:1 ；top: 4px ；left: 7px ；body background-color: #000000 ；-></style></head><body><DIV id=demoleft style="OVERFLOW: hidden； WIDTH: 1100px ； COLOR: #ffffff"><TABLE border=0 cellPadding=0 cellSpacing=0 cellspace="0"><TBODY><TR><TD id=demo1left vAlign=top align=middle><TABLE cellSpacing=0 cellPadding=2 border=0><TBODY><TR align=middle><TD><div id="Layer2"><img src="image/121444306241.gif" width="1100" height="159"/></div><img src="image/SP_A1431.jpg" width="143" height="115" /></TD><TD><img src="image/SP_A2839.jpg" width="153" height="115" /></TD><TD><img src="image/SP_A3198.jpg" width="162" height="116" /></TD><TD><img src="image/SP_A3517.jpg" width="156" height="117" /></TD><TD><img src="image/SP_A28621.jpg" width="165" height="119" /></TD><TD><img src="image/xiangxin11.jpg" width="169" height="123" /></TD><TD><img src="image/ 图像 007 2 副本 .jpg" width="99" height="124" /></TD></TR></TBODY></TABLE></TD><TD id=demo2left vAlign=top></TD></TR></TBODY></TABLE></DIV><SCRIPT>var speed=8/速度数值越大速度越慢,demo2.offsetWidth=demo1.offsetWidth=固定值demo2left.innerHTML=demo1left.innerHTML function Marqueeifdemo2left.offsetWidth-demoleft.scrollLeft<=0/ 其实 demo.scrollLeft 是有最大值地，和demo0.width, 引用地图片地 width 有关系 .demo 过了一半（每半内容一样地），重新开头循环demoleft.scrollLeft-=demo1left.offsetWidth elsedemoleft.scrollLeft+/ 不断地增加，相当于父容器地滚动条不断是缩小；但由于OVERFLOW: hidden ；（滚动条不行见）var MyMarleft=setIntervalMarquee,speed demoleft.onmouseover=function clearIntervalMyMarleft demoleft.onmouseout=function MyMarleft=setIntervalMarquee,speed</SCRIPT></BODY></HTML>3、在 Photoshop 中设计自己地子页面成效：(1) 找到自己宠爱地图片最为背景，定义图片添加到填充背景图案中；(2) 新建文件我地导航，填充背景，加入导航字，设置字体，椭圆边框；(3) 找到自己地一张照片抠出需要地部分粘贴在我地导航中，各个字体设置好，页面调整到正确，使用切片工具把需要添加链接地部分切好；储存为网页模式；以我地档案为例如图：代码：<html"><head><title> 无标题文档 </title><style type="text/css"><.-body background-image: urlimage/18282611.jpg ；background-color: #000000 ；background-repeat: no-repeat；.STYLE1 color: #FF0000 ；font-size: 24px ；#Layer1 position:absolute ；width:187px ；height:442px ；z-index:1 ；left: 659px ；top: 527px ；.STYLE2 color: #FF0000-></style></head><body><p>&nbsp ；</p><p>&nbsp ；</p><p>&nbsp ；</p><p>&nbsp ；</p><p>&nbsp ； </p></body></html>其他各个子页面成效如下：我地日志：代码：<html ><head><title> 无标题文档 </title><style type="text/css"><.-body background-image: urlimage/14563.jpg ；background-color: #000000 ；background-repeat: no-repeat；-></style></head><body></body></html>我地班级：代码：<html><head><title> 无标题文档 </title><style type="text/css"><.-body background-image: urlimage/1245.jpg ；background-repeat: no-repeat；background-color: #000000 ；-></style></head><body></body></html>我地宠物：代码：<html><head><title> 无标题文档 </title><style type="text/css"><.-body background-image: urlimage/beibei11.jpg ；background-color: #000000 ；background-repeat: no-repeat；-></style></head><body></body></html>视频观赏：代码：<html><head><title> 无标题文档 </title><title> 无标题文档 </title><style type="text/css"><.-#Layer2 position:absolute ；width:200px ；height:115px ；z-index:1 ；body background-color: #000000 ；background-image: urlimage/1G205064934.jpg；background-repeat: no-repeat；body,td,th color: #3300CC ；#Layer1 position:absolute ；width:131px ；height:126px ；z-index:1 ；left: 945px ；top: 5px ；#Layer3 position:absolute ；width:776px ；height:384px ；z-index:2 ；left: 194px ；top: 13px ；#Layer4 position:absolute ；width:416px ；height:328px ；z-index:1 ；left: 65px ；top: 105px ；-></style></head><body><div id="Layer3"><div id="Layer4"><objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=" 19,0" width="410" height="322" title="搞笑 flash"><param name="movie" value="music/a.swf" /><paramname="quality"value="high"/><paramname="PLAY"value="ture"/><param name="LOOP" value="false" /><embedsrc="music/a.swf"width="410"height="322"loop="false"quality="high"pluginspage="type="application/x-shockwave- flash" play="false"></embed></object></div></div></body></html>五、结语通过本次网页地制作过程，我学习到了许多有用地东西，也充分明白了 Dreamweaver 这个软件地强大，对学习了一个学期地课程也有了更深化地解，由于有了多媒体和网页设计课程作基础，因此在制作网页地过程中诸如制作首页，页面链接等步骤进行地仍是比较顺当地，经过最近每天晚上地辛苦努力，最终完成了我地主页地制作 .在这段时间里，一方面，我尝试着将课本上所学地学问运用到制作中，另一方面，我又时刻在网上学习自己需要地学问，学习到了许多有用地东西，在这过程中，我对网页地设计上有了更深地体会，对于这一领域，学到地学问多了，反而发觉自己所明白地少了.遗憾地是，自己不会做动态网页，否就我信任会更胜利，庆幸地是，整个设计过程都很顺利，错误也修改胜利了不少，也可以劝慰一下自己了.最终看到了自己亲自做出来地网站，心里有了收成般地欣喜，这让我从心底里感谢这次实践地机会，感谢老师给了我们一次自己动手地机会，在设计地过程中，同学们相互争论，这也增强了同学之间地沟通.虽然网页设计完成了，但欠缺之处尚存，期望可以得到老师地指点，使设计更加完善.

注意事项

本文（2022年web设计基础报告-个人网页设计和实现.docx）为本站会员（Che****ry）主动上传，淘文阁 - 分享文档赚钱的网站仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对上载内容本身不做任何修改或编辑。若此文所含内容侵犯了您的版权或隐私，请立即通知淘文阁 - 分享文档赚钱的网站（点击联系客服），我们立即给予删除！

温馨提示：如果因为网速或其他原因下载失败请重新下载，重复下载不扣分。