关于网页制作教程

1第一章网页设计基础教学目的：本章将带领用户认识DreamweaverMX，了解其新增功能。在开始学习该软件之前，了解一下DreamweaverMX的工作界面的一些简单设置。通过本章的学习，用户能熟悉DreamweaverMX的工作界面，并能自行设置具有独特的个性化的工作环境。理解DW站点的作用，并掌握建立站点的方法及站点维护的方法。教学重点：1、认识DreamweaverMX。2、新增功能。3、DreamweaverMX主窗口。4、自定义工作环境。5、利用Dreamweaver建立站点的方法教学难点：1、认识DreamweaverMX。2、新增功能。3、自定义工作环境。教学方法：讲演法教学课时：2课时2教学内容与教学过程：一、介绍网页制作这门课程1．学习这门课程的目的：让学生掌握HTML语言、以及利用相关网页制作工具制作网页的基本方法与技能。学生通过这门课程的学习，能够具备综合运用专业软件进行小型网站开发和静态网页页面设计的能力，同时积累一定的实践经验，为今后从事相应的网站设计制作工作打下良好基础。2．这门课程的教学内容：在制作软件上：以网页制作软件DreamWeaverMX为主干进行网页制作教学，同时选择了FlashMX版本来制作网页中的动画素材，选择了图形图像工具Photoshop7.0版本软件来处理和制作网页中的图片。教学内容安排上按照学生学习网页的渐进规律划以及学校制订的计划主要学习第1、2、3、5、6、9章，主要包括网页制作的基础知识、DreamweaverMX软件的使用，初学者利用现有的素材设计制作出一个简单的网页；利用Photoshop7和FlashMX软件来美化网页，以及网页布局和用色方面的美术知识，如何设计网页的版面和结构，还要能对供给的素材按照网站的特点进行适当的美化处理；还能掌握中小型网站的建立方法。3．这门课程的教学和学习方法：教学上以一个个案例为基础，采用项目教学的方法，由浅入深的介绍网页制作的各个知识点；教学中以学生会操作为目的，重视学生动手能力和自学能力的培养同学们学习时除了要掌握相应的操作技能以外，更要重视操作技能的使用，要努力完成每章教学案例的制作以及课后素材案例。在不断的练习过程中熟悉和升华所学的操作技能。同时，要学会学习，即要学会与老师或同学之间技术心得的交流，要学会能自主的依靠其他资源（网络、报纸杂志等）来扩展所学的知识体系。课前思考：1、Dreamweaver软件是干什么用的？2、试用一下Dreamweaver，你觉得这个软件在界面上更象Word还是Photoshop，为什么？3、试用一下Dreamweaver，按默认格式保存，文件的扩展名是什么？4、双击网页文件，会自动打开Dreamweaver软件吗？这点上与Word软件相同吗？1.1Dreamweaver的基本概念1、了解Dreamweaver与IE有什么区别？Dreamweaver是制作网页的工具，用它可以生成.htm或.html文件，而IE是浏览网页的工具，用IE只能看网页，而不能改网页，修改网页还是需要网页制作工具。2、做网页只能使用Dreamweaver一种工具吗？常用的网页制作软件有Dreamweaver和FrontPage。Dreamweaver由美国Macromedia公司开发，虽然初学者感到比较难学，但它的功能更强大，生成的网页代码质量好，是当今最流行的网页制作工具，适合专业网页设计人员使用，近年来它还获得过不少大奖呢。Frontpage是微软公司开发的Office办公软件中的一部分，比较容易上手，但功能不太强大，我们只在需要时（如向网页中加入微软格式的视频），才会使用FrontPage。3、Dreamweaver最新版是多少？Dreamweaver从2.0、3.0、4.0、MX到现在最新的MX2004版，平均每过一年就出一个新版。可见计算机是多么的富有活力。今年常用的是MX版，建议大家在家里的电脑上也将这个版本，以便与学校的相同。对于软件，我并不认为版本越新越好，它们的基本功能还是相同的，一般版本越高，对计算机的要求也越高，如果计算机配置不高，初学时还是找个低版本比较好，当然所装的软件必须与书本上的相同，这也是学习其它软件的基本要求。4、Dreamweaver与Firework、Flash有何关系？它们都是Macromedia公司的软件，Dreamweaver是网页制作工具，Firework是图形处理工具，与photoshop相似，一般用于网页图形的制作，Flash是动画制作工具，在制作好的网页时，一般先用Firework和Flash先制作好网页中要用到的图形和动画素材，再用Dreamweaver把这些素材做成一张网页，只会Dreamweaver，不会图形处理和动画制作，是做不出好的网页的。有人把这三个软件称作网页设计“三剑客”。1.2认识DreamWeaver1.DreamWeaver的作用和特色2.DreamWeaver功能界面的分解3.DreamWeaver工作流程4.DreamWeaver的版本、安装、打开、保存等操作演示：练习制作第一张网页——作业一在主窗口中输入以下文字，并按以下格式排版，最后把文件以“学号姓名.htm”为名保存在桌面上。注意难点：设置字体、水平线、二个全角空格、回车会自动空一行，Shift+回车就不会空行了。31.3创建本地站点引入：为什么要建站点？在正式开始制作网页之前，最好先定义一个新网站，这是因为：更好地利用站点窗口对站点文件进行管理。尽可能的减少一些错误的出现，如路径出错，链接出错（特别是新手），当熟练掌握了DREAMWEAVER的使用后，并且只需制作单个网页时候可以省去这一步；还值得说的是，新手做网页，就只知道做网页，不懂得条理性、结构性，一个文件放这里，另一个文件放那里，或者所有文件都放在同一文件夹内，这样显得很乱。所以，行家的做法是：（1先建立一个文件夹用于存放网站的所有文件，再在文件内建立几个文件夹，将文件分类，如图片文件放在image文件夹内，HTML文件放在HTML文件夹内（2）当然，如果站点比较大，文件比较多，可以先按栏目分类，在栏目里再分类。（3）还有文件的命名也是非常重要的，新手通常不注意这些，随便乱起些名字，这样过些时候自己也搞不懂是什么了（特别是文件比较多的时候），我们要做到一看文件的名字就知道是什么内容的文件。（4）行家的做法是：用英文或者拼音给文件命名（推荐英文），不要使用中文的名字（因为有的机器对中文支持不太好，有可能出现链接的错误，你自己以为正确的东西在别人看来有可能是错的）。1、什么是站点？站点是存放一组网页的一个存储地方，一般是一个磁盘目录，在该目录中存放该网站的所有网页及有关的图片、FLASH动画、CSS样式文件等。建立站点时，我们一般在自已的电脑上建一个文件夹，然后把制作的所有网页及图片放在此文件夹中，最后把这个目录上传到WEB服务器上，以供英特网上的所有用户浏览。问：网页＝？网站答：不等问：网页＝？主页答：不等主页通常主页命名为index.htm,index.html,default.htm,default.html2、站点的典型文件结构站点的典型文件结构3、如何建立一个空站点准备工作——建文件夹在硬盘上某一个位置建一个总的文件夹Mywebpicmusicflashmovie……例：在D盘上建立自己帐号为名的文件夹，把这个文件夹定义为站点，站点名的“我的个人网站”操作步骤：第一步：在D盘上建立文件夹第二步：在DW软件中，选择菜单“站点-新建站点”，可以按向导一步一步操作，但我建议大家直接选“高级”卡片第三步：在“本地信息”中，填入“站点名称”，把“本地根文件夹”指定为该目录4、如何把一个已有目录定义为一个站点例：首先单击下载网站，把网站包下载到D盘，并解压缩，在D盘上会自动生成一个文件夹，按上面所讲的步骤，把该目录定义为一个站点，站点名为“祖国腾飞”5、使用站点管理器定义完站点后，就可以使用站点管理器来管理站点了。显示站点面板：单击菜单“窗口-站点”。我们可以在站点管理器中通过右击“新建文件夹”、“新建文件”、“文件重命名”、“删除文件”，也可以通过拖动，把文件移动到其它文件夹。4第二章网页的基本操作教学目的：使学生了解编辑HTML文档的各种具体操作，包括如何为页面添加文字，图片。教学重点：1、编辑文本的各种方法2、在网页中插入图片的方法教学难点：1、编辑文本的各种方法2、在网页中插入图片的方法教学方法：讲演法教学课时：4课时5教学过程：2.1文本操作及修饰一、特殊字符的输入1、输入©®‰等特殊英文字符单击“插入”工具栏上的“字符”面板。2、输入★○■△※↑①等中文符号采用输入法中的软键盘3、输入空格（推荐使用全角空格）①单击“插入”菜单-“特殊符号”-“不换行空格”②按“Ctrl+Shift+Space”组合键③单击“插入”工具栏上的“字符”面板上的“不换行空格”按钮。④把中文输入法切换到全角模式，输入全角空格4、插入日期和时间。单击“插入”工具栏上的“常用”面板上的“日期”按钮。练习一：输入以下内容，以“1.htm”保存在桌面上。特殊符号：©®‰™±中文符号：……℃◇△※◆▲现在时间：2006-02-22二、列表的制作列表分为无序列表（项目列表）和有序列表（编号列表）；各个列表项之间没有顺序级别之分时选无序列表，否则选有序列表。制作方法：第一步：先输入各个项目，每个项目成为一段（一个项目输入完成后，要按回车键，不能使用SHIFT＋回车）第二步：选中要转换为项目列表的所有段落第三步：单击属性面板上的项目列表或编号列表按钮第四步：如果要实现多级(嵌套)的项目列表，可单击“属性”面板上的“缩进”命令练习二：电脑专业o网络技术1.网络1班2.网络2班o信息技术1.信息1班2.信息2班o电脑维护美术专业工艺绘画广告设计操作提示：第一步：输入“电脑专业”等11行，每行按回车，不能用SHIFT+回车第二步：全部选中，单击“属性”面板中的无序列表按钮第三步：选中“网络技术……电脑维护”7个段落，选“属性”面板中的缩进按钮第四步：同样方法让“网络1班”等班级缩进第五步：选中“网络1班、网络2班”，单击“属性”面板中的有序列表按钮，使其变为有序列表6有时设置好项目符号后，再打进去的字也变成项目符号了，解决这个问题的方法是，在设置项目符号前，先把后面的字输入几字，再去设置项目符号。选做练习：飘雨的季节困惑的心情羞涩的蓓蕾年轻的你我蓝色的小屋i.飘雨的季节ii.困惑的心情iii.羞涩的蓓蕾iv.年轻的你我v.蓝色的小屋a.飘雨的季节b.困惑的心情c.羞涩的蓓蕾d.年轻的你我e.蓝色的小屋5.飘雨的季节6.困惑的心情7.羞涩的蓓蕾8.年轻的你我9.蓝色的小屋三、样式的使用(一)样式的作用：避免重复操作，提高操作效率；统一网页的风格(二)HTML样式HTML样式与Word中的格式刷功能相似。如果网页中多个地方需要设置“红色、黑体、5字号”等三个属性，如果一个一个去设置效率不高，我们可以先定义一个“HTML样式”为包含“红色、黑体、5字号”等三个属性，以后到需要设置这三个属性的地方应用一下这个HTML样式即可，所以使用“HTML样式”可以提高工作效率。1、建立HTML样式第一步：在窗口菜单中打开“HTML样式”面板（属于设计面板组）第二步：单击面板下方的“新建样式”按钮（1）输入名称（2）指定应用范围（3）指定应用时的效果（4）设置属性2、应用HTML样式选中文字，单击“HTML样式”面板中定义的样式即可3、清除HTML样式选中先设置HTML样式的文字，单击面板上的“清除所选样式”或“清除段落样式”4、修改HTML样式7双击相应的样式名5、删除HTML样式选择要删除的样式，单击“HTML样式”面板中的删除按钮练习三：。定义一个HTML样式，名称为“red-hei-5”，属性为“红色、黑体、5字号”，任意输入一段文字，把这个HTML样式，多次应用到网页中。(三)CSS样式（层叠样式表）◆CSS是干什么用的？你还记得