计算机网络应用技能教程课件第6章 网页制作基础

返回主目录第5章网络安全技术6.1网页制作的基础知识6.2认识DreamWeaver6.3流媒体开发技术返回章目录第6章网页制作基础6.4制作“我的大学”个人主页返回章目录第5章网络安全技术工作任务：认识与网页制作相关的一些基本概念及网页的构成元素；认识网站设计开发的流程。返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.1.1任务一认识网页与网站

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．网页与网站2．Web服务器与浏览器3．统一资源定位器（URL）4．网页的基本元素返回章目录第6章网页制作基础返回章目录第5章网络安全技术网页也称为Web页，是人们通过浏览器浏览网络资源时看到的页面。每个网页实际是一个文件，它存放在网络服务器中。网页经由网址（URL）来识别与存取，当用户在浏览器输入网址后，经过域名系统的解析，再通过浏览器解释网页的内容，展示到用户屏幕上。网页通常由文字、表格、图片、声音、视频及各种功能按钮等组成。人们看到的网页主要是以HTML扩展名结尾的表态网页文件。还有其他类型的动态网页文件，如CGI、ASP、PHP、JSP文件等。网页与网站返回章目录第6章网页制作基础返回章目录第5章网络安全技术网站是存放在网络服务器上的完整信息的集合体，它包含一个或多个网页，通过站内链接把这些网页有机结合起来，构成一个内容完成、资源丰富的信息库。网站的第一个页面，通常称为首面或主页，它是整个网站的起始点和汇总点，是用户开始浏览站点的“入口处”。一个网站主要有由域名（俗称网址），网站空间和网站源程序三部分构成。返回章目录第6章网页制作基础返回章目录第5章网络安全技术Web技术的独特之处是采用超链接和多媒体信息。Web服务器使用超文本标记语言描述网络的资源，创建网页，各种网站资源被保存在服务器上，以供Web浏览器阅读。Web服务器管理着网络中的各种资源，其基本功能是提供网络通信服务、管理和提供网络共享资源。Web浏览器（WebBrowser）是一个用于文档检索和显示的客户应用程序，并通过协议与Web服务器相连。目前，流行的InternetExplorer和NetscapeNavigator除提供基本的文档检索、显示和导航特性外，还支持HTML的高级显示（如表和帧）以及ActiveX、Java、JavaScript等特性。Web服务器与浏览器返回章目录第6章网页制作基础返回章目录第5章网络安全技术是“UniformResourceLocator”的缩写，即通常所说的网址，是指信息资源在Internet上的惟一地址，它提供在Web上访问资源的惟一方法和路径。统一资源定位器从左到右主要由Internet资源类型（WWW客户程序用来操作的工具，如“http：//”表示WWW服务器，“ftp：//“表示FTP服务器，而“new：”表示Newgroup新闻组。）、服务器地址（指出WWW页所在的服务器域名）、资源文件的位置（指明服务器上某资源的位置）组成。例如，黑龙江畜牧兽医职业学院网址统一资源定位器（URL）返回章目录第6章网页制作基础返回章目录第5章网络安全技术/index.asp中，http代表所使用的资源类型，服务器地址，index.asp为要访问的主页的路径和文件名。返回章目录第6章网页制作基础返回章目录第5章网络安全技术设计网页的目的主要是发布信息，超级链接是Web的核心，它将万维网中无数的网页链接在一起。网页中包含多种元素，如图6-1所示。文本：是网页中常见的元素，是用来向用户传达信息的媒介。文字虽然不如图像那样能够很快引起浏览者的注意，但却能准确地表达消息的内容和含义，为了克服文字固有的缺点，人们可以设置网页文本的一些属性，如字体、字号、颜色等，突出显示重要的内容。此外，用户还可以在网页中设计各种各样的样式，来清晰表达一系列项目。网页的基本元素返回章目录第6章网页制作基础返回章目录第5章网络安全技术图片：图片在网页中具有提供信息、展示作品、装饰网页、表达个人情调和风格的作用。网页中的图片是GIF、JPEG、PNG等压缩格式的图片。在网页中使用最广泛的是JPEG和GIF格式，这俩种格式的图片都可以在不同的操作系统支持的浏览器上显示。动画：网页中使用动画可使网页效果更加突出，充分利用动画的表现力使得网页更加令人赏心悦目，同时，利用动画也会增加网页的交互功能。目前网页中使用的动画主要有GIF、Flash等。因Flash生成的文件较小，传输速度快，可以实现实时播放流，而不必等等整个文件传输完后传输完后再进行播放，该动画流畅，功能较强，已成为业界动画标准。返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.1.2任务二网站设计与开发流程

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．定义站点2．建立网站结构3．确定网站的主题和建立网站结构风格4．设计网站的栏目和版块5．设计和制作主页及其他网页返回章目录第6章网页制作基础返回章目录第5章网络安全技术开发网站的首要工作就是要定义该站点。在该项工作中，要明确建立网站的目的，在站点建立的开始，要为站点制订相应的目标，确定网站提供的内容，以及搜集网站资料。定义站点返回章目录第6章网页制作基础返回章目录第5章网络安全技术在此阶段中，要规划出网站的外观及其工作方式。首先建立网站结构流程图，在该流程图中包括网站的所有关键页面及其与其他网页的关系，技术要点和主要的链接也应在其中给出。建立网站的结构时，将自己所希望的网页内容全部加入进去，然后再和其他参与网站开发的人员一起研究、讨论，融入其他人员的意见。最后将网站结构图确定下来。建立网站结构返回章目录第6章网页制作基础返回章目录第5章网络安全技术设计一个网站，首先遇到的问题就是如何定位网站的主题。网站的主题也就是网站的题材。网站的题材主要有网上求职、网上聊天/即时信息、网上社区、娱乐、计算机技术、教育、生活等大类，每个大类都可以继续细分，如娱乐类可再分为明星新闻、在线播放、在线游戏、下载电影等。还有一些是专业的题材，如中医、天气预报等，这里不再细分。对于题材的选择，应注意以下3个问题：确定网站的主题和建立网站结构风格返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．主题要小而精。定位要小，内容要精。不可以幻想制作一个包罗万象的站点，而更应该突出特色。网站的最大特点就是新和快，目前最热门的个人主页都是天天更新甚至几小时更新一次。网络上的“主题站”比“万全站”更受人们喜爱。2．题材最好是你自己擅长或者喜爱的内容。例如，如果是平面设计人员，就可以建立一个平面设计之家网站；如果是一个教师，可以建立一个教学网站，及时反映教学情况和进行实时教学。这样在制作时，才会激发个人的热情，才不会觉得无聊或者力不从心，才能设计制作出优秀的网站。返回章目录第6章网页制作基础返回章目录第5章网络安全技术网站的主题和风格确定完毕，在收集和组织了许多相关的资料内容后，动手制作网站之前，一定要做好网站的规划，确定合理的栏目版块。栏目的实质是一个网站的大纲索引，索引应该将网站的主体明确显示出来。在制定栏目的时候，要仔细考虑，合理安排。网站栏目安排一定记住要紧扣主题，同时要设一个最近更新或网站指南栏目、设定一个可以双向交流的栏目、设一个下载或常见问题回答栏目。设计网站的栏目和版块返回章目录第6章网页制作基础返回章目录第5章网络安全技术版块比栏目的概念要大一些，每个版块都有自己的栏目。例如中国教育和科研计算机网站点分中国教育、教育资源、科研发展、教育信息化等版块，每个版块下面有各有自己的主栏目。设置版块应注意各版块要有相对独立性，各版块要有相互关联，版块的内容要围绕站点主题。返回章目录第6章网页制作基础返回章目录第5章网络安全技术主页的制作者需要先绘制一张草图，草图应包括网站的标志、广告条、菜单、导航栏等一些基本元素。草图设计好后，就可以开始动手制作主页了。主页制作好以后，就开始按着目录结构设计和制作其他页面，在制作中其他页面要和主页保持相同的风格，要有返回主页的链接，目录结构不要超过三层。设计和制作主页及其他网页返回章目录第6章网页制作基础返回章目录第5章网络安全技术工作任务：安装DreamWeaver8，启动后熟悉其工作界面和编辑环境；认识静态网页和动态网页的基本概念及二者的区别；在网页中输入和编辑文本，插入图象，插入影片和添加声音，插入和编辑表格；创建和使用层；布局表格和单元格；在网页中添加和删除框架，设置框架属性；认识CSS的概念，创建CSS样式；创建与应用表单。返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.2.1任务一熟悉DreamWeaver的工作环境

