第第3讲讲 网页及网页设计的基本方法网页及网页设计的基本方法参考资源：http:/218.192.12.13/kcpt/jkx.html大学计算机2024/8/28广东金融学院2网页设计篇网页设计篇要求要求方法方法内容内容目的目的教学目的教学目的2024/8/28广东金融学院3掌握一种全新的信息展示平台1储备必要的网页制作技能2为进一步学习网页设计打好基础3教学内容教学内容2024/8/28广东金融学院4网页制作的基本步骤1站点的设计和发布2网页的布局技巧3多媒体网页的制作4表单网页制作5网页的高级格式化6教学方法教学方法2024/8/28广东金融学院5启发式教学法1多媒体教学法2案例教学法3学习要求学习要求2024/8/28广东金融学院6多讨论1多思考2多上机3多交流4本次课主要内容本次课主要内容2024/8/28广东金融学院7网页概念、特点和结构1第1个网页作品2一种高效的网页制作工具3课堂讨论4介绍Dreamweaver 8的界面5网页文件的基本操作6总结并布置作业71网页概念、特点和结构网页概念、特点和结构v认识几个网页认识几个网页http:/www.edu.cnhttp:/www.edu.cn2024/8/28广东金融学院8v认识几个网页认识几个网页http:/www.newsmth.net/frames.htmlhttp:/www.newsmth.net/frames.html1网页概念、特点和结构网页概念、特点和结构2024/8/28广东金融学院9v认识几个网页认识几个网页http:/zhaoweispace.blog.sohu.comhttp:/zhaoweispace.blog.sohu.com1网页概念、特点和结构网页概念、特点和结构2024/8/28广东金融学院10v认识几个网页认识几个网页http:/www.baidu.comhttp:/www.baidu.com1网页概念、特点和结构网页概念、特点和结构2024/8/28广东金融学院11v内容丰富内容丰富网页的基本特点网页的基本特点2024/8/28广东金融学院12网页元网页元素构成素构成图片图片文字文字动画动画其他其他声音声音视频视频网页的基本特点网页的基本特点v颜色绚丽多彩颜色绚丽多彩2024/8/28广东金融学院13网页的基本特点网页的基本特点v格式丰富多样格式丰富多样2024/8/28广东金融学院14网页元素（如：文本、图像、表格等）可设置的格式非常丰富。网页中的格式网页中的格式提供了一种快捷、方便的格式设置方法，如样式表、模板等。网页的基本特点网页的基本特点v网页浏览软件的通用性网页浏览软件的通用性2024/8/28广东金融学院15Internet Explorer浏览器Netscape浏览器网页的结构网页的结构2024/8/28广东金融学院16“国”字形结构1“ ” 形结构2上下结构3其它结构4有关概念有关概念v网页网页又称网页文档（英文名是又称网页文档（英文名是Web PageWeb Page），一般），一般由由HTMLHTML文件组成，包含文本、图像、超链接、文件组成，包含文本、图像、超链接、动画、音频、视频、表格及表单等，位于计动画、音频、视频、表格及表单等，位于计算机的特定目录中，其位置可以根据算机的特定目录中，其位置可以根据URLURL（即统一资源定位器）确定。（即统一资源定位器）确定。v浏览器浏览器是用于显示网页文档的应用软件，常见的浏是用于显示网页文档的应用软件，常见的浏览器有：览器有：Netscape NavigatorNetscape Navigator；Internet Internet ExplorerExplorer。2024/8/28广东金融学院17有关概念有关概念vWebWeb服务器服务器是指安装了是指安装了WebWeb服务软件的计算机，它使用服务软件的计算机，它使用HTTPHTTP或或FTPFTP等协议来响应等协议来响应TCP/IPTCP/IP网络上的网络上的WebWeb客户（即浏览器）请求。客户（即浏览器）请求。WebWeb服务器中存放服务器中存放了大量的网页文件及相关的文件资源（如图了大量的网页文件及相关的文件资源（如图像、音频、视频及动画等），每个文件资源像、音频、视频及动画等），每个文件资源都有唯一的都有唯一的URLURL。WebWeb服务器通过服务器通过WebWeb服务软件向外提供服务软件向外提供WebWeb服服务，即响应来自浏览器的各种请求。务，即响应来自浏览器的各种请求。2024/8/28广东金融学院18浏览器和浏览器和Web服务器的网页通信过程服务器的网页通信过程2024/8/28广东金融学院19Web服务器网页响应请求Web浏览器2第一个网页作品第一个网页作品2024/8/28广东金融学院20v网页的最终效果网页的最终效果2第一个网页作品第一个网页作品v启动记事本，输入下列文字，并以启动记事本，输入下列文字，并以“MyFirstWebPage.htmlMyFirstWebPage.html”保存。保存。2024/8/28广东金融学院21一个简单的HTML网页少年行王维新丰美洒斗十千，咸阳游侠多少年。相逢意气为君饮，系马高楼垂柳边。两个软件打开同一文件的差异两个软件打开同一文件的差异2024/8/28广东金融学院22为何不同为何不同?！什么是什么是HTML？vHTMLHTML（Hyper Text Markup LanguageHyper Text Markup Language）即超文）即超文本标记语言，是一种描述网页文档结构的语言。本标记语言，是一种描述网页文档结构的语言。它使用标记符来描述网页文档的结构，这些标它使用标记符来描述网页文档的结构，这些标记是区分网页文档各个部分的分界符，它们将记是区分网页文档各个部分的分界符，它们将网页文件分成不同的结构，如标题、段落及表网页文件分成不同的结构，如标题、段落及表格等。格等。v采用采用HTMLHTML编写的网页文档是普通的文本格式文编写的网页文档是普通的文本格式文件，文件包含两部分信息：文本和标记符。文件，文件包含两部分信息：文本和标记符。文件扩展名是件扩展名是“* *.htm.htm”或或“* *.html.html”。2024/8/28广东金融学院23HTML的优点的优点v（1 1）同）同HTMLHTML编写的网页文档很小，非常适合编写的网页文档很小，非常适合在网络中传输。在网络中传输。v（2 2）同）同HTMLHTML编写的网页文档是独立于平台的，编写的网页文档是独立于平台的，只要有一个可以阅读和解释只要有一个可以阅读和解释HTMLHTML的浏览器，就的浏览器，就能在任何操作系统上浏览。能在任何操作系统上浏览。v（3 3）HTMLHTML是一种标记语言，简单易学。是一种标记语言，简单易学。v（4 4）制作）制作HTMLHTML文档并不需要特殊的软件，只文档并不需要特殊的软件，只要一个文本编辑器就可以完成，如记事本，写要一个文本编辑器就可以完成，如记事本，写字板或字板或WordWord等。等。2024/8/28广东金融学院24关于标记关于标记v什么是标记什么是标记标记是网页格式化的基础，标记是网页格式化的基础，HTMLHTML语言通过使语言通过使用标记来格式化网页元素。用标记来格式化网页元素。2024/8/28广东金融学院25结束符号标记名称开始符号关于标记关于标记v单独标记单独标记格式：格式： 如：如：v成对标记成对标记格式：格式： 被标识或格式化内容被标识或格式化内容 如：如：经济管理专业经济管理专业2024/8/28广东金融学院26关于标记关于标记v标记的属性标记的属性许多单独标记或成对标记的开始标记内可以许多单独标记或成对标记的开始标记内可以包含一些属性设置，这些属性控制着标记的包含一些属性设置，这些属性控制着标记的基本特征。基本特征。标记的属性都有自己的默认值，如果不想使标记的属性都有自己的默认值，如果不想使用这些默认值，可以对它们的值进行修改。用这些默认值，可以对它们的值进行修改。不管是单独标记还是成对标记，它们的属性不管是单独标记还是成对标记，它们的属性设置格式都是一样的。设置格式都是一样的。2024/8/28广东金融学院27关于标记关于标记v标记的属性标记的属性格式：格式： /如如： hr size=3 align=left width=75%2024/8/28广东金融学院28关于标记关于标记v使用标记时应注意的问题使用标记时应注意的问题标记不区分大小写，但必须使用半角字符标记不区分大小写，但必须使用半角字符（即英文字符）。（即英文字符）。成对标记可以写在一行，也可以写在不同行成对标记可以写在一行，也可以写在不同行（即开始子标记与结束子标记处在不同的行）（即开始子标记与结束子标记处在不同的行），其效果相同。，其效果相同。标记本身不能拆写到不同行上。标记本身不能拆写到不同行上。2024/8/28广东金融学院29示例中的示例中的HTML标记的含义标记的含义标记名称标记名称说说 明明标识HTML文档的开始和结束。标识HTML文档头的开始和结束。网页标题标记，作用是将开始和结束标记之间的文本放在浏览器的标题栏中。标识HTML文档主体的开始和结束。标题标记，作用是将开始和结束标记之间的文本按照指定的标题格式显示。分段标记，作用是将开始和结束标记之间的文本形成一个独立的段落。水平线标记，作用是在当前位置插入一条水平线。水平线的特征是：水平居中，宽度为160像素，红色。换行标记，作用是在当前位置插入一个换行符，使标记后的文本在下一行的开始位置显示。水平居中标记，作用是将开始和结束标记之间的文本在浏览器窗口中，以水平居中的方式显示。2024/8/28广东金融学院30HTML文档的结构文档的结构2024/8/28广东金融学院31记事本和浏览器在显示网页文件的差异记事本和浏览器在显示网页文件的差异v记事本原封不动的显示文件中的文本。记事本原封不动的显示文件中的文本。v浏览器需要解析文件中的浏览器需要解析文件中的HTMLHTML标记，并标记，并按照标记的要求将有关内容在浏览器中按照标记的要求将有关内容在浏览器中以一定的格式显示出来。以一定的格式显示出来。2024/8/28广东金融学院32包含HTML标记的文本解析标记由上例引出的思考由上例引出的思考v1 1）用记事本制作网页，不能达到）用记事本制作网页，不能达到“所见所见即所得的效果即所得的效果”v2 2）需要记住大量标记的用法）需要记住大量标记的用法v3 3）网页制作效率太差，无法满足当前网）网页制作效率太差，无法满足当前网页快速更新的需要页快速更新的需要v4 4）对于内容丰富、格式多样的复杂网页，）对于内容丰富、格式多样的复杂网页，仍然采用记事本程序是不现实的仍然采用记事本程序是不现实的v5 5）有没有更高效的网页制作方法？）有没有更高效的网页制作方法？2024/8/28广东金融学院33当前制作网页的主要工具及特点当前制作网页的主要工具及特点2024/8/28广东金融学院34Microsoft Word1Microsoft FrontPage2Macromedia Dreamweaver 833一种高效的网页制作工具一种高效的网页制作工具v运用运用Dreamweaver 8Dreamweaver 8代替记事本制作网页代替记事本制作网页“MyFirstWebPage.htmlMyFirstWebPage.html”2024/8/28广东金融学院352024/8/28广东金融学院36Dreamweaver 8记事本PK4课堂讨论课堂讨论总结总结v1) 1) 异同点异同点相同点：相同点：操作思路类似，它们是经历操作思路类似，它们是经历“新建新建”“编辑编辑”“保存保存”这一过程。这一过程。不同点：不同点： 编辑对象上的差异：记事本直接编辑标记，编辑对象上的差异：记事本直接编辑标记，并通过标记控制文本格式；并通过标记控制文本格式； Dreamweaver 8Dreamweaver 8只编辑文本，不需要对标记进只编辑文本，不需要对标记进行编辑，格式使用可视化方式完成。行编辑，格式使用可视化方式完成。2024/8/28广东金融学院37总结总结v2) 2) 优缺点优缺点 Dreamweaver 8Dreamweaver 8的优点：方便、快捷、可的优点：方便、快捷、可视化格式编辑、视化格式编辑、“所见即所得所见即所得”效果等。效果等。 记事本的缺点：格式编辑繁锁、效率差、记事本的缺点：格式编辑繁锁、效率差、没有没有“所见即所得所见即所得”的排版效果等。的排版效果等。2024/8/28广东金融学院384介绍介绍Dreamweaver 8的界面的界面2024/8/28广东金融学院39标题栏菜单栏插入工具栏文档工具栏文档窗口状态栏属性面板面板组面板开关文件面板“文件文件”面板的外观面板的外观2024/8/28广东金融学院40面板标题控制菜单4网页文件的基本操作网页文件的基本操作v一个例子一个例子“我的个人简历我的个人简历”2024/8/28广东金融学院414网页文件的基本操作网页文件的基本操作v本例相关说明本例相关说明1) 1) 网页设计的基本步骤，如新建、打开、网页设计的基本步骤，如新建、打开、编辑、保存和预览等；编辑、保存和预览等；2) 2) 网页的基本编辑操作，如文字录入、页网页的基本编辑操作，如文字录入、页面属性设置、格式化等；面属性设置、格式化等；3) 3) 强调网页编辑操作的重要性。强调网页编辑操作的重要性。2024/8/28广东金融学院425总结并布置作业总结并布置作业v总结总结1) 1) 网页的基本概念：网页、浏览器和网页的基本概念：网页、浏览器和WebWeb服服务器；务器；HTMLHTML和网页；浏览器和网页的关系。和网页；浏览器和网页的关系。2) 2) 使用使用Dreamweaver 8Dreamweaver 8制作网页的基本步骤制作网页的基本步骤和方法。和方法。2024/8/28广东金融学院435总结并布置作业总结并布置作业v布置作业布置作业1) 1) 试评价试评价GoogleGoogle站点主页和站点主页和SohuSohu站点主页站点主页在设计风格上有什么异同点，并给出你的理在设计风格上有什么异同点，并给出你的理由。由。2) 2) 设计一个页面，显示两首七绝唐诗，要设计一个页面，显示两首七绝唐诗，要求两首唐诗并排摆放在页面上（类似于求两首唐诗并排摆放在页面上（类似于WordWord中的分栏功能）。请思考你使用的方法是不中的分栏功能）。请思考你使用的方法是不是有点繁琐，如果是，请给出一个更好的解是有点繁琐，如果是，请给出一个更好的解决方案。决方案。2024/8/28广东金融学院445总结并布置作业总结并布置作业3) 3) 根据个人的基本信息，制作的一个网页根据个人的基本信息，制作的一个网页（在下次课之前以邮件形式提交），下次课（在下次课之前以邮件形式提交），下次课在课堂上随机抽查并点评。在课堂上随机抽查并点评。4) 4) 习题集第习题集第3 3章中的有关习题。章中的有关习题。v思考思考我们制作的网页如何放在网络上，供人浏览我们制作的网页如何放在网络上，供人浏览？让学生带着这一问题去预习下一次课（请？让学生带着这一问题去预习下一次课（请参见教材参见教材P101P101P109P109）的内容。）的内容。2024/8/28广东金融学院45LOGOwww.gduf.edu.cn2024/8/2846广东金融学院