HTML+CSS网设计与布局教案-豆柴文库

您所在位置：网站首页 / HTML+CSS网设计与布局教案.doc / 文档详情

免费试读已结束，剩余 20 页请下载文档后查看

14 金币

下载文档

/ 25

下载提示

如果您无法下载资料，请参考说明：

1、部分资料下载需要金币，请确保您的账户上有足够的金币

2、已购买过的文档，再次下载不重复扣费

3、资料包下载后请先用软件解压，在使用对应软件打开

文本预览

《HTML+CSS网页设计与布局》课程教案授课教师：授课班级：地点：周课时：5课时章节内容网页设计基础知识Dreamweaver软件介绍及其基础操作HTML基础知识及常用标记教学目的使学生了解网页设计的相关基础知识；使学生熟悉Dreamweaver软件界面的基本操作方法。重点难点了解网页设计相关概念和网页的类型；纯熟掌握Dreamweaver软件创建和管理站点的方法。教学方法课堂讲授、案例讲解与指导教学环境计算机机房教学过程及内容提纲时间分派备注教学过程设计引入互相结识，提出与本学科相关的知识，介绍本门课程情况、教学内容及总学时数进度安排，宣讲本课程教学纪律，鼓励学生营造一种学习氛围，尊重同学，互帮互学，真正达成学以致用；提出问题：上过网吧？有谁自学过网页设计？听说过HTML或者CSS这两个概念吗？告知学生课堂任务本次课所学习的重要内容是HTML相关基础知识和Dreamweaver软件基础操作；逐步演示讲解分析教学内容网站和网页的区别：（1）网页是Internet基本元素；（2）网站由网页组成；静态网页和动态网页：静态网页：纯粹HTML语言格式的网页通常被称为静态网页，静态网页的后缀名通常为.htm、.html、.shtml、.xml。动态网页：许多人认为网页会动就是动态网页，这是个错误的观点，在静态的网页中也可以具有动态的图片，这仅仅是视觉上的动态罢了。真正的动态网页是指事实上并不是独立存在于服务器上的网页文献，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文献是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。静态网页的特点：（1）内容相对稳定，容易被搜索引擎检索到；（2）没有数据库支持，在网站制作和维护方面工作量大；（3）交互性差，在功能方面有很大的限制。动态网页的特点：（1）以数据库技术为基础，可大大减少网站维护的工作量；（2）可实现更多的功能，如用户注册、新闻发布、在线留言等；（3）不利于使用搜索引擎进行网站推广。常见网页类型：形象页、主页、栏目页、内页、新闻具体页等；网页设计原则：（1）了解客户需求（2）遵循Web标准（3）运用形式美法则网页设计流程：（1）手绘效果图：拟定网页主题内容和风格（2）设计效果图：搜集、整合设计所需素材（3）版面编辑：网页的制作与实现（4）网页美化：动画设计，网页测试和发布网页设计的重要软件：（1）Photoshop（2）Dweamveawer（3）Flash（4）FirworksHTML基础知识：（1）HTML概念：HyperTextMarkupLanguage超文本标记语言；（2）HTML文档的编写方法：用记事本手工直接编写、使用可视化HTML编辑器Dreamweaver、由Web服务器动态生成；（3）网页文献命名：首页文献名默认为：index.htm或index.html；（4）HTML文献结构：<HTML><HEAD><title></title></HEAD><BODY>HTML文献的正文</BODY></HTML>（5）用编辑器手工编写第一张网页；学生实训及辅导；Dreamweaver软件界面介绍：（1）软件面板组成及基本操作方法（2）软件首选参数设立Dreamweaver站点创建：站点->新建站点->设立站点名称->设立站点默认图像文献夹。学生实训操作：Dreamweaver站点创建与设立；Dreamweaver创建第一个网页：（1)名称：index.html（2)设立标题、输入文本、输入特殊字符（3）页面属性设立（4）预览网页学生实训及辅导；HTML常用标记：（1）标题标记：<h#>主题文字</h#>（2）段落标记：<p>这里表达段落</p>（3）换行与注释：<br>、<!--这里放注释-->（4）粗体与斜体：<b>粗体</b>、<i>斜体</i>（5）删除线与下划线：<s>删除线</s>、<u>下划线</u>（6）上标与下标：<sup>上标</sup><sub>下标</sub>学生实训及辅导；字体标记：（1）字体大小：<fontsize="1">字体大小</font>（2）字体颜色：<fontcolor="">字体颜色</font>（3）设立标题字体：<h#>主题文字</h#>（4）物理字体：<B>…</B>，将字符设立成粗体。<I>…</I>，将字符设立成斜体。<U>…</U>，给字符增长下划线。<S>…</S>，给字符增长删除线。<TT>…</TT>，将字符设立成打字机字体。<SUP>…</SUP>，将字符设立成上标字体。<SUB>…</SUB>，将字符设立成下标字体。（5）逻辑字体：<EM>…</EM>强调文字。<STRONG>…</STRONG>字体加重。<CODE>…</CODE>显示编程代码。<SAMP>…