第1章网页讲义设计及工具
合集下载
《网页设计与制作》讲义-专题1 网页设计基础知识
专题1 网页设计基础知识1.1 认识网站、网页与主页1.1.1什么是网页网页（Web页）实际上就是HTML文件，是一种可以在WWW网上传输，并能被浏览器认识和翻译成页面的文件。
HTML是“HyperText Markup Language”的缩写，意为“超文本标记语言”，它是一种规范，一种标准。
它是纯文本格式的，用任何文本编辑器都可以打开编辑。
网页包括的主要元素有：文本、图像、动画、声音、视频、超链接、表格、表单等。
由于多数网页一般均有文字、图像、图形、动画、音频、视频等多媒体信息，具有超链接、并可与网络链接，因此这就使人们登上站点以后，便可以看到五彩缤纷的界面。
那么，这些五彩缤纷和千姿百态的Web网页是如何制作出来的？制作好网页以后又如何将它发布到Internet上？这些问题正是本课程所要阐述的主题。
1.1.2什么是网站多个相互之间具有一定联系的网页就构成了一个网站。
网站用于存储提供给用户浏览的网页文件。
它也是一种文档的磁盘组织形式，由文档和若干文件夹组成，文档经过组织分类分别放在不同的文件夹中。
网站存储在服务器或服务器的虚拟主机上，接受访问者通过WWW域名的访问。
网站是具有独立域名、独立存放空间的内容集合，这些内容可能是网页，也可能是程序或其它文件，一个网站不一定要有很多网页，主要是有独立域名、独立存放空间，即使只有一个页面，也叫网站。
网站按照其内容可以分为以下几类：1、企业网站：围绕企业、产品及服务信息进行网络宣传，通过网站树立企业网络形象。
2、个人网站：个人为了兴趣爱好或为了展示个人等目的而建的网站，具有较强的个性化特色。
3、门户网站：提供综合性互联网资源的网站。
国内著名三大门户网站：网易、搜狐、新浪。
4、机构网站：政府机关、相关社团组织或事业单位建立的网站。
以机构或社团形象宣传和政府服务为主。
5、娱乐网站：提供娱乐信息、流行音乐、视频等娱乐内容为主的网站。
6、电子商务网站：依靠因特网来完成商业活动的各个环节的网站，如卓越、当当、淘宝、易趣、拍拍等。
《网页设计基础》PPT课件
1.4 建立网站的基本流程
图1-2所示的是一个网站的完整制作流程.
确定主题策划与准备来自收集资料与素材规划网站结构
图
-
1
设计网页版式
2
确定网站结构
网
站
制作阶段
制作网页元素
的
制
插入元件与排版
作 流
上传网站
程
后期工作
维护与更新
1.4.1 确定主题
网站的主题也就是网站的题材, 是网站设计首先遇到的问题.
〔2〕利用Fireworks修改图像非常方便.
〔3〕Fireworks无需借助其他工具就可 以完成将一个图像转化为网页元素的全过程.
〔4〕Fireworks具有文件导出功能.
1.3.2 Flash
Flash是Macromedia公司开发 的用于矢量图形编辑和动画创作的 专业软件,它是一种交互式动画设 计工具,用它可以将音乐、声效、 动画以及富有新意的界面融合在一 起,以制作出高品质的网页动态效 果.
网站的定位要小,内容要精.
网站的题材最好选自己擅长或 者喜爱的内容.
网站名称,是网站设计的一部 分,而且是一个关键的要素,和现实 生活中一样,网站名称是否正气、
1.4.2 搜集资料 1.4.3 网站的整体规划
进行网站的整体规划也就是组 织网站的内容并设计其结构. 1.4.4 网页设计与制作
1．静态网页的设计与制 作
Dreamweaver是 Macromedia公司推出的一款大 众化的网页制作软件,它具有可 视化编辑界面,用户不必编写复 杂的HTML源代码就可以生成跨 平台、跨浏览器的网页,不仅适 合于专业网页编辑人员的需要, 同时也容易被业余网页制作人员 所掌握.
1.2.3 FrontPage
第1章 网页设计基础PPT学习课件
2020/3/3
1.6 HTML语言
1.6.1文件结构标签 1.6.2表格标签 1.6.3文本段落标签 1.6.4图像标签 1.6.5链接标签 1.6.6框架标签 1.6.7表单 1.6.8块标签
25
2020/3/3
互联网就是借助通信线路将计算机和各种相 关设备相连接，并按照统一的标准在各种设 备之间进行数据传输和交换，实现互联互通， 以达到计算机之间资源共享和信息交换的目 的。
3
2020/3/3
1.1互联网基础
互联网提供的主要服务包括万维网（World Wide Web，WWW，3W，Web），电子邮件（E-mail）， 文件传输（FTP）和远程登录（Telnet）等。
10
2020/3/3
1.2网页设计知识
3. 利用图像配色
1.2.2网页设计元素
1. 网站标识
网站logo，将网站logo置于页面比较醒目的位置，如左 上角。
2. 网站banner
网站banner一般位于页面的顶部，即可以表达和突出网 站创意和形象，也可以传达某种特定信息。
网络banner通常是由GIF动画、JPEG图像或Flash动画完 成的。
1.5.3后期工作
1．网站测试 网站测试包括网站运行的每个页面和程序。兼容性测试，
超链接测试是必选的测试内容。
2．网站发布 网站发布包括申请域名，申请服务器空间和上传网站内
容。
22
2020/3/3
1.5 网站制作流程
3．网站推广 注册搜索引擎是最直接和有效的方法。 通过在同行或相关行业网站中，建立网站的相互链
Dreamweaver，Photoshop和Flash是由Adobe公司开发 的3款软件，具有良好的集成性。Photoshop和Flash的 输出结果可以直接导入Dreamweaver网页中。
第1章网页设计基础概述精品PPT课件
Adobe Dreamweaver CS3
1.3 网站设计的流程
1.3.2 新建站点与收集资源
● 文字资料 ● 图片资料 ● 动画资料 ● 其他资料
1.3.3 实现FTP服务器的上传与下载
FTP传输可以用Windows中的FTP命令，也可以借助于一些专门 的FTP软件。
Adobe Dreamweaver CS3
Adobe Dreamweaver CS3
第一章
网Байду номын сангаас设计基础概述
Adobe Dreamweaver CS3
❖ 1.1 全面认识网页 ❖ 1.2 网页制作的常用软件 ❖ 1.3 网站设计的流程 ❖ 1.4 网页的基本组成元素 ❖ 1.5 申请免费空间与发布网站
Adobe Dreamweaver CS3
Adobe Dreamweaver CS3
1.3 网站设计的流程
1.3.1 注册域名与申请空间
1．注册域名 域名是企业、机构或个人的网络标识，是一个通过计算机登录网
络的企业、机构或个人在该Internet网中的地址。 2．申请空间
一个完整的网站系统其实就是一组文件，它提供给网络用户浏览 。这些文件要占据一定的硬盘空间，即所谓的网站空间
1.1 全面认识网页
1.1.1 网站、网页和主页
网站是指在因特网上，根据一定的规则，用于展示特定内容的相 关网页集合。
网页是构成网站的基本元素，是承载各种网站应用的平台。 网站主页是整个网站的主索引页。网站首页名称是特定的。 1.1.2 HTML的组成及语法 1．HTML语言的组成 2．HTML的语法
Dreamweaver 是一款可视化网页设计制作工具和网站管理工具， 支持当前最新的Web技术。
网页设计课件-第1章
尺寸属性
包括宽度和高度等。
CSS常见布局
浮动布局
使用float属性使元素浮动到一 侧，其他文本和内联元素将围 绕它流动。
Flexbox
弹性盒子模型是一种现代的布 局模式，可以轻松地设计复杂 的布局结构。
块级元素和行内元素
块级元素占据其父元素的整个 宽度，行内元素不会打断文本 流。
定位
使用position属性可以将元素 定位在相对于其正常位置或相 对于其父元素的位置。
链接到CSS样式表
(<link rel="stylesheet"
href="styles.css">) 等。
HTML常见标签
<h1>-<h6>
标题标签，`<h1>` 表示最高级别的标题，`<h6>` 表示 最低级别的标题。
<p>
段落标签。
<a>
链接标签，用于创建超链接。
<img>
图像标签，用于插入图像。
通过类属性选择要应用样式的 元素。
ID选择器
通过ID属性选择一个特定的 元素。
属性选择器
根据元素的属性选择要应用样 式的元素。
CSS样式属性
文本属性
包括文本对齐方式、 缩进、装饰等。
边框属性
包括边框样式、宽 度和颜色等。
字体属性
包括字体类型、大 小、颜色、行高等。
颜色和背景属性
包括背景颜色、背 景图像等。
常见的HTML元素包括段落 (`<p>`)、标题 (`<h1>`-`<h6>`)、链接 (`<a>`<tr>`、 `<td>`)、表单 (`<form>`、`<input>`、`<button>`) 等。
网页设计与制作第1章 网页设计基础.ppt
HTML的意思则是“Hypertext Markup Language”，中文翻译为“超文本标记语 言”。“超文本”就是指页面内可以包含 图片，链接,甚至音乐，程序等非文字的元 素。网页就是由HTML语言编写出来的。
网页制作工具
Dreamweaver MX
Dreamweaver是由美国著名的多媒体软件开 发商Ｍacromedia公司开发的一个“所见即 所得”的可视化网站开发工具，是一个备 受专业web开发人士推崇的软件。
WWW
WWW，是万维网（World Wide Web）的英 文缩写。WWW能够处理文字，图像，声音， 视频等多媒体信息。由于它的信息处理能 力已经远远超出了处理纯文本的范围，所 以它是一个多媒体的信息系统。并且通过 各种超链接，我们可以很方便地从一种信 息来源转到另一种信息来源。
网页的概念
网页的学名称作HTML文件，是一种可以在 www网上传输,并被浏览器认识和翻译成页 面显示出来的文件。
东方网页王III》增强版和网页王前期产品 一样，是国内唯一可以和国外网页制作工 具媲美的网页设计软件。包括了处理网页 制作中所需元素的一揽子解决方案，简化 了制作网站、设计网页的流程。它结合了 众多的动态网页素材，轻松使用编辑工具， 做出专业水准的网页，全新的拖曳网页编 辑，只需要两步，就能生成网页。
Hale Waihona Puke 网页制作工具FlashMX
Flash MX把矢量图的精确性和灵活性与位 图、声音、动画的高级交互性融合在一起， 能够创作出极具吸引力的高效网页。它可 以轻松地与Macromedia公司的图像处理软 件FreeHand和Fireworks集成，直接导入这 些软件制作的图像。
网页制作工具 东方网页王
FireworksMX
网页制作工具
Dreamweaver MX
Dreamweaver是由美国著名的多媒体软件开 发商Ｍacromedia公司开发的一个“所见即 所得”的可视化网站开发工具，是一个备 受专业web开发人士推崇的软件。
WWW
WWW，是万维网（World Wide Web）的英 文缩写。WWW能够处理文字，图像，声音， 视频等多媒体信息。由于它的信息处理能 力已经远远超出了处理纯文本的范围，所 以它是一个多媒体的信息系统。并且通过 各种超链接，我们可以很方便地从一种信 息来源转到另一种信息来源。
网页的概念
网页的学名称作HTML文件，是一种可以在 www网上传输,并被浏览器认识和翻译成页 面显示出来的文件。
东方网页王III》增强版和网页王前期产品 一样，是国内唯一可以和国外网页制作工 具媲美的网页设计软件。包括了处理网页 制作中所需元素的一揽子解决方案，简化 了制作网站、设计网页的流程。它结合了 众多的动态网页素材，轻松使用编辑工具， 做出专业水准的网页，全新的拖曳网页编 辑，只需要两步，就能生成网页。
Hale Waihona Puke 网页制作工具FlashMX
Flash MX把矢量图的精确性和灵活性与位 图、声音、动画的高级交互性融合在一起， 能够创作出极具吸引力的高效网页。它可 以轻松地与Macromedia公司的图像处理软 件FreeHand和Fireworks集成，直接导入这 些软件制作的图像。
网页制作工具 东方网页王
FireworksMX
《网页设计与制作》第一章网页制作基础
块级元素与行内元素
浮动布局
浮动布局是一种常用的网页布局技术，通过设置元素的 `float` 属性，可以让元素脱离正常的文档流，向左或向右移动，直到遇到父元素的边界或另一个浮动元素。
使用浮动布局可以实现多种布局效果，例如多列布局、文字环绕图像等。
定位布局通过设置元素的 `position` 属性，可以精确控制元素在页面上的位置。常见的定位方式有静态定位（`static`）、相对定位（`relative`）、绝对定位（`absolute`）和固定定位（`fixed`）。
在线网页编辑器
网页制作工具简介
延时符
02
HTML基础
HTML文档结构
<html>元素是HTML文档的根元素，包含了整个文档的内容。
<!DOCTYPE html>声明文档类型为HTML5。
HTML文档由一系列的元素构成，包括`<!DOCTYPE html>`、`<html>`、`<head>`和`<body>`等。
03
响应式图片可以有效地减少带宽和加载时间，提高网页的性能和用户体验。
01
响应式图片是指在不同尺寸的屏幕上显示不同分辨率的图片。
02
通过使用HTML的srcset属性和CSS的picture元素，可以指定不同尺寸屏幕下的图片源，从而实现响应式图片。
响应式图片
THANKS
属性选择器
01
03
02
04
CSS选择器
用于设置元素的前景色和背景色，如`color`和`background-color`。
颜色与背景
用于设置字体类型、大小、行高等，如`font-family`、`font-size`和`line-height`。
网页设计第一章PPT课件
网页设计第一章ppt课件
目录
• 网页设计概述 • 网页设计基础 • 网页设计流程 • 网页设计工具 • 网页设计最佳实践 • 案例分析
01 网页设计概述
什么是网页设计
定义
网页设计是使用HTML、CSS和 JavaScript等技术，将内容、布局、
交互和视觉效果整合到网站的过 程。
目的
创造用户友好、易于导航和信息丰 富的网站，以吸引和留住访问者。
的用户体验。
02 网页设计基础
HTML基础
01
HTML是网页设计的基 石，用于构建网页的结 构和内容。
02
HTML元素是网页的基 本组成单元，包括标题、 段落、列表、链接等。
03
HTML标签用于定义元 素，如`<h1>`至`<h6>` 用于定义标题，`<p>` 用于定义段落。
04
语义化标签的使用可以 提高网页的可访问性和 SEO效果。
。
Sketch
专为网页和移动应用设计的矢 量绘图工具，适合团队协同工 作。
Figma
一款基于云的设计工具，支持 多人实时协作，适合跨团队项 目。
Canva
在线设计平台，提供丰富的模 板和素材，适合初学者快速制
作网页设计。
开发工具
Sublime Text
轻量级但功能强大的文本编辑器，适用于前 端开发。
JavaScript用于实现网页的交互功能。
JavaScript事件处理程序用于响应用 户操作，如点击、鼠标移动等。
JavaScript可以操作DOM（文档对象 模型），动态修改网页内容。
AJAX技术可以实现异步数据加载和 页面更新。
响应式设计基础
响应式设计是一种使网页在不同设备上都能良好显示的 方法。
目录
• 网页设计概述 • 网页设计基础 • 网页设计流程 • 网页设计工具 • 网页设计最佳实践 • 案例分析
01 网页设计概述
什么是网页设计
定义
网页设计是使用HTML、CSS和 JavaScript等技术，将内容、布局、
交互和视觉效果整合到网站的过 程。
目的
创造用户友好、易于导航和信息丰 富的网站，以吸引和留住访问者。
的用户体验。
02 网页设计基础
HTML基础
01
HTML是网页设计的基 石，用于构建网页的结 构和内容。
02
HTML元素是网页的基 本组成单元，包括标题、 段落、列表、链接等。
03
HTML标签用于定义元 素，如`<h1>`至`<h6>` 用于定义标题，`<p>` 用于定义段落。
04
语义化标签的使用可以 提高网页的可访问性和 SEO效果。
。
Sketch
专为网页和移动应用设计的矢 量绘图工具，适合团队协同工 作。
Figma
一款基于云的设计工具，支持 多人实时协作，适合跨团队项 目。
Canva
在线设计平台，提供丰富的模 板和素材，适合初学者快速制
作网页设计。
开发工具
Sublime Text
轻量级但功能强大的文本编辑器，适用于前 端开发。
JavaScript用于实现网页的交互功能。
JavaScript事件处理程序用于响应用 户操作，如点击、鼠标移动等。
JavaScript可以操作DOM（文档对象 模型），动态修改网页内容。
AJAX技术可以实现异步数据加载和 页面更新。
响应式设计基础
响应式设计是一种使网页在不同设备上都能良好显示的 方法。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
（HomePage）的页面，它常常被看作是该网站的大门，起着 引导访问者去进入浏览的作用。同时，网站有些什么内容， 更新了什么内容等等，都可以通过主页直接被访问者熟知。 如图所示是腾讯网的主页。
1.1.2 网站类型
• 网站有静态和动态之分，根据不同的划分标准，网站被分
为好多种类型。接下来我们通过详细的分析，来具体介绍 网站的类型，以及在制作网站前，如何选择适合的网站类 型。
• 1.新增功能特性 • 关于新增功能的相关内容及其特性如表所示。
• 2．操作界面
• （1）界面显示 • 在打开Dreamweaver CS5之后，窗口将显示如图所示的内容。
通过有针对性的选择“打开最近的项目”、“新建”、“主 要功能”这些栏目中的选项，可以进行具体操作。
• （2）菜单栏 • 如图所示，是打开Dreamweaver CS5后它的菜单栏。我们可以
网站、教育科研机构网站、个人网站、其它非盈利机构网站 以及其它类型。按网站模式划分，可分为综合类门户网站、 电子商务网站、专业网站等。以下，通过简要介绍网站的模 式，分析有关合适网站类型的选择。其具体内容如表所示。
1.1.3 静态网站制作流程
• 静态网站的制作相对比较简单，主要可以分四个部分来完
成。
第1章网页设计及工具
1.1 网页设计概述
• 网站由一பைடு நூலகம்特定人群和组织控制的一组网页的组合。网站
是由众多的网页组成的，页面是否精彩直接关系着网站是 否受人们的欢迎。本章通过讲解，将向大家展示有关网页 设计的基础知识及相关概念。
1.1.1 网页和网站基础知识
• 网站的建设首先需要从网页开始，网页和网站究竟是怎么
• 1．整体规划 • 对于整体规划，可以从以下几方面来进行： • ① 动态程序语言的确立 • ② 网站栏目功能规划 • ③ 根目录策划
• 2．数据库规划 • 3．编写网站后台 • 4．编写网站前台 • 5．测试及修改阶段 • 6．网站的发布
1.2 网页设计工具
• “工欲善其事，必先利其器”。制作网页第一件事就是选
定一种网页制作软件。从原理上来讲，虽然直接用记事本 也能写出网页，但是对网页制作必须具有一定的Html基础， 非初学者能及，且效率也很低。用Word也能做出网页，但 有许多效果做不出来，且垃圾代码太多，也是不可取的。 接下来具体为大家介绍实用的几款网页设计工具。
1.2.1 Dreamweaver CS5简介
通过它的各项功能命令，来实现最终的效果与制作。
• Adobe Dreamweaver CS5是一款集网页制作和管理网站于
一身的所见即所得网页编辑器，Dreamweaver CS5是第一 套针对专业网页设计师特别发展的视觉化网页开发工具， 利用它可以轻而易举地制作出跨越平台限制和跨越浏览器 限制的充满动感的网页。下面针对该软件的一些特性以及 相关内容进行简单介绍。
设计，页面切割之后，我们就可以着手进行网页的制作了。 在本书的具体制作的应用实例，我们都通过Dreamweaver CS5来进行相关操作。当然，用于制作网页的工具远远不 止这一些。
1.1.4 动态网站制作流程
• 对于动态网站，因为有脚本语言，所以比较复杂的。同样，
要做的工作也就更多了。主要有以下几方面：
• 关于网站：网站是众多网页集合而成的，不同的用户通过有
组织的连接整合一起，为浏览者提供更丰富的信息。网站由 域名（domain name又称网址），网站源程序和网站空间三部 分构成。网站也是信息服务类企业的代名词，如在新浪、搜 狐工作的人，也可以说，他在一家网站工作。如图所示是新 浪网站的首页的截图。
• 2．图纸的设计 • 设计图纸是在Photoshop或者Fireworks中把你想做的网站用
图片的形式画出来。Photoshop的灵活多变以及超级强大的功 能，完全可以画出绚烂的网页出来。浏览器的不同——像多 窗口浏览器有一个标签栏，就算是IE，常用图标也有大小之 分。因此具体的尺寸是多少，你需要在实际制作过程中自己 灵活掌握。
• 1．内容的策划 • 在网站创业前，进行系统的策划是非常必要的。如果要让
网站从大量站点中脱颖而出，就必须进行详细而深入的论 证。
• （1）确定需要建立什么样的网站 • （2）选择什么样的网站内容 • （3）确定用户群体，便于内容投其所好 • （4）前期策划决定网站竞争力 • （5）怎样策划一个好的网站
• 1．网站分类 • 从所用编程语言不同来划分，包括ASP、PHP、JSP、
……
• 从用途不同来划分，包括门户网站、行业网站、娱乐网
站……
• 从持有者不同来划分，包括个人网站、商业网站、政府网
站……
• 从商业目的不同来划分，包括营利型网站、非营利型网
站……
• 2．类型选择 • 将网站按照主体性质不同可分为政府网站、企业网站、商业
• 2．什么是网页设计与制作 • 其实网页就是一个HTML文件，我们所要学习的网页设计与制
作，就是学习如何编辑这个文件。多个HTML文件集合而成的 内容也就是网站，制作一个网站，也就意味着你需要单独编 辑若干个HTML文件。多个HTML文件需要通过“超链接”进行 连接。
• 3．主页面 • 一般情况下，一个网站都相应的制作有一个被称作主页
一回事呢？接下来让我们通过了解网页和网站的基础知识， 来初步认识它们，为网页和网站的建设与制作铺路开拓。
• 1．网页和网站的区别 • 关于网页：简单来说，大家通过浏览器看到的画面就是网页。
在互联网上应用最广的是网页浏览，浏览器窗口中显示的一 个页面称作一个网页，网页可以包括文字、图片、动画以及 视频、音频等内容。网页说具体了是一个HTML文件，浏览器 是用来解读这份文件的。如图所示是一网站页面。
• 3．网页的切割 • 网页的切割还是要交给Photoshop或者Fireworks来完成，这
里主要是使用它们的切片工具。这建议大家更多使用 Fireworks，因为它专业，也更容易上手。切割网页就是把图 片切割成若干个小图片，其中宽度高度什么的都得自己去掌 握去学习。
• 4．制作网页 • 网页就是表格加图片加Flash，在完成了内容策划，图纸
1.1.2 网站类型
• 网站有静态和动态之分，根据不同的划分标准，网站被分
为好多种类型。接下来我们通过详细的分析，来具体介绍 网站的类型，以及在制作网站前，如何选择适合的网站类 型。
• 1.新增功能特性 • 关于新增功能的相关内容及其特性如表所示。
• 2．操作界面
• （1）界面显示 • 在打开Dreamweaver CS5之后，窗口将显示如图所示的内容。
通过有针对性的选择“打开最近的项目”、“新建”、“主 要功能”这些栏目中的选项，可以进行具体操作。
• （2）菜单栏 • 如图所示，是打开Dreamweaver CS5后它的菜单栏。我们可以
网站、教育科研机构网站、个人网站、其它非盈利机构网站 以及其它类型。按网站模式划分，可分为综合类门户网站、 电子商务网站、专业网站等。以下，通过简要介绍网站的模 式，分析有关合适网站类型的选择。其具体内容如表所示。
1.1.3 静态网站制作流程
• 静态网站的制作相对比较简单，主要可以分四个部分来完
成。
第1章网页设计及工具
1.1 网页设计概述
• 网站由一பைடு நூலகம்特定人群和组织控制的一组网页的组合。网站
是由众多的网页组成的，页面是否精彩直接关系着网站是 否受人们的欢迎。本章通过讲解，将向大家展示有关网页 设计的基础知识及相关概念。
1.1.1 网页和网站基础知识
• 网站的建设首先需要从网页开始，网页和网站究竟是怎么
• 1．整体规划 • 对于整体规划，可以从以下几方面来进行： • ① 动态程序语言的确立 • ② 网站栏目功能规划 • ③ 根目录策划
• 2．数据库规划 • 3．编写网站后台 • 4．编写网站前台 • 5．测试及修改阶段 • 6．网站的发布
1.2 网页设计工具
• “工欲善其事，必先利其器”。制作网页第一件事就是选
定一种网页制作软件。从原理上来讲，虽然直接用记事本 也能写出网页，但是对网页制作必须具有一定的Html基础， 非初学者能及，且效率也很低。用Word也能做出网页，但 有许多效果做不出来，且垃圾代码太多，也是不可取的。 接下来具体为大家介绍实用的几款网页设计工具。
1.2.1 Dreamweaver CS5简介
通过它的各项功能命令，来实现最终的效果与制作。
• Adobe Dreamweaver CS5是一款集网页制作和管理网站于
一身的所见即所得网页编辑器，Dreamweaver CS5是第一 套针对专业网页设计师特别发展的视觉化网页开发工具， 利用它可以轻而易举地制作出跨越平台限制和跨越浏览器 限制的充满动感的网页。下面针对该软件的一些特性以及 相关内容进行简单介绍。
设计，页面切割之后，我们就可以着手进行网页的制作了。 在本书的具体制作的应用实例，我们都通过Dreamweaver CS5来进行相关操作。当然，用于制作网页的工具远远不 止这一些。
1.1.4 动态网站制作流程
• 对于动态网站，因为有脚本语言，所以比较复杂的。同样，
要做的工作也就更多了。主要有以下几方面：
• 关于网站：网站是众多网页集合而成的，不同的用户通过有
组织的连接整合一起，为浏览者提供更丰富的信息。网站由 域名（domain name又称网址），网站源程序和网站空间三部 分构成。网站也是信息服务类企业的代名词，如在新浪、搜 狐工作的人，也可以说，他在一家网站工作。如图所示是新 浪网站的首页的截图。
• 2．图纸的设计 • 设计图纸是在Photoshop或者Fireworks中把你想做的网站用
图片的形式画出来。Photoshop的灵活多变以及超级强大的功 能，完全可以画出绚烂的网页出来。浏览器的不同——像多 窗口浏览器有一个标签栏，就算是IE，常用图标也有大小之 分。因此具体的尺寸是多少，你需要在实际制作过程中自己 灵活掌握。
• 1．内容的策划 • 在网站创业前，进行系统的策划是非常必要的。如果要让
网站从大量站点中脱颖而出，就必须进行详细而深入的论 证。
• （1）确定需要建立什么样的网站 • （2）选择什么样的网站内容 • （3）确定用户群体，便于内容投其所好 • （4）前期策划决定网站竞争力 • （5）怎样策划一个好的网站
• 1．网站分类 • 从所用编程语言不同来划分，包括ASP、PHP、JSP、
……
• 从用途不同来划分，包括门户网站、行业网站、娱乐网
站……
• 从持有者不同来划分，包括个人网站、商业网站、政府网
站……
• 从商业目的不同来划分，包括营利型网站、非营利型网
站……
• 2．类型选择 • 将网站按照主体性质不同可分为政府网站、企业网站、商业
• 2．什么是网页设计与制作 • 其实网页就是一个HTML文件，我们所要学习的网页设计与制
作，就是学习如何编辑这个文件。多个HTML文件集合而成的 内容也就是网站，制作一个网站，也就意味着你需要单独编 辑若干个HTML文件。多个HTML文件需要通过“超链接”进行 连接。
• 3．主页面 • 一般情况下，一个网站都相应的制作有一个被称作主页
一回事呢？接下来让我们通过了解网页和网站的基础知识， 来初步认识它们，为网页和网站的建设与制作铺路开拓。
• 1．网页和网站的区别 • 关于网页：简单来说，大家通过浏览器看到的画面就是网页。
在互联网上应用最广的是网页浏览，浏览器窗口中显示的一 个页面称作一个网页，网页可以包括文字、图片、动画以及 视频、音频等内容。网页说具体了是一个HTML文件，浏览器 是用来解读这份文件的。如图所示是一网站页面。
• 3．网页的切割 • 网页的切割还是要交给Photoshop或者Fireworks来完成，这
里主要是使用它们的切片工具。这建议大家更多使用 Fireworks，因为它专业，也更容易上手。切割网页就是把图 片切割成若干个小图片，其中宽度高度什么的都得自己去掌 握去学习。
• 4．制作网页 • 网页就是表格加图片加Flash，在完成了内容策划，图纸