返回章目录第6章网页制作基础返回章目录第5章网络安全技术工作任务：安装DreamWeaver8，启动后熟悉其工作界面和编辑环境；认识静态网页和动态网页的基本概念及二者的区别；在网页中输入和编辑文本，插入图象，插入影片和添加声音，插入和编辑表格；创建和使用层；布局表格和单元格；在网页中添加和删除框架，设置框架属性；认识CSS的概念，创建CSS样式；创建与应用表单。返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．安装DreamWeaver82．熟悉DreamWeaver8的工作界面返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．运行DreamWeaver8安装程序，出现“欢迎使用MacromediaDreamWeaver8InstallShieldWizard”界面2．单击【下一步】按钮，打开“许可证协议”对话框，如图6-3所示。3．单击【下一步】按钮，弹出如图6-4所示的“目标文件夹和快捷方式”对话框，单击【更改】按钮，弹出如图

6-5所示的“更改当前目的地文件夹”对话框，选择D盘为安装路径，单击【确定】按钮继续。4．单击【下一步】按钮，弹出“默认编辑器”对话框安装DreamWeaver8返回章目录第6章网页制作基础返回章目录第5章网络安全技术5．单击【下一步】按钮，弹出“已做好安装程序的准备”对话框，单击【安装】按钮开始安装程序。安装完成后弹出“InstallShieldWizard完成”对话框，如图6-7所示。单击【完成】按钮，完成程序的安装。返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．执行【开始】→【所有程序】→【Macromedia】→【MacromediaDreamWeaver8】命令，启动DreamWeaver软件。（如果是第一次启动，将会出现“工作区设置”对话框，如图6-8所示，对于初学者，建议使用默认的“设计者”布局。）2．选择设计器工作区，弹出“选择建立文件类型”窗口熟悉DreamWeaver8的工作界面返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.2.2任务二熟悉DreamWeaver的编辑环境

