静态页面视觉设计课件.ppt

1、第1章 静态页面视觉设计与Dreamweaver第1章 静态页面视觉设计与Dreamweaver1.1网页视觉设计教学1.1.1教学的目的与目标1.1.2教学的内容与方法1.1.3考核内容与要求1.2认识网页1.2.1网页的本质1.2.2网页设计工具与基本步骤1.2.3网页视觉设计定义与特点1.3初识Dreamweaver1.3.1工作界面1.3.2规划站点1.1网页视觉设计教学1.1.1教学的目的与目标 网页视觉设计是一门综合性较强的实践类课程，主要围绕网页视觉设计的概念、基本元素、风格布局结合网页制作软件展开，目的是使学生较全面地了解网页视觉设计的相关知识，深入掌握网页视觉布局的方法；培养

2、学生对网页视觉设计的思维能力和创新意识，提高对网页视觉设计的整体把握和科学实施能力。1.1网页视觉设计教学1.1.2教学的内容与方法1.主要内容1）网页视觉设计概述2）网页视觉设计内容与技巧3）网页视觉设计实践2.方法与手段1）课堂讲授与作品赏析、专题研讨、课题辅导与设计实践相结合2）板书与多媒体教学课件相结合1.1网页视觉设计教学1.1.3考核内容与要求1.内容个人博客网页设计（包括文案策划及多媒体平台展示）2.要求1）学习态度10%2）文案表述20%3）网页设计构思与表现30%4）整体效果40%1.2 认识网页网页的概念网页的概念网页是一种可以在WWW上传输并被浏览器识别、翻译并显示出来的

3、特殊文件。一般我们常见到的网页文件是HTML【Hypertext MarkupLanguage，超文本标记语言】文件。所谓“超文本”就是指页面内除文本外，还可以包含图片、链接、音频甚至视频等非文字的组成部分。1.2 认识网页 网页就是我们上网时在浏览器中看到的一个个画面，网站则是一组相关网页的集合。一个小型网站可能只包含几个网页，而一个大型网站则可能包含成千上万个网页。另外，打开某个网站时显示的第一个网页被称为网站的主页（或首页），它可以说是网站的门户，通过它不仅可以了解网站的性质和内容，还可以访问网站中的其他页面。1.2.1 网页的本质我们看到的网页包含了一组文件，它们分别是网我们看到的网页

4、包含了一组文件，它们分别是网页文件（扩展名为页文件（扩展名为.html、.asp等）、图像文件等）、图像文件（扩展名为（扩展名为.jpg、.gif等）和等）和Flash动画文件动画文件（扩展名为（扩展名为.swf）等。）等。1.2.1 网页的本质从浏览者的角度看，网页中无非就是一些文字、从浏览者的角度看，网页中无非就是一些文字、图像和动画等。但从专业的角度来讲，网页中的图像和动画等。但从专业的角度来讲，网页中的元素各有其不同的作用，可以将他们分为元素各有其不同的作用，可以将他们分为Logo站标、导航条、站标、导航条、banner广告条、标题栏和按广告条、标题栏和按钮等，如下图所示。钮等，如下图

5、所示。站标站标导航条导航条按钮按钮广告条广告条标题栏标题栏1站标站标也叫站标也叫Logo，是网站的标志，其作用是使人看，是网站的标志，其作用是使人看见它就能够联想到企业。因此，网站见它就能够联想到企业。因此，网站Logo通常采通常采用企业的用企业的Logo。Logo一般采用蕴含企业文化和特色的图案，或是一般采用蕴含企业文化和特色的图案，或是与企业名称相关的字符或符号及其变形，当然也有与企业名称相关的字符或符号及其变形，当然也有很多是图文组合。很多是图文组合。2导航条导航条是链接到网站内主要页面的超链接组合，它导航条是链接到网站内主要页面的超链接组合，它可以引导浏览者轻松找到网站中的各个页面，导

6、航可以引导浏览者轻松找到网站中的各个页面，导航条也因此而得名。条也因此而得名。设计导航条时，应注意以下几点设计导航条时，应注意以下几点:1)如果网站内容不多，可根据网站风格尝试灵活摆如果网站内容不多，可根据网站风格尝试灵活摆放导航条，也可以使用图片或放导航条，也可以使用图片或Flash动画等制作导动画等制作导航条。航条。2)如果网站栏目很多，可以将导航条分为多排放置如果网站栏目很多，可以将导航条分为多排放置在在Logo的下方或右侧。为便于查看，可为各排设的下方或右侧。为便于查看，可为各排设置不同的底色。置不同的底色。3广告条广告条又称广告条又称Banner，其功能是宣传网站或替其，其功能是宣传

