第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章

网页制作入门第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章_网页设计概述

网页设计与制作-  第01章_网页设计概述
14
网页设计与制作
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第一章

网页制作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.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. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 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 网站建设与网页网页设计》
课堂讲解
➢网页概述 ➢网页制作的常用软件 ➢网页制作的基本步骤 ➢如何学好网页制作
相关文档
最新文档