.....
第二章 网页制作本章学习目标 2.1网络的基本概念 2.2网页制作的基本概念
2.3网页制作的工具2.4网页制作的一般步骤
2.5网页制作退出
.....
本章学习目标通过本章的学习,了解网页的制 作过程,掌握网页制作工具 dreamweaver8.0的基本使用方 法,能够利用所学的图像处理、 动画处理、声音处理等知识,制 作个性化的个人网页返回本章首页
.....
2.1网络的基本概念一. 网络 1.网络概念 网络是指在网络协议控制下,通过通信设备和线路 来实现地理位置不同且具有独立功能的多个计算机 系统之间的连接,并通过网络操作系统等网络软件 来实现资源共享的系统。 2.网络分类 按地理范围可分为局域网、城域网和广域网。 其中Internet是目前覆盖范围最大,使用最广泛的 广域网。 局域网:将较小范围内的计算机连接起来的网络。
.....
2.1网络的基本概念二. Internet简介 1. 概念 Internet又称国际互联网或因特网,它以TCP/IP网络协议进行数据通信,把世 界各地众多的计算机网络和成千上万台计算机连接在一起,使原本分散在单 台计算机上和限制在局部网络上的资源和信息,可以方便的相互交流。 2.主要应用 (1)交互式服务 目前Internet上最先进,交互性最好,应用最为广泛的信息检索工具就是万维 网(WWW、3W或Web)。它是集文字,声音,图像和影像为一体的超媒体 系统。我们可以通过浏览器浏览自己喜欢的网站,获取各种信息。 (2)文件传输(FTP) 实现联网的计算机之间的文件传输。 (3)电子邮件(E-mail) 电子邮件是网上通信的主要方法。 (4)远程登录(Telnet) (5)新闻组(Usernet) (6)网络电话 (7)网上聊天(IRC) (8)网上寻呼(ICQ)
.....
2.1网络的基本概念三. Internet的连接方式 1.TCP/IP协议 它是以IP协议作为核心协议,在其上运行的是传 输层的协议TCP。 TCP(传输控制协议):用于保证数据在网上传 送过程中的有序性。 IP(网际协议):专门负责按地址在计算机之间 传递信息。 由于Internet遵循TCP/IP协议,因此要求连接在 Internet上的每台计算机都必须拥有自己唯一的 地址。
.....
2.1网络的基本概念2. 地址的种类 (1)IP地址: 用以保证通信使每台计算机能相互识别,每台计算机都有一个 IP地址,它是由四个用点号分隔开的十进制数字表示的。如: 202.96.209.5。 (2)域名: 由于IP地址不容易记忆,因此Internet提供了“标准名称”寻 址方案。即使用容易记忆、个性化的域名,其形式为:(主机 名.)网络名.机构名.一级域名。如:。 (3)URL地址(统一资源地址): 它是Internet上所有资源的定位地址。可以用于浏览指定的 Web站点和网页或下
载指定信息等。其形式为:协议名://IP地 址或协议名://域名。如:等。 (4)E-mail地址: 每个用户要在Internet上传递邮件,则每个用户必须拥有自己 的E-mail 地址。其形式为:用户名@主机域名。如: li@
.....
2.1网络的基本概念3.与internet的连接 (1)单机连接方式 l 拨号连接 l 专线连接 l 宽带连接 (2)局域网连接方式 l 专线连接 l 使用代理服务器接入 (3)卫星因特网接入 (4)利用无线通信技术接入返回本章首页
.....
2.2网页制作的基本概念
1.Web页的概念 在Internet上的计算机可以通过网络发布信息或浏览信息,所有 这些信息都是一种超媒体文档(文字、图像、声音、动画、影视 等多媒体信息),构成WWW(万维网)的基本组成部分,并通 过浏览器对上述信息进行检索和查看。 2.HTML HTML称作超文本标记语言,它是通过在网页中添加标记来确定 网页的内容和格式。在HTML文件中除网页的文字内容外,还包 括了对浏览器的一些指示,如文字位于何处,以何种格式显示等。 如果网页中包含图像、声音、动画等多媒体资源,则HTML文件 会告诉浏览器到哪里查找这些资源,以及这些资源放置的位置和 模式。 3. JavaScript的基本概念 JavaScript是一种常用的脚本语言,它可以直接嵌入到HTML文档 中,使得用HTML标记制作的网页加入了交互性,使访问者与网 页能够进行交互,丰富了网页的内容,增加了网页的表现力。返回本章首页
.....
2.3网页制作的工具1.简单的文档编辑工具 用于纯文本文件的编辑。如windows下的记事本 2.功能齐全的专用工具 以图形化的界面完成所见即所得的静态网页。包 括基本的网页文本、网页外观、超级链接及丰富 的多媒体和动画处理工具,还提供了一些网站开 发和管理工具。如dreamweaver、frontpage等 3.其他工具 为了使制作的网页更为美观,在利用网页制作工 具制作网页时,还需利用网页美化工具对网页进 行美化。如photoshop、flash等 返回本章首页
.....
2.4网页制作的一般步骤
1. 建立本地站点、规划网站 2. 收集网页制作的各种素材(图像,动画,声音, 影视等) 3. 在相应网页中插入对象 4. 改变对象的属性 5. 输入文字 6. 保存网页 7. 定义远程站点 8. 上传返回本章首页
.....
2.5网页制作一、DreamWeaver 8.0的特点 二、DreamWeaver 8.0的工作环境 三、本地站点管理 四、收集网页素材 五、网页文件的基本操作 六. 设置页面属性 七、在网页中添加文字 八、在网页中插入图像 九、 在网页中插入其他对象 十、创建链接 十一、定义远程站点 十二、页面布局规划 十三、框架的应用 十四、使用表单 十五、层和时间轴 十六、行为 十七、CSS样式
返回本章
首页
.....
一、DreamWeaver 8.0的特点
1.支持所见即所得的可视化设计方式,支持最新的Dhtml (动态html语言),可以用它设计出生动的动画、多层 次的页面。 2.具有丰富的多媒体网页设计功能,可以通过外接的一些 插件如Flash、ActiveX等与其他图形图像处理软件、文 字处理软件高度结合,轻松地实现一些原本是非常复杂 的功能。 3.可以方便地实现很多网页交互功能,如翻滚图片、新窗 口弹出、浏览器自动检测跳转等多种以往需要通过Java 语言编写程序才能达到的功能,这就是所谓的“行为”, “行为”是Dreamweaver的一大特色,可以方便地制作 出网页互动效果。 4 .具有超强的网站管理能力,可以快速构建网站、设计、 返回本节首页 更新和重组网页。
.....
二、DreamWeaver 8.0的工作环境
1.Dreamweaver8.0的启动选择“开始/所有程序/Macromedia/Macromedia Dreamweaver8”,即 启动 Dreamweaver8.0,系统会出现如下对话框
在“创建新项目”下选择HTML,即打开 Dreamweaver8.0的集成工 作区
.....
二、DreamWeaver 8.0的工作环境2. DreamWeaver 8.0的工作环境 Dreamweaver 8.0工作区是一个使用多文档界面的集成工作区,其中全部“文 档”窗口和面板被集成在一个更大的应用程序窗口中,并将面板组停靠在右 侧。标题栏 菜单栏 文档工具栏 插入面板组
文档窗口
浮动可停 靠面板
状态栏 属性面板
时间轴面板
.....
二、DreamWeaver 8.0的工作环境
1.文档窗口 (1)选项卡式文档窗口 Dreamweaver8.0文档窗口采用选项卡式的文档窗 口,即当有多个文档打开,当文档窗口最大化, 则多个文档以选项卡形式存在。 (2)文档工具栏 包含按钮和弹出式菜单,他们提供各种“文档” 窗口视图(如“设计”视图和“代码”视图)、 各种查看选项和一些普通操作(如在浏览器中预 览及设置网页的标题)。可以通过“查看/工具 栏/文档”菜单命令来隐藏/显示“文档工具栏”。
.....
二、DreamWeaver 8.0的工作环境
2.面板 (1)“插入”面板组 插入面板组包括7个子面板,依次为常用、布局、表单、文本、 HTML、应用程序和Flash元素,每个子面板下包含用于将各种类 型的“对象”(如图像、表格和层)插入到文档中的按钮。 单击面板组名称右端的下拉按钮,打开下拉列表,在下拉列表 中选择子面板名称,即可打开相应的面板。在下拉列表中选择 “显示为制表符,插入面板则以标签形式显示。要恢复到下拉列 表状态可右键单击标签栏,选择“显示为菜单”。 (2)属性面板 属性面板可以查看和编辑当前选定页面元素(如文本和插入的 对象)的属性,选定内容不同,属性面板上显示的属性也不同。 对属性所作的大多数更改会立
刻反映在文档窗口中,但有些属性, 直到在属性编辑文本域外单击或按下Enter键才会显示更改结果。 单击属性面板右下角的箭头,可以折叠或展开属性面板。
.....
二、DreamWeaver 8.0的工作环境
(3)时间轴面板 “时间轴”面板描绘了层随时间变化的属性,利 用对象在不同时间的属性,以达到对象的的动画 效果 (4)浮动可停靠面板组 是停靠在右侧的组合在一个标题下面的相关面板 的集合,若要展开或折叠一个面板组可单击组名 称左侧的展开/折叠按钮;若要取消停靠一个面 板,拖动该组标题条左边缘的手柄。通过“窗口” 菜单下的相应命令可打开指定面板(如“框架” 面板),可通过按F4键来隐藏/显示所有面板。
.....
二、DreamWeaver 8.0的工作环境3.状态栏 状态栏分成四部分 (1)标记选择器 位于状态栏左侧,显示当前光标区的代码情况,为选取文 档窗口中所插入的元素提供快捷方式,单击某个标签,即可 将窗口中的相应元素选中。 (2)缩放及选取工具 其中工具的使用于photoshop相同 (3)窗口大小 是一个弹出式菜单按钮,该按钮上显示当前文档窗口的尺 寸,单击该按钮,弹出一个菜单,可根据需要选择相应的命 令来调整窗口的大小。 (4)下载指示器 显示当前编辑网页的文件的大小和该文件以标准调制解调 器完全下载所需的时间(默认调制解调器速度为56K,可到 “编辑/首选参数”菜单命令下的“状态栏”选项中查看或 修改此速度)。 返回本节首页
.....
三、本地站点管理站点是一系列文档按照某种结构,通过各 种链接关联在一起,并存放用户在 Internet上进行浏览的各种信息的物理位 置。 远程站点:存储在Internet服务器上的网 页站点。 本地站点:建立在本地计算机硬盘上的站 点。
.....
三、本地站点管理1. 设计与规划站点 步骤: 明确网站的功能,能够提供的服务和信息,构思网页的 基本内容。 根据网页内容规划站点结构。如:包含多少网页,各网 页之间的关系,网页中用到的各种素材如何存放(公用 素材库或分类素材库)。整个站点是一个大的文件夹, 其中又包含若干个子文件夹。 准备素材,将网页所需的素材分门别类放置在站点的相 应文件夹中。 所有网页中所要用到的素材,在制作网页前都应放在站 点中(本地站点),以保证以后整个站点一起上传到服 务器(远程站点)。
.....
三、本地站点管理2. 创建本地站点 Dreamweaver 8.0的站点管理器主要用于管理网站内的网页和 相关文件,用站点管理器可以方便快捷地建立本地站点和远 程站点,并保持二者在内容上同步。制作网站的第一步就是 要在本地硬盘上建立一个
站点(本地站点)。 本地站点其实就是存储在硬盘上的网页的组织形式。与文件 管理相似。但站点文件夹名及文件名要避免使用中文,因为 很多服务器和浏览网站的用户使用英文操作系统,不能支持 中文文件名,所以,中文文件名可能会导致访问失败或浏览 错误。 设置本地站点步骤:创建一个包含站点所有文件的文件夹 (称作本地站点) 选择“站点”/“新建站点”菜单命令 在出现的对话框中单击“高级”选项卡,在左半部分选“本 地信息”,在右半部分设置网站属性,给本地站点一个名称 (如LX) ,选择前面建立的文件夹作为“本地根文件夹” 按 “确定”按钮,即可在“文件”面板中看到站点结构。