第01章 网页制作基础
网页制作基础
常见网站由域名（domain name 俗称网址或 域名）、网站源程序和网站空间三部分构成。
域名俗称网址； 网站源程序则放在网站空间里面，表现为网站前 台和网站后台； 网站空间由专门的独立服务器或租用的虚拟主机 承担。
2. 网站分类
根据网站所用编程语言分类：例如asp网站、 php网站、jsp网站、Asp. net网站等； 根据网站的用途分类：例如门户网站（综合网 站）、行业网站、娱乐网站等； 根据网站的功能分类：例如单一网站（企业网 站）、多功能网站（网络商城）等；
常见的Web浏览器软件有：IE、Firefox、 Opera和Netcape等。 不同Web浏览器软件所支持的网页格式有所区 别，所以WWW服务器提供网页信息时，要考虑客 户端软件的支持情况。
1.2.4 W3C
W3C是英文 World Wide Web Consortium 的缩写，中文意思是W3C理事会或万维网联盟。 W3C于1994年10月在麻省理工学院计算机科学实 验室成立。创建者是万维网的发明者Tim BernersLee。 W3C组织是对网络标准制定的一个非赢利组织， 像HTML、XHTML、CSS、XML的标准就是由 W3C来定制。
HTML是一种规范，一种标准，它通过标记符 号来标记要显示的网页中的各个部分。网页文件本 身是一种文本文件，通过在文本文件中添加标记符， 可以告诉浏览器如何显示其中的内容（如：文字如 何处理，画面如何安排，图片如何显示等）。
浏览器按顺序阅读网页文件，然后根据标记符 解释和显示其标记的内容，对书写出错的标记将不 指出其错误，且不停止其解释执行过程，编制者只 能通过显示效果来分析出错原因和出错部位。但需 要注意的是，对于不同的浏览器，对同一标记符可 能会有不完全相同的解释，因而可能会有不同的显 示效果。
第1章 网页制作基础汇总
1.1.2 网页的基本构成元素
4. 表格 表格可以有效的控制页面内容的位置，可以用来控制页面的布局， 也可以控制页面排版。 5. 表单 表单本身并不显示，用来容纳表单控件，如文本框，按钮等等。用 户在表单控件内输入信息后，可以提交到网站。网站服务器端要有相应 的程序来接收用户信息。 6. Flash动画 和 GIF 动画不同， GIF 动画只是多帧的图像。 Flash动画是真正的矢 量动画，能支持缩放、能播放声音、实现在线视频，还能通过脚本机制 和用户交互，响应用户的操作。现在有不少专业制作Flash的网站。 7. 多媒体 多媒体不是各种信息媒体的简单复合，它是把文本、图形、图像、 动画、声音、视频等多种信息类型的综合，能支持完成一系列的交互式计与制作
8
1.2 IIS安装配置
1.2.1 IIS的安装
1.2.2 设置站点根目录
1.2.3 在IIS中新建虚拟目录 1.2.4 快速设置虚拟目录
2019/3/1
网页设计与制作
9
1.2.1 IIS的安装
Windows系统的网站服务器是IIS（Internet Information Service）， 可以支持静态页面，也可支持 ASP ， 等动态页面的开发。 IIS中包括了多种网络附件： Web服务器：也称为WWW(WORLD WIDE WEB)服务器，主要 功能是提供网上信息浏览服务。 FTP服务器： FTP全称File Transfer Protocol，即文件传输， 支持 FTP协议的服务器就是FTP服务器 NNTP服务器：NNTP全称Network News Transport Protocol，即 网 络 新 闻 传输 （ 俗 称 “ 帖 子 ” ） ， 支 持 NNTP 协 议 的 服 务器 就 是 NNTP服务器。 STMP服务器：STMP全称Simple Mail Transfer Protocol，即邮件 传输，支持STMP协议的服务器就是STMP服务器。
第一章网页制作基础
Page
23
1.2.3 其他网页制作相关技术（续）
使用 DHTML 技术，可使网页设计者创建出能够与用 户交互并包含动态内容的页面。实际上，DHTML 使 网页设计者可以动态操纵网页上的所有元素——甚至 是在这些页面被装载以后。利用 DHTML，网页设计 者可以动态地隐藏或显示内容、修改样式定义、激活 元素以及为元素定位等。 DHTML 技术是一种非常实用的网页设计技术，目前 早已广泛地应用到了各类大大小小的网站中，成为高 水平网页必不可少的组成部分。
Page
31
1.3.2 素材处理工具（续）
媒体处理软件主要有 Flash、音频处理软件和视 频处理软件等。
Flash 是目前最流行的一种 Web 矢量动画软件， Flash 图形是压缩的矢量图形，采用了网络流式媒体技 术，可以在网上迅速传输；同时由于矢量图形不会因 为缩放而导致影像失真，因此在 Web 上有广泛的应用。 常用的音频处理软件有 Audition、GoldWave 等，常 用的视频处理软件有 Premiere、AfterEffect等。
从网络通信技术的角度看，Internet 是一个以 TCP/IP 网络协议连接各个国家、各个地区、各 个机构的计算机网络的数据通信网。 从信息资源的角度看，Internet 是一个集各个部 门、各个领域的各种信息资源为一体，供网上用 户共享的信息资源网。
Page
4
1.1.1 Internet 与 www ( 续 )
CSS（Cascading Style Sheet，层叠样式表）技 术是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设臵网 页格式。
Page 20
1.2.2例
网页制作基础教程
第一章网页制作基础1、什么是网页一般浏览器中打开的都是网页，这些文档是通过超文本标记语言HTML表示出来的；主页：在网站中默认打开的页面称为主页，也叫首页，主页是进入网站的门户，网页中包括的内容：文本，图像，超级链接，表格，表单，多媒体及一些特殊的效果2、网站及运作原理网站是在互联网上一个固定的面向全世界发布消息的地方，它由网站地址和网站空间构成；网站开发者常常将网站称作为站点，在网站的开发者来说，网站就是在计算机上创建的一个多级的文件夹，并在各文件夹中保存着相关网页文件。
根据站点文件夹所在的位置分为：本地站点和远程站点；根据服务技术分：静态网站和动态网站3、了解HTML语言HTML是网上用于编写网页的主要语言，使用HTML语言编写的网页文件也是一个标准的纯文本文件，可以使用文本编辑器将它打开，但是该纯文本文件如果使用浏览器打开就会看到排版整齐的网页；4、HTML语言标签HTML标签用来标记网页元素，以形成文本布局，文字的格式及五彩缤纷的画面，HTML 的标签分单标签和成对标签两种基础标签：<html></html> <head></head> <body></body>5、常用动态建站技术ASP是由微软开发的动态网页技术标准，其原理通过在HTML页面中加入VB JA V A代码，服务器在返回网页之前首先执行这些代码，产生最终的结果。
6、网站的制作流程及制作工具初期规划：建站之前，要有明确目的，要明白建立网站的目的，接受对象是哪些群体，要为访问者提供怎样的服务，然后对整个网站进行策划，中期制作：搭建本地站点，建立文件夹，建立站点结构图，设置页面属性等；后期工作：全面测试，上传后进行实地测试，完成本地测试后，再上传到服务器，以便进行远程测试；7、网页设计工具Dreamweaver 8 是最常用的网页编辑工具之一，使用该工具可以在其提供的三种视图中进行网页编辑与修改；图像处理工具Firework 8主要用来对网页中用到的图像素材进行制作或处理，它可以快速地制作和处理网页中图像，动画制作工具：FLASH 8 主要用来制作一些精彩的小动画，可以使页面变得更加精美，该软件是目前最流行的，矢量的，具有交互性的图形编辑软件；第二课创建站点1、启动：开始——程序——Macromedia dreamweaver 8（双击桌面的图标）2、关闭：文件——退出，关闭按钮3、窗口的组成：标题栏（软件名称，版本号，文件名，最小化，最大化，关闭按钮）菜单栏：由文件，编辑，查看，插入，修改，文本，站点，窗口等主菜单组成；插入栏：位于菜单栏下方，有网页制作时常用的元素及命令，如常用，布局等开始页：打开软件时的页面，该页面位于屏幕中间的大部分区域；属性面板：一般位于窗口的底部，显示文档，网页元素及相关工具的属性；面板集：位于窗口右侧，可以快速展开或折叠一些功能面板，4、创建站点：站点——新建站点——站点名称——否（不用服务器）——建立一个本地文件夹——如何连接远程服务器（无）——完成；5、编辑站点，复制站点，删除站点，导出站点，导入站点，完成按钮；6、管理站点中的文件：站点的名称，远程文件管理器，站点文件结构——弹出菜单——视图菜单8、文档的新建，保存，打开及属性设置9、设置页面属性：修改——页面属性（页面字体，大小，文本颜色，背景颜色，背景图像，页边距，跟踪图像）第三课：制作网页1、在网页中插入文本（直接输入文本即可）（换行：ENTER，按SHIFT+ENTER可得到较小的行距；2、设置字体，大小，字形，颜色，对齐方式3、在网页中插入图像：插入——图像（图像的大小，对齐方式，边距等设置）4、插入——层（在层中插入图像，可将图像到处拖动）5、在网页中插入鼠标经过图像：插入——图像对象——鼠标经过图像（原始图像，鼠标经过时的图像）6、插入特殊的符号，版权，注册商标等；插入——文本——版权，注册商标，符号等7、插入多媒体文件；插入——媒体——FLASH（选择插入的文件）8、设置动画的大小及其边距（属性面板：宽，高，垂直，水平的间距）9、插入——布局对象——层（设置背景图像，大小，方向等设置）10．向网页中插入链接：选择文本——在图像中选择链接的文件；11．创建外部链接：在文档中输入网名，选择名称：引用链接网址12．创建锚记：先命名锚记——然后再选择要引用锚记的文字，然后进行链接OK（引用时加#）13．在网页中插入视频：插入——媒体——插件（选择视频文件14．创建邮件链接：选择图像——链接邮箱地址15．创建下载链接：选择文本或图像——链接文件（ZIP RAR EXE）等文件第四课页面布局1、插入——表格（行数，列数）2．表格的宽度，3．边框粗细；4．单元格边距；5．单元格间距；6．合并所选单元格，拆分单元格，背景，背景颜色，边框；7．表格布局；插入——表格（在单元格内插入表格（做嵌套表格）8．改变列宽，行高9．网页的布局：插入——布局对象——层（可以创建多个层，如同文本框的设置）10．设置层的属性：宽度，高度，单击插入图像的层选择手柄，在属性面板中11．布局网页框架：创建布局表格，创建布局单元格，做嵌套布局表格；12．将布局转换成表格：修改——转换——表格到层（防止层重叠，显示层面板，显示靠齐到网格）13．框架布局与样式定义：插入——框架（选择框架布局形式）14．制作背景固定网页：定义样式第五课CSS样式与行为1、光晕效果的应用CSS面板——添加滤镱设置（名称，（GLOW（color=?,strength=?）设置(color=red,strength=3)2、添加行为：行为面板（添加行为，删除行为，执行顺序）3．设置触发行为的事件：事件，动作4．记录移动路径5、添加时间轴行为：6、制作表单元素；第六课，表单与模板、1、制作注册页面2、创建网站模板；3、将网页保存为模板：文件——另存为模板4、创建可编辑区域：插入——模板对象——可编辑区域；5、网页模板的应用，打开后修改——然后另存为其它网页文件；6、分离模板：修改——模板——套用模板到页（修改——模板——从模板中分离）第七课：FLASH的操作1、启动：双击桌面图标，2、退出：关闭按钮；3、窗口的组成：标题栏，菜单栏，编辑栏，工具箱，面板集，舞台，属性面板；4、标题栏：它位于整个窗口的最上方，最小化，最大化，关闭按钮等；5、菜单栏：由文件，编辑，视图，插入，修改，文本，命令等6、工具栏：位于整个软件的左侧，分为，工具，查看，颜色和选项四个选项；绘制卡通房子的练习；第二课工具的使用1、直线工具；按SHIFT水平或垂直直线，粗细，端点（尖角，圆角，斜角）2、钢笔工具：是通过路径来绘制笔触图形的，按CTRL或双击曲线外时，可结束绘图；3、任意变形：旋转，倾斜，缩放，扭曲，封套模式等；4、输入文本：文本类型，字体，字号，字体样式，对齐方式；5、添加滤镜效果：选择对象或文本——属性栏中找到滤镜类型；（删除滤镜）6、美化图形——设置颜色7。
第1章 网页制作基础汇总
2020/10/5
网页设计与制作
10
1.2.1 IIS的安装
1. 打开控制面板，可以通过开始菜单打开，也可以在 管理器左侧“我的电脑”下找到“控制面板”打开。
</head>
<body> 正文
</body>
</html> <html>标签是一个HTML文件的起始标签；<head>是HTML文
件的头部，包含了文档标题、样式、编码等控制信息，这些内容在页 面中虽然不显示，但对页面起重要作用；<body>标签开始了文档正文 部分。类似</html>带斜线的标签是对应的结束标签。
2020/1构成元素
1. 文本
网页中的信息主要以文本为主。在网页中可以通过字体、大小、 颜色、底纹、边框等选项修饰文本。这里指的文字并不包括图像中 的文字，那是图形化了文字。
2. 图像
图像在网页中起着重要作用，可以丰富网页的内容，增强网页 的美感和表现力。网络上最流行的图像格式有JPEG和GIF两种。 其中，JPEG格式使用24位真彩色，适合用于照片图像；GIF格式 使用8位颜色，只能支持256色，但体积很小，并能制作GIF动画。
第一章 网页制作基础
本章内容
1.1 网页设计制作概述 1.2 IIS安装配置 1.3 Dreamweaver CS4介绍
2020/10/5
网页设计与制作
2
1.1 网页设计制作概述
网页也称为Web页或网页文件，它是由超文本标记语言（HTML） 的文件格式来构造的，其中包含了文本、图像、动画、声音等等元素。 网页是全球广域网上的基本文档，可以是站点的一部分，也可以独立 存在，采用超级链接的方式将他们组织在一起。
第1章网页制作基础知识
1.1.1 网页的定义和分类
• 1．按位置分类 • 按网页在网站中的位置可将其分为主页和 内页，主页是指网站的主要导航页面，一 般是进入网站时打开的第一个页面，也称 为首页；内页是指与主页相链接的页面， 也就是网站的内部页面。 • 一些网站的首页并非主页，其作用只是为 了欢迎访问者或者引导访问者进入主页， 所以首页并不一定就是主页。
1.2.1 启动与退出Dreamweaver CS5
• 启动Dreamweaver CS5进入软件界面，如下图所 示。
• 若要退出Dreamweaver CS5程序，可以在菜单栏 中选择“开始”→“退出”命令，或者使用 Ctrl+Q组合键。
1.2.2 Dreamweaver CS5的主界面 • 启动Dreamweaver CS5软件，在软件主界 面中首先显示一个起始页，在这个页面中 包括“打开最近的项目”、“新建”和 “主要功能”3个方便实用的项目栏，很多 项目在初学时经常会用到，建议大家保留。 在熟练之后可以在窗口底部选中“不再显 示”复选框来隐藏它，如下图所示。 • 我们可以用新建或打开一个网页的方式进 入Dreamweaver CS5的标准工作界面，如 下图所示。
1.2 Dreamweaver CS5概述
• 随着互联网的迅猛发展，越来越多的人想在网上构建属于 自己的“家”。但以往由于创建网页需要较高的技术支持， 导致大多数人的梦想无法实现。后来，越来越多的专业性 网页设计软件开始进入人们的视野，在诸多的“所见即所 得”的网页设计软件中，Dreamweaver无疑是使用最广泛， 也是最优秀的一款软件。 • Macromedia公司推出的Dreamweaver系列软件经过几代 的发展，最新的版本是Dreamweaver CS5。 Dreamweaver CS5一经推出，就以其强大的网页设计功 能吸引了所有人的眼光，得到用户的广泛好评。下面将详 细介绍Dreamweaver CS5的安装、修复及其启动与退出。
第一章网页制作基础
动态网页 .asp、.jsp、 .php 在动态网页网址中有一个标志性的符号“?” /jsj/list.php?catid=57
23
(1)与网页上的各种动画、滚动字幕等视觉上的“动
态效果”没有直接关系，动态网页以数据库技术为
基础。
(2) 可以实现更多的功能，如用户注册、用户登录、
6
INTERNET上提供有各种服务，供上网的用户 使用，它们包括：
WWW（网页浏览服务）
EMAIL(电子邮件服务)
FTP(文件传输服务)
在线聊天
网上购物 网络炒股 网上交费
7
1.1.2 WWW
WWW（World Wide Web，译为“万维网”）是
INTERNET提供的服务之一，用户可以利用WWW
不仅可以减小网页的规模和提高网页浏览速度，
而且可以丰富网页的表现，如动画、声音等。比 如VBScript、JavaScript。如农大主页浮动窗口。
19
其他元素
表格、导航栏、表单（表单是网页中站点服
务器处理的一组数据输入域，当访问者单击按钮
或图形来提交表单后，数据就会传送到服务器上，
从而完网页的交互功能）等。比如邮箱登陆。
Corel DRAW, Animator等等。
27
PHOTOSHOP /FIREWORKS
DREAMWEAVER (HTML,DHTML, JAVASCRIPT,XML)
FLASH
网站》浏览器》客户端
数据库
ASP/JSP/PHP
图1.3 网页开发流程
28
29
3.网站开发流程
规划阶段
设计阶段
31
① 层状结构 层状结构（如图1.4所示）类似于目录系 统的树型结构，由网站文件的主页开始，依 次划分为一级标题、二级标题等等，逐级细 化，直至提供给浏览者具体信息。
《网页设计与制作》第一章网页制作基础
块级元素与行内元素
浮动布局
浮动布局是一种常用的网页布局技术，通过设置元素的 `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`。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Dreamweaver 8，Photoshop CS2，Flash 8 8， CS2， 网页制作实用教程
1.2.5 网页制作的流程
在制作网页的过程中，要遵循一定的顺序才能协调分配整个制作过程的 资源与进度。网页的设计制作步骤按先后顺序可以为规划和设计网站、收集与 加工网页制作素材、编辑网页内容、测试并发布网页几个部分。
Dreamweaver 8，Photoshop CS2，Flash 8 8， CS2， 网页制作实用教程
第01章 网页制作基础 01章
拥有一个精美的个人网页并通过它来展示自己的个性、与其他好友互相交 流以及发布信息是很多人的愿望。而要制作出一个吸引人的优秀网站，就必须 了解网页制作的基础知识，如网页的基本构成元素、网页设计构思以及网页布 局的选择等。
Dreamweaver 8，Photoshop CS2，Flash 8 8， CS2， 网页制作实用教程
1.2.4 网页的布局
在网页布局过程中，应该遵循的原则有对称平衡、异常平衡、对比、凝 视和空白等。一般来说，网页的布局有下面几种常见的结构。 π型结构布局 T型结构布局 “三”型结构布局 三”型结构布局 对比结构布局 POP结构布局 POP结构布局 Flash结构布局 Flash结构布局
1.2.2 网页的基本构成元素
网页是由一些基本元素组成的，通常包括文本、图像、超级链接、表格、 表单、导航条、GIF动画以及Flash动画等。下面介绍这些构成网页的基本元素。 表单、导航条、GIF动画以及Flash动画等。下面介绍这些构成网页的基本元素。 文本 图像 超级链接 表格 表单 导航栏 GIF动画 GIF动画 Flash动画 Flash动画 声音 视频
Dreamweaver 8，Photoshop CS2，Flash 8 8， CS2， 网页制作实用教程
1.1 教学目标
掌握知识：通过本章的学习，读者应了解网页设计中常用词汇、构成元素、 设计构思以及布局选择等知识。 重点学习：本章重点讲解了免费个人网页空间的申请以及简单网页的制作 方法。课后读者应结合上机实验进行强化练习。
1.2.1 基本知识
在网页制作的过程中，经常会遇到一些专用的名称、英文单词和缩写， 掌握这些词汇的含义对制作网页有很大的帮助。 WWW 浏览器 超级链接 超文本文件 URL HTML语言 HTML语言 Java 网页和主页 网站
Dreamweaver 8，Photoshop CS2，Flash 8 8， CS2， 网页制作实用教程
Dreamweaver 8，Photoshop CS2，Flash 8 8， CS2， 网页制作实用教程
1.2 理论指导
基本知识 网页的基本构成元素 网页的设计构思 网页的布局 网页制作的流程 网页的设计原则
Dreamweaver 8，Photoshop CS2，Flash 8 8， CS2， 网页制作实用教程
Dreamweaver 8，Photoshop CS2，Flash 8 8， CS2， 网页制作实用教程
1.2.6 网页的设计原则
网页的设计不仅涉及各种软件的操作技术，还体现出设计者对生活的理 解和体验。网页设计师真正的意图就是要把适合的信息传达给适合的观众，要 设计一个既美观又实用的网页，就必须要遵循一些必要的原则。 主题内容明确 页面下载速度快 操作使用方便 保证链接无错误 统一技术规范 保证页面的兼容性
Dreamweaver 8，Photoshop CS2，Flash 8 8， CS2， 网页制作实用教程
1.3 上机实验
通过本章的学习了解并掌握了网页制作的基础知识，本章的上机实验主 要练习申请网页空间和制作简单网页的方法，在制作网页的过程中应注意 HTML语言的使用方法。对于本章中的其他内容，可根据理论指导分进行练 HTML语言的使用方法。对于本章中的其他内容，可根据理论指导部分进行练 习。 申请网页空间 制作一个简单网页
Dreamweaver 8，Photoshop CS2，Flash 8 8， CS2， 网页制作实用教程
1.2.3 网页的设计构思
在制作网页时必须掌握网页的设计构思方法。在网页的设计构思中需要 认真考虑网页的主题、网页的命名、色彩搭配和字体等要素。 网页的主题 网页命名 网站的标志 色彩搭配 字体