一级考网页制作部分.ppt
2023/10/8,第4.5章 网页概念与网页制作第4.6章 网站规划与建设,第2页 共42页,4.5.1 网页与网站的概念,网页与网站的概念 站点的结构,第3页 共42页,4.5.1.1 网页与网站的概念,网页的概念网站的概念,第4页 共42页,网页的概念,网页存放在与因特网相连的一台计算机中，通过网址(URL)来识别与存取。当用户在浏览器中输入网址后，经过一段复杂但快速的处理后，网页文件会被传送到用户的计算机中，然后通过浏览器对网页的内容进行解释，最后显示到计算机的屏幕上。通常的网页都是以htm或html为后缀的文件，也称为HTML文件。一个HTML网页文件包含了多种HTML标记符，这些标记符是一些嵌入式命令，提供了网页的结构、外观和内容等信息。Web浏览器就是通过这些标记符来决定显示网页的方式。,第5页 共42页,网站的概念,简单来说，网站是由网页集合而成。网站是WWW(万维网)中最基本的组成部分，而网页又是网站的最基本组成部分。网页之间并不是杂乱无章的，而是通过各种链接相互关联，从而描述相关的主题或实现相同的目的。网站(Website)是指在因特网上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合。简单地说，网站是一种通讯工具，就像布告栏一样，人们可以通过网站来发布自己想要公开的资讯，或者利用网站来提供相关的网络服务。人们可以通过网页浏览器来访问网站，获取自己需要的资讯或者享受网络服务。,第6页 共42页,4.5.1.2 站点的结构,网站的结构一般指网站的目录结构网站的目录是指在创建网站时建立的目录，我们要根据网站的主题和内容来分类规划，不同的栏目要对应不同的目录，在各个栏目目录下我们也要根据内容的不同对其划分不同的分目录，比如说页面图片放到images目录下，新闻放到news目录下，数据库放到database目录下等等。同时要注意目录的的层次不宜太深，一般不要超过三层，另外给目录起名的时候要尽量使用能表达目录内容的英文或汉语拼音，这样会更加方便日后的管理维护。,第7页 共42页,页面结构,不同主题的网站对网页内容的安排会有所不同，但大多数网站首页的页面结构都会包括页面标题、网站LOGO、导航栏、登录区、搜索区、热点推荐区、主内容区和页脚区(如图)，其他页面不需要设置如此复杂了，一般由页面标题、网站LOGO、导航栏、主内容区和页脚区等构成。一般按“同”字型、“国”字型、“川”字型、“品”字型布局页面,第8页 共42页,4.5.2 网页制作,网页描述语言网页制作工具网页制作原则与步骤 文字、图片、多媒体、表格、表单、超级链接的使用（熟练掌握）页面设计（熟练掌握）站点的建立网页发布,第9页 共42页,网页描述语言,HTML语言是由一个世界性的标准化组织W3C（World Wide Web Consortium）制定出来的。该语言自1990年问世以来，迄今为止已经发行了4个版本。现在最新的是HTML4.0版本，通过浏览“http:/www.w3.org/pub/www/”站点，可以了解HTML标准的最新动态。HTML文件本身是一个ASCII文件，在任何文本编辑器中都可以进行编辑，当一个HTML文件编辑好后，必须用扩展名“.htm”或“.html”来存储，以表示该文件是HTML文档。一个HTML文件是由内容和标记构成的。,返回目录,第10页 共42页,HTML基本语法,HTML文件通常由4个主要的标识元素构成，基本格式为：HTML文件标题演示 HTML文件的内容在这里显示,返回目录,第11页 共42页,常见的标记及其功能与用法,1子标题标记 HTML定义了6个级别的子标题，从到，数字越小，字号越大。定义格式为：子标题名称。分段、换行、原样显示标记：段落标记，它是一个双向标记，相当于回车换行。：也是一个换行标识，同样也是一个双向标记。不同于的是，由它定义的换行，两行之间不留空行。：双向标识，标识以原始文本格式进行显示。,第12页 共42页,3超文本链接标记：双向标识，用于标识超文本链接。使用格式为：超链接标记创建的超链接可以有以下几种形式：（1）链接到其它网页（2）链接到本网页的其它部分（3）链接到FTP服务器定义格式为：超链接标记。（4）链接到E-mail地址定义格式为：超链接标记。（5）将图像作为超链接标记在网页中嵌入图像：定义格式为：。,第13页 共42页,4网页文本修饰标记 修饰网页文本的标记非常丰富，下面列举几种主要的标记（1）字体修饰（2）设置字号和颜色定义格式为：文（3）居中显示定义格式为：文字。（4）横线标识,返回目录,第14页 共42页,网页制作工具,现在网页制作软件不少，但在众多的网页制作软件中，你会选择哪一种呢？现在我们就来介绍几种各有特色的网页制作软件。入门级软件-Microsoft FrontPage 2000(制作功能强大的网页),Netscape编辑器(制作简单的网页),Adobe Pagemill 3.0(制作多框架、表单和Image Map图像的网页),Claris Home Page 3.0(快速创建动态的网页),第15页 共42页,提高级软件-DreamWeaver(自制动态HTML动画的网页)DreamWeaver是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽从头到尾制作动态的HTML动画，支持动态HTML(Dynamic HTML)的设计，使得页面没有plug-in也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。,第16页 共42页,提高级软件-Fireworks 第一款彻底为Web制作者们设计的软件 Fireworks的来头实在不小，它的出现使Web作图发生了革命性的变化。Fireworks是专为网络图像设计而开发，内建丰富的支持网络出版功能，比如Fireworks能够自动切图、生成鼠标动态感应的javascript。而且Fireworks具有十分强大的动画功能和一个几乎完美的网络图像生成器(Export功能)。它增强了与dreamweaver的联系，可以直接生成dreamweaver的Libaray甚至能够导出为配合CSS式样的网页及图片！,第17页 共42页,提高级软件-Flash让你的网页动起来Flash是用在互联网上动态的、可互动的shockwave。它的优点是体积小，可边下载边播放，这样就避免了用户长时间的等待。可以用其生成动画，还可在网页中加入声音。这样你就能生成多媒体的图形和界面，而使文件的体积却很小。FLASH虽然不可以像一门语言一样进行编程，但用其内置的语句并结合JavaScripe，您也可做出互动性很强的主页来。有人曾经说过：下个世纪的网络设计人不会用FLASH，必将被淘汰出局！我相信这句话没错！,第18页 共42页,HotDog Professional 5制作要加入多种复杂技术的网页HomeSite 4.5制作可完全控制页面进程的网页HotMetal Pro 4.0制作具有强大数据嵌入能力的网页,返回目录,第19页 共42页,网页制作原则,一个优秀的页面应考虑到以下三个方面：内容、速度和页面美感。内容第一，速度第二，美观是第三具体是：尽心策划、尽量精简、尽量简朴、善用图片、使主页易于漫游、重点突出、循环利用现有信息、保持新鲜感、贯彻诺言、吸引用户浏览等十大原则,返回目录,第20页 共42页,网页制作步骤,没有定式，一般包括如下步骤风格设计（整站设计，布局设计，栏目确定）材料收集主页制作一般页面制作测试修改发布网页,返回目录,第21页 共42页,文字,文字是网页发布信息所用的主要形式通过键盘输入、粘贴或导入方式加入可通过属性检查器（属性面板），“文本”菜单，“文本”工具进行“标题”、样式、字体、字号、颜色、对齐等格式设置,返回目录,第22页 共42页,图片,是丰富网页的主要手段网页上的图形格式一般使用JPEG和GIF有“插入”菜单、“常用”工具和“属性面板”的“源文件”选择三种方法来插入可通过属性检查器（属性面板），进行显示大小、ID名、对齐、边框等格式设置。图片插入及设置演示,返回目录,第23页 共42页,多媒体,多媒体是指网页中二种以上的媒体同时出现。文本、图片如前所叙，这里主要制FLASH动画、FLASH按钮、ACTIVE X控件及JAVA APPLET、声音的插入。可通过“插入”/“媒体”扩展菜单以及“常用”工具栏的“媒体”下拉列表选择加入需要的对象可通过“属性”面板来指定多媒体对象的源文件、大小以及其他参数（如透明等）多媒体对象插入演示（重点SWF文件，难点Active X控件）,第24页 共42页,SWF文件插入,插入方法：点选插入处/“插入”工具/“常用”面板/“媒体”下拉列表中的“flash”按钮即可SWF背景去除，只要修改增加一个wmode的参数，其值为transparent,返回目录,第25页 共42页,添加Active X控件,插入方法：点选插入处/“插入”工具/“常用”面板/“媒体”下拉列表中的“Active X控件”按钮即可,第26页 共42页,ActiveX属性面板使用说明,名称：对象的名称，脚本程序用宽和高：指定控件显示大小ClassID:用于浏览器识别ActiveX控件嵌入：在OBJECT标签中添加EMBED标签，以便在netscape插件对象激活源文件：在netscape插件使用的数据文件基址：ActiveX控件的URL对齐、边距：参数：见样板文件,返回目录,第27页 共42页,声音文件的添加,目前较常用声音文件的格式有：.midi 或.mid格式、.wav格式、.aif格式、.mp3格式和.ra、.ram、.rpm 或 Real Audio 格式。要插入音频文件，可以执行以下操作：（1）在文档窗口中，将插入点放置在要插入文件的地方。（2）在“插入”面板中，选择“媒体”类别，然后单击“插件”图标，或直接该图标拖入到文档中（或选择菜单命令【插入】【媒体】【插件】）（3）在弹出的“选择文件”对话框中，选择声音文件。（4）这时文档窗口中会出现“插件”占位符。（5）通过在属性检查器的宽度和高度域中输入值，或者在文档窗口中用鼠标拖动插件占位符来调整其大小，用于确定音频控件在浏览器中以多大的尺寸显示。,返回目录,第28页 共42页,表格,表格以行和列的形式来组织信息，具有容量大、结构严谨和效果直观等多个优点，是网页中不可缺少的记录或总结工具。表格最主要的作用是定位网页元素表格的使用及设置演示,返回目录,第29页 共42页,表单,表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，被广泛用于各种信息的搜集和反馈。表单各元素插入演示,返回目录,第30页 共42页,超级链接,当用户定义了一个Dreamweaver站点并创建了HTML页面之后，一定希望在各文档之间创建链接关系，以实现正常的网站链接功能。Dreamweaver系统提供了多种方法创建超级链接，例如:文字链接、图象链接、锚点链接、电子邮件（E-mail）链接、插入FLASH对象、按钮的链接等等。,第31页 共42页,超级链接创建演示,网站中链接有多种形式，如链接到文件或HTML文档上、链接到同一窗口的指定位置上、链接到E-mail信箱上等属性面板中的【目标】下拉列表是可用状态，有4个选项：-blank：表示打开一个新的浏览器窗口，在新窗口中显示链接所指向的网页文档内容。-parent：回到上一级（父框架或称为父窗口）的浏览器窗口，显示链接所指向的网页文档内容。（在框架中应用）-self：在当前的的浏览器窗口显示链接所指向的网页文档内容。此目标为默认值，因此通常不需要指定它（在框架中应用）。-top：在整个浏览器窗口中载入所链接的文档，也就是说，整个浏览器窗口来显示链接所指向的网页文档内容。（在框架中应用）,返回目录,第32页 共42页,页面设计,利用表格定位技术布局各网页元素（重点熟练掌握）利用框架技术组织网页（大纲没提及,但06年考到）利用图层定位技术实现网页元素的特有布局（大纲没提及）利用模板技术制作风格一致的网页（大纲没提及）利用frontpage制作具有“共享边框”“主题”及“横幅”“悬停按钮”等页面。,返回目录,第33页 共42页,站点的建立,本地站点的创建“基本”标签（向导方式），“高级”标签（熟练者，有基础者）远程站点的创建“FTP”方式需要网站空间、帐号密码等信息；“本地/网络”方式需要本地目录空间或局域网共项可写空间。站点创建演示,返回目录,第34页 共42页,网页发布,在frontpage中有专门的发布菜单实现站点的发布。在DW中利用文件面板进行远程站点文件的发布与更新，前提是要有远程站点的空间和帐号。,返回目录,第35页 共42页,4.6 网站规划与建设,网站规划与设计 网站测试与维护,第36页 共42页,4.6.1 网站规划与设计,网站规划的基本方法网站设计的基本步骤,第37页 共42页,网站规划的基本方法,1确定主题和目的 2可行性分析 可行性分析是指分析建设者是否有能力建设和维护网站，即这个网站的制作在经济上及技术上是否可行，是否具备一定的经济效益和社会效益，是否值得为制作和维护网站而付出时间、精力和金钱。3确定网站的功能、形式,第38页 共42页,网站设计的基本步骤,用户在制作网站时不能随心所欲、没有计划就开始动手制作，那样往往会走很多弯路以致最后不得不回过头来重新设计，既浪费了时间又浪费了精力。因此，在制作网站之前，先了解一下网站制作的基本流程，有利于制作出更好更合理的网站来。1服务器选择 2网页的编写 3网页调试 4网页的发布 5维护与管理,第39页 共42页,4.6.2 网站测试与维护,网站测试的方法网站管理的内容网站建立,第40页 共42页,网站测试的方法,使用站点地图在站点地图中，HTML文件和其他页面内容都是以图标形式显示，而连接关系则显示了它们在HTML源代码中出现的先后顺序网站完成后，需要对站点链接进行后期检测，以确保整个网站中的链接可用。在DW8中，可以选择“站点”|“检查站点范围的链接”命令，对当前网站内所有文件的链接进行检查，检测“断掉的链接”(即无效链接)、“外部链接”以及“孤立文件”的统计信息。,第41页 共42页,网站管理的内容,管理目录管理文件,第42页 共42页,网站建立,申请空间申请域名制作网站（网页）检测网站发布网站,
