实践报告网页制作_第1页
实践报告网页制作_第2页
实践报告网页制作_第3页
实践报告网页制作_第4页
实践报告网页制作_第5页
已阅读5页，还剩17页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

实践报告网页制作实践活动题目一、实践目的1.制作网站页面（1）熟练掌握html基本语法,制作qq界面（2）制作当当网界面（3）制作人人网界面二、实践内容1.css基本概念及其理解CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。优点：（1）在几乎所有的浏览器上都可以使用。（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。（4）可以轻松地控制页面的布局。（5）可以将许多网页的风格格式同时更新，不用再一页一页地更新了。可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。（6）csscss（层叠样式表）负责表现。在html中应用css有三种形式：内联式、嵌入式和外部式，在这三种形式中，尽量多采用第三种--外部式，这也是结构、表现、行为分离思想的一个很重要的体现。css中有众多的选择器：标签选择器、类选择器、id选择器、子选择器、包含选择器、通用选择器、伪类选择器、分组选择器等。这些选择器有不同的写法，相应的，也有不同的作用应用于不同的场合，如何合理安排这些选择器，做到样式语句的精简和样式应用的精准，也是需要我们一步步积累经验的。css中有一个很重要的概念--盒子模型。盒子模型从上到下分为五层:边框、内边距和盒子中的内容、背景图片、背景颜色和外边距。上面的层能盖住下面的层。盒子模型有几个重要的参数：margin、padding、border还有内容物的尺寸。我们应用的时候要将盒子模型的层数概念和这些参数结合起来，就能很好的使用盒子来了。（7）往下就讲到了网页布局的三种布局模型：流动模型（Flow）、浮动模型（Float）和层模型（Layer）。流动模型(8)流动模型中主要有三个技能点：标准文档流、块级元素和margin属性。流动模型的特点是：从上到下、从左向右依次排列。而流动模型居中的关键就是最外层块级元素要定宽，同时将margin属性设置为auto。浮动模型(9)浮动布局即横向多列布局，通过设置float属性实现。当元素没有设置宽度值，而设置了浮动属性，元素的宽度随内容的变化而变化。当上一个元素设置了浮动属性后，紧邻在它后面的元素也会受到它的浮动影响，贴着它显示。因此这就带来了一个关键的点--对受到浮动影响的元素清除浮动。清除浮动主要有两种方法，第一种方法是使用clear属性，第二种方法是设置宽度后加overflow:hidden。这两种方法有一个不同点是，当两个子元素都浮动以后就撑不起父元素了，父元素变成一条线。2.javascript基本概念及其理解JavaScript，一种计算机脚本语言，主要在web浏览器解释执行，JavaScript可以被嵌入HTML的文件之中。JS主要是做界面的.用于客户端也就是浏览器端上执行的脚本开发。可以使网页有动态的效果（特效，如：图片、文字的滚动；层的动态切换，显示及隐藏；对html元素的操作；动态的对html内容修改；动态的修改CSS样式；实现如下拉列表的连动等等...），可以进行表单的输入验证（如：邮箱、电话、邮编的合法性，输入内容长度及内容验证等）同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。JS文件只需用记事本就可打开修改，修改完成必须以JS为后缀的文件。javascript是一种解释型的、基于对象的脚本语言。3.htlm基本概念及其理解html是按照有关全新web集合，让前端和后端实现完美的传输，html可以做的有很多，比如我们在日常看到的静态网站，比如一些文字的大小和段落居中和一些网站的样式布局都是用html做的，但是具体的图片和文字是什么html并不涉及。html作用是将网页使用代码实现，并且将网页的各个部分添加模块，需要的时候给模块添加颜色和大小等操作。html是一种静态网页，现在很多网站都是动静结合的。我目前对HTML的理解来看，HTML就像是一幅画板。里面涉及的基本格式就像是各色颜料，而其余各种元素就是要描绘出的形态。想象一下如果你能灵活的运用这些元素，那么你就能随心所欲的设计出独具个人特色的网页。所有需要获取相关内容的人都需要浏览你的网页，想想就觉得满满成就感。所以这么意义非凡的一件事，希望真正想学的人不要因为太多东西要背要记忆而放弃。我们可能要敲上成千上万行的代码，但是如果内心足够喜欢，相信这也是一件非常快乐的事。html基本语法链接，添加到任何HTML元素的链接，可以单击并跳到一个地址。写法：<ahref=""target="_blank">点击即可跳转到百度</a>在网页里显示一张图片写法：<imgsrc="Jennie.jpg"title="图片标题"alt="图片属性"width="200px"height="222px"/>列表：无序列表（经常用）：<ul>（关键字）<li>第一个列表内容</li><li>第二个列表内容</li></ul>有序列表（很少用）：<ol>（关键字）<li>第一个列表的内容</li><li>第二个列表的内容</li></ol>自定义列表（几乎不用的）：<dl><dt>编程语言</dt><dd>-C</dd><dd>-Java</dd><dd>-C++</dd><dt>操作系统</dt><dd>-Windows</dd><dd>-Linux</dd></dl>表格的写法：<tableborder="1"cellspacing="0"cellpadding="0"><tr><th>头部</th><th>头部</th></tr><tr><td>一行一列</td><td>一行二列</td></tr><tr><td>二行一列</td><td>二行二列</td></tr>4.爬虫基本概念及其理解爬虫是能够自动访问互联网并将网站内容下载下来的的程序或脚本，类似一个机器人，能把别人网站的信息弄到自己的电脑上，再做一些过滤，筛选，归纳，整理，排序等等。网络爬虫能做什么：数据采集。网络爬虫是一个自动提取网页的程序，它为搜索引擎从万维网上下载网页，是搜索引擎的重要组成。传统爬虫从一个或若干初始网页的URL开始，获得初始网页上的URL，在抓取网页的过程中，不断从当前页面上抽取新的URL放入队列,直到满足系统的一定停止条件。三、实践过程1、qq界面<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> <styletype="text/css"> #main{ height:100px; background-color:#666666; padding-left:80px; padding-top:10px; } #mainimg{ width:120px; } #mainimg,div{ vertical-align:middle; } #caidan{ display:inline-block; } #caidanul,li{ list-style:none; float:left; margin:8px; margin-right:20px; color:#FFFFFF; } #caidanullia{ text-decoration:none; } #caidanullia:link{ color:#FFFFFF; } #caidanullia:visited{ color:#FFFFFF; } #caidanullia:hover{ color:orange; } #anniu{ display:inline-block; margin:30px; } #anniu#denglu{ display:inline-block; border:1px#E1D5A5solid; width:70px; height:30px; color:#E1D5A5; border-radius:30px; text-align:center; line-height:30px; } #anniu#denglu:hover{ color:black; background:#E1D5A5; } #anniu#huiyuan{ display:inline-block; border:1px#FFA500solid; height:30px; width:120px; text-align:center; line-height:30px; border-radius:40px; color:#8F6809; background:#E1D5A5; margin-left:10px; } </style> </head> <body> <divid="main"> <imgsrc="img/logo.png">; <divid="caidan"> <ul> <li><ahref="#">超级会员</a></li> <li><ahref="#">年费专区</a></li> <li><ahref="#">成长体系</a></li> <li><ahref="#">会员活动</a></li> <li><ahref="#">生活特权</a></li> <li><ahref="#">游戏特权</a></li> <li><ahref="#">功能特权</a></li> </ul> </div> <divid="anniu"> <divid="denglu"> 登陆 </div> <divid="huiyuan"> 开通超级会员 </div> </div> </div> </body></html>2.宠物知识界面<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> <styletype="text/css"> li{ list-style-image:url(../img/tb.gif); line-height:50px; color:blue; background:; border-bottom:1pxblackdashed;//底下加黑色虚线 } div{ width:350px; background-image:url(../img/bg.gif); padding:1.25; margin-top:150px; margin-left:550px; padding:25px25px; border-radius:0px;//改变圆角度数 border:2pxsolidgreen; } a{ text-decoration:none; } ul{ background-color:white; } h3{ color:white; } </style> </head> <body> <div> <h3>爱宠知识</h3> 111111111111111111111111111111122 <ahref=""> <ul> <li>养狗比养猫对健康更有利</li> <rb></rb> <li>日本正宗柴犬亮相，你怎么看柴犬</li> <rb></rb> <li>狗狗歌曲《新年旺旺》</li> <rb></rb> <li>带宠兜风，开车带宠需要注意什么？</li> <rb></rb> <li>【爆笑】这狗狗太不给力了</li> <rb></rb> <li>狗狗与男童相同着装拍有爱造型照</li> <rb></rb> <li>狗狗各个阶段健康大事件</li> <rb></rb> <li>调皮宠物狗陷在沙发里的搞笑瞬间</li> <rb></rb> <li>为什么每次大小便后，会用脚踢土？</li> <rb></rb> </ul></a> </div> </body></html>3.当当网界面<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title>完善当当购物车页面</title><linktype="text/css"rel="stylesheet"href="css/cartStyle.css"/></head><body><divclass="content"><divclass="logo"><imgsrc="images/dd_logo.jpg"><spanonclick="close_plan();">关闭</span></div><divclass="cartList"><ul><li>¥<inputtype="text"name="price"value="21.90"></li><li><inputtype="button"name="minus"value="-"onclick="minus(0);"><inputtype="text"name="amount"value="1"><inputtype="button"name="plus"value="+"onclick="plus(0);"></li><liid="price0">¥21.90</li><li><ponclick="collection();">移入收藏</p><ponclick="del();">删除</p></li></ul><ul><li>¥<inputtype="text"name="price"value="24.00"></li><li><inputtype="button"name="minus"value="-"onclick="minus(1);"><inputtype="text"name="amount"value="1"><inputtype="button"name="plus"value="+"onclick="plus(1);"></li><liid="price1">¥24.00</li><li><ponclick="collection();">移入收藏</p><ponclick="del();">删除</p></li></ul><ol><liid="totalPrice"> </li><li><spanonclick="accounts();">结算</span></li></ol></div></div><scripttype="text/javascript"src="js/shopping.js"></script></body></html>4.人人网界面<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title></title> </head> <body> <formaction="人人网"method="get"> <inputtype="image"src="../img/renren_titile.gif"/><br/> <br/> <h3>人人网，中国<b>最真实、最有效</b>的社会平台，加入人人网，找回老朋友，结交新朋友。</h3><br/> <br/> 电子邮箱：<inputtype="text"/><br/> <br/> 设置密码：<inputtype="text"/><br/> <br/> 真实姓名：<inputtype="text"/><br/> <br/> 性别：<inputtype="radio"name="sex"value="男"/>男 <inputtype="radio"name="sex"value="nv"/>女<br/> <br/> 生日：<inputtype="date"/><br/> <br/> 为什么要填我的生日？<br/> <br/> 我现在：<selectname=""> <optionvalue="">请选择身份</option> <option>医生</option> <option>吃鸡选手</option> <option>教师</option> <option>垃圾分拣师</option> </select><j>(非常重要)</j><br/> <br/> <inputtype="image"src="../img/renren_code.gif"/> <ahref="">看不清换一张？</a> <br/> 验证码：<inputtype="text"/><br/> <inputtype="image"src="../img/renren.gif"/> </form> </body></html>。四、实践体会在这三周的实践周中，我学到了许多，明白了html,css,的基本语法，特点及其作用，如下总结html本身是一个很简单的语言，学习完众多标签以后，就可以开始简单的网页编写了，配合dreamweaver软件，使用起来更是事半功倍。这众多的标签大体上可分为三种：块状元素、内联元素和内联块状元素。这三种元素有其各自的特性，针对这些特性他们的应用场合也不同，如何熟练的使用这些元素是我们需要在今后的学习和工作中需要勤加练习的。我们要做到当看见一张设计稿的时候，心里就要勾勒出它的最优HTML结构。同时，需要注意的一点是一定要培养起这样的思想：结构、表现、行为分离，HTML只是负责结构，尽量避免在HTML中使用修饰效果的标签。计算机行业是个飞速发展的行业,日新月异,因此,不断加强理论学习,拓展知识领域,进行知识更新,是我们当前最为迫切的任务,在学校实践周这快一个多月的学习当中,我总结了不少的经验,让我在以后的学习当中受益匪浅.最初,我了解了计算机的硬件与系统软件的安装,维护知识.在学习这一部分内容时授课老师深入浅出,让我们自己积极动手操作,结合实践来提高自己的操作能力,使每个学员得到了一次锻炼的机会.短暂的实践周很快就结束了，这是一个丰富而有意义的过程，学校要求我们每个人带着自己的电脑，在三周的时间里，由老师带领，做出一个新闻管理系统，而这个管理系统和之前在学期内做的系统都不一样，这是一个完善，兼备数据库等多方面功能的系统，这考验我们的综合。最近在学习web前端网页制作，所以在看HTML和CSS相关的网站，学习了很多的知识，在此只拿HTML来说一下。前端真的要背诵记忆的地方很多,很多接触HTML的人都说HTML很简单，其实，但当我认真学习的过程中，却发现根本不是大家所说的那样，当然这种简单是针对web后端和Java而言的。因为亲身接触过，所以我一直都觉得，很多普通本科的培养方式是有问题的。问题主要在于两点：第一，很多东西都讲个囫囵吞枣，大部分老师上课没有激情，内容平铺直叙，草草而过，学生分不清重点要点，学起来没有方向而且很吃力；第二，课程设置杂而浅，什么都讲一点，什么都作要求，不管技术是否过时，不管学生自身的规划方向，到最后学生可能好像什么都懂一点，其实什么都不懂。首先从上到下，是先从最上层学起，比如一开始你可以利用html写一个能够看得到页面，通过改变样式和布局，你能够直观感受到你做到了什么；比如写一个最简单的python爬虫，你可以快速获取你想要的数据。这些都是作为初学者能够真切感受到的，他们会因此感受到成就感，觉得编程好神奇，很酷。这样才会有很强的学习动力，接下来渐渐去了解下层的东西，比如浏览器是如何渲染的、网络是如何通信的、程序是如何运行的等等问题。接着从下到上，知道了程序运行的原理后，可以开始写一些稍微复杂一点的应用，此时即使出现一些bug，你也大致会有一个查找问题的方向，不至于两眼一抹黑。若能够通过自己的努力解决问题，那更是

人人文库> 全部分类> 毕业设计 > 任务书类

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论