网页制作讲义.ppt

本次大课的目的：快乐、轻松地学习 了解这门课程的教学目的 了解这门课程的教学形式 了解这门课程的教学内容 因各自的起点不一样，同样的一门课程对每一位同学的负担不一样 　　这里强调网页和主页之间的差别及它们之间的关系。 　　主页（Homepage）与页面（Page）：万维网中文件信息被称作页面。每一个WWW服务器上存放着大量的页面文件信息，其中默认的封面文件称为主页。浏览器与Web服务器之间的信息传送是以页为单位的，每次传送一页，这里的页可能是浏览器的一屏也可能是多屏，这里页的实质就是一个文件。 　　一个网站是由众多的网页组成的，它们存储在某一个Web服务器上，而浏览者连接到一个Web站点后传过来的第一个网页文件就是这个站点的主页，网页和主页的书写方式不同，对于网页，要写上完整的URL，而对于主页，只要写上协议名和服务器的名字就可以把主页传过来了，这是因为Web服务器都有自己默认的主页名称，不同的服务器系统默认的主页名称也不同，常见的有index.htm（index.html） 或default.htm（default.html）。 　　大多数电子文档不论页数多少，均只由一个文件组成。而Web文档基于以下原因，将每个网页存放在单独的文件中： （1）将每个网页存放在单独文件中使得下载的单元更小，同时提高了下载速度。 （2）可以方便地引用超文本地址，到某个网页的链接只需要简单地指向相应的文件名。 （3）Web页没有固定的长度，因此不需要每隔一个显示屏幕尺寸就设置一个分页符。 Web页通常成组出现。创建仅包含一个网页的站点就如同制作只有一张幻灯片的演示文稿，不仅让人觉得枯燥乏味，而且对丰富的传播媒介也是一种浪费。 　选择主题：一个网站一定要有一个明确的主题，如公司的网站是用于介绍公司的产品、技术公告、支持服务；而个人站点，可以把个人简历，兴趣爱好等个人信息发布到网上，展现个人风采，结交朋友。不同的主题，规划方法也不同。 　规划网页：根据主题来构造网站结构，在导航视图中实现网站结构。 　组织素材：有目的地收集素材，进行整理、筛选、加工，来决定放在网站上的内容。 　选择视觉外观：一个网站中的所有网页的外观要协调统一，这包括相同的文字字体、相同的网页色调、一致性的导航超链接等。 　设计有效的页面布局：根据实际情况来决定使用何种页面布局，如使用表格或框架布局页面。 　制作具体网页：下面会具体讲 　发布网站信息：下面会具体讲 前5个步骤要在本幻灯片中较详细地讲解，步骤6～7将在以后的幻灯片中全面讲解。教材参考10.7节内容。 　 网站是由网页组成的，网页之间是由超链接来连接的，其连接方式有三种：线性网站、树状网站、非线性网站。 　线性网站：用于组织本身是线性顺序形式存在的信息，可以引导浏览者象翻阅书籍一样按顺序浏览整个网站。 　树状网站：类似目录系统的树型结构，由网站的主页开始，依次划分为一层标题、二层子标题……逐级细化，直至提供给浏览者具体信息。在这种结构中，主页是对整个网站的概括，同时提供了与下层的链接。 　非线性网站：通常网站的结构是线性网站和树状网站的结合，这样可以充分利用两种结构各自的特点，使网站具有条理，并可同时满足设计者和浏览者的要求。 　　事实上，网络上形形色色的网页都是基于HTML语言编写而成的，网页本身都是普通的文本文件（也称之为HTML文件），因此可以用任何一种文本编辑程序直接编写和修改HTML代码，如Windows的写字板、记事本，DOS的Edit。经过Web浏览器对HTML语言的解释和处理后，网页显示在用户面前的就是一个多媒体的超文本文件。 　　我们以记事本程序为例，简单介绍如何直接编写和修改HTML代码。 　　演示，打开记事本，写如下代码： html body 这是我的第一个网页！/body /html 保存，指定保存位置，文件名，后缀一定要写成htm或 html，如first.htm。 　　打开浏览器，选择文件菜单的打开命令，点浏览按钮，找到first.htm，单击确定按钮，即可在本地浏览该网页文件。下面再添加背景、插入图片、插入超链接，插入水平线并修改水平线的属性。 　　选择查看菜单的源文件命令，就打开记事本，显示本网页的源文件，下面是添加后的源文件，可分成5步添加，每添加一步，保存，刷新。假设嵌入的文件和first.htm在一个文件夹中。 html (1)body background=“bg.jpg” 这是我的第一个网页！ (2)img src=“2000y.gif” (3)A href=“card.html”圣诞节/A (4、5)hr color=“red” size=5 /body/html 　　本幻灯片的目的是让学生了解直接写源代码编网页的过程。