大学计算机基础网页设计与制作图文
合集下载
《网页设计与制作》电子教案课程课件PPT 第一章
1.2.1站点的内容规划(2)
制作网页时还要注意一些问题： 第一，合理安排主页内容，主页应该简洁清晰、 一目了然，重点突出，图文有序。 第二，网页上要善用图片，色彩协调，格调一致， 但又要注意图片不可过大，以免影响浏览时的下 载速度。 第三，要易于导航，尽量减少链接级数，尽快通 过链接接触到实际内容，否则会使浏览者失去兴 趣。 第四，即要美观实用，又要有新颖的创意，网页 上要有一些与众不同的闪光点。Leabharlann 1.2.2站点的定义 (1)
如果有了站点文件夹，必须先经过定义，将这 个站点纳入到Dreamweaver的管理范围内。在 Dreamweaver中可以定义多个站点，但只有一 个站点是当前站点。
1.2.2站点的定义 (2)
1．定义站点 定义站点的具体操作步骤如下： （1）打开“站点”菜单，选择“定义站点”命令， 出现“定义网站”对话框。如图1-4所示。 （2）在“定义网站”对话框中，单击“新建”按 钮，出现“站点定义”对话框。如图1-5所示。 图1-5“站点定义”对话框 （3）在“站点定义”对话框中输入站点名称和站 点所在的路径，单击“确定”后返回“定义网站” 对话框。
1.1.2网页制作软件
本书介绍的软件是Macromedia公司的 Dreamweaver MX网页设计制作软件。在 Dreamweaver MX启动时会弹出如下窗口为 了方便读者与老版本衔接学习本书采用 Dreamweaver 4.0的经典样式。
1.2.3 Dreamweaver MX窗口介绍
Dreamweaver MX经过安装并输入正确的序列 号之后，用户就可以在Windows的启动菜单中 找到Dreamweaver MX的启动命令，点击该命 令即可启动Dreamweaver MX。启动后的窗口 界面如图1-1所示。
网页设计与制作-01要点
第20页
远程登录服务(Telnet)
远程登录服务（Telnet）远程登录就是用户 通过计算机网络进入和使用远程的计算机 系统。
第21页
电子公告板服务（ BBS）
（BBS）即公告板系统（Bullet in Board System）是一个信息和文件的陈列室,常常 集中于一个特定主题，像发告示一样，将 要公布的信息粘帖到公告栏上，其他人可 以随时看到信息。
第3页
教学过程
Internet与WWW的发展历程 Web的基本概念 Web技术基础及高级技术 Web应用开发基础
第4页
1.1 Internet与WWW
第5页
什么是Internet
Internet是一个具体的网络实体,泛指全球 计算机网络的集合，是一个全球性的信息 通信网络，我们称之为因特网。
From Dr. Vinton Cerf, Co-Creator of TCP/IP
第24页
Web服务器
Web服务器是在网络中为实现信息发布、 资料查询、数据处理等诸多应用搭建基本 平台的服务器。
1945
1995
第10页
1.1 Internet与WWW
Internet的技术基础 TCP/IP
包括近100个协议,其中TCP是传送控制协 议;IP(Internet Protocol)是网际网协议。
域名系统(DNS)
实现域名与其所对应的IP地址进行对应和转 换
第11页
协议
是关于信息格式及信息交换规则的描述。
第6页
一、Internet的发展史
ARPANET
1969年,美国国防部 (DoD, Department of Defense)
实验性质的包交换 (packet-switched) 网络系统 1980年,分成APARNET及Milnet: 军事用途 五大特点: 1、支持资源共享 2、采用分布式控制技术 3、采用分组交换技术 4、使用通信控制交换技术 5、采用分层的网络通信协议
远程登录服务(Telnet)
远程登录服务（Telnet）远程登录就是用户 通过计算机网络进入和使用远程的计算机 系统。
第21页
电子公告板服务（ BBS）
（BBS）即公告板系统（Bullet in Board System）是一个信息和文件的陈列室,常常 集中于一个特定主题，像发告示一样，将 要公布的信息粘帖到公告栏上，其他人可 以随时看到信息。
第3页
教学过程
Internet与WWW的发展历程 Web的基本概念 Web技术基础及高级技术 Web应用开发基础
第4页
1.1 Internet与WWW
第5页
什么是Internet
Internet是一个具体的网络实体,泛指全球 计算机网络的集合，是一个全球性的信息 通信网络，我们称之为因特网。
From Dr. Vinton Cerf, Co-Creator of TCP/IP
第24页
Web服务器
Web服务器是在网络中为实现信息发布、 资料查询、数据处理等诸多应用搭建基本 平台的服务器。
1945
1995
第10页
1.1 Internet与WWW
Internet的技术基础 TCP/IP
包括近100个协议,其中TCP是传送控制协 议;IP(Internet Protocol)是网际网协议。
域名系统(DNS)
实现域名与其所对应的IP地址进行对应和转 换
第11页
协议
是关于信息格式及信息交换规则的描述。
第6页
一、Internet的发展史
ARPANET
1969年,美国国防部 (DoD, Department of Defense)
实验性质的包交换 (packet-switched) 网络系统 1980年,分成APARNET及Milnet: 军事用途 五大特点: 1、支持资源共享 2、采用分布式控制技术 3、采用分组交换技术 4、使用通信控制交换技术 5、采用分层的网络通信协议
大学计算机基础-第9章网页设计与制作
2020/6/25
3
9.1 网站的建设与规划
9.1.1 网页基本知识 9.1.2 HTML语言简介 9.1.3 常用的网页制作工具
2020/6/25
4
9.1.1 网页基本知识
• WWW(World Wide Web )
WWW是Internet上多媒体信息查询的工具。WEB由互相链接在一起的网页 构成，这些网页是由普通文本、超文本Hypertext，以及图表、图片等构成 。
• URL（Uniform Resource Locator）
URL（统一资源定位器）是指向网络服务器中某个资源的地址，用字符
串来表示。其中包括协议、主机域名（或IP地址）、文件名等等。
• 超级链接（Hyperlink）
超级链接是包含在网页中指向其他网页的指针。
• 超文本
包含超链接的文本称为超文本。有时图像或图像的某部分也可以包含超
➢ 标记的一般格式为：
<tag>对象</tag>
<tag 属性=参数>对象</tag>
<tag>
例如：<h1>我的主页</h1>
<a href=jianjie.htm>简介</a>
2020/6/25
12
超文本文档的结构
例：<html>
<head>
文 档
<title>我的第一个主页</title>
头部</head>
20120./6/确25 定了主题和风格后就需要组织文字、图片、9声
网页设计遵循的一般原则
•主题鲜明
一個主题鲜明、內容丰富具有特色的网站，通常要比什么都有的大杂 烩式的网站更加吸引人。
网页设计与制作
客户端
个人简历 能力特长 人生领悟 个人荣誉 我的相册
图14-2 个人网站实例图
精讲指导
form1 form3 个人主 页框架
form4
form2
合并单元格
技能训练
• 制作个人主页 【步骤 步骤】 步骤 共有7步 共有 步： ① 在工具栏“标题”文本框中输入“个人网 在工具栏“标题”文本框中输入“ 站”。 设置页面属性：左边距=0，上边距=0。 ② 设置页面属性：左边距 ，上边距 。 插入form1，行数 ，列数 ，宽度 ③ 插入 ，行数=1，列数=1，宽度=798像 像 素，单元格图像=index-01.gif。 单元格图像 。
作业1效果图 图14-5 作业 效果图
结束
图14-1 效果页
引 课
随着互联网络的普及， 随着互联网络的普及，越来越多的个人 和企业有了自己的网站， 和企业有了自己的网站，网站是企业形象和文 化的窗口，本章综合运用前面我们所讲的网页 化的窗口， 制作的相关知识学习个人网站的制作 。
学习目标
• 学习制作个人网站 学习制作个人网站
• 掌握网站的规划和网站的内容 • 强化知识运用能力和综合网页制作能力
• 小结
本次课主要综合利用所学知识来制作个人主 页，还进一步学习了网页特效的使用。 还进一步学习了网页特效的使用。 【重点】学会利用所学知识设计、制作和维护网页。 重点】学会利用所学知识设计、制作和维护网页。 【难点】网页脚本语言的应用和理解。 难点】网页脚本语言的应用和理解。
小结与作业
• 作业 1. 学习中国移动家校通网页制作。 学习中国移动家校通网页制作。
知识点拨
第14章 网页制作综合实例 章 14.1 网站设计规划
14.1 网站设计规划
个人简历 能力特长 人生领悟 个人荣誉 我的相册
图14-2 个人网站实例图
精讲指导
form1 form3 个人主 页框架
form4
form2
合并单元格
技能训练
• 制作个人主页 【步骤 步骤】 步骤 共有7步 共有 步： ① 在工具栏“标题”文本框中输入“个人网 在工具栏“标题”文本框中输入“ 站”。 设置页面属性：左边距=0，上边距=0。 ② 设置页面属性：左边距 ，上边距 。 插入form1，行数 ，列数 ，宽度 ③ 插入 ，行数=1，列数=1，宽度=798像 像 素，单元格图像=index-01.gif。 单元格图像 。
作业1效果图 图14-5 作业 效果图
结束
图14-1 效果页
引 课
随着互联网络的普及， 随着互联网络的普及，越来越多的个人 和企业有了自己的网站， 和企业有了自己的网站，网站是企业形象和文 化的窗口，本章综合运用前面我们所讲的网页 化的窗口， 制作的相关知识学习个人网站的制作 。
学习目标
• 学习制作个人网站 学习制作个人网站
• 掌握网站的规划和网站的内容 • 强化知识运用能力和综合网页制作能力
• 小结
本次课主要综合利用所学知识来制作个人主 页，还进一步学习了网页特效的使用。 还进一步学习了网页特效的使用。 【重点】学会利用所学知识设计、制作和维护网页。 重点】学会利用所学知识设计、制作和维护网页。 【难点】网页脚本语言的应用和理解。 难点】网页脚本语言的应用和理解。
小结与作业
• 作业 1. 学习中国移动家校通网页制作。 学习中国移动家校通网页制作。
知识点拨
第14章 网页制作综合实例 章 14.1 网站设计规划
14.1 网站设计规划
第2章 网页设计与制作PPT课件
《网页设计与制作》 19
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
8．网站的宣传和推广 网站发布后，还要不断地进行宣传，这样 才能让更多的朋友认识它，提高网站的访问率 和知名度。网站宣传和推广的方法有很多，例 如到搜索引擎上注册，与别的网站交换链接， 运用网络广告等。
9．网站的更新和维护 网站是需要经常维护和更新内容的，必须 不断给它补充新的内容，才能够长期吸引住浏 览者。
《网页设计与制作》 5
2.1.2 网站建设的步骤 建设一个网站一般要经过以下步骤：网站目标和主题
的确定、网站的规划、网站素材的准备、网站制作工具的 选择和确定、网站的建立、注册域名和申请网页空间、网 站的测试和发布、网站的宣传和推广以及网站的更新和维 护。
1．网站目标和主题的确定 1）网站目标的确定 为什么要建立网站，是为了宣传产品，进行电子商务， 还是建立行业性网站？是企业的需要还是市场开拓的延伸？ 如果是个人网站，比如说是交朋友的、学习讨论的还是兴 趣爱好的？建立网站前目标要明确。另外还应该知道谁是 网站将来的访问者，例如，明确该网站是面向于消费者？ 雇员？学生？朋友还是家庭的？只有知己知彼，才能避免 在网站建设中出现很多问题，使网站建设能顺利进行。
《网页设计与制作》 14
这两种基本结构都只是理想方式，在实际 的网站设计中，总是将这两种结构混合起来使 用，希望浏览者既可以方便快速地到达自己需 要的页面，又可以清晰地知道自己的位置。所 以，最好的办法是：首页和一级页面之间用星 状链接结构，一级和二级页面之间用树状链接 结构。
《网页设计与制作》 15
《网页设计与制作》 11
2．网站的规划 网站的规划包括总体结构的设置、目录的设 置和链接结构的设置。 1）网站总体结构的确立 网站总体结构的确立至关重要，它是网站设 计能否成功的关键所在。规划一个网站结构，可 以用树状结构先把每个页面的内容大纲列出来， 尤其是要制作一个有很多页面的大网站时，特别 需要把这个架构规划好，同时要考虑到以后可能 的扩充性，免得做好以后又要一改再改整个网站 的架构，十分累人，也十分费时。
网页设计与制作
• 认识层
层是一种HTML页面元素，可以将它放 置在页面的任意位置。 没有层的网页像一个平面，即由x轴和 y轴组合成的二维空间，而层所确定的区域 是在z轴上，它摆脱了二维平面的束缚，形 成了一个三维空间结构。
y
z
2 1
网页
x
图8-2 层在网页中的相对位置
从图上可以看出，层与层之间的关系 由z轴的坐标来决定。一般来说，默认后建 立的层的z值大，先建立的层的z值小，z值 大的层可以覆盖z值小的层。
• 小结 本次课主要讲授创建层、设置层属性和 对层进行移动、删除和对齐层等基本操作。 【重点】学会层的制作技巧，通过技能训练 加强对层的综合运用能力的培养。 【难点】将层技术与网页中动作行为进行有 机的结合，制作特色网页。
小结与作业
• 作业 1.为朝阳社区学院招生办公室制作网页下 拉菜单。
图8-7 朝阳社区学院下拉菜单效果图
网页设计与制作
杨莉
任务九 为南幼网页制作下拉菜单
• • • • • •
小 结 作 业 知 识 扩 展
技 能 训 练
知 识 点 拨
学 习 目 标
复 习 引 课
复 习
1. 制作一个花艺网页，包含上下两个框架页 的页面。
图 效 果 页
8-1
上次课主要讲用表格可以将文本、图
像等内容进行布局定位，但是被定位的内 容不能相互叠加，如果用户希望将多个对 象按照顺序叠加摆放，则要使用层的技术 来实现。下面就来讲解有关层的使用方法。
结束
8.2.1 调整层的大小
8.2.2 移动层 【要点】
1. 箭头一次移动一个像 素。 2.shift+箭头一次移动10 个像素。 3.多层对齐以最后选中 的层的边框为准。
层是一种HTML页面元素，可以将它放 置在页面的任意位置。 没有层的网页像一个平面，即由x轴和 y轴组合成的二维空间，而层所确定的区域 是在z轴上，它摆脱了二维平面的束缚，形 成了一个三维空间结构。
y
z
2 1
网页
x
图8-2 层在网页中的相对位置
从图上可以看出，层与层之间的关系 由z轴的坐标来决定。一般来说，默认后建 立的层的z值大，先建立的层的z值小，z值 大的层可以覆盖z值小的层。
• 小结 本次课主要讲授创建层、设置层属性和 对层进行移动、删除和对齐层等基本操作。 【重点】学会层的制作技巧，通过技能训练 加强对层的综合运用能力的培养。 【难点】将层技术与网页中动作行为进行有 机的结合，制作特色网页。
小结与作业
• 作业 1.为朝阳社区学院招生办公室制作网页下 拉菜单。
图8-7 朝阳社区学院下拉菜单效果图
网页设计与制作
杨莉
任务九 为南幼网页制作下拉菜单
• • • • • •
小 结 作 业 知 识 扩 展
技 能 训 练
知 识 点 拨
学 习 目 标
复 习 引 课
复 习
1. 制作一个花艺网页，包含上下两个框架页 的页面。
图 效 果 页
8-1
上次课主要讲用表格可以将文本、图
像等内容进行布局定位，但是被定位的内 容不能相互叠加，如果用户希望将多个对 象按照顺序叠加摆放，则要使用层的技术 来实现。下面就来讲解有关层的使用方法。
结束
8.2.1 调整层的大小
8.2.2 移动层 【要点】
1. 箭头一次移动一个像 素。 2.shift+箭头一次移动10 个像素。 3.多层对齐以最后选中 的层的边框为准。