网页设计与制作教案

网页设计与制作教案【教学内容】讲解网页设计的相关术语及网站制作的基本流程【教学目的】使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣【教学重点】网页设计中的若干术语【教学难点】理解网页设计中的若干术语【教学方式】讲授式、讨论式、案例分析式【教学参考】、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社

1、《网页工场》工作室重庆出版社2Internet Wittime、《网站设计》著高等教育出版社3WEB JoelSklar、《网页制作教程》材义语编著铁道出版社4HTML【新课内容】和

1.1WWW URL的起源

1.

1.1Web是的简称，一般也称之为或Web WorldWide WebWWW3W的特点和结构

1.

1.2Web最大的特点是使用了超文本（）Web Hypertext采用（客户机/服务器）工作模式WWW C/S在浏览器和服务器之间应用（超文HTTP HyperTextTransferProtocol,本传输协议）作为网络应用层通信协议、《网站设计》著高等教育出版社2WEB JoelSklar、《网页制作教程》材义语编著铁道出版社3HTML【新课内容】插入表格

2.5在网页中插入表格

2.

5.1表格的基本构成元素表头，单元格，列，行TABLETR第一行第一列TD/TD第一行第二列TD/TD/TRTR第二行第一列TD/TD第二行第二列TD/TD/TR/TABLE嵌套的表格

2.

5.2表格的属性设置253单元格属性设置254表单的应用

2.6表单在网页中用来给访问者填写信息，从而能获得用户信息，Web使网页具有交互的功能创建表单

2.

6.1用定义用户交互262INPUT单行文本输入区1密码输入区2单选框3复选框4隐藏区域5按钮6定义下拉式菜单

2.

