静态网页制作教程(入门级).
- 格式：ppt
- 大小：693.00 KB
- 文档页数：265
下载文档原格式
合集下载
6_静态网页制作
换行
对于需要换行的地方，应加上<Br>标记， 有了它浏览器会自动将右边的文字转移至 下一行。请注意， <Br>是单标记。 示例：没有换行效果 换行效果
段落标记
为了使文本排列的整齐和清晰，文字段落 之间常用<P>和 </P>来做标记。 </P>是可 以省略的，因为下一个<P>的开始就意味着 上一个<P>的结束。 <P>标记还有一个属性ALING，它用来指明 字符显示时的对齐方式，一般值有 CENTER、LEFT、RIGHT3种。 示例：段落标记效果
6.2.2 页面布局与文字标记
文本是网页传播信息的基本载体，在网页 中的重要地位可想而知。对于任何一个基 本网页来说，文本都是必不可少的，文本 的格式化也是非常重要的。
标题
HTML中提供了相应的标题标记<Hn>。HTML 总共提供6个等级的标题，n越小标题字号就越大。 字号大 <H1>„ </H1> 一级标题 <H2>„ </H2> 二级标题 <H3>„ </H3> 三级标题 <H4>„ </H4> 四级标题 <H5>„ </H5> 五级标题 字号小 <H6>„ </H6> 六级标题 示例:标题效果
1. 2. 3. 4.
5.
简单动态页面处理流程 浏览器发出对动态页面的请求； Web服务器找到该页面，传给应用服务器； 应用服务器扫描页面，执行代码，生成结果； 应用服务器把结果页面返回给Web服务器； Web服务器发回该结果页面给浏览器。
静态网页制作教程 第三章 表格
</table>
4.给单元格和表格元素定义数据
使用<td>标记来建立单元格，并往其中添加 数据，它的用法与<th>标记的用法十分相似。
<table> <caption>个人资料</caption> <tr><th>姓名<th>居住地<th>职业</tr> <tr><td>张三<td>北京<td>学生</tr> <tr><td>李四<td>上海<td>工程师</tr> <tr><td>王五<td>深圳<td>老师</tr> </table>
第三章 表格
表格在对web页上的信息格式和布局进行控制 的较好方法，它定义格式化信息有着强大的功 能，能够控制各种信息的位置，使得页面结构 协调一致。
一.创建一个简单表格 二.定义单元格的高度和宽度 三. 控制表格的边框及边框线 四.创建跨单元格的存储格
在网页中，表格的运用是非常重要的技巧。 在html中，表格的建立主要就运用<table>、 <tr>、<td>、<th>四种标记来显示完成的
4.<th></th>：用于定义表格的标题存储格， 此存储格中的文字将以粗体的方式显示。
在一个最基本的表格组件中，必须包含 一组<table>标记，一组<tr>标记与一组 <td>标记。语法如下：
<table>
4.给单元格和表格元素定义数据
使用<td>标记来建立单元格，并往其中添加 数据，它的用法与<th>标记的用法十分相似。
<table> <caption>个人资料</caption> <tr><th>姓名<th>居住地<th>职业</tr> <tr><td>张三<td>北京<td>学生</tr> <tr><td>李四<td>上海<td>工程师</tr> <tr><td>王五<td>深圳<td>老师</tr> </table>
第三章 表格
表格在对web页上的信息格式和布局进行控制 的较好方法，它定义格式化信息有着强大的功 能，能够控制各种信息的位置，使得页面结构 协调一致。
一.创建一个简单表格 二.定义单元格的高度和宽度 三. 控制表格的边框及边框线 四.创建跨单元格的存储格
在网页中，表格的运用是非常重要的技巧。 在html中，表格的建立主要就运用<table>、 <tr>、<td>、<th>四种标记来显示完成的
4.<th></th>：用于定义表格的标题存储格， 此存储格中的文字将以粗体的方式显示。
在一个最基本的表格组件中，必须包含 一组<table>标记，一组<tr>标记与一组 <td>标记。语法如下：
<table>
第3章静态页面制作ppt课件
表格宽度：表格的宽度可以选 择是占页面宽度的百分比〔单 位为百分比〕或者固定尺寸〔 单位为像素〕。
边框粗细：表格的边境宽度，单位为像素，表格的属性设 置中将详细讲解边框、填充值和间距值的区别。
单元格边距：单元格边框和单元格内容的间隔间隔。 单元格间距：单元格和单元格之间的间隔间隔。 页眉：把表格的第一行或第一列作为标题行或标题列。 作为标题行或标题列的行或列的内容将以粗体的方式显
静态页面设计
一、网页规划----表格 二、超链接 三、添加文本 四、插入图像 五、用框架规划页面
标题栏 插入栏 工具栏 文档窗口
标签选择器
菜单栏 面板组
“文件” 面板
属性检查器
一、网页规划
1、规划的本质
规划: 就是在页面上划分出不同的区域，按照设计的原那 么和方法，把不同的内容放置到不同的位置上，并经过颜 色调和出不同的网站基调，使网页内容构成一个有机的整 体，充分表达网站主题的过程。
规划的方法 :表格、层、框架 利用表格规划： 在插入面板中选择“常用〞标签，点击按
钮，弹出 “插入表格〞对话框，设置相应的参数来插入表 格。也可以经过选择“【插入】→【表格】〞菜单命令翻 开“插入表格〞对话框。
“插入表格〞对话框
行数：新插入的表格的行数， 可以更改数值来确定行数。
列数：新插入的表格的列数， 可以更改数值来确定列数，行 、列数控制表格划分的区域个 数〔行×列〕。
选择“存储时自动更新〞复选框，那么在日期格式插 入到文档中后可以对其进展编辑，假设没有选这项， 插入后变成纯文本，不好修正。假设希望在每次保管 文档时都更新插入的日期，那么选择“储存时自动更 新〞。
假设要更改日期，可以先用鼠标选中该对象，然后单 击“属性〞面板中的“编辑日期格式〞按钮，
边框粗细：表格的边境宽度，单位为像素，表格的属性设 置中将详细讲解边框、填充值和间距值的区别。
单元格边距：单元格边框和单元格内容的间隔间隔。 单元格间距：单元格和单元格之间的间隔间隔。 页眉：把表格的第一行或第一列作为标题行或标题列。 作为标题行或标题列的行或列的内容将以粗体的方式显
静态页面设计
一、网页规划----表格 二、超链接 三、添加文本 四、插入图像 五、用框架规划页面
标题栏 插入栏 工具栏 文档窗口
标签选择器
菜单栏 面板组
“文件” 面板
属性检查器
一、网页规划
1、规划的本质
规划: 就是在页面上划分出不同的区域，按照设计的原那 么和方法，把不同的内容放置到不同的位置上，并经过颜 色调和出不同的网站基调，使网页内容构成一个有机的整 体，充分表达网站主题的过程。
规划的方法 :表格、层、框架 利用表格规划： 在插入面板中选择“常用〞标签，点击按
钮，弹出 “插入表格〞对话框，设置相应的参数来插入表 格。也可以经过选择“【插入】→【表格】〞菜单命令翻 开“插入表格〞对话框。
“插入表格〞对话框
行数：新插入的表格的行数， 可以更改数值来确定行数。
列数：新插入的表格的列数， 可以更改数值来确定列数，行 、列数控制表格划分的区域个 数〔行×列〕。
选择“存储时自动更新〞复选框，那么在日期格式插 入到文档中后可以对其进展编辑，假设没有选这项， 插入后变成纯文本，不好修正。假设希望在每次保管 文档时都更新插入的日期，那么选择“储存时自动更 新〞。
假设要更改日期，可以先用鼠标选中该对象，然后单 击“属性〞面板中的“编辑日期格式〞按钮，
Dreamweaver静态网页制作过程
第三页，编辑于星期五：二十三点 五十四分。
Dreamweaver静态网页制作(续)
内部链接：在同一网站文档之间的链接 外部链接：在不同网站文档之间的链接 锚点链接：同一网页或不同网页的指定位置的链接； E-mail链接：翻开填写电子邮件表格的链接； 2）文档的路径（URL） 相对路径： 绝对路径：完整的URL （基于目录的路径）：从根目录出发 3）链接的方法 在属性面板中可以直接使用 可以选择被链接文档的载入位置 _blank：新的未命名的浏览器窗口中； _parent：父框架集或包含该链接的框架窗口中； _self：相同的窗口中（是无需指定的） _top：整个浏览器窗口并删除所有框架； 可以借助于样式表来实现
网站内容的组织 （1）选择力求专业化；（主要是面向谁的问题） （2）网页内容的变化性； （3）网站内容设计者的爱好； （4）网站栏目的安排
第十五页，编辑于星期五：二十三点 五十四分 。
Dreamweaver静态网页制作(续)
a.要紧扣主题； b.设立最近更新或网站指南栏目； c.设立可以双向交流的栏目，如论坛、BBS、邮件列表等 d.设立要下载或常见问题的栏目。（从而做到信息资源的共享） 名称要正、名称要易记、名称要有特色。
图像的路径和文件名称，单击“Browse〞（浏览）按钮，可以从磁盘上选择图像文件。 这里不仅可以输入本地图像文件的路径和文件名称，也可以用URL的形式输入其他位置 的图像名称。实际上，这里设置的是<body>标记的background属性。 c)Background（背景） 在这里可以为文档页面指定背景颜色。实际上设置的是<body>标 记的bgcolor属性。 d)Text（文本） 这里可以设置文档页面中文字的前景颜色，实际上设置的是<body>标记的 text属性。 e)Links（链接） 这里可以设置文档页面中尚未访问过的超级链接的文字颜色，实际上设置 的是<body>标记的link属性。 f)Visited Links（访问过的链接） 这里可以设置文档页面中已经访问过的超级链接的文字 颜色，实际上设置的是<body>标记的vlink属性。
Dreamweaver静态网页制作(续)
内部链接：在同一网站文档之间的链接 外部链接：在不同网站文档之间的链接 锚点链接：同一网页或不同网页的指定位置的链接； E-mail链接：翻开填写电子邮件表格的链接； 2）文档的路径（URL） 相对路径： 绝对路径：完整的URL （基于目录的路径）：从根目录出发 3）链接的方法 在属性面板中可以直接使用 可以选择被链接文档的载入位置 _blank：新的未命名的浏览器窗口中； _parent：父框架集或包含该链接的框架窗口中； _self：相同的窗口中（是无需指定的） _top：整个浏览器窗口并删除所有框架； 可以借助于样式表来实现
网站内容的组织 （1）选择力求专业化；（主要是面向谁的问题） （2）网页内容的变化性； （3）网站内容设计者的爱好； （4）网站栏目的安排
第十五页，编辑于星期五：二十三点 五十四分 。
Dreamweaver静态网页制作(续)
a.要紧扣主题； b.设立最近更新或网站指南栏目； c.设立可以双向交流的栏目，如论坛、BBS、邮件列表等 d.设立要下载或常见问题的栏目。（从而做到信息资源的共享） 名称要正、名称要易记、名称要有特色。
图像的路径和文件名称，单击“Browse〞（浏览）按钮，可以从磁盘上选择图像文件。 这里不仅可以输入本地图像文件的路径和文件名称，也可以用URL的形式输入其他位置 的图像名称。实际上，这里设置的是<body>标记的background属性。 c)Background（背景） 在这里可以为文档页面指定背景颜色。实际上设置的是<body>标 记的bgcolor属性。 d)Text（文本） 这里可以设置文档页面中文字的前景颜色，实际上设置的是<body>标记的 text属性。 e)Links（链接） 这里可以设置文档页面中尚未访问过的超级链接的文字颜色，实际上设置 的是<body>标记的link属性。 f)Visited Links（访问过的链接） 这里可以设置文档页面中已经访问过的超级链接的文字 颜色，实际上设置的是<body>标记的vlink属性。
《静态网页基本操作》课件
Sublime Text
通过安装插件可以支持CSS样式编辑。
JavaScript编辑器
1 2
Visual Studio Code
支持JavaScript的语法高亮、智能提示和调试功 能。
Eclipse
一款流行的Java集成开发环境，也支持 JavaScript开发。
3
WebStorm
一款专业的JavaScript开发工具，提供丰富的代 码提示和自动完成功能。
使用JavaScript实现动态效果
总结词
了解JavaScript基础
详细描述
介绍JavaScript的基本语法和用法，以及如何使用JavaScript在静态网页中实现动态效果，如轮播图、 表单验证等。
谢谢观看
静态网页与动态网页的区别
动态网页的内容会根据用户的 操作或输入实时生成，而静态 网页的内容是预先确定的。
动态网页通常需要后端编程和 数据库支持，而静态网页则不 需要。
动态网页可以根据用户的个性 化需求展示不同的内容，而静 态网页的内容对所有用户都是 相同的。
02
静态网页开发工具
HTML编辑器
记事本
04
CSS基础
CSS选择器
01
02
03
04
元素选择器
根据HTML元素选择要应用样 式的元素，例如p、h1等。
类选择器
通过在HTML元素的class属 性中指定类名来选择元素，例
如.myClass。
ID选择器
通过在HTML元素的id属性中 指定ID来选择元素，例如 #myID。
属性选择器
根据元素的属性来选择元素， 例如input[type="text"]选择 所有类型为文本的输入框。
通过安装插件可以支持CSS样式编辑。
JavaScript编辑器
1 2
Visual Studio Code
支持JavaScript的语法高亮、智能提示和调试功 能。
Eclipse
一款流行的Java集成开发环境，也支持 JavaScript开发。
3
WebStorm
一款专业的JavaScript开发工具，提供丰富的代 码提示和自动完成功能。
使用JavaScript实现动态效果
总结词
了解JavaScript基础
详细描述
介绍JavaScript的基本语法和用法，以及如何使用JavaScript在静态网页中实现动态效果，如轮播图、 表单验证等。
谢谢观看
静态网页与动态网页的区别
动态网页的内容会根据用户的 操作或输入实时生成，而静态 网页的内容是预先确定的。
动态网页通常需要后端编程和 数据库支持，而静态网页则不 需要。
动态网页可以根据用户的个性 化需求展示不同的内容，而静 态网页的内容对所有用户都是 相同的。
02
静态网页开发工具
HTML编辑器
记事本
04
CSS基础
CSS选择器
01
02
03
04
元素选择器
根据HTML元素选择要应用样 式的元素，例如p、h1等。
类选择器
通过在HTML元素的class属 性中指定类名来选择元素，例
如.myClass。
ID选择器
通过在HTML元素的id属性中 指定ID来选择元素，例如 #myID。
属性选择器
根据元素的属性来选择元素， 例如input[type="text"]选择 所有类型为文本的输入框。
HTML课程设计_简单静态网站制作
综合实验简单静态网站制作姓名：学号：班级：计算机科学与技术*班日期：【实验目的】综合掌握HTML5+CSS设计静态网站的方法。
【实验环境与设备】计算机实验室要求：机器上安装有浏览器和记事本等。
【实验要求】1、完成学期初每个人自己设计的网站，网站至少由5个页面构成，除主页外，至少要包含四个主栏目，每个页面必须图文并茂，能较好地表达主题，切忌采用过多的文字、过多的图像或者过多flash，不允许添加视频和音频。
作品应体现Web的特点，网站结构完整，链接正确、导航有效。
2、网站主题可从如下几个选择：中国传统文化、互联网时代、畅想未来。
3、对于HTML，文档的语义应正确、清晰可读，符合行文规范。
4、对于页面上各个元素，使用CSS进行外观设计，根据主题选取适当的字体大小、颜色和元素背景等。
5、要求使用外部CSS文件。
6、布局方面，使用DIV+CSS布局。
7、对于设计完成的网页样式，要求具有较高的灵活性、可维护性和可重用性，既要确保整个网站外观风格上的统一，每个页面之间也要存在一定的差异。
注意：●内容和网页形式自定，不允许抄袭，一经发现0分处理。
●不允许提交未在网页中使用的图像、flash、声音和图像文件。
●每个学生以学号加姓名命名站点名称。
●完成并提交该实验报告【报告内容】1网站设计结构2网页代码①第1个页面<!doctype html><html><head><meta http-equiv="Content-Type"charset="utf-8"/> <title>中国传统文化</title><link href="style.css"rel="stylesheet"type="text/css"/> </head><body><div id="container"><div id="top"><img src="images/banner.png"/></div><div id="navi"><span><a href="index.html">首页</a></span><span><a href="朝代.html">朝代</a></span><span><a href="民族.html">民族</a></span><span><a href="地域.html">地域</a></span><span><a href="文化.html">文化</a></span> <span><a href="杂家.html">杂家</a></span> <span><input type="text" name="title" value="" />搜索</span></div><div id="main"><div id="left"><ul><li><h3>朝代></h3></li><li>三皇五帝夏朝商朝西周东周</li><li><h3>民族></h3></li><li>汉族壮族满族回族苗族</li><li><h3>地域></h3></li><li>东北地区华北地区华东地区</li><li><h3>文化></h3></li><li>儒家道家释家诸子百家</li></ul></div><div id="center"><img src="images/1400401422.jpg"/></div><div id="right"><ul><li>中国第46个遗产项目...</li><li>浅析粽子飘香的端午节...</li><li>世界第三大无人区</li><li>“鸟的王国”—青海湖鸟岛...</li><li>“陇上林泉之冠”—麦积山...</li><li>嘉峪关文物景区：传承...</li><li>中国第八处世界自然遗产</li><li>景德镇古窑民俗博览区...</li><li>江南三大名湖之西湖</li><li>世界上岛屿最多的湖</li></ul></div></div><div id="main1"><img style="float:left;"src="images/ctbackg.gif"/><img style="float:left;width:516px;"src="images/index.jpg"/><div id="box1"><img style="float:left;width:250px;height:180px;margin-left: 8px;"src="images/1408004447_thumb.jpg"/><p>若要说中国历史，夏朝是不能不说、也是无论如何不可逾越的峦峰。
DreamweaverCC网页设计与制作标准教程快速入门
第1章Dreamweaver CC快速入门Dreamweaver已经成为业界最流行的静态网页制作与网站开发工具，其不仅支持“所见即所得”的设计方式，同时还辅以强大的程序开发功能，可以帮助不同层次的用户快速设计网页。
本章帮助用户快速了解Dreamweaver CC版本的新增功能，以及Dreamweaver的工作环境和网站建设等相关内容。
本章学习要点：了解网站与网页网站的设计及制作网页的概念了解Dreamweaver CCDreamweaver工作区了解文档视图了解【编码】工具栏创建网页文档网页的构成1.1 了解网站与网页翱翔在Internet中，会经常听到网站、网页等一些非常陌生的概念。
而这些概念在网页制作过程中，也是需要用户理解的。
1.1.1 认识网页网页（Web Page）是一个文件，它存放在世界某个角落的某一部计算机中，而这部计算机必须是与互联网相连的。
网页经由网址（URL）来识别与存取，是万维网中的一个“页”面，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。
网页要通过网页浏览器来阅读，如图1-1所示。
图1-1 网页页面文字与图片是构成一个网页的两个最基本的元素。
可以简单地理解为：文字，就是网页的内容，图片就是网页的美观。
除此之外，网页的元素还包括其他内容，常见的网页元素如下。
“文本文本是网页上最重要的信息载体与交流工具，网页中的主要信息一般都以文本形式为主。
“图像图像元素在网页中具有提供信息并展示直观形象的作用。
其中，静态图像在页面中可能是光栅图形或矢量图形，如JPEG或PNG。
而矢量格式通常包含有GIF和SVG动画。
“Flash动画动画在网页中的作用是有效地吸引访问者更多的注意。
“声音声音是多媒体和视频网页重要的组成部分。
“视频视频文件的采用使网页效果更加精彩且富有动感。
“ 表格 表格是在网页中用来控制页面信息的布局方式。
“ 导航栏 导航栏在网页中是一组超链接，其链接的目的端是网页中重要的页面。
静态网页制作方法
静态网页制作方法静态网页制作指的是基于HTML、CSS和JavaScript等前端技术手段创作的网页，它不依赖于后台服务器的数据交互和动态效果。
静态网页制作方法主要包括页面规划、HTML结构设计、CSS样式设计和JavaScript交互设计等方面。
首先，静态网页的制作需要进行页面规划。
在规划阶段，我们需要确定网页的整体结构、布局和导航等内容。
一般可以通过手绘草图或使用设计工具进行页面的原型设计，明确网页的整体风格和内容分布。
接下来，我们需要进行HTML结构设计。
HTML作为网页的骨架，负责搭建网页的结构框架。
我们可以使用文本编辑器如Notepad++或专业的开发工具如WebStorm来编写HTML代码。
在编写HTML代码时，我们需要理解HTML 标签的语义和结构，合理使用各种标签来组织网页的内容。
可以通过创建div、p、h1等标签来分别表示页面中的不同段落、标题等内容，然后使用嵌套和属性等方式来搭建出网页的整体结构。
在完成HTML结构设计后，下一步是进行CSS样式设计。
CSS负责网页的样式布局和外观设计。
通过为HTML元素添加样式属性，我们可以设置字体、颜色、背景、边框等外观效果，从而优化页面的视觉效果和用户体验。
我们可以在HTML 文件中嵌入CSS代码，也可以将CSS代码保存到独立的样式表文件中，然后通过<link>标签链接到HTML文件中。
在使用CSS时，我们需要考虑浏览器兼容性和响应式布局等因素，可以使用CSS预处理语言如Sass或Less等来简化和优化样式的编写。
最后，我们还可以添加JavaScript交互设计来增加网页的动态效果。
通过JavaScript代码，我们可以对网页中的元素进行操作、响应用户的交互行为，并实现一些动态效果如轮播图、表单验证等。
JavaScript可以直接嵌入到HTML 文件中，也可以单独保存到.js文件中，然后通过<script>标签引入到HTML文件中。
静态网页的制作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是否要学呢？答案是肯定的， 因为工具就是工具，它们生成的代码是机械的，不够简洁， 使网页打开的速度减慢。还有很多新的功能，工具是生成不 了的。必需对代码进行编辑。
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.1 创建站点在编辑网页之前，首先要定义一个站点，以下是高级模式的定义过程：[1] 启动Dreamweaver CS3软件，执行【站点】→【新建站点】菜单命令。
[2] 在【站点定义为】的对话框中选择“高级”选项卡，点击新建两个文件夹baby （根文件夹）和images（图像文件夹），如下图所示，设置“本地信息”的各个参数。
本例的主目录为baby，在信息服务默认站点EC中，“HTTP地址”为http://localhost/，其他默认，完成后点“确定”。
因为是静态网页，可以不设测试服务器。
[3] 将素材文件复制到baby文件夹下（含images文件夹和news.html文件）。
2.2 制作网页模板为便于理解，我们将网页模板的制作分为4小节，下面来看具体操作。
1．新建模板文档(1)选择【文件】→【新建】菜单，打开【新建文档】对话框。
单击“空模板”，在“模板类型”列表中选择“HTML模板”，默认“布局”为 <无>，最后单击“创建”按钮，如图2-1所示。
图2-1(2)按【Ctrl+S】组合键保存文档，弹出图2-2所示提示框，勾选“不再警告我”复选框，之后单击“确定”按钮。
图2-2(3)在打开的【另存模板】对话框中，从“站点”下拉列表中选择“宝贝爱”，在“另存为”文本框中输入模板文件名“ml”，最后单击“保存”按钮，如图2-3所示。
图2-3(4)按【Ctrl+J】组合键，打开【页面属性】对话框。
单击左侧“分类”列表中的“标题／编码”，设置标题为“宝贝爱网站”，其余默认，如图2-4所示。
图2-4(5)再次按【Ctrl+S】组合键保存文件（*养成习惯）。
2．设置模板内容(1) 单击【插入】面板【常用】栏中的“表格”按钮，在页面中插入一个1行2列，宽1000像素，边框粗细、单元格边距和间距均为0的表格，如图2-5所示。
图2-5在该表格【属性】面板中，设置“表格ID”为“1”（定义为表格1，参见图2-6底部提示标签<table#1>），“对齐”方式为“居中对齐”，如下图所示：(2)在表格1（table#1）的左右两个单元格中（用Ctrl+鼠标来选择定位，此方式以后会常用到）分别插入图片“in01.gif”和“index_02.gif”，如图2-6所示。
静态网页设计与制作说课.ppt
中认真关注，随时解答疑问。
实践法
24
学生汇报计划与实施过程，回答同学与老师提出的问题。
重点检查流程的认知和网站团队运作，师生共同评价各
小组及个人的工作成果： 1.自评：学生对本项目的整个实施过程进行评价； 2.互评：以小组为单位，分别对其它小组的工作进 行评价；
提问引导法 实践法 讨论法
2
3.教师评价：教师对互评结果进行评价，指出每个
学习情境描述
“个人网站制作”学习情境表1-
1
学习情境1：个人网站制作
学时：38
项目目标
1．掌握个人网站制作的流程和方法、学习欣赏网站，制订个人网站制作策划方案； 2．熟悉Dreamweaver基本工具的使用； 3.分组制作一个个人网站； 4.培养学生团队精神、创新能力、自主探究学习能力、表达能力。
社会能力目标
沟通能力协作精神 勤于思考认真做事 勇于创新敬业乐业
自主学习能力 知识应用能力 良好的职业道德 较强的工作责任心
课程设计理念
以职业资格为依据
内容选取
教学组织
课程标准
以工作需求为目标 以工作过程为主线
以真实项目为载体
教学实施
表现形式
以实际工作为场景
课程设计思路
企业 调研
确定岗 位（群）
5%
5
项目制作报告
项目制作工作计划、总结和成果评价表书写认真、完整、字迹清 楚、页面整洁，项目制作收获较大
10%
合计
100%
敬请专家指导！ 谢谢！
教师知识与能 熟悉网站制作流程，网页制作Dreamweavera工具，网页素材制作方法，网页制作方
力要求
法与技巧；较强的归纳能力；较强的教学管理与教学组织能力。
留言板静态网页制作
静态网页制作一、实验目的1、实现静态网页的制作2、实现3个静态网页的制作二、实验环境Windows XP系统下的MyEclipse7 jdk1.6三、实验内容1、实现留言板查看留言页面的制作<!DOCTYPE html><html><head><title>Message Borad</title><style>#header {height:50px;padding:0px 50px 120px 50px;background-image:url("images/01.jpg");background-repeat:no-repeat;background-position:center ;}#centerleft {background-color:white;height:618px;width:600px;float:left;text-align:left;padding:0px 5px 15px 200px;}#centerright {background-color:#F5F5F5;width:400px;height:618px;text-align:left;float:left;padding:10px;}#footer {height:565px;padding:50px;background-image:url("images/02.jpg");background-position:bottom;background-repeat:no-repeat;}</style></head><body><div id="header"><span style="position:absolute;top:0px;right:200px">用户名:<input type="text">密码:<input type="text"><input type="submit"value="登录"style="color:white;background-color:darkorange;"></span><span style="position:absolute;top:150px;left:200px"><input type="button"value="查看留言"style="background-color:black;color:white;"onclick="javascrtpt:window.location.href='Messageboard.html'"> <input type="button"value="发布留言"style="background-color:black;color:white;"onclick="javascrtpt:window.location.href='Messageboard2.html'"> <input type="button"value="修改留言"style="background-color:black;color:white;"onclick="javascrtpt:window.location.href='Messageboard3.html'"></span> </div><div id="centerleft"><img src="images/06.jpg"><p style="background-color:#eeeeee"><img src="images/07.jpg">小区噪音严重影响市民健康<span style="float:right;">2019.10.1</span></p><img src="images/07.jpg">出国需要办理什么手续？（已解决）<span style="float:right;">2019.10.2</span><p style="background-color:#eeeeee"><img src="images/07.jpg">谁能介绍石家庄海天考研暑期强化班（已解决）<span style="float:right;">2019.10.3</span></p><img src="images/07.jpg">出国需要办理什么手续？（已解决）<span style="float:right;">2019.10.4</span><p style="background-color:#eeeeee"><img src="images/07.jpg">小区噪音严重影响市民健康<span style="float:right;">2019.10.5</span></p><img src="images/07.jpg">出国需要办理什么手续？（已解决）<span style="float:right;">2019.10.2</span><p style="background-color:#eeeeee"><img src="images/07.jpg">谁能介绍石家庄海天考研暑期强化班（已解决）<span style="float:right;">2019.10.3</span></p><img src="images/07.jpg">出国需要办理什么手续？（已解决）<span style="float:right;">2019.10.4</span><p style="background-color:#eeeeee"><img src="images/07.jpg">小区噪音严重影响市民健康<span style="float:right;">2019.10.5</span></p><img src="images/07.jpg">出国需要办理什么手续？（已解决）<span style="float:right;">2019.10.2</span><p style="background-color:#eeeeee"><img src="images/07.jpg">谁能介绍石家庄海天考研暑期强化班（已解决）<span style="float:right;">2019.10.3</span></p><img src="images/07.jpg">出国需要办理什么手续？（已解决）<span style="float:right;">2019.10.4</span><p style="background-color:#eeeeee"><img src="images/07.jpg">小区噪音严重影响市民健康<span style="float:right;">2019.10.5</span></p><span style="position:absolute;bottom:50px;left:600px"> <input type="button"value="上一页"style="background-color:black;color:white;"><input type="button"value="下一页"style="background-color:black;color:white;"><input type="button"value="首页"style="background-color:black;color:white;"></span></div><div id="centerright"><p><img src="images/03.jpg"></p><p><strong>主题：</strong> 小区噪音严重影响市民健康</p><p><strong>作者：</strong> 小小</p><p><strong>日期：</strong> 2013-3-04</p><p><strong>内容：</strong> 小区噪音严重影响市民健康。
静态网页制作教程 第五章 超级链接
第五章 超级链接
只需少量的标记就可以格式化文本文件并使其 在world wide web上高效地显示出来，它使 html和www成为在internet上发表文档的好方 法。但这仅仅是利用了world wide web的极少 量的能力。文档阅读者可以设想只需通过简简 单单的键盘敲击和鼠标摁动，就可移至该文档 的其他位置上、本台计算机的其他文档上，或 者是全世界的internet资源上。 www提供了一种工具来完全地实现上述功能。 它就是超级链接。
5.创建一个指向页面特定部分的链接
通过上面的学习，我们能够创建从一个页面到另 外一个页面的链接，但有时候你只需从一个页面 到另一个页面的一个指定位置之间的链接，例如 链接到第二个页面的第四部分，这应该怎么达到 呢？ 方法就是在第二个页面的html文档中建立一个锚。 所谓锚，就是链接到文档内部的指定位置。在第 一个页面建立的链接将包含链接的文件名和锚的 名字。然后，当浏览器按这个链接查找时，就把 第二个页面装入，然后向下滚动到锚的指定位置。
1.url介绍 2.创建链接 3.创建一个简单的链接 4.创建一个指向页面特定部分的链接 5.在表格和列表中使用链接
1.URL介绍
url（uniform resource locator，全球资源定位器）， 是world wide web浏览器用来定位在internet上文件的 工具，为使用各种协议访问信息提供了一个简单连贯 的方法。一个url包括3部分：一个协议代码、一个装 有所需文件的计算机地址（或一个电子邮件地址或是 新闻组名称），以及包含所需信息的文件地址和文件 名。如： /main.html 当浏览器遇到一个url时，它首先检查其协议以决定 程序获取信息必须使用的方法。之后浏览器取得计算 机的地址，然后访问站点，并使用url中的路径信息 找到文件并将它的一个拷贝返回到浏览器所在的计算 机上。
只需少量的标记就可以格式化文本文件并使其 在world wide web上高效地显示出来，它使 html和www成为在internet上发表文档的好方 法。但这仅仅是利用了world wide web的极少 量的能力。文档阅读者可以设想只需通过简简 单单的键盘敲击和鼠标摁动，就可移至该文档 的其他位置上、本台计算机的其他文档上，或 者是全世界的internet资源上。 www提供了一种工具来完全地实现上述功能。 它就是超级链接。
5.创建一个指向页面特定部分的链接
通过上面的学习，我们能够创建从一个页面到另 外一个页面的链接，但有时候你只需从一个页面 到另一个页面的一个指定位置之间的链接，例如 链接到第二个页面的第四部分，这应该怎么达到 呢？ 方法就是在第二个页面的html文档中建立一个锚。 所谓锚，就是链接到文档内部的指定位置。在第 一个页面建立的链接将包含链接的文件名和锚的 名字。然后，当浏览器按这个链接查找时，就把 第二个页面装入，然后向下滚动到锚的指定位置。
1.url介绍 2.创建链接 3.创建一个简单的链接 4.创建一个指向页面特定部分的链接 5.在表格和列表中使用链接
1.URL介绍
url（uniform resource locator，全球资源定位器）， 是world wide web浏览器用来定位在internet上文件的 工具，为使用各种协议访问信息提供了一个简单连贯 的方法。一个url包括3部分：一个协议代码、一个装 有所需文件的计算机地址（或一个电子邮件地址或是 新闻组名称），以及包含所需信息的文件地址和文件 名。如： /main.html 当浏览器遇到一个url时，它首先检查其协议以决定 程序获取信息必须使用的方法。之后浏览器取得计算 机的地址，然后访问站点，并使用url中的路径信息 找到文件并将它的一个拷贝返回到浏览器所在的计算 机上。
静态HTML网页制作
第五章静态HTML网页制作5.1 HTML文件编辑环境介绍5.1.1常用名词在学习网页制作之前，我们有必要先了解一些常用的概念。
（1）WWW万维网“万维网”（Word Wide Web）简称WWW，这是号称除了报纸、广播、电视外的第四大传播媒体。
（2）Browser浏览器要观看万维网上的内容，一个必要条件是要有一个万维网浏览器。
目前常用的浏览器是微软（Microsoft）公司的Internet Explorer（简称IE），网景公司（Netscape）的Communicator （通讯家），还有Opera等。
（3）WebPage网页当你浏览一个网站时，网站中的每一页都称为一个“网页”。
网页是用来显示各种数据与信息的，它由文字、图片、声音、动画等组件组成。
每个网页都是一个文件，我们通过浏览器可以查看其内容。
（4）HomePage主页当你上网浏览某个网站时，我们进入网站最先看到的网页称为“主页”，也叫作“首页”，这有点像自己家的门面一样。
一般的网站管理者为了吸引上站者的眼球，都将主页做得很炫、很漂亮。
（5）Web Site网站“网站”就是用来存放网页文件的地方，通过浏览器便可以浏览网站上面的网页。
（6）Hypertext超文本“超文本”文件本身是一个文本文件，但其内容和一般文本文件又不一样，除了有一般信息内容之外，还有一些加注性描述用来产生特殊效果，在显示文件时，浏览器先根据加注性描述对信息内容进行处理，最后才把结果展示给浏览者。
这种文件当然也可以用一般的文字编辑软件打开，但却看不到加注性描述所产生的特殊效果，因为一般的文字编辑软件不能像浏览器那样根据加注性描述对信息内容进行处理。
（7）Hyperlink超级链接万维网能风行全球当然有其原因：美丽而动态的画面，方便而简易的使用界面，精彩而富于变化的内容，这些都是它的引人之处；但除了这些之外，它还有一个成功的利器，即它的无限的超级链接能力。
譬如它具有网站内部网页间彼此连接的能力，我们称为“内部超级链接”，还可以连接到其他网站，我们称之为“外部超级链接”。
《静态网页的制作》课件
表单验证的实现
验证用户输入
使用JavaScript可以验证用户 在表单中输入的数据，确保数 据的正确性和有效性。
防止恶意输入
通过JavaScript的验证，可以 防止恶意用户输入对网站造成 安全威胁的内容，如SQL注入 、跨站脚本攻击等。
提高用户体验
通过实时验证，用户可以立即 知道输入的数据是否符合要求 ，提高用户体验。
动态内容的生成
数据动态展示
使用JavaScript可以动态展示数据，如动态表格、图 表等。
动态内容更新
通过JavaScript可以动态更新网页内容，根据用户的 操作或时间等条件进行内容的变化。
个性化内容推荐
使用JavaScript可以根据用户的喜好和行为，推荐个 性化的内容和产品。
06
静态网页的优化与发布
总结词：详细描述
动画：CSS提供了关键帧动画，可以创建复杂的动画 效果。通过改变元素的属性值，可以实现元素的移动
、旋转、缩放等动画效果。
过渡：CSS的过渡属性可以实现元素属性值的变化效 果，如颜色、大小等。通过过渡效果，可以创建平滑
的视觉效果，提高用户体验。
05
JavaScript在静态网页中的应用
80%
特点
可以实现响应用户操作、动态更 新内容等功能，提升用户体验。
图像处理软件
作用
用于处理和优化网页中使用的图片。
常用软件
Photoshop、GIMP等。
特点
可以进行图片裁剪、调整色彩、添加滤镜等操作 ，提高图片质量。
03
静态网页的基本构成
HTML文档结构
HTML文档的基本元素
HTML文档由`<!DOCTYPE html>`、`<html>`、`<head>`和`<body>`等元素组成， 每个元素都有其特定的作用。
HTML静态网页的制作 -
2.1 常用的网页制作工具 2.2 制作第一个简单网页 2.3 超文本和超图像链接
2.4 网页制作中的Flash动画
2.5 利用表格和框架制作网页 2.6 HTML与XML标识语言
2.1 常用的网页制作工具 Dreamweaver
Dreamweaver是一套专业化的网页创作工具，它采用“所 见即所得”的可视化编辑方式，能够快速高效地创建各种具 有专业水平的网页，不需要编写任何代码。如果需要在代码 界面进行工作，只需进入HTML代码窗口或源代码检视器中 ，就能同步看到Dreamweaver生成的源代码。它支持最新的 DHTML、CSS标准及分层技术，具有极好的兼容性，适用于 各种平台和各种浏览器。
(3) 站点管理器：
站点管理器主要用于管理站点内的文件和目录，可对
站点内的文件进行改名、编辑和删除等基本操作，并可检验
对象的链接情况，自动修改其他页面指向这个对象的链接。
利用模板和库，可以使站点内的部分页面应用相同的模板和
库，从而使多个页面具有相同的风格，并且可以快速进行统
一更新。管理器还自带FTP功能，能完成站点内文件的上传和
加的字体上移，便于以后的使用。
③ 单击“确定”按钮。此时，属性面板上的字体下拉列表
(4) 将第一段文本的颜色设置为红色，将第三段文本的颜色设 置为十六进制代码#3333CC蓝色，将后面文本的颜色设置为十六 进制代码#FF00FF的淡紫色。操作步骤如下： ① 首先选中第一段文本； ② 单击属性面板上的字体颜色按钮，在“颜色”调色板中 用吸管吸取红色即可，如下图所示。
设计者可以按自已的需要任意组合或拆分浮动面板集中的各种面板也可以用鼠标拖拽浮动面板的标题栏来移动浮动面板用鼠标拖拽浮动面板的边框来改变浮动面板的大小
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
4.如果可能，应该将每一页都设计的简短一 些，每一页的文本及图形不应该超过一到两个 屏幕。如果一页太长，则读者不得不来回滚动 屏幕以阅读整份页面，这样就会打断文档的流 畅性。如果页面必须很长，则应在文档中包括 目录和指向特殊位置的链接，以使读者便于找 到所需信息。 5.不要在页面上设置太多的图形。图形文件 很大，意味着浏览器装载一页包括图形的页面 会非常费时。尽管你的网络连接可能非常的迅 速，但是别人访问你网页可能相对很慢。 6.在决定将自己的页面推向世界之前，应仔 细检查一下是否有错误和不佳之处。
以下是常用的浏览器 1.Mosaic：最早开始web研究时使用的浏览器， 不过现在一般没人用了。 2.Lynx：基于文本的浏览器，是问中仅限 于文本访问的最佳选择。但无法通过该浏览器看到 web页面的图像。 scape navigator：曾一度是最流行的浏览器， 它通过开发html扩展来提高web页面的图形品质。 4.Internet explor：简称ie，已经拥有同netscape navigator基本相同的特性，更由于其方便快捷、免 费等特性而成了当今最流行的浏览器
Web浏览器的选用
现在可以得到许多web浏览器，他们遍 及了几乎所有的计算机系统。Web浏览器 的功能是充当与web的接口，它们在 internet上对特定的web页面和文档发出请 求，当它们接收到文件后，就将格式化后 的版本返回html文件并显示到屏幕之上。 安装了web浏览器的计算机还可以处理ftp 等方法的信息请求。
第1章
网页基础
一.www基础 二.网站和网页 三.Html基础及简单页面设计 四.Web页面的颜色 五.给html文档加注释
一.www基础
www（world wide web，简称互联网），一直 被人们称作internet的“杀手应用程序”。它可 以显示普通文字和图像并访问其他页面，而信息 子页则使得它成为internet上发展最快的部分。 你可能已经掌握了在web上如何探索信息世界， 但也有可能不太清楚如何向全世界发布你自己的 信息——有关你自己的信息，如你个人的兴趣、 你的工作等。 要创建自己的页面，最基础技术就是html （hypertext makeup language，超文本标记语 言），现在绝大多数web文档都是由html编写的。
了解html的发展信息
要掌握html，就必须了解它的发展。大家可以 通过下面俩个链接了解html文档草案的现状、未 来html的发展已经url的工作原理的升级文档等。 1./:提供一个链接指向描述 已被确认为internet标准及现在被所有浏览器支 持的html特性的文档。 2./hypertext/www/addressin g/addressing.html:讲解url的各种类型和如何在 web文档中使用它们。
寻找一个web编写工具
Html编辑器或编写工具是指不用进入html核心而为 web页面创建html文档的程序。这些程序所使用的格式 与允许人们在一页上输入文件或图形的字处理器或页面 设计程序相似。 许多字处理器，如microsoft word都具有html的编辑功 能。一般的，人们都使用windows自带的文本编辑器— —记事本程序来编写。还有一些软件，如microsoft frontpage和dreamweaver都内置一web编写工具，这使 得初学者在创建web页面时更简单。但是要学习更好的 网页设计制作（如动态网页等），必须要掌握html的基 本原理，所以这种情况下不宜使用frontpage和 dreamweaver等可视化的网页开发工具。
文档结构和格式的定义是由html元素来 完成的。而html元素是由单个或一对标记 定义的包含范围。一对标记是指一个起始 标记和一个结束标记。一个起始标记是由 一个元素名和后面的一个在小于号（<）和 大于号（>）之间的属性/值对系列组成。 结束标记在元素前有一个斜杠（/），此外， 它并不包括属性/值列表。
二.网站和网页
在我们开始学习网页制作之前呢，先 让我们了解一下关于网页的一些知识。 1.网页和网站 2.动态网站和静态网站 3.web1.0和web2.0
三.Html基础及简单页面设计
HTML的编写是指创制和定义html文档 的过程。重要内容: 1.Html标记 2.Html的基本结构 3.创建一个简单页面 4.浏览自己的页面
www是一个全球性的、交互式的、动态的、 多平台的、分布式的、图像超文本的信息系统。 要能在web上四处遨游，首先必须安装一个 网站上的信息可 访问者和网站有 不受地域的限制， web浏览器。有了自己的 web 浏览器后，在 web 以随时随地进行更 交互的过程，提交 只要互联网保持连 一台服务器，多 可以在 www 上发 不受操作系统平 新 通就可以 信息、反馈信息 上导航最简单的方法就是结合浏览器的各种性 布多媒体信息，如 台的限制，如台客户机构成分布 式 等 图像和声音、视频 windows、linnux 能在各页上移动。你可以通过选择指定的高亮 等 系统平台 度显示的文字、词或图像从一个页面移至另一 页面，也可以利用该页的地址或url（uniform resource locator）统一资源定位器来直接移至 该指定页。
创建自己web页面的要点
有了上诉基本知识以后，就可以开始学习创建自己的 web页面了。不过，在创建自己的页面过程中，有一些 非常有用的技巧，必须好好的记住。 1.首先要搞清楚自己要说的东西。这看起来是很自然 的，但是许多页面的不成功就是由于它们缺少重点，因 为要展示给读者的观点一定要清楚明了。如果别人搞不 懂你想说什么，就不会有兴趣去读你的主页和其他页面。 2.确定好目标之后，就应该考虑页面应包括的内容。 此时就应该按内容分割材料。材料可以分布在几页上， 也可以组合在同一页面中，这取决于你的写作方式。 3.除非页面非常短，否则编写一个简单介绍web站点的 目标、可得到信息及途径的简单页面是很有帮助的。这 一页面应包括内容介绍及目录，它可以使读者能对继续 阅读哪一页做出迅速的判断。此外，这一页上还可包括 指向有关所述论题的、更多信息的页面链接。