您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
静态网页实训报告..docx 29页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
下载提示
1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值，立即自动返金币，充值渠道很便利
需要金币：100 &&
静态网页实训报告.
你可能关注的文档：
··········
··········
计算机软件学院实训报告——Web静态主题网站设计目录前言2实训意义3本实训目的：3综合实训的目的：3对个人的要求4具体要求如下：4内容的设计及制作5一、策划阶段：5二、设计阶段网站形象设计：5清晰性：5创造性：5网站技术因素考虑 ：5页面设计6页面的平铺展示：6LOGO：6字体图片背景的搭配：6导航：6其他：6主页和部分页面展示7部分代码12要求14主页的要求14PRODCT的要求14ABOUT ME的要求14测试站点15后期维护：15功能模块：15参考文献16个人小结17夏前伟19胡维国22海继昌24陈佑宏27前言随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。在目前国内对此领域研究甚少的情况下，将网页艺术设计与其他艺术设计形式进行比较，尝试从网页艺术设计的内容、原则和特点等三个方面，对这个新的艺术设计领域进行初步的归纳总结和理论探讨。作者认为网页艺术设计是艺术与技术的高度统一，指出网页艺术设计包含视听元素与版式设计两项内容；以主题鲜明、形式与内容相统一、强调整体为设计原则；具有交互性与持续性、多维性、综合性、版式的不可控性、艺术与技术结合的紧密性等五个特点。在明确了网页艺术设计与网站主题的关系的基础上，提出了“美”和“功能”都是为了更好地表达网站主题这一观点。 网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术实训意义本实训目的：通过本次实习对自主网站的设计，使我们熟练应用HTML标记语言设计制作网页、熟练应用Dreamveaver网页设计软件，使我们对html5+css3所学的内容有一个系统的理解和掌握。
在制作过程中，主要掌握对网页的布局、色彩的搭配、框架的应用、层的运用、行为的实现、表单的使用、模板和库的应用等，完成作品。 综合实训的目的：《Web静态主题网站设计》主要目的是让我们通过这门实践课程的学习了解和掌握网页设计的基本方法，通过不断上机实习训练达到解决实际的问题。因此，在本学期特设置此课程设计，集中一段时间使学生综合运用所学习的网页制作知识及以前所学习的计算机方面的知识，按照网站制作的流程，完成一个相对具体、综合的网站，全面巩固学生的知识，培养学生解决实际问题的能力，从而达到学以致用的。对个人的要求我们每个人都应通过本次实训项目课程的学习，培养自己系统、完整、具体地完成网站设计所需的工作能力，通过信息收集处理、方案决策、制定行动计划、实施计划任务和自我检查评价的能力训练，锻炼学生在职场应有的工作能力。每个学生经历完整个网站设计开发的训练，将掌握完成实际网站设计应具备的核心能力和关键能力。具体要求如下：
1.充分了解本指导手册规定拟填写的各项网站设计各阶段的作业文件与作业记录。
2.充分了解自己的学习能力，针对拟完成网站的设计功能要求与规范，查阅资料，了解相关网站设计的技术情况。
3.在学习过程中，认真负责，在关键问题与环节上下功夫，充分发挥自己的主动性、创造性来解决技术上与工作中的问题。
4.认真填写与撰写从资讯、方案、计划、检查到评估各阶段按规范要求完成的相关作业文件与工作记录，并学会根据学习与工作过程的作业文件和记录及时反省与总结。内容的设计及制作一、策划阶段：一阶段的主要任务是收集、研究和分析用户需求，讨论Web内容，制定计划。二、设计阶段网站形象设计：主要包括设计网站的标志（logo），设计网站的标准色彩，设计网站的标准字体。网站主题及风格设计，从主题策划到网站风格创意等内容。网站内容设计：清晰性：网站内容必须简洁明了，直奔主题，非常有效地讲清楚你想说的内容。创造性：网站观点会使访问者产生共鸣，发出认同吗？这可以是访问者判断一个公司是否有实力，从而影响到购买动机的重要因素。
突出三个重点：突出你的产品的优点和与众不同的特色；突出帮助访问者辨别、判断同类产品优劣方面的内容，出内容的无庸置疑的正确性。网站技术因素考虑 ：浏览器脚本兼容性。面对屏幕分辨率的适应。网是否需要交互操作。页面设计页面的平铺展示：主要的物件有：导航栏、LOGO、Banner、按钮、图片、文字。LOGO： logo是每个网站多要有的，他是网站为了给大家一个比较直观的信息的表达工具。LOGO的位置通常在页面的左上角。这个地方最明显和直观，可以第一时间给人于默化的效果。字体图片背景的搭配： 体图片的搭配要直观，尽量不要撞色太严重，要考虑字迹清楚，色彩简单一些，不要超过四种。页面的分割要显
正在加载中，请稍后...个人小作品（3）
学习了一段时间的html+css，自己来制作个网站首页静态页面来玩玩，检验自己的学习成果。
制作一个静态页面前必备的：
html&html5基础（html标签的知识、运用,标签所代表的意义）css&css3基础（css属性基础知识，每个属性所代表的意义）开发软件（本人用的：Notepad++）图形处理软件（ps6）用来切图，如切logo、某背景图片、图片等。五个主要浏览器（Google、火狐、欧朋、苹果、IE）IETester软件（测试不同版本浏览器的兼容性）
搭建一个本地服务器网上下载一张网站首页psd素材
本作品的完整代码GitHub：
网页素材如下：
当我们拿到素材之后，接下来不是马上打开开发软件就开始div、css布局什么的，别慌，我们应该拿着素材分析分析，例如：该网页的分布形式是怎样的？该如何布局？此网页需要用到哪些前端知识，自己可以用画图软件先画画该页面的分布等，通过分析素材，可以将整个页面分成以下几个部分来布局，如：
如图：整个页面分成三大部分：header头部、content内容部分、footer页脚部分，头部以可以分成header_top、nav导航栏两个部分；内容区域可以分成侧边栏、公司简介、服务范围三部分；页脚一个部分。
对照这个布局就可以简单地敲下代码：
&div id=&container&& &!-- 整个容器 --&
&header id=&header&& &!-- 网页页眉部分 --&
&div class=&header_top&& &!-- logo部分 --&
&nav class=&header_bottom&& &!-- 导航栏部分 --&
&div id=&content&& &!-- 网页中间内容部分 --&
&div class=&asides&& &!-- 侧边栏 --&
&div class=&comp_pro&& &!-- 公司简介 --&
&div class=&service&& &!-- 服务范围 --&
&footer id=&footers&& &!-- 网页页脚部分 --&
正常书写代码来完成页面的制作。
应该注意的几点：
css部分开头部分应该有reset,每个浏览器都有一些自带的或者共有的默认样式，会造成一些布局上的困扰，css reset的作用就是重置这些默认样式，使样式表现一致，比如 *{margin:0;padding:0}就是一个最简单的css
/* css reset */
body,ul,li,p,
h1,h2,h3,h4,
h5,h6,img {
margin: 0;
padding: 0;
font-family: &Microsost YaHei&, &Sim Sun&;
font-size: 12
color: #000;
ul,li {list-style:}
a {text-decoration: color: #000;}
border: 0;
outline: 0;
这段文字的背景不是简单地用图片来实现的，而是使用渐变属性来实现的，而且是透明的线性渐变：linear-gradient(rbga(255, 255, 255, 1))
rgba()有四个值，前三个是颜色值，第四个属性值有&1&和&0&两种，&1&表示不透明渐变，&0&表示透明渐变。
有相似的地方可以用单独的类表示，用时可以引用这个类就行，这样就减少了代码量、冗余度。
.tongyong {
height: 30
padding-left: 10
border-bottom: 1px solid #ccdae9;
font-size: 14
line-height: 30
background: -moz-linear-gradient(to bottom,#cddbea, #f8fafc);
background: -webkit-linear-gradient(to bottom,#cddbea, #f8fafc);
background: -mos-linear-gradient(to bottom,#cddbea, #f8fafc);
background: -o-linear-gradient(to bottom,#cddbea, #f8fafc);
background: linear-gradient(to bottom,#cddbea, #f8fafc);
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#cddbea', endColorstr='#f8fafc'); &!-- IE9滤镜兼容 -&
用.tongyong来表示这个渐变的小标题，需要用到时引用.tongyong这个类名即可。
自己在开发过程中遇到的问题及解决方法：
1、若图片在同级目录下的另一个文件里，css引用URL路径为：../images/header_bg.gif
2、问题：当缩小屏幕时，屏幕有滚动条，且部分内容裁掉不能显示出来？
解决方法：
定义容器属性overflow:屏幕缩小时，若此时给定屏幕的宽度是百分比，则没有滚动条，多余内容被省略，若此时给定屏幕的宽度是固定值，则有滚动条，且多余内容拉开滚动条显示。
#container {
width: 100%; /* 屏幕的百分比显示 */
overflow: /* 溢出的内容省略*/
background-color: #c7
此时若宽度是百分比表示，则多余的部分不会显示。
若宽度是固定值，则会出现滚动条，拉动滚动条，会显示多余的部分。
#container {
width: 1440 /* 屏幕的百分比显示 */
overflow: /* 溢出的内容省略*/
background-color: #c7
3、问题：用:before、content等属性为列表项目添加列表标记时，为何添加的标记显示不出来？
答：需要将该添加的元素设置为display:对块级元素有效。
content: '';
当设置了display:时，添加的列表标记才会显示。
4、渐变在ie6~ie9浏览器中兼容的问题。
答：对于ie6~ie9来说不支持渐变属性gradient，可以用滤镜filter思想来实现渐变的效果。
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='rgba(246,237,237,0)', endColorstr='rgba(246,237,237,0)'); /* 针对IE的渐变，使用滤镜的实现。 */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr='rgba(246,237,237,0)', endColorstr='rgba(246,237,237,0)');&
:root{filter:} 对于Ie9单独设置滤镜。
GradientType=1||0; &属性值&1&表示水平方向上的滤镜效果，属性值&0&表示垂直方向上的滤镜效果。
startColostr表示起始颜色，endColorstr表示结束颜色。
5、transfor属性中旋转（rotate）在ie8中兼容的问题。
答：利用矩阵的方法在Ie8中实现旋转效果。
&filter:progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9777, M12=-0.5394, M21=0.5398, M22=0.9779);
四个属性：M11 M12 M21 M22分别表示cos(旋转角度)、-sin(旋转角度)、sin(旋转角度)、cos(旋转角度)。
sizingMethod表示设置或检索的滤镜图片在容器中的显示方式：
auto 自动填充拉伸
6、IE浏览器不兼容一些HTML5、CSS3新元素，可以通过引入HTML5、CSS3插件来使浏览器兼容。
自我思考：
1、好的代码是慢慢修改出来的，当第一次完成代码时并不代表这段代表是完美的，应重复地修改。并给予一定的注释。
2、应该注意第一个细节，代码尽量简洁，应该为页面的样式多设几个版本，如：字体样式可以多预设几个，微软雅黑、宋体、新宋体、仿宋等。
3、当第一次拿到素材时，不应该急着马上div+css布局什么的等，应该拿着素材分析思考这素材应该会用到哪些知识，用到哪些框架，最好能用草稿纸将素材布局规划出来，这样对于书写代码就简洁多了。
4、开发过程中应该注意SEO，如：img标签应该有属性alt，用文本代替图片显示，空格、空白部分不应该留多；标签有开始就有结束。
5、不管是html、css、js都应该进行代码重构，有利于开发人员对代码的维护、有利于团队开发等。如：css部分应该有一定的注释，内容包含文件名称、作者的信息（姓名、邮箱等）、代码完成时间、代码修改时间。
问：你认为本部作品还可以在哪些地方进行改进？
答：1、本作品只是用了HTML、css的部分知识进行布局的。可以使用javascript设计交互事件，如：侧边栏旁可以设计一个客服在线交流应用等。
2、本部作品未涉及响应式开发等方面的内容，可以在此基础上将页面设计成响应式，现在生活中的电子产品越来越丰富，如不同分辨率的手机、ipad、电脑等移动设备，可以将此页面应用移动开发方面的知识设计成移动App。
3、若考虑到长远的未来，WebVR(WEB+VR)也是一个不错的方向
问:此次,你本人有了哪些收获或者发现自己有哪些不足之处?今后应从哪些方面去改进?
答:收获--对前端这个行业进一步有了些了解,对html、css知识有初步地掌握，对以后的学习有了足够的信心。
不足--对一些知识还未吃透，在开发过程中，该运用的知识未运用到，一些简单的问题bug不能及时地解决，有时会纠结一个小时，如：背景图片不显示的bug、ie9及以下的浏览器对一些属性的不兼容（渐变、旋转等）。缩小屏幕时页面会被裁剪掉等，不能很好地引用注释。
这些应该是实战经验不足的表现，以后应多做作品，多积累实战经验，多看别人的作品、代码，从中学习别人好的精华部分，多翻优秀的网页看，从中补自己不足的地方。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：22118次
积分：1331
积分：1331
排名：千里之外
原创：110篇
(8)(10)(5)(14)(28)(17)(23)(5)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'