返回章目录第6章网页制作基础返回章目录第5章网络安全技术主菜单：使用菜单栏基本上能够实现绝大部分功能。其功能包含在“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”、“站点”、“窗口”和“帮助”菜单中。插入工具栏：包含将各种类型的“对象”插入到文档中的按钮。每个对象都是一段HTML代码，允许在插入时设置不同的属性。默认的“插入”工具栏为“常用”工具栏，单击“插入”按钮，弹出下拉菜单，在下拉菜单中可以选择其他工具栏。返回章目录第6章网页制作基础返回章目录第5章网络安全技术文档工具栏：包含视图转换按钮，这些按钮可在文档的不同视图间快速切换。包括三个文档视图，分别是“代码”视图、“设计”视图、“代码和设计”视图，。属性面板：用于显示所选中的网页元素的属性，并且可以在属性面板上修改。选择不同的网页元素，属性面板所显示的内容也有所不同。文档窗口：用于显示创建或编辑的文档。有三种显示模式，即设计视图、代码视图、设计和代码视图，用户可以根据需要使用文档工具栏中的视图按钮随意切换显示模式。返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.2.3任务三区别静态网页与动态网页

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．静态网页2．动态网页3．二者区别返回章目录第6章网页制作基础返回章目录第5章网络安全技术静态网页是相对于动态网页而言，是指没有后台数据库、不含程序和不可交互的网页，常见的扩展名为.htm、.html、.shtml、.xml，在静态网页上也可以出现各种动态的效果，如.gif格式的动画、Flash动画和滚动字幕等。静态网页返回章目录第6章网页制作基础返回章目录第5章网络安全技术动态网页是指网页内含有程序代码，并会被服务器端执行的网页，常见的扩展名为.asp、.php、.jsp。静态网页是设计者做好的固定的网页。动态网页就是可以进行交互的网页，它可以根据不同用户的操作作出不同的反映。把用户的不同的操作发送到服务器后用程序代码进行处理。动态网页返回章目录第6章网页制作基础返回章目录第5章网络安全技术静态网页与动态网页的区别在于Web服务器对它们的处理方式不同。当Web服务器接收到对静态网页的请求时，服务器直接将该页发送给客户浏览器，不进行任何处理。如果接收到对动态网页的请求，则从Web服务器中找到该文件，并将它传递给一个称为应用程序服务器的特殊软件扩展，由它负责解释和执行网页，将执行后的结果传递给客户浏览器。动态网页以数据库技术为基础，可以大大降低网站维护的工作量。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、搜索查询、用户管理、订单管理等。动态网页并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。二者区别返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.2.4任务四网页中文本与多媒体的处理

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．创建文档并设置属性2．处理网页中的文本3．处理网页中的图像4．添加声音5．插入Flash影片6．创建与管理超级链接返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.2.5任务五网页布局技术

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．插入并编辑表格2．创建与使用层3．布局表格和布局单元格返回章目录第6章网页制作基础返回章目录第5章网络安全技术插入表格：在文档窗口中，将光标放在需要创建表格的位置，单击【常用】快捷栏中的表格按钮，弹出【表格】对话框，指定表格的属性后，在文档窗口中插入设置的表格。选择单元格对象：选择整个表格：把鼠标放在表格边框的任意处，当出现这样的标志时单击即可选中整个表格，或在表格内任意处单击，然后在状态栏选中<table>标签即可。选中某一单元格：按住Ctrl键，鼠标在需要选中的单元格单击即可。插入并编辑表格返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．将插入点放置在要创建层的地方。2．执行【插入】→【布局对象】→【层】命令，在文档中创建一个层，并在层中输入文本“Hello”。3．选中层中文本，在文本的属性面板中单击居中对齐按按钮，在【大小】下拉列表框中输入70。4．选择该层，在层的属性面板的“宽”文本框中输入300，“高”文本框中输入80。创建与使用层返回章目录第6章网页制作基础返回章目录第5章网络安全技术5．执行【编辑】→【复制】命令，然后单击文档，执行【编辑】→【粘贴】命令，这样就制作出了两个相同的层。6．选择第一个层中的文本，将文本的属性面板中的【文本颜色】设置为#99999。7．选择其中任意一个层，用方向键将该层移动到适当的位置。8．保存并预览网页。创建与使用层返回章目录第5章网络安全技术1．单击【布局】切换到布局视图，激活【布局表格】和【布局单元格】按纽。2．单击插入栏【布局】分类中的【绘制布局单元格】按钮，将光标指向要绘制单元格的位置，然后拖动鼠标创建布局单元格。布局表格和布局单元格返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.2.6任务六应用框架

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．增加新框架2．删除框架3．框架属性返回章目录第6章网页制作基础返回章目录第5章网络安全技术按住Ctrl键，将鼠标放在框架边框上，当鼠标变为上下箭头时，可把边框拖到一个新位置，当松开鼠标按钮时，一个新的空白内容的框架就形成了。增加新框架返回章目录第6章网页制作基础返回章目录第5章网络安全技术单击该框架，执行【框架】→【删除框架】命令即可。删除框架返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．选中框架，执行【框架】→【框架属性】，则弹出【框架属性】对活框。2．在对话框的【名称】文本框中输入框架名；在【选项】区域中，若选中【在浏览器中可以调大小】复选框，则客户在浏览站点时，可重新定义框架尺寸，通过在【显示滚动条】下拉列表框中选择不同的描述项，设置让滚动条是否出现。3．在【框架大小】区域中，设置框架大小，定义一个绝对像素值或相对于浏览器窗口的百分比，若要用浏览器来设置相对于该页面中框架的尺寸，选【相对】；在【边距】区域中，设置内容页面与框架边框分隔的像素数值。修改框架属性返回章目录第6章网页制作基础返回章目录第5章网络安全技术4．在【原始网页】文本框中输入一个新的页面名字或URL。5．执行【框架网页】命令，则弹出【网页属性】对话框。6．在该对话框的【框架】选项卡中，在【框架间距】文本框中，可输入以像素为单位的边框宽度；若要使框架边框消失，则不选中【显示边框】复选框。7．单击【确定】按钮，关闭【网页属性】对话框，再单击【确定】按钮，关闭【框架属件】对话框，完成框架属性设置。修改框架属性返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.2.7任务七应用CSS样式表

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．CSS概述2．创建新的

