当前位置:文档之家› 网页设计与制作教案

网页设计与制作教案

《网页设计与制作教案》湄洲湾职业技术学院2008-2009学年第一学期教师:***系部:信息技术工程系专业:计算机应用电子信息班级:计机07(1)信息07(1)08(2)第一讲网页设计概述【教学内容】讲解网页设计的相关术语及网站制作的基本流程。

【教学目的】使学生对网站及网页有一定的认识,激发学生学习网页设计的兴趣。

【教学重点】网页设计中的若干术语。

【教学难点】理解网页设计中的若干术语。

【教学方式】讲授式、讨论式、案例分析式。

【教学参考】1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。

2、《Internet 网页工场》Wittime工作室重庆出版社。

3、《WEB网站设计》Joel Sklar著高等教育出版社。

4、《HTML网页制作教程》材义语编著铁道出版社。

【新课内容】1.1 WWW和URL1.1.1 Web的起源Web是World Wide Web的简称,一般也称之为WWW或3W1.1.2 Web的特点和结构Web最大的特点是使用了超文本(Hypertext)WWW采用C/S(客户机/服务器)工作模式在浏览器和服务器之间应用HTTP(Hyper Text Transfer Protocol,超文本传输协议)作为网络应用层通信协议1.1.3 URLURL的完整格式协议://主机名或IP地址:端口号/路径名/文件名1.2 IE5的使用Web浏览器是浏览Internet资源的客户端软件在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic 等1.2.1 IE5的界面1.2.2 IE5的使用1.3 网页中所使用的技术1.3.1 HTML语言和XML语言1、HTML语言ØHTML只使用SGML中很小一部分标记ØHTML语言(Hyper Text Markup Language 超文本标记语言)ØHTML是纯文本的语言,其源代码可以用各种文本编辑工具进行编辑,常用的网页制作软件如FrontPage、Dreamweaver等实际上是自动生成HTML源代码的工具2、XML语言XML(eXtensible Markup Language)1.3.2 动态网页1.3.3 多媒体技术的应用1.3.4 Web服务器端程序1.4 制作网页的基本方法1.4.1 制作网页的基本步骤1、确定网页的内容2、设计网页的组织结构3、资料的收集与整理4、选择网页的设计方法1.4.2 制作网页时要注意的问题1、网页的标题要简洁,明确。

2、在文本中要使用水平线,以分割不同部分。

3、对重点段落要强调显示。

4、网页中插入的图片要尽量的小。

5、图形要附加文字说明,以便关闭图像时查看。

6、网页中引用的资料及商标(或图标),不能侵犯版权。

【课后小结】通过学习,认识网络、网站、网页及相关信息,理解网页制作的流程及了解相应开发工具,为设计网页做准备。

第二讲HTML的基本标志与格式标志【教学内容】讲解HTML基本标志对和格式标志。

【教学目的】使学生标志对与格式标志对的使用。

【教学重点】格式标志的使用。

【教学难点】列表标志的使用。

【教学方式】讨论式、案例分析式、练习式。

【教学参考】1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。

2、《WEB网站设计》Joel Sklar著高等教育出版社。

3、《HTML网页制作教程》材义语编著铁道出版社。

【新课内容】2.1 HTML文档的基本结构2.1.1 HTML语法1、双标记语法:<标记>内容</标记>2、单标记语法:<标记>最常用的单标记是<BR>3、标记属性语法<标记属性1 属性2 属性3 … >例子<HR Size=3 Align=left Width="75%">4、注释语句格式<!-注释文字-->例子<!--由这处开始是产品订购表格--><!--本文版权为1998,Creation of Webpage 所拥有,未经允许,请勿抄摘-->2.1.2 HTML文档的基本结构【课后小结】通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用列表,有序列表,无序列表标志及属性。

第三讲HTML的文本、图片与超级链接标志【教学内容】讲解HTML标准中的文本、图片与超级链接标志【教学目的】* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。

* 使学生掌握图片标志,声音标志及相应的属性,学会利用标志在网页中插入声音与图片。

* 使学生掌握超级链接标志的使用。

