第01课 网页制作概述
一讲:网页制作基础知识——网页制作

一、网页的基本概念
2、网站的分类
(1)按内容分类
户网站:以新闻信息、娱乐资讯等为主要功能。如搜狐、新浪、网易、雅 虎等。
电子商务网站:主要用于网上交易。如:阿里巴巴、易趣等。
即时通讯网站:用于实时性网上通讯交流。如腾迅QQ、雅虎等。
当用户用域名来访问远程的计算机时,必须由Internet的DNS的名字服务 器(Name Server)将域名翻译成对应的32位IP地址,然后才能完成对远程 的计算机的访问。
一、网页的基本概念
4、虚拟主机 虚拟主机是使用特殊的软、硬件技术把一台服务器主机分成几十个 “虚拟”的服务器主机,每台虚拟主机都具有独立的域名和IP地址 (或共亨的IP地址),具有完整的Internet服务器功能。 虚拟主机之间完全独立,在外界看来,每台虚拟主机和一台独立的 服务器主机完全一样。多台虚拟主机共亨真实主机的资源,这样就 可以把网络的开销费用均摊到每台虚拟主机上。 可利用虚拟主机技术建立个人主页,在大型网站上(提供存放主页 的免费空间,提供免费域名)申请主页空间和域名(免费或收费), 获得成功后,把你制作的网页存放在虚拟主机上,这样你就好象在 Internet上拥有了自己的服务器和网站。
网页设计与制作
网页制作课程内容: 1、网页制作基础知识 2、HTML语言 3、Dreamveaver 4、综合应用(课程实训)
第一讲 网页制作基础知识
在学习网页制作之前,首先应了解一些网页 与网站的基本知识,了解常用的网页制作工 具,熟悉网站开发流程。 本讲要点: 网页的基本概念 网页包括的主要元素 网页制作流程 网页制作工具
一、网页的基本概念
3、IP地址和域名
IP地址:为了使连接在Internet上的计算机能够互相识别并进行通信, 每台连入Internet的计算机必须有个“标识号”Байду номын сангаас这个标识号便是计算 机在Internet中的地址。这个地址是由IP协议进行处理的,故称为计算 机的IP地址。
网页制作入门第1章

了解不同选择器的优先级以及CSS的继承规则。
CSS属性与值
01 常用CSS属性
颜色、背景、字体、文本、边框、边距、填充、 尺寸、定位等。
02 属性值与单位
了解CSS属性值的不同类型,如长度、百分比、 颜色等,以及对应的单位,如px、em、rem、%、 rgb()、hsl()等。
03 简写属性
学习如何使用简写属性来简化代码,如font、 background、margin、padding等。
常用HTML标签
标题标签
<h1>到<h6>,用于定义 不同级别的标题。
段落标签
<p>,用于定义文本段落。
链接标签
<a>,用于创建超链接。
图像标签
<img>,用于插入图像。
列表标签
<ul>、<ol>和<li>,用于 创建无序列表和有序列表。
HTML属性与样式
HTML标签可以拥有属 性,用于提供有关元素 的额外信息或修改元素
媒体查询实现响应式布局
媒体查询语法
使用CSS中的@media规则,结 合设备特性(如宽度、高度、像 素比等)来定义不同设备的样式 。
响应式布局实现
通过媒体查询,针对不同屏幕尺 寸和设备类型,定义不同的CSS 样式,实现布局的自动调整和适 应。
移动端适配策略及技巧
视口设置
在HTML头部设置视口标签,控制页 面在移动设备上的缩放和显示方式。
网页制作入门第1章
目录
• 网页制作概述 • HTML基础 • CSS样式表 • JavaScript脚本语言 • 网页图像与多媒体元素 • 表单元素与交互设计 • 响应式设计与移动端适配
网页设计与制作第一课