7、网站或替其他企业做广告。他企业做广告。Banner的尺寸可以根据版面需的尺寸可以根据版面需要来安排。要来安排。4标题栏此处的标题栏不是指整个网页的标题栏，而是网此处的标题栏不是指整个网页的标题栏，而是网页内部各版块的标题栏，是各版块内容的概括。页内部各版块的标题栏，是各版块内容的概括。它使得网页内容的分类更清晰、明了，大大地方它使得网页内容的分类更清晰、明了，大大地方便了浏览者。便了浏览者。标题栏可以是文字加不同颜色的背景，也可以是标题栏可以是文字加不同颜色的背景，也可以是图片，这要根据网站的内容和规模来决定。图片，这要根据网站的内容和规模来决定。5按钮在现实生活中，按钮通常是启动某些装置或机

8、关在现实生活中，按钮通常是启动某些装置或机关的开关。网页中的按钮也沿用了这个概念。网页的开关。网页中的按钮也沿用了这个概念。网页中的按钮被点击之后，网页会实现相应的操作，中的按钮被点击之后，网页会实现相应的操作，比如页面跳转，或数据的传输等。比如页面跳转，或数据的传输等。案例解析Anna Sui日本官方网站设计 Dreamweaver Dreamweaver是由是由Adobe公司推出的一款在网公司推出的一款在网页制作方面大众化的软件，它具有可视化编辑界面，页制作方面大众化的软件，它具有可视化编辑界面，用户不必编写复杂的用户不必编写复杂的HTMLHTML源代码就可以生成跨平台、源代码就可以生成跨

9、平台、跨浏览器的网页，不仅适合于专业网页编辑人员的跨浏览器的网页，不仅适合于专业网页编辑人员的需要，同时也容易被业余网友们所掌握。需要，同时也容易被业余网友们所掌握。DreamweaverDreamweaver支持动态支持动态HTMLHTML，并采用了，并采用了Roundtrip HTMLRoundtrip HTML技术，技术，DreamweaverDreamweaver是一种可以满是一种可以满足多层次需求、功能强大的可视化专业级网页设计足多层次需求、功能强大的可视化专业级网页设计及制作工具。及制作工具。1.2.2网网页设计页设计工具工具 Photoshop Photoshop是由是由Adob

10、eAdobe公司开发的图形处理软件，公司开发的图形处理软件，它是目前公认的它是目前公认的PCPC机上最好的通用平面美术设计软机上最好的通用平面美术设计软件，它功能完善、性能稳定、使用方便，所以在几件，它功能完善、性能稳定、使用方便，所以在几乎所有的广告、出版、软件公司，乎所有的广告、出版、软件公司，PhotoshopPhotoshop都是都是首选的平面制作工具。首选的平面制作工具。1.2.2网网页设计页设计工具工具 FireworksFireworks是由是由MacromediaMacromedia公司开发，后被公司开发，后被Adobe公司收购公司收购的图形处理工具，它的出现使的图形处理工具，

11、它的出现使WebWeb作图发生了革作图发生了革命性的变化。因为命性的变化。因为FireworksFireworks是第一套专门为制作网页图是第一套专门为制作网页图形而设计的软件，同时也是专业的网页图形设计及制作形而设计的软件，同时也是专业的网页图形设计及制作的解决方案。作为一个图像处理软件，的解决方案。作为一个图像处理软件，FireworksFireworks能够自能够自由地导入多种格式的图像进行处理。由地导入多种格式的图像进行处理。FireworksFireworks还能够自动切割图像、生成光标动态感应还能够自动切割图像、生成光标动态感应的的JavaScriptJavaScript程序等等，

12、而且程序等等，而且FireworksFireworks具有强大的动画具有强大的动画功能和一个相当完美的网络图像生成器。功能和一个相当完美的网络图像生成器。1.2.2网网页设计页设计工具工具 FlashFlash是美国是美国MacromediaMacromedia公司开发后被公司开发后被Adobe公司公司收购收购的矢量图形编辑和动画创作的专业软件，它是一种的矢量图形编辑和动画创作的专业软件，它是一种交互式动画设计工具，用它可以将音乐、声效、动画以交互式动画设计工具，用它可以将音乐、声效、动画以及富有新意的界面融合在一起，以制作出高品质的网页及富有新意的界面融合在一起，以制作出高品质的网页动态效果

