[0834]《网页设计》 2019-09-23 至 2019-11-27
第1章网页设计基础CC
一堆按一定格式书写的文字和符号，浏览器会帮我
们翻译成眼前的模样。
27
第1章 网页设计基础>> 1.4 常用建站技术
1.4.1 常用语言
网 页
HTML：是一种超文本标记语言，是WWW文档
制
描述语言。它主要在原来文本文件的基础上，加
作 基
教
程
Web网采用超文本置标语言（HTML），可以
存取包括文本、图像、动画、音频和视频等多
媒体信息，还基于超链接，通过众多的网页和
网站构成了一个全球范围内的庞大信息网络。
6
第1章 网页设计基础>> 1.1 网站基础知识
1.1.2 网站 网
页
网站(Website)是指在因特网上，根据一定的规则
制
作
使用HTML等工具制作的，用于展示特定内容的相关
16
第1章 网页设计基础>> 1.2 网站的组成
1.2.2 网站硬件平台
网
网站硬件主要由两大部分组成：网络设备和服务器
页
制
1.网络设备：
作 基
网络设备主要用于网站局域网建设、网站与因特网的连接。
础
路由器是一种连接多个 网络或网段的设备，是将网站连入
教
因特网的桥梁。
程
交换机是局域网组网的重要设备，多台不同的计算机可以
作
基
号，用32位二进制数表示，每8位一组，每组
础
教
数的十进制范围为0~255，各数之间用一个点
程
号“.”分开。如：192.168.0.1
9
第1章 网页设计基础>> 1.1 网站基础知识
1.1.3 IP地址、域名及URL
(0834)《网页设计》西南大学21年6月限时资料
西南大学培训与继续教育学院课程一、单项选择题(本大题共15小题，每道题2.0分，共30.0分)在每小题的四个备选答案中，选出一个正确的答案，多选、少选、错选均不得分。
1.Dreamweaver 8中，设计调查表单时，_________最好设计为单选项。
A.爱好B.性别C.您喜欢的网站D.您的意见2.若要改变网页中的字体颜色，可选中文字，再打开______。
A.“字体”对话框B.“格式”对话框C.“颜色”对话框D.“信息”对话框3.以下有关列表的说法中，错误的是_____。
A.有序列表和无序列表可以互相嵌套。
B.指定嵌套列表时，也可以具体指定项目符号或编号样式。
C.无序列表应使用 UL 和 LI 标记符进行创建。
D.在创建列表时，LI 标记符的结束标记符不可省略。
4.以下有关按钮的说法中，错误的是_____。
A.可以用图像作为提交按钮。
B.可以用图像作为重置按钮。
C.可以控制提交按钮上的显示文字。
D.可以控制重置按钮上的显示文字。
5.在页面属性对话框中，我们不能设________。
A.网页的标题B.背景图像的透明度C.背景图像D.超链接文本的颜色6.关于网页中超链接的说法，不正确的是____ 。
A.网页中可以指定一个E-mail地址作为目标B.网页可以指定一个新的网页作为目标C.网页中可以指定一个面板作为超链接的目标D.网页可以指定一幅图片作为超链接的目标7.欲执行“发布站点”命令，要打开的菜单是______ 。
A.编辑B.工具C.文件D.格式8.Dreamweaver 8设计表单时，"您的照片"项让用户输入自己的照片，应使用的表单元素是_____ 。
A.单选钮B.多行文本域C.图像域D.文件域9.具备单击后直接返回网页顶部功能的超链接是_____ 。
A.图像链接B.锚点链接C.电子邮件链接D.空链接10.若要网页中插入Java小程序，可打开“插入”菜单，选择命令______。
网页设计与制作第一章网页制作基础1
Linking Language)。
2019/10/24
29
1.22 静态网页和动态网页
静态网页指基本上全部使用 HTML语言制作的网页，页面的 内容是固定不变的。
2019/10/24
动态网页（DynamicHTML， DHTML）利用JavaScript，CSS (层叠样式表) 及其它类似的语言如 VBScript等与HTML进行有机的结 合来使静态的HTML网页变成动态。
2019/10/24
</BODY>
24
</HTML>
（1）版本信息 版本信息位于HTML网页文件的第一行
（2）HTML文件标记 大部分网页文件都是以<HTML>标记开始的，在文件
的结尾处又以</HTML>结束
（3）头部信息 HEAD标记之间是HTML文档的头部，用来标明当前文档
的有关信息
在HEAD标记之间，使用频率最高的标记就是 TITLE，它用于定义显示在浏览器标题栏的文档标题。
2019/10/24
Bgcolor为背景颜色。关于颜色的值后面会详 细介绍。Text为不包含超级链接的文字颜色。
Link为超级链接文字的颜色。 Alink为正被点击的超级链接文字的颜色。
27
Vlink为已经点击过的超级链接文字的颜色。 Background设置，如果设置了背景图片， 图片会覆盖已经设置的颜色。
网页设计与制作
第1章 网页制作基础
南海学院计算机系制作
第1章 网页制作基础
Web和浏览器
Web
Web的特点和结构
Web 最 大 的 特 点 是 使 用 了 超 文 本 （Hypertext）
WWW采用C/S（客户机/服务器）工作模式
网页设计概述
共享、透明
24
2、计算机网络的组成
25
介质
双绞线
同轴线缆
光纤
26
服务器
塔 式
机架式
刀 片 式
27
连接设备
集线器
交换机
路由器
28
网卡
普通网卡
USB网卡
无线网卡
光 纤 网 卡
29
万 兆 网 卡
大型计算机网络
按照计算机网络中各部分的功能可以将网络分 成通信子网和资源子网。
30
通信子网
– 通信子网的主要任务是将各种计算机互连起来， 完成数据交换和通信处理。 – 它主要包括:
7
Internet的发展历程
NSFNET APPANET
1985
1989年 INTERNET
MILNET TCP/IP
90年代初，商业机构开始进入Internet，使 Internet开始了商业化的新进程，也成为 Internet大发展的强大推动力。
8
Internet发展趋势
1977: 111 hosts on Internet 1981: 213 hosts 1983: 562 hosts 1984: 1,000 hosts 1986: 5,000 hosts 1987: 10,000 hosts 1989: 100,000 hosts 1992: 1,000,000 hosts 2001: 150 – 175 million hosts 2002: over 200 million hosts By 2010, about 80% of the planet will be on the Internet
第1篇 网页设计基础
1
课程教学内容
使用网页三剑客软件 Dreamweaver CS4（网页制作与网站开发）、
Fireworks CS4（网页图像处理）、 Flash CS4（网页动画设计） 高效开发网站
2
各章节主要内容
第1章 网页设计基础 第2章 设计网页元素 第3章 数据显示与简单布局 第4章 框架与资源 第5章 修饰网页元素样式 第6章 应用网页交互 第7章 构建动态网页 第8章 处理Fireworks网页图像 第9章 Flash动画基础 第10章 制作网页动画
1.1.1
网络技术基础
3．超链接与URL路径 用户使用互联网服务的基本过程，如下图1-1所示
图1-1 用户使用互联网服务的基本过程
13
1.1.1
网络技术基础
服务器向用户提供各种信息，最常用的方式是网页。 多个网页之间，需要用到超链接技术。超链接允许用户
在浏览当前网页时，通过单击等交互操作，跳转到当前 网页中的某个部分或相关网页、图片或其他类型的文件 与服务。 URL（Uniform/Universal Resource Locator，统一资 源定位符）是一种互联网中标准的资源位置标识方式。 URL地址的格式如下 protocol://hostname[:port] /path/ [;parameters][?query]#fragment 即协议://主机名[:端口]/路径/[;参数][?查询]#锚记
22
1.2.1
网页配色艺术
3．色彩模式 色彩模式是表示色彩的方法。 平面设计中常用的色彩模式主要分为 RGB 色彩模式
和CMYK色彩模式。 （1）RGB色彩模式 主要应用于CRT显示器的一种色彩模式。 基准是光学三原色（红、绿、蓝）。 网页设计领域中的色彩都是RGB色彩模式。 （2）CMYK色彩模式 主要应用于印刷品的一种色彩模式。
(0834)《网页设计》网上作业题及答案
（0834）《网页设计》网上作业题及答案1：第一次作业2：第二次作业3：第三次作业4：第四次作业5：第五次作业6：第六次作业1：[单选题]在HTML中，标记〈font〉的Size属性最大取值可以是（）A：5B：6C：7D：8参考答案：C2：[单选题]在HTML中，标记〈pre〉的作用是（）A：标题标记B：预排版标记C：转行标记D：文字效果标记参考答案：B3：[单选题]目前在Internet上应用最为广泛的服务是( )A：FTP服务B：WWW服务C：Telnet服务D：Gopher服务参考答案：B4：[多选题]下面关于CSS的说法正确的有（）A：CSS可以控制网页背景图片B：margin属性的属性值可以是百分比C：整个BODY可以作为一个BOXD：对于中文可以使用word-spacing属性对字间距进行调整E：margin属性不能同时设置四个边的边距参考答案：ABC5：[多选题]在CSS中，下面属于BOX模型属性的有（）A：fontB：marginC：paddingD：visibleE：border参考答案：BCE6：[多选题]下列关于IP地址与域名的说法正确的是（）A：IP地址以数字表示，域名用字符表示B：IP地址是供全球识别的通信地址C：IP地址与域名是一一对应的D：域名可以多于三个层次E：IP地址与域名都限制在32位内参考答案：ABCD7：[单选题]如果站点服务器支持安全套接层（SSL），那么链接到安全站点上的所有URL开头是（）A：HTTPB：HTTPSC：SHTTPD：SSL参考答案：B8：[论述题]论述网页设计中所需要注意的通用规则。
参考答案：首先，网站的设计目的决定设计方案。
其次，浏览者的需求要放在第一位。
另外还需要注意页面的有效性。
页面的布局要保持统一。
使表格和适当的帧结构来设计网页。
要谨慎使用图片。
要有平面设计意识。
同时减少Java Applet和其他多媒体的使用。
9：[论述题]论述抖动产生的原理。
网页设计
江西师范大学网页设计课程组
2.1 Dreamweaver 8.0界面介绍 8.0界面介绍
2.1.1 Dreamweaver 8.0界面介绍 8.0界面介绍 在首次启动Dreamweaver8时会出现如图 在首次启动Dreamweaver8时会出现如图2-1的一个界面, 时会出现如图2 的一个界面, 这是一个“工作区设置”对话框， 这是一个“工作区设置”对话框，在对话框左侧是 Dreamweaver8的设计视图 右侧是Dreamweave 8的代 Dreamweaver8的设计视图，右侧是Dreamweave 8的代 的设计视图， 码视图。Dreamweaver8设计视图布局提供了一个将全部 码视图。Dreamweaver8设计视图布局提供了一个将全部 元素置于一个窗口中的集成布局。 元素置于一个窗口中的集成布局。我们选择面向设计者的设 计视图布局。
江西师范大学网页设计课程组
2.2 Dreamweaver 8.0常用工具 8.0常用工具
2.2.2文档工具栏 2.2.2文档工具栏 “文档”工具栏包含各种按钮，它们提供各种“文档”窗口 视图（如“设计”视图和“代码”视图）的选项、各种查看 选项和一些常用操作（如在浏览器中预览）。界面如图2-4所 示。
江西师范大学网页设计课程组
2.3 Dreamweaver8.0的功能简介（3） Dreamweaver8.0的功能简介 的功能简介（
6.运用完整的集成开发环境来开发 运用完整的集成开发环境来开发HTML、XHTML、XML、 运用完整的集成开发环境来开发 、 、 、 ASP、、JSP、PHP和Macromedia Cold Fusion 、 、 、 和 站点。通过Macromedia插件中心可以获取 插件中心可以获取800多个免费插 站点。通过 插件中心可以获取 多个免费插 件来制定和扩展你的开发环境。 件来制定和扩展你的开发环境。 7.所有传输的文件完全加密，并阻止越权存取你的信息、文 所有传输的文件完全加密， 所有传输的文件完全加密 并阻止越权存取你的信息、 件内容、用户名和口令。 件内容、用户名和口令。 8.从Microsoft Word和Excel中直接拷贝粘帖内容到 从 和 中直接拷贝粘帖内容到 Dreamweaver中，同时保留字体、颜色和 样式。 中 同时保留字体、颜色和CSS样式。完全 样式 支持Unicode，支持使用和 存任何字体以及编码（ 支持 ，支持使用和chu存任何字体以及编码（包括 存任何字体以及编码 双字节字符）。 双字节字符）。 9.使用改进后的 使用改进后的对象和属性检测工具构建 使用改进后的 对象和属性检测工具构建 Microsoft Web forms.
《网页设计与制作》—网页设计基础-终稿
《网页设计与制作》
教
案
设
计
《网页设计与制作》教案教材分析
复习巩固并导入新授内
容
提问与引导
提问：网页发展简史？
网页有哪些元素？
例图：HTML-文本、标题、图
像、链接、表格网页
导入：HTML5语法特点及语法
规则
回答老师问题，随老
师讲授进入对新课的
了解。
认真聆听老师讲授内
４．导入：展示网页案例，提出问题，是采用什么开发技术实现的，引入ＨＴＭＬ。
二、新授课程
教学内容《网页设计基础知识(HTML及Dreamweaver)》视频点评。
１．２．１HTML基本概念及特征
HTML基本概念及特征
１．概念：HTML英文是Hypertext Marked Language，即超文本标记语言，是一种用来制作超文本文件的简单标记语言。
★２．特征：
基本结构（解说补充，并编辑运行代码，验证理论结果）
个属性，分别是：
功能是：定义字体的颜色) 如：color=“#ff0000”（功能是：定义文字的大小）如：Size =“15”
（功能是：定义文字的字体）如：Face =“黑体”
3.图像标签★
4.链接标签
5.表格标签
ＨＴＭＬ代码要求：
页面标题标记是一个特殊的标记，它设置的内容并不显示在页面中，而是显示在浏览器的标题栏，用来说明文件的用途。
因此，在设置该标记的时候，要使其能够体现整个页面的主题。
一般情况下，每个HTML页面都应。
网页设计
提供有关的教学辅导材料、作业讲评 与答案、期末复习资料、模拟试题等。 每学期提供一次考前的答疑活动，请 大家关注网上公布的答疑时间安排。
课程特点
本课程注重对于网页设 计技术的介绍，重在操作与 实训。
课程特点
文字教材的每章均以课 程总览开始，结合操作介绍 各知识点，每章后面有学习 要点回顾及学习要点参考。
基本情况
学生通过本课程的学习，把握下面三个方 面
掌握：学生能够全面掌握所学内容，并 能够应用Dreamweaver进行网页设计， 解答相关的问题。 理解：学生能够较好地理解与 Dreamweaver网页设计相关的问题，并 且能够进行简单分析和判断。 了解：学生能够一般地了解的所学内容。
资源介绍
使用层排版 使用时间轴制作动画 使用行为制作动态效果 利用层、时间轴和行为的配合 制作特效
教学重点
第11章 使用模板和库制作网站
使用模板 使用库
教学重点
第12章 使用插件丰富页面效果
使用插件的基本方法 使用行为插件 使用命令插件 使用对象插件
教学重点
第13章 网站维护和上传
关于实训
【考核要求】 1．掌握利用表格进行网页排 2．掌握设置标题 3．掌握建立广告条 4．掌握设立栏目 5．掌握插入图片，以及文字内容 6．掌握建立版权信息部分
关于实训
实训3 使用页面布局模式 【考核内容】 1．页面布局 2．排版的方法 【考核要求】 1．掌握使用页面布局模式设计表格 2．掌握网页排版 3．掌握区别页面布局模式和直接使用 表格有什么不同
教学重点
第4章 制作多媒体页面
在页面中插入动画 在页面中插入音频 在页面中插入视频 在页面中插入Applet 在页面中插入滚动字幕
第1章 网页设计基础PPT学习课件
2020/3/3
1.6 HTML语言
1.6.1文件结构标签 1.6.2表格标签 1.6.3文本段落标签 1.6.4图像标签 1.6.5链接标签 1.6.6框架标签 1.6.7表单 1.6.8块标签
25
2020/3/3
互联网就是借助通信线路将计算机和各种相 关设备相连接，并按照统一的标准在各种设 备之间进行数据传输和交换，实现互联互通， 以达到计算机之间资源共享和信息交换的目 的。
3
2020/3/3
1.1互联网基础
互联网提供的主要服务包括万维网（World Wide Web，WWW，3W，Web），电子邮件（E-mail）， 文件传输（FTP）和远程登录（Telnet）等。
10
2020/3/3
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识
网站logo，将网站logo置于页面比较醒目的位置，如左 上角。
2. 网站banner
网站banner一般位于页面的顶部，即可以表达和突出网 站创意和形象，也可以传达某种特定信息。
网络banner通常是由GIF动画、JPEG图像或Flash动画完 成的。
1.5.3后期工作
1．网站测试 网站测试包括网站运行的每个页面和程序。兼容性测试，
超链接测试是必选的测试内容。
2．网站发布 网站发布包括申请域名，申请服务器空间和上传网站内
容。
22
2020/3/3
1.5 网站制作流程
3．网站推广 注册搜索引擎是最直接和有效的方法。 通过在同行或相关行业网站中，建立网站的相互链
Dreamweaver，Photoshop和Flash是由Adobe公司开发 的3款软件，具有良好的集成性。Photoshop和Flash的 输出结果可以直接导入Dreamweaver网页中。
《网页设计》总结
《网页设计》总结学院：人文学院专业：广播电视新闻学班级： 2009级姓名：陈白玲学号： 90916043指导老师：2012年 12 月 11 日目录一.Dreamweavercs4 (3)1.1Macromedia Dreamweavercs4简介 (3)1.2Dreamweavercs4 的操作环境 (3)1.3规划站点结构 (3)1.4Dreamweaver cs4 插入图像 (3)1.5插入表格 (4)1.6Dreamweaver cs4 插入声音 (4)1.7Dreamweaver cs4 创建链接关系 (4)1.7.1链接的类型 (4)1.7.2关于链接路径 (5)1.7.3创建外部链接 (5)1.7.4创建E－mail链接 (5)1.7.5创建锚点链接 (5)二.网站建设生命周期 (6)2.1网站生命周期 (6)2.2建设网站的步骤 (6)2.3如何选择网站主题周期 (7)2.3.1短期主题 (7)2.3.2中期主题 (7)2.3.3长期主题 (7)三.制作网页注意事项 (8)四.小结及制作心得 (8)4.1明确设计的方向 (9)4.2假定不同的方案，通过对比分析修正设计 (9)4.3能预见设计方案所产生的效果 (9)4.4做好“相对满意”的设计，而不可能是最优 (9)4.4保证设计方案相对平衡 (9)通过一学期的学习让我对制作网页有了大致了解，在理论课和实验课的结合下，我能制作一些简单的网页，下面是我对这学期的使用Dreamweavercs4和网站制作过程的生命周期的总结：一.Dreamweavercs41.1M acromedia Dreamweavercs4简介Macromedia Dreamweavercs4是建立Web站点和应用程序的专业工具。
它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。
0834网页设计
单项选择题1、若要在浏览器的标题栏显示文字，应该使用的标记是（）1.〈TITLE〉2.〈BODY〉3.〈A〉4.〈HEAD〉2、1.标题标记2.预排版标记3.转行标记4.文字效果标记3、1.超级链接到黑龙江网页上2.超级链接到本文件中hlj标记处3.超级链接暂时不被运行4.超级链接到#hlj网页上4、在HTML中，标记<pre>的作用是( )。
1.标题标记2.预排版标记3.转行标记4.文字效果标记5、在HTML中，标题字体标记<hx>中x的最大取值是( )。
<br< span="" style="box-sizing: border-box;"></br<>1. 42. 53. 64.76、HTTP协议是一种( )协议。
1.文件传输协议2.远程登录协议3.邮件协议4.超文本传输协议7、目前在Internet上应用最为广泛的服务是( )。
1.FTP服务2.WWW服务3.Telnet服务4.Gopher服务8、1.页面中所有的红色文本变成斜体2.页面中所有的文本变成红色斜体3.页面中所有斜体文本变成红色字体4.页面中所有的文本变成红色9、DHTML的动态内容的作用是（）1.让页面制作者以自动方式或对用户的操作做出响应的方式移动页面上的文本和图像2.可实现客户端与服务器端动态的信息资源交换3.可使开发人员改变显示在一页上的文本或图像，以便内容能够交互式地对用户的鼠标键盘操作做出响应4.使网页制作者改变内容的外部特征而不强制用户再次下载全部内容10、最常用的客户端脚本语言是（）1.VB2.JavaScript3.JSP4.ASP11、关于客户端动态网页技术DHTML叙述正确的是（）1.动态管理，动态更新，动态识别2.动态样式，动态内容，动态定位3.安全性高，DHTML是一种独立的技术，与浏览器有关系4.HTML主要包括VBScript和JavaScript和CSS技术12、不属于TD标记属性的是（）1.WIDTH2.ALIGN3.BACKCOLOR4.NOWARP13、<CAPTION>标记设置的是表格的（）1.标题2.列标题3.带表框的表格4.居中且加粗的表格14、<SUB>的标记是（）1.子串标记2.居中标记3.下标标记4.上标标记15、访问Web服务器时，使用的协议是（）1.FTP2.TELNET3.HTTP4.SMTP16、1.rect2.circle3.triangle4.oly17、在下列PWS组件中，可以通过发送和接收邮件使应用程序之间进行快速、可靠和异步通讯的是（）1.事务服务器2.数据访问组件3.消息队列服务器4.个人Web服务器18、1.colspan2.nowra3.colwra4.nospan19、1.H3，H4&H5{color：red}2.body{font-size：12pt；text-indent：3 em；}3.A{color：red}4.font．html{color：#191970}20、1.是一种脚本编写语言2.是面向结构的3.具有安全性能4.是基于对象的21、1.不用修饰2.下划线3.上划线4.横线从字中间穿过22、动态HTML的核心是（）1.DOM2.Script3.SS4.XML23、解释执行JavaScript的是( )1.服务器2.编辑器3.浏览器4.编译器24、Internet上使用的最重要的两个协议是( )1.TCP和Telnet2.TCP和IP3.TCP和SMTP4.IP和Telnet25、在客户端网页脚本语言中最为通用的是( )1.JavaScript2.VB3.Perl4.ASP26、Web安全色所能够显示的颜色种类为( )1.4种2.16种3.216种4.256种27、在网站设计中所有的站点结构都可以归结为( )1.两级结构2.三级结构3.四级结构4.五级结构28、IP地址在概念上被分为( )1.二个层次2.三个层次3.四个层次4.五个层次29、在域名系统中，域名采用( )1. E. 树型命名机制2. F. 星型命名机制3.层次型命名机制4.网状型命名机制30、目前在Internet上应用最为广泛的服务是( )1. A. FTP服务2. B. WWW服务3. C. Telnet服务4. D. Gopher服务多项选择题31、关于标记〈title〉的说法正确的是（）1.〈title〉是标题标记，它只能出现在文件体中即〈body〉〈/body〉之间2.〈title〉是标题标记，格式为：〈title〉文件标题〈/title〉3.〈title〉和〈TITLE〉是一样的，不区分大小写4.〈title〉和〈TITLE〉是不一样的，〈TITLE〉根本不存在5."E：Title的长度没有限制，但过长的标题会导致折行，一般长度不应超过64个字符"32、CSS文本属性中，文本对齐属性的取值有（）1.auto2.justify3.center4.right5.left33、网站链接的组织形式有（）1.层次形链接结构2.树形链接结构3.网状链接结构4.星形链接结构5.环形链接结构34、下列关于IP地址与域名的说法正确的是（）1.IP地址以数字表示，域名用字符表示2.IP地址是供全球识别的通信地址3.IP地址与域名是一一对应的4.域名可以多于三个层次5.IP地址与域名都限制在32位内35、通过<body>标记对页面文本色彩体系进行控制时可以用到的属性有（）1.bgcolor2.text3.hue4.staturation5.1ightness36、下列关于IP地址与域名的理解，正确的有（）1.IP地址以数字表示，域名用字符表示2.IP地址与域名都限制在32位内3.IP地址与域名是一一对应的4.域名可以多于三个层次5.IP地址是供全球识别的通信地址主观题37、网站的链接结构是指页面之间相互链接的_______结构。
网页设计第一章
1.2 网页界面的构成要素
人们平常看到的报纸、杂志等传统媒体，都是由两种 元素构成的，即文字与图形。网页作为一种新兴媒体，可 以说是书报杂志的电子版本。不同的是，网页界面包含了 更多的构成要素。除了文字和图形以外，还有声音、视频 图像和动画等多媒体元素，以及由Java、Active控件等制作 的特殊效果及交互功能。正是由于这些区别于传统媒体的 元素，使网页界面的设计要考虑更多的因素。
经济性是所有设计类型都具备的共有特性，在工业 设计中尤其受到重视。1950年美国学者麦德华考夫曼琼 尼所概括的现代设计的12条定义中，最后一条就是提醒 设计师在追求豪华情调的同时，必须顾及消费者节制的 欲求与价格问题。作为网页界面设计主题中最活跃的因 素，设计师不仅要在设计时对设计成本有足够的重视和 充分的考虑，而且要预想到设计对市场的影响，设计可 能带来的经济效应，以及这种效应与设计主题的关系， 并以此为依据调整自己的设计方案和设计方式。 作为设计的共性而言，经济性是网页界面设计中重 要的特性，需要设计师认真对待。
1.3.1 主体的经济性 所谓网页界面的主体，可以简单地理解为在网页界面 设计领域中自觉从事设计创作、推广与鉴赏等活动的人。 这里主要指网页界面的设计师、制作人员和浏览者。网络 作为一种新兴的大众信息传播媒体，在它的各个层面上都 渗透着经济因素的作用。而在网页界面设计领域，设计师、 制作人员和浏览者也无一例外地受到经济性的影响。设计 师要考虑设计时间、设备需求以及市场前景收益回报等问 题；网页制作人员同样要考虑制作推广成本和效益；浏览 者考虑的则是信息接收成本，即如何在花费最少信息费和 最少时间的情况下获得必要的信息或满意的服务。
网页设计基础(二）
1.1 网页设计的发展 1.2 网页的构成要素 1.3 网页界面的特性 1.4 网页界面设计的特征 1.5 网页界面的主要形式
网页设计课件-第1章
尺寸属性
包括宽度和高度等。
CSS常见布局
浮动布局
使用float属性使元素浮动到一 侧，其他文本和内联元素将围 绕它流动。
Flexbox
弹性盒子模型是一种现代的布 局模式，可以轻松地设计复杂 的布局结构。
块级元素和行内元素
块级元素占据其父元素的整个 宽度，行内元素不会打断文本 流。
定位
使用position属性可以将元素 定位在相对于其正常位置或相 对于其父元素的位置。
链接到CSS样式表
(<link rel="stylesheet"
href="styles.css">) 等。
HTML常见标签
<h1>-<h6>
标题标签，`<h1>` 表示最高级别的标题，`<h6>` 表示 最低级别的标题。
<p>
段落标签。
<a>
链接标签，用于创建超链接。
<img>
图像标签，用于插入图像。
通过类属性选择要应用样式的 元素。
ID选择器
通过ID属性选择一个特定的 元素。
属性选择器
根据元素的属性选择要应用样 式的元素。
CSS样式属性
文本属性
包括文本对齐方式、 缩进、装饰等。
边框属性
包括边框样式、宽 度和颜色等。
字体属性
包括字体类型、大 小、颜色、行高等。
颜色和背景属性
包括背景颜色、背 景图像等。
常见的HTML元素包括段落 (`<p>`)、标题 (`<h1>`-`<h6>`)、链接 (`<a>`<tr>`、 `<td>`)、表单 (`<form>`、`<input>`、`<button>`) 等。
网页设计课件3
《网页设计与制作》(第3版)
13
（2）通过类选择器可以实现不同标记的元素应用 相同的样式，先将这些公共样式定义为同一类，使用 时再加上需要调用的标记名即可。例如<p>标记、 <h2>标记和<h3>标记都要使用红色、20像素的样式， 那就可以先定义一个红色、20像素的公共样式，再分 别调用就可以了。这种情况的类选择器格式如图3-11 所示，在“标记.类名称”中省略了“标记”名。 有无“标记”名的类选择器的区别在于：有“标 记”名的类选择器其适用范围将只限于该标记所包含 的内容；而无“标记”名的类选择器是最常用的定义 方法，它可以很方便地在任意标记上套用预先定义好 的类样式。
第3章 CSS基础知识
《网页设计与制作》(第3版)
1
3.1 CSS概述 3.1.1 CSS与HTML的关系 CSS技术诞生于1996年，由W3C负责组织和制定的。 HTML和CSS的关系就是“内容”和“形式”，即HTML 来组织网页的结构和内容，CSS来决定页面的表现形式。 3.1.2 CSS的优点 和传统的 HTML相比， CSS除了具有强大的控制能 力和排版能力之外，最主要的是实现了内容与样式的分离， 这种做法带来了许多好处。 （1）简化了网页的代码，提高了访问速度。 （2）可以构建公共样式库，便于重用样式。 （3）便于修改网站的样式。 （4）方便团队的开发。
《网页设计与制作》实例。
《网页设计与制作》(第3版)
17
3.4.4 伪类选择器 伪类是用来表示动态时间、状态改变或者是在文档中 以其他方法不能轻易实现的情况，伪类允许设计者自由指 定元素在一种状态下的外观，这种状态可以是鼠标停留在 某个元素上，或者是访问一个超链接。伪类选择器必须指 定标记名，且标记和伪类之间用“：”隔开，伪类选择器 的格式如图3-15所示。 在CSS选择器中，伪类选择器种类非常多，常用的伪 类有表示超链接状态的四个伪类选择器：a:link(链接原始 存在的状态, 但无鼠标动作)、 a:visited(被点击或访问过的 状态)、 a:hover(鼠标悬停于链接上时的状态)、 a:active(鼠 标点击与释放之间的状态)。
《网页设计与制作》第一章网页制作基础
块级元素与行内元素
浮动布局
浮动布局是一种常用的网页布局技术，通过设置元素的 `float` 属性，可以让元素脱离正常的文档流，向左或向右移动，直到遇到父元素的边界或另一个浮动元素。
使用浮动布局可以实现多种布局效果，例如多列布局、文字环绕图像等。
定位布局通过设置元素的 `position` 属性，可以精确控制元素在页面上的位置。常见的定位方式有静态定位（`static`）、相对定位（`relative`）、绝对定位（`absolute`）和固定定位（`fixed`）。
在线网页编辑器
网页制作工具简介
延时符
02
HTML基础
HTML文档结构
<html>元素是HTML文档的根元素，包含了整个文档的内容。
<!DOCTYPE html>声明文档类型为HTML5。
HTML文档由一系列的元素构成，包括`<!DOCTYPE html>`、`<html>`、`<head>`和`<body>`等。
03
响应式图片可以有效地减少带宽和加载时间，提高网页的性能和用户体验。
01
响应式图片是指在不同尺寸的屏幕上显示不同分辨率的图片。
02
通过使用HTML的srcset属性和CSS的picture元素，可以指定不同尺寸屏幕下的图片源，从而实现响应式图片。
响应式图片
THANKS
属性选择器
01
03
02
04
CSS选择器
用于设置元素的前景色和背景色，如`color`和`background-color`。
颜色与背景
用于设置字体类型、大小、行高等，如`font-family`、`font-size`和`line-height`。
网页设计与制作基础教程 第3版 配套课件
:::::
1.3.1 切换“文档”视图
Dreamweaver CC文档窗口显示栏当前文档，选择“查看”命令，在文 档视图下拉菜单中，用户可以“设计”、“代码”、“拆分”、“实时视图 ”等视图模式，其各自的功能如下。
设计视图 代码视图 代码视图 实时视图 实时代码模式 检查模式
::::::::::
3.2.1 选择表格元素
在表格中输入文本 在表格中插入图像
::::::::::
3.1.4 设置表格属性
表格由单元格组成，即使是一个最简单的表格，也由一个单元格。而表 格与单元格的属性完全不同，选择不同的对象（表格或单元格），“属性” 检查器将会显示相应的选项参数。
表格属性 单元格属性
::::::::::
3.2 编辑表格
第一章
网页设计基础知识
学习目标
随着因特网（Internet）的不断发展，越来越多的人都想要 学习设计与制作网页，但是要实现较好的网页效果，设计者首 先要了解网页的相关基础知识，例如网页与网站的关系，网页 设计的构思与布局方式，常用的网页制作工具，以及与网页相 关的概念等。
本章重点
网页制作的基础知识 网页设计构思与布局 常见的网页制作工具 与网页相关的概念
Dreamweaver CC的工作界面 Dreamweaver CC的基本操作
:::::
2.1.1 Dreamweaver CC的工作界面
Dreamweaver CC的工作界面效果秉承栏Dreamweaver系列软件产品一 贯简洁、高效和易用的特点，软件的多数功能都能在功能界面中非常方便地 找到，如图2-1所示。
表格是用于在HTML页面上显示表格式数据以及对文本和图形进行布局 的工具。表格由一行或多行组成，每行又由一个或多个单元格组成。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
单项选择题1、不能使用CENTER属性的标记是.〈BODY〉.〈TITLE〉.〈P〉.〈HX3〉2、在菜单标记中，默认选中的标记是下列哪一项？（）.〈img src=″url″border=?〉.〈option selected〉.〈isindex prompt=″* * *″〉.〈textarea wrap=ff | virtual | physical 〉〈/textarea 〉3、若要在浏览器的标题栏显示文字，应该使用的标记是（）.〈TITLE〉.〈BODY〉.〈A〉.〈HEAD〉4、关于JavaScript的说法错误的是（）.是一种脚本编写语言.是面向结构的.具有安全性能.是基于对象的5、HTML语言中的转行标记是( )。
.〈Html〉.〈br〉.〈Title〉.〈p〉6、.标题标记.预排版标记.转行标记.文字效果标记7、. border用于设置表格边线宽度，cellpadding用于设置框线厚度. cellpadding用于设置框线厚度，cellspacing用于设置数据与边框的距离. bgcolor用于单元格的背景颜色，width用于设定整个表格的宽度. valign用于强制单元格内容不换行，nowarp用于设定单元格内容垂直对齐方式8、. to. middle. low. bottom9、.超级链接到黑龙江网页上.超级链接到本文件中hlj标记处.超级链接暂时不被运行.超级链接到#hlj网页上10、在HTML中，标记<pre>的作用是( )。
.标题标记.预排版标记.转行标记.文字效果标记11、在HTML中，标题字体标记<hx>中x的最大取值是( )。
<br< span="" style="box-sizing: border-box;">. 4. 5. 6. 712、HTTP协议是一种()协议。
.文件传输协议.远程登录协议.邮件协议.超文本传输协议13、在域名系统中，域名采用( )。
<br< span="" style="box-sizing: border-box;">.树型命名机制.星型命名机制.层次型命名机制.网状型命名机制14、目前在Internet上应用最为广泛的服务是( )。
. FTP服务. WWW服务. Telnet服务. Gopher服务15、CSS用于控制网页的背景图片的属性正确的是（）.背景重复：background-repeat;图片依附位置：background-attachment.图片定位：position-background;图片大小：size-background.图片转换：variant-background；图片定义：family-background.倾斜控制：oblique-background;效果控制：style-background16、在CSS中，关于属性值的单位的论述中错误的是（）.属性单位包括px，pt，em，mm，in等.单位可用整数或实数表示.各属性的单位均要求是非负数值.对数值有继承的关系17、在CSS中的文本属性中，垂直对齐属性的取值middle表示（）.以其他普通元素的基线作为被定义元素的基线.与其他元素的基线对齐.与其他元素的中线对齐.与其他文本元素的中线对齐18、.页面中所有的红色文本变成斜体.页面中所有的文本变成红色斜体.页面中所有斜体文本变成红色字体.页面中所有的文本变成红色19、在CSS中，BOX的Padding属性的数值赋予顺序为（）.顶、右、底、左.顶、底、左、右.左、右、顶、底.顶、左、底、右20、在CSS中，下列不属于样式定义中选择符的是（）. HTML中的标记.变量. class. ID21、DHTML的动态内容的作用是（）.让页面制作者以自动方式或对用户的操作做出响应的方式移动页面上的文本和图像.可实现客户端与服务器端动态的信息资源交换.可使开发人员改变显示在一页上的文本或图像，以便内容能够交互式地对用户的鼠标和键盘操作做出响应.使网页制作者改变内容的外部特征而不强制用户再次下载全部内容22、.脚本置于标记中间.直接嵌入HTML窗口或链接中.使用SRC属性应用外部脚本文件.作为应用程序嵌入23、最常用的客户端脚本语言是（）. VB. JavaScript. JSP. ASP24、关于客户端动态网页技术DHTML叙述正确的是（）.动态管理，动态更新，动态识别.动态样式，动态内容，动态定位.安全性高，DHTML是一种独立的技术，与浏览器有关系. HTML主要包括VBScript和JavaScript和CSS技术25、下列标记不正确的是（）.test.Nokia 8850. img class="anchorclass"/>test.test26、<TD COLSPAN=3>设置的是表格的（）.宽度.高度.合并水平格.边框27、不属于TD标记属性的是（）. WIDTH. ALIGN. BACKCOLOR. NOW ARP28、<CAPTION>标记设置的是表格的（）.标题.列标题.带表框的表格.居中且加粗的表格29、清单前的符号可由最外层加TYPE属性来控制，不属于符号清单的标记属性是（）. DISC. CIRCLE. TRIANGLE. SQUARE30、<表示的符号是（）. <. >.″. &31、<SUB>的标记是（）.子串标记.居中标记.下标标记.上标标记32、主机域名由四个子域组成，代表网络类型的代码是（）. www. yahoo. com. cn33、访问Web服务器时，使用的协议是（）. FTP. TELNET. HTTP. SMTP34、. rect. circle. triangle. oly35、在下列PWS组件中，可以通过发送和接收邮件使应用程序之间进行快速、可靠和异步通讯的是（）.事务服务器.数据访问组件.消息队列服务器.个人Web服务器36、使用PWS设置目录ABC的访问权限为“执行”权限，则（）.允许运行该目录中的任何应用程序.只能运行该目录中的脚本程序.只能运行该目录中的Windows二进制文件(dll和exe文件).只能运行该目录中的脚本引擎和Windows二进制文件(dll和exe文件)37、下列关于Web服务器默认文档的描述中正确的是（）.只能是HTML文件.只能是HTML、asp、jsp或php文件.只能是asp、jsp或php文件.可以是任何操作系统支持的文件38、要想使用Windows的用鼠标双击下列哪一个缺省创建的图标（）.（a）.（b）.（c）.（d）39、如图所示的FrontPage操作界面，图中标注出①②③④所示的区域中哪一个是工具栏（）<="" span="" style="bo vertical-align: middle;">.①.②.③.④40、如图所示的FrontPage操作界面是FrontPage的（）<="" span="" style="box-vertical-align: middle;">.文件夹视图.网页视网.报表视图.导航视图41、如图所示的FrontPag .普通模式. HTML源代码模式.预览模式.框架网页的HTML源代码模式42、如图显示的是FrontPage操作界面的（）<="" span="" style="box-sizing: bvertical-align: middle;">.模式切换栏.状态栏.视图栏.标题栏43、下列关于HTML的说法正确的是（）. HTML是网页的核心，是一种超文本标记的程序设计语言.通过网页浏览器阅读HTML文件时，WEB服务器负责解释插入到HTML文本中的各种标记. HTML是网页的核心，是一种超文本标记的语言，它是页面描述语言.编制HTML文件时不需要加入任何标记(tag)44、FrontPage2000提供的工作模式中，能进行可视化编辑的是（）.导航模式. HTML模式.视图模式.普通模式45、在FrontPage2000中，虚拟目录（）.必须建立在保存站点文件所在的物理目录中.必须与保存站点文件所在的物理目录位于同一物理磁盘上.可以位于网络中的不同物理位置.只能是虚拟主机使用的目录46、文件目录设置时应该注意的是（）.文件目录要简明，尽量把同一类型的网页放在同一目录中.紧扣主题，设置站点指南，设置双向交流栏目，设置FAQ.要按照网页分类设置目录即首页要放在一个目录中，一级网页要放在另一目录中.为了让浏览者对网站更加了解可以考虑用中文设置文件目录名47、.设置背景颜色.设置被激活时的链接的颜色.设置未访问的链接的颜色.设置已访问过的链接的颜色48、. colspan. nowra. colwra. nospan49、.＜INPUT TYPE=RADIO＞.＜INPUT TYPE=TEXT＞.＜INPUT TYPE=PASSWORD＞.＜INPUT TYPE=CHECKBOX＞50、. H3，H4&H5{color：red}. body{font-size：12pt；text-indent：3 em；} . A{color：red}. font．html{color：#191970}51、.是一种脚本编写语言.是面向结构的.具有安全性能.是基于对象的52、.离开页面.鼠标离开.鼠标经过.鼠标单击53、DOM的含义是（）.文档对象模型.层叠样式表.客户端脚本程序语言.级联样式表54、外部式样式单文件的扩展名为（）. js. dom. htm. css55、.不用修饰.下划线.上划线.横线从字中间穿过56、在ＦｒｏｎｔＰａｇｅ中设置模板与向导的主要目的是( ).协助微软公司实现对用户使用该产品的技术支持.协助微软公司改进产品，提高市场竞争力.协助企业经营管理人员管理好自己的企业网站.协助网页开发、制作人员创建网站57、有如下一段代码，它是( ).ＸＭＬ代码.ＨＴＭＬ代码.Ｊａｖａ代码.ＪａｖａＳｃｒｉｐｔ代码58、ＨＴＭＬ语言中的预排版标记是( ).＜ｂｏｄｙ＞.＜ｎｏｂｒ＞.＜ｐｒｅ＞.＜ｐ＞59、在CSS中要使文本闪烁，text-decoration属性的取值应该是（）. none. underline. blink. overline60、下列说法错误的是（）. VBScript使用Sub语句定义函数. JavaScript使用Function和花括号“{”定义函数. VBScript中的注释语句用“∥”引导. JavaScript中的注释语句可用“∥”引导61、动态HTML的核心是（）. DOM. Script. SS. XML62、与CSS和DHTML相比，XML侧重于（）. Web页的继承性和表现.组织和查找数据.网页的创建. Web页内容的动态表现63、解释执行JavaScript的是( ).服务器.编辑器.浏览器.编译器64、“利用各种网页制作技术把客户的书面材料和相关图形有机地集成在一起”是下列哪一个国际专业流程的功.页面布局和导航.图像制作.内容流程.综合内容65、Internet上使用的最重要的两个协议是( ). TCP和Telnet. TCP和IP. TCP和SMTP. IP和Telnet66、下列描述错误的是( ). DHTML是HTML基础上发展的一门语言.根据处理用户操作位置的不同，HTML主要分为两大类：服务器端动态页面和客户端动态页面.客户端的DHTML技术包括HTML4.0、CSS、DOM和脚本语言. HTML侧重于Web的内容的动态表现67、使用FrontPage时，如果要检查网页的超链接是否正确有效，可以使用( ).网页视图.超链接视图.报表视图.导航视图68、嵌入多媒体标记中的loop属性是用来设置播放次数的，若要无限制地播放，属性值应设为（）. 0. true. no. -169、body元素用于背景颜色的属性是（）. alink. vlink. bgcolor. background70、HTML中，表示符号“>”的方法是（）. &SPACE. >. &. \71、HTML中字体大小的级别有（）. 3级. 5级. 7级. 9级72、与上网无关的协议是（）. HTTP. SMTP. SOKET. POP373、能实现远程管理网站的协议是（）. TCP. FTP. IP. HTTP74、在客户端网页脚本语言中最为通用的是( ). JavaScript. VB. Perl. ASP75、Web安全色所能够显示的颜色种类为( ). 4种. 16种. 216种. 256种76、在网站设计中所有的站点结构都可以归结为( ) .两级结构.三级结构.四级结构.五级结构77、IP地址在概念上被分为( ).二个层次.三个层次.四个层次.五个层次78、在域名系统中，域名采用( ). E. 树型命名机制. F. 星型命名机制.层次型命名机制.网状型命名机制79、目前在Internet上应用最为广泛的服务是( ). A. FTP服务. B. WWW服务. C. Telnet服务. D. Gopher服务80、关于标记〈title〉的说法正确的是（）.〈title〉是标题标记，它只能出现在文件体中即〈body〉〈/body〉之间.〈title〉是标题标记，格式为：〈title〉文件标题〈/title〉.〈title〉和〈TITLE〉是一样的，不区分大小写.〈title〉和〈TITLE〉是不一样的，〈TITLE〉根本不存在. "E：Title的长度没有限制，但过长的标题会导致折行，一般长度不应超过64个字符"81、符合XML文档规则的是（）.文档的第一行必须是XML文档说明.文档必须包含至少一个元素.每个开始标记必须和结束标记配套使用.文档中必须包含唯一的打开和关闭标记.各个标记之间可以交叉定义82、CSS文本属性中，文本对齐属性的取值有（）. auto. justify. center. right. left83、关于JavaScript和Java的说法正确的是（）. Java是面向对象的语言，JavaScript是脚本语言. Java的源代码先编译，再传到客户端。