婚庆网站前台设计与制作.doc

上传人:飞****2 文档编号:57223751 上传时间:2022-11-04 格式:DOC 页数:36 大小:192KB
返回 下载 相关 举报
婚庆网站前台设计与制作.doc_第1页
第1页 / 共36页
婚庆网站前台设计与制作.doc_第2页
第2页 / 共36页
点击查看更多>>
资源描述

《婚庆网站前台设计与制作.doc》由会员分享,可在线阅读,更多相关《婚庆网站前台设计与制作.doc(36页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、重庆邮电大学高等函授专科毕业设计(论文)设计(论文)题目: 婚庆网站前台设计开发 入学年月 2015年3月 姓 名 王聪 学 号 专 业 计算机信息管理 所属科站 重庆新华电脑学校 指导教师 赵商 完成日期 2016 年 6 月 20 日重庆邮电大学高等函授毕业设计(专科)任务书第1页/共2页姓名王聪学号专业计算机信息管理所属站重庆新华电脑学校工作单位重庆新华电脑学校电话通信地址重庆沙坪坝凤鸣山8号E-mail地址设计(或论文)题目婚庆网站前台设计指导教师、指导教师组组长及成员姓名职 称工作单位及所从事专业赵商高级重庆新华电脑学校,网站开发王聪专业方向、基本理论、技术要求及设计(论文)内容纲要

2、专业方向: 网站开发基础理论:PS进行页面设计,遵循W3C公布的网页内容无障碍设计,从三个方面入手进行开发:结构、表现、和行为。结构用HTML搭建出框架,表现用DIV+CSS综合布局,行为用JavaScript做出交互效果。采用网站前端开发语言HTML、CSS、JavaScript、JQuery。技术要求:1、采用WINXP以上的操作系统;2、采用设计Photoshop设计图、编辑器Notepad+;3、开发软件为网页三剑客:Dreamweaver、Flash、Fireworks;4、开发语言为HTML、DIV+CSS、JavaScript、JQuery;设计内容:1、设计网站的整体风格;2、

3、处理网站所需的Logo、图片、素材、文字等;3、做好网站的色彩搭配;4、设计网站各个页面的内容;5、实现整体风格的统一,实现跳转功能; 6、网站界面简洁大方,操作简单,有较好的交互性。论文内容:毕业论文要求论点突出、条理清楚、论据充分、内容实际、格式规范,所针对的题目应具有一定的广泛性和实用性,结论明确。论文的内容纲要应符合以下要求:1、摘要:以浓缩的形式概括课题的内容,中文摘要在500字左右。 2、目录:目录按三级标题编制,要求标题层次清晰,题文一致。 3、正文:毕业论文正文包括前言、主体和结论。要求正文字数不少于10000字。正文主体部分应按照网站开发的思想进行论述。 4、结束语:对导师和

4、给予指导或协助完成毕业论文(设计)工作的组织和个人表示感谢。文字要简捷、实事求是。5、参考文献:文献条目只要包括三个部分:作者、标题和出版信息。数量5-10本。6、附录:是一些不宜放在正文中,但有参考价值的内容。本人在该设计中具体完成的工作1.完成市场调研和调查,做好需求分析,然后收集行业信息的资料并整合。2.完成庐山旅游景点网站前台页面的设计、代码和效果的实现。3.完成庐山旅游景点网站前台页面的验收和测试。4.完成论文的撰写。主要参考文献、资料:朱印宏,邓艳超.DIV+CSS网站布局从入门到精通.北京希望电子出版社,2011年1月徐磊主.网页制作与网站建设技术大全.清华大学出版社,2008年

5、施教芳.HTML$CSS标准教程.中国青年出自版社,2013年5月第一版要求完成报告书的时间:2016年5月15日审批意见 函授站 (盖章)年 月 日审批意见重邮成教院(盖章) 年 月 日注:第2页/共2页;本表由指导教师填写一式三份。重庆邮电大学高等函授毕业设计(专科)评定表姓 名王聪学号专业计算机信息管理所属站重庆新华电脑学校设计(或论文)题目婚庆网站前台页面的设计与制作毕业设计(或论文)的评语:指导教师(签名) 年 月 日备 注重庆邮电大学高等函授毕业设计(专科) 评阅意见表毕业论文题目庐山旅游景点前台页面的设计与制作评 价 项 目得分选题质量01选题符合专业培养目标,体现综合训练基本要

6、求选题综合得分(共10分):02题目难易度03题目工作量04理论意义或实际价值能力水平05查阅文献资料能力能力水平综合得分(共50分):06综合运用知识能力07研究方案的设计能力08研究方法和手段的运用能力成果质量09文题相符论文成果综合得分(共40分):10写作水平11写作规范12篇幅评阅人评定成绩(共100分) 评阅人: 重庆邮电大学高等函授毕业设计成绩总评表姓名 王聪学号 专业计算机信息管理所 属 站重庆新华电脑学校设计(或论文)题目婚庆网站前台页面的设计毕业设计指导委员会意见: 根据毕业设计指导教师和评阅教师意见,经成人教育学院高等函授毕业设计指导委员会认真评定,该学员的毕业设计总评(

7、四级评分制)成绩为: 毕业设计指导委员会主任: 年 月 日【摘要】 近年来随着网络信息技术的广泛应用,互联网正逐步改变着人们的生活方式和工作方式。越来越多的个人,企业纷纷建立自己的网站,利用网站来宣传推广自己。人们的工作、生活和交流方式发生了巨大的改变。网页技术已经成为当代青少年学生必备的知识技能。目前大部分制作网页的方式都是运用可视化的网页编辑软件,这些软件的功能相当强大,操作起来非常方便。但是对于高级的网页制作人员来讲,仍需了解HTML,CSS及JavaScript等网页设计语言和技术,这样才能充分发挥自己丰富的想象力,更加随心所欲地设计符合标准的网页。在讲解所设计的网站之前,我会先将HT

8、ML的常用代码简单的介绍一遍;以及DIV+CSS的布局方式;同时了解JavaScript脚本语言的强大之处。由浅入深,进而会采用真实案例进行分析讲解。了解制作网站的思路和整套流程。从而展现网页制作独特的魅力,使读者不会感到枯燥、教条。同时网页制作中融入了很多设计的理念。循序渐进,当整个网站的构架思路清晰明了,讲解所设计网站时也将轻而易举的展现在大家眼前。本篇论文正是在这样的思路下创造而成。在不便的情况下,读者可以根据书中的实例和效果图进行分析和比较。网站已经成为现阶段众多企业不可或缺的网络营销平台,互联网应用规模正不断扩大。其中,特别是中小型企业,对于网络平台搭建的需要求相当的迫切。各大门户网

9、,企业网都在WEB2.0的标准上,采用CSS+DIV来布局网站,所此次设计主要是对DIV+CSS的一次实践与运用,也就是网站设计过程中灵活使用DIV+CSS布局对网页内容进行结构、表现与行为的分离即表现和内容分离的,用最科学、最合理的结构来构建网站。所以最终采取DIV+CSS布局的方式实现设计效果。【关键词】DIV+CSS布局 XHTML JavaScript 景点网站 网站设计与构建 目 录前 言1第一章 网页基础和网站开发流程2第一节 认识网页2一、 网页和网站2二、 网页类型2三、 静态网页和动态网页3第二节 网页设计概述3一、 网页设计概述3二、 网页设计的任务3三、 网页配色4第三节

10、 网站发展趋势4一、 未来网络的发展趋势分析4二、 网络行业将是连锁品牌的天下5第二章 (x)HTML语言基础6第一节 认识HTML、XHTML和XML6一、 初识HTML、XHTML和XML6二、 HTML基础6第三章 DIV+CSS9第一节 CSS概述9一、 认识CSS9二、 为什么学习CSS10第二节 CSS语法和用法11一、 CSS基本结构11二、 CSS基本用法11三、 CSS样式表11四、导入外部样式表12第四章 JavaScript13第一节 JavaScript简介简介13一、 了解JavaScript13二、 在HTML文档中使用JsvsScript13第二节 基本流程控制1

11、5一、 使用对话框15第五章 网站开发实战16第一节 产品策划16第二节 画板16第三节 设计图17第四节 切图18第五节 重构19第六节 布局20第七节 庐山旅游景点网站前台页面效果图21一、 庐山旅游景点网站首页21二、 庐山旅游景点网站概述页面22三、 庐山旅游景点网站新闻资讯页面23四、 庐山旅游景点网站新闻景区大全页面24五、 庐山旅游景点网站旅游服务页面25六、 庐山旅游景点网站旅游指南页面26七、 庐山旅游景点网站游客留言页面27结 论28结束语29参考文献30前 言21世纪是信息高速发达的时代,网络作为当今最流行最方便快捷的媒介也越来越被人们接受,并且融入我们的生活。随着高校信

12、息化建设的不断推进,网站 的作用超越了传统的信息获取,交流它更能体现组织机构的风采,性质。所以高校院系建立本院系美观,专业,易于维护管理的网站已经势在必行。本 论文主要围绕数字媒体技术专业的门户网站为开发主题,最基本也是最必须的三个技能。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。虽然表面看起来这些很简单,但这里面需要掌握的 东西绝对不会少。在进行开发前,需要对这些概念弄清楚,弄明白,这样在开发的过程中才会得心应手。分析并解决实现中的若干技术问题;介绍了 个性化页面的背景及jsp + javascript

13、+ 不对,加号左右空格太多mysql系统的一般原理;阐述整个个性化页面生成系统的系统结构及工作原理;分析了系统实现中的特殊性,难点和重点;设计实现用户注册,用户登录,用户 管理等jsp页面。分析并解决实现中的若干技术问题;建立完整的校园网站,进行测试并分析结果。该网站有效地实现用户通过JSP页面访问来进行用户注册,登陆,并对网站内容进行有效的管理,提升了后期添加和删除信息的有效性,具有一定的应用价值关键字:JSP;javascript;网站美化;交互设计。没有这个第一章 网页基础和网站开发流程第一节 认识网页一、网页类型随着互联网技术的不断发展和普及,网络与现实生活的结合变得更加紧密。网页(W

14、eb Page)是互联网上显示的信息页面,类似生活中的一页书,是展示信息的最小单元。现在网络的发展已呈现商业化、全民化、全球化的趋势。目前,几乎世界上所有的公司都在利用网络传递商业信息,进行商业活动,从宣传企业、发布广告、招聘雇员、传递商业乃至拓展市场、网上销售等,无所不能。如今网络已成为企业进行竞争的战略手段。企业经营的多元化拓展,企业规模的进一步扩大,对于企业的管理、业务扩展、企业品牌形象等提供了更高的要求。网页多种分类方法,习惯上分为表态网页和动态网页。静态网页一般以.html或.htm为文件扩展名,多通过网页设计工具一次性设计并通过手工更新页面信息,信息更新速度相对比较缓慢。当然现在有

15、的网站管理系统也可以生成静态网页称之为伪静态。动态网页是通过网页脚本与语言自动处理、自动更新的页面。如论坛中的贴子就是通过网站服务器运行程序,自动处理信息。动态网页的服务器读者技术主要包括CGI、ASP/ASP.NET、PHP和JSP。二、网页和网站网页是构成网站的基本元素,是承载和种网站应用的平台。通俗地说,网站就是由网页组成的,如果只有域名和虚拟主机而没有制作任何网页的话,任何人都无法访问网站。一堆展示特定内容的网页就构成了网站。实际上网页就是一个文件,通常是HTML格式,文件扩展名一般为.html或.htm,也可以是.asp、.aspx、.php或.jsp等。网页存放在世界某个角落的某一

16、台计算机中,而这台计算机必须是与互联网相连的。网页经由网址(URL)来识别和存储,当我们在浏览器中输入网址后,经过一段复杂而又快速的程序处理,网页文件会被传送到你的计算机上,然后再通过浏览器解释网页的内容同志展示到你的眼前。网站(Web Site)是一堆展示特定内容的网页的集合。简单说网站是一种通迅工具,主像布告栏一样人们可以通过网站浏览信息或发布信息。访问网站的看见的第一个页面叫做首页(主页),首页类似图书中的目录具有导航作用。三、静态网页和动态网页它们的区别是根据网页制作的语言来区分。静使用语言HTML;动使用语言HTML+ASP、HTML+PHP或HTML+JSP等。动态网页的程序是在服

17、务器端运行最后把运行的结果返回到客户端浏览器显示。静是事先制作好的,直接通过服务器传递给客房端浏览器浏览。网站采用哪一种主要取决于网站的功能需求和网站内容的多少。如果网站功能简单,内容更新理不是很大就选静态网页。第二节 网页设计概述一、网页设计的概述随着互联网技术的不断发展和普及,网络与现实生活的结合变得更加紧密。网页(Web Page)是互联网上显示的信息页面,类似生活中的一页书,是展示信息的最小单元。成功的网业首选需要优秀的设计,然后辅之优秀的制作。设计是网站的核心和灵魂,是一个感情思考与理发分析相结合的复杂过程,它的方向取决于设计的任务,实现依赖于网页的制作。网设最重要的东西并非在软件的

18、应用上,而是在我们对网页设计的理解以及设计制作的水平、我们自身的美感以及对页面的把握上。二、网页设计的任务设计是一种审美活动,成功的设计伤口一般都很艺术化。但艺术只是设计的手段,而并非设计的任务,任务是实现设计者的意图,而并非创造美。网页设计的任务是指设计者要表现的主题和实现的功能。站点的性质不同设计的任务也就不同,一般可以分为三类: 资讯类网站:以内容为主,提供大量信息,设计就需要注意页面的分类,结构的合理、页面的优化、网页的亲和力等问题。 形象类:以宣传为主,网站规模较小,页面小信息小,功能也较为简单,主要是突出企业形象,因此对美式水平要求较高 应用类:网页信息不求大而全,但追求简洁、精致

19、、大方,既要保证网站的可操作性,还要保证应用的灵活性,突出鲜明的应用特性。三、网页配色色彩代表了不同的情感,有着不同的像征含义。这些像征含义是人们思想交流中的一个复杂问题,它因人的年龄、地载、时代、民族、阶层、经济地区、工作能力、教育水平、风俗习惯、宗教信仰、生活环境、性别差异而有所不同。单纯的颜色并没有实际的意义,和不同的颜色搭配,它所表现出来的效果也不同,如绿色和金黄、淡白搭配,可以产生优雅、舒适的气氛。蓝色和白色混合,能体现柔顺、淡雅、浪漫的气氛。红色和黄色、金色的搭配能渲染喜庆的气氛。而金色和粟色的搭配则会给人带暖意。设计的任务不同,配色的方案也随之不同。网页本色没有法则,如果一定要套

20、用某个法则,则设计效果就会适得其反。经验上我们可先确定一种能表现主题的主体色,然后根据具体的需要,应用近似的颜色和对比的颜色来完成整个页面的配色方案。整个页面在视党上应是一个整体,以达到和谐、悦目的视觉效果。如,红色是火的颜色,热情、奔放、也是血的颜色,可以象征生命。黄色是明亮度最高的颜色,显得华丽、高贵、明快。第三节 网站发展趋势一、未来网络的发展趋势分析随着网络知识的普及,很多人都知道建立自己的网站销售自己的产品或推广自己的服务,也越来越来多人在网站开店(淘宝店、拍拍店、百度有啊店)实现在线产品销售,人们也明白了出行时用网上电子地图查询一下路况,也知道了搜索引擎能告诉他们想要找的结果和答案

21、。这些形象产生或发展到一定程度一定会影响以后人们的生活,记得以前有个搞培训的老师跟我这么说过,以后,你可以没有车、没有吃的、甚至没有钱,但是你不能没有电脑没有英特网。的确要是谈到未来网络的发展,我们不难想象以后的生活都是通网上进行,想吃什么只要进附近的餐饮网站上点击预订一下,想出去逛逛可以在网上打开出租车公司的网站进行预订,所有费用都可以通过网络实行在线支付,你只要动动键盘上的手指,非常轻松地就可以拥有您想有的东西。二、网络行业将是连锁品牌的天下前边说到了未来网络的美好前景,下边我们谈谈网络方面的商机,今城科技作为网络行业的后起之秀,清楚到认识到,以后小型的发展空间将变得越加艰辛,因为连锁,品

22、牌等形式正在扩展到每个角落,生活水平的提高,必定会让人们的选择更加挑剔。大家可以想像一下,品牌和连锁企业因为有人投资,销售网点将分布每个角落,他们将拥有更新进的生产设备,更好的管理制度以及质量控制系统,所有的一切都会远远抛开小型企业或个人,而小型企业无论在哪方面都会处在劣势,企业一旦缺乏市场竟争力,很能支撑下去,而有钱的大企业可以高薪聘请顶尖人才,可以拿出更多的广告费用去喧传自己的产品服务,这样的竟争优势是小型企业或个人远不及的,当然或许也会有些企业拥有生存空间,但是相必也会很少,即使能让企业活下去,盈利相必也不会太多。随着网络信息化的不断升温,目前人们的生活越来越离不开网络了,在大城市里这样

23、的现象尤为突出,北京、上海、珠三角地区保守估计也得有60%的人天天在与网络打交道,他们每天泡在网上,他们一天离开网络手都会庠庠。的确,这些城市里网络信息化基础都已经很完善,基本上规模的公司都拥有自己的网站,也出现不了不少在家里自己办公,成为SOHO一族的人也大有人在,人们通过网站在线销售产品,销售广告,搞网赚,开网店等方式真逐渐发财致富。第二章 (x)HTML语言基础第一节 认识HTML、XHTML和XML一、初识HTML、XHTML和XML根据规范化设计要求,网页设计师必须从三个方面入手进行系统学习:结构(Structure)、表现(Presentation)和行为(Behavior),这些

24、方面对应的技术也分为以下三个方面: 结构(Structure):主要HTML、XHTML和XML 表现(Presentation):主要CSS 行为(Behavior):主要包括对象模型(如W3C DOM)、ECMAScript、JavaScript、VBScript等。HTML(Hypertext Markup Language超文本标识语言),最新版式本HTML5.0,使用广泛的是HTML4.1版本。HTML表示广义的标识语言,包括HTML和XHTML,而HTML语言中的HTML表示狭义的标识语言版本,不适合构建标准化网页。XML(The Extensible Markup Languag

25、e可扩展标识语言)是网页设计的一次新生。HTML缺点是结构过于灵活,语法不规范,网页信息显得杂乱无章、没有秩序。XML对信息的格式和表达方式做了最大程度的规范。如HTML关心的是信息的表现形式,而XML关心的就是信息本身的格式和数据内容。XML不但将客户商的信息展示技术提高到一个新的层次,而且可以显著提高服务器的信息获取、生成、发布和共享能力。建立XHTML的目的是实现HTML向XML过渡。XHTML(The Extensible HyperText Markup Language可护展的超文本标识语言),特点:1.用户可以扩展元素,从而护展功能,删除了部分属性描述性的元素。2.很好与HTML

26、沟通,兼容当前不同的网页浏览器。二、HTML基础HTML文档是由HTML标签组成的描述性文本,HTML标签可以标识文本、图像、动画、声音、表格、链接等。1、语言作用HTML使用一种网页内容标识语言,易学易懂,可以制作功能强大、美观大方的网页。使用如下: 标识文,如定义标题文本、段落文本、列表文本、预定义文本 建立超链接,通过超链接可以访问互联网上的所有信息 创建列表,把信息有序地组织在一起,方便游览 在网页中显示图像、声音、视频、动画等多媒体信息 制作表格,方便显示大量数据。 制作表单,允许在网页中输入文本信息,执行其他用户操作,方便信息互动。2、文档基本结构HTML文档一般包含两部分:头部区

27、域和主体区域。基本结构由三个标签负责组织。3、基本语法HTML语言的规范条文不多,逻辑上分析,这些标签包含的内容就表示一类对象,也称网页元素。从形式上分析,这些网页元素通过标签进行分隔,然后表达一定的语义。实际上网页文档就是由元素和标签组成的容器。4、常用标签数据库分为大型数据库、中型数据库还有小型数据库。下面列举几个比较常用的数据库。(1)Mysql 标识文档的基本结构。u标识文档的起始和终止;标识文档的头部区域;标识文档的的主体区域(2) 文本格式标签 标识文本区块,并附带一定的显示格式。.标识文档的标题;.标识标题文本,其中i表示16,分别表示一六级标题; 段落文本; pre 预定义文本

28、; blockquote 引用文本。(3) 字符格式标签 标识部分文本字符的语义。呈现一定的显示效果。强调文本,加粗效果;引用文本,斜体;放大文本,放大;缩小文本;上标文本;下标文本。(4) 列表标签 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。无序列表始于 标签。每个列表项始于 。列表结构分两种类型:有序列表和无序列表。无使用项目符号标识,有使用编号标识列表的项目顺序。 标识无序列表。(5) 链接标签 HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。. 标识超链接,把多个网页联系在一起。它还

29、可以定义锚点。锚点可以定位到网页中某个位置。(6) 多媒体标签 多媒体来自多种不同的格式。它可以是您听到或看到的任何内容,文字、图片、音乐、音效、录音、电影、动画等等。确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时,它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件,而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。用于引入外部多媒体文件并显示。嵌入图像;u和嵌入多媒体。(7) 表单标签制作交互式表单。form 表单结构;input 文本域、按钮和复选框;textarea 下拉开表;option

30、下拉列表中的选择项目。表单是一个包含表单元素的区域。表单元素是允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。表单使用表单标签()定义。第三章 DIV+CSS第一节 CSS概述一、认识CSSCSS(Cascading Style Sheets层叠样式表,CSS样式脚本)是W3C组织用来改善HTML在显示网页方面的缺陷的。随着网页信息的飞速增加,HTML这种把信息显示内容与信息显示样式混在一起的设计方法已经无法满足人们对网络信息的快速搜索需求,更不能适应互联网的发展。W3C标准化组织于1996年12月17日推出了CSS1规范,并得到了微软与网景公司的支持。1998年

31、5月12日,W3C推出了CSS2,从此该项技术在世界范围内得到推广和使用。现在在部分网页中使用的CSS样式都遵循CSS 2标准。CSS语言不需要编译,也不需要特殊的处理,用户只要把它们放在和标签之间,或者存一个CSS文件并链接即可。CSS布局是是CSS语言的高级使命,在网页设计中,HTML负责构建网页的基本结构,CSS负责设计网页的表现效果,JavaScript负责开发网页的交互效果。XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求。div+css是一种网页的布局方法,这一种网页布局方法有别于传统

32、的HTML网页设计语言的表格(table)定位方式,真正地达到了W3C内容与表现相分离。HTML语言自HTML4.01以来,不在发布新版本,原因就在于HTML语言正变得越来越复杂化、专用化。XHTML语言是一种可以将HTML语言标准化,用XHTML语言重写后的HTML页面可以应用许多XML应用技术。使得网页更加容易扩展,适合自动数据交换,并且更加规整。在XHTML网站设计标准中,不在使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。div+css结构清晰,很容易被搜索引擎搜索到,天生就是适合优化seo,降低网页大小,让网页体积变得更小。注意:div+css结构清晰、精简,不意味着可以

33、全部用div+css结构,比如通篇HTML标签全DIV的,貌似除了之上及之上及之外,其它全是,就如同整个HTML是一万个毫不相干的内容拼装起来,或者通篇是结构的,就如同这个页面所有元素全是列表。事实上这两种情况还相当普遍,因为曲解了“DIV+CSS”的真实含义,也许根本就不应该有这个说法,因为一个完整页面几乎不可能仅仅DIV+CSS就能完成。二、为什么学习CSSCSS是为了克服HTML网页布局所带来的弊端出现的。在HTML语言中,各种功能都是通过标签元素实现的,然而通过标签的各种属性来定义标签的个性化显示,这也造成了各大浏览器厂商为了实现不同的显示效果而创建各种自定义标签,同时为了设计出不同的

34、效果,经常会把各种标签互相嵌套,造成了网页代码的臃肿杂乱。1、CSS特性通过CSS样式表,可以统一地控制HTML中各标签的显示属性。对页面布局、字休、颜色、背景和其他图文效果实现更加精确的控制。用户只修改一个CSS样式表文件就可以实现改变一批网页的外观和格式,保证在所有浏览器和平台之间的兼容性,拥有更少的编码,更少的页和更快的下载速度。具体说,CSS样式表具有如下特点。 将网页样式和内容分离,能够对页面的布局格式施加更多的控制,这样可以保持代码的简明,也就是把CSS代码独立起来,从另一个角度控制页面外观。样式和内容的分离简化了维护。 能以前所未有的能力控制页面的布局。HTML总体上的控制能力很

35、有限,如不能精确地设置高度、行间距和字间距,不能在屏幕上定位图像的位置。但是CSS样式表能够实现所有页面控制功能。 做出体积更小、下载更快的网页。CSS样式表只是简单的文本,就像HTML那样,它不需要图像,不需要执行程序,不需要插件,就像HTML指令那样快。可以减少表格标签、图像用量,从而减少文件尺寸 更快、更容易地维护及更新大量的网页。样式表的目的就是将格式和结构分离。将站点上所有的网页都指向单一的一个CSS文件,只要修改CSS样式表中的某一行,那么整个站点都随之发生变动。 浏览器成为更友好的界面。CSS样式表代码具有很好的兼容性。第二节 CSS语法和用法一、CSS基本结构CSS的语法单元是

36、样式,每个样式包含两部分内容:选择符和声明(规则)。多个样式可以并列在一起,不需要考虑如何进行分隔。样式表极大地提高了工作效率。样式表定义如何显示 HTML 元素,就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观。CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。元素 属性color:值red; 在head段使用标记,引用语法:二、CSS基本用法CSS代码一般可以放置在三个地方: 直接放在标签的style属性中,当浏览器解析这些标签时,检测

37、到该标签包含style属性,于是就调用CSS引擎来解析这些样式码,并把效果呈现出来。这种通过style属性直接样式放在标签内的方法叫做行内样式。 把样式代码放在标签内。设置时应指定type属性。这种方式称为内部样式。内部样式一般放在网页头部,主CSS源代码早于页面源代码下载并被解析,就可以避免当网页下载后由于没有CSS样式渲染而使页面信息无法正常显示。 把样式放置在单独的文件中,然后使用标签或import关键字导入。浏览器遇到就会自动根据它们提供的URL把外部样式表文件导入到页面中并进行解析。三、CSS样式表一个或多个CSS样式便组成了一个样式表。样式表包括内部样式和外部样式表。一个或多个CS

38、S样式表便组成了一个样式表。由于允许同时控制多重页面的样式和布局,CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者,你能够为每个 HTML 元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。嵌入式样式表:元素段必须出现在head段内,有一个开始和结束标记,并且可以有多个段。语法格式: 。在嵌入式样式表中我们可以使用import导入一个外部样式表,例:四、导入外部样式表使用标签导入:。空格引号都不对其中href属性设置外部样式表文件的地址,可以是相对地址,也可以是绝对地址;rel属性定义该标签关联的是样式表

39、标签,用于定义文档关联,这里表示关联样式表。;标点错误,检查是否还有其他类似type属性定义文档的类型,即为CSS文本文件。title属性与rel属性存在联系,按W3C组织的设想,未来的网页文档会使用多个元素导入不同的外部文件,如样式表文件、脚本文件、主题文件、甚至可以包括个人自定义的其他被充文件,导入这么多不同类型、名称各异的文件后,可以使用title属性进行选择,这时rel属性的作用就显示出来了,它可以指定网页文件初始显示时应用的导入文件类型,目前只能关联样式表文件。虽然目前浏览器的支持不是太好,不过建议加上rel。原因火狐没有这有这个属性就无效。一个样式规则由一个选择器后跟一个声明块组成

40、,声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略,声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束,每个声明内只能有一个属性,如果属性值中含有空格用双引号括起来例,在一个声明块内可以有多个声明,每个声明用分号隔开。第四章 JavaScript第一节 JavaScript简介简介一、了解JavaScriptJS是Web上一种功能强大的编程语言,用于开发交互式的Web页面。JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言

41、,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。JS也是一种简单、易学的脚本编程语言,可用于Web系统的客户端和服务器端编程。JS的前身叫做LiveScript,是Netscpae(网景)公司开发的脚本语言。在Sun推出Java后网景和sun于1995年一起重新设计了LiveScript,并改名为JavaScript。JS的标准是ECMA组织制订的ECMA-262规范,所以又称JS语言为ECMAScript语言它不仅可以直接应用于HTML文档迟钝获得交互效果或其他动态效果,而且可以运行于服务器商,从而替代传统的CGI程序。它最初由Netscape的

42、Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合,如服务器端编程。完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型,浏览器对象模型。二、在HTML文档中使用JavaScriptHTML文档是由HTML标签组成的描述性文本,HTML标签可以标识文本、图像、动画、声音、表格、链接等。在HTML文档中使用Js有两种方式,1种是在HTML文档中直接嵌入JS,2是链接外部JS脚本文件。JS的注释有两种方式单行注释符-/和多行注释符-/*/。

43、Netscape在最初将其脚本语言命名为LiveScript,后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的,目的之一就是“看上去像Java”,因此语法上有类似之处,一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似,是当时Netscape为了营销考虑与Sun微系统达成协议的结果。为了取得技术优势,微软推出了JScript来迎战JavaScript的脚本语言。为了互用性,Ecma国际(前身为欧洲计算机制造商协会)创建了ECMA-262标准(ECMAScript)。尽管JavaScript作为给非程序人员的脚本语言,而非作为给程序人员的脚本语言来推广和宣传,但是JavaScript具有非常丰富的特性。1、嵌入JavaScript脚本scrpt type=”text/javascript”type定脚本报MIME类型,包括主类型和子类型丙部分。如对于JS其MIME类型是text/javasc

展开阅读全文
相关资源
相关搜索

当前位置:首页 > 教育专区 > 教案示例

本站为文档C TO C交易模式,本站只提供存储空间、用户上传的文档直接被用户下载,本站只是中间服务平台,本站所有文档下载所得的收益归上传人(含作者)所有。本站仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私,请立即通知淘文阁网,我们立即给予删除!客服QQ:136780468 微信:18945177775 电话:18904686070

工信部备案号:黑ICP备15003705号© 2020-2023 www.taowenge.com 淘文阁