不同的网页元素,属性面板的内容也会不同 。
面板组
【操作演示】:工作窗口的设置、保存、恢复 关闭Dreamw本网页的文件类型为HTML文档,保存的文件扩展名为 “.html”
1.创建网页文档(HTML文档)
文件→新建→新建文档→常规→类别→基本页 2.保存指定文件(编辑中的文件如果文件名后面带有“*”号,表示未保存)
在刚建立的站点下操作:
1)新建名为“img”的文件夹
2)新建一个名为“index”的网页 3)复制刚新建的网页,并且重命名为“myhomeweb”
The end,thank you!
其他操作: 1)多个编辑文件的切换选择 2)预览编辑中的网页 (快捷键F12)
【操作演示】:
1.新建一个网页,输入本人的名字,性别,年龄,爱好等内容 2.保存该网页,名字命名为“个人网页”。 3.打开刚保存的网页,删除里面关于年龄的内容, 再次保存。 4.在浏览器中预览。
5.检查无误后,关闭该文档。
五、创建站点
1、什么是站点
Dreamweaver的站点是一种管理网站中所有相关联文件的工具。通 过站点可以对网站的相关页面及各类素材进行统一管理,还可以以使用
站点管理实现将文件上传到网页服务器,测试网站。
站点简单的说就是一个文件夹。在这个文件夹里包含了网站中所有用
到的文件。我们通过这个文件夹(站点),对我们的网站进行管理,有
次序,一目了然。
【操作演示】: 创建站点
1)《我的个人网页》 站点根目录为 D:/myweb 2)设置默认图像文件夹
六、管理站点
1、在“文件”面板中实现以下操作 选择编辑网页文件 创建文件或文件夹
剪切、粘贴、复制、删除、重命名文件或文件夹
网页设计与制作- 第01章_网页设计概述

网页设计与制作
1.1 网页基本概念
– 7.导航栏:导航栏的作用是引导浏览者准确、 方便地查看当前网站的不同内容并在相关页面之 间自由跳转。实际上,导航栏就是一组相对固定 的超链接,链接的目标就是站点中的主要网页。
– 8.表单:网页中的表单类似于Windows程序的 窗体,主要用来将浏览者输入的信息提交给服务 器端程序进行处理。表单是提供交互功能的基本 元素,例如问卷调查、信息查询、用户注册、网 上订购等,都需要通过表单进行客户端信息的收 集工作。
7
网页设计与制作
1.1 网页基本概念
• 例1.1 打开记事本(notepad.exe),输入如
下内容,将文件保存为ep1_1.html,然后双击
ep1_1.html在浏览器中打开并预览。效果如图
所示。
<html> </html>
<head> </head> <body>
</body>
<title>我的HTML网页</title>
– 9.其他常见元素:网页中除了以上几种最基本 的元素之外,还有一些其他的常见元素,包括悬 停按钮、Java特效和ActiveX特效等。这些元素 使网页更加丰富多彩和生动有趣。
15
网页设计与制作
1.2 网页浏览的基本原理
• 1.2.1 WWW服务器工作模式 • 1.客户机和服务器
– Web服务是建立在客户机/应用服务器/数据 库服务器(Client/ Server/ Database Server,C/S/DS)三层结构模型之上的, 在网络环境中,客户机向服务器发出服务请 求,服务器接收并处理客户的请求,最后将 结果返回到客户机。
网页制作PPT第一章

网页设计原则
01
02
03
04
简洁明了
网页设计应简洁明了,避免过 多的装饰和元素,突出核心内
容。
易于导航
网页的导航结构应清晰明了, 方便用户快速找到所需内容。
一致性
保持网页设计的一致性,使用 相同的字体、颜色、布局等,
提高用户体验。
用户体验优先
始终以用户需求为导向,设计 出符合用户习惯和期望的网页
。
边框是围绕内容和内边距的 线。
04
05
外边距是边框与其他元素之 间的空间。
04
网页布局与设计
网页布局
固定布局
整个网页的宽度和高度固定,适 合展示内容较多的网页。
流动布局
网页宽度自适应,高度根据内容多 少而变化,适合展示内容较少的网 页。
响应式布局
根据不同设备的屏幕大小和分辨率, 自动调整网页的布局和样式,确保 在不同设备上都能获得良好的用户 体验。
属性通常位于开始标签中,并且以名称/值对的形式出现,例如`<a href="https://">链接</a>`中的 `href="https://"`就是一个属性。
常见的属性包括`src`(定义元素的来源)、`class`(定义元素的类名)、 `id`(定义元素的唯一标识符)等。
发布与维护
将网页部署到服务器 上,定期更新和维护 网页内容。
02
HTML基础
HTML简介
HTML是HyperText Markup Language的缩写,中文译为超文本 标记语言,是用于创建网页的标准标 记语言。
HTML文档是由HTML元素组成的, 元素是由标签来定义的。
第1课 网页制作

