网页设计与制作教案95345_第1页
网页设计与制作教案95345_第2页
网页设计与制作教案95345_第3页
网页设计与制作教案95345_第4页
网页设计与制作教案95345_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、网页设计与制作教案湄洲湾职业技术学院2008-2009学年第一学期教师： 唐 俊 奇 系部：信息技术工程系专业：计算机应用 电子信息班级：计机07（1）信息07（1）08（2） 第一讲 网页设计概述【教学内容】讲解网页设计的相关术语及网站制作的基本流程。【教学目的】使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】网页设计中的若干术语。【教学难点】理解网页设计中的若干术语。【教学方式】讲授式、讨论式、案例分析式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、Internet 网页工场Wittime工作室 重庆出版社。3、WEB网站设计Joe

2、l Sklar著 高等教育出版社。4、HTML网页制作教程材义语编著 铁道出版社。【新课内容】1.1 WWW和URL Web的起源Web是World Wide Web的简称，一般也称之为WWW或3W Web的特点和结构Web最大的特点是使用了超文本（Hypertext）WWW采用C/S（客户机/服务器）工作模式在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议 URLURL的完整格式协议:/主机名或IP地址：端口号/路径名/文件名1.2 IE5的使用Web浏览器是浏览Internet资源的客户端软件在Windows

3、环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等 IE5的界面 IE5的使用1.3 网页中所使用的技术 HTML语言和XML语言1、HTML语言ØHTML只使用SGML中很小一部分标记ØHTML语言（Hyper Text Markup Language 超文本标记语言）ØHTML是纯文本的语言，其源代码可以用各种文本编辑工具进行编辑，常用的网页制作软件如FrontPage、Dreamweaver等实际上是自动生成HTML源代码的工具2、XML语言XML（eXtensible Markup Langua

4、ge） 动态网页 多媒体技术的应用 Web服务器端程序1.4 制作网页的基本方法 制作网页的基本步骤1、确定网页的内容2、设计网页的组织结构3、资料的收集与整理4、选择网页的设计方法 制作网页时要注意的问题1、网页的标题要简洁，明确。2、在文本中要使用水平线，以分割不同部分。3、对重点段落要强调显示。4、网页中插入的图片要尽量的小。5、图形要附加文字说明，以便关闭图像时查看。6、网页中引用的资料及商标（或图标），不能侵犯版权。【课后小结】通过学习，认识网络、网站、网页及相关信息，理解网页制作的流程及了解相应开发工具，为设计网页做准备。第二讲 HTML的基本标志与格式标志【教学内容】讲解HTML

5、基本标志对和格式标志。【教学目的】使学生标志对与格式标志对的使用。【教学重点】格式标志的使用。【教学难点】列表标志的使用。【教学方式】讨论式、案例分析式、练习式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、HTML网页制作教程材义语编著 铁道出版社。【新课内容】2.1 HTML文档的基本结构 HTML语法1、双标记 语法： <标记>内容</标记>2、单标记语法：<标记>最常用的单标记是<BR>3、标记属性语法<标记 属性1 属性2 属性3 >例

6、子<HR Size=3 Align=left Width="75%">4、注释语句格式<!-注释文字->例子<!-由这处开始是产品订购表格-> <!-本文版权为 1998， Creation of Webpage 所拥有，未经允许，请勿抄摘-> HTML文档的基本结构【课后小结】通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用列表,有序列表,无序列表标志及属性。第三讲 HTML的文本、图片与超级链接标志【教学内容】讲解HTML标准中的文本、图片与超级链接标志【教学目的】* 使学生了解标题元素,掌握字体,

7、上下标,及特殊字符的标志。* 使学生掌握图片标志,声音标志及相应的属性,学会利用标志在网页中插入声音与图片。* 使学生掌握超级链接标志的使用。【教学重点】* 字体、图片和超级链接标志的使用。* 网页中特殊符号的输入 。【教学难点】* 理解特殊符号对应的标志。* 理解img标志中属性的意义。* 理解书签超级链接的意义 。【教学方式】讨论式、案例分析式、练习式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、HTML网页制作教程材义语编著 铁道出版社。【新课内容】2.2 插入文字 划分段落格式<P ali

