静态个人网页开发设计(昆工)探讨.docVIP

目录 目录 1 一、设计思路 2 二、制作流程 2 三、关键技术总结和关键源代码分析（加注释） 3 1. HTML、CSS、Javascript的链接 3 2.//body背景随机 3 3. //选项加载 4 4. 鼠标经过按钮和部分框时出现变化（浏览器兼容性没有解决但UC、360可以） 5 四、HTML+CSS+javascript代码 6 1、CSS布局样式和javascript 6 2、主页 11 3、主界面 11 五、各模块效果截图 24 主界面效果图 24 相册效果图 29 六、心得体会 31 一、设计思路 以个人兴趣爱好来展现自己来制作我的个人网页 网页的结构分为三部分个性签名模块、链接模块、内容模块、主页模块 资料的收集与整理：文字内容、图片、超链接。 网页设计方法：HTML语言、CSS样式和Javascript语言来对网页修饰 二、制作流程 1、参考主题如下： 个人主页 家乡介绍 美食介绍 宠物介绍 商城设计 技术热点 要求如下 必须包含至少8个页面 运用HTML的基本元素：段落、表格、列表、图片、背景、字体 运用CSS+DIV的方式实现网页呈现效果 至少运用JSP实现3个有交互效果的页面 主页 空间界面 网也程序 网页设计 PS切图 三、关键技术总结和关键源代码分析（加注释） 1. HTML、CSS、Javascript的链接 meta http-equiv=refresh content=5;url=MyWEB02.html / script src=Scripts/swfobject_modified.js type=text/javascript/script 2.//body背景随机 var bodyBgs = []; bodyBgs[0] = img/0001.jpg; bodyBgs[1] = img/0003.jpg; bodyBgs[2] = img/0004.jpg; bodyBgs[3] = img/beijingei.jpg; var randomBgIndex = Math.round( Math.random() * 3); document.write(stylebody{background:url( + bodyBgs[randomBgIndex] + ) /*no-repeat 50% 0*/}/style); // 3. //选项加载 //页面加载完成后调用onload方法 window.onload = function(){//调用下面定义的函数 tab(logocl,li,tab_c,div,onmouseover) function tab(logocl,logocl_tag,tab_c,tag_c_tag,evt){ //函数定义，函数名+参数 var logocl = document.getElementById(logocl); //获取id为logocl的对象，一个 //获取tag为logocl_tag的对象。多个 var logocl_li = logocl.getElementsByTagName(logocl_tag); //获取id为tab_c的对象。一个 var tab_c = document.getElementById(tab_c); //获取tag为tag_c_tag的对象，多个 var tab_c_li = tab_c.getElementsByTagName(tag_c_tag); //获取logocl_li对象的数目 var len = logocl_li.length; //初始化i=0 var i=0; //循环len次，对logocl_li进行处理 for(i=0; ilen; i++){ //给logocl_li[i]增加index属性，且赋值i logocl_li[i].index = i; //给logocl_li[i]设置evt事件发生时触发的方法 logocl_li[i][evt] = function(){ //再次使用i=0，循环len次，，