个人网站设计与制作课程设计.docx
- 文档编号:10398712
- 上传时间:2023-02-10
- 格式:DOCX
- 页数:11
- 大小:4.16MB
个人网站设计与制作课程设计.docx
《个人网站设计与制作课程设计.docx》由会员分享,可在线阅读,更多相关《个人网站设计与制作课程设计.docx(11页珍藏版)》请在冰豆网上搜索。
个人网站设计与制作课程设计
课程名:
静态网页
实验课题:
个人网站设计与制作
实验要求:
静态网页,至少包含主页,日志,相册,留言板,个人资料
制作准备:
确定网站主题风格,网站结构,颜色搭配,搜集素材。
制作环境:
AdobeDreamweaverCS4
指导老师:
金秋乐老师
主页页面
1、马鞍山即使天气预报代码
2、访客记录代码
3、时间代码用到了JavaScript脚本语言
4、前期图片美化、裁剪多次用到photoshopCS4
5、多次用到Map链接
日志页面
1、日志页面用到Spry选项卡式面板参数为默认
2、“日志名”居左,“推荐”居右
3、每篇日志中的每个“上一篇”和“下一篇”和“返回日志列表”都是真实有效的,规格参数都一样
1、在日志里加入了媒体元素,*.swf游戏和*.flv视频媒体元素的Html链接目标均设置为_blank,方便返回主页面。
相册页面
1、相册的建立用到了FireworksCS4很方便的建立了整个相册
2、相册封面借助PS统一了风格
3、每个相片的页面也都能进入其他页面,例如下一页,前一页,留言板,音乐
4、相册DearFamily用到了行为
5、相册beforelove用到鼠标经过图像
音乐页面
1、歌词的显示和歌曲的滚动都用到了Marquee语句,本页面还利用行为播放声音代码如下divalign="center">
scrolldelay="300"height="50"onmouseout="start()"onmouseover="stop()">
滚动文字Marquee属性及参数设置)
2、多次用到Spry菜单栏来显示歌曲
ul.MenuBarVertical
{
margin:
0;//控制菜单栏与上下表格的距离
padding:
0;//控制内边距,相对于margin外边距
list-style-type:
none;
font-size:
100%;
cursor:
default;//是默认的小箭头指向
width:
8em;//控制菜单栏之间的宽度
}
ul.MenuBarVerticalul
{
……
width:
6.2em;//控制二级菜单的可视宽度,但不是二级菜单的实际宽度(不太好描述,结合下一注释和实际操作更好理解^_^)
……
}
ul.MenuBarVerticalulli
{
width:
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、辛苦了一学期,也制作出了一个作品,也很欣慰,目标动态网站的建设。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 个人 网站 设计 制作 课程设计
![提示](https://static.bdocx.com/images/bang_tan.gif)