中职精品教材：网页制作教材(带目录).docx

《中职精品教材：网页制作教材(带目录).docx》由会员分享，可在线阅读，更多相关《中职精品教材：网页制作教材(带目录).docx（61页珍藏版）》请在优知文库上搜索。

1、网页制作选修课教材第一课：网页设计基础6一、网站的概述61、网页与网站62、浏览网页的工具-浏览器63、认识网页的组成元素6二、初识Dreamweaver61、制作网站的流程62、认识Dreamweaver6三、Dreamweaver的用户界面7四、网页文件的基本操作7五、设置网页外观属性8六、创建站点81、什么是站点82、创建站点8七、设置默认图像文件夹8八、管理站点81、在“文件”面板中实现以下操作82、站点管理8第二课：制作网页的基本操作9一、在网页中添加文本91、添加普通文本92、添加空格93、添加日期时间94、插入水平线95、添加特殊字符9二、编辑文本IO1、网页中输入的文本可以像W

2、ord文档一样，进行编辑。102、设置文本格式103、分段与换行IO4、设置段落格式IO5、使用Html段落样式10三、在网页中添加图片101、网页中常用的图片格式IO2、如何获取网页图像113、插入图像114、设置图像的基本属性Il四、图文混排Il五、编辑图像11六、鼠标经过更换图片特效111、概念：是指在页面中先显示一张图像，当鼠标移动到该图像上时，图像切换成另一张图像。Il2、步骤：Il第三课、创建超级链接13一、了解超链接13二、创建超链接131、到网站内页面的超链接一一内部链接（网站内部页面之间创建相互链接关系）132、到网站外页面的超链接一一外部链接133、链接样式134、到网页某

3、一特定位置的超链接一一锚点链接135、其他一些链接。13三、图像热区链接14四、创建图像导航条使用鼠标经过变换图像的特效，创建图像导航条14五、创建跳转菜单14六、脚本链接14七、超链接的管理141、链接路径142、自动更新链接143、检查链接15第四课、了解HTML超文本标记16一、什么是HTML?16二、HTML文件结构16三、常见HTML标记16四、小结16五、认识文件头信息17六、插入表格181、单击网页中需要插入表格的地方182、在菜单栏选择“插入记录”-“表格”命令，或者单击“常用”工具栏里的“表格”按钮I囱，或者运用组合键CTRL+ALT+T18七、设置表格大小18八、页眉与辅助

4、功能19九、表格的设置201、实例一足球明星相册202、实例二、制作课程表213、表格的html标记22十、表格嵌套221、概念：就是在表格的单元格中再插入表格，形成嵌套的结构。或者就是说在己有的表格中再创建表格。222、步骤23H一、应用表格布局页面241、类型：242、页面的构成27第六课框架29一、什么是框架？29二、框架的基本操作291、建立框架292、保存框架和框架集293、编辑框架页29三、实例：网页书291、框架的作用292、设置框架和框架集的属性303、设置框架中的链接30四、自定义框架集301、拆分302、框架的删除30五、网页中的网页Ifmme30第七课插入多媒体元素32一

5、、什么是多媒体元素？32二、有哪些多媒体元素321、FIaSh多媒体元素322、音频323、视频32三、插入FlaSh多媒体元素321、FIaSh动画322、插入FlaSh按钮323、插入FlaSh文本324、插入图像查看器（制作FlaSh相册）325、插入FlashPaper336、插入FlaSh视频（.flv）33四、插入音频341、现有有的声音文件：342、使用哪种格式？34第八课：APDIV元素36一、创建APDIV元素36二、编辑APDIV元素361、调整层的大小362、层的层次关系363、层的首选设置364、层的对齐36三、层的可见性设置361、AP面板的使用（选择、命名、隐藏、次

6、序）362、层的可见性363、简单的层特效37四、层的溢出与裁切371、溢出可见性372、裁切显示37五、层的嵌套371、AP层对象元素的嵌套方法：372、标尺、辅助线的使用37六、APDlV与表格的转换371、不重叠性372、网格的使用373、表格与APDlV的转换37第九课：行为38一、晃动的图片381、什么是行为？382、实例制作：晃动的图片383、对象是指接受事件的主体38二、弹窗实例381、行为面板的使用382、实例：弹出信息393、实例：弹出网页窗口39三、设置文本行为391、状态栏文字392、设置文本域文字（注意使用动作的对象必须要有个ID）39四、交换图片实例39五、拖动AP元

7、素39六、修改属性行为40七、动态菜单实例40九、特效脚本代码的使用40第十课CSS样式表的应用46一、CSS的概念46二、如何编辑CSS样式471、属性面板快捷操作472、使用CSS样式面板473、手工输入代码47三、CSS选择器47四、小试牛刀-用CSS美化页面48五、选择器的复合声明48六、CSS的嵌套与继承491、选择器的嵌套492、继承49七、应用CSS到网页中49八、综合实例491、新建名称为.titlelw的类样式，定义在样式表文件“css2.css”中，具体设置如下：492、新建名称为“.tb”的类样式，定义在样式表文件“css2.css”中，具体设置如下：在“背景”分类下设置

