网页设计
情境一 Internet 基础与应用任务一 Internet 概述一、Internet 概念Internet 是一个全球性的计算机互联网络，它是将不同地区且规模大小不一的网络互相连接而成。Intern
情境一 Internet 基础与应用
任务一 Internet 概述
一、Internet 概念
Internet 是一个全球性的计算机互联网络，它是将不同地区且规模大小不一的网络互相连接而成。
Internet 的功能
● 信息的获取与发布
● 电子邮件（E-mail ）
● 网上交际
● 电子商务
● 网络电话
● 网上事务处理
● Internet 的其它应用
二、WWW 概念
WWW(World Wide Web)译为万维网，简称Web ，平常口头都读3W ，是Internet 上最重要的资源。它是由Internet 上的信息服务器连成的网络，是目前Internet 上发展最快和应用最广泛的服务。
1. 超文本传输协议（HTTP ）
HTTP(超文本传输协议) 是用于将超文本从WWW 服务器传输到本地浏览器的传送协议。 通信协议是构成计算机网络的基本要素之一。通信协议是网络上各个PC 机之间沟通的“语言”，有了协议之后，网络上的计算机才有可能互联。
2. 统一资源定位器（URL ）
Web 中用URL(统一资源定位器) 作为标识文档及其他资源的全球地址。URL 好比门牌号码，它可以帮助用户在Internet 定位所需要的资料。
URL 的一般形式为：
应用协议类型：//被访问的服务器的域名或IP 地址/路径名/…/文件名
冒号左边是说明URL 的访问方式。如：
ftp ：文件传输协议
１
,三、TCP/IP概念
TCP/IP（传输控制协议/互联网络协议）是一种网络通信协议，它规范了网络上的所有通信设备，尤其是一个主机与另一个主机之间的数据往来格式以及传送方式。TCP/IP是Internet 的基础协议，是由底层的IP 协议和TCP 协议组成的，也是一种电脑数据打包和寻址的标准方法。在数据传送中，可以形象地理解为有两个信封，TCP 和IP 就像是信封，要传递的信息被划分成若干段，每一段塞入一个TCP 信封，并在该信封面上记录有分段号的信息，再将TCP 信封塞入IP 大信封，发送上网。在接收端，一个TCP 软件包收集信封，抽出数据，按发送前的顺序还原，并加以检验，若发现错误，TCP 将会要求重发。
四、IP 地址概念
在TCP/IP网络中，每个主机都有唯一的地址，它是通过IP 协议来实现的。IP 协议要求在每次与TCP/IP网络建立连接时，每台主机都必须为这个连接分配一个唯一的32位地址，因为在这个32位IP 地址中，不但可以用来识别某一台主机，而且还隐含着网际间的路径信息。IP 地址一般以4个字节表示，每个字节又用十进制表示，范围是0~255，每个数字之间用点隔开，如192.168.101.5。
IP 地址的结构：
先按IP 地址中的网络标示号找到相应的网络，再在这个网络上利用主机ID 找到相应的主机。
五、域名系统
IP 地址是以数字来代表的主机地址，比较难记，为了使用和记忆方便，也为了便于网络地址的分层管理和分配，Internet 采用了域名管理系统，结构为：
主机名. 机构名. 网络名. 最高层域名
IP 地址和域名的关系就像每个人的身份证号和自己的名字，是一一对应的，当输入一个域名地址时，域名服务器（DNS ）就会搜索其对应的IP 地址，然后访问到该地址所表示的站点。
任务二 网上自我保护常识
一、使用密码时
1. 尽量避免使用有意义的英文单词、姓名缩写以及生日、电话号码等容易泄露的字符作为密码，最好采用字符与数字混合的密码。
２
,2. 在不同的场合使用不同的密码。
3. 不要贪图方便在拨号连接时选择“保存”密码。
4. 定期地修改自己的上网密码，至少一个月更改一次。
二、使用电子邮件时
应申请多个免费邮箱，对于不同的用途，分门别类地使用不同的邮箱。
三、下载时
1. 不下载来路不明的软件及程序。
2. 不要打开来历不明的电子邮件及其附件，以免遭病毒邮件的侵害。
四、安装防火墙
如有条件，应安装防火墙以抵御黑客的袭击。
情境二 网页设计与制作概述
任务一 网页设计与制作初识
３
,一、网站的组成元素
整体CIS ：网站以何种统一规范的视觉形象展现给用户。
文件系统
导航系统：便于用户浏览网站信息、获取网站服务，并且在浏览过程中不至于迷失，
在发现问题时可以及时找到在线帮助的所有形式。
技术模型：网站在开发过程中实施的技术组合方案。如网站的界面设计工具一般采用
Dreamweaver 、FrontPage 或Golive 结合Flash 、PhotoshopIllustrator或
Fireworks 等。
服务及体贴模型
项目化管理机制
网站的技术规范及其相关文案
二、网站与网页的关系
多个网页组合在一起便形成了一个网站。简单地说，多个网页通过超链接构成了整个网站。
三、基于Web 的客户端与服务器端
基于Web 的客户端是指用户或浏览器端，即网站所在的Web 服务器反馈给用户的网页信息。
基于Web 的服务器端是指网站文件所存放的Web 服务器。
四、基于Web 的人机交互
基于Web 的人机交互是指客户端的用户与Web 服务器端的应用程序之间的人机对话，即当用户向Web 服务器端的应用程序发出HTTP 请求时，Web 服务器端的应用程序对用户的请求产生响应并反馈给用户相应的结果页面。
４
,任务二 网站开发的技术层面及工具
网站开发的技术层面是指网站开发过程中的开发模块。
网站的整体CIS 设计、
内容 网站主要页面的版式设计
网页中的文字、图像与多媒体等对象的设计
：Photoshop 、Illustrator 、
工具 Golive 和LiveMotion
Adobe Studio:Dreamveaver、Flash 、Fireworks 和FreeHand 。
服务器端数据库开发
网站的测试：
网站的发布、维护与更新
任务三 网站的分类与精品网站赏析
网站分类一般的原则是网站的相对规模与主体功能。
综合门户类网站：在某个特定的行政区域内具有绝对的规模优势，同时具有相对稳定和庞大
５
,的服务受众群。如新浪网等。
垂直门户类网站：在某个行业中具有绝对的规模优势，同时其主体业务在本行业中处于绝对
的领先地位，或者在某个特定的技术领域具有绝对的技术权威，并同时具
有相对较大的规模。专业程度必须很高，或者说网站的服务内容相对比较
单一。如当当网上书店。
艺术类网站：网站提供的内容艺术氛围比较浓，同时网站的主体受众群一般均具有一定的艺
术素养。如中国艺术家协会网站。
个人网站：一些具有某项特长或为了充分展现自我的人群自主开发的网站，个性十分鲜明。
情境三 Dreamweaver CS 3
任务一 Dreamweaver CS 3初识
一、运行Dreamweaver CS 3
开始—程序—Adobe Dreamweaver CS 3
二、熟悉Dreamweaver CS 3工作区
任务二Dreamweaver CS 3基本操作
一、创建本地站点
本地站点是网站所有文件在本地计算机上的存放位置。
文件面板—管理站点—新建—站点
二、站点的导入、导出
站点—管理站点导入
导出
三、创建网页
站点管理窗口—右击要创建网页的文件夹—新建文档
６
,四、设置页面属性
修改—页面属性
五、创建超级链接
1、 文件链接：；链接到其他文档或文件。窗口—属性—链接
2、 锚记链接：跳转至统一文件或不同文件内的特定位置。
单击创建位置—插入面板—常用—命名锚记—选择创建锚记的文本或
图像—属性面板—链接
3、 E-Mail 链接：新建一个已填好收件人E-Mail 地址的空白电子邮件。
插入面板—常用—电子邮件链接
4、 空链接：未指派的链接，用于向页面上的对象或文本附加行为。
选择要链接的对象—属性面板—链接中输入#
任务三 文本的输入与编辑
一、 输入文本
1、 直接输入文本
2、 选择性粘贴
二、使用CSS 样式格式化文本
CSS 是一组格式设置规则，通过使用CSS 样式设置页面的格式，可将页面的内容与表示形式分离开。页面内容存放在HTML 文件中，而CSS 规则存放在外部样式表中。
1、 创建CSS 样式
选择文本—CSS 属性面板中右击—新建
2、 设置CSS 属性
双击CSS 样式
3、 应用CSS 样式
选择文本范围—CSS 样式面板中右击CSS 样式—套用
附加样式表
任务四 图像的插入与编辑
一、 插入图像
“插入”面板“常用”—“图像”按钮—图像
７
,二、设置图像属性
使用“属性”面板
三、编辑图像
使用“属性”面板
1、优化图像
2、裁剪图像
3、重新取样
4、调整图像的亮度和对比度
5、锐化图像
四、创建鼠标经过图像
“插入”面板“常用”—“图像”按钮—鼠标经过图像
任务五 表格的制作与使用
一、制作表格
1、插入表格
“插入”面板“常用”—“表格”按钮
2、编辑表格
1、）选择表格
单击表格边框线
2、）调整表格大小 “属性”面板 鼠标拖动
3、）添加行或列
定位—修改—表格—插入行
插入列
4、）删除行或列
删除行
删除列
选择行或列—Delete
5、）拆分单元格
８
,定位—修改—表格—拆分单元格 “属性”面板—拆分单元格
6、）合并单元格
选择单元格—修改—表格—合并单元格
7、）剪切或复制单元格
剪切
拷贝
8、）粘贴单元格
选定单元格—编辑—粘贴
9、）删除单元格内容
选定单元格—编辑—清除
3、 设置表格属性
使用“属性”面板
二、用表格布局页面
1、熟练使用表格嵌套和单元格的拆分与合并
2、表格边框必须设置为0。
任务六 AP Div元素的使用
AP 元素，即绝对定位元素，是分配有绝对位置的任何HTML 页面元素。
一、AP Div元素的创建和使用
1、插入AP Div元素
插入面板—布局—绘制AP Div元素
2、插入嵌套AP Div元素
1、）绘制嵌套AP Div元素
编辑—首选参数—AP 元素—选中嵌套复选框
2、）嵌套现有AP Div元素
窗口—AP 元素—Ctrl 鼠标拖动
3、设置AP Div元素属性
９
,属性面板
二、AP Div元素的基本操作
1、选择AP Div元素 鼠标单击
AP
元素面板
2、更改AP Div元素的堆叠顺序
属性面板
AP 元素面板
3、显示和隐藏AP Div元素
属性面板
AP 元素面板
4、 调整AP Div元素的大小
鼠标拖动
属性面板
5、 移动AP Div元素
鼠标拖动
键盘光标键
三、AP Div元素与表格的相互转换
将AP Div转换为表格
将表格转换为AP Div
任务7 网页布局
框架：框架不是文件，只是存放文件的容器，是将一个浏览器窗口划分为多个区域，每个区
域都可以显示不同的HTML 文件，它们的操作是独立的。
框架集：框架的集合，是HTML 文件，定义一组框架的布局和属性。
１０