第2章_静态网页开发技术
前端开发中的静态网页生成和优化技术
前端开发中的静态网页生成和优化技术随着互联网的发展，网页的加载速度成为了用户体验的重要指标之一。
在前端开发中，静态网页生成和优化技术成为了提升网页性能的关键。
一、静态网页生成的意义静态网页生成是指在网页请求到达服务器时，将动态生成的内容事先保存成静态文件，并将其缓存在服务器上，再由服务器直接提供给用户。
相比动态生成网页，在静态网页生成的过程中，服务器没有多余的数据库查询等操作，可以显著减少服务器响应时间，提高网页加载速度。
静态网页生成的核心是将动态内容缓存成静态文件，以便下次请求时直接提供给用户，无需重新生成，从而减少对服务器资源的消耗。
这种技术适用于内容更新频率较低，但访问量较大的网站，例如新闻网站、企业官网等。
二、静态网页生成的实现方式静态网页生成的实现方式有多种，其中较为常见的是使用静态网页生成器和编译器。
1. 静态网页生成器静态网页生成器是一种工具，可以将动态内容转化为静态文件，并提供一些辅助功能，例如自动化部署、资源优化等。
目前比较流行的静态网页生成器有Jekyll、Hugo、Gatsby等。
这些工具通常基于模板语言和标记语言，开发者可以通过编写模板和写文章的方式，生成静态网页。
这样，每次更新内容时，只需要重新生成相关的静态文件，提高了网页更新的效率。
2. 编译器编译器是将一种源代码语言转化为另一种目标代码语言的工具。
在前端开发中，常见的使用编译器的方式是将高级语言（例如TypeScript、Less等）编译为浏览器可识别的低级语言（例如JavaScript、CSS）。
通过使用编译器，开发者可以更灵活地使用一些新的语言特性和语法糖，而无需担心浏览器的兼容性问题。
同时，编译器还可以对代码进行一些优化，从而提高网页的加载速度。
三、静态网页优化技术静态网页生成只是提升网页性能的一个环节，还需要进一步优化以达到更好的效果。
以下是一些静态网页优化的技术。
1. 图片压缩和懒加载图片通常是网页中占用带宽和加载时间最多的资源之一。
静态网页设计教学大纲
静态网页设计教学大纲课程概述1.课程性质《静态网页设计》课程是高职计算机应用技术、计算机网络、软件技术等相关计算机专业的一门专业必修课程。
2.课程设计理念本课程的设计体现“以能力为本位、以职业实践为主线、以项目课程为主体”，打破了传统的学科体系的模式，通过各项目的练习操作，熟练地掌握岗位所需知识和技能，并不断强化。
项目特别强调对学生操作能力和解决问题能力的培养，充分体现了职业教育“以就业为导向，以能力为本位”的职业教育理念。
3.课程开发思路本课程主要以当下典型的项目案例为主题，教材为参考，同时借鉴了一些企业网站，有利于学生的理解与学习。
颠覆传统讲授风格，主要通过项目实例让学生以师傅带徒弟的形式一步一步学习项目开发流程。
带着对一个项目雏形的不断完善，功能需求及其他功能的完善，进阶，使学生掌握一个网站项目的设计与制作相关经验。
经验从实践中来，因此学生实验课时约占到了总课时的三分之二。
让学生在职业实践活动的基础上掌握知识，增强课程内容与职业能力要求的相关性，提高学生的就业能力。
授课目标通过本课程的学习使学生具备网页制作、网站规划与网站维护的专业能力，培养学生的团队协作、沟通表达、工作责任心、职业规范和职业道德等综合素质和能力。
作为计算机相关专业的核心主干课程，使学生掌握商业网站的开发流程，并能独立进行操作。
学生毕业后可胜任网站管理员、网页设计师等工作岗位。
课程大纲第一章网页设计基础知识1.1：网站剖析1.2：网站开发流程1.3：Dreamweaver CS6的安装第二章生活网网站的创建2.1 初识Dreamweaver CS62.2 新建和管理站点2.3 为网页设置头信息和页面属性——页面总体设置前两章测验第三章生活网网站页面的布局3.1 使用表格布局页面3.2 使用AP Div布局页面3.3 使用框架布局网页第三章测验第四章输入和编辑网页元素4.1 添加文本类网页元素4.2 在网页中添加图像4.3 在网页中添加多媒体元素第四章单元测验第五章网站内容的链接与特效网页的制作——应用链接与行为5.1 设置网站中的超级链接5.2 利用行为制作网站中的特效网页5.3 制作页面中的弹出式菜单5.4 利用CSS美化页面第五章测验第六章利用模板和库创建页面6.1 利用模板创建页面6.2 利用库项目创建页面第六章测验第七章利用表单创建交互式页面7.1 利用表单创建酒店预订客户页面（一）7.2 利用表单创建酒店预订客户页面（二）7.3 利用表单创建酒店预订客户页面（三）第七章测验第八章项目综合实训分析项目实训概述8.1 个人网页设计分析8.2 文化类网页的设计分析8.3 旅游休闲类网页的设计分析第九章HTML5+CSS39.1 初始HTML9.2 HTML代码编辑工具9.3 网页基本信息9.4 基本HTML5标签第九章测验第十章HTML5高级标签10.1 列表10.2 表格10.3 表单第十章测验第十一章CSS3入门11.1 CSS3简介11.2 CSS3核心基础11.3 文本样式属性11.4 CSS3选择器11.5 CSS3盒子模型预备知识1、计算机应用基础（1）计算机的基本概念知识；（2）计算机基本操作能力；（3）Internet基础知识；2、PhotoShop基础应用（1）版面设计知识（2）配色相关知识（3）平面图像处理基本技能参考资料1、Dreamweaver CS6实例教程魏三强李静杨子燕主编人民邮电出版社出版2、网页设计与制作任务驱动式教程陈承欢主编高等教育出版社出版3、HTML5+CSS3网站设计基础教程传智播客高教产品研发部编著人民邮电出版社4、HTML5+CSS3前端技术北京课工场教育科技有限公司编著中国水利邮电出版社。
高职软件技术专业《静态网页设计》“书证融通”实践探索
高职软件技术专业《静态网页设计》“书证融通”实践探索作者：朱玉业宋玲玲来源：《电脑知识与技术》2021年第32期摘要：《静态网页设计》是软件技术专业的专业基础课，也是Web前端开发技能等级证书的核心内容;为培养既有“软技能”又有“硬技能”的复合型高技能人才，提高人才培养质量，针对1+X证书制度试点带来的教师、教材、教学方法以及教学评价等存在的不适应的问题，探索实施了适应“书证融通”的课程教学模式，采取重构课程结构体系，融入思政教学元素、重设教学内容，并从教学设计、教学实施和教学评价等方面进行了深入的讨论。
关键词：书证融通;1+X证书制度;软件技术;Web前端中图分类号：G642 文献标识码：A文章编号：1009-3044（2021）32-0266-032019年国家开始启动1+X证书制度试点工作，截至2019年底，共有16个证书5266个试点单位;其中，高职类试点3176个，共797所高职院校[1];经过近两年的试点推广，试点范围不断扩大，试点证书不断增加，由教育部门颁发的代表学历证书的1和由职业教育培训评价组织颁发的代表若干个技能等级证书的X两者无论在培养方案、培养模式、教学内容还是评价方式上都存在差异和不适应;探索适应学历证书和技能等级证书的教学模式成为必然课题。
1 高职软件技术专业《静态网页设计》“书证融通"的背景2019年教育部公布的高等职业学校软件技术专业教学标准中《静态网页设计》是计算机软件技术专业的专业基础课程;同时，《静态网页设计》Web前端开发技能等级证书（初级）的核心内容和证书（中级的主要内容）。
课程是教学活动的基本单元，是人才培养模式的核心点，课程改革是1+X证书制度顺利实施的保障[2]，探索“书证融通”的教学模式成为当下高职院校教师面临的挑战和亟待解决的课题。
2 引入技能等级证书面临的问题教学中的任何改变都会引起教学设计的改变。
设计经常是理想的而实施是现实的，必然存在差距，这些差距来可能来自教师、教材、教学环境等等因素[3];同样引入技能等级证书给教学带来了一系列现实问题。
web网页设计课程设计-个人博客
这个子网页采用的是YUI中的Paginator:Getting started with Paginator JS控件，可以在网页中插入文字图片，并有翻页效果。
每个人的兴趣爱好可以有很多，如果采用流式布局则会显得很冗杂，于是我采用了这个JS控件，让游客可以对每一个感兴趣的栏目进行浏览，不会产生疲劳。另外我将图片大小调节同意大小，并添加在每个框架中，这样可以使整个网页布局不会产生太大波动。
2.3系统总框图
2.4 设计网站
首部的LOGO，这个区域揭示了整个网站的主旨，所以这一部分的图片和内容必须设计得很精。然后是左下区域的座右铭，座右铭体现了个人的性格和修养以及价值观，这一部分布局必须清晰明了。最后是右下部分的其他，为了使网页看起来简洁明了，我在这一部分添加了一个单独的图片作为一个DIV。
E-R图
数据库表
数据字典：
Id：每个留言一个id，主键，非空
Title：每个留言一个title，可以为空
Tentent：每个留言一个内容，可以为空
Time：每个留言一个时间，可以为空
Ip：每个留言一个ip，一个ip可以对应多个留言
Huifu：每个留言对应一个管理员回复，可以为空
总结
在这次课程设计中，我再一次巩固了对HTML静态网页和ASP动态网页的设计制作方法，特别是对HTML网页已经较为熟练的掌握了。并且我对CSS样式文件和JS脚本文件的使用也有了更深的了解。
3.1.2个人简历
这个页面依旧使用了黄色的主色调，顶部是蓝色，与个人信息想呼应。主题是大海，个人简历就像鱼儿在海中的经历一样，这也和个人简历的风格想呼应。
左上角我添加了一个时钟空间，并添加了一个可以游动的鱼，点击之后可以快速返回主页，这条小鱼是使用JS代码和GIF动图完成的，和整个大海的风格比较融合。另外我在网页底部添加了固定的BOTTOM页脚，主要内容也是跟海有关，为的也是和主题融合。
网站开发与设计基础
第1章动态网页制作基础内容简介：随着计算机与网络技术的发展，人们对网页的要求已经不再停留在静态网页上了，网站的动态设计成了一种必然的趋势。
为了让读者对动态网站建设有个总体的认识。
本章对静态网页与动态网页进行了比较分析，并对网页构成元素以及网页制作工具Dreamweaver 8进行了详细介绍。
1.1 认识网页网页是构成网站的基本要素，是承载各种网站的应用平台。
简单地说，所有的网站都是由网页组成的。
目前，常见的网页有静态网页和动态网页两种。
本节就带领您认识网页世界。
1. 1. 1 静态网页静态网页是指网页内容是固定的，不会根据浏览者的不同需求而改变。
静态网页一般使用HTML语言进行编写，早期的网站一般都是由静态网页制作的。
静态网页文件通常以.htm、.html、.shtml、.xml等形式为后缀名。
在静态网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字母等，这些“动态效果”只是视觉上的，与下面将要介绍的动态网页是不同的概念。
1．主要特征(1) 静态网页每个网页都有一个固定的URL；(2) 常用于制作一些固定版式的页面；(3) 静态网页内容相对稳定，容易被搜索引擎检索；(4) 静态网页没有数据库的支持，在网站制作和维护方面工作量较大；(5) 静态网页交互性差，在功能方面有较大的限制；2．执行过程静态网页的工作模式为请求静态网页——事务逻辑（查找对应文件）——返回静态网页文件——客户浏览器执行显示。
其具体执行过程为：(1) 用户首在浏览器的地址栏中键入要访问的网页地址并回车触发这个请求。
(2) 浏览器将请求发送到指定的Web服务器上。
(3) Web服务器接收这些请求并根据.htm或.html的后缀名判断请求的是HTML文件。
(4) Web服务器从当前硬盘或内存中读取正确的HTML文件，然后将它送回用户浏览器。
静态网页执行过程如图1-1所示。
图1-1 静态网页执行过程1. 1. 2 动态网页动态网页是指在接到用户访问要求后动态生成的页面，页面内容会随着访问时间和访问者发生变化。
静态网页的制作PPT课件
1.4静态网页的制作工具
1、图像处理与动画制作工具：Photoshop、Flash 等。 2、网页编辑工具：1）纯文本编辑工具，如 Notepad等；2）转换工具，如word等；3）专用工 具，如FrontPage、Dreamweaver等。 3、网页上传工具：1)FTP工具，如WS-FTP， CuteFTP等；2)专用网页编辑软件的文件传输功能。 4、网页优化工具：网页减肥茶、网页优化大师等。
.
1.3静态网页的工作过程
静态网页制作概括起来，有如下几个部分： 1、网页素材搜集与制作（图像处理与动画制作） 经常需要在网页中应用一些图像与动画，一方面是由于 实际内容的需要，一方面是为了增加网页吸引力。在WWW 上通常采用jpeg、GIF格式的图片和flash等格式的动画。 2、网页版式设计 规划各元素在网页中的位置关系和表现方法，合理安排 图像、文本等元素，使网页布局合理、美观大方。 3、文本编写 自己的网页中需要大量的文字材料，这就要在网页编辑 器中用HTML语言中的标签编写。也可以利用网页编辑工具 的“所见即所得”功能，直接写入文字。 4、处理网页之间的关联 主要是建立合理、高效的网页导航系统。 5、网页发布 主要是将建设好的网页上传到服务器中供用户浏览。
.
2.2 HTML编写工具
用HTML编写的文件(文档)的扩展名是．HTML或.HTM。 它们是供浏览器解释浏览文件的格式。可以使用记事本、写 字板等编辑工具来编写HTML文件。HTML语言使用标志对 (标签)的方法来编写文件，既简单又方便。它通常使用<标志 名></标志名>来表示标志的开始和结束(例如 <HTML></HTML>标志对)，因此在HTML文档中这样的标志 对都必须是成对使用的。 在今天，做网页的工具到处都是,只要动几下鼠标，一个 精彩的网页就出来了，HTML是否要学呢？答案是肯定的， 因为工具就是工具，它们生成的代码是机械的，不够简洁， 使网页打开的速度减慢。还有很多新的功能，工具是生成不 了的。必需对代码进行编辑。
陈绪兵毕业设计(静态网页设计)
毕业设计题目静态网页设计学生姓名陈绪兵学号 2 0 9 0 2 0 8 1 2 1 5专业计算机网络技术班级 2 0 0 9 0 2 班指导教师孙俊完成日期2011 年11 月 15 日目录摘要 (1)关键词： (1)Abstract (1)第1章绪论 (2)1.1Internet的历史与发展 (2)1.2 网页的概述 (3)第2章开发软件简介 (3)2.1 Dreamweaver 简介 (3)2.2 Html语言简介 (4)2.3 Flash 简介 (5)2.4 Photoshop 简介 (6)2.5 本章小结 (7)第3章网络需求分析 (7)3.1 相关术语及解释 (8)3.2 个人网站的由来与发展 (8)3.3我的个人网页的设计与规划 (9)3.3.1 我的个人网页的概貌 (9)3.3.2 个人网页的设计理念 (10)3.4 网页小结 (14)第4章结论 (15)致谢 (16)参考文献 (17)静态网页的设计与制作学生：陈绪兵指导老师：孙俊（黄冈职业技术学院）摘要本文就网站的设计与制作，以软件工程的方法对全过程进行了分析与研究，本文的主要工作集中在：1.对web页进行概述，主要是对internet的历史和发展作了回顾，并对WEB页的定义和特性进行阐述，并对网站设计过程中使用的工具和技术简单的介绍.2.对网站建设中提及的术语进行简单解释，并对网站的由来和发展进行讨论。
3.对自己设计的网站从设计理念到制作的过程进行详细分析.4.使用Dreamweaver+Flash+photoshop 等软件的设计方式进行解析.5.就网站的设计与制作提出自己的观点以及建议。
关键词：网站设计工具设计方案创意风格Static web design and productionAbstractThis website design and production, with the method of software engineering to process the analysis and research, this paper main work concentrates in:1. The paper to web page is mainly to the Internet's history and development,and a review of the definition and characteristics of web pages is expounded, and the website design process using the tools and techniques of simple introduction.2. The website construction mentioned in terms of website, and simple explanation of the origin and development are discussed.3. For the design of your own website from design concept to making process were analyzed.4. Use Flash +Dreamweaver + photoshop software design methods are analyzed5. Just website design and facture put forward its own views and Suggestions第1章绪论随着21世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越来越重要，越来越多的职业需要具有计算机应用技能型人才。
静态网页设计与制作说课.ppt
中认真关注，随时解答疑问。
实践法
24
学生汇报计划与实施过程，回答同学与老师提出的问题。
重点检查流程的认知和网站团队运作，师生共同评价各
小组及个人的工作成果： 1.自评：学生对本项目的整个实施过程进行评价； 2.互评：以小组为单位，分别对其它小组的工作进 行评价；
提问引导法 实践法 讨论法
2
3.教师评价：教师对互评结果进行评价，指出每个
学习情境描述
“个人网站制作”学习情境表1-
1
学习情境1：个人网站制作
学时：38
项目目标
1．掌握个人网站制作的流程和方法、学习欣赏网站，制订个人网站制作策划方案； 2．熟悉Dreamweaver基本工具的使用； 3.分组制作一个个人网站； 4.培养学生团队精神、创新能力、自主探究学习能力、表达能力。
社会能力目标
沟通能力协作精神 勤于思考认真做事 勇于创新敬业乐业
自主学习能力 知识应用能力 良好的职业道德 较强的工作责任心
课程设计理念
以职业资格为依据
内容选取
教学组织
课程标准
以工作需求为目标 以工作过程为主线
以真实项目为载体
教学实施
表现形式
以实际工作为场景
课程设计思路
企业 调研
确定岗 位（群）
5%
5
项目制作报告
项目制作工作计划、总结和成果评价表书写认真、完整、字迹清 楚、页面整洁，项目制作收获较大
10%
合计
100%
敬请专家指导！ 谢谢！
教师知识与能 熟悉网站制作流程，网页制作Dreamweavera工具，网页素材制作方法，网页制作方
力要求
法与技巧；较强的归纳能力；较强的教学管理与教学组织能力。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（2）无序列表标记：<ul></ul>
格式： <ul type="类型样式"> <li>…….</li> <li>……</li> ………….. </ul>
其中： 属性TYPE指定列表项前的项目符号的样式，其取值为 disc：实心圆点（默认值）； circle：空心圆点； square：实心方块。
【例2-3】有序列表与无序列表应用示例，设 计图2-3所示的运行界面
<!-- 程序ch02_5.html--> <html> <head> <title>表格标记举例</title> </head> <body> <table width="70%" border="1" align="center"> <tr> <th colspan="3">期中成绩表</th></tr> <tr> <th>姓名</th><th>语文</th> <th>数学</th></tr> <tr> <td>张三</td><td colspan="2">100</td></tr> <tr> <td>李四</td><td>98</td><td>43</td></tr> <tr> <td>王晓彬</td><td rowspan="2">97</td> <td>78</td></tr> <tr> <td>成大才</td> <td>94</td> </tr> </table> </body> </html>
第2章 静态网页开发技术
2.1 2.2 2.3 2.4 HTML网页设计 CSS样式表 JavaScript脚本语言 基于HTML+JavaScript+CSS的开发案例
教学内容
学习并掌握静态网页的设计技术： 1、 HTML HTML的网页的基本结构、各种常用标签的使用 格式和使用方法，重点是个类标签的属性设置。 2、CSS 对网页的格式进行美化。 3、JavaScript 简单的脚本设计语言（类似于Java语言，但很 简单易学），主要完成各类事件的响应与处理。
• HTML是Hypertext Markup Language的缩写，中文也
就是超文本链接标示语言。 • HTML文本是由HTML命令组成的描述性文本，HTML命
令可以说明文字、图形、动画、声音、表格、链接
等。
引言2——静态网页开发相关技术基础知识
相关的一系列技术：HTML、JavaScript和CSS。
标签的使用格式
标签有单表和双标签。 单标签： 例如，换行标记：<br/> 双标签： 例如，标题标记： <h1 属性及其属性值>内容</h1>
2．标记的属性
基本语法： <标记名称 属性名1="属性值" 属性名2="属性值" ….. > 语法说明： 属性应写在首标记内，并且和标记名之间有一个空格分隔。 例如： 标记<hr>的作用是在网页中插入一条水平线，但是，要绘制 什么类型（线的粗细、颜色等）的直线呢？对直线的粗细、颜 色的限制，就需要标记的属性。 <hr size="5px" align="center" color="blue" width="80%"> 其中：align为属性，center为属性值（表示居中）；color为 颜色属性，其属性值为blue（蓝色）；size为字体大小属性， 其属性值为5px。
4．超链接标签
超链接是指从一个对象指向另一个对象的指针，它可 以是网页中的一段文字也可以是一张图片。实现从一个页 面到另一个页面的跳转。 格式： <a href="url" >超链接名称或图片</a> 其中： 属性href：指定链接的目标（另一个网页的路径）
5. 图片标记
格式： <img src="url" height="" width =""> 其中： 属性src：指定图像源的URL路径 alt：替代文本； height：图片的高度； width：图片的宽度。
字体标记：size属性，设置字体大小，取值从1到7；color 属性，设计字体颜色，使用名字常量或RGB的十六进制值， face属性，设计字体字型，例如“宋体”、“楷体”等
<p></p>
<hr/> <br/>
段落标记：属性align指定对齐方式。 水平分隔线标记：属性 width 设置线的长度（单位像素）， size 设置线的粗细（单位像素）， color 设置线的颜色， align设置对齐方式 插入一个回车换行符
主体： 在<body> 与</body> 之间部分 头部： 在<head>与</head> 之间部分
1．HTML标记
用HTML编写的超文本文档称为HTML文档（文件），是一 个放置了“标签”的文本文件，以“.html”或“.htm”为扩展名， 可供浏览器解释执行的网页文件。 网页文件是利用HTML所规定的标签定义网页中的各种元素 的性质和特点，从而完成网页所要求的功能。
【例2-2】图2-2给出了一首唐诗欣赏的页面，根据该页面， 设计HTML文档：ch02_2.html。请仔细分析所使用的标记及其 属性，以及它们的作用
3. 列表标签
列表标签分两类：有序标签和无序标签。
（1）有序列表标记：<ol></ol>
格式：<ol type="序号类型"> <li>…….</li> <li>……</li> ………….. </ol> 其中，属性type指定列表项前的项目编号的样式，其取值： “1”：编号为阿拉伯数字（默认值）； “a”：小写英文字母； “A”：大写英文字母； “i”：小写罗马数字； “I”：为大写罗马数字。
2.1.5 HTML框架标签与框架设计 2.1.6 框架设计案例——多媒体播放系统设计
2.1.1 HTML文档结构与基本语法
网页结构： 页面标题
地址栏输入文件路 径 页面显示的内容
设计完成该网页的代码：
<html> <head> <title>第一个 HTML 网页</title> </head> <body text="blue"> Hello, <b>world</b>! <hr size="5px" align="left" color="red" width="50%"> 你好！ </body> </html>
标记
<h#></h#>
<b></b> <i></i> <strong></strong> <font></font>
说明 标题标记， #=1,2,3,4,5,6 ，定义了 6 级标题，每级标题的 字体大小依次递减， 属 性 align 设 定对齐方式 ： center ：居中； left ： 左对齐 （默认）；right：右对齐 黑体标记 斜体标记 加重文本标记（通html --> <html> <head> <title>有序列表与无序列表</title> </head> <body> <b>班级新闻</b> <ul type="disc"> <li>最新课程表</li> <li>关于普通话考试的通知</li> <li>div+css高级应用学习</li> </ul> <hr width="100%" size="1" color="red"> <strong>报名</strong> <ol type="A"> <li>报名时间：3月16—21 日。</li> <li>报名地点：所在院系办公室。</li> <li>报名费用：按物价局规定85元/人/次（含培训费用），报名时 交齐。</li> </ol> </body> </html>
（2）表格属性（<table>属性）
属性 width height align border 用途 表格宽度 表格高度 表格水平对齐方式 表格边框厚度 属性 cellpadding cellspacing bgcolor background 用途 边距 间距 表格背景颜色 表格背景图像