网页制作教案.ppt

FrontPage,阳光职业技术学校2008,第一课,简介,FrontPage是常用的制作网页和网站的工具软件，它集显示、编辑网页HTML源代码，插入文本、图片、声音、动画、表单、超链结和使用数据库和脚本语言，管理和发布站点的工具为一体，可以在同一界面中完成设计、制作、发布、管理站点的工作。,FrontPage2003的操作界面,一、启动FrontPage20031、在windows中，使用开始菜单“程序”-“MicrosoftFrontPage2003”.,2、菜单项:3、工具栏:,4、观察主编辑区，注意编辑区的左下方有四个选项卡，可以用于选择网页的显示方式。,第二课,网站规划,一、网站的风格你自己喜欢的类型，没有固定。二、网站的结构三、网站的配色1、个人喜好，随意渲染，但是不能违反常理！2、网站色彩搭配：a、色彩的含义色彩本身是无任何含义的，但是可以在不知不觉间影响人的心理，左右人的情绪。,b、各种颜色的代表意思：红色：热情、活泼、热闹、温暖、幸福、吉祥橙色：光明、华丽、兴奋、甜蜜、快乐黄色：明朗、愉快、高贵、希望绿色：新鲜、平静、和平、柔和、安逸、青春蓝色：深远、永恒、沉静、理智、诚实、寒冷紫色：优雅、高贵、魅力、自傲白色：纯洁、纯真、朴素、神圣、明快灰色：忧郁、消极、谦虚、平凡、沉默、中庸、寂寞黑色：崇高、坚实、严肃、刚健、粗莽,网页草图,个人主页（例如：）,练习：1、熟悉操作界面2、观察其他各种网页的风格，结构，颜色。,第三课,一、制作网页的基本流程主题（什么类型）-风格-规划（具体的栏目，提纲）-配色-素材(围绕主题收集)-版面-编辑-测试-上传（申请空间域名，传到服务器上）二、网页包含的元素：文字，表格，图画，视频，音频等。三、做网页要首先从整体入手，然后细化各个部分。四、创建站点：文件-新建-新建网站-网站模板-浏览-确定五、关闭网站：文件-关闭/关闭网站六、打开网站：文件-打开网站-选择文件夹,七、页面操作：1、设置页边距：鼠标点击空白处右键-页面属性-高级-边距-为“0”。2、插入图片：插入-图片-来自文件3、表格：表格-插入表格4、背景：鼠标点击页面空白处右键，网页属性，格式，背景图片。5、超链接：选中目标-右键-超链接,作业：新建网页站点文件夹自己制作一个简单的页面保存。,第四课,行为,一、行为：是事件和由该事件触发的动作的组合。由于行为代码是客户端的javascript代码,二、调出行为菜单栏上格式，选择行为。在操作页面右边显示。三、行为效果a、播放声音选中目标，点击右边行为插入，选择播放声音，选择音频（wav格式）确定b、弹出式消息窗口选中目标，点击右边行为插入，选择弹出消息，在弹出窗口里编辑消息，确定。C、交换图像与交换图像恢复选中目标，点击右边行为插入，选择交换图像，“交换图像URL”里插入变换图片。确定。然后再次点击插入交换图像恢复，确定。,四、滚动字的制作1、点击菜单“插入Web组件”。2、在弹出的对话框中选择组件类型为“动态效果”，效果为“字幕”。完成。选择“速度”，“方向”,”表现方式”.五、交互式按钮插入，交互式按钮。选择，确定。六、网页过度效果格式，网页过渡。选择事件，过渡效果。确定。七、热点工具，自定义，图片前勾上。,八、如何浮动背景图象当你拉住下拉条把屏幕向下滚动时，背景图象也跟着一起移动，这样就会导致浏览速度降慢。插入“bodybackgroud=image.jpgbgproperties=fixed九、克隆网页1.在浏览器中浏览自己喜欢的精美网页，然后在“文件”菜单中选择“另存为”，指定保存位置和名称后就可以在硬盘上得到一个html文件和同名的文件夹，文件夹中保留着网页中的图片等信息。2.启动FrontPage2003，打开这个Html文档，就可以重新编辑这个网页了。十、自定义浏览器分辨率预览检查?在设计网页时，可实时调节当前页面为在客户端显示的分辨率，以便预览当前效果。大家查看FrontPage2003界面右下端状态上显示网页大小的区域，默认为792533，右键单击后，弹出菜单，在此可设置任意分辨率方便进行预览。,十一.描摹图像大家在学习书法的时候，都接触过临摹吧，描摹图像的功用与其类似，就是通过创建一个图像（一般为网页的效果图）为参照物，以便于网页的设计制作。在Dreamweaver软件的各个版本中基本上都有这个功能。点击菜单栏上的“视图描摹图像设置”，在弹出对话框中，选择指定图像，再设置其坐标（即在设计页面上显示的位置）。最后，设置透明度，再确认即可。这个描摹图像只是显示在FrontPage2003的设计视图中，不会在你制作完毕的页面中显示出来。,十二.优化HTML代码FrontPage系列过去在代码效率方面做得相当不好，经常产生大量的垃圾代码。而在FrontPage2003中，点击菜单栏上的“工具优化HTML”，在其中可酌情选择删除对象，包括注释性内容及空白信息等，从而删除大量垃圾代码，提高网页代码执行的效率，为网页“减肥”。十三.规划页面布局点击菜单栏上的“表格布局表格和单元格”，在程序右侧窗格中将显示相应的属性设置。我们着重查看“表格布局”下拉列表，在其中有若干布局样式可供选择。当我们选择一种合适的应用于当前页面上后，可随时在设计视图中按需自行调节其布局样式。,几种特殊的网页编辑操作,一、插入换行符：Shift+回车键。在FrontPage中，直接按回车键的作用是插入一个段落分隔符，而段落分隔符使段落之间有较大的行间距。用“Shift+回车键”插入换行符时不会加大行间距。二、插入水平分隔线：选插入菜单水平线。水平线的作用主要是对网页内容分组。插入水平线后，可右击水平线选择水平线属性以修改水平线的颜色与高度等属性。,三、插入Flash动画：选择插入菜单图片Flash动画选择一个.swf文件。在浏览器中，只要打开网页，Flash动画就会自动播放，不管动画是否显示在视窗中。注：如果在浏览网页时看不到Flash动画，则可能在地址栏的下方显示了如下提示信息：为帮助保护您的安全，InternetExplorer已阻止该站点在您的计算机上安装ActiveX控件。单击此处查看选项此时应单击该信息栏并选择允许阻止的内容，然后回答是，以确定要在网页中运行活动内容。如果不想每次这么做而要使浏览器自动运行Flash动画，则应选择浏览器的工具菜单Internet选项选择高级选项卡中的安全组勾选允许活动内容在我的计算机上的文件中运行。,四、插入gif动画：选择插入菜单图片来自文件选择一个.gif文件。插入的gif动画在编辑窗口中预览网页时即可看到动画效果。在浏览器中，按键可以终止视频与gif动画的播放，刷新网页时可以继续播放动画。按键不能终止Flash动画的播放。（音乐也是一样）五、插入电子表格选择插入菜单Web组件在“电子表格和图表”框中选择“电子表格”，完成。六、插入网站访问计数器：选择插入菜单Web组件在组件类型框中选择计数器，在右边的列表框中选择一种计数器的样式。,七、插入图库的方法如下：选择插入菜单Web组件在组件类型框中选择图片库，在右边的列表框中选择一种图库的显示模式（选择幻灯片版式较好）完成在图片库属性对话框中选择图片选项卡添加选择图片来自文件浏览选择多个图片文件打开确定。,素材网站：1.网页模板最好模板2.素材网,一、网页设计常用辅助软件1.音乐格式转换器将音乐转换成自己所想要的格式！2.网页代码生成器网页特效精灵,Dreamweaver8教案,第一课HTML基本语法,一、HTML基本语法1.HTML标记HTML文件所需的最基本的标记，书写为和。2.HEAD标记文件头标记，以开始，以结束。3.TITLE标记标题标记，用于指定网页的标题。它只能出现在HEAD标记之间，其格式为网页标题。4.BODY标记用于标识网页主体，其中包含一个网页中除标题外的所有对象，格式为：文件主体。5.转行标记BR标记，作用是强迫文本转行，而且不产生空行。该标记没有终止标记。,6.段落标记P标记，用于分开正文，使其独立成段，便于浏览器识别。以开始，以结束。7.超级链接标记格式为：字符串8.文本属性标记主要有大小、颜色和字体三种属性。以开始，结束。,二、认识Dreamweaver8的工作区：选择工作区Dreamweaver8的工作区布局包括设计器和编码器两种，在【工作区设置】对话框中单击相应的单选按钮即可选择该工作区。,2.设计器工作区布局标题栏,菜单栏,工具栏,文档窗口,状态栏,属性检查器用于查看和更改当前选定文本或其他对象的属性。控制面板主要包括【CSS】、【应用程序】、【标签检查器】、【文件】、【框架】、【历史记录】、【结果】、【时间轴】8个面板组。,三、网页的创建：1.应用空白文档创建页面从起始页面创建,单击【创建新项目】栏中的【HTML】链接。2.使用命令创建:选择【文件】|【新建】命令，弹出【新建文档】对话框，在【常规】选项卡中选择网页类别，在右侧的列表框中选择具体的页面类型，然后单击【创建】按钮。,四、网页的命名原则：1.文件名中只能包含小写的英文字母、数字和下划线。2.文件名不能以数字开头。3.不能在文件名中使用空格、标点符号或特殊字符。4.主页的文件名称通常设定为“index”。5.用尽量少的字符概括文件主旨，不要过于冗长。五、网页的打开与保存六、【页面属性】对话框,第二课,一、文本对象的添加：1.导入Word文档选择【文件】|【导入】|【Word文档】命令，弹出【导入Word文档】对话框，选择要导入的Word文档，单击【打开】按钮。2.插入特殊字符【特殊字符】命令选择【插入】|【HTML】|【特殊字符】菜单中的命令。,3、插入更新日期单击【插入】工具栏【常用】类别中的【日期】按钮，弹出【插入日期】对话框，在【日期格式】列表框中选择一种日期格式。4.添加注释选择【插入】|【注释】命令，或者单击【插入】工具栏【常用】类的【注释】按钮，弹出【注释】对话框，在其中输入注释的内容。,5.插入HTML源代码按Ctrl+T组合键，弹出快速标签编辑器，在编辑框中输入HTML标签后按Enter键结束。,二、查找与替换选择【编辑】|【查找和替换】命令，【查找和替换】对话框，完成相关设置后，按需要单击【查找下一个】、【查找全部】、【替换】或【替换全部】按钮，以完成查找或替换。,三、检查拼写选择要进行拼写检查的内容，然后选择【文本】|【检查拼写】命令，即开始检查单词的拼写。当遇到无法识别的单词时，会弹出【检查拼写】对话框，可根据需要更改或忽略疑为错误的内容。,四、表格的创建：1.在网页中插入表格单击【插入】工具栏【常用】类别中的【表格】按钮，或者选择【插入】|【表格】命令，弹出【表格】对话框，设置所需选项后，单击【确定】按钮。2.向表格中添加数据移动插入点（1）将插入点移动到下一个单元格：按Tab键。（2）将插入点移动到上一个单元格：按Shift+Tab组合键。（3）将插入点向上、下、左、右移动：按箭头键。五、表格的编辑：1.扩展表格模式选择【查看】|【表格模式】|【扩展表格模式】命令。,六、选择表格1.选择单元格（1）选择某一个单元格：单击单元格，然后单击文档窗口左下角标签选择器中的标签；或者按住Ctrl键单击该单元格；或者单击单元格，然后选择【编辑】|【全选】命令。（2）选择一个矩形单元格块：从一个单元格拖动到另一个单元格，或者单击一个单元格，然后按住Shift键单击另一个单元格。（3）选择不相邻的多个单元格：按住Ctrl键，然后单击要选择的每一个单元格。2.选择整个表格单击任意单元格，然后在文档窗口左下角的标签选择器中单击标签。,七、几种特殊表格的制作：1.水平细线在网页中插入一个一行一列的表格，将其单元格边距和单元格间距都设置为0，然后单击【文档】工具栏上的【代码】按钮，切换到代码视图，将和标签之间的“”删除，再切换到设计视图（单击【文档】工具栏上的【设计】按钮），即可看到水平细线的效果2.单像素表格将表格的边框粗细设置为0像素，单元格间距设置为1像素或以上数值，然后将表格背景设置为一种颜色，单元格背景设置为另一种颜色。,八、插入及编辑图像文件：1.插入图像2.插入鼠标经过图像选择【插入】|【图像对象】|【鼠标经过图像】命令，弹出【插入鼠标经过图像】对话框，设置所需的选项，然后单击【确定】按钮。3.插入网页背景图像选择【修改】|【页面属性】命令，弹出【页面属性】对话框，单击【背景图像】选项右侧的【浏览】按钮，在弹出的对话框中选择所需的图片，然后单击【确定】按钮。如果背景图像没有填满整个窗口，Dreamweaver会平铺（重复）背景图像。,四、裁剪图像选择要裁剪的图像，并单击图像属性检查器中的【裁剪】按钮，或者选择【修改】|【图像】|【裁剪】命令。五、插入flash，视频，音乐。,第三课超级链接和站点导航,一.创建文本超级链接在Dreamweaver中为文字添加超链接的方法有以下3种：（1）直接在【链接】文本框中输入链接目标。（2）单击【链接】文本框右侧的文件夹图标，从弹出的对话框中选择链接目标。（3）将【链接】文本框右侧的【指向文件】图标拖动至【文件】面板中要链接的对象上，然后松开鼠标键。二.创建图像超级链接为图像的一部分添加超级链接：先用属性检查器中的热点工具为图像区域设置热点，然后用属性检查器为热点设置超级链接。（1）椭圆形热点（2）矩形热点（3）不规则形状热点,三.插入导航条选择【插入】|【图像对象】|【导航条】命令，或者单击【插入】工具栏【常规】类别中的【图像】按钮，从弹出的下拉菜单中选择【导航条】命令，弹出【插入导航条】命令，根据需要设置其中的选项，即可创建导航条。四.编辑导航条选择【修改】|【导航条】命令，打开【修改导航条】对话框，从【导航条元件】列表框中选择要编辑的项目，再根据实际需要进行设置，设置完毕后单击【确定】按钮。【修改导航条】对话框与【插入导航条】对话框中的选项几乎相同。,第四课层与框架,一.创建层1.平铺式层绘制层时须在【层】面板中选中【防止重叠】复选框。2.重叠式层绘制层时须确保清除对【防止重叠】复选框，然后移动层与其他层重叠。二.编辑层1.更改层的名称在【层】面板的【名称】栏中双击层的名称，该文本即进入编辑状态，输入新的名称替换原来的文本。也可以选择该层，然后在属性检查器左侧的【层编号】文本框中输入层的名称。2.层的显示与隐藏如果一个层被隐藏，单击此图层名称前的睁着眼睛的图标，此层即被显示，同时睁眼图标也会变为闭眼图标。,3.设置层属性使用层的属性检查器。,三、用框架布局网页：1.创建框架与框架集a.插入预置框架样式单击【插入】工具栏【布局】类别中的【框架】按钮，在弹出的下拉菜单中选择所需的框架类型，即可在页面上插入相应的框架，并弹出【框架标签辅助功能属性】对话框，可为框架指定框架名称。b.自定义框架样式先选择【查看】|【可视化助理】|【框架边框】命令，在页面中显示出框架的边框，然后将光标放置在框架的的边框线上，当指针变为双指的箭头时，按住鼠标左键拖动边框到欲建框架的位置。,2.设置框架及框架集的属性3.保存框架和框架集文件保存框架集文件选择框架集，然后选择【文件】|【保存框架页】命令。保存框架中显示的文档在框架中单击，然后选择【文件】|【保存框架】命令。保存所有文件选择【文件】|【保存全部】命令。,第五课动态特效的设计技术,一.JavaScript简介JavaScript是一种描述性语言，可以被嵌入到HTML文件中。通过使用JavaScript，可以做到响应用户的需求事件（如表单的输入），而不用任何的网络途径来回传输资料，所以当一位用户输入一项资料时，它不用经过传给服务器端处理，再传回来的过程，而直接可以被客户端的应用程式所处理。JavaScript和Java很类似，但它要比Java简单得多，相当容易了解。,二.应用行为1.选择网页中要附加行为的对象（如图像或链接），然后在【行为】面板中单击【添加行为】按钮，从弹出菜单中选择要附加的行为。当选择某个动作时，将会弹出一个相应的对话框，显示该动作的参数和说明。在对话框中进行参数设置后，单击【确定】按钮，即可完成附加行为的操作。2.修改事件附加行为后，用于触发该动作的默认事件会显示在【行为】面板【事件】栏中。在【事件】栏中单击要修改的事件，然后单击该事件右侧出现的下拉按钮，在弹出的下拉列表框中选择另一个事件,即可修改触发事件。,三.【时间轴】面板1.【时间轴】面板显示层和图像随时间变化的属性。选择【窗口】|【时间轴】命令即可显示【时间轴】面板。,2.时间轴动画小技巧（1）显示和隐藏层，而不是更改多图像动画的源文件。（2）扩展动画条以创建更顺畅的动作。（3）不要制作大型位图的动画。（4）创建简单的动画。,创建表单及表单对象一、.创建表单将光标置于要插入表单的位置，然后单击【插入】工具栏上【表单】类别中的【表单】按钮，或选择【插入】|【表单】|【表单】命令，即可在光标所在行插入一个空白表单。在设计视图中，表单轮廓会以红色虚线表示。二.创建表单对象,文字文字文字文字文字文字其中direction和scrollAmount分别代表滚动方向和速度。,黑软基地,域名一.域名含义一览表.com-商业机构（commercialorganizations）地址.edu-教育（education）及研究机构地址.gov-政府机构（governmentagencies）地址.net-主要网络服务机构地址.org-专业团体组织（organizations）非赢利组织或协会用此种域名.biz-可以替代.com的通用顶级域名，适用于商业公司(注：biz是business的习惯缩写形式)；.info-可以替代.com的通用顶级域名，适用于提供信息服务的企业；.name-适用于个人的通用顶级域名；.pro-适用于医生、律师、会计师等专业人员的通用顶级域名(注：pro是professional的习惯缩写形式)；.coop-适用于商业合作社的专用顶级域名(注：coop是cooperatives的习惯缩写形式)；.aero-适用于航空运输业的专用顶级域名；.museum-适用于博物馆的专用顶级域名。,二.国际域名后缀含义China,中国uk:UnitedKingdom,英国fr:France,法国us:UnitedStates,美国jp:Japan,日本Canada,加拿大se:Sweden,瑞典sg:Singapore,新加坡mn:Mongolia,蒙古tw:Taiwan,台湾mo:Macau,澳门hk:HongKong,香港,三.申请域名和空间把自己的作品上传到空间上免费空间域名申请,安装IIS,一、主页的概念平常我们在浏览器地址栏中输入某个网站的域名时，就可以打开该网站。这个所谓的网站就是该服务器上的默认浏览目录中的默认网页，默认的浏览目录叫做主目录，默