6.3你选修的课程PSELECT Size=1Name=Dl「计算机OPTION Value=sj”/OPTION二“英语OPTION Valueey”/OPTION逻辑学OPTION Value+ljx”/OPTION二心理学OPTION Selectedvalue xlx”/OPTION/SELECT/P定义多行文字输入区域264请输入你的详细介绍二Rows=2Name=Sl Cols“20”文字/*****A框架窗口

2.7框架把窗口划分成几个子窗口，各个子窗口可以调入各自的HTML文档，最后形成充满整个窗口的网页框架的定义

2.

7.1框架属性设置272*****T二Rows pixels,*“FrameBborder=0Border=0FrameSpacing=2”BorderColor=”#008000子窗口属性设置273FRAME Name=top SRC=a.htm MarginWidth=5MarginHeight=5Scrolling=auto FrameBorder=0NoresizeFrameSpacing=6BorderColor=#OOOOFF Target=rtop常见的框架窗口划分方法标题和正文，分为上下两部分1层次结构，分为上中下三部分2目录和标题，分为左上、左下、右三部分3标题、目录和正文，分为上、左下、右下三部分4嵌套目录，分为左、右上、右下三部分5不支持框架的网页275rows=80,很抱歉，馈下使用的浏览器不支援框架功能，请转用新的浏BODY览器/BODYFRAME Name=top SRC=a.htmFRAME Name=bottom SRC=b.htm/*****T内部框架【课后小结】表格在网页设计中应用广泛，熟练掌握表格的基本标志及配合使用的属性的意义，是灵活运用表格的基础表格的嵌套是表格制作中的一个难点，关键是要抽象出嵌套表格对应的简单表格模型，再将模型中单元格的位置使用内嵌表格代替表单是网页实现交互处理的工具，熟练掌握表单中元素的标志和属性，是页关键第、课时标志综合运用案例910HTML【教学内容】综合运用所学过的标志书写网页HTML【教学目的】使学生能够书写简单的网页HTML【教学重点】使用所学的标志书写网页HTML【教学难点】的综合运用HTML【教学方式】案例分析式、讨论式、练习式【教学参考】、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社

1、《网站设计》著高等教育出版社2WEB JoelSklar、《网页制作教程》材义语编著铁道出版社3HTML【新课内容】、利用案例进行网页的综合讲解2HTML、要求学生按规定书写一个完整的网页3HTNL、立体化表格1立体表格一般是通过颜色对比达到立体效果的，可以使表格具有更加美丽的外观视觉下面通过制作一个具有立体效果的，使我们更加容易地掌握如何设置表格的属性，以及编辑表格的标签和查看表格的标签属性源码如下table border=l cellspacing=O width=100%bordercolorlight=******bordercolordark=#efefeftr bgcolor=#cccccctdit365cn/tdtdit365cn/tdtdit365cn/tdtdit365cn/td/trtr bgcolor=#cccccctdcnbruce/tdtdcnbruce/tdtdcnbruce/tdtdcnbruce/td/tr/table练习一请大家做出如下立体凸出表格思考请做出如下凹进表格

二、格式化表格P136执行“命令”一“格式化表格”，在“格式化表格”对话框中选择你要的方案

三、圆角表格P139

四、请完成以下网页作业完成后请以“电脑报”链接到作业本第三周【课后小结】是页时必须掌握的一种语言，学好语言是为以后对《网HTML HTML页设计》这门课程更深入的学习打下扎实的基础第、课时中简单站点建立与管理1112Dreamweaver WEB【教学内容】讲解的工作界面和基本操作Dreamweaver【教学目的】使学生掌握网页制作工具的基本操作方式Dreamweaver【教学重点】网页制作工具的界面和基本基本操作Dreamweaver【教学难点】掌握一个新的开发工具【教学方式】讲授式、项目模块式、演示教学【教学参考】、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社

1、《网站设计》著高等教育出版社2WEB JoelSklar、《网页设计案例教程》白煜编著清华大学出版社3Dreamweaver、完美网页设计与制作》姜楠编著中国青4Dreamweaver MX2004年出版社【新课内容】概述

3.1Dreamweaver的工作界面

3.

1.1Dreamweaver的基本操作

3.

1.2Dreamweaver

4、直接建立新网页1“文件一新建Ctri+N、打开已有的网页2“文件”一“打开”、保存编辑过的网页3“文件”一“保存”，直接保存“文件”一“另存为”，换名保存、预览正在编辑的网页4“文件”一“在预览器中预览”、设置网页属性5标题1背景图像2背景色3文字颜色4超级链接颜色5左边界上边界6文件编码方式7网页蓝图

8、导入文件6Word“文件，，—“导入，，—“导入Word HTML”用创建和管理站点

3.

1.3Dreamweaver、创建本地站点1“站点”一“新建站点”、管理站点2“站点”―“定义站点”、上传和下载文件3【课后小结】是一款由公司开发的专业编辑器，Dreamweaver MacromediaHTML用于对站点、页面和应用程序进行设计、编码和开发WEB WEBWEB无论是页设计的初学者还是专业的开发人员，都在WEB Dreamweaver前卫的设计理念和强大的软件功能方面给予了充分可靠的支持因此学好对以后的网页设计有很大的帮助Dreamweaver第、课时中静态网页设计1314Dreamweaver【教学内容】讲解利用进行静态页面的制作Dreamweaver【教学目的】【教学重点】通过对工具软件的操作，制作出完整的静态页面Dreamweaver【教学难点】了解静态网页的含义【教学方式】讲授式、项目模块式、演示教学【教学参考】、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社

1、《网站设计》著高等教育出版社2WEB JoelSklar、《网页设计案例教程》白煜编著清华大学出版社3Dreamweaver、完美网页设计与制作》姜楠编著中国青4Dreamweaver MX2004年出版社【新课内容】在页面中加入文字和图像

3.2文字的添加和处理

3.

2.1文字属性面板的使用1插入和优化图像322准备图像1把网页中所用到的图像文件预先拷贝到站点文件夹中插入图像2设置图像属性3创建图像地图4超级链接的运用

3.3插入超级链接

3.

3.1直接在属性面板的链接项填入链接的地址1在属性面板单击浏览文件按钮打开浏览窗口来选择链接的网页2利用指向文件图标创建链接3超级链接的运用332链接其他网站1在链接栏填写URL选择目标网页显示的窗口、、、_blank parent_self_top链接其他文件2输入网页文件名外使用属性面板上的指向文件图标，创建内部链接链接3E-mail直接在链接栏填写地址E-mail利用对象面板插入E-mail锚点链接4建立锚点“隐藏”一“插入命令锚点”一填入锚点的名称建立锚点链接:在链接栏中输入符号“#”和锚点名称表格的应用

3.4,表格的创建

3.

4.1创建表格A.使用菜单“插入”一“表格”1单击对象面板上的子菜单中插入表格按钮2按组合键3CTRL+ALT+T选择表格元素B.选取整个表格1选择行和列2选择单元格3表格属性的设置

342、表格整体属性设置

1、行列和单元格属性设置2在网页中创建表单

3.

5.创建表单A“插入”一“表单”使用菜单“窗口”调出“对象”面板，“表单一“插入添加表单元素B添加文本域1“插入”一“表单对象”一“文本域”设置字符宽度，最多字符，类型TextField,添加选择域2

①在表单中插入单选按钮“插入”一“表单对象”一“单选按钮”

②在表单中插入复选按键“插入”一“表单对象”T“复选钮”添加列表和下拉式菜单3添加按钮4添加文件域5【课后小结】了解静态网页的含义，利用的强大功能制作Dreamweaver MX2004出各色各样的页面，为以后的学习打下坚实的基础第、课时中动杰网页设计1516Dreamweaver【教学内容】讲解利用进行动态页面的制作Dreamweaver【教学目的】使学生掌握利用作出简单的动态页面Dreamweaver【教学重点】理解动态页面的含义以及数据库的使用【教学难点】了解动态网页的含义【教学方式】

1.

1.3URL的完整格式URL协议〃主机名或地址端口号/路径名/文件名IP的使用

1.2IE5浏览器是浏览资源的客户端软件Web Internet在环境下使用的浏览器主要有、Windows InternetExplorer Netscape、等Navigator Mosaic的界面

1.

2.1IE5的使用

1.

2.2IE5网页中所使用的技术

1.3语言和语言

1.

3.1HTML XML、语言1HTML只使用中很小一部分标记HTML SGML语言超文本标记语言HTML HyperText Markup Language是纯文本的语言，其源代码可以用各种文本编辑工具进行编HTML辑，常用的网页制作软件如、等实际上是自动FrontPage Dreamweaver生成源代码的工具HTML、语言2XMLXML extensibleMarkupLanguage动杰网页

1.

3.2多媒体技术的应用

1.

3.3服务器端程序

1.

3.4Web制作网页的基本方法

1.4制作网页的基本步骤

141、确定网页的内容

1、设计网页的组织结构

2、资料的收集与整理

3、选择网页的设计方法4制作网页时要注意的问题

142、网页的标题要简洁，明确

1、在文本中要使用水平线，以分割不同部分

2、对重点段落要强调显示

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

4、图形要附加文字说明，以便关闭图像时查看

5、网页中引用的资料及商标（或图标），不能侵犯版权6【课后小结】通过学习，认识网络、网站、网页及相关信息，理解网页制作的流程及了解相应开发工具，为设计网页做准备阐述网页制作的一般方法？第、课时的基本标志与格式标志34HTML【教学内容】讲解基本标志对和格式标志HTML【教学目的】使学生标志对与格式标志对的使用【教学重点】格式标志的使用【教学难点】列表标志的使用【教学方式】讨论式、案例分析式、练习式【教学参考】、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社

1、《网站设计》■著高等教育出版社2WEB JoelSklar、《网页制作教程》材义语编著铁道出版社3HTML【新课内容】文档的基本结构

2.1HTML语法

2.

1.1HTML、双标记1语法标记内容/标记、单标记2语法标记最常用的单标记是BR、标记属性3语法标记属性属性属性123…例子HR Size=3Align=left Width=75%、注释语句4格式!-注释文字--!--由这处开始是产品订购表格一文档的基本结构

2.

1.2HTML【课后小结】通过本次课的学习，要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用列表，有序列表，无序列表标志及属性第、课时的文本、图片与超级链接标志56HTML【教学内容】讲解标准中的文本、图片与超级链接标志HTML【教学目的】*使学生了解标题元素，掌握字体，上下标,及特殊字符的标志*使学生掌握图片标志，声音标志及相应的属性，学会利用标志在网页中插入声音与图片*使学生掌握超级链接标志的使用【教学重点】*字体、图片和超级链接标志的使用*网页中特殊符号的输入【教学难点】*理解特殊符号对应的标志*理解标志中属性的意义img*理解书签超级链接的意义【教学方式】讨论式、案例分析式、练习式【教学参考】、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社

1、《网站设计》著高等教育出版社2WEB JoelSklar、《网页制作教程》材义语编著铁道出版社3HTML【新课内容】插入文字

2.2划分段落

2.

2.1格式段落内容P align=*/P插入标题文字

