Download presentation
Presentation is loading. Please wait.
1
第五章 网页设计 网页制作的语言和工具 网页制作步骤和原则 使用Dreamweaver工具制作网页 使用FrontPage工具制作网页
网站发布与管理
2
网页(web page) 是使用者能从浏览器中看到的每一个页面，也是组成整个全球信息网的基本组件，每一个页面都是一个文件。
5.1 网页制作的语言和工具 网页(web page) 是使用者能从浏览器中看到的每一个页面，也是组成整个全球信息网的基本组件，每一个页面都是一个文件。
3
5.1.1 基本概念 ⑴万维网(World Wide Web) ⑵站点和网站 ⑶HTML ⑷动态HTML
简称WWW，它是一种体系结构，通过它可以访问遍布于Internet主机上的链接的文件，是Internet提供的一种服务，是存储在全世界Internet计算机中的数量巨大的文档的集合。 ⑵站点和网站 存储在某一服务器上的文件夹中主题相关的文本、声音、图像、动画，该文件夹称为站点，多个相关的站点则组成网站。 ⑶HTML HTML是超文本标记语言，构成网页的主要工具，是所有计算机都能理解的一种网上的出版“母语”，即万维网上使用的出版母语。 ⑷动态HTML DHTML综合多种技术，它允许使用常规的HTML、脚本文件、文档对象模块、绝对定位技术、动态样式、多媒体过滤器等和各种其它技术，能动态改变HTML在屏幕上显示文本和图像的方式。
4
5.1.1 基本概念 ⑸CSS ⑹ASP ⑺JaveScript ⑻CGI 是层叠样式表的简称，主要功能是灵活控制网页的样式、定位。
是微软推出的一种服务端命令执行环境，结合HTML页面、脚本程序和Active X组件建立或执行动态、交互式Web服务器应用程序，例如论坛、留言本、聊天室、购物、数据库系统等。 ⑺JaveScript JaveScript是一种紧缩的基于对象的脚本描述语言，用于客户端与服务器端Internet程序的开发，浏览器可以直接解释嵌在HTML中的JaveScript语句。 ⑻CGI 公共网关接口
5
5.1.2 网页制作语言 网页是WWW网站提供服务的主要形式，是通过浏览器在WWW上所看到的每一个画面。
HTML是超文本标记语言，在文本文件的基础上加上一系列的标识符号，表示格式，形成网络文件（扩展名.htm）。当用户从浏览器上下载文件时，就能将这些标识解释成它原有的含义。
6
网页中主要组成元素
7
HTML文件基本结构 <html> <head> <title>网页标题</title>
文件头 正文 <html> <head> <title>网页标题</title> </head> <body> 正文 </body> </html> 顶级标记
8
P282 例1：创建主页index.htm，图片bj1.gif作为网页背景，背景不随网页滚动而滚动。HTML代码如下：
<head> <title>个人网站</title> </head> <body> < bgproperties="fixed" background="file://d:/bj1.gif"> <p> </p> <h1 align="center"> <face=“方正舒体“ font size="7" >站长欢迎您</font></h1> <p align="center"> </p> <h2 align="center"> <font face=“华文隶书" size="7"> 欢迎 欢迎</font></h2> <p align="center"><font face="华文新魏" size="7">2008年元旦</font></p> </body> </html>
9
5.1.3 网页制作工具 制作网页的首要问题是选定一种网页制作工具 三类网页制作工具：
1.简单的文档编辑工具：Windows下的记事本、DOS下的Editor编辑器 2.功能齐全的专用工具：Dreamweaver、FrontPage 3.其他工具：IBM Websphere集成开发环境中的Web应用工具
10
5.2 网页制作的基本步骤和原则 5.2.1网页制作的基本步骤 1.站点的创建 2.主页的创建 3.创建网页的基本元素 ⑴文本与段落 ⑵图像
⑶超级链接 ⑷增加多媒体元素 4.利用表单增加交互 5.网页中的表格
11
5.2 网页制作的基本步骤和原则 5.2.2网页设计及布局 各种元和谐、美观地展现 遵循对比、统一、平衡、节奏的原则 要考虑到用户下载的时间
下面是常见的几种布局
12
布局草图
13
“T”结构布局
14
“口”型布局
15
对称对比布局
16
POP布局（自由布局）
17
5.2.3 网页制作原则 1.网页制作原则： ⑴尽心筹划 ⑵尽量简单 ⑶尽量简朴 ⑷善用图片 ⑸使主页易于漫游
⑹重点突出：标题、电子邮件地址、版权资料、联络资料 ⑺循环利用现有信息 ⑻保持新鲜感 ⑼吸引用户浏览
18
5.2.3 网页制作原则 2.网页布局的原则： 醒目性：使访问者把注意力集中到网页的内容上 创造性：有鲜明个性，有新的创意
造型性：维持整体外形上的稳定感和均衡性 明快性：能准确、快速转达网站的构成内容 可读性：网页的内容让人可以理解 总结：统一、协调、流动、强调、均衡
19
5.3使用Dreamweaver工具制作网页 5.3.1 站点和主页的创建 5.3.2 文本的处理 5.3.3 网页中的图像
5.3.4 网页中的超链接 5.3.5 网页中的多媒体 5.3.6 网页中的表单 5.3.7 表格的处理
20
5.4 使用FrontPage工具制作网页 5.4.1 站点和主页的创建 1.创建站点 2.创建网页
双击index.htm ⑴设置网页属性 “文件”/”属性”命令 或右击文档窗口空白位置/选“属性” “常规”属性：网页标题、背景音乐 “格式”属性：网页背景色、背景图片(水印)、默认文本色、超链接颜色 “高级”属性：网页边距 ⑵网页的保存与打开 “文件”/”另存为”命令 “文件”/”打开”命令
21
5.4 使用FrontPage工具制作网页 5.4.2 文本的处理 1.文本的输入 2.文本的编辑 3.文本与段落格式的设置 直接输入
从现成的文本文件内容复制过来 将其它文档中的文本转换成HTML格式后导入 2.文本的编辑 3.文本与段落格式的设置
22
5.4 使用FrontPage工具制作网页 5.4.3 网页中的图像 1.插入图片 2.图片属性的设置
“插入”/”图片”/”来自文件” 2.图片属性的设置 右击图片/”属性”→“外观”选项卡：位置、大小、对齐 →“常规”选项卡：更换图片、超链接目标 3.插入剪贴画 “插入”/”图片”/”剪贴画” 4.插入水平线 先定位 再“插入”/”水平线” 5.图形的绘制 6.艺术字处理
23
5.4 使用FrontPage工具制作网页 5.4.4 网页中的超链接 1.普通超链接的建立 2.特殊链接
在网页中为文字和图形建立的超链接 “插入”/”超链接”命令 2.特殊链接 ⑴链接到书签 链接到该网页自身某个特定位置的超级链接 设置书签 ⑵电子邮件链接 ⑶热点链接
24
5.4 使用FrontPage工具制作网页 5.4.5 网页中的多媒体 1.添加Flash动画 2.添加音频与视频
右击/”属性” 设置大小、布局、特点 2.添加音频与视频 ⑴设置网页的背景音乐 音乐格式：MIDI、WAV、AIFF、AU “页面属性”对话框/”常规”选项卡 ⑵向网页添加音频或视频 “插入”/”Web组件”→组件类型→高级控件→插件 “插件属性”对话框中设置大小、布局等
25
5.4 使用FrontPage工具制作网页 5.4.6 网页中的表单 1.创建表单 “插入”/”表单”/”表单”
1.创建表单 “插入”/”表单”/”表单” 2.表单中的单行文本框 接受任何类型的字母、数字、文本输入内容 3.单选按钮 在一组选项中只能选择一个选项 4.复选框 允许在一组选项中选择多个选项 5.下拉列表 在一个滚动列表中显示选项值，用户可以选择 6.文本区 多行文本框 7.按钮 在单击时执行操作 8.其它元素 图片 9.保存表单结果 将表单发送到文件、电子邮件、数据库等
26
5.4 使用FrontPage工具制作网页 5.4.7 表格的处理 1.表格的创建 2.表格的编辑 3.表格的属性设置和单元格的属性设置
⑴使用工具栏中的按钮快速创建表格 ⑵使用“插入”/”表格”命令建立表格 ⑶绘制表格 ⑷文本转换成表格 2.表格的编辑 3.表格的属性设置和单元格的属性设置 右击表格/”属性” 4.表格布局的使用 “表格”/”布局表格和单元格”
27
5.4.8 添加网页动态效果 1.字幕 2.交互式按钮 3.站点计数器 4.网页横幅 5.悬停按钮 6.横幅广告管理器
5.4 使用FrontPage工具制作网页 5.4.8 添加网页动态效果 1.字幕 2.交互式按钮 3.站点计数器 4.网页横幅 5.悬停按钮 6.横幅广告管理器
28
5.5.1 Dreamweaver中站点的发布与管理 1.站点的结构 2.设置站点和设计各页面 3.发布站点 4.管理站点
5.5 网站发布与管理 5.5.1 Dreamweaver中站点的发布与管理 1.站点的结构 2.设置站点和设计各页面 3.发布站点 4.管理站点
29
5.5.2 FrontPage中站点的发布与管理 1.发布站点 2.管理站点
5.5 网站发布与管理 5.5.2 FrontPage中站点的发布与管理 1.发布站点 2.管理站点
Similar presentations
