网页制作基础教程
网页制作教程
华南师范大学本科生计算机系列培训-网页制作基础
•Dreamweaver
华南师范大学本科生计算机系列培训-网页制作基础
网页美化工具
• Flash
– Macromedia公司开发的矢量图形编辑和动画创作的专业软件， 它是一种交互式动画设计工具，用它可以将音乐、声效、动 画以及富有新意的界面融合在一起，以制作出高品质的网页 动态效果。
华南师范大学教育信息技术中心 主讲 郭锂
HTML文件的结构
华南师范大学本科生计算机系列培训-网页制作基础
• <HTML> • <HEAD> 文件头 <title>, <base>, <link>, <isindex>, <meta> • </HEAD> 文件头结束 • <BODY> HTML 文件的正文写在这里... ... • </BODY> • </HTML>
华南师范大学教育信息技术中心 主讲 郭锂
华南师范大学本科生计算机系列培训-网页制作基础
第一课 网页制作初识
• • • • 网页与WWW 网页制作工具 网页美化工具 制作第一个网页
华南师范大学教育信息技术中心 主讲 郭锂
• • • •
华南师范大学教育信息技术中心 主讲 郭锂
华南师范大学本科生计算机系列培训-网页制作基础
• 插入图形
图 形
– 只能在页面上使用扩展名为JPEG和GIF(支持动画)的图形文件，如 果为其他格式Frontpage会自动转换。 – 插入/图片 命令可以完成图片的插入。图片可自己选择、使用剪贴 画或来源于网上。 – 保存网页时，需要将该图片复制到网站目录下，否则网页上传到网 上后会因文件地址不正确显示不出图片。 – – – – 图形格式的设置（ 示例：tuxin.htm ） 改变大小 对齐方式 特殊效果
网页设计与制作——Dreamweaver CS5标准教程第1章 网页设计基础
1.2.1色彩
1.2网页设计知识
1.认识色彩 任何色彩都具有色相、明度和纯度三种属性。 色相是色彩的名称，是一个色彩区别与另一个色彩
的主要因素。 明度也称为亮度，表示了色彩的明暗程度，明度越
大，色彩越亮。 纯度是指色彩的鲜艳程度或饱和度。色彩纯度越高
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识 网站logo，将网站logo置于页面比较醒目的位置，如左
上角。 2. 网站banner 网站banner一般位于页面的顶部，即可以表达和突出网
站创意和形象，也可以传达某种特定信息。 网络banner通常是由GIF动画、JPEG图像或Flash动画完
Language，超文本标记语言） XHTML（eXtensible Hyper Text Markup
Language，可扩展的超文本标记语言）是 HTML的升级版本。
1.3网页标准化技术
1.3.2 CSS样式
CSS（Cascading Style Sheets，层叠样式表）是由W3C 指定和发布的，用于描述网页元素格式的一组规则， 其作用是设置HTML和XHTML语言编写的结构化文档外 观。
1.3网页标准化技术
网页由三部分组成：结构（Structure）、表 现（Presentation）和行为（Behavior），相 应的技术标准由3个部分组成：结构化标准语 言，CSS样式表和脚本语言。
1.3网页标准化技术
1.3.1 结构化语言 结构化语言HTML（Hyper Text Markup
名，表达为如下形式： 协议名://服务器的IP地址或域名/路径/文件名 /s2012/shicha URL地址，或Web地址，或网址，它可以是本地磁盘
机工社网页设计与制作教程(HTML+CSS+JavaScript)第3版教学课件第1章 网页设计与
网页内容 </body> </html>
1.3.3 HTML5编码规范
页面的HTML代码书写必须符合HTML规范。 1．HTML书写规范 2．标签的规范 3．属性的规范 4．元素的嵌套 5．代码的缩进
1.4 编辑HTML文件
1.4.1 常见的网页编辑工具 1.4.2 HTML文件的创建
1.2 Web前端开发技术简介
1.2.1 HTML5简介 1.2.2 CSS3简介 1.2.3 JavaScript简介
1.2.1 HTML5简介
HTML是HyperText Markup Language（超文本标记语言）的缩 写，是构成Web页面、表示Web页面的符号标签语言。通过HTML， 将所需表达的信息按某种规则写成HTML文件，再通过专用的浏览 器来识别，并将这些HTML文件翻译成可以识别的信息，这就是网 页。
JavaScript的开发环境很简单，不需要Java编译器，而是直接 运行在浏览器中，JavaScript通过嵌入或调入到HTML文件中实现其 功能。
1.3 HTML5的基本结构和编码规范
1.3.1 HTML5语法结构 1.3.2 HTML5文档结构 1.3.3 HTML5编码规范
1.3.1 HTML5语法结构
1.1 网页与网站的概念
1.1 网页与网站的概念
网页（Web Page）是存放在Web服务器上供客户端用户浏览 的文件，可以在Internet上传输。
根据侧重点的不同，网站（Web Site，也称站点）被定义为已 注册的域名、主页或Web服务器。网站由域名（也就是网站地址） 和网站空间构成。网站是一系列网页的组合，这些网页拥有相同或 相似的属性并通过各种链接相关联。所谓相同或相似的属性，就是 拥有相同的实现目的、相似的设计或共同描述相关的主导体。通过 浏览器，可以实现网页的跳转，从而浏览整个网站。
Dreamweaver CS3网页制作基础教程第8章习题答案
Dreamweaver CS3网页制作基础教程第8章习题答案dreamweavercs3网页制作基础教程第8章习题答案第8章使用css样式控制网页外观一、填空题1、（）就是“cascadingstylesheet”的简写，可译为“层叠样式表”或“级联样式表”。
恰当答案：css2、在dreamweaver中，根据选择器的不同类型，css样式被划分为3大类，即（）、标签和高级。
正确答案：类3、css样式表文件的拓展名叫“（）”。
恰当答案：.css4、设置活动超级链接的css选择器是（）。
恰当答案：a:active5、应用领域（），网页元素将依照定义的样式表明，从而统一了整个网站的风格。
恰当答案：css样式表二、选择题1、在【新建css规则】对话框的【选择器类型】单选按钮组中，挑选【类（可以应用于任何标签）】则表示（）。
a、用户自定义的css样式，可以应用领域至网页中的任何标签上，b、对现有的html标签进行重新定义，当创建或改变该样式时，所有应用了该样式的格式都会自动更新c、对某些标签女团或者就是所含特定id属性的标签展开再次定义样式d、以上观点都不对恰当答案：a2、在【新建css规则】对话框的【选择器类型】单选按钮组中，选择【标签（重新定义特定标签的外观）】表示（）。
a、用户自定义的css样式，可以应用到网页中的任何标签上，b、对现有的html标签展开再次定义，当建立或发生改变该样式时，所有应用领域了该样式的格式都会自动更新c、对某些标签组合或者是含有特定id属性的标签进行重新定义样式d、以上说法都不对恰当答案：b3、在【新建css规则】对话框的【选择器类型】单选按钮组中，选择【高级（id、伪类选择器等）】表示（）。
a、用户自定义的css样式，可以应用领域至网页中的任何标签上，b、对现有的html标签进行重新定义，当创建或改变该样式时，所有应用了该样式的格式都会自动更新c、对某些标签女团或者就是所含特定id属性的标签展开再次定义样式d、以上观点都不对恰当答案：c4、下面属于类选择器的是（）。
【培训课件】网页设计与制作教程
Photoshop Coreldreaw FreeHand 3、动画制作软件
Flash
（三）Internet概述
1、Internet的概念
2、 Internet的起源
3、IP地址和域名
连接在Internet上的电脑，都叫做主机， 每台主机都有一个唯一的号码，这便是IP地址。
商业 com
军事 mil
教育 edu
网络机构 政府机构
net
gov
非赢利组织 org
四、连接Internet的方式
• 1、拨号连接 • 2、ISDN接入（一线通） • 传输速率：64Kbps或128Kbps • 3、企业级用户的接入技术 • 4、其他的用户级接入技术 • Cable Modem、WebTV、
二、初步认识 Dreamweaver
1、 Dreamweaver的启动 Dreamweaver的安装过程非常简单，一但
成功安装后，就可以在开始菜单找到 Dreamweaver的选项：
二、初步认识 Dreamweaver
2、编辑窗口 第一次启动Dreamweaver，首先看到的是
： 面板组（又D称工r可e具停a栏m靠浮：w动是e主面aDv板菜reea）单mr：的：wDe在编areva这em辑r4里w的e窗可a新ve以口r增还找功有到能很编多辑很窗多口其的他的的浮绝动大面部板分，功我能们可以根
完成后，回到站点窗口，就可以看到如下类似的画面：
三、制作前的准备工作——定义网站
三、制作前的准备工作——定义网站
• 可以看到，“我的网站”的名称已经出现在站点
窗口了，因为是新建的一个站点，所在在本地目录看 到的一片空白。
网页设计与制作PPT图文教程
10 /37
FTP
文件传输
登陆ftp://210.45.160.13 打开“网页制作软件”文件夹 下载安装Dreamweaver 8.0
11 /37
Telnet
远程登录 操作方法:
• 单击”开始”菜单----”运行” • 输入“ Telnet ”
30 /37
上机作业
实验一 制作带有文本、图像和超链接等标 记的页面 要求：
• • • • 上机课须带教材 上机座位固定 遵守机房纪律 遵守上机纪律
31 /37
课后作业
1. 解释下列名词：网络、万维网、HTTP、FTP、域 名。 2. WWW的结构是怎样的？ 3. 一个完整的URL结构是什么？举出几个URL的例 子。 4. 如何设置IE的起始页？如何更改IE临时文件夹的 空间大小？ 5. 描述网站建设的具体步骤。 6. 网页设计应遵循哪些原则？ 7. 常见的网页布局类型有哪些？
电子邮件
Internet简介
计算机网络：是指通过网络设备把在地理上 分布于不同地点的多个计算机系统连接起来， 用来实现信息交换、资源共享和协同工作等 功能的系统。 Internet：是全球最大的、开放的、由众多网 络互联而成的计算机互连网，又称“因特 网”。
5 /37
Internet简介（续）
Internet的起源和发展 Internet的功能和应用
• •
14 /37
WWW工作原理
客户机、服务器、 HTTP(超文本传输协议)
15 /37
URL
统一资源定位器 传输协议://主机名[端口标识]/路径/文件名 举例：
• http://210.45.160.37 (IP地址) • (域名地址)
HTML5+CSS3网页设计基础教程第17章 网页布局
HTML5+CSS3网页设计基础教程
第17章 网页布局
第18页
17.3.2 设置元素的显示顺序
使用弹性盒布局时，可以通过order属性来改变各 元素的显示顺序。可以在每个元素的样式中加入 order属性，该属性使用一个整数值表示，浏览器 在显示元素的时候根据数值按从小到大排列。 【例17-9】设置元素的显示顺序。
HTML5+CSS3网页设计基础教程
第17章 网页布局
第27页
17.4.2 justify-content属性
指定如何布局容器中除了子元素之外的mainaxis轴方向上的剩余空白部分。当flex-grow属性 值不为0时，各子元素在main-axis轴方向自动填 满容器，所以justify-content属性值无效。属性 取值：
设置列宽和列数 设置列间距 设置列边框 设置跨列标题 统一列高
HTML5+CSS3网页设计基础教程
第17章 网页布局
第5页
17.1.1 设置列宽和列数
column-width子属性用于给列定义一个最小的宽度。默 认值为auto，表示将根据column-count子属性指定的数 目计算列宽。column-count子属性用于指定文本显示的 列数。 实际应用中，通常将这两个参数放在columns中一起指定。 例如，columns: auto 4;就是图17-1所示的4栏效果，这 行代码将div中的内容分成4列显示，根据div的宽度 640px，均分列宽为160px（包括列间距的宽度）。
HTML5+CSS3网页设计基础教程
第17章 网页布局
第15页
主要内容
17.1 17.2 17.3 17.4 17.5 多栏布局 盒布局 弹性盒布局 弹性盒布局的布局原理 本章小结
网页制作教程教案ppt
盒模型与布局
盒模型
每个HTML元素都可以看作是一个盒子，由内容、内边 距、边框和外边距组成。
布局方式
包括块级元素和行内元素，以及常见的布局方式如浮动 布局、定位布局和弹性布局等。
CSS动画与过渡效果
CSS动画
通过关键帧定义动画效果，可以实现元素的移动、变形等效果。
CSS过渡效果
获取元素
使用getElementById、getElementsByClassName、 getElementsByTagName等方法获取DOM元素。
修改元素
通过JavaScript修改元素的属性、内容和样式。
事件处理
了解事件类型，如click、mouseover、keydown等，并学习如何为 元素添加事件监听器。
在元素状态改变时，通过过渡效果实现平滑的视觉效果。
04
网页布局与响应式设计
固定布局与流式布局
固定布局
网页的宽度被固定，浏览器窗口变化 时，网页的宽度不会改变，但高度可 能会变化。
流式布局
网页的宽度按照浏览器窗口的大小进 行自动调整，但每行显示的内容数量 保持不变。
CSS Flexbox布局
特点
变量
使用var、let或const声明 变量，并了解变量的作用 域。
运算符
包括算术运算符、比较运 算符、逻辑运算符等。
条件语句
使用if...else、switch等语 句进行条件判断。
循环语句
使用for、while、 do...while等语句进行循环 操作。
DOM操作与事件处理
DOM结构
了解HTML文档的DOM结构，以及如何通过JavaScript访问和修改 DOM元素。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页制作基础教程第一章网页制作基础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、启动：开始——程序——Macromediadreamweaver 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。
改变图像的填充颜色（单色，渐变，透明度，8。
导入位图：文件——导入——导入到库9。
填充位图：拖动中心控制点，倾斜控制点，旋转控制点，大小控制点；10。
导入图像和声音素材：文件——导入——导入到舞台（可选择图片或声音）11。
填充变形：填充变形工具可以对渐变色彩进行变形调整，第三课：制作动画1、导入视频：文件——导入——导入视频2、绘制边框：绘制矩形，然后将直线加粗，3、创建图形元件：修改——转换元件4、创建影片元件：修改——转换成元件（按钮动画，影片剪切）5。
创建按钮元件：6。
将视频文件转换成FLV格式文件，文件——导出7。
制作基本动画：小船划动效果8、创建引导线动画；9、制作遮罩动画与多层动画；第四课：使用FLASH脚本1、动作面板：窗口——动作（F9）2、脚本工具箱：存放着所有的脚本工具，单击各类型的脚本名称即可展开相应的控制语句；3、脚本导航器：中显示当前正在添加脚本的对象，及文档中已经添加脚本控制语句的所有对象，4、脚本助手，在脚本助手中总是显示当前选中脚本的脚本功能描述及参数输入提示，脚本助手为具有标准语法结构脚本的输入带来了极大的方便；5、脚本编辑区：在脚本助手启用的模式下，不能在该区中直接修改脚本的参数，也不能直接向其中输入脚本，只能通过脚本工具箱添加脚本。
练习待续Fireworks 8 教程第一课基本操作1。
启动，退出，关闭，新建，打开，保存，关闭2、窗口的组成：菜单栏，工具栏，开始页，属性面板，面板集等；3、新建文档：宽度，高度，分辨率，画布颜色等设置4、画布大小（修改——画布——画布大小）5、组合路径：打孔，联合，交集，裁切；6、选取工具：魔术棒，椭圆选取工具，套索工具，多边形套索工具，动画制作等，练习。