第1课:开始学习1.1 WWW和URL1.1.1 Web的起源Web是World Wide Web(万维网)的简称,一般也称之为WWW 或3W1.1.2 Web的特点和结构Web最大的特点是使用了超文本(Hypertext)WWW采用C/S(客户机/服务器)工作模式在浏览器和服务器之间应用HTTP(Hyper Text TransferProtocol,超文本传输协议)作为网络应用层通信协议1.1.3 URLURL的完整格式协议://主机名或IP地址:端口号/路径名/文件名如:/为Microsoft 网站的万维网URL 地址。
http://172.58.1.3萱花中学vod系统1.2需要哪些工具?网页三剑客Dreamweaver Flash Fireworks1.3HTML能用来做什么?如果你要制作网站的话,学习HTML是不可避免的。
即使你用Dreamweaver等工具来制作网站,了解基本的HTML知识也会令你在网站制作过程中倍感轻松,并有利于制作出更好的网站。
好在HTML容易被学会和使用。
通过下面两课的学习,你将学会如何制作自己的第一个网站。
HTML是用来制作网站的。
就这么简单!好,明白了,那HTML这四个字母代表什么呢?1、H TML定义HTML是“HyperText Mark-up Language(超文本标记语言)”的缩写——其实目前你不必了解这些,不过,为了迁就学习次序,我们就详细解释一下吧。
ØHTML只使用SGML中很小一部分标记ØHTML语言(Hyper Text Markup Language 超文本标记语言)ØHTML是纯文本的语言,其源代码可以用各种文本编辑工具进行编辑,常用的网页制作软件如FrontPage、Dreamweaver 等实际上是自动生成HTML源代码的工具∙超(Hyper)是相对于线性(linear)来说的。
在很久以前,那时计算机程序还是线形运行的:当计算机程序执行完一个动作以后,转向下一行,这行结束后,继续下移,依次类推。
第一章 网页制作概述

1.2.5 页眉和页脚
• 页眉指的是页面顶端的部分, • 大多数网站制作者会再此设置网站宗旨、 宣传口号和广告语等,有的则把他设计成 广告位出租。 • 页眉的风格一般要求和页面的整体风格保 持一致。一个富有个性和特色的页眉将和 网站标志一样起到标识及定义页面主体的 作用 • 站点的名字多数在页眉中。
1.1.3 网页制作相关术语
• 2.统一资源定位器(URL) • 俗称“网址” • 定位器(Locator)的作用就是要指出这些 资源的所在处。 • 3.万维网(WWW) • 是 World Wide Wed(环球信息网)的缩 写,起源于1989年3月。由欧洲粒子物理实 (CERN)所发展出来的主从结构分布式超 媒体系统。
1.1.3 网页制作相关术语
• 9. FTP协议:局域网传输协议 • 10. IP地址: • 32位二进制表示
春顺制作
本节小结
• 网页的基本概念
•
你学会了 吗?
春顺制作
1.2 网页构成要素
• 互动问题 • 1. 不同性质的网站,其页面布局以及类容的安排 是不同的,都有哪些要素?
• 2. 网站的主体内容要注意些什么?
第一章
网页制作概述
主讲: 解春顺
2009年7月20日
1.1 网页基本概念
• • • • • 互动问题 1.什么是网页? 2.他与网站又有着怎样的关系? 3.为什么我们要制作网页? 4.与网页制作的相关术语有哪些?
• 本节将对这些问题进行详细解答……
春顺制作
本节总系
• 1.1 网页基本概念 • 1.1.1 Wed的定义与特点 • 1.1.2 网页与网站 • 1.1.3 网页制作相关术语
春顺制作
1.3.1 中文版Dreamweaver8 的新增功能
网页制作第一节

