DW网页制作教程案例

“计算机网络技术”系列校本教材Dreamweaver进阶与实例施琛编著苏州技师学院信息工程系前言当前，计算机网络技术迅速发展，国民经济各部门对计算机网络技术的应用日益广泛，对计算机网络技术人员的需求越来越迫切。为了培养计算机网络技术人员的需要，不断提高教学质量，在苏州市劳动与社会保障局领导和苏州技师学院领导的支持下，苏州技师学院信息工程系的专业教师编写了此“计算机网络技术”系列校本教材。这次编写的计算机网络技术系列校本教材包括投影片制作POWERPOINT、VB程序设计、动画设计FLASH、常用工具软件、C语言程序设计、图形图像处理PHOTOSHOP、网站建设DREAMWEAVER、数据库操作ACCESS和局域网安装与维护技能。参与编写“学习领域”计算机网络技术系列校本教材的教师有夏国亭、林春生、刘志毅、刘俊燕、崔志华、施琛、罗清波、卜强和华康老师。计算机网络技术系列校本教材是本着改革创新的精神组织编写的，作为“学习领域”校本教材，适用于“行为引导型”教学法，符合循序渐进的要求，从打好基础入手，突出操作技能训练的特点，着力培养学生多种能力。作为系列化校本教材，各教材的“工作页结构”得到了“学习领域”王生专家的指点，在此表示衷心感谢。由于计算机网络技术发展迅速，知识更新快，而编者水平有限，书中不妥之处在所难免，恳请读者批评指正。编者2008年9月目录学习领域1：Dreamweaver基础...........................1学习单元1：工作区的选取.......................................................................1学习单元2：站点的建立...........................................................................5学习单元3：页面设置.............................................................................15学习单元4：网页的布局和规划.............................................................21学习单元5：站点上传.............................................................................27学习领域2：Dreamweaver进阶..........................31学习单元1：表格的设置.........................................................................31学习单元2：单元格的设置.....................................................................39学习单元3：网页的布局设置.................................................................43学习单元4：超级链接的实现.................................................................51学习单元5：库的应用.............................................................................59学习单元6：模板的应用.........................................................................65学习单元7：表单的应用.........................................................................73学习单元8：层的应用.............................................................................77学习单元9：CSS的应用.........................................................................83学习单元10：CSS自定义样式...............................................................93学习单元11：CSS的特殊设置...............................................................99学习领域3：Dreamweaver实例.........................107学习单元1：网页实例...........................................................................107学习单元2：网页上机实践...................................................................113学习单元3：网站实例（一）...............................................................115学习单元4：网站实例（二）...............................................................127学习单元5：网站制作上机实践...........................................................135学习单元6：网页综合实例...................................................................137学习单元7：网页综合实例上机实践...................................................145附：教学大纲........................................1471Dreamweaver基础工作区的选取学习目标:掌握Dreamweaver工作区的选择掌握Dreamweaver工作区的更改学习时间：2学时DreamweaverMX提供了两种可供选择的工作区布局：一种将全部元素置于一个窗口中的集成布局和一种非类似于Dreamweaver4的浮动布局。第一次运行DreamweaverMX需要选择一种工作区布局。选择DreamweaverMX工作区2两种布局的喜好因人而异，如果选择的是DreamweaverMX工作区，想改成Dreamweaver4工作区，可以使用“参数选择”对话框切换。选择更改工作区3使用DreamweaverMX工作区，默认的界面中，工作区很小，如果要把工作区变大，选择三角形按钮，就可以隐藏面板组和属性面板。如果要使用面板组，再点击三角形按钮。4内容延伸：DreamweaverMX简介MacromediaDreamweaverMX是一个可视化的网页设计和网站管理工具，支持最新的Web技术，包含HTML检查、HTML格式控制、HTML格式化选项、HomeSite/BBEdit捆绑、可视化网页设计、图像编辑、全局查找替换、全FTP功能、处理Flash和Shockwave等富媒体格式和动态HTML、基于团队的Web创作。在编辑上你可以选择可视化方式或者你喜欢的源码编辑方式。DreamweaverMX新增功能如下：加强的用户界面；多重用户配置；增强的源代码编辑功能；扩展的文档格式支持；加强的服务器模式扩展；改进的数据库链接操作；提升了与外部应用程序的协作功能。学生分组讨论，由代表上讲台展示讨论内容5Dreamweaver基础站点的建立学习目标:了解网页制作的流程掌握使用Dreamweaver建立站点掌握站点文件的创建学习时间：2学时DreamweaverMX中文版的出现，使制作一个功能强大的网站，变得很容易，可以轻易的做出以前被认为很复杂的ASP，PHP网站。通过建站实例，一步一步的带大家掌握网页制作技术。做网站制作中，首先要了解的就是制作流程了。新建站点→站点文件命名→定义页面属性→插入表格→定义页面大小→转换到布局视图→添加内容→插入导航条→转换到标准视图工作→添加链接→使用代码片断→定义及应用CSS→添加动态交互→链接站点各个页面。以上是一个静态网站建设流程和需要掌握的技术。在后面的几篇文章中，将通过建立一个网站实例，具体介绍这些内容。站点的建立建立一个网站，首先要在本地机器上做好网站，再传到网上的虚拟空间上。接下来主要介绍本地站点的建立，站点文件命名。简明步骤：在C盘新建一个文件夹→在Dreamweaver中定义站点→新建文件和文件夹→给文件和文件夹命名。目标是做一个个人网站。打开“我的电脑”，打开C盘，点鼠标右键，选择新建。6选择文件夹选项C盘下会出现一个新建文件夹图标输入你想要的站点名称，这里输入SGJ,其实可以任意输入名称的，要注意的是，尽量不要用中文命名，以免出现意想不到的麻烦。现在开始在DreamweaverMX中把SGJ这个文件夹定义为站点。打开Dreamweaver，在菜单栏上，点击站点菜单，选择新建站点。7接下来需要给站点起一个名字，可以起任意一个名字。这里起名为SGJ,按下一步按下一步按钮，选择是否使用服务器技术。因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”。8按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”。接着，选择要定义的本地根文件夹9这里选择SGJ文件夹点“选择”按钮，因为没有使用远程服务器，就选择“无”。按下一步10按完成按钮，一个站点就定义好了。新建网页文件和文件夹站点定义好之后，就要开始新建网页文件和文件夹了，在站点中点击右键，选择新建文件。11给新建的文件输入名称新建文件夹与新建文件类似，就不重复了。在文件命名和站点结构方面，养成良好的习惯很重要。注：网站首页默认的文件名，取决于你申请的主页空间，一般是index.htm,index.html,default.htm等。同类型的文件，最好放在一个文件夹中，例如把图片文件，都放在image文件夹中。不要把所有文件都放在根目录下，把一个栏目的所有文件放在一个文件夹中，在链接网页和维护时，会很方便。文件和文件夹的命名，可以用栏目名称的拼音，也可以用栏目名称的英文，团队开12发时，有统一的命名规则相当重要。例如jianli、bbs作文件夹名称。应该有人发现了，DreamweaverMX默认扩展名是.htm，修改DreamweaverMX的一个配置文件，就可以把默认扩展名从.htm改到.html。以windows2000操作系统，DreamweaverMX默认安装路径为例，找到文件名（MMDocumentTypes.xml）这个文件，此文件位于：C:\ProgramFiles\Macromedia\DreamweaverMX\Configuration\DocumentTypes文件夹下。双击MMDocumentTypes.xml，在DreamweaverMX中打开把第三行的html移动到htm,html,shtml,shtm,stm,lasso,xhtml这部分最前面的位置，就是改成html,htm,shtml,shtm,stm,lasso,xhtml。然后保存文件。重新打开DreamweaverMX，新建一个文件，默认扩展名变成.html了，其它扩展名修改方法类似。13内容延伸：为什么要创建站点？创建站点是第一步很重要，创建之后，