6.1网站和网页
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服务器发回该结果页面给浏览器。
大学计算机基础6.1.1 网页与网站基础
3.2段落标记
<p>标记，成对标记 <p align="left|center|right"> 欲显示的内容 </p>
align属性用来设定文字的对齐方式，其属性值如下： 1. left ： 设定图文往左靠。 2. right ： 设定图文往右靠。 3. center ： 设定图文居中。 一般都配合<br>换行标记使用，让网页的段落分明。 <p>标记用来设定段落，浏览器每碰到一个<p>标记，就 会将接下来的图文从新的一行开始显示，而且每个用<p>标 记所形成的段落之间都会自动空一行，</p>可省略。
网页通过网页浏览器来阅读，由网址（URL） 来识别与存取。
网页可以由文本、图像、动画、声音、视 频、表格、导航、交互式表单、超链接、 样式、脚本等组成。
网页分静态网页和动态网页。
1.3 超文本标记语言
网页的本质就是超文本标记语言HTML （HyperText Marked Language） ，
在HTML文件中的标记分“成对标记”和“ 非成对标记”： 以<html标记>开始以</html标记>结束 ，称为“成对标记”；允许单独出现在欲 显示内容的前面或后面的标记是非成对标 记。
语法1：成对标记
<html标记 属性名称1=”属性值” 属性名 称2=”属性值”…> 欲显示的内容 </html标记>
8
简单示例：
<html> <head> <title> 我的第一张网页 </title> </head> <body> <h1>网页的基本结构</h1> <p>网页<br/>总体结构简要说明</p> <p align=“center”>网页的结构与标记的使用</p> <h3 align=“center“>网页结构简要说明结束</h3> </body>
高中信息技术教材目录比较
高中信息技术教材目录的比较与分析报告一、前言1.团队成员：万剑、康梅琳、江莉娜、吴芳2.调研时间：2011年9月20日—2011年9月26日3.调研对象：五版《信息技术基础》教材目录，作者与出版社分别为（1）李艺、董玉琦，教育科学出版社（教科版）（2）应吉康、洪如蕙，上海科技教育出版社（沪教版）（3）徐福荫、李文郁，广东教育出版社（粤教版）（4）祝智庭，中国地图出版社（中图版）（5）陶增乐，浙江教育出版社（浙教版）4.调研的缘由在国内，信息技术课程逐渐成为一门重要的课程进入中学学科体系，由于各个地区发展程度不同，信息技术课程实施的有效性程度存在明显的地域性差异，因此，“一纲多本”教材政策逐渐取代传统的“一刚一本”教材政策，成为我国中学教材编写的主流。
多元化的教材必然给学生和教师的选择提出了挑战，研究信息技术教材目录，可以使教师全面把握教材，为教师选择相关教材提供合理的参考。
“高中信息技术新教材是否体现信息技术新课标的教育理念，是否符合素质教育的新课改精神，教材编写的质量如何，直接影响教师教学的质量和学生的学习以及个性的全面发展”。
各版信息技术教材目录整体上反映了教材的编写特征、编写理念以及各自的侧重点。
教材的编写质量如何，直接影响到教师的教学质量以及学生全面发展与个性发展。
研究信息技术教材，是促进我国中小学信息素养提高的前提条件。
目前，高中信息技术课程分为选修和必修两个模块，其中必修部分只有“信息技术基础”模块，其与义务教育联系最为紧密，是培养学生信息素养的基础，也是其他选修部分的前提。
因此，其重要性也可想而知。
并且，由教育科学出版社、浙江教育出版社、广东教育出版社、上海科技教育出版社和中国地图出版社出版的五套信息技术教材通过了2004年全国中小学教材审定委员会的初审，成为了首批进入试验区进行试验的教材，随着信息技术教材的推进，其适用性将变得越来越广泛。
本文主要选取“信息技术基础”为研究对象，对五个版本的《信息技术基础》的教材目录进行横向比较，挖掘各版教材的优势与不足，为各版信息技术课程教材的进一步修订和完善提供合理的依据。
第6章 Div+CSS布局网页
6.2 使用Div+CSS布局网页
（21）设置分类项定位的Overflow值为hidden。 （22）连续单击“确定”按钮，完成Div区域的插入，最终结果如图6-19所示。
图6-19 完成Div区域的插入
6.2 使用Div+CSS布局网页
（23）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （24）如图6-20所示，设置插入栏为“在标签之后”。
6.2 使用Div+CSS布局网页
（10）如图6-11所示，单击分类栏中的方框，然后设置Width为720像素， Height为120像素。
图6-11 设置宽度和高度
6.2 使用Div+CSS布局网页
（11）如图6-12所示，取消“margin”中对“全部相同”复选框的勾选， 然后分别设置Right和Left均为auto。这样设置可以保证Div区域在网页中居中显 示。
（30）设置分类项定位的Overflow为hidden。 （31）连续单击“确定”按钮，完成新的Div区域添加。最终结果如图6-24所示。
图6-24 完成新的Div区域添加
6.2 使用Div+CSS布局网页
（32）单击插入面板的“插入Div标签”按钮，打开“插入Div标签”对话框。 （33）按图6-25所示设置，然后单击“新建CSS规则”按钮，打开“新建CSS规则” 对话框。
图6-3 切换到布局选项卡
6.2 使用Div+CSS布局网页
（3）执行“修改/页面属性”命令，打开图6-4所示的“页面属性”对话框。
图6-4 “页面属性”对话框
6.2 使用D0像素，单击“确定”按钮。 （5）如图6-5所示，单击“插入Div标签”按钮，打开“插入Div标签”对话框。
网站和网页有什么区别
1.网站和网页有什么区别？网站是有独立域名、独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其他文件，不一定要有很多网页，主要有独立域名和空间，那怕只有一个页面也叫网站。
网页是网站的组成部分。
有了很多网页没有独立的域名和空间也只能说是网页，例如blog、挂在别人那里的个人主页，企业建站系统里的企业页面，多用户商城里的商户……尽管有很多页面，功能也齐全，但都不能叫网站。
2.网页按表现形式分类有哪两种？动态和静态3.网页颜色设计基本原则是什么？颜色对比度越强可读性越强不要使用互补色珍惜使用的颜色4.常用颜色的十六进制描述一种方式是以定义好的颜色名称表示，具体的颜色名称针对不同的浏览器也有所不同。
另一种方式通过一个以“#”开头的6位十六进制数值表示一种颜色。
6位数字分为3组，每组两位，依次表示红、绿、蓝三种颜色的强度。
在RGB 颜色模式颜色由表明代表多少各成份红色绿色和蓝色应该包括在它。
每个可能与极小值(没有颜色) 不同对最大值(充分的强度) 。
当所有颜色是在最低值被显示的颜色然后将是黑的。
并且当所有颜色是在他们的最大值然后被显示的颜色将是白色的。
但是一个缠扰不清的方面在RGB 颜色模式是所有这些颜色可能代表以各种各样的方法。
颜色科学描述颜色在范围0.0 到1.0 (极小值对最大值) 。
颜色惯例的多数采取这些价值代表颜色变异。
例如 1.0 0.0 0.0 代表充分的强度红色。
代表颜色价值其它方法是由使用百分比从0% 到100% (极小值对最大值) 。
这同一样以上说的方法改变从范围0.0 到1.0 简单地倍增数字与100 。
颜色价值可能并且代表作为数字范围从0 到255 。
这类型数字代表由计算机程序设计者广泛实施存放各颜色价值在一个8位字节。
充分的强度红色代表作为255 0 0 。
同样范围 0 到255 和十六进制数在这个范围通常被写以一个固定的两位数格式代表它并且代表在十六进制在某些情况下前缀(象#) 。
Web3D三维网页制作
7
2．WebGL定义
WebGL is a royalty-free, cross-platform API that brings OpenGL ES 2.0 to the web as a 3D drawing context within HTML, exposed as low-level Document Object Model interfaces. It uses the OpenGL shading language, GLSL ES, and can be cleanly combined with other web content that is layered on top or underneath the 3D content. It is ideally suited for dynamic 3D web applications in the JavaScript programming language, and will be fully integrated in leading web browsers.
人民邮电出版社
2．设置three.js渲染器
(0) 声明全局变量（对象） (1) 获取画布「canvas-frame」的高宽 (2) 生成渲染器对象（属性：抗锯齿效果为设置有效） (3) 指定渲染器的高宽（和画布框大小一致） (4) 追加 【canvas】 元素到 【canvas-frame】 元素中。 (5) 设置渲染器的清除色(clearColor)
Web3D三维网页制作
6.1 三维网页制作基础知识
6.1.1 三维网页的概念 三维网页是相对于二维网页而言的，传统的二维网页 以平面的文字和图像来表述内容，通过超链接形成内 容有机地交织。三维网页是指三维立体的交互式网页 ，或能够在线实时访问的三维虚拟环境。 从表现形式来看，无论网页的形式是二维还是三维， 都是显示在电脑屏幕上的，只不过三维网页利用了眼 睛的视觉效果来达到三维的效果，是在网络上模拟三 维空间，具有比二维网页更强的交互性和娱乐性。从 技术层面来看，二维网页是基于HTML的网页形式 ，三维网页是基于Web3D技术的网页形式。
6.1 常见IE浏览器攻击方式_黑客攻防从新手到高手_[共9页]
![6.1 常见IE浏览器攻击方式_黑客攻防从新手到高手_[共9页]](https://img.taocdn.com/s3/m/a96d3222f61fb7360a4c6584.png)
黑客攻防从新手到高手6.1 常见IE 浏览器攻击方式IE浏览器是用户访问网站的主要工具，通过IE浏览器用户可以访问海量的信息。
正是由于这一点，黑客们也盯上了IE浏览器，本节就来介绍常见IE浏览器攻击的方式。
6.1.1 篡改IE浏览器首页篡改IE浏览器首页是恶意网站攻击浏览器的常用方式之一，一旦IE的首页被篡改，只要用户启动IE就会自动连接到恶意网页。
要想修复被篡改后的IE浏览器首页，最简单的办法就是在【Internet选项】对话框中进行修改。
具体的操作步骤如下。
【Internet选项】菜单项。
➋打开【Internet选项】对话框，在其中选择【常规】选项卡。
➌在【主页】设置区域中的【地址】文本框中输入自己需要的主页，如这里输入百度的网址“/”。
➍单击【确定】按钮，这样就可以把主页设置为百度。
双击桌面上的IE浏览器图标，即可打开IE浏览器主页，即百度首页。
但是，很多时候使用这种方法会无效，因此建议用户使用以下的方法，彻底恢复IE首页。
1. 使用组策略具体的操作步骤如下。
6.1常见IE浏览器攻击方式本节视频教学录像：10分钟第6章 IE 浏览器攻防➊ 单击【开始】中的【运行】选项，打开【运行】对话框，在【打开】文本框中输入“gpedit.msc ”。
单击【确定】按钮，打开【组策略】对话框。
➋ 在左侧窗格中单击展开【用户配置】【Windows 设置】【Internet Explorer 维护】【URL 】选项。
➌ 在右侧窗格中双击【重要 URL 】选项，打开【重要 URL 】对话框，在其中勾选【自定义主页URL 】复选框。
➍ 在【主页 URL 】文本框中输入自定义的主页，如这里输入百度地址“/”。
单击【确定】按钮，即可将IE 浏览器的首页修改为百度首页。
2. 使用“系统配置实用程序”具体的操作步骤如下。
➊ 打开【运行】对话框，在【打开】文本框中输入“msconfig”。
单击【确定】按钮，打开【系统配置实用程序】对话框。
《网页制作》教案
湖南省商业技术学院学期授课进度计划（二年级第一学期）课程名称网页制作与设计适用班级16高21、22制定教师易会芝审批签字2017-2018 学年第一学期制定教学计划学期授课进度计划表学期授课进度计划表任务一插入文本(20min) 一、插入文本1、插入普通文本2、插入不换行空格3、插入水平线4、插入日期和特殊字符二、编辑文本1、基本样式设置2、设置段落格式3、创建列表演示并强调重点认真听讲并记下重点文本插入是基础知识，为下面任务二打下基础任务二(55min) 完成以下网页实例：1、引导学生讨论该网页由哪几部分组成2、引导学生小组组内分工，完成小模块小组讨论本实例即是对任务一的巩固，也为下一次课打下基础作业布置（5min）1、找一篇文章输入至页面中，然后利用所学知识，对其进行格式编排课堂小结（5min）一、插入文本二、编辑文本板书一、插入文本5、插入普通文本6、插入不换行空格7、插入水平线8、插入日期和特殊字符二、编辑文本1、基本样式设置2、设置段落格式3、创建列表三、实例操作教学反思本次课是一个基础知识内容，文本是一个网页必不可少的内容，对网页设计至关重要，学生必须牢牢掌握文本的各个要点。
目前来说学习兴趣较好。
实训课题网站素材处理实训课时2课时实训目标1、掌握创建本地站点和远程站点2、学会修改站点和多站点的管理实训重点站点的管理实训难点站点的管理实训方法上机实训实训准备教案、素材、案例、教材、计算机机房实训要求1、对照实习报告的要求，完成上机任务；2、任务完成后及时要求教师考评；3、完善实习报告，填写实训总结；4、遵守实训纪律，不游戏，不睡觉，不高声谈论。
实训过程内容操作要求及步骤任务一创建站点1、熟悉DW界面2、在D盘根目录创建一个站点名称为《我的足球网》，本地站点文件夹为jcwww，如下图所示任务二设置默认图像文件夹利用教师所给素材，制作简单网页《我的偶像》，素材见文件夹完善报告填写实训总结，并上交实习报告。
第6章 网页制作Frontpage2003
1．“网页”视图
6.1.2 “ 网页视图”示例
返回本节目录
2．“文件夹”视图
图6.1.3
“文件夹”视图 返回本节目录
3．“报表”视图
图6.1.4
“报表”视图
返回本节目录
4．“导航”视图
图6.1.5
“导航”视图 返回本节目录
5．“超链接”视图
图6.1.6
“超链接”视图 返回本节目录
6．“任务”视图
返回本节目录
图6.3.1 “新建”网页对话框
返回本节目录
6.3.2
网页的基本操作
1．打开网页
2．保存网页
返回本节目录
1．打开网页
⑴从本地磁盘或局域网中打开网页。
单击“文件”菜单中的“打开”命令， 或单击工具栏上的“打开”按钮 。打开 “打开文件”对话框。在“查找范围”下拉 列表框中选择站点，从文件列表中选定要打 开的文件。
返回本小节
6.5 站点的发布
发布一个站点就是将已制作完成的站点上的 文件复制到已经存在的某个站点文件夹中，使得 这些网页成为该Web站点中的网页。我们可以将制 作的站点发布到Internet上已经存在的站点（如 发布到提供免费的个人网页的站点），或是本地 计算机上已经存在的Web服务器的站点。 发布站点的操作如下：
返回本小节
3．创建指向电子邮件的超链接
在网页视图模式下，先选中需要创建超链接的 对象，打开“创建超链接”对话框，在URL下拉列 表框中输入mailto:，或单击 “制作发送电子邮件的超链接”按钮 ，打开 “创建电子邮件超链接”对话框，然后输入电子邮 件地址。
返回本小节
网页背景包括：背景颜色和背景图片。
⑴背景颜色
鼠标右击网页编辑区，从弹出的快捷菜单 中单击“网页属性”命令，打开“网页属性” 对话框。单击“背景”选项卡，在“颜色”区 中，可以从“背景”下拉列表中选择一种背景 颜色，也可以进一步从“其他颜色”中选取自 定义的颜色。
网站与网页区别
作业
能够说出网站与网页的本质区别。 能够区分出什么、是网站什么是网页。 掌握网页的基本组成部分。
预习 Dreamweaver工作界面以及自定义工作环境
空间的内容集合，这些内容可能是网页，也可
能是程序或其他文件，不一定有很多网页，主
要有独立的域名和空间，哪怕只有一个页面也
叫网站。
什么是网页？
网页是网站的基本组成要素。有很
多网页没有独立的域名和空间也只
能说是网页，例如blog、qq空间、 微博。
标题
网页的基本构成元素
表单元素 横幅广告条
主要内容
横幅广告条
怎样学习这门课程？
多练题？ 多背书？ 多考试？
多操作多实践才是王道！
总结
一个网站通常有自己的独立域名和空间，例如
是一个网站，而
/about.htm则是这个网站所属的
一个网页，网站主菜单中的栏目实际上也是一
个网页。网站与网页的区别就在于，网站是一
网页设计与制作
《Dreamweaver 网页设计与制作》
前言
网站概述
教学目标:
通过本章的学习熟练掌握网站与 网页的区别，掌握网站基本构成元素， 了解网站的基本布局类型。
本节内容
1.了解网站与网页的区别
2区别
什么是网站？
网站(Web Site)是有独立的域名、独立的存放
计算机应用基础(Windows7+Office2010)第六章 网页设计基础
务供应商（ISP）所设立的机房，每月支付必要费用，由ISP代为管理维护，
而客户从远端连线服务器进行操作的服务方式。
•
• 3、虚拟主机
•
虚拟主机是使用特殊的软硬件技术，把真实的物理服务器
主机分割成多个的逻辑存储单元，即虚拟主机，虚拟主机没有物理实体，
但是都能像真实的物理主机一样在网络上工作，具有单独的域名、IP地址 (或共享的IP地址)以及完整的Internet服务器功能，网站所有者只需要租用
• <html>
•
<head>
• </title>
<title>例1.1 设置背景色、体会标题样式的使用
•
</head>
•
<body bgcolor=red>
•
以下为标题样式：
•
<h1>标题一</h1>
•
<h2>标题二</h2>
•
<h3>标题三</h3>
•
<h4>标题四</h4>
•
<h5>标题五</h5>
新一代的网页标准规范。
• 3、域名
•
互联网中的计算机采用的身份标识是IP地址，但由于IP地
址完全由数字构成，不便于记忆，为了解决这个问题，人们按照一定的规
则对互联网中的计算机定义了字符形式的地址标记，这就是域名。在网络
中，域名通常与IP地址是一一对应的。按照互联网中的组织模式，域名系 统最早提出了六大分类，即.com（商业组织）、.edu（教育机构）、.gov （政府部门）、.mil（军事机构）、.net（网络相关组织）、.org（非营利
网页设计会考知识点
网页设计会考知识点一、色彩搭配与运用1.1 色彩基础知识：包括色彩的原理、色相、明度、纯度等概念。
1.2 色彩搭配原则：比如对比色、类似色、互补色等搭配方法。
1.3 色彩运用技巧：涉及到色彩的运用在网页设计中的重要性和具体的实践技巧。
二、布局与排版2.1 页面布局原则：包括对称布局、不规则布局、网格布局等。
2.2 网页排版技巧：如行距、字体搭配、段落设置等。
2.3 响应式设计：了解响应式设计的概念和原理，能够实现适应不同终端的网页布局。
三、用户界面设计3.1 用户体验设计原则：比如易用性、可访问性、可用性等。
3.2 导航设计：包括主导航、次导航的布局和设计。
3.3 按钮与交互元素设计：了解按钮和其他交互元素在网页中的设计规范和使用技巧。
四、图像处理与优化4.1 图片格式选择与优化：了解不同图片格式的特点和应用场景，能够进行图片的压缩和优化处理。
4.2 图片编辑工具：熟练使用常见的图片编辑软件，对图片进行调整和优化。
4.3 图片的引用与版权问题：了解图片引用的规范和版权问题，遵循相关法律法规。
五、网页动画与交互效果5.1 CSS3动画：了解CSS3动画的基本语法和效果实现，能够制作简单的动画效果。
5.2 JavaScript交互效果：掌握JavaScript的基本语法和常用的交互效果的实现方法，能够实现网页的动态效果。
5.3 使用动画与交互效果的注意事项：了解动画效果对用户体验的影响，注意不要过度使用或影响页面性能。
六、网页的可访问性与SEO优化6.1 网页的可访问性原则：了解网页的可访问性标准和规范，包括对残障人士友好的设计和页面的无障碍访问。
6.2 SEO优化基础知识：掌握网站SEO优化的基本原理和常用方法，如关键词优化、页面结构优化等。
七、网页制作工具与技术7.1 网页编辑软件：熟练使用网页编辑软件，如Dreamweaver、Sublime Text等。
7.2 HTML与CSS：掌握HTML和CSS的基本语法和应用，能够编写简单的网页。
《网页设计与制作》课程标准
《网页设计与制作》课程标准《网页设计与制作》课程标准前言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。
本课程定位于WEB技术开发工作岗位。
它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用，一、课程的说明：通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。
为今后从事网页设计与制作、网站开发和管理奠定基础。
在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。
二、课程内容与基本要求：该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：网页设计开发岗位职业能力教学内容（理实一体化课）基本开发工具的使用网页基本概念（第1章）DW CS6软件介绍（第2章）建立与管理站点（第3章）网页基本元素的处理制作主要内容为文本的网页（第4章）插入与编辑图像（第5章）插入多媒体元素（第6章）创建超级链接（第7章）HTML基础（第13章）网页布局表格处理与网页布局（第6章）AP Div的应用（第9章）使用CSS+DIV布局网页（第11章）网页美化CSS样式表（第10章）网页交互行为（第12章）动态网页基础（第15章）网页及元素的复用创建和使用模板（第9章）创建和使用库（第10章）网页与网站基本概念、网页基本组成元素、常用网页制作软件主要教学内容：1.1 网页制作基础知识1.2 网页的基本构成元素1.3 网页制作常用软件和技术第二章Dreamweaver CS6轻松入门（2学时）教学目标：DW CS6软件的安装、用DW建立网页的方法、打开和保存网页的方法主要教学内容：2.1 Dreamweaver CS6工作环境2.2 [插入]栏2.3 Dreamweaver CS6新功能第三章站点的搭建与管理（4学时）教学目标：本地站点与远程站点的概念、站点文件夹的管理主要教学内容：3.1 创建本地站点3.2 管理点站3.3 管理站点中的文件4.3 使用站点地图第四章网站建设规范和基本流程（2学时）教学目标：IIS信息服务器的搭建与管理、建立、发布主页、建立和管理站点主要教学内容：4.1 网站建设规范4.2 网站建设的基本流程第五章创建结构清晰的文本网页（6学时）教学目标：1. 在网页中添加文字和字符2. 使用背景、列表美化文本网页主要教学内容：5.1 设置文本属性5.2 插入其他元素5.3 创建项目列表和编号列表5.4 插入网页头部内容5.5 综合案例-创建基本文本网页第六章创建绚丽多彩的图像和多媒体网页（6学时）教学目标：1. 了解网页中常用的图像格式2. 网页中插入图像的方法3. 网页中插入多媒体的方法主要教学内容：6.1 网页中常用的图像格式6.2 编辑图像6.3 插入多媒体6.4 综合案例-创建图文混排网页第七章创建超级链接（6学时）教学目标：超级链接的概念、文字与网页间的链接、图片热点和锚记主要教学内容：7.1 超级链接的基本概念7.2 创建超级链接的方法7.3 创建各种类型的链接7.4 管理超链接7.5 综合实例第八章使用表格排版网页（6学时）教学目标：1. 表格的编辑处理2. 用表格制作网页元素主要教学内容：8.1 创建表格8.2 设置表格及其元素属性8.3 表格的基础操作8.4 表格的基本应用8.5 综合实例-利用表格排版网页第九章使用DIV和Spry灵活布局网页（4学时）教学目标：1. AP Div的创建2. 在AP Div中插入网页元素3. 设置AP Div的属性主要教学内容：9.1 插入AP Div9.2 设置AP Div属性9.3 使用Spry布局对象第十章使用CSS修饰美化网页（6学时）教学目标：1、CSS样式表的类型2、CSS样式表的创建3、不同样式表的样式应用主要教学内容：10.1 CSS简介10.2 使用CSS10.3 设置CSS样式10.4 CSS滤镜设计特效文字10.5 综合实例第11章CSS+DIV布局方法（6学时）教学目标：盒子模型概念、CSS布局理念、常见布局类型主要教学内容：11.1 初识DIV11.2 CSS定位11.3 CSS布局理念11.4 常见的布局类型第12章使用模板和库提高网页制作效率（6学）教学目标：了解模型的库的概念，会使用库创建项目主要教学内容：12.1 创建模板12.2 使用模板12.3 管理模板12.4 创建和应用库项目第13章使用行为和动作为网页添加活力（6学时）教学目标：重点区分行为、触发事件、动作、对象等概念和区别主要教学内容：13.1 行为的概念13.2 行为的动作和事件13.3 使用Dreamweaver内置行为第14章网站页面布局设计与色彩搭配（2学时）教学目标：网页色彩搭配知识、常见页面版式主要教学内容：14.1 网页版面布局设计14.2 常见版面布局形式14.3 网页色彩搭配知识第15章用表单创建交互式网页（6学时）教学目标：表单的基本概念、常用表单元素的插入方法主要教学内容：15.1 表单概述15.2 创建表单域15.3 插入文本域15.4 复选框和单选按钮15.5 列表和菜单15.6 跳转菜单的使用15.7 使用按钮激活表单15.8 使用隐藏域和文件域15.9 综合案例五、课程实施条件本课程需要一间高性能联网的计算机实训室，需满足每位学生一台电脑。
网站与网页的区别
网站和网页的区别
网站：
1、网站(Website)开始是指在因特网上根据一定的规则，使用HTML（标准通用标记语言下的一个应用）等工具制作的用于展示特定内容相关网页的集合；
2、简单地说，网站是一种沟通工具，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。
人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务；
3、衡量一个网站的性能通常从网站空间大小、网站位置、网站连接速度（俗称“网速”）、网站软件配置、网站提供服务等几方面考虑，最直接的衡量标准是网站的真实流量。
国标中对软件的定义为：与计算机系统操作有关的计算机程序、规程、规则，以及可能有的文件、文档及数据。
其它定义：
1、运行时，能够提供所要求功能和性
能的指令或计算机程序集合。
2、程序能够满意地处理信息的数据结构。
3、描述程序功能需求以及程序如何操作和使用所要求的文档。
以开发语言作为描述语言，可以认为：软件=程序+数据+文档
百度知道是一个网站。
网站和网页的基础认识
网站和网页的基础认识
一、建立网站的重要性：
二、网站的分类（内容）：门户网站、职能网站、专业网站、个人网站
佰网门户网站
合肥人才网职能网站
照片处理网专业网站
说来听听个人网站
三、网页与网站的关系：
网页分类：1、表现形式：动态网页、静态网页
2、在网站中的位置：主页、内页（分页）
四、利用什么工具建立网站（FrontPage、Dreamweaver（剑客）、Fireworks（刀客）、Flash（闪客））
五、建立网站的一般步骤：1、考虑网站反映主题
2、收集网站要用资料
3、动手制作（包括网站色调、主框架、网站内部各页面关系等）
4、制作完成后调试
5、网站发布
6、网站推广与后期维护
六、url:全球资源定位器
七、HTML语言：英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。
一个HTML文
件的后缀名是.htm或者是.html。
HTML文件格式：
<html>
<head>
<title> </title >
</head >
<body>
</body>
</html>。
report
第6章网页设计网络成了人们生活不可缺少的组成部分，网页作为网络的表现形式之一，综合了多方面的知识，是多种元素的有机结合，体现了企业文化和制作者的思想。
存储网页的站点是以网页的形式在网络中表现，并以文件的形式存放在计算机中。
访问站点的过程是：基于TCO/IP协议在网络中传输，使用IP地址定位所在的网页资源，为了便于记忆，用URL（Uniform Resource Locator,统一资源定位符）替代ip地址，而在实际应用中，网络系统要将URL转换成IP地址，就可以访问网络资源了。
6.1 网页设计基础Dreamweaver 是世界上最优秀的可视化网页设计制作工具和网站管理工具之一,支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。
在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式!Dreamweaver版本很多，功能方面存在一定的差异，本章所使用的是Dreamweaver CS4版本（见图6-1）。
6.1.1创建站点为了管理和组织WEB网页，在设计网页之前，首先要创建一个本地站点，即网站中所有文件在本地计算机中的位置。
【详解案例6.1】创建站点。
【操作步骤】（1）启动Dreamweaver，选择“站点”/“新建站点”选项卡，然后其操作如错误！未找到引用源。
所示的界面。
（2）进入如错误！未找到引用源。
所示界面后，选择“是否使用服务器技术？”选项，可选择“静态页面”/“动态页面”。
提示：静态页面文件的扩展名为.html，页面内没有“交互功能”。
此时选择“否”。
如图6-3所示。
动态页面文件的扩展名为.aspx（一般要根据所选择的程序代码所用的设计语言而定，.aspx选择的是程序设计语言）。
如图6-4所示选择。
数字媒体技术交互式媒体PPT课件
主要通过简单FLASH动画知识的讲解，以及在FLASH中 设计和完成一个掷骰子的游戏来学习FLASH动画的简单设计 与制作。从而明白FLASH也是可以实现交互数字媒体的制作 的。
返回
实战强化
制作Flash拼图游戏。 设计一个班级网站。
返回
第6章 交互数字媒体
返回主页
任务情境 任务分析 任务实施 任务评价 相关知识 触类旁通
6. 2 制作掷骰子游戏
6.2.2 任务分析
• 对于内容和结构比较简单的交互性网页或课件，利 用Flash来实现可以说是得心应手。Flash具备很强 的交互设计功能，可以实现非常有意思的互动网站， 如世界著名时装品牌CHANEL网站，就是用Flash制 作的。Flash的强大功能和容易上手的操作界面为 广大用户所接受，它不仅可以制作互动的网页或课 件，还可以制作电视栏目、动画片以及动画游戏等。
第6章 交互数字媒体
返回主页
任务情境 任务分析 任务实施 任务评价 相关知识 触类旁通
6.1 设计交互网页
6.1.3 任务实施 1．网站站点的建立
第6章 交互数字媒体
返回主页
任务情境 任务分析 任务实施 任务评价 相关知识 触类旁通
6.1 设计交互网页
6.1.3 任务实施 2．网站首页的制作
第6章 交互数字媒体
返回主页
任务情境 任务分析 任务实施 任务评价 相关知识
6.1.4 任务评价
评价指标
自评
组评
继续学习 已掌握 继续学习 已掌握
1．网站站点的建立。
2．网站首页的制作。
3．网站分页的制作。
4．网站链接的制作。
触类旁通
第6章 交互数字媒体
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
12．一张网页内含图片，表格，文字，超链接等元素， 若在发布网页的时候仅上传HTML文件，那么以下哪项 元素将无法正常显示？( ) A．文字 B．图片 C．表格 D．超链接 【答案】 B
13．要内容。 那么，输入文字的地方一般是由( )构成的 A．表格 B．表单 C．JavaScript D．VBScript 【答案】 B
如HTML语句： <im270 height＝129 > 含义为在网页上显示一张图片度270，高度129。 6．HTTP HTTP全称为“超文本传输协议”，它是一个基于请求与 响应模式的、无状态的、应用层的协议，常基于TCP的 连接方式，绝大多数的Web开发，都是构建在HTTP协 议之上的Web应用。 7．静态网站和动态网站 两者主要区别在于动态网站是基于数据库系统的网站，能 够根据用户需求由数据库自动生成不同的网页。 静态 网页一般以．htm或．html作为扩展名，动态网站根据
B．Frontpage D．Word
11．一段网页的代码如下所示：<P id＝lg><IMG he useMap＝#mp></P> 请问这段代码的功能是( ) A．在屏幕上显示一张图片 B．利用音箱播放一段音乐 C．在列软件中，能打开网站“http：//”的是 ( ) A．Word B．Goldwave C．会声会影 D．Firefox 【答案】 D
6．下列图像文件中，可以用在网页上表示简单动画效果 的是( ) A．help.jpg B．hello.gif C．who.bmp D．me.png 【答案】 B
《新时代领航》
信息技术基础能力训 练必修一
版权所有 侵权必究
6.1网站和网页(1课时)
学习指导
1．网站和网页 万维网(WWW)上的文档称为网页，若干个网页组成一个网 站，网站的地址用URL(统一资源定位器)标识。用户借助 浏览器访问或阅读网页。 2．网页的基本元素 网页的基本三元素为“文字”、“图像”和“超链接”， 除此之外，还有表格(常用于网页元素的定位)，表单(常 用于数据输入与交换)、“音乐”和“内嵌程序”(常用于 网页的美化)等。 3．常见的网页制作工具 (1)用记事本制作网页，这需要很强的HTML功底，对一般 人来说入门比较困难。 (2)FrontPage，常用于制作静态网站，入门比较简单，具有
语言的不同，主要是asp与php两大类。
学习提示
本节课学习需要了解网站和网页的概念，掌握网页的三 种基本元素，掌握常见的网页制作工具，掌握URL、 HTML和HTTP的基本知识，初步了解静态网页与动态 网站的主要区别。
基础训练
1．我们平时在万维网上访问“网易”、“搜狐”、“新 浪”等门户网站时，访问过程中使用的是 ( )协议 A．FTP协议 B．POP3协议 C．HTTP协议 D．MIME协议 【答案】 C
14．为了加快页面的下载速度，在网页中一般使用( 格式的图片文件。 A．bmp B．jpg C．tif D．psd 【答案】 B
)
15．在万维网上，( 的。 A．主页 B．网页 C．网站 D．文档 【答案】 C
)是由众多不同内容的网页组成
16．一个网站的起始网页被称为( A．网站 B．网页 C．网址 D ．主页 【答案】 D
(3)DreamWeaver，常用于制作动态网站，适合比较专业 的人士使用。 4．URL URL中文叫作统一资源定位器，用于因特网上标识网址。 URL通常由以下几个部分组成： 协议名称/用户名：密码/域名/网页地址 大多数公众网站并不需要用户名和密码。如大家园丁论坛 网站URL为：“http： ///forum.php”。前面的 http指的是 超文本传输协议，中间“”指的是 域名，“forum.php”指的是网页名称。 5．HTML HTML为“超文本标记语言”(Hyper Text Markup Language)的简称，是一种使用一组特定的标记来描述 文档结构的语言，HTML的源代码由网络浏览器解释执
)
17．如下图所示为大家园丁论坛的首页地址，请根据图 示选择不正确的一项( )
A．此网站采用了数据库 B．此网站是个动态网站 C．此网站主要作用是非同步交流 D．此网站是个静态网站 【答案】 D
18．如下图所示，是小明在访问某网站时的截图，他想 在此网页中观察某个超链接是否存在，最直接的方法 是( )
2．万维网上的文档称为( A．WEB B．网页 C．网站 D．WWW 【答案】 B
)
3．如下图所示，是郑老师电脑上使用记事本打开的某个 文件记事本内容，下列各项文件类型中，最有可能的 是( )
A．网页文件 C．视频文件 【答案】 A
B．声音文件 D．EXCEL表格
4．我们使用URL地址访问网站，那么URL专业名称是 ( ) A．网址 B．域名 C．统一资源定位器 D．网址解释服务器 【答案】 C
)
9．构成网页的三种基本元素为( A．表格、图片、文字 B．文字、超链接、图形图像 C．声音、动画、颜色 D．标题、正文、页尾
【答案】 B
)
10．如下图所示，为“大家园丁论坛”网站的部分截图， 根据所学的知识，您认为网站最有可能由以下那个软 件制作完成？
A．Internet Explorer C．Dreamweaver 【答案】 C
7．HTML语言是用来描述网页内容及表格、构件等的语 言，中文称作( ) A．超文本标记语言 B．虚拟现实建模语言 C．计算机语言 D．初学者程序设计语言 【答案】 A
8．下列软件中，不能用于网页编辑的是( A．记事本 B．Frongpage C．Dreamweaver D．Maxthon 【答案】 D
A．观察文字是否有下划线 B．观察图片是否加框 C．将指针指向文字或图片，观察指针是否变成手形 D．观察文字是否为蓝色 【答案】 C