CSS

样式返回章目录第6章网页制作基础返回章目录第5章网络安全技术CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

用CSS不仅可以做出美观工整令浏览者赏心悦目的网页，还能给网页添加许多特殊效果。创建CSS样式表的过程，就是对各种CSS属性的设置过程，所以了解和掌握属性设置非常重要。在DW

MX

2004的CSS样式里包含了W3C规范定义的所有CSS1的属性，把这些属性分为：类型、背景、区块、方框、边框、列表、定位、扩展等八个部分。CSS概述返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．选择插入的位置，执行【新建

CSS

样式】命令，弹出【新建

CSS

样式】对话框。2．在【CSS

样式】面板中，单击面板右下角区域中的【新建

CSS

样式】按钮。3．在文本属性检查器中，执行【管理样式】命令，在弹出的对话框中单击【新建】。

4．单击【相关

CSS】选项卡，单击右键，然后从菜单中选择【新建规则】。

创建新的

CSS

样式返回章目录第6章网页制作基础返回章目录第5章网络安全技术5．执行【文本】→【CSS

样式→【新建】命令，弹出【新建

CSS

样式】对话框。6．选择要创建的

CSS

样式的类型。7．选择定义样式的位置。8．单击【确定】。创建新的

CSS

样式返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.2.8任务八表单与行为的应用

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．创建表单2．添加文本域3．添加复选框4．单选按钮及单选按钮组5．添加行为返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．在打开的文档中，将鼠标光标定位在要插入表单的位置。2．选择【插入记录】→【表单】→【表单】命令，即可以插入一个表单。创建表单返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．将鼠标光标定位在表单中要添加文本域的位置。2．在插入栏的【表单】选项卡中单击按钮，即可在指定位置添加文本域。添加文本域返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．将鼠标光标定位在要添加复选框的位置。2．在插入栏的【表单】选项卡中单击按钮，即可在指定位置添加复选框。添加复选框返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．将鼠标光标定位在要添加单选按钮的位置。2．在插入栏的【表单】选项卡中单击按钮，在指定位置添加单选按钮。若单击按钮，可打开【单选按钮组】对话框，添加单选按钮组。3．设置完成后，单击【确定】按钮。单选按钮及单选按钮组返回章目录第6章网页制作基础返回章目录第5章网络安全技术按【Shift+F4添加行为】组合键打开【行为】面板。通过【行为】面板，将行为添加到页面元素中，即可实现相应的操作。添加行为返回章目录第6章网页制作基础返回章目录第5章网络安全技术工作任务：认识流媒体的概念，以及流媒体传输的工作原理；远程教学过程中流媒体传输技术的应用；认识Real流媒体处理技术的工作过程及原理。返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.3.1任务一认识流媒体传输技术