13、。它主要应用于网页设计和多媒体创作等领域，动态效果。它主要应用于网页设计和多媒体创作等领域，功能十分强大和独特，已成为交互式矢量动画的标准，功能十分强大和独特，已成为交互式矢量动画的标准，在网上非常流行。在网上非常流行。FlashFlash广泛应用于网页动画制作、教学广泛应用于网页动画制作、教学动画演示、网上购物、在线游戏等的制作中。动画演示、网上购物、在线游戏等的制作中。1.2.2网网页设计页设计工具工具1.2.2网页设计的基本步骤 网站网站定位要小，内容要精。如果要制作一个包定位要小，内容要精。如果要制作一个包罗万象的站点，把所有精彩的东西都放在上面，结罗万象的站点，把所有精彩的东西都放在

14、上面，结果往往会事与愿违，给人的感觉是没有主题，没有果往往会事与愿违，给人的感觉是没有主题，没有特色，样样有，却样样都很肤浅。特色，样样有，却样样都很肤浅。网站的题材最好选自己擅长或者喜爱的内容。网站的题材最好选自己擅长或者喜爱的内容。兴趣是制作网站的动力，没有热情，很难设计制作兴趣是制作网站的动力，没有热情，很难设计制作出优秀的网站。出优秀的网站。1 网站定位网站定位 进行网站的整体规划也就是组织网站的内容和进行网站的整体规划也就是组织网站的内容和设计其结构。组织网站的内容可以从两个角度来考设计其结构。组织网站的内容可以从两个角度来考虑。从设计者的角度来考虑，可以依据被描述对象虑。从设计者的

15、角度来考虑，可以依据被描述对象的组织机构、类别划分等来组织内容；从浏览者的的组织机构、类别划分等来组织内容；从浏览者的角度来考虑，就应该将各种素材依据浏览者的需要角度来考虑，就应该将各种素材依据浏览者的需要进行内容分类，以便浏览者可以快捷地获取所需要进行内容分类，以便浏览者可以快捷地获取所需要的信息及其相关内容。的信息及其相关内容。1.2.2网网页设计页设计的基本步的基本步骤骤2 整体规划整体规划 三种常用的结构类型三种常用的结构类型 层状结构层状结构 层状结构类似于目录系统的树型结构层状结构类似于目录系统的树型结构 主 页 页面 1 页面 2 页面 3 页面 4 页面 5 页面 6 页面 7

16、 一级标题 二级标题 主主 页页页页面面1页页面面2页页面面3 线性结构线性结构 线性结构类似于数据结构中的线性表，用于组线性结构类似于数据结构中的线性表，用于组织本身的线性顺序形式存在的信息，可以引导浏览织本身的线性顺序形式存在的信息，可以引导浏览者按部就班地浏览整个网站文件。者按部就班地浏览整个网站文件。主主 页页页面页面1页面页面2页面页面3页面页面4页面页面5页面页面7页面页面8一级标题一级标题二级标题二级标题页面页面6 WebWeb结构结构 WebWeb结构类似于结构类似于InternetInternet的组成结构，各网页之的组成结构，各网页之间形成网状连接，允许用户随意浏览。间形成

17、网状连接，允许用户随意浏览。通常在进行网页开发时，首先都进行静态网页的制作，通常在进行网页开发时，首先都进行静态网页的制作，然后再在其中加入脚本程序、表单等动态内容。静态网页然后再在其中加入脚本程序、表单等动态内容。静态网页仅仅用来被动地发布信息，而不具有任何交互功能，它是仅仅用来被动地发布信息，而不具有任何交互功能，它是WebWeb网页的重要组成部分。网页的重要组成部分。一个好的网站首先是内容丰富，其次就是网页设计美观。对一个好的网站首先是内容丰富，其次就是网页设计美观。对于网页的外观设计，提供以下建议：于网页的外观设计，提供以下建议：（1 1）不要先决定网页的外观，然后迫使自己去适应它，应