【教学重点】* 字体、图片和超级链接标志的使用。

* 网页中特殊符号的输入。

【教学难点】* 理解特殊符号对应的标志。

* 理解img标志中属性的意义。

* 理解书签超级链接的意义。

【教学方式】讨论式、案例分析式、练习式。

【教学参考】1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。

2、《WEB网站设计》Joel Sklar著高等教育出版社。

3、《HTML网页制作教程》材义语编著铁道出版社。

【新课内容】2.2 插入文字2.2.1 划分段落格式<P align=*>段落内容</P>2.2.2 插入标题文字格式<H? Alight="标题属性">标题内容</H?>2.2.3 字号属性设置基准字号:<BASEFONT Size=数值>网页内的其他文字,采用下面的格式来定义<FONT Size=数值>......</FONT>Size的有效范围是1(最大)到7(最小)。

如果在Size的值前面带上“+”号或“-”号,则表示相对于基础字体增大或减小若干字号。

2.2.4 颜色属性两种方式<BODY text="#RRGGBB"><FONT Color="#RRGGBB">字符串</FONT>2.2.5 字体属性<FONT Face=“宋体,隶书,Time”></FONT>2.2.6 文本修饰<B>......</B>,文字以粗体显示。

<I>......</I>,文字显示为斜体。

<U>......</U>,显示下划线。

<STRIKE>......</ STRIKE>,中心线贯穿文字。

< EM>......</ EM>,强调文字,通常用斜体。

< STRONG>......</ STRONG >,特别强调的文字,通常用黑体。

<TT>......</TT>,以等宽体显示西文字符。

<BIG>......</BIG>,使文字大小相对于前面的文字增大一级。

<SMALL>......</SMALL>,使文字大小相对于前面的文字减小一级。

<SUP>......</SUP>,使文字成为前一个字符的上标。

<SUB>......</SUB>,使文字成为前一个字符的下标。

<BLANK>......</BLANK>,使文字显示为闪烁效果。

2.2.6 文本修饰2.2.7 预格式化文本使用预格式化标记<PRE>不再忽略在此之间的空格、制表符与回车符等元素2.2.8 转义字符与特殊字符一般转义符都是以“&”开始,以“;”结束,一个转义符之间不能有空格2.2.9 文本强制换行和不换行文本强制换行<BR>不换行<NOBR>2.2.10 插入水平线使用<HR>标记属性:Width,Size,Align,Noshade,color2.2.11 使用列表1、无序列表<UL Type="*"><LI ="*"> 列表条目1<LI>列表条目2......</UL>2、有序列表<OL Type="*" Start="n"><LI Value="n"> 列表条目1<LI>列表条目2......</OL>3、定义列表<DL><DT>列表条目1<DD>条目1的说明<DT>列表条目2<DD>条目2的说明……</DL>2.3 插入图片2.3.1 在网页中插入图片基本格式<IMG SRC="url">2.3.2 图片的属性2.4 建立超级链接2.4.1 指向一个目标1、建立超级链接<A HREF="url">字符串</A>2、为图片建立超级链接<A HREF="URL"><IMG SRC=URL Border=0></A>3、链接到邮件和多媒体文件链接到邮件<AHREF="mailto:**********.cn">请与我联系</A>2.4.2 使用锚点Ø使用锚点可以使用户在一个较长的文档中跳转,方便地找到要阅读的内容。

Ø建立锚点:Ø<A Name="name">锚点文字</a>Ø使超级链接指向已定义的锚点。

Ø<A HREF="url#name">文字</a>Ø<A HREF="#name">文字</a>2.4.3 新窗口和基准链接1、打开新窗口<A HREF="url"Target="window-name">开一个新窗口</a>2、基准链接在<HEAD> 与</HEAD> 之间设定<BASE HREF="/" Target="_top">2.4.4 图像地图图像地图的格式为:<IMG SRC=img.gifUsemap="MAP-Name"><MAP Name="MAP-Name"><AREA Shape="#" Coords="#" HREF="url">......</MAP>2.4.4 图像地图【课后小结】本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性,熟练运用这些标志是制作多媒体网页的基础。

相关主题