返回章目录第6章网页制作基础返回章目录第5章网络安全技术流媒体：采用流式传输的方式在Internet播放的媒体格式，如音频、视频或多媒体文件。流媒体在播放前并不下载整个文件，只将开始部分内容存入内存，在计算机中对数据包进行缓存并使媒体数据正确地输出。此时多媒体文件的剩余部分将在后台的服务器内继续下载。与单纯的下载方式相比，这种传输方式不仅使启动延时大幅度地缩短，而且对系统缓存容量的需求也大大降低，并且极大地减少了用户等待的时间。返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.3.2任务二应用流媒体传输技术

返回章目录第6章网页制作基础返回章目录第5章网络安全技术在IP网上开展远程教学活动，需要解决两个基本问题：音频、视频流信息的传送以及它们与数据之间的同步。流媒体技术在解决上述问题时有很大的优势。此外，由于在教学过程中教师会经常使用电子教案来辅助教学，比如用PowerPoint，而电子教案的展示与音频、视频流之间有严格的时间同步关系，这就要求在传输过程中我们仍然要保持它们之间的同步关系。这里以Microsoft的WindowsMediaService例来分析基于IP网的远程实时教学系统的基本构成和主要功能。返回章目录第6章网页制作基础系统的工作过程如下：输入的视频和音频信号将送给MPEG4的编码器进行编码，编码器输出的节目流既可以存入存储设备也可以直接送给媒体服务器。媒体服务器的主要功能是完成节目流的播出。媒体服务器播出的节目有三个来源，它可能是保存在存储设备中的ASF文件，也可以是Encoder实时传送来的节目，其次，它播出的节目还可以从其它的媒体服务器上获取。普通的用户可以通过LAN或通过无线网络接入到该系统之中参加远程实时教学。第5章网络安全技术返回章目录6.3.3任务三熟悉Real流媒体处理技术

