个人网站设计与制作课程设计(共12页).doc
精选优质文档-倾情为你奉上 计算机系10网络班指导老师：金秋乐设计：齐致远 静态网页 个人网站设计与制作 专心-专注-专业课 程 名：静态网页实验课题：个人网站设计与制作实验要求：静态网页，至少包含主页，日志， 相册，留言板，个人资料制作准备：确定网站主题风格，网站结构，颜色搭配，搜集素材。制作环境：Adobe Dreamweaver CS4指导老师：金秋乐老师 主页页面1、马鞍山即使天气预报代码<iframe src=" " width="245" height="110" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="No" allowTransparency="true" （允许透明=“真”）></iframe> 2、访客记录代码<div id="apDiv2"></div><p><td width="383" rowspan="2"><center> <span class="df">您是第</span><span class="STYLE16"><script src="" language="JavaScript" charset="gb2312"></script> </span><span class="df">位来访客</span><span class="STYLE16"><span class="df">。</span></span></center3、 时间代码用到了JavaScript脚本语言4、 前期图片美化、裁剪多次用到photoshopCS45、 多次用到Map 链接日志页面1、日志页面用到Spry选项卡式面板 参数为默认 2、“日志名”居左，“推荐”居右3、每篇日志中的每个 “上一篇”和“下一篇”和“返回日志列表”都是真实有效的，规格参数都一样1、在日志里加入了媒体元素，*.swf游戏和*.flv视频 媒体元素的Html链接 目标均设置为_blank，方便返回主页面。相册页面1、 相册的建立 用到了 Fireworks CS4 很方便的建立了整个相册2、 相册封面借助PS统一了风格3、 每个相片的页面也都能进入其他页面，例如 下一页，前一页，留言板，音乐4、相册 Dear Family 用到了行为 <map name="Map6" id="Map6"> <area shape="rect" coords="53,31,154,108" href="#" onclick="MM_popupMsg('对不起，您暂时没有访问权，')" /></map>5、相册 before love 用到鼠标经过图像 音乐页面1、歌词的显示和歌曲的滚动 都用到了Marquee语句，本页面还利用行为 播放声音 代码如下div align="center"><span class="粗1">正在播放</span><span class="Blue1" onfocus="MM_controlSound('play','document.CS40','Download/胡彦斌 - 闪亮的日子.mp3')"> <marquee behavior="scroll" direction="left" scrollamount="3" loop="-1" scrolldelay="300" height="50" onmouseout="start()" onmouseover="stop()"> <p> <span class="STYLE1"> <span class="STYLE3" onfocus="MM_controlSound('play','document.CS96','Music/胡彦斌 - 闪亮的日子.mp3')"> <img src="pic/mus/hu.jpg" name="Image37" width="25" height="25" border="0" id="Image37" /> 胡彦斌闪亮的日子</span></span></p> </marquee> </span></div>（详见日志：滚动文字Marquee属性及参数设置）2、 多次用到Spry菜单栏来显示歌曲 ul.MenuBarVerticalmargin: 0; /控制菜单栏与上下表格的距离padding: 0; /控制内边距，相对于margin外边距list-style-type: none;font-size: 100%;cursor: default; /是默认的小箭头指向width: 8em; /控制菜单栏之间的宽度ul.MenuBarVertical ulwidth: 6.2em; /控制二级菜单的可视宽度，但不是二级菜单的实际宽度（不太好描述， 结合下 一注释和实际操作更好理解_）ul.MenuBarVertical ul liwidth: 6.4em; / 这个才是控制二级菜单的宽度，如果这个width 设置为8em,上一个width还是6.2em，这个二级菜单的实际宽度为8em，但可以看到宽6.4em的界面，剩下1.6em的透明界面，但是二级菜单的右边框还是显示在另一菜单上。随笔页面随笔页面利用表格和图片做出种笔记本的感觉，只是在表格里设置背景图像repeat-y 出现点小问题。分享页面1、Spry选项卡式面板2、 电子书籍下载用到下载链接 3、 游戏分享插入了*swf 格式 小游戏 Html 目标设置为_blank方便返回主页面好友页面之前没有设置这个页面，是想放一些外链的，做了好久发现不是很美观就换做这个好友秀页面了本来是想把同学做的网站连在一起，那样好像也算是一个班级的网站，可惜没连上留言板页面1、 鼠标经过图像2、 Marquee语句控制的向上滚动的寄语3、 用到表单，文本域，按钮，单选框4、这只是个留言板的静态模拟，期待能做出动态的留言板。资料页面简单的表格布局，一直在思考漂亮点的模式，可是一直没想到只好用这个简单的模式了制作总结：1、 在做网站前要养成建站点在站点里操作的习惯。2、 在制作网站的过程中大量用到表格，掌握了表格的嵌套，拆分，添加，删除。3、 在制作网站的过程中运用到CSS样式，了解到其强大的功能，听说DIV+CSS样式功能更强大，可惜DIV控制不太熟悉，能做出自己本来不会的东西才算是学会了东西。4、 在制作网站的过程中也用到些JavaScript 初步了解了动态效果。5、 在制作网站的过程中遇到不少问题，自己上网找资料，翻书，看视频教程，请教老师，同学。6、 辛苦了一学期，也制作出了一个作品，也很欣慰，目标动态网站的建设。