18、）不要先决定网页的外观，然后迫使自己去适应它，应该根据网站的访问者对象、要提供的信息以及制作目标得该根据网站的访问者对象、要提供的信息以及制作目标得出一个最适合的网页架构。出一个最适合的网页架构。3 设计与制作设计与制作 （2 2）每页排版不要太松散或用太大的字，尽量避免访问）每页排版不要太松散或用太大的字，尽量避免访问者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可者浏览网页时要作大幅度的滚动，对于篇幅太长的一页可以使用内部链接解决。以使用内部链接解决。（3 3）目前常用的分辨率是）目前常用的分辨率是10241024768768，所以我们网页页面，所以我们网页页面设计有设计有9609607

19、20720及及800800600600，但，但现在国内的站点基本上都现在国内的站点基本上都是是960960720720，也有部分网页是针对，也有部分网页是针对12801280800800的分辨率，宽的分辨率，宽度设置在度设置在1000-12001000-1200左右。左右。（4 4）不应在每页中插入太多的广告。相信任何访问者都）不应在每页中插入太多的广告。相信任何访问者都不会喜欢浏览尽是些广告的网页，要考虑该页内容与广告不会喜欢浏览尽是些广告的网页，要考虑该页内容与广告的比例，广告太多，只会令人烦厌。的比例，广告太多，只会令人烦厌。（5 5）不要每页都采用不同的墙纸，以免每次转页时都要）不要每

20、页都采用不同的墙纸，以免每次转页时都要花费过多的时间去下载。花费过多的时间去下载。（6 6）底色或墙纸必须与文字对比强烈，以易于阅读。如）底色或墙纸必须与文字对比强烈，以易于阅读。如果网页是文章式或是包含大量文字，不妨在底色与文字的果网页是文章式或是包含大量文字，不妨在底色与文字的搭配上下些工夫，力求让访问者能够舒适地阅读网页。搭配上下些工夫，力求让访问者能够舒适地阅读网页。（7 7）不要把图片白色当作透明，要知道别人的系统不一）不要把图片白色当作透明，要知道别人的系统不一定把内定底色设为白色，解决的办法除了真的把该网页的定把内定底色设为白色，解决的办法除了真的把该网页的底色设为白色之外，最好

21、还是用图片编辑工具将图片设为底色设为白色之外，最好还是用图片编辑工具将图片设为透明颜色。透明颜色。当网页设计人员制作完所有网站页面之后，需要当网页设计人员制作完所有网站页面之后，需要对所设计的网页进行审查和测试，测试内容包括功对所设计的网页进行审查和测试，测试内容包括功能性测试和完整性测试两个方面。能性测试和完整性测试两个方面。所谓功能性测试就是要保证网页的可用性，达到所谓功能性测试就是要保证网页的可用性，达到最初的内容组织设计目标，实现所规定的功能，读最初的内容组织设计目标，实现所规定的功能，读者可方便快速地寻找到所需的内容。完整性测试就者可方便快速地寻找到所需的内容。完整性测试就是保证页面

22、内容显示正确，链接准确，无差错无遗是保证页面内容显示正确，链接准确，无差错无遗漏。漏。4 测试网页测试网页 1.2.3网页视觉设计定义与特点1.定义 网页视觉设计是以Internet作为载体，以互联网技术和数字交互技术为基础，依据客户的需求与消费者的需求设计有关商业目的的宣传，同时遵循艺术设计规律，实现商业目的与功能统一，是一种商业功能和视觉艺术混合的活动。1.2.3网页视觉设计定义与特点2.特点 网页视觉设计具有媒体、数字技术、视觉艺术三大内涵，它具有视觉传达设计的一般特征，同时兼有了商业数字时代新艺术形式。1）交互 交互性是网页不同于传统媒体之处，也是Web成为热点的主要原因。现在国内最大

23、的C2C网站上淘宝网正是通过网页互动性这一特点使整个消费市场简易化、便利化。1.2.3网页视觉设计定义与特点2）多维性 多维性源于超级链接，主要体现在网页设计中对导航的设计。导航打破了人们接收信息的线性方式，提供了足够的、不同角度的链接，体现视觉设计的多元化、人性化。3）媒体综合 是指网页视觉设计中综合应用多种媒体视听元素4）终端可变 是指网页显示效果会随着显示终端的变化而变化1.2.3网页视觉设计定义与特点5）技艺融合 技术与艺术紧密结合，互相扶持，互相推动。技术是实现网页视觉效果的基础，技术上为艺术的发展进行铺垫的。每一次的技术飞跃都会带来艺术形式效果的改变，如流媒体技术的发展使网页流畅运