8、gn=*>段落内容</P> 插入标题文字格式<H? Alight="标题属性">标题内容</H?> 字号属性设置基准字号：<BASEFONT Size=数值>网页内的其他文字，采用下面的格式来定义<FONT Size=数值>.</FONT>Size的有效范围是1（最大）到7（最小）。如果在Size的值前面带上“+”号或“-”号，则表示相对于基础字体增大或减小若干字号。 颜色属性两种方式<BODY text="#RRGGBB"><FONT Color="

9、;#RRGGBB">字符串</FONT> 字体属性<FONT Face=“宋体,隶书,Time”></FONT> 文本修饰<B>.</B>，文字以粗体显示。<I>.</I>，文字显示为斜体。<U>.</U>，显示下划线。<STRIKE>.</ STRIKE>，中心线贯穿文字。< EM>.</ EM>，强调文字，通常用斜体。 < STRONG>.</ STRONG >，特别强调的文字，通常用黑体。 &l

10、t;TT>.</TT>，以等宽体显示西文字符。<BIG>.</BIG>，使文字大小相对于前面的文字增大一级。<SMALL>.</SMALL>，使文字大小相对于前面的文字减小一级。<SUP>.</SUP>，使文字成为前一个字符的上标。<SUB>.</SUB>，使文字成为前一个字符的下标。<BLANK>.</BLANK>，使文字显示为闪烁效果。 文本修饰 预格式化文本使用预格式化标记<PRE>不再忽略在此之间的空格、制表符与回车符等元素 转义字符与特

11、殊字符一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格 文本强制换行和不换行文本强制换行 <BR>不换行<NOBR> 插入水平线使用<HR>标记属性：Width，Size，Align，Noshade，color 使用列表1、无序列表<UL Type="*"><LI ="*"> 列表条目1<LI>列表条目2.</UL>2、有序列表<OL Type="*" Start="n"> <LI Val

12、ue="n"> 列表条目1<LI>列表条目2.</OL>3、定义列表<DL><DT>列表条目1<DD>条目1的说明<DT>列表条目2<DD>条目2的说明</DL>2.3 插入图片 在网页中插入图片基本格式<IMG SRC="url"> 图片的属性2.4 建立超级链接 指向一个目标1、建立超级链接<A HREF="url">字符串</A>2、为图片建立超级链接<A HREF="URL&

13、quot;><IMG SRC=URL Border=0></A> 3、链接到邮件和多媒体文件链接到邮件<A HREF="mailto:nc">请与我联系</A> 使用锚点Ø使用锚点可以使用户在一个较长的文档中跳转，方便地找到要阅读的内容。Ø建立锚点：Ø<A Name="name">锚点文字</a>Ø使超级链接指向已定义的锚点。Ø<A HREF="url#name">文字</a>

14、6;<A HREF="#name">文字</a> 新窗口和基准链接1、打开新窗口<A HREF="url" Target="window-name">开一个新窗口</a>2、基准链接在<HEAD> 与 </HEAD> 之间设定<BASE HREF=" Target="_top"> 图像地图图像地图的格式为：<IMG SRC=img.gif Usemap="MAP-Name"><MAP

15、Name="MAP-Name"><AREA Shape="#" Coords="#" HREF="url">.</MAP> 图像地图【课后小结】本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。超级链接标志中，书签链接是一类特殊的链接方式，理解和使用书签链接学习HTML中超级链接标志的难点。第四讲 HTML表格、表单与框架标志【教学内容】讲解HTML中制作表格、表单与框架的标志。【教学目的】使学生掌握简单表格、表单与框架的制作。【教学重