返回章目录第6章网页制作基础返回章目录第5章网络安全技术Real流媒体技术的实现需要3个软件的支持。1．RealPlayer播放器。2．RealProducer编辑制作。3．RealServer服务器。RealPlayer：是媒体播放软件，从早期的RealPlayer发展到RealPlayer8.0，RealPlayer9.0，现在已经升级到RealOne和RealOnePlayerGold版本。Real所特有的格式为*.rm，*.ra，*.ram。所占空间小，并且有较好的影音质量，应用广泛。返回章目录第6章网页制作基础返回章目录第5章网络安全技术工作任务：收集与大学生活相关的素材；设计网站的流程图；在本地计算机上创建“mycollege”站点；编辑、删除与复制站点；打开我的大学主页，设置页面属性；在主页中新建CSS样式及CSS样式文件；制作一个专题栏目，在该栏目下制作“我的大学”、“我的高中”、“我的初中”、“我的档案”、“我的简历”、“社会生活”链接；为网页设置背景音乐；在标志和标语区域插入一幅图片；在图片区域插入热门图片；在网页中制作一个动态图层，制作90帧的时间轴动画；利用模板创建“个人档案”、“相册”、“音乐”三个栏目网页；为网页添加播放声音行为；创建弹出信息对话框行为；设置添加状态栏文本对话框行为；测试与发布网站。返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.4.1任务一收集素材与规划网站

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．收集素材2．规划网站返回章目录第6章网页制作基础返回章目录第5章网络安全技术收集和我的大学网页相关的素材，查找并收集有关的文字、图片、声音、影像等素材，并对所收集的素材进行整理、处理。根据网页的需求，对素材进行编辑、处理。对图片进行截取、编辑，并将图片的格式转换成JPG格式，文字材料进行重新编排，将声音和影视资源转换成RM或WMV等流媒体格式。收集素材返回章目录第6章网页制作基础返回章目录第5章网络安全技术确定网站目标，通过本站的设计，展现学生在大学的学习、生活、事物等方面的情况，展现大学生的个性、风采和精神面貌，并具有实用性，能够记录学习的成绩、科目、学习时间、学习心得和学习内容等方面的内容。规划网站返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.4.2任务二创建和管理“我的大学”站点

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．建立一个站点2．管理与编辑站点返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．打开“我的电脑”窗口，在D盘中新建一个文件夹mycollege。2．启动DreamWeaver8软件。执行【站点】→【管理站点】命令，打开如图6-16所示的“管理站点”对话框，单击【新建】按钮，选择“站点”选项。“管理站点”对话框“站点定义”对话框

3．在弹出的“站点定义”对话框中输入站点的名字“我的大学”建立一个站点返回章目录第6章网页制作基础返回章目录第5章网络安全技术4．单击【下一步】按钮，在弹出的对话框中选择“是，我想使用服务器技术”，在“哪种服务器技术？”下拉列表框中选择“ASPVBscript”。5．单击【下一步】按钮，在弹出的对话框中选择“在本地进行编辑和测试（我的测试服务器是这台计算机）（E）”选项，在“您将把文件存储在计算机上的什么位置？”文件夹列表选择存放站点的位置为“D:\mycollege”文件夹建立一个站点返回章目录第6章网页制作基础返回章目录第5章网络安全技术6．单击【下一步】按钮，在弹出的对话框中，在“您应该使用什么URL来浏览站点的根目录”列表使用默认值（http://localhost）。选择是否使用服务器技术选择存放站点的位置对话框

7．单击【下一步】按钮，在弹出的对话框中选择“否（O）”单选项。8．单击【下一步】按钮，在弹出的对话框中检查各项设置是否正确。如果确认无误，则单击【完成】按钮，完成“我的大学”个人站点的定义。在创建站点之后，在窗口右侧的“文件”面板将会看到刚才定义的“我的大学”站点，目前该站点为，没有任何文件和文件夹建立一个站点返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．执行【站点】→【管理站点】命令“管理站点”对话框。2．选择要重新编辑的站点名，单击【编辑】按钮，打开“站点定义”对话框，在该对话框中可以对站点重新编辑。3．单击【确定】按钮，返回“管理站点”对话框，单击【完成】按钮，完成编辑操作。管理与编辑站点返回章目录第6章网页制作基础返回章目录第5章网络安全技术4．选择要复制（本例选择“我的大学”进行练习）的站点，单击【复制】按钮，即可复制一个站点。新复制的站点名显示在“管理站点”对话框中。5．选择要删除的站点（“我的大学复制”），单击【删除】按钮，弹出如图6-23所示的“删除提示”对话框。6．单击【是（Y）】按钮，即可删除站点。管理与编辑站点返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.4.3任务三设置页面属性

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．打开“我的大学”站点，打开index.asp网页文件。“页面属性”对话框

