大学计算机基础课件第8章 网页制作-课程教案

大学计算机基础（Windows10+Office2016）（张开成主编）课程教案第8章网页制作【教学目标】理解网页、网站相关基本概念熟悉网站开发的基本流程熟悉常用网页制作工具掌握HTML文档基本结构掌握利用DreamweaverCS6制作网页的基本方法理解网页测试发布的作用及方法【教学重点】网页制作的基本流程HTML文档基本结构DreamweaverCS6制作网页的基本方法网站的测试以及发布【教学难点】DreamweaverCS6的基本操作网站的测试与发布【教学要点】8.1网页制作基础知识8.1.1认识网页与网站1.网页与网站网页是构成网站的基本元素，是网络上信息传递的主要媒介。网页（WebPage）是一个包含HTML标记的纯文本文件，是存放在世界某个角落被称为WEB服务器的某一台计算机中的，能提供给客户机用户浏览的页面；网页是一种综合了文字、图片、动画和音乐等内容的超文本文件，具有可视性和交互性的特点。通常大多数网页是以.html为后缀名，俗称HTML文件。不同的后缀名分别代表不同类型的网页文件，如.xml、.asp、.php、.cgi、.jsp等。网站是网页的集合，是指存放在WEB服务器中的完整信息的集合体。其中包括一个首页（HomePage）和若干个网页。这些网页以超链接的方式连接在一起，形成一个整体，描述一组完整的信息。网站主要由主机、域名、网页等组成。建设网站，就是在本地计算机上安装WEB服务器，然后设计制作相关网页并通过Internet发布出去的过程。2.网页的基本要素网页一般包含Logo、Banner、导航栏、文本、图像、动画等基本要素。3.网站开发流程（1）规划阶段（2）设计阶段（3）发布阶段（4）维护阶段8.1.2网页编程语言介绍1.网页设计语言——HTMLHTML（HyperTextMarkupLanguage）即超文本标记语言，或称为超文本链接标识语言，是目前万维网（WWW）上应用最为广泛的语言，它是用来描述网页的一种语言，强调把数据和数据的显示放在一起，使用标记来描述网页，将数据按照不同的格式显示出来。HTML是网页制作的基础，是初学者必学的内容。2.网页制作工具（1）FrontPage（2）SharePointDesigner（3）Dreamweaver8.1.3DreamweaverCS6窗口DreamweaverCS6窗口由菜单栏、文档工具栏、属性检查器、“插入”面板、“文件”面板、文档编辑区和状态栏组成。8.2基本网页的制作8.2.1站点的建立站点是网站中所有文件和资源的集合。要制作网页，首先需创建站点，为站点内的所有文件建立联系。制作一个网站一般需要首先将制作好的这个网站的所有网页暂时保存在自己的计算机上，最后再上传到拥有使用权限的服务器上。DreamweaverCS6可以将本地计算机的一个文件夹作为一个站点。8.2.2创建文件夹及网页文件1.创建文件夹2.创建网页文件8.2.3网页中文本的编辑1.在网页中输入文本2.编辑与设置段落格式3.编辑与设置文字格式4.设置水平线8.2.4网页中多媒体元素的插入与编辑1.图像的插入与编辑图像是网页最主要的元素之一。虽然存在很多种图形文件格式，但网页中通常使用的只有3种，即GIF、JPEG和PNG，其中使用最广泛的是GIF和JPEG文件格式。2.网页背景的设置网页中的背景设计是相当重要的，好的背景不但能影响访问者对网页内容的接受程度，还能影响访问者对整个网站的印象。在不同的网站上，甚至同一个网站的不同页面上，都会有各式各样的不同的背景设计。常见的网页背景包含颜色背景和图像背景。3.影音文件的插入与编辑在DreamweaverCS6中，不但可以插入图片，还可以插入Flash动画和视频文件等多媒体信息，设置背景音乐，增加网页的视听觉效果。（1）插入Flash动画（2）插入FLV视频（3）设置背景音乐8.2.5超链接的创建与编辑超链接是网页之间联系的桥梁，浏览者可以通过它跳转到其他页面，可以说超链接是整个网站的“灵魂”。它所指向的目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是图片、电子邮件地址、文件，甚至是应用程序。当浏览者单击已设置超链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。（1）绝对地址（2）根路径（3）相对路径8.3网页布局8.3.1页面布局基础网页作为互联网信息传递的主要媒介，是提供绝大部分信息的平台，若网页结构混乱，内容杂乱无章，用户需花费大量的时间在查找信息上，用户体验则会极差，不能留住客户，尤其对于企业网站来说是极大的损失。为此网页需要精心设计才能吸引用户的眼球。为保证网页结构清晰，在网页设计阶段对页面进行合理布局是非常关键的。布局就是将有限的视觉元素进行合理的排列组合，表现出更强的逻辑性以及个性化。（1）表格布局（2）框架布局（3）DIV+CSS布局8.3.2表格布局表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。虽然HTML代码中通常不明确指定列，但Dreamweaver允许操作列、行和单元格。在网页编辑中，使用表格可以实现两方面功能，一是用来展示文字或图像等内容，可以把相互关联的信息集中定位，排列更有序；二是用来实现版面布局，使网页更规范、更美观。1.用表格规划页面结构2.创建表格3.表格的选定与编辑4.单元格的选定与编辑5.拆分/合并单元格8.4网站测试及发布在网页制作完成后，就要进入最后一个环节——网站的测试与发布。8.4.1网站测试在将站点上传到服务器之前，必须先对站点进行测试，主要包括测试浏览器的兼容性、测试超链接的有效性、在浏览器中测试网页的正确性等，这样才能保证发布站点以后，尽可能少地出现错误。（1）测试浏览器的兼容性（2）测试超链接的有效性（3）在浏览器中测试网页