16、点】* 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。* 理解框架属性name、target的意义。* 理解表单中相应元素对应标志及属性的含义。【教学方式】案例分析式、项目教学【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、HTML网页制作教程材义语编著 铁道出版社。【新课内容】2.5 插入表格 在网页中插入表格表格的基本构成元素：表头，单元格，列，行<TABLE>

17、<TR><TD>第一行第一列</TD><TD>第一行第二列</TD></TR><TR><TD>第二行第一列</TD><TD>第二行第二列</TD></TR></TABLE>嵌套的表格 表格的属性设置单元格属性设置2.6 表单的应用表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。 创建表单 用<INPUT>定义用户交互（1）单行文本输入区（2）密码输入区（3）单选框（4）复选框（5）隐藏区域（6）

18、按钮 定义下拉式菜单<P>你选修的课程：<SELECT Size="1" Name="D1"> <OPTION Value="jsj">计算机</OPTION> <OPTION Value="ey">英语</OPTION> <OPTION Value="ljx">逻辑学</OPTION> <OPTION Selected value="xlx">心理学</OPTI

19、ON></SELECT></P> 定义多行文字输入区域请输入你的详细介绍：<TEXTAREA Rows="2" Name="S1" Cols="20" >文字</TEXTAREA>2.7 框架窗口框架把窗口划分成几个子窗口，各个子窗口可以调入各自的HTML文档，最后形成充满整个窗口的网页。 框架的定义 框架属性设置<FRAMESETRows="pixels，*“FrameBborder="0“Border=0FrameSpacing="2“Bor

20、derColor="#008000“> 子窗口属性设置<FRAME Name="top" SRC="a.htm" MarginWidth="5" MarginHeight="5" Scrolling="auto" FrameBorder="0" Noresize FrameSpacing="6" BorderColor="#0000FF" Target="rtop"> 常见的框架窗口划分方

21、法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分 （3）目录和标题，分为左上、左下、右三部分（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分 不支持框架的网页<FRAMESET rows="80，*"> <NOFRAMES> <BODY> 很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏览器。 </BODY> </NOFRAMES> <FRAME Name="top" SRC="a.htm"> <

22、FRAME Name="bottom" SRC="b.htm"> </FRAMESET> 内部框架【课后小结】表格在网页设计中应用广泛，熟练掌握表格的基本标志及配合使用的属性的意义，是灵活运用表格的基础。表格的嵌套是表格制作中的一个难点，关键是要抽象出嵌套表格对应的简单表格模型，再将模型中单元格的位置使用内嵌表格代替。框架结构是布局网页的一种常用方式，要掌握框架及其嵌套的实现，以及在框架中设置超级链接时目标框架位置的设置。表单是网页实现交互处理的工具,熟练掌握表单中元素的标志和属性，是设计表单网页关键。第五讲 HTML标志综合运用案例【

23、教学内容】综合运用所学过的HTML标志书写网页。【教学目的】使学生能够书写简单的HTML网页。【教学重点】使用所学的HTML标志书写网页。【教学难点】HTML的综合运用。【教学方式】案例分析式、讨论式、练习式。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、HTML网页制作教程材义语编著 铁道出版社。【新课内容】1、用记事本书写HTML网页。2、利用案例进行HTML网页的综合讲解。3、要求学生按规定书写一个完整的HTNL网页。【课后小结】HTML是目前制作网页时必须掌握的一种语言，学好HTML语言是为以后对

24、网页设计这门课程更深入的学习打下扎实的基础。第六讲 Dreamweaver中简单WEB站点建立与管理【教学内容】讲解Dreamweaver的工作界面和基本操作。【教学目的】使学生掌握网页制作工具Dreamweaver的基本操作方式。【教学重点】网页制作工具Dreamweaver的界面和基本基本操作。【教学难点】掌握一个新的开发工具。【教学方式】讲授式、项目模块式、演示教学。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、Dreamweaver网页设计案例教程白煜编著 清华大学出版社。4、Dreamweave