24、用视频成为现实；同样，艺术发展也促进技术的进步，为了达到网页上某种艺术表达形式，往往也会促进某种新技术的出现，如Flash动画的 出现。Dreamweaver CS4提供了多种工作界面，以适合不同的工作人员。第一次安装该软件并启动后，出现的工作界面如图所示，该工作界面称为“设计器”界面。对于老用户而言，如果不适应这种工作界面，可以通过界面切换菜单进行切换，选择适合自己的界面模式。1.3 初识初识Dreamweaver CS4工作界面工作界面由上图可以看出，Dreamweaver 的工作界面主要由菜单栏、【插入】工具栏、【文档】工具栏、编辑窗口、状态栏、【属性】面板和各种面板组构成，下面简单介绍

25、各主要组成部分。1.3 初识初识Dreamweaver CS41 【插入插入】工具栏工具栏Dreamweaver CS4的【插入】工具栏中包含了8个标签，分别为：常用、布局、表单、数据、Spry、InContext Editing、文本、收藏夹，如图所示。单击【插入】工具栏中的不同标签可以进行切换，每一个标签中包括了若干的插入对象按钮。单击【插入】工具栏中的对象按钮或者将按钮拖曳到编辑窗口内，即可将相应的对象添加到网页文件中，并可在网页中编辑添加的对象。1.3 初识初识Dreamweaver CS4图图5-3 【插入插入】工具栏工具栏 1.3 初识初识Dreamweaver CS42 【文档文

26、档】工具栏工具栏【文档】工具栏中包含了代码视图、拆分视图、设计视图、实时视图、实时代码、文档标题、文件管理、浏览器预览、可视化选项等按钮，如图所示。1.3 初识初识Dreamweaver CS4图图5-4 【文档文档】工具栏工具栏 1.3 初识初识Dreamweaver CS4【文档】工具栏中的前三个按钮用于切换视图模式。单击 按钮可以进入代码视图，这是一个用于编写和编辑HTML、JavaScript、服务器语言代码(如ASP或ColdFusion标记语言)以及其他类型代码的手工编码环境。单击按钮可以进入代码视图与设计视图，在该视图中，窗口被分成上、下两部分，顶部窗口用于编写HTML代码，底部

27、窗口用于可视化编辑网页。单击按钮可以进入设计视图，这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，Dreamweaver中显示的文档处于可视化编辑状态，页面效果类似于在浏览器中查看页面时看到的内容。1.3 初识初识Dreamweaver CS43 状态栏状态栏在Dreamweaver CS4状态栏中可以显示当前光标所在位置的HTML标记，通过此标记可以确定所编辑的网页内容。状态栏上还可以显示当前网页的编辑窗口大小、当前网页文件的大小与网页的传输速度，如图所示。另外，Dreamweaver CS4的状态栏上新增了视图控制工具，其中选取工具用于选择页面中的操作对象；

28、手形工具用于平移视图；缩放工具用于放大或缩小视图显示；而设置缩放比率选项框可以通过确切的数值控制视图的缩放。1.3 初识初识Dreamweaver CS4图图5-5 状态栏状态栏 1.3 初识初识Dreamweaver CS44 【属性属性】面板面板【属性】面板用于显示或修改当前所选对象的属性。在页面中选择不同的对象时，【属性】面板中将显示出不同对象的属性。例如选择了文字，在【属性】面板中显示的是文字的属性；如果选择了图像，则【属性】面板中将显示图像的属性。另外，还可以直接在【属性】面板中修改所选对象的属性，修改后的效果可以在编辑窗口中反映出来。如图所示为选择表格时的【属性】面板。在【属性】面

29、板的右下角单击三角形的切换按钮，可以将【属性】面板切换为常用属性或全部属性模式，如图5-7所示。1.3 初识初识Dreamweaver CS4图图5-6 【属性属性】面板面板 1.3 初识初识Dreamweaver CS4图图5-7 切换后的切换后的【属性属性】面板面板 1.3 初识初识Dreamweaver CS45 面板组面板组面板组是指组合在一起的面板集合，它为我们编辑网页提供了既直观又快速的操作方法，是设计制作网页时不可缺少的工具。单击【窗口】菜单下的相应命令，可以打开或关闭面板。当我们打开一个面板时，与其成组的面板会同时出现，如图所示。1.3 初识初识Dreamweaver CS4