2.

2.2格式标题属性,,标题内容H Alight=/H字号属性

2.

2.3设置基准字号**二数值***T Size网页内的其他文字，采用下面的格式来定义二数值FONT Size……/FONT的有效范围是（最大）到7（最小）如果在的值前面Size1Size带上“+”号或号，则表示相对于基础字体增大或减小若干字号颜色属性224两种方式BODY text=#RRGGBB字符串FONT Color+#RRGGBB”/FONT字体属性

2.

2.5宋体,隶书,FONT 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.7预格式化文本

2.

2.8使用预格式化标记PRE不再忽略在此之间的空格、制表符与回车符等元素转义字符与特殊字符228一般转义符都是以开始，以“；”结束，一个转义符之间不能有空格文本强制换行和不换行229文本强制换行BRNOBR插入水平线

2.

2.10使用标记HR属性Width,Size,Align,Noshade,color使用列表

2211、无序列表1ULType=列表条目LI=*1列表条目LI2/UL、有序列表2OL Type=*Start=n列表条目LI Value=n1列表条目LI2/0L、定义列表3DL列表条目DT1条目的说明DD1列表条目DT2条目的说明DD2/DL插入图片

2.3在网页中插入图片

2.

3.1基本格式IMG SRC=url图片的属性

2.

3.2建立超级链接

