网页设计大作业

src="images/icon_13.png" width="18" height="18" /></div>
<ul class="mainNav">
<li><a href="index.html"><strong>Home</strong></a></li>
<li><a href="html/features.html"><strong>Features</strong></a></li>
<div class="content">
<div class="top">
<div class="top_left">
<h2>Welcome to Krios Template</h2>
<p>Pellentesque urna urna, tincidunt et imperdiet vitae, feugiat a ipsum.
二、 实验内容和原理
综合网站建设的完整制作流程，布局原型线框图的绘制，div+css 布局方法
的综合应用，网站的发布，兼容性测试。
三、 主要仪器设备和环境 PC 机 1 台、Photoshop cs3 以上、dreamweaver cs3 以上、flash cs3 以上。
四、 操作方法与实验步骤 1．网站主题（网站名称、主要内容、主要浏览群体、主体色）
网站名称：krios 主要内容:各方面模板 主要浏览群体：各种开发人员及图片处理人员 主题色：蓝色 灰色 白色
2．绘制网站结构(栏目)图（一级栏目、二级栏目、各栏目主要内容）
一级栏目 home
二级栏目 Features About us Feedback Blog Contact
三级栏目
3．网站文件管理结构目录（站点根目录名、站点内文件夹名、文件夹放置 的主要内容、主页面）
src="images/left_bottom.png" width="43"ห้องสมุดไป่ตู้height="62" /></div>
<div id="Cont" >
<div id="ScrCont">
<div id="List1"> <img src="images/pic_1.jpg" width="760" height="360" />
<li><a href="html/about.html"><strong>About us</strong></a></li>
<li><a href="html/feedback.html"><strong>Feedback</strong></a></li>
<li><a href="#"><strong>Blog</strong></a></li>
<div
class="RightBotton"
onmousedown="ISL_GoDown()"
onmouseup="ISL_StopDown()"
onmouseout="ISL_StopDown()"><img
src="images/right_bottom.png" width="43" height="62" /></div>
<li><img src="images/pt.png" width="12" height="12" /> Iaculis eget vel mauris</li>
<li><img src="images/pt.png" width="12" height="12" /> Nullam semper mattis nisl</li>
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.</p>
上海建桥学院
本科实验报告
课程名称： 学 号： 姓 名： 专 业： 班 级： 指导教师：
网页设计 1121396 黄德凯 计算机科学与技术 B11-2 班
石潇
课内实验目录及成绩
序号 1
实验名称 table 与表单的应用
页码 1
成绩
2
css+div 在网页布局中的应用
6
3
综合主题网站的制作
10
信息技术学院 2011 年 9 月 1 日
<li><a href="html/contact.html"><strong>Contact</strong></a></li>
</ul>
<div
class="LeftBotton"
onmousedown="ISL_GoUp()"
onmouseup="ISL_StopUp()"
onmouseout="ISL_StopUp()"><img
<img src="images/pic_2.jpg" width="760" height="360" /> <img
src="images/pic_3.jpg" width="760" height="360" /> </div>
<div id="List2"></div>
</div>
</div>
<h3> Etiam eget hendrerit odio. </h3>
</div>
<div class="top_right">
<ul>
<h3>SMPLE MENU</h3>
<li><a href="#">LOGIN</a></li>
<li><a href="#">REGISTER</a></li>
上海建桥学院实验报告
课程名称：
网页设计
实验类型： 综合型
实验项目名称：
综合主题网站的制作
实验地点：
实验日期：
年
月日
一、 实验目的和要求 1．学会综合网站建设的完整制作流程 2．学会用相关平面设计软件，完成主页的构思，完成页面布局原型线框 图的绘制，能根据提供的页面设计稿，合理地完成切图 3．掌握根据设计稿，用 div+css 方法完成网页布局、各类媒体元素的插入 4．掌握用 css 方法制作二级菜单 5．掌握 JavaScript 基本应用
<h1><span>Krios</span> </h1> <div class="phone"><img src="images/icon_09.png" width="17" height="18" />
<p>0800-800-800</p> </div> <div class="top_nav"><img src="images/icon_11.png" width="18" height="18" /><img src="images/icon_12.png" width="18" height="18" /><img
html：各个子页 about.html contact.html features.html feedback.html
images:图片素材 script:js 代码 style：css 样式 index.html 主页 4．绘制主页页面结构图（各功能区的位置、名称），并提供原形设计图电子 稿
<li><img src="images/pt.png" width="12" height="12" /> Aliquam erat volutpat.</li>
</ul> <span><a href="#">read more</a></span></div> <div class="box"><h3>Latest posts</h3><img src="images/ex4.gif" width="207" height="114" /> <h4>Lorem ipsum dolor sit amet</h4> <h6> 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</h6> </div> </div> <div class="down"> <div class="pic cls"><h3>Cost effective</h3><img src="images/bag.png" width="42" height="36" /><p>Pellentesque urna urna, tincidunt et imper diet vitae, feugiat a ipsum. Duis ac bibendum ipsum. Aliquam bibendum faucibus feugiat. Vivamus condimentum dapibus convallis.</p></div> <div class="pic"><h3>Customisable</h3><img src="images/time.png" width="42" height="36" /><p>Pellentesque urna urna, tincidunt et imper diet vitae, feugiat a ipsum. Duis ac biben dum ipsum. Aliquam bibendum faucibus feugiat. Vivamus condimentum dapibus convallis.</p></div> <div class="pic"><h3>Very good support</h3><img src="images/cricle.png" width="42" height="36" /><p>Pellentesque urna urna, tincidunt et imper diet vitae, feugiat a ipsum. Duis ac biben dum ipsum. Aliquam bibendum aucibusfe ugiat.
<h6>Quisque laoreet libero et orci congue vel suscipit elit malesuada. Aliquam erat volutpat. Proin elit vitae tortor ut vulputate tristique senectus.</h6> <ul>
5．主要布局方法 div+css 布局
6．主要操作步骤 绘制网络结构图
制作 psd 原稿 准备贴图 制作网页 五、 实验结果 注：可用贴图的方式,，制作过程中出现的问题，解决的方法 1. 主页的设计效果图
2. 主要结构、CSS 代码 <title>Krios</title> <script src="../script/main_js.js"></script> <link href="style/public.css" rel="stylesheet" type="text/css" /> <link href="style/index_style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="header">
<li><a href="#">Vestibulum ante</a></li>
<li><a href="#">Vestibulum ante</a></li>
<li><a href="#">Vestibulum ante</a></li>
</ul> </div> </div> <div class="center"> <div class="box cls"><h3>Our futured projects</h3><img src="images/ex2.gif" width="204" height="83" /><p>Lorem ipsum dolor sit amet</p><span><a href="#">read more</a></span><img src="images/e3.gif" width="204" height="74" /><p>Lorem ipsum dolor sit amet</p> <span><a href="#">read more</a></span></div> <div class="box"><h3>About us</h3><h6>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.</h6>