30、打开的面板组 1.3 初识初识Dreamweaver CS4单击面板组中的标签，可以在不同的面板之间切换。另外，将光标指向面板标签，按住鼠标左键向外拖动，可以把该面板从面板组中分离出来；分离出来的面板组还可以再放回去，只需拖动面板标签到面板组中即可。1.3 初识初识Dreamweaver CS41 创建站点的基本结构创建站点的基本结构创建站点的基本结构，是指确定站点的整体结构和网页之间的结构关系。创建站点的基本结构时首先要建立空白的站点，其次是添加网页文件与站点文件夹。1)创建站点创建站点Dreamweaver CS4提供了两种创建站点的方法：一是在启动Dreamweaver时通过欢迎画面创建

31、；二是在Dreamweaver工作环境下，单击菜单栏中的【站点】【新建站点】命令。这两种创建站点的方法都是通过向导完成的，非常直观。例例5-1建立kejian站点。1)启动Dreamweaver CS4，则弹出欢迎画面，如图5-9所示。建立教学站点建立教学站点 欢迎画欢迎画面面 建立教学站点建立教学站点2)单击【Dreamweaver站点】选项，则弹出【的站点定义为】对话框，在该对话框中有两个标签，其中【基本】标签就是站点定义向导，第一个对话框如图5-10所示，这里有两个选项，第一个选项要求输入站点名称，以便在Dreamweaver中标识该站点，这里输入“kejian”。第二个选项要求输入站点

32、的http地址，如果还没有域名，可以暂时不填。建立教学站点建立教学站点第一个向导对话框第一个向导对话框 建立教学站点建立教学站点3)单击按钮，进入站点定义向导的第二个对话框，如图所示。该对话框询问用户是否要使用服务器技术，选择【否，我不想使用服务器技术】选项，表示该站点是一个静态站点，没有动态页。建立教学站点建立教学站点第二个向导对话框第二个向导对话框 建立教学站点建立教学站点4)单击按钮，进入站点定义向导的第三个对话框，如图所示。该对话框询问用户如何使用文件，这里选择第一个选项，然后在下面的文本框中指定一个文件夹，Dreamweaver将在其中存储站点文件。5)单击按钮，进入站点定义向导的第

33、四个对话框，如图所示。该对话框询问用户如何连接到远程服务器，这里从下拉列表中选择“无”。建立教学站点建立教学站点 第三个向导对话框第三个向导对话框 建立教学站点建立教学站点第四个向导对话框第四个向导对话框 建立教学站点建立教学站点6)单击按钮，进入站点定义向导的第五个对话框，其中显示了用户的设置概要，如图所示。7)单击按钮，则通过向导建立了一个本地教学站点。建立教学站点建立教学站点第五个向导对话框第五个向导对话框 建立教学站点建立教学站点建立了本地站点以后，新建的站点将显示在【文件】面板中。单击菜单栏中的【窗口】【文件】命令，或者按下F8键，可以打开【文件】面板。该面板中显示了本地站点的名称以

34、及本地站点的文件夹等选项，如图所示。现在我们已经创建了一个教学站点，不过，目前为止这个站点还是空的，没有实际内容，因此必须向站点中添加相关的内容。建立教学站点建立教学站点【文件】面板 建立教学站点建立教学站点3添加网页文件与站点文件夹添加网页文件与站点文件夹新建的站点是空白的，其中没有任何内容。根据站点的规划，需要向其中添加网页文件或站点文件夹。网页文件即上网时浏览的HTML文件；站点文件夹则用于管理站点内容，因为站点中会有很多文件，为了有效地管理文件，可以将它们分门别类地存放在文件夹中，如图像文件夹可以专门用于存放图像、动画等。建立教学站点建立教学站点在站点中添加网页文件与文件夹的方法基本一