实现人机信息交互、以及客户端与服务器端的信息交互。比如, 我们在网页上注册或登陆个人信息等操作。
(六)超链接
超链接实现众多网页的相互连接。在网页中多数用文字或图片 实现超链接。
三、静态网页和动态网页
(一)静态网页 所谓静态网页,就是由html标记语言组成,后缀为.html或.htm的文件, 它可以包含静态文本、图片、动画、动态特效、人机交互等内容。 静态网页有两种: 1、HTML网页 HTML网页是由纯HTML语言标记组成,包含文本图片、动画、超 链接等元素,没有任何的动态内容和动态特效。
五、网页制作的准备工作
(一)了解一些网站设计的有关术语 4、域名
对于服务器,采用域名的方式即文字描述方式,来代替其IP地址。 比如,新浪网的域名为:,通过域名我们很容易去访 问某一网站。
但是,网络中寻找某一台主机都是通过IP地址完成的,因此,在 访问具有域名的网站服务器时,必须得到它的IP地址。将域名转换 成IP地址就需要DNS服务器,通过DNS服务器查找到要访问服务器 的IP地址。这就是为什么网络中要假设DNS服务器,以及我们在设 置个人主机IP地址的时候要设置DNS服务器地址的原因。
静态网页不能动态修改内容,若要修改其内容,需要去修改HTML文 档的源文件,然后重新打包上传到网站的服务器上。所以静态网页的维 护管理比较麻烦。如今,单纯的静态网页已经不存在了。
三、静态网页和动态网页
(二)动态网页 动态网页不是我们所说的网页中是否有动画或动态效果的网页,而是可 以实现客户端与服务器端的信息交互,可以实现动态更新内容的网页。 动态网页有以下三个特征: 1、以数据库为基础 动态网页中的很多元素通过数据库进行管理。目前,用的较多的 数据库技术是access、sql server、mysql和oracle。相比之下,access 数据库简单,oracle又相对比较难,因此,sql server数据库技术很受大 家青睐。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
超级链接
超级链接是指将一个网站中的不同页面 链接起来的功能。在网上浏览时单击一个文 本、图片等就能跳转到与之相关的页面,这 些文本、图片即是超级链接的表现形式。
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
Photoshop
用于对图片进行效 果处理。且文件格式被 大多数浏览器所兼容。
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
表单
它是用于申请或提交某 些信息而填写的交互网页。 如申请邮箱、短信申请等在 网上填写的各个页面即是一 个一个的表单。
首页 末页 向上 向下 返回 结束 调音
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
网页概述
➢什么是网页 ➢网页的类型 ➢网页中常见的基本概念
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
网页制作的常用软件
➢图形处理软件 ➢动画制作软件 ➢网页布局软件
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
图形处理软件
常用到的有: ➢Photoshop ➢Fireworks
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
重点知识
网页制作的基本步骤
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
域名
域名即是一个网 站的网址,它是全世 界惟一的。
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
第一课 网页制作概述
➢本课要点 ➢课前导读 ➢课堂讲解 ➢上机实战 ➢习题及答案
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
导航条
导航条即相当于一个网站的目录,导航 条通过超级航条成了网上浏览的指路航标。
什么是网页
在网上浏览时看到的 一个一个页面就是网页, 它是用HTML的文件格式 来表示的。
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
网页的类型
➢主页 ➢内页 ➢动态网页 ➢静态网页
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
网页中常见的基本概念
➢域名 ➢站点 ➢URL ➢超级链接 ➢导航条 ➢表单 ➢发布
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
站点
它可以大到一个网站, 小到一个网页,它是一个 构建在网络上、具有独立 名称的逻辑上的独立体。
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
URL
URL是全球资源定位器。它的功能是提 供一种在Internet上查找任何信息的标准方 法,URL与被访问的站点或资源在一起。使 用最广的形式是用于表示网页的Internet位 置的“Http://”。
本课要点
➢了解网页 ➢网页制作的常用软件 ➢网页制作的基本步骤 ➢如何学好网页制作
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
基础知识
网页的定义、网页中的常用术语
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
发布
将制作好的网页 上传到网上的过程即 是发布。
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
了解知识
制作网页需要的 软件、如何学好网页 制作
首页 末页 向上 向下 返回 结束 调音
计算机信息工程学院
《中文版FrontPage /Dreamweaver/Flash /Fireworks 网站建设与网页网页设计》
课堂讲解
➢网页概述 ➢网页制作的常用软件 ➢网页制作的基本步骤 ➢如何学好网页制作