网页设计大作业
上海建桥学院
本科实验报告
课程名称: 学 号: 姓 名: 专 业: 班 级: 指导教师:
网页设计 1121396 黄德凯 计算机科学与技术
B11-2班 石潇
课内实验目录及成绩
信息技术学院 2011年 9 月 1 日
上海建桥学院实验报告
课程名称: 网页设计 实验类型: 综合型 实验项目名称: 综合主题网站的制作 实验地点: 实验日期: 年 月 日 一、
实验目的和要求
1.学会综合网站建设的完整制作流程
2.学会用相关平面设计软件,完成主页的构思,完成页面布局原型线框图的绘制,能根据提供的页面设计稿,合理地完成切图 3.掌握根据设计稿,用div+css方法完成网页布局、各类媒体元素的插入 4.掌握用css方法制作二级菜单 5.掌握JavaScript基本应用 二、
实验内容和原理
综合网站建设的完整制作流程,布局原型线框图的绘制,div+css布局方法的综合应用,网站的发布,兼容性测试。 三、 四、
网站名称:krios 主要内容:各方面模板
主要浏览群体:各种开发人员及图片处理人员 主题色:蓝色 灰色 白色
2.绘制网站结构(栏目)图(一级栏目、二级栏目、各栏目主要内容)
主要仪器设备和环境 操作方法与实验步骤
PC机1台、Photoshop cs3以上、dreamweaver cs3以上、flash cs3以上。 1.网站主题(网站名称、主要内容、主要浏览群体、主体色)
3.网站文件管理结构目录(站点根目录名、站点内文件夹名、文件夹放置
的主要内容、主页面)
html:各个子页
about.html contact.html features.html feedback.html images:图片素材 script:js代码 style:css样式 index.html 主页
4.绘制主页页面结构图(各功能区的位置、名称),并提供原形设计图电子
稿
5.主要布局方法
div+css布局 6.主要操作步骤
绘制网络结构图
制作psd原稿 准备贴图 制作网页
五、
实验结果
注:可用贴图的方式,,制作过程中出现的问题,解决的方法 1. 主页的设计效果图
2. 主要结构、CSS代码 Krios
Krios
0800-800-800
src="images/icon_13.png" width="18" height="18" />
* Home
* Features
* About us
* Feedback
* Blog
* Contact
Welcome to Krios Template
Pellentesque urna urna, tincidunt et imperdiet vitae, feugiat a ipsum. Duis ac bibendum ipsum. Aliquam bibendum faucibus feugiat. Vivamus condimentum dapibus convallis. Fusce lorem libero, sagittis vitae faucibus a, adipiscing eu elit. Aliquam interdum iaculis dapibus.
Aliquam id enim erat. Sed nec arcu mauris. Aliquam quam lacus, imperdiet a volutpat vitae, consequat nec libero. Cras suscipit, neque ut posuere imperdiet, magna quam ultricies magna, tincidunt elementum turpis odio ac orci.
Etiam eget hendrerit odio.
SMPLE MENU
* LOGIN
* REGISTER
* Vestibulum ante
* Vestibulum ante
* Vestibulum ante
Our futured projects
Lorem ipsum dolor sit amet
read more
Lorem ipsum dolor sit amet
read more
About us
Quisque laoreet libero et orci congue vel suscipit elit malesuada. Aliquam erat volutpat. Proin elit vitae tortor ut vulputate tristique senectus et netus et malesuada fames ac turpis egestas.
Quisque laoreet libero et orci congue vel suscipit elit malesuada. Aliquam erat volutpat. Proin elit vitae tortor ut vulputate tristique senectus.
* Iaculis eget vel mauris
* Nullam semper mattis nisl
* Aliquam erat volutpat.
read more
Latest posts
Lorem ipsum dolor sit amet
In id ipsum elementum nunc ornare scelerisque vel sed mauris. Sed molestie porttitor cursus. Proin ultrices convallis nulla nec iaculis. Proin vel diam et nulla vestibulum malesuada. Pellentesque habitant morbi tristique senectus et netus
Cost effective
Pellentesque urna urna, tincidunt et imper diet vitae, feugiat a ipsum. Duis ac bibendum ipsum. Aliquam bibendum faucibus feugiat. Vivamus condimentum dapibus convallis.
Customisable
Pellentesque urna urna, tincidunt et imper diet vitae, feugiat a ipsum. Duis ac biben dum ipsum. Aliquam bibendum faucibus feugiat. Vivamus condimentum dapibus convallis.
Very good support
Pellentesque urna urna, tincidunt et imper diet vitae, feugiat a ipsum. Duis ac biben dum ipsum. Aliquam bibendum aucibusfe ugiat.
Vivamus condimentum dapibus convallis.
Join our newsletter
Latest tweets
Pellentesque ac ornare nisi. Cras quis pellentesque quam. In leo metus, tristique a molestie ut, mollis non diam. Vivamus tortor 12 hours ago
Follow us on twitter
Our customers say
John Doe
Pellentesque urna urna, tincidunt et imper diet vitae, feugiat a ipsum. Duis ac biben dum ipsum. Aliquam bibendum faucibusfe ugiat. Vivamus condimentum dapibus convallis.
FOOTER MENU
* Home
* Sed sollicitudin
* Natoque
LIKE US
CONTACT US
* +4 0725 55 54 54
版权所有:上海建桥学院 信息学院 1121396 黄德凯 copyright
@charset "utf-8"; background: /* CSS Document */ url(../images/bg-footer.jpg) repeat-x; body { position:absolute; background: url(../images/bg.jpg) left:-3px; #CCC repeat-x; top:1180px; font-family: Arial, Helvetica, } sans-serif; .header { font-size:12px; position:relative; margin:0; width:760px; padding:0; margin:0 auto; } } ul, li { .phone { list-style:none; width:104px; margin:0; height:18px; padding:0; background:url(../images/bg_phone} num.png) no-repeat; a { position:absolute; text-decoration: none; right: 70px; margin:0; top: 20px; padding:0; } } .top_nav { .footer { width:54px; width:100%; height:18px; height:306px; background:
url(../images/bg_TopNav.png) no-repeat; position:absolute; background:
url(../images/bg_mainNav_hover.png) right: 0px; top: 20px; }
.header h1 {
width:152px; height:55px;
position:absolute;
background:url(../images/logo.png); left: 0px; top: 5px; }
.header h1 span { display:none; }
.mainNav {
height:42px;
position:absolute; right: 0px; top: 43px; width: 407px; }
.mainNav li { float:left;
line-height:42px;
background:url(../images/mainNav.png); }
.mainNav li a { display:block; color: #CCC;
text-decoration: none; }
.mainNav strong { display:block; padding:0 10px; }
.mainNav li a:hover { background:
url(../images/bg_mainNav_hover.png) left no-repeat; }
li a:hover strong { right no-repeat; }
.header .phone img { float:left; margin:0 3px; }
.header .phone p { line-height:18px; margin:0 auto; font-family: Arial, sans-serif; font-size: 12px; color: #FFF; }
.LeftBotton { height:62px; width:43px; float:left; margin:0; position:absolute; left: -44px; top: 208px; }
.RightBotton { height:62px; width:43px; float:left; margin:0; position: absolute; right: -44px; top: 208px; }
#Cont { width:760px; overflow:hidden; float:left; height:360px; position:absolute; left: 0px; top: 90px; }
#ScrCont {
Helvetica,
width:10000000px; }
#Cont img {
background:#fff; display:block; float:left; border:none; }
#List1, #List2 { float:left; }
.content {
width:760px; height:800px; position:absolute; top:380px;
background-color:#FFF; }
.cls {
clear:both; }
.foot_content { width:760px; height:300px; margin:0 auto; }
.foot_box {
width:200px; height:140px; float:left;
margin: 25px 25px; position:relative; }
.foot_box h3 { margin:8px 0; padding:0; font-size:14px; color: #CCC; display:block; }
.foot_box .input {
border:#FFF solid 2px;
background-color:transparent; font-size:14px; height:25px; width:196px; margin:4px 0; color: #FFF; padding:0 4px; }
.foot_box .submit { border:#FFF solid 2px; background-color:transparent; font-size:14px; height:20px; width:60px; margin:5px 0; color: #CCC; background:#33b3d9; }
.foot_box .foot_box_in { width:100%; height:110px; background:
url(../images/bg_box.png); margin:0; }
.foot_box img { margin:0; padding:0; position: absolute; left:150px; top: 12px; } .fl1 { float:left; font-size:9px; color: #CCC; margin:5px; padding-bottom:5px; line-height:16px; border-bottom:#FFF solid 1px; } .fl2 { float:right; font-size:9px; color: #CCC;
margin:2px; height:20px;
line-height:16px; line-height:20px;
} }
.fl3 { .foot_box2 a{ color:#CCC;} float:left; .foot_box2 .img_1 {
font-size:9px; position:absolute;
color: #CCC; left: 121px;
margin:5px auto; top: 36px;
line-height:16px; }
} .foot_box2 .img_2 {
.foot_content .foot_boxfather { position:absolute;
height:100px; left: 102px;
width:760px; top: 25px;
float:left; }
margin:0 auto; .foot_box2 p {
} font-size:8px;
.foot_content .foot_box2 { color:#CCC;
width:210px; text-align:right;
height:100px; width:150px;
margin:2px 20px; float:right;
float:left; margin-top:70px;
position:relative; display:block;
} }
.foot_box2 h3 { .f_L {
font-size:14px; float:left;
color:#CCC; }
margin:10px 30px 10px 0; .f_R {
} float:right;
.foot_box2 li { }
width:100px;
3. 主要js代码
// JavaScript Document
var Speed = 0.01;//速度(毫秒)
var Space = 5;//每次移动(px)
var PageWidth = 760;//翻页宽度
var fill = 0;//整体移位
var MoveLock = false;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
GetObj('Cont').scrollLeft = fill;
GetObj("Cont").onmouseover = function(){
clearInterval(AutoPlayObj);
}
GetObj("Cont").onmouseout = function(){
AutoPlay();
}
AutoPlay();
function GetObj(objName){
if(document.getElementById){
return eval('document.getElementById("'+objName+'")')
}else{
return eval('document.all.'+objName)
}
}
function AutoPlay(){ //自动滚动
clearInterval(AutoPlayObj);
AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',3000);//间隔时间 }
function ISL_GoUp(){ //上翻开始
if(MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
}
function ISL_StopUp(){ //上翻停止
clearInterval(MoveTimeObj);
if(GetObj('Cont').scrollLeft % PageWidth - fill != 0){
Comp = fill - (GetObj('Cont').scrollLeft % PageWidth);
CompScr();
}else{
MoveLock = false;
}
AutoPlay();
}
function ISL_ScrUp(){ //上翻动作
if(GetObj('Cont').scrollLeft
GetObj('Cont').scrollLeft = GetObj('Cont').scrollLeft + GetObj('List1').offsetWidth
}
GetObj('Cont').scrollLeft -= Space ;
}
function ISL_GoDown(){ //下翻
clearInterval(MoveTimeObj);
if(MoveLock) return;
clearInterval(AutoPlayObj);
MoveLock = true;
ISL_ScrDown();
MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
}
function ISL_StopDown(){ //下翻停止
clearInterval(MoveTimeObj);
if(GetObj('Cont').scrollLeft % PageWidth - fill != 0 ){
Comp = PageWidth - GetObj('Cont').scrollLeft % PageWidth + fill; CompScr();
}else{
MoveLock = false;
}
AutoPlay();
}
function ISL_ScrDown(){ //下翻动作
if(GetObj('Cont').scrollLeft >= GetObj('List1').scrollWidth){
GetObj('Cont').scrollLeft = GetObj('Cont').scrollLeft GetObj('List1').scrollWidth;
}
GetObj('Cont').scrollLeft += Space ;
}
function CompScr(){
var num;
if(Comp == 0){
MoveLock = false;return;
}
if(Comp
if(Comp
Comp += Space;
num = Space;
}else{
num = -Comp;
Comp = 0;
} -
}
GetObj('Cont').scrollLeft -= num; setTimeout('CompScr()',Speed); }else{ //下翻 if(Comp > Space){ Comp -= Space; num = Space; }else{ num = Comp; Comp = 0; } GetObj('Cont').scrollLeft += num; setTimeout('CompScr()',Speed); }
六、 实验总结
注:包括制作过程中出现的问题,实验心得体会及改进意见等
这次试验总体实验量太大。做起来很有难度,但这样也让我更加熟悉这些软件的功能,我从此次实验中收获颇丰。这次实验中,js代码的实现是我遇到的一大难题,不知从何下手。还有就是兼容性问题解决的不是很好。