2．执行【修改】→【页面属性】命令（或在工作窗口右键单击，在弹出的快捷菜单中选择“页面属性”选项）打开页面属性对话框。3．在“分类”列表中单击“外观”选项，设置“页面字体”为宋体、“大小”为9、“文本颜色”为＃000000，左、右、上、下边距均为0像素。设置页面属性返回章目录第6章网页制作基础返回章目录第5章网络安全技术4．在“分类”列表中单击“链接”选项，设置“活动链接”颜色为＃0000FF，“下划线样式”为始终无下划线，如图6-25所示。网页中已访问过的超级链接的文字颜色不变，正在访问的超级链接的文字颜色为蓝色，访问过的链接不带下划线。5．在“分类”列表中单击“标题/编码”选项，设置标题为“个人主页—我的大学”，如图6-26所示。单击【确定】完成“页面属性”的设置。6．执行【文件】→【保存】命令，对修改后的网页进行保存。设置页面属性返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.4.4任务四建立样式表

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．创建CSS样式2．创建CSS样式文件返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．打开“我的大学”站点，打开index.asp网页文件。2．打开“设计”面板组中的“CSS样式”面板，单击面板右下方的“新建CSS规则”按钮，打开“新建CSS样式”对话框，如图6-27所示。3．在“新建CSS规则”对话框中输入名称“标题”，选中“仅对该文档”单选按钮，如图6-28所示，单击【确定】按钮。创建CSS样式返回章目录第6章网页制作基础返回章目录第5章网络安全技术4．在弹出的“标题的CSS规则定义”对话框中设置字体为黑体、大小为12px、颜色为＃FF0000，单击【确定】按钮完成标题CSS规则定义。5．单击面板右下方的“新建CSS规则”按钮，打开“新建CSS样式”对话框，在“名称”文本框中输入正文单击【确定】按钮。6．在弹出的“正文的CSS规则定义”对话框中设置字体为宋体、大小为12px。创建CSS样式返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．打开“我的大学”站点，打开index.asp网页文件。2．新建CSS规则，打开对话框，选择定义在“（新建样式表文件）”选项，单击【确定】按钮，弹出“保存样式表文件为”对话框，在文件名后输入“mycollege”。3．单击新建的“mycollege”样式表文件，新建栏目、标题、正文、版块等样式。创建CSS样式文件返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.4.5任务五制作“我的大学”网站首页

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．打开“我的大学”站点，打开index.asp网页文件。“我的大学”个人网站首页

2．在“首页”下方的单元格中输入“专题栏目”，在“属性”面板的单元格选项中设置“水平”为居中对齐，设置“垂直”为居中，设置“背景颜色”为#FFCC33。3．选择中“专题栏目”文字。在“属性”面板的样式列表框中选择“版块”。4．在“专题栏目”文字前单击，执行【插入】→【图像】命令，在弹出的“选择图像源文件”对话框中选择“images”文件夹，选择图片“bj-3.gif”。单击选中刚插入的图片。设计版块标题返回章目录第6章网页制作基础返回章目录第5章网络安全技术5．分别在指定位置输入各个版块的名称，即专题栏目、我的大学生活感悟、热点文章、友情链接、热点图片、用户登录等各个版块名称，并且设置样式为“版块”，同时按照图6-31所示，分别插入图片“book1.gif”、“heart3.gif”、“bj-3.gif”、“1.gif”6．选择“我的大学生活感悟”单元格，单击“属性”面板“背景”的单元格背景URL按钮，在弹出的“选择图像源文件”对话框中选择背景图片为menu_bg.jpg。同样，设置“热点图片”单元格的背景图片也为menu_bg.jpg。设计版块标题返回章目录第6章网页制作基础返回章目录第5章网络安全技术7．设置“热点文章”和“用户登录“单元格背景图片为menu_l.jpg8．执行【文件】→【保存】命令，把改进的内容保存到文件中。设计版块标题返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.4.6任务六修饰“我的大学”网站首页

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．添加图像2．设计动画返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．继续上一步的操作，单击选中导航栏上面的单元格，执行【插入】→【图像】命令，在弹出的“选择图像源文件”对话框中选择选择图片“zy-1.jpg”。单击选中刚插入的图片，在“属性”面板的“对齐”列表框中选择“绝对居中”。2．在热点图片下方的三个单元格中分别插入图片“rm1.jpg”、“rm2.jpg”、“rm1.jpg”。3．执行【文件】→【保存】命令，把改进的内容保存到文件中。添加图像返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．继续上一步的操作，光标移动网页的左上方，执行【插入】→【布局对象】→【层】命令，在页面上出现一个蓝色的框，即图层layer1。2．在框中输入“欢迎来到“我的大学”个人网站！”，在“属性”面板中设置“字体”为宋体加粗，“字号”为24。设置文字颜色为#FF0000，设置图层的“背景颜色”为#99FFFF。3．执行【窗口】→【时间轴】命令，打开“时间轴”面板，选中文字层layer1，把它拖到时间轴中。设计动画返回章目录第6章网页制作基础返回章目录第5章网络安全技术4．在时间轴上单击鼠标选中第15帧，拖动该关键帧到第90帧。选择文字图层，拖运图层到屏幕右上方，制作直线运动动画。5．鼠标单击第30帧，右键弹出快捷菜单，单击【增加关键帧】，则第30帧变为关键帧，同样，增加第60帧为关键帧。6．鼠标单击第30帧，选择文字图层，拖运图层到屏幕左下方。鼠标单击第60帧，选择文字图层，拖运图层到屏幕右下方。设计动画返回章目录第6章网页制作基础返回章目录第5章网络安全技术7．选中时间轴面板上自动播放复选框，使时间轴动画在网页打开时自动播放。8．执行【文件】→【保存】命令，把改进的内容保存到文件中。设计动画返回章目录第6章网页制作基础第5章网络安全技术返回章目录6.4.7任务七制作“我的大学”网站其他页