35、致，操作步骤如下：1)在【文件】面板中单击鼠标右键，则弹出一个快捷菜单。2)选择快捷菜单中的【新建文件】命令，则新建了一个网页文件，如图所示。建立教学站点建立教学站点新建的网页文件新建的网页文件 建立教学站点建立教学站点 3)在光标位置处输入网页的名称，然后按下Enter键确认，则完成了网页文件的添加。4)同样的方法，如果在弹出的快捷菜单中选择【新建文件夹】命令，则可以在站点中添加一个文件夹。建立教学站点建立教学站点5)为kejian站点添加内容。1)在【文件】面板中的“kejian”文件夹上单击鼠标右键，则弹出一个快捷菜单。2)选择快捷菜单中的【新建文件夹】命令，则在“kejian”文件夹下

36、新建了一个文件夹。3)在光标位置处输入文件夹的名称，如“Images”，按下Enter键确认。建立教学站点建立教学站点新建的文件夹新建的文件夹 建立教学站点建立教学站点 插入文本插入文本a)直接在文档窗口中输入文本，将光标放置在文档窗口中要插入文本的位置，然后直接输入。如果需要跳段，可以按ENTER 键。如果是换行，则是Shift+Enter.b)粘贴其他编辑器中生成的文本，首先要将光标插入文本的位置，然后执行“编辑-粘贴”，就能完成文本的插入。也可以直接使用标准工具栏上的“粘贴”按钮。插入文本插入文本插入特殊字符a)在文档窗口中，将光标定位在需要插入特殊字符的位置。b)执行“插入-HTML-

37、特殊字符”，在子菜单选择合适的字符命令。或者在快捷栏中选择文本，特殊字符。c)如果在下拉菜单中没有找到需要的字符，那么可以选择“其他字符”。插入文本插入文本插入日期a)将光标放置到要插入日期的位置。b)执行“插入日期”，或者在插入面板上点日期按钮，便可以。插入文本列表a)用鼠标选定要插入的项目的文本内容b)切换城文本面板，然后单击项目列表ul/ol 【格式】：选择其中的选项，可以对所选文本应用系统预设的格式。【ID】：用于为所选内容分配一个ID号。【类】：显示当前应用于文本的类样式，如果没有对所选内容应用过任何样式，则显示“无”。单击按钮和按钮，可以将所选文本加粗和倾斜。单击或按钮，可以为光标

38、所在的段落或所选择的段落添加无序或有序项目列表。单击或按钮，可以使光标所在的段落向右或向左缩进。【链接】：用于为所选的文本建立超链接。可以在其后面的文本框中输入要链接文档的路径名称，也可以单击右侧的图标，在弹出的对话框中选择链接的文档，或者按住图标指向要链接的文档建立超链接。【标题】：用于设置超链接的文本提示。【目标】：用于选择链接文档在窗口中的打开方式。选择“_blank”选项，表示将在新的浏览器窗口中打开链接的文档；选择“_parent”选项，表示将在当前文档的父级框架或包含该链接的框架窗口中打开链接文档；选择“_self”选项，表示将在当前文档所在的窗口中打开链接的文档；选择“_top”

39、选项，表示将在整个浏览器窗口中打开链接的文档。Dreamweaver CS4将CSS属性面板与HTML属性面板集成在一起，在【属性】面板中单击按钮，可以切换到CSS属性面板。实例实例制作一个纯文字网页。1)在【文件】面板中双击“Chinese.html”网页文件，打开该网页进行编辑。2)在【属性】面板中单击按钮，在弹出的【页面属性】对话框中切换到【外观(HTML)】分类，如图下图所示。3)单击【背景图像】文本框右侧的按钮，选择一幅图片作为网页背景，然后切换到【标题/编码】分类，在【标题】文本框中输入“唐诗欣赏”作为网页的标题栏文字，如图所示。4)单击对话框中的按钮，完成页面属性的设置，则为网页设置了标题栏文字与背景图像，如图下图所示。图图5-24 【页面属性页面属性】对话框对话框(2)5)在编辑窗口中输入文字“唐诗欣赏”并将其选中。6)在【属性】面板的【格式】列表中选择“标题2”选项，设置网页的标题。然后切换到CSS属性面板，单击居中对齐按钮，设置文字居中对齐，结果如图5-26所示。7)将光标定位在标题文字后面，在【插入】工具栏的【常用】标签中单击按钮，在页面中插入一条水平线，如下图所示。8)将光标定位在水平线的后面，按下Enter键，产生一个新段落，在新的段落中输入如图所示的文本内容。9)在【属性】面板目标规则中选择“新内联样式”，设置文字的相关格式。