版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第3讲网页及网页设计的基本方法参考资源：/dxjsj2/《大学计算机Ⅱ》2026/5/10广东金融学院2《网页设计篇》要求方法内容目的教学目的2026/5/10广东金融学院3掌握一种全新的信息展示平台1储备必要的网页制作技能2为进一步学习网页设计打好基础3教学内容2026/5/10广东金融学院4网页制作的基本步骤1站点的设计和发布2网页的布局技巧3多媒体网页的制作4表单网页制作5网页的高级格式化6教学方法2026/5/10广东金融学院5启发式教学法1多媒体教学法2案例教学法3学习要求2026/5/10广东金融学院6多讨论1多思考2多上机3多交流4本次课主要内容2026/5/10广东金融学院7网页概念、特点和结构1第1个网页作品2一种高效的网页制作工具3课堂讨论4介绍DreamweaverCS6的界面5网页文件的基本操作6总结并布置作业71．网页概念、特点和结构认识几个网页2026/5/10广东金融学院8认识几个网页/frames.html1．网页概念、特点和结构2026/5/10广东金融学院9认识几个网页1．网页概念、特点和结构2026/5/10广东金融学院10认识几个网页1．网页概念、特点和结构2026/5/10广东金融学院11内容丰富网页的基本特点2026/5/10广东金融学院12网页元素构成图片文字动画其他声音视频网页的基本特点颜色绚丽多彩2026/5/10广东金融学院13网页的基本特点格式丰富多样2026/5/10广东金融学院14网页元素（如：文本、图像、表格等）可设置的格式非常丰富。网页中的格式提供了一种快捷、方便的格式设置方法，如样式表、模板等。网页的基本特点网页浏览软件的通用性2026/5/10广东金融学院15InternetExplorer浏览器Netscape浏览器网页的结构2026/5/10广东金融学院16“国”字形结构1“
”形结构2上下结构3其它结构4有关概念网页又称网页文档（英文名是WebPage），一般由HTML文件组成，包含文本、图像、超链接、动画、音频、视频、表格及表单等，位于计算机的特定目录中，其位置可以根据URL（即统一资源定位器）确定。浏览器是用于显示网页文档的应用软件，常见的浏览器有：NetscapeNavigator；InternetExplorer。2026/5/10广东金融学院17有关概念Web服务器是指安装了Web服务软件的计算机，它使用HTTP或FTP等协议来响应TCP/IP网络上的Web客户（即浏览器）请求。Web服务器中存放了大量的网页文件及相关的文件资源（如图像、音频、视频及动画等），每个文件资源都有唯一的URL。Web服务器通过Web服务软件向外提供Web服务，即响应来自浏览器的各种请求。2026/5/10广东金融学院18浏览器和Web服务器的网页通信过程2026/5/10广东金融学院19Web服务器网页响应请求Web浏览器2．第一个网页作品2026/5/10广东金融学院20网页的最终效果2．第一个网页作品启动记事本，输入下列文字，并以“MyFirstWebPage.html”保存。2026/5/10广东金融学院21<html><head><title>一个简单的HTML网页</title></head><body><center><h3>少年行</h3>王维<br><hralign="center"width="160"color="red">新丰美洒斗十千，<br>咸阳游侠多少年。<br>相逢意气为君饮，<br>系马高楼垂柳边。</center></body></html>两个软件打开同一文件的差异2026/5/10广东金融学院22为何不同?！什么是HTML？HTML（HyperTextMarkupLanguage）即超文本标记语言，是一种描述网页文档结构的语言。它使用标记符来描述网页文档的结构，这些标记是区分网页文档各个部分的分界符，它们将网页文件分成不同的结构，如标题、段落及表格等。采用HTML编写的网页文档是普通的文本格式文件，文件包含两部分信息：文本和标记符。文件扩展名是“*.htm”或“*.html”。2026/5/10广东金融学院23HTML的优点（1）同HTML编写的网页文档很小，非常适合在网络中传输。（2）同HTML编写的网页文档是独立于平台的，只要有一个可以阅读和解释HTML的浏览器，就能在任何操作系统上浏览。（3）HTML是一种标记语言，简单易学。（4）制作HTML文档并不需要特殊的软件，只要一个文本编辑器就可以完成，如记事本，写字板或Word等。2026/5/10广东金融学院24关于标记什么是标记标记是网页格式化的基础，HTML语言通过使用标记来格式化网页元素。2026/5/10广东金融学院25<标记名>结束符号标记名称开始符号关于标记单独标记格式：<标记名称>如：<br>成对标记格式：<开始标记名称>被标识或格式化内容<结束标记名称>如：<center>经济管理专业</center>2026/5/10广东金融学院26关于标记标记的属性许多单独标记或成对标记的开始标记内可以包含一些属性设置，这些属性控制着标记的基本特征。标记的属性都有自己的默认值，如果不想使用这些默认值，可以对它们的值进行修改。不管是单独标记还是成对标记，它们的属性设置格式都是一样的。2026/5/10广东金融学院27关于标记标记的属性格式：
<标记名称属性名1="属性值"属性名2="属性值"…>[…</标记名称>]如：<hrsize="3"align="left"width="75%">2026/5/10广东金融学院28关于标记使用标记时应注意的问题标记不区分大小写，但必须使用半角字符（即英文字符）。成对标记可以写在一行，也可以写在不同行（即开始子标记与结束子标记处在不同的行），其效果相同。标记本身不能拆写到不同行上。2026/5/10广东金融学院29示例中的HTML标记的含义标记名称说
明<html>…</html>标识HTML文档的开始和结束。<head>…</head>标识HTML文档头的开始和结束。<title>…</title>网页标题标记，作用是将开始和结束标记之间的文本放在浏览器的标题栏中。<body>…</body>标识HTML文档主体的开始和结束。<h3>…</h3>标题标记，作用是将开始和结束标记之间的文本按照指定的标题格式显示。<p>…</p>分段标记，作用是将开始和结束标记之间的文本形成一个独立的段落。<hr>水平线标记，作用是在当前位置插入一条水平线。水平线的特征是：水平居中，宽度为160像素，红色。<br>换行标记，作用是在当前位置插入一个换行符，使标记后的文本在下一行的开始位置显示。<center>…</center>水平居中标记，作用是将开始和结束标记之间的文本在浏览器窗口中，以水平居中的方式显示。2026/5/10广东金融学院30HTML文档的结构2026/5/10广东金融学院31记事本和浏览器在显示网页文件的差异记事本原封不动的显示文件中的文本。浏览器需要解析文件中的HTML标记，并按照标记的要求将有关内容在浏览器中以一定的格式显示出来。2026/5/10广东金融学院32包含HTML标记的文本解析标记由上例引出的思考1）用记事本制作网页，不能达到“所见即所得的效果”2）需要记住大量标记的用法3）网页制作效率太差，无法满足当前网页快速更新的需要4）对于内容丰富、格式多样的复杂网页，仍然采用记事本程序是不现实的5）有没有更高效的网页制作方法？2026/5/10广东金融学院33当前制作网页的主要工具及特点2026/5/10广东金融学院34MicrosoftWord1MicrosoftFrontPage2MacromediaDreamweaverCS633．一种高效的网页制作工具运用DreamweaverCS6代替记事本制作网页“MyFirstWebPage.html”2026/5/10广东金融学院352026/5/10广东金融学院36DreamweaverCS6记事本PK4．课堂讨论总结1)异同点相同点：操作思路类似，它们是经历“新建”→“编辑”→“保存”这一过程。不同点：①编辑对象上的差异：记事本直接编辑标记，并通过标记控制文本格式；②DreamweaverCS6只编辑文本，不需要对标记进行编辑，格式使用可视化方式完成。2026/5/10广东金融学院37总结2)优缺点①DreamweaverCS6的优点：方便、快捷、可视化格式编辑、“所见即所得”效果等。②记事本的缺点：格式编辑繁锁、效率差、没有“所见即所得”的排版效果等。2026/5/10广东金融学院384．介绍DreamweaverCS6的界面2026/5/10广东金融学院39菜单栏面板组文档工具栏文档窗口状态栏属性面板文件面板插入面板“文件”面板的外观2026/5/10广东金融学院40面板标签面板标题栏控制菜单4．网页文件的基本操作一个例子——“我的个人简历”2026/5/10广东金融学院414．网页文件的基本操作本例相关说明1)网页设计的基本步骤，如新建、打开、编辑、保存和预览等；2)网页的基本编辑操作，如文字录入、页面属性设置、格式化等；3)强调网页编辑操作的重要性。2026/5/10广东金融学院425．总结并布置作业总结1)网页的基本概念：网页、浏览器和Web服务器；HTML和网页；浏览器和网页的关系。2)使用DreamweaverCS6制作网页的基本步骤和方法。2026/5/10广东金融学院435．总结并布置作业布置作业1)试评价Google站点主页和Sohu站点主页在设计风格上有什么异同点，并给出你的理由。2)设计一个页面，显示两首七绝唐诗，要求两首唐诗并排摆放在页面上（类似于Wor
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
评论
0/150
提交评论