8、背景颜色为#EEDEDB。503、新建关于标签“body”的样式，定义在新的样式表文件“css2.css”中，具体设置如下：514、新建名称为”.copy”的类样式，定义在样式表文件“css2.css”中，具体设置如下：535、新建名称为“.imgOl”的类样式，定义在样式表文件“css2.css”中，具体设置如下：536、新建名称为“.lead”的类样式，定义在样式表文件“css2.css”中，具体设置如下：547、设置链接样式54九、重建CSS样式表文件css3.css,改变网页风格。55十、CSS使用技巧561、CSS禁用/启用572、CSS检查573、浏览器兼容性测试57第一课：网页设

9、计基础一、网站的概述1、网页与网站浏览网页时在浏览器中看到的一个个页面就是网页，而多个相关的网页的集合就构成了一个网站。举例：WWW（搜狐网）WWW（百度网）WWW.youku.CMm（优酷网）等等。2、浏览网页的工具-浏览器浏览器：用于打开显示网页的软件。最常见的是WindoWS系统自带的IE浏览器。还有火狐FirefoX、360安全浏览器、遨游、腾讯TT等等。1）网址：用于定位某个网站某个页面的一串字符，通常是这种格式httD:SDortS2）主页：访问网站时，默认打开的第一个页面就是主页也叫首页。3、认识网页的组成元素文本网页标题一LOGO视频超级链接表单二、初识Dreamweaver1

10、、制作网站的流程规划网站类型及主题搜集资料素材使用软件进行网页制作测试及发布2、认识Dreamweaver是当前最流行、最方便的网页设计和网站开发工具软件。Dreamweaver：梦想编辑者。通过这个工具，实现编辑网页的梦。Dream：梦想weaver：织布者，织工早期是MaCrOmedia公司推出的“网页三剑客之一。网页三剑客”指的是DreamWeaver、Flash.FireWOrkS这三个软件，它们这三个集合起来，就像江湖中最厉害的剑客一样，成为了网站开发中的专用利器。它集网页制作和管理网站于一身的所见即所得网页编辑器，它是第套针对专业网页设计师特别开发的可视化网页开发工具，前两年Mac

11、romedia公司被Adobe公司收购，DMCS5是最新推出的版本。【操作演示】启动Dreamweaver实例：制作一个简单页面（两种方法对照）三、Dreamweaver的用户界面提高：工空窗口的设置、保存、恢复【操作演示】关闭Dreamweaver四、网页文件的基本操作基本网页的文件类型为HTML文档，保存的文件扩展名为“.html”1 .创建网页文档（HTML文档）文件一新建一新建文档一常规一类别一基本页2 .保存指定文件（编辑中的文件如果文件名后面带有号，表示未保存） 文件-保存（或Ctrl+S） 文件一另存为 文件一保存全部注意：1、网页文件要用英文或数字进行命名，莫用中文。2、基本网

12、页的扩展名为.html3 .打开已建的HTML文档 文件一打开 右击文件，选择DreamWeaVer打开。 拖动到Dreamweaver4 .关闭文件文件一关闭还未保存的网页（*）,关闭时会提示你是否保存。其他操作：1）多个编辑文件的切换选择2）预览编辑中的网页（快捷键F12）五、设置网页外观属性网页标题、页面默认字体、默认字体大小、背景颜色、背景图片、边距。六、创建站点1、什么是站点Dreamweaver的站点是一种管理网站中所有相关联文件的工具。通过站点可以对网站的相关页面及各类素材进行统一管理，还可以以使用站点管理实现将文件上传到网页服务器，测试网站。简单的说就是一个文件夹。在这个文件夹

13、里包含了网站中所有用到的文件。我们通过这个文件夹（站点），对我们的网站进行管理，有次序，一目了然。2、创建站点我的足球网站点根目录为D：/Zjcwww七、设置默认图像文件夹八、管理站点1、在“文件面板中实现以下操作- 选择编辑网页文件- 创建文件或文件夹- 剪切、粘贴、复制、删除、重命名文件或文件夹2、站点管理- 编辑站点- 复制站点- 删除站点第二课：制作网页的基本操作一、在网页中添加文本1、添加普通文本方法：A、直接输入（1）用鼠标单击网页编辑窗口中的空白区域，窗口中随即出现闪动的光标，标识输入文字的起始位置。（2）选择适当的输入法输入文字B、复制和粘贴C、从其他文件导入2、添加空格输入法

14、切换到半角状态，按空格键只能输入一个空格。如果需要输入多个连续的空格可以通过以下几种方法来实现：（1）菜单“插入记录”-HTML，特殊字符-不换行空格（2）直接按uCtrl+Shift+Space组合键（3）设置软件首选参数.允许连续空格3、添加日期时间在文档的最后一行插入形式如“Friday,2006-07-149:47AM”所示的日期，且要求每次保存网页时自动更新日期。具体操作过程如下：（1）切换到“常用”插入工具栏。（2）按Enter键，添加一空行，将光标放置在空行与正文对齐的最左端。（3）单击菜单【插入】一【日期】，或者单击“常用”插入栏的【日期】按钮，将弹出“插入日期”对话框。（4）在“插入日期”对话框中，“星期格式”