第 章 网页制作基础 -...
19
! ! " 第 ! 章 " 网页制作基础 # 学习目标 在 "#$%&#%$ 日益普及的今天 人们上网不再仅仅满足于浏览信息 收发 '()*+, 越来越多的商家 个人都在网上 安家 建立自己的站点 本章将初步 介绍网页和网站的基本知识 学生应初步了解网页制作课程 并初步掌握网站 的策划 创建原则及开发流程 # 本章知识点 $ 网页与网站的概念 $ 常用网页制作工具 $ 网站的策划与创建原则 $ 网站的开发流程 # 本章案例 网站策划书
Transcript of 第 章 网页制作基础 -...
书书书
!
!
""""
第!
章"
网页制作基础
#
学习目标
在"#$%&#%$
日益普及的今天!人们上网不再仅仅满足于浏览信息"收发
'()*+,
!越来越多的商家"个人都在网上#安家$!建立自己的站点%本章将初步
介绍网页和网站的基本知识!学生应初步了解网页制作课程!并初步掌握网站
的策划"创建原则及开发流程%
#
本章知识点
$
网页与网站的概念
$
常用网页制作工具
$
网站的策划与创建原则
$
网站的开发流程
#
本章案例
网站策划书
!"#$%&'()'*+
网页制作
!
-
""""
!.!
"
网页与网站的概念
随着因特网的高速发展!网络已飞进寻常百姓家"据统计!
-//0
年我国上
网用户总数突破了!
亿!人们在工作#学习和生活中越来越多地使用因特网!社
会车轮的转动已经离不开因特网这个润滑油"而说到因特网!网民们会对各种
网站侃侃而谈"那么究竟什么是网站!什么是网页!它们和因特网之间存在什
么关系$在高速发展的信息时代!拥有网站是企业宣传的需要!是商务交易的
渠道!是个性张扬的途径"通过对本章的学习!我们将初步了解网页和网站的
基本知识!掌握网站的策划#创建原则及开发流程"
!.!.!
"
网站的概念
网站是因特网的重要组成部分!由域名和网站空间构成"打个比方!网站
就相当于我们在因特网上的%家&!网站空间是房子!域名是门牌号码"要安
%居&就要有%房子&!%房子&可以通过%租&和%购&两种方式实现"%租房&就相当
于在网络上申请空间租用虚拟主机!这种方式建立的网站投资很小!因此很受
个人和企业欢迎"大部分的个人网站和部分企业网站!比如中化总公司#青岛
海尔等公司的网站!都是采用这种方式建立的"而%购房&相当于购买并自建服
务器!通过检验后接入因特网!这种方式投资极大!要求有专业技术人员和专门
的设备!一般用于像1*233
#
"45
等专门的网络公司"
网站的种类很多!根据不同的分类方法可以分为不同类型"新华网曾对网
站按主体性质进行分类!分为政府网站#企业网站#商业网站#教育科研机构网
站#个人网站#其他非营利机构网站以及其他类型等"
不同类型的网站有各自的特点!但不管什么类型!一个网站都是由多个网
页及其文件#数据库组成"
!.!."
"
网页的概念
网页就是用6758
语言编写的页面文件!通过万维网'
999
(传输!用
9%:
浏览器 '如';
<
,3&%&
#
=%$>?*
<
%
等(显示!包含文本#图片#声音和数字电影
等信息"各网页之间通过超级链接连接成一个整体'即网站("网页的本质是
6758
代码"
查看网页源代码的方法是)在浏览器窗口中!单击%查看&菜单的%源文件&
子菜单!即可打开记事本显示该网页的6758
代码"
!.!.#
"
主页!首页和网页的区别
主页#首页和网页是几个容易混淆的概念"网页泛指万维网上所有的页
第!
章
网页制作基础
!
@
""""
面*而主页则是网站的%指挥所&!通过主页中的超链接可以到达网站中的其他
页面*首页特指用户进入网站后看到的第一个页面!通过这个页面可以进入网
站的主页!此时的首页只是起到欢迎访问者的作用"但很多网站中首页和主页
合为一体!是同一个网页"用户浏览网站时!在浏览器的地址栏里输入网站的
AB8
地址后!浏览器就会打开%主页&或%首页&"
!.!.$
"
网页的组成要素
构成网页的要素包括文字#图像#超级链接和其他多媒体元素"这几个部
分内容有机结合!组成了完整的网页"
!.
文字
文字是网页的主要表现形式!由于文字占用的空间小!下载速度快!且有各
种不同的格式!因此是传播信息的基本媒介"
-.
图像
图像是网页传播信息的另一个基本媒介!这是由于它直观#生动#美观"适
用于网络的图像格式包括CD'E
和E"F
等"
CD'E
格式的图像占用空间小#下
载速度快!适于存储颜色丰富的画面!如照片等"
E"F
格式的图像采用无损压
缩的方式!支持动画格式和透明背景!使网页效果更为生动!但只支持-0G
种颜
色!所以不适合对颜色质量要求高的情况"
@.
超级链接
超级链接是网页之间的纽带和桥梁!是网页中最重要#最根本的元素之一"
通过它可以从一个网页转到另一个网页!也可以从一个网站转到另一个网站"
当用户在浏览网页的时候!鼠标经过超级链接时就会变为小手形状!单击
鼠标!浏览器就会打开超级链接所指向的网页"
H.
多媒体元素
网页上的多媒体元素包括音频#视频和动画等!它们使网页更加生动#更具
有吸引力"有的多媒体文件需要浏览器安装插件!如B%*,D,*
I
%&
#
J23?KL*M%
等!才可以运行"
!.-
"
常用网页制作工具
!.".!
"
网页编辑工具
!.
超文本标记语言&
6758
'
6758
'
6
I<
%&7%;$5*&KN
<
8*#
O
N*
O
%
(是一种专门用于网页制作的编程
语言!由许多标记构成"它是一种跨平台的语言!可以使用一般的文字处理软
!"#$%&'()'*+
网页制作
!
H
""""
件!如记事本等来编辑"
-.P&%*)L%*M%&
P&%*)L%*M%&
是5*?&3)%Q+*
公司出版的一种专业6758
编辑器!提供了
6758
代码和可视化的几种编辑环境!还可以使用RJD
#
RJD.='7
#
S3,QFN(
>+3#
标记语言 '
SF58
(#
CJD
和D6D
等服务器语言来生成由动态数据库支持
的9%:
应用程序"它制作出的网页兼容性较好!制作效率很高!与F,*>2
#
F+&%(
L3&K>
并称为网页制作三剑客"
@.F&3#$D*
O
%
F&3#$D*
O
%
是微软公司推出的一款可视化的网页编辑软件"它是TUU+?%
系
列中的一员!因此界面继承了TUU+?%
系列软件的特点!容易上手!且有直观的网
页制作和管理方法!简化了大量工作"使用该软件可以设计出精美的网页!也
可以结合数据库技术制作动态网页"
注意)由于可视化编辑软件的出现!人们制作网页不再被复杂的6758
代
码所困扰!但无论使用何种工具!都改变不了一个事实)网页是由6758
代码
所组成的!
6758
代码是网页的本质"某些在可视化界面下无法解决的问题
可尝试到代码环境中去解决"
!."."
"
素材创作与编辑工具
!.
图形图像制作工具
D23$3>23
<
是由RQ3:%
公司开发的全球标准的图像处理软件!它功能完
善!性能稳定!使用方便!能进行各种专业化的图像处理"
F+&%L3&K>
是由5*?&3)%Q+*
公司开发的专门为制作网页素材而设计的图
像处理软件!同时也用于专业的网页图形设计及制作"
",,N>$&*$3&
是RQ3:%
公司推出的矢量图形绘制软件!是目前图形图像领域
的主流软件之一!界面风格与D23$3>23
<
类似!是熟悉D23$3>23
<
的用户制作
矢量图形的首选"
S3&%,P&*L
是S3&%
公司开发的矢量绘图软件!它拥有成熟的编辑平台#强
大的处理功能和简洁直观的操作!是美术设计和网页设计人员公认的优秀
软件"
-.
动画制作工具
F,*>2
是5*?&3)%Q+*
公司出品的矢量图形编辑和交互动画创作的专业软
件!广泛应用于网页设计和多媒体创作等领域"由于强大和独特的功能!
F,*>2
已成为交互式矢量动画的标准!在网上非常流行"
!.".#
"
网站上传工具
目前除了网页制作软件自带的网站上传工具!常用上传工具有SN$%F7D
#
第!
章
网页制作基础
!
0
""""
8%*
<
F7D
等"
!.@
"
网站的策划与创建原则
有了工具我们就可以开发自己的网站了!但我们到底要创建什么样的网站
呢$我们创建网站的行为可能是自发的!也可能是企业或客户要求的"不管是
哪种情况!网站的开发都是一项复杂的工程!必须在创建之前先进行周密的策
划"网站的策划就是在创建网站前对市场进行分析!根据网站的服务对象!确
定建站的目的和网站的功能!从而明确网站提供的服务!然后进行网站的技术#
内容#费用#测试#维护等规划工作"网站策划对网站建设起到计划和指导的作
用!可以说网站的策划是创建网站的前提条件"
!.#.!
"
建站前要进行市场分析
进行市场分析是创建营利性的网站的必要环节!创建普通的非营利性网站
此环节可以省略"进行市场分析需要调查市场行情!对公司#企业等营利单位
分析其自身条件#市场优势#建站能力等!还需要对其市场主要竞争者进行
分析"
!.#."
"
确定建站目的及功能定位
可以根据网站的服务对象!确定建站的目的和网站的功能"为什么要建立
网站$是为企业做宣传!进行商业上的交易!还是展示个人个性或单位形象$
根据目的确定网站的类型和所要提供的服务!实现功能的定位"
!.#.#
"
确定网站技术方案
根据网站的功能确定网站技术解决方案)是%租房&还是%买房&!操作系统
选择9+#Q3L-///
+
=7
还是A#+;
#
8+#N;
!采用模板建站还是自己开发!网站将
采用何种安全性措施!使用动态程序数据库还是静态页面!动态网站的实现选
择什么应用程序和数据库等"
!.
定位网站主题和名称
定位网页主题时应该遵循以下原则)
! 题材要小而精!主题要鲜明突出"
! 题材最好是自己擅长或者喜爱的内容"
! 不要太滥或者目标太高"
网站名称是网站主题最凝炼的概括!一个好的#响亮#易记的名称对网站的
形象和宣传推广有很大影响"一般应遵循的原则如下)
!"#$%&'()'*+
网页制作
!
G
""""
! 名称要合法#合理#合情"
! 名称要易记"最好用中文名称!字数应该控制在六个字'最好四个字(以
内!一般友情链接的小83
O
3
尺寸是VVW@!
'单位"
像素(!而六个字的
宽度是XV
个像素左右!适合于其他站点的链接排版"
! 名称要有特色"
-.
确定网站的风格
风格是指网站的整体形象给浏览者的综合感受"它是抽象的#独特的#有
人性的!就像人的性格"关于风格有如下建议)
! 使标志83
O
3
尽可能地出现在每个页面上"
! 突出标准色彩"
! 突出标准字体"在关键的标题#菜单#图片里使用统一的标准字体"
! 想一条琅琅上口的宣传标语"把它做在4*##%&
里!或放在醒目的位置!
来说明网站的特色"
! 使用统一的语气和人称"
! 使用统一的图片处理效果"
! 创造一个网站特有的符号或图标"
! 用自己设计的花边#线条#点"
! 展示网站的荣誉和成功作品"
! 告诉网友关于你的真实的故事和想法"
! 最好能把每页的风格统一起来"
@.
定位网站的S"
形象
S"
'
?3&
<
3&*$%+Q%#$+$
I
(是广告术语!意思是通过视觉来统一企业的形象"
一个杰出的网站和实体公司一样!也需要整体的形象包装和设计"准确的#有
创意的S"
设计!对网站的宣传推广有事半功倍的效果"如可口可乐公司使用
全球统一的标志#色彩和产品包装!给我们的印象极为深刻"
H.
确定网站的栏目和版块
网站的栏目实质上是一个突出显示网站主题的大纲索引"在制作网页前!
一定要先规划好合理的栏目和版块"
0.
确定网站的目录结构和链接结构
! 不要将所有文件都存放在根目录下"
! 按栏目内容建立子目录"
! 在每个主目录下都建立独立的")*
O
%>
目录"
! 目录的层次一般不要超过@
层"
! 不要使用中文目录名和过长的目录名!尽量使用意义明确的目录名!如
小写英文名称或汉语拼音及其缩写形式"
第!
章
网页制作基础
!
X
""""
!.#.$
"
确定网站测试方案
网站测试就是模拟用户访问网站的过程!在访问过程中发现问题!从而改
进设计"网站发布前要细致周密地测试!以保证正常浏览和使用"
!.#.%
"
网站维护
'
!
(服务器及相关软硬件的维护"对可能出现的问题进行评估!制定响应
时间"
'
-
(数据库维护"
'
@
(内容的更新#调整等"
'
H
(制定相关网站维护的规定!将网站维护制度化#规范化"
!.#.&
"
网站发布与推广
介绍该网站采用什么方式进行发布和推广!比如采取广告形式等"
!.#.'
"
网站建设日程表
确定各项规划任务的开始和完成时间#负责人等"
!.#.(
"
费用预算
各项事宜所需费用清单"
以上为网站策划和创建所需要考虑的方面"在建设网站之初一定要进行
细致的规划!才能达到预期的建站目的"网站策划得到的结论具体表现为站点
策划书"站点策划书应该尽可能涵盖网站策划中的各个方面!但根据不同网站
的需求和建站目的!策划书内容也会适当增加或减少"网站策划书的写作要科
学#认真#实事求是"
附"网站策划书#范例$
此范例为网络上发布的一篇商业网站的站点策划书"
网站策划书
市场分析(随着社会的不断发展!美容成为一种新时尚"工作的辛劳让更
多的消费者在闲暇时间去放松自己!去呵护自己的皮肤!尤其是女性朋友"根
据市场调研!美容品的网站非常多!尤其是一些出名的化妆品备受消费者的青
睐!但在这些出名的美容产品中间很难搜索到?芳伊翠"一些同类产品没有独
!"#$%&'()'*+
网页制作
!
V
""""
立的网站!只是放在商城里销售!消费者了解不到更多的信息"?芳伊翠是来
自法国的名牌产品!根据目前的需求趋势!进一步提高其知名度!扩展客户群!
建立?芳伊翠网站具有可行性"
公司现状(公司是?芳伊翠产品的代理商!是专业美容美体中心!所使用的
产品都是绿色美容品?芳伊翠"在做美容的同时也可以提供公司的产品!让消
费者在试用过肯定其效果后再订购"多项服务更满足消费者的需求!我们会最
大程度地避免其他网站的弊端!创造更方便的购物车!提供更新更全的资讯!争
取与老顾客建立稳固的客户关系!吸引新顾客"把握市场!准确定位!发展的潜
力是很大的"
网站目的及功能(推出顺子专业美容美体中心!推出?芳伊翠产品!同客户
建立4-S
的电子商务!满足消费者需求"宣传产品的同时还要进行电子商务!
根据公司的需要和计划!确定网站的功能为网上营销型和电子商务型!网站进
行的是4-S
电子商务"确定网站达到让更多的客户了解我们的美容中心和产
品!记住我们的网站的目的!使产品在美容品的电子商务市场中拥有更多的客
户!从而提高市场份额!增加销售量"网站设有良好的客户关系管理系统!为消
费者提供更好的服务"
网站技术解决方案(申请域名!采用宽带接入方式!使客户能高速访问网站
服务器"在9%:
平台方面!选用DS
服务器!
9+#Q3L>=7
+
-///
操作系统!保
证其稳定性"以5+?&3>3U$""J
作为9%:
服务器软件!采用RJD
技术!数据库
软件采用JY8J%&M%&-///
!有利于更好地维护"可运用P&%*)L%*M%&A,$&*(
Q%M
#
F+&%L3&K>
#
D23$3>23
<
#
F,*>2
等应用软件!还可同时运用Z4J?&+
<
$
#
C*M*
等
技术"在网站安全方面!网站人员通过防黑客#防病毒技术维护网站安全"
网站内容(包括公司简介#展示系统'产品分类#产品价格(#购物定单#配送
方式#最新推荐#联系方式#疑难解答等"客户可通过会员注册#由网站提供的
订单确认#个人信息保密措施!通过网上支付或银行汇款购买"
网站设计特色(网站栏目设计以产品系列和中心专业疗程为主!网站色彩
以象征大自然环保色的绿色为主!反映出绿色产品的特点!直观清新!给用户一
种视觉上的舒适感!让用户更好地了解信息"同时!根据目标访问群体层次的
不同'如地区性#年龄#阶层的差异(!适应每一类消费者的需求"网站改版计划
定于每半年进行较大规模的改版!不断补充#更新!调整内容及页面版式"
网站维护(负责网页的及时更新!如有新消息#新资料!由代理商发到管理
员信箱或直接交给管理员"管理员收到资料后必须以最快的速度将最新的美
容产品资讯发布到网站上"对服务器软硬件和数据库的维护!以及对可能出现
的问题进行评估!制定响应时间"在维护网页的同时!必须保证页面下载速度
快!保证浏览者能及时看到页面信息!与客户及时互动!扩大宣传效果和影响
第!
章
网页制作基础
!
[
""""
力"网站的维护要制度化#规范化"
网站测试(网站发布前对服务器的安全性和稳定性!程序和数据库!兼容性
进行测试"
网站发布与推广(发布广告'如优惠期#免费试用#大派送活动(!加强宣传
推广力度!添加友情链接"
费用明细(网站宣传费)
-///
元+年!网站维护费)
-0//
元+年!域名申请费)
-//
元+年"
!.H
"
网站的开发流程
!.$.!
"
定义站点
'
!
(定义站点的第一件事就是建一个文件夹!用来存放整个网站的所有页
面和素材!这个文件夹叫做站点根目录"尽可能减少根目录的文件存放数"
'
-
(按策划的栏目内容建立子目录"
'
@
(在每个主目录下建立各自的图像文件夹"
'
H
(收集和制作素材"
!.$."
"
设计制作页面
!.
版面布局
版面指的是浏览器看到的完整的一个页面'可以包含框架和层("由于页
面尺寸与显示器大小及分辨率有关系!给显示器设置不同的分辨率!显示的页
面尺寸也不同"一般分辨率在V//WG//
个像素的情况下!页面的显示尺寸为
XV/WH-V
个像素*分辨率在GH/WHV/
个像素的情况下!页面的显示尺寸为
G-/W@!!
个像素*分辨率在!/-HWXGV
个像素的情况下!页面的显示尺寸为
!//XWG//
个像素"
布局就是以最适合浏览的方式将图片和文字排放在页面的不同位置"设
计页面布局方式应注意)
! 设计页面应以网站目标为准绳!最大限度地体现网站的功能"
! 形象鲜明!易于接受"
常见的页面布局形式的种类)
'
!
(%
7
&型布局)页面顶部为横条'网站标志\
广告条(!下方左半部分为主
菜单!下方右半部分显示内容!如图!(!
所示"这是网页设计中用得最广泛的一
种布局方式"优点是页面结构清晰!主次分明!是初学者最容易掌握的布局方
法"缺点是版面呆板!如果细节色彩上不注意!会缺乏生机"
!"#$%&'()'*+
网页制作
!
!/
"""
图!(!
"
%
7
&字型布局
'
-
(%口&字型布局)页面的上下各有一个广告条!左侧是主菜单!右侧放置
友情链接等内容!中间是主要内容!如图!(-
所示"优点是充分利用版面!信息
量大!是内容较多的综合性网站的首选"缺点是页面拥挤!不够灵活"
图!(-
"
%口&字型布局
'
@
(%三&字型布局)这种布局在页面中间横向有两条色块!将页面整体分割
为四部分!色块中大多放广告条!如图!(@
所示"国外的站点多用此种布局!国
内用的不多"
'
H
(
DTD
布局)页面布局像一张宣传海报!以一张精美图片作为页面的设计
第!
章
网页制作基础
!
!!
"""
图!(@
"
%三&字型布局
中心!在适当位置放主菜单!如图!(H
所示"优点是风格独特#漂亮#吸引人"缺
点是网页显示速度慢"该布局方式常用于个人网站"
图!(H
"
DTD
布局
-.
页面元素的设计
'
!
(文字)在网页中设置字体时!要注意以下基本原则)
! 不要使用超过@
种字体类型!否则网页看起来将显得杂乱!没有主题"
浏览器中!默认标准字体是中文%宋体&和英文%
7+)%>=%LB3)*#
&"同一版面
不要用@
种以上字体"
! 不要用太大的字!正文每行文字长度最好在-/
!
@/
个中文字'即H/
!
G/
个英文字(!标题以6!
!
6@
字号为佳!正文的字号以[
!
!!
磅为佳!表格或
!"#$%&'()'*+
网页制作
!
!-
"""
清单内的文字应采用相同或略小的字号"
! 字的颜色最好在@
种以内!标题与正文的颜色也应有所区别"
! 最好不要使用不停闪烁的文字"
'
-
(图片)图片和文本是网页的两大基本构成元素!在页面布局中应处理好
二者的位置关系"网页上的图片格式一般使用CD'E
和E"F
!这两种格式具有
跨平台的特性!可以在不同操作系统支持的浏览器上显示"使用图片时不要使
用横跨整个屏幕的图片!建议使用占屏幕宽度X0]
的图片"
'
@
(多媒体)除了文本和图片!页面中还可以有声音#动画#视频等其他媒
体"虽然由于多媒体文件会影响网页下载的速度而不提倡在网页中大量使用!
但它们可以使网页变得更生动#吸引人"例如!对于F,*>2
动画!一些应用了
F,*>2
动画的网站给用户一个跳过显示F,*>2
动画的选择"
'
H
(页脚)页脚就是页面的最底端!通常用来显示作者或公司等制作信息"
页脚信息和主体信息之间通常用水平线进行分隔"
'
0
(添加动态效果)静态网页制作完成后!接下来的工作就是为网页添加动
态效果!包括一些脚本语言程序和数据库程序的设计!以及加入动画效果等"
!.$.#
"
测试网站
按照策划方案将网站制作好后!应对其进行测试"主要测试内容包括)
'
!
(文字是否有错误!图片能否正常显示"
'
-
(程序及数据库测试"
'
@
(链接是否有错误"很多网页编辑器的站点管理都有此功能"
'
H
(服务器的安全性和稳定性"
'
0
(兼容性测试"要为用户着想!最少在一台DS
机和一台5*?
机上测
试网站"
'
G
(上传#维护和更新网站"
网站上传到网络以后!网站的建设并没有划上句号"后面需考虑的就是维
护的问题"维护管理工作往往重复而死板"个人性质的网站在维护管理上比
较简单"另一个就是更新问题"没人对过时信息有兴趣!网站内容一定要注意
即时性"长期不更新的网站就像一池死水!失去对浏览者的吸引力"应定期对
网站做一次小翻新!时时保持新鲜感"
!.0
"
习题与上机实训
!.%.!
"
选择题
!.
下面说法错误的是'
""
("
第!
章
网页制作基础
!
!@
"""
R.
创建站点时应先创建站点根目录
4.
在制作站点时应使用标准色彩
S.
规划目录结构时!应该在每个主目录下都建立独立的图像文件夹
P.
为了使站点目录明确!应该采用中文目录
-.
网页中常用的图片文件类型有'
""
("
R.45D
""""""
4.CD'E
""""""
S.R"
""""""
P.E"F
@.
按照性质分!网站的类型包括'
""
("
R.
政府网站#教育科研机构网站4.
企业网站#商业网站
S.
个人网站P.
其他非营利机构网站以及其他类型
H.
下面关于素材准备的说法错误的是'
""
("
R.
是网站制作中的一个重要环节4.
素材可以自己制作
S.5*?&3)%Q+*
公司的F+&%L3&K>
可以和P&%*)L%*M%&
很好地结合使用
P.
素材一般应起有意义的中文名
0.E"F
图像的优点有'
""
("
R.
支持动画格式4.
支持透明背景
S.
无损方式压缩P.
支持-H
位真彩色
G.
网页中可包含的元素有'
""
("
R.
文字4.
图片S.
超链接P.
多媒体文件
X.
网站上传可以通过'
""
("
R.P&%*)L%*M%&
的站点窗口4.F7D
软件
S.F,*>2
软件P.F+&%L3&K>
软件
V.
下列说法错误的是'
""
("
R.
网站制作好后上传到因特网上就大功告成了
4.
网站空间的获取方法可以申请!也可以自己购买架设服务器接入因特网
S.
为网页添加动态效果!就是添加一些脚本语言程序和数据库程序
P.
网站发布前要细致周密地测试!以保证正常浏览和使用
!.%."
"
简答题
!.
简述网页#主页和首页之间的关系"
-.
通常网页的布局方式有哪几种$各有何特点$
@.
简述S"
设计的概念"
H.
简述网站常用链接结构的类别及其特点"
!.%.#
"
上机实训
上网打开一个网站!完成以下操作)
!.
打开一个网页的源代码"
-.
浏览网站!进行分析!假设自己是该网站的设计者!试写一篇创建该网站的站点策
划书"
!
!H
"""
第-
章"
初识P&%*)L%*M%&5^-//H
#
学习目标
5*?&3)%Q+*
公司推出的P&%*)L%*M%&5^-//H
是一款专业化的网页设
计软件!它为用户提供了#所见即所得$的可视化编辑界面%通过本章的学习!
应了解并掌握P&%*)L%*M%&5^-//H
的界面组成"新增功能以及面板的使用
方法!并能够创建和编辑站点以及设置它们的属性%
#
本章知识点
$
P&%*)L%*M%&5^-//H
简介
$
启动P&%*)L%*M%&5^-//H
$
认识P&%*)L%*M%&5^-//H
界面
$
创建本地站点
$
编辑站点
#
本章案例
#为希望工程献爱心$
图-(!
"
%为希望工程献爱心&
第-
章
初识P&%*)L%*M%&5^-//H
!
!0
"""
-.!
"
P&%*)L%*M%&5^-//H
简介
5*?&3)%Q+*
公司推出的P&%*)L%*M%&5^-//H
是一款专业化的网页设
计软件"它为用户提供了%所见即所得&的可视化编辑界面!支持P6758
'
P
I
#*)+?6758
(和SJJ
'
S*>?*Q+#
O
J$
I
,%J2%%$>
(等多种先进技术!可以轻松
制作出跨平台#跨浏览器的兼容性极好的网页!并且可以在编辑网页的同时自
动生成精炼#高效的6758
源代码"除此之外!
P&%*)L%*M%&
还提供了完善的
站点管理机制!集网页制作和站点管理于一体!成为目前最为流行的网页设计
工具!与F+&%L3&K>
#
F,*>2
合称为5*?&3)%Q+*
公司的网页制作三剑客"
-.-
"
启动P&%*)L%*M%&5^-//H
P&%*)L%*M%&5^-//H
安装完毕后!开始菜单中会自动添加相应的菜单
项"要启动P&%*)L%*M%&5^-//H
!选择%开始+程序+5*?&3)%Q+*
+
5*?&3)%(
Q+*P&%*)L%*M%&5^-//H
&即可"
在9+#Q3L>
中首次启动P&%*)L%*M%&
时!会出现一个对话框!让用户选择
工作区!如图-(-
所示"在该对话框中用户可以选择%设计者&和%代码编写者&
两种工作界面中的一种"建议大多数用户使用%设计者&工作区!%代码编写者&
工作区适用于有较高网页编程水平的使用者"
图-(-
"
%工作区设置&对话框
!"#$%&'()'*+
网页制作
!
!G
"""
-.@
"
认识P&%*)L%*M%&5^-//H
界面
")#)!
"
*+,-./,-0,+12"33$
工作窗口
系统启动P&%*)L%*M%&5^-//H
软件后!会自动打开P&%*)L%*M%&5^
-//H
起始页!如图-(@
所示"起始页可以打开最近使用过的文档或创建新文
档"还可以从起始页通过产品介绍或教程了解关于P&%*)L%*M%&
的更多信息"
若选中起始页底部%不再显示此对话框&复选框!则以后启动P&%*)L%*M%&5^
-//H
时不会显示起始页"
图-(@
"
P&%*)L%*M%&5^-//H
起始页面
若还想打开起始页!那么先选择%编辑&菜单中的%首选参数&选项!打开%首
选参数&对话框!然后在对话框左侧的目录列表中选择%常规&选项!在右边选中
%显示起始页&复选框"如图-(H
所示"
图-(H
"
%首选参数&对话框
第-
章
初识P&%*)L%*M%&5^-//H
!
!X
"""
")#)"
"
*+,-./,-0,+12"33$
工作区元素
单击起始页中%创建新项目&栏的%
6758
&项即可打开一个空白未命名的
文档窗口!即P&%*)L%*M%&5^-//H
的工作窗口!在这个窗口中集成了P&%*)(
L%*M%&
的全部元素"如图-(0
所示"
图-(0
"
P&%*)L%*M%&5^-//H
工作窗口
!.
文档窗口
文档窗口显示当前创建和编辑的6758
文档"通常有三种显示模式!即
设计视图#代码视图#设计和代码视图!用户可以根据需要在三种视图模式间任
意切换"
-.
文档工具栏
文档工具栏中包含常用的编辑文档的按钮"如图-(G
所示"
图-(G
"
文档工具栏
!"#$%&'()'*+
网页制作
!
!V
"""
@.
状态栏
%文档&窗口底部的状态栏显示当前编辑文档的状态!如图-(X
所示"
图-(X
"
状态栏
'
!
(标签选择器)显示控制选定对象的标记"单击任意标记!可以在文档窗
口高亮显示其内容"
'
-
(窗口大小)通过窗口大小弹出菜单!可以设置文档窗口的大小为预定义
或自定义的尺寸"
'
@
(文件大小和估计的下载时间)显示估计文档大小和页面的下载时间!下
载时间默认是以每秒-V.VK:
估算的"
H.
插入栏
插入栏位于文档窗口上面!如图-(V
所示!包含用于创建和插入对象的按
钮"当鼠标移到一个按钮上时!会出现提示标签"插入栏中的按钮被组织成几
个类别!可以通过单击左侧箭头!在出现的下拉菜单中切换类别"
图-(V
"
插入栏显示为菜单方式
插入栏的布局方式有菜单和选项卡两种"图-(V
为菜单方式!图-([
为选
项卡方式"要以选项卡形式显示!则单击左侧的箭头!选择%显示为选项卡&*要
切换回菜单方式!则右键单击插入栏!选择%显示为菜单&"
图-([
"
插入栏显示为选项卡方式
0.
属性检查器
或称属性栏!默认情况下位于工作区的底部!如图-(!/
所示!用于显示和编
辑当前选定的页面元素的常用属性!其内容根据选定的元素会有所不同"
图-(!/
"
属性栏
若要展开或折叠属性检查器!则单击属性检查器右下角的扩展箭头!如图
第-
章
初识P&%*)L%*M%&5^-//H
!