2.4指向一个目标

2.

4.

1、建立超级链接1字符串A HREF=url/A、为图片建立超级链接2二“A HREFURL”二IMG SRCURL Border=0/A、链接到邮件和多媒体文件3链接到邮件A HREF=mailto:nc@请与我联系/A使用锚点242使用锚点可以使用户在一个较长的文档中跳转，方便地找到要阅读的内容建立锚点锚点文字A Name=name/a使超级链接指向已定义的锚点二文字A HREF url#name”/a文字A HREF=#name”/a新窗口和基准链接

243、打开新窗口1A HREF=url开一个新窗口Target=window-name”/a、基准链接2在与之间设定HEAD/HEADBASE HREF=7Target=“_top”图像地图

2.

4.4图像地图的格式为IMG SRC=img.gifUsemap=MAP-Name,MAP Name=MAP-Name二“AREA Shape=#Coords=HREFurl”/MAP图像地图

2.

4.5【课后小结】本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志是页的基础超级链接标志中，书签链接是一类特殊的链接方式，理解和使用书签链接学习中超级链接标志的难点HTML第、课时表格、表单与框架标志78HTML【教学内容】讲解中制作表格、表单与框架的标志HTML【教学目的】使学生掌握简单表格、表单与框架的制作【教学重点】表格中单元格的合并以及表格嵌套和叠加操作*框架的嵌套使用*表单元素标志与属性*【教学难点】理解表格属性与的含义以及表格嵌套实现的基*rowspan colspan本思想*理解框架属性、的意义name target理解表单中相应元素对应标志及属性的含义*【教学方式】案例分析式、项目教学【教学参考】、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社*。