网站设计个人网站设计与制作课程设计

个人网站设计与制作课程设计

课程名静态网页

实验课题个人网站设计与制作

实验要求静态网页至少包含主页 日志 相册 留言板,个人资料制作准备确定网站主题风格,网站结构,颜色搭配,搜集素材。

制作环境 dobe Dremweavr S4

指导老师:金秋乐老师

主页页面

个人网站设计与制作课程设计

 、马鞍山即使天气预报代码

〈  rme src=" " wid  =  24 ”    gh  ="  10” marginidth="0  arginhe      0  hsp  ce="0" vspa  e="0 ”framebordr=”0"  rolling”No"allowran a  cy=”  ue 允许透明= “真” ) 〉 〈/ rame>

2、访客记录代码

〈div id=” aiv2"〉 /div〉

<p〉 〈t with="33   wspan=” 2  〉 <  nter

<span c as ="df您是第< span>< pan cl ss=” TYLE6"〉〈scr  p  src”” langae=  avaScript" char  et=  gb2312"〉〈/script>

〈 span〉 < pa  lass df">位来访客</ p 〉 sa ca ="STYE6  > 〈spa     s= df 〉 。 </ a>spn〉

<cnt r

3、时间代码用到了avaScript脚本语言

4、前期图片美化、裁剪多次用到hot   pCS4

5、多次用到Mp链接

日志页面

个人网站设计与制作课程设计

 、 日志页面用到Spr选项卡式面板参数为默认

2、 “日志名”居左, “推荐”居右

3、每篇日志中的每个 “上一篇”和“下一篇”和“返回日志列表”都是真实有效的规格参数都一样

个人网站设计与制作课程设计

1、在日志里加入了媒体元素,。 w游戏和。 f 视频媒体元素的tml链接目标均设置为blan,方便返回主页面。

个人网站设计与制作课程设计

1、相册的建立用到了 Fi  ork CS4很方便的建立了整个相册

2、相册封面借助S统一了风格

3、每个相片的页面也都能进入其他页面例如下一页前一页,留言板,音乐

4、相册ea Fai  y 用到了行为

map  e="Ma6” id="Map6">

〈 re  a ="rct" cors=” 53 3  ,  5 0"hre =”" on lic=MMpoppMs ('对不起您暂时没有访问权 '    〉/mp>

5、相册  fore lv 用到鼠标经过图像

个人网站设计与制作课程设计

音乐页面

1、歌词的显示和歌曲的滚动都用到了Marquee语句本页面还利用行为 播放声音代码如下i align=” cen e  "<spa  la =粗1">正在播放</s n〉 spa class"lue1” onfous=MM_conroloud(’pl y’ , 'document。 CS4  , 'Downlad胡彦斌-闪亮的日子。p3’  ">

<arquee bhav  or=  croll  i ec  ion l  t" scr  la nt=s rol  del y=” 300  heiht=” 50” onmous out=” start ) omu eover= stop(”〉

<p〉 <  pa  las  =” STYLE1">spn c  ass=  STYLE "onfocs=” MM_ ntrolSound ' lay'   dcument。 S9'  'u ic/胡彦斌闪亮的日子。p3’ ”<ig sr=   ic/s/hu jpg” nae mage37"width="25"h  gh=” 2" border="0" i"Im e37  /〉 胡彦斌——闪亮的日子/spn> 〈  span> 〈 p〉

〈/arquee〉

〈/spn/div> 详见日志滚动文字Marqe属性及参数设置

2、多次用到Spy菜单栏来显示歌曲

l.MenBrVrt  cal



rgin   //控制菜单栏与上下表格的距离pad n: 0; /控制内边距相对于argin外边距

  st- yle—type none;

ont—si  e 10;

 curso  efault //是默认的小箭头指向

 w dt: em //控制菜单栏之间的宽度

ul。 MenuBaV t  c l u



„„widh: 6 em; //控制二级菜单的可视宽度但不是二级菜单的实

个人网站设计与制作课程设计

际宽度不太好描述 结合下一注释和实际操作更好理解^^)

„„



l MenuBarVe   i al l l 

{

 width: 6 4m  这个才是控制二级菜单的宽度如果这个w  h设置为8上一个w dth还是6。 em这个二级菜单的实际宽度为8em,但可以看到宽6 4em的界面剩下1。 6em的透明界面,但是二级菜单的右边框还是显示在另一菜单上。

}

随笔页面

随笔页面利用表格和图片做出种笔记本的感觉,只是在表格里设置背景图像epat—-y 出现点小问题。

个人网站设计与制作课程设计

分享页面

1、 Spry选项卡式面板

2、电子书籍下载用到下载链接

3、游戏分享插入了s格式小游戏Html 目标设置为_blank方便返回主页面