第3章静态网页基本操作-精品文档
静态网页制作PPT课件
红色 #FF0000 绿色 #00FF00 黄色 #FFFF00
Pspad软件
演示pspad使用
本课内容结束
请准备9月25日上实验课 地点：综合楼C303、C302机房 上机名单贴在门上
实验内容：WEB服务器的安装
例子:
空格 左尖括号< < 等等
Q3-6 静态网页制作(HTML)
超链接(锚和href属性)
<a> (锚标签) <a href=“”>网易</a>
target属性 name属性 (给锚命名,在一个页面内部跳转) href=“url#锚名称” href=“mailto:aaa@” 电子邮件链接
Q3-5 什么是HTML文件
应该注意的细节
小写标签(尽管HTML不严格限制大小写),下一代 xhtml规定要严格限制使用小写标签
扩展名推荐使用.html 推荐使用纯文本编辑器来学习HTML(pspad) 推荐使用IE和firefox两种浏览器来调试网页,这样
可以获得更强的网页效果兼容性
SUCCESS
THANK YOU
2019/8/14
Q3-2 WWW如何工作?
Q3-2 WWW如何工作?
INTERNET 信息服务 WWW
想象一下我们是如 何接受互联网的服 务的？
软件 Browser
Q3-2 WWW如何工作?
超链接(Hyper Link)
Hyperlink
Q3-2 WWW如何工作?
关键词 keywords
网页(web page)*** Web 服务器(web server)*** Web 客户端(web client)*** 浏览器(Browser)**** 超链接(Hyper Link)****
静态网页制作教程入门级
JavaScr ipt 简 介
JavaScript是 一种脚本语言
JavaScript主 要用于增强网
页交互性
JavaScript可 以与HTML和 CSS结合使用
JavaScript可 以用于实现各 种动态效果和
交互功能
JavaScr ipt 基 本 语 法
添加标题
JavaScript概述
添加标题
HTML发展历程：从HTML 1.0到HTML5，经历了多个版本的发展和改进。
HTML基本结构：包括DOCTYPE声明、HTML元素、头部元素和主体元素等。
HTML常用标签：如标题标签、段落标签、链接标签、图像标签等。
HTML基 本 结 构
HTML文档的基本结构
HTML标签的分类与作用
HTML属性的定义与使用
发布网页到互联网上
注册域名 购买主机 上传网站文件 设置DNS解析
如何让搜索引擎找到你的网页
优化网页标 题和描述
优化网页内 容
优化网页 URL
提交网站到 搜索引擎
汇报人：
“写作前的准备”为标题的内容 • 写作前的准备 • 确定写作目标和主题 • 收集相关资料和素材 • 制定写作计划和提纲 • 准备好写作工具和环境
添 加 JavaScr ipt 代 码
JavaScript代码的 基本语法
在HTML文件中添 加JavaScript代码
JavaScript代码的 常用功能
互和动态更新
文件扩展名： 以.html、.htm、.shtml、 .xml等为扩展名
加载速度快：由于静态网页 不需要服务器处理，因此加
载速度相对较快
静态网页与动态网页的区别
定义：静态网页 是预先编写好的 HTML文件，而 动态网页则是根 据用户输入或系 统数据动态生成 的内容
静态网页大纲
《静态网页》课程教学大纲一、《静态网页》课程说明（一）开课对象：计算机大一（二）课程性质：本课程是计算机网络技术专业的一门职业技术课。
本课程的教学任务是讲授在网页设计中较为流行Dreamweaver。
主要讲解如何应用Dreamweaver创建和管理网站、网页制作基本知识，Dreamweaver网页制作集成工具使用方法等内容。
通过本课程的学习，使学生掌握构建网站的基本知识，熟悉网页开发平台的使用，能够独立的创建个人网站。
（三）教学目的通过本课程的学习，使学生掌握构建网站的基本知识，要求学生能够熟练使用Dreamweaver8的操作环境，掌握HTML的常用语法规则，并能够利用Dreamweaver的强大功能制作出精美的网页，同时能独立创建并管理网站（四）教学内容本课程主要包括基本html语句的语法，各种内容在网页中的插入，表格布局，css样式表，层的使用，站点的管理（五）教学时数教学时数：54学时学分数：3学分教学时数具体分配：（六）教学方式本课是在机房教学，教师以演示讲解为主，学生以模仿后举一反三配合任务驱动来学习。
（七）考核方式和成绩记载说明考核方式为考试。
严格考核学生出勤情况，达到学籍管理规定的旷课量取消考试资格。
综合成绩根据平时成绩和期末成绩评定，由于本课程比较注重学生平时的上机能力，故平时成绩占50% ，期末成绩占50% 。
二、讲授大纲与各章的基本要求第1章html入门教学目的与要求：掌握基本的html语言语法格式，几种最常用标记的插入和属性的设置教学内容和考核：1.1 html基本语法格式（熟练掌握）1.2 通过html语句控制表格，文字，图片一、文本控制（熟练掌握）二、创建和设置表格（熟练掌握）三、插入和设置图片（熟练掌握）四、综合使用教学重点和难点1、认识什么是网页。
2、掌握网页的基本结构。
3、掌握使用记事本结合html语句创建简单网页第2章Dreamweaver基础入门教学目的与要求：通过本章学习，学生应掌握Dreamweaver的启动与退出、文档的基本操作、站点的创建、站点的编辑以及站点的管理等基本知识。
静态网页基本操作共41页
41、实际上，我们想要的不是针对犯 罪的法 律，而 是针对 疯狂的 法律。 ——马 克·吐温 42、法律的力量应当跟随着公民，就 像影子 跟随着 身体一 样。— —贝卡 利亚 43、法律和制度必须跟上人类思想进 步。— —杰弗 逊 44、人类受制于法律，法律受制于情 理。— —托·富 勒
45、法律的制定是为了保证每一个人 自由发 挥自己 的才能 ，而不 是为了 束缚他 的才能 。—— 罗伯斯 庇尔
31、只有永远躺在泥坑里的人，才不会再掉进坑里。——黑格尔 32、希望的灯一旦熄灭，生活刹那间变成了一片黑暗。——普列姆昌德 33、希望是人生的乳母。——科策布 34、形成天才的决定因素应该是勤奋。——郭沫若 35、学到很多东西的诀窍，就是一下子不要学很多。
使用HTML语言开发静态网站必须掌握的
避免网页中的乱码
Page 4
第1章 HTML的基本标签
文本的相关标签
标题标签
<h1>一级标题</h1> …… <h6>六级标题</h6>
<font>标签（可以指定文本大小、字体类型和颜色）
默认为3号，最大为7号，最小为1号。 例：<font size=“+2” color=“red” face=“隶书”>
格式
<form name=“” method=“” action=“”> <input tupe=“” name=“” value=“” size=“” maxlength=“” checked> …… </form>
Page 15
第3章 表单和框架 input元素的属性 元素的属性
属性 type name value size maxlength checked
Page 19
第3章 表单和框架
设置窗口链接的显示位置
框架页面之间的链接 第一步：设计好框架集页面，并为每个框架窗口定义名称。 如：<frame src=“right.html” name=“rightframe”> 第二步：设置导航栏中的超链接的target目标窗口属性， 使其值为框架窗口的名字。 如：<a href=“right.html” target=“rightframe”> 4个特殊的窗口 target的取值有5个：_blank、_self、_parent、_top和框架窗口 _blank：新启一个窗口打开链接 _self：在同窗口中打开，默认取值（指没有设置target属性值时的情况） _parent ：在上一级窗口中打开（框架页面中较多使用） _top：在整个浏览器窗口中打开
《静态网页的制作》课件
结构、样式、行为层面
常见工具：Sublime Text、Visual
3
测试和发布
Studio Code、WebStorm等
测试网页在不同浏览器、设备下的效
果
将网页发布到服务器或云存储
制作常见问题及解决方案
跨浏览器兼容性
使用 CSS Reset 测试并处理不同浏览器的兼容问题
安全性问题
预防 XSS 攻击 使用 HTTPS 加密传输数据
结语
1 制作静态网页的重要性
静态网页是建立基础 Web 开发知识的重要一步
2 推荐的学习资源
MDN Web 文档、W3Schools、Codecademy 等
3 推荐的实践项目
个人博客、产品介绍页面、简历网站等
《静态网页的制作》PPT课件
# 静态网页的制作 ## 课程介绍 - 什么是静态网页？ - 为什么需要静态网页？ - 静态网页和动态网页的区别
制作流程
1
界面设计
选择合适颜色、字体、布局等
编写 HTML，CSS 和 JavaScript
2
使用工具：Adobe Photoshop、
代码
Sketch、Figma等
静态网页设计知识点
第一章概述 4学时教学目的：了解网页及网站基本概念及网页的基本要素分析教学重点与难点：网页、网站设计流程，网页基本要素第一节网页和网站一、网页二、网站三、网页的基本功能第二节网页中的主要元素一、文本二、图像三、链接标志四、其他的基本要素第三节网页制作工具一、网页编辑工具二、网页图像编辑工具三、动态网页技术第四节网页设计的基本流程一、网站的设计流程二、网页的设计与制作三、网页的测试四、网页上传和发布第二章 HTML语言基础 6学时教学目的：了解HTML文件的基本结构，掌握HTML中文本的编辑及图像的语法，掌握HTML中各种设置超级链接的语法，掌握HTML中表格和框架的基本语法。
教学重点与难点：HTML的语法结构、超级链接的语法、表格和框架的基本语法。
第一节 HTML概述一、HTML简介二、HTML语法结构第二节文本的编辑一、段落标记二、文本标记三、标题显示等级四、列表第三节图像编辑一、插入图像二、使用背景图像第四节建立超链接一、建立超链接二、使用书签三、标记新窗口和基准链接第五节表格与框架一、建立表格二、表格属性三、建立框架四、框架属性第三章 Dream weaver基础 2学时教学目的：了解DW的操作界面及常用命令，掌握规划和创建站点的操作，掌握基本的网页操。
教学重点与难点：规划站点的结构、网页的基本操作第一节 Dreamweaver工作界面一、启动和退出D r eamw eaver二、Dreamw eaver操作界面第二节规划与创建站点一、规划网站的整体结构二、建立本地站点三、管理本地站点第三节网页文件的基本操作一、新建网页二、保存网页三、关闭网页四、打开网页五、预览网页第四章网页中的基础元素 4学时教学目的：通过本章的学习可以掌握在网页中的文本和段落的设置方法，掌握图像的插入及其属性的设置的方法，熟悉页面属性的设置，熟悉各种超级链接及设置。
静态网页基础
什么是HTML？
HTML 是用来描述网页的一种语言。
∙HTML 指的是超文本标记语言(H yper T ext M arkup L anguage)
∙HTML 不是一种编程语言，而是一种标记语言(markup language) ∙标记语言是一套标记标签(markup tag)
∙HTML 使用标记标签来描述网页
∙<html> 与</html> 之间的文本描述网页
∙<body> 与</body> 之间的文本是可见的页面内容
∙<h1> 与</h1> 之间的文本被显示为标题
∙<p> 与</p> 之间的文本被显示为段落
HTML 段落
HTML 段落是通过<p> 标签进行定义的。
HTML 链接
HTML 链接是通过<a> 标签进行定义的。
HTML 图像
HTML 图像是通过<img> 标签进行定义的。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
使用文本
(2).粘贴其他文本 将光标定位到需要插入文本的位置 “编辑/粘贴”（ctrl+v）或者单击标准工具栏上的粘贴按钮 (3).导入Word或Excel文档 导入文档的方法： “文件/导入/word文档” “格式化”选项：是指将选中的Word文档以什么样的格式导入到当前文档里， 其下拉列表包括四个选项： 仅文本：插入无格式文本。若原始文本带格式，所有格式将被删除 带结构的文本：插入文本并保留结构，但不保留基本格式设置 结构：段落、列表、表格 基本格式：加粗、倾斜 带结构的文本及基本格式：插入结构化并带简单的HTML格式的文本。 带结构的文本及全部格式：插入文本并保留所有结构、HTML格式设置和CSS 样式
使用文本
3.设置文本属性
选中文本，打开属性面板，即可对选中的文本进行属性设置 具体设置如下： 格式：设置所选文本的段落样式 字体：文本应用所选字体组合 大小：设置字体的字号 文本颜色 ：设置所选文本的颜色。单击颜色框选择网页安全色，或在 相邻的文本域中输入十六进制数值 粗体 ：将文本加粗 斜体 ： 将文本倾斜 左对齐（ ）、居中对齐( ) 、右对齐（ ）、两端对齐（ ）：将 选 中的文本应用各自的对齐方式
静态网页基本操作
本章主要内容
学会设置页属性 熟悉插入网页基本元素 掌握设置文本、图像、链接的属性
了解插入文件头标签
学会使用媒体
设置页面属性
1.概述
打开“页面属性”对话框的方法： “修改/页面属性”（快捷键CTRL+J） 单击属性面板中的“页面属性”按钮 2.设置外观
设置页面属性
设置页面属性
6.设置跟踪图像
跟踪图像是指在网页设计时作为参考的图像。该图像只供参考，当文档在 浏览器中显示时并不出现。通过点击“浏览”按钮，可以选择相应的跟踪图 像；拖动滑块可以指定图像的透明度，透明度越高图像显示得越明显。
使用文本
1.概述
文本是网页设计最常用的的元素，文本的操作包括文本的插入和文本属性 的设置等。 注：一个中文字符占2个字节 2.插入文本 插入文本有三种方法： (1).直接在文档窗口中输入文本 Enter:分段换行 Shit+Enter:换行 Dreamweaver默认情况下不允许输入连续的空格，若需要输入多个空格， 可执行菜单命令“编辑/首选参数”，在打开的“首选参数”面板里将“允许 多个连 续的空格”选项选中即可，或者将输入法设置为全角状态。 注：在全角状态下输入的空格，浏览器的支持效果不好，有时会出现“？” 号
像”对话框中选择一个图像作为网页的背景图
注：这些值仅适用于Microsoft Internet Explorer ，而Netscape Navigator忽略 这些值，要确保在任何一个浏览器中都不出现边距，请将四个值都设置为“0”
设置页面属性
3.设置链接
设置页面属性
设置链接的参数如下：
“外观”具体设置如下：
页面字体：用于设置文字的字体，如宋体、黑体等 大小：用于设置网页中文本的字号 文本颜色：用于设置网页中文本的颜色
背景颜色：用于设置网页背景的颜色
背景图像：指网页可以用图片作背景，单击“浏览”按钮，在弹出的“选 择图 重复：指网页背景图以什么样的重复方式显示，如横向显示、纵向显示等 左边距、右边距、上边距、下边距：指定页面四周边距的大小
使用文本
Hale Waihona Puke 链接；创建所选文本的超文本链接
项目列表（ ）、编号列表（ ）：创建所选文本的项目列表和编号列
表。若未选择文本，则启动一个新的项目列表或编号列表
缩进（
）、凸出（
）：应用或删除blockqutote标签缩进或删除所选
文本的缩进。在列表中，创建一个嵌套列表，而删除缩进则取消嵌套列表。
使 用 图 像
设置页面属性
4.设置标题
设置与页面标题有关的属性，该对话框设置相对简单，只要求设置标题的字 体、字号和颜色。
设置页面属性
5.设置标题与编码
设置页面属性
具体参数设置如下： 标题：指定在“文档”窗口和浏览器窗口的标题栏中出现的内容 文档类型（DTD）：指定文档类型定义 编码：指定文档中字符所用的编码。文档编码在文档头的meta标签内指定 ，它告诉浏览器和Dreamweaver 应如何对文档进行解码以及使用哪些字体来 显示解码的文件 Unicode标准化表单：仅在选择UTF-8作为文档编码时启用。有四种 Unicode标准，最重要的是标准化表C，因为它是用于万维网的字符模型的最 常用表单 包括Unicode签名（BOM）：可在文档中包括字节顺序标记（BOM）。 BOM是位于文本文件开头的2~4个字节，可将文件标识为Unicode ,若是这样 ，还标识后面字节的字节顺序。由于UTF－8没有字节序，因此可以先择添加 UTF－8.
链接字体：设置页面的超链接文本的字体 大小：设置超链接文本的字号的大小 链接颜色；设置页面中超链接的颜色 交换图像链接：设置页面里变换图像后的超链接的颜色
已访问链接：设置页面中访问过的超链接的颜色
活动链接：设置网页里激活的超链接的颜色 下划线样式：用于设置超链接的下划线，如显示下划线或隐藏下划线