返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．创建模板2．制作“个人档案”页3．制作“相册”页4．制作“音乐”页返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．打开“我的大学”站点，打开index.asp网页文件。“另存模板”对话框

2．执行【文件】→【另存为模板】命令，打开“另存为模板”对话框，输入模板名称为mycollege，如图6-32所示，单击【保存】按钮，在随后弹出的提示框中选择“是（Y）”按钮以更新链接创建模板返回章目录第6章网页制作基础返回章目录第5章网络安全技术3．在导航栏下方工作区中，单击右健，在弹出的快捷菜单中执行【模板】→【新建可编辑区域】命令（或执行【插入】→【模板对象】→【可编辑区域】命令。4．在弹出的“新建可编辑区域”对话框中输入名称为Edit1，单击【确定】按钮。

5．执行【文件】→【保存】命令，把改进的内容保存到文件中，完成模板的创建。创建模板返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．启动Dreamweaver程序，单击“新建文档”对话框。2．在该对话框中选择“模板”选项卡，切换到“从模板新建”对话框。3．单击选中“mycollege”模板，选中“当模板改变时更新页面”复选框，单击【创建】按钮，利用模板创建一新的网页。4．执行【文件】→【另存为】命令，在弹出的另存为对话框中选择“grda”文件夹，在文件名后的文本框中输入“grda.html”，单击【保存】按钮保存网页。制作“个人档案”页返回章目录第6章网页制作基础返回章目录第5章网络安全技术5．制作一个6行1列的表格，分别设计并输入“个人基本情况”、“兴趣与特长”、“教育经历”等版块标题，同时设置样式为“版块”。6．输入表格内容，调整表格至合适为止。7．执行【文件】→【保存】命令，把改进的内容保存到grda.html文件中。制作“个人档案”页返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．将要生成网页相册的图像全部放在站点根文件夹外的一个文件夹中。2．在编辑窗口下执行【命令】→【创建网站相册】命令，弹出如图6-35所示的文件夹。3．在“相册标题”文本框中输入网站相册的标题为“世界各地美丽的风光”，设置网站相册副标题为“美不胜收”。4．单击“源图像文件夹”后的【浏览】按钮，在弹出的“请选择一个文件夹”对话框中选择源图像所在的文件夹。制作“相册”页返回章目录第6章网页制作基础返回章目录第5章网络安全技术5．单击“目标文件夹”后的【浏览】按钮，在弹出的“请选择一个文件夹”对话框中设置放置网页相册的图像和网页的文件夹。6．在“缩略图大小”列表框中设置缩略图大小为100×100。7．选中“显示文件名称”前面的复选框，设置图像下方显示图像的文件名。8．设置完毕后，单击【确定】按钮，自动优化图像，同时生成网页文件。制作“相册”页返回章目录第6章网页制作基础返回章目录第5章网络安全技术1．利用模板新建网页另存为“yingyue.hmtl”。2．插入