25、r MX 2004完美网页设计与制作姜楠编著 中国青年出版社。【新课内容】3.1 Dreamweaver概述 Dreamweaver的工作界面 Dreamweaver4的基本操作1、直接建立新网页“文件”“新建”(Ctrl+N)2、打开已有的网页“文件”“打开”3、保存编辑过的网页“文件”“保存”，直接保存 “文件”“另存为”,换名保存4、预览正在编辑的网页“文件”“在预览器中预览”5、设置网页属性“修改”“页面设置”（1）标题（2）背景图像（3）背景色（4）文字颜色（5）超级链接颜色（6）左边界上边界（7）文件编码方式（8）网页蓝图6、导入Word文件“文件”“导入” “导入Word HTM

26、L” 用Dreamweaver创建和管理站点1、创建本地站点“站点”“新建站点”2、管理站点“站点”“定义站点”3、上传和下载文件【课后小结】Dreamweaver是一款由Macromedia公司开发的专业HTML编辑器，用于对WEB站点、WEB页面和WEB应用程序进行设计、编码和开发。无论是刚接触网页设计的初学者还是专业的WEB开发人员，Dreamweaver都在前卫的设计理念和强大的软件功能方面给予了充分可靠的支持。因此学好Dreamweaver对以后的网页设计有很大的帮助。第七讲 Dreamweaver中静态网页设计【教学内容】讲解利用Dreamweaver进行静态页面的制作。【教学目的

27、】使学生掌握利用Dreamweaver对页面进行文本、图象、超级链接、表格以及框架等的编辑。【教学重点】通过对工具软件Dreamweaver的操作，制作出完整的静态页面。【教学难点】了解静态网页的含义【教学方式】讲授式、项目模块式、演示教学。【教学参考】1、网页设计与制作杨尚森 曲宏山 贾文峰等著 电子工业出版社。2、WEB网站设计Joel Sklar著 高等教育出版社。3、Dreamweaver网页设计案例教程白煜编著 清华大学出版社。4、Dreamweaver MX 2004完美网页设计与制作姜楠编著 中国青年出版社。【新课内容】3.2 在页面中加入文字和图像 文字的添加和处理（1）文字属

28、性面板的使用 插入和优化图像（1）准备图像把网页中所用到的图像文件预先拷贝到站点文件夹中（2）插入图像（3）设置图像属性（4）创建图像地图3.3 超级链接的运用 插入超级链接（1）直接在属性面板的链接项填入链接的地址。（2）在属性面板单击浏览文件按钮打开浏览窗口来选择链接的网页。（3）利用指向文件图标创建链接。 超级链接的运用（1）链接其他网站在链接栏填写URL选择目标网页显示的窗口。 _blank、parent、_self、_top（2）链接其他文件输入网页文件名外使用属性面板上的指向文件图标，创建内部链接（3）链接E-mail直接在链接栏填写E-mail地址。利用对象面板插入E-mail（

29、4）锚点链接建立锚点:“隐藏” “插入命令锚点” 填入锚点的名称建立锚点链接:在链接栏中输入符号“#”和锚点名称。3.4. 表格的应用 表格的创建A.创建表格（1）使用菜单“插入”“表格”。（2）单击对象面板上的子菜单中插入表格按钮。（3）按CTRL+ALT+T组合键。B.选择表格元素（1）选取整个表格（2）选择行和列（3）选择单元格 表格属性的设置1、表格整体属性设置2、行列和单元格属性设置3.5. 在网页中创建表单A创建表单“插入”“表单”使用菜单“窗口”调出“对象”面板， “表单” “插入”B添加表单元素（1）添加文本域“插入”“表单对象”“文本域”设置TextField，字符宽度，最多字符，类型（2）添加选择域 在表单中插入单选按钮。“插入”“表单对象”“单选按钮” 在表单中插入复选按键。“插入”“表单对象”“复选钮”（3）添加列表和下拉式菜单（4）添加按钮（5）添加文件域【课后小结

人人文库> 全部分类> 专业文献 > 工程机械

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论