网页制作知识分享

《网页制作知识分享》由会员分享，可在线阅读，更多相关《网页制作知识分享（50页珍藏版）》请在金锄头文库上搜索。

1、Dreamweaver网页制作,第一单元 创建个人网站,主 编：王树平 副主编：杜大志 李光宇,任务描述：本单元将通过一个个人网站的创建，学习网站从规划到建立的流程，自己动手，打造属于自己的站点。任务完成后如下图所示：,第一单元 创建个人网站,第一单元 创建个人网站,任务一 规划个人网站,任务二 创建站点,任务三 管理站点,任务四 创建网站目录结构,任务五 使用代码创建网页,任务一 规划个人网站,任务描述：了解网站的主题和规划流程，规划一个个人网站。,任务分析：制作一个个人网站之前需要进行系统的规划，包括网站主题的确定、栏目板块的划分及建立相应的目录结构、选择合适的开发工具软件。,第一单元 创

2、建个人网站,3选择网页制作软件,其他常见网页编辑软件： 微软的Frontpage：Microsoft Office办公软件成员之一，被誉为最易于使用、功能强大的网页制作编辑入门工具。 Netscape编辑器：Netscape Communicator和Netscape Navigator随带的网页制作软件，是一款简单的面向初学者的网页制作入门工具。 CuteHTML：美国GlobalSCAPE开发的网页制作软件。 HotDogPro4.54：美国软件公司Sausage推出的网页制作软件，使用方便、功能十分强大，具有动画制作功能。现在的最新版为“HotDog Professional 7”。,D

3、reamweaver 8：一款集网站管理与网页制作于一身的“所见即所得”的网页制作软件,任务一 规划个人网站,任务总结： 通过完成以上任务，学习了个人网站的规划方法。,任务一 规划个人网站,举一反三： 1通过互联网浏览网站，总结所浏览网站的主题类型，至少找出企业宣传、软件下载、求职招聘、专业论坛、流行时尚、互动聊天和在线销售类型的网站各一个，记录它们的网站名称填入表JYFS1-1中。,A.启发思路： 根据表格内的提示，使用搜索引擎查找相关类型的网站。,B.分组完成任务。,任务一 规划个人网站,2相同主题类型的网站所包含的栏目不一定完全相同，搜索并浏览网络上的个人网站，看一看它们都包含哪些栏目并

4、进行汇总。,A.启发思路： 不同的人制作的个人网站栏目划分会有很大的区别，不同的年龄段，不同的工作职业，不同的兴趣爱好有不同的栏目划分。在搜索过程中注意考虑这些区别，例如，电影明星的个人网站中肯定会有影迷会这样的栏目，而运动员的个人网站中一般包含荣誉奖项这样的栏目,B.分组完成任务。,任务一 规划个人网站,作业： 1为自己设计一个个人网站，至少包含8个栏目，参照课本表1-1画出站点的目录结构。,任务一 规划个人网站,任务二 创建站点,任务描述：使用网页编辑软件Dreamweaver 8，创建“幽幽我心的个人网站”站点。,任务分析：创建本地站点首先需要运行Dreamweaver 8，然后定义站点

5、的名称、确定是否使用服务器技术、确定站点在本地计算机上的位置等。,第一单元 创建个人网站,自己动手： 1启动软件Dreamweaver8 。,Dreamweaver8的起始页,2创建网站站点。,任务二 创建站点,任务总结： 通过完成以本任务，学习了软件的启动方法以及创建网站站点的流程。,任务二 创建站点,举一反三： 1新建一个站点，名称为“pra1-1”，使用“高级”选项卡完成新建过程，保存位置为“D:pra1-1”，其他参数保持默认即可。,A.启发思路： 在新建站点的过程中，使用“高级”选项卡完成新建过程更为直观，需要进行设置的参数与使用“基本”选项卡完成这一操作是一致的。,B.分组完成任务

6、。,任务二 创建站点,2使用搜索引擎搜索并打开5个不同主题类型的网页，记录并分析它们的URL，将其URL中的协议类型、域名和目录结构等内容填入表JYFS1-2中。,A.启发思路： 使用浏览器浏览一个网页的时候，浏览器的地址栏中显示出这个网页的URL地址。,B.分组完成任务。,任务二 创建站点,作业： 1新建一个以自己姓名命名的个人站点，该站点使用“ASP JavaScript”服务器技术,暂不设置远程信息与测试服务器，站点保存在“D:pra1-2”文件夹中。,任务二 创建站点,任务三 管理站点,任务描述：使用网页编辑软件Dreamweaver 8，实现站点的管理。,任务分析：站点的管理功能包括

7、新建、编辑、复制、删除、导出和导入，在Dreamweaver 8中有相应的管理工具可以直接完成这些操作，大大简化了站点的管理工作。,第一单元 创建个人网站,自己动手： 1导出站点。,任务三 管理站点,站点名称,2导入站点。,任务三 管理站点,注意：因为有重名的站点，所以导入的站点名称后面自动加0。,3复制删除与编辑站点。,任务总结： 通过完成以本任务，学习了软件的启动方法以及创建网站站点的流程。,任务三 管理站点,举一反三： 新建站点“pra1-5”，使用管理站点功能将其导出。将站点导出文件通过网络或移动存储设备拷贝到其他计算机中，使用管理站点功能将其导入。,1启发思路： 在站点制作过程中，有

8、时需要更换计算机，导出站点并导入到其他计算机中。,2分组完成任务。,任务三 管理站点,作业： 1新建站点“pra1-3”，使用管理站点功能复制站点“pra1-3”，编辑复制的站点名称为“pra1-4”，之后删除站点“pra1-3”。,任务三 管理站点,任务四 创建网站目录结构,任务描述：实现先前规划的“幽幽我心的个人网站”目录结构,任务分析：创建目录结构需要在站点内新建相应的网页文件及文件夹。 在众多的网页文件中有一个页面叫做首页，他作为整个网站的入口，必然要与其他的页面在设置上有所区别。,第一单元 创建个人网站,自己动手： 1启动Dreamweaver，打开“幽幽我心的个人网站”。 2使用文

9、件面板（看不到文件面板怎么办？）创建网站首页： A.如下页图所示，在文件面板中，选择“幽幽我心的个人网站”右键单击，新建一个网页文件，命名为Index.html。,任务四 创建网站目录结构,注意：不论是使用起始页还是使用“新建”菜单创建新网页，都需要保存到准确的目录位置。所以建议使用“文件”面板直接在站点内新建网页文件及文件夹。,B. 在文件面板中该文件名上右击鼠标，选择“设成首页”,以区别于其他网页文件。,任务四 创建网站目录结构,3在文件面板双击打开首页文件、设置其页面属性,任务四 创建网站目录结构,如下图所示，在首页文件index.html的页面属性中，设置左边距和上边距为0像素。,任务

10、四 创建网站目录结构,5新建首页图像文件夹,6新建其他页面文件夹。结果文件面板如下图所示。,课堂讨论： 首页文件名称可以不用index.html吗？怎样把首页文件与其他网页文件区分开来？通常把页面的左边距和上边距设置为0，为什么？,4单击“F12”键，在IE浏览器中预览生成的网页。,任务四 创建网站目录结构,空白首页,怎样管理站点目录？,任务总结： 通过完成以上任务，学习了创建首页、设置页面属性、创建并管理站点目录。,任务四 创建网站目录结构,举一反三： 依据前面学习的知识与掌握的专业技能，新建一个站点，网站命名为“网页制作”，存放在“D:dreamweaver”文件夹中，使用“文件”面板新建

11、首页文件“index.html”和首页图像文件夹“images”，在“我的电脑”中查看相应目录的变化。,1启发思路： 注意要把网页设为首页,2分组完成任务。,任务四 创建网站目录结构,作业： 1使用文件菜单新建ASP JavaScript类型的动态页，文件保存为D:/ practice 1-1.asp，使用属性面板修改网页标题为ASP网页。 2新建站点pra1-7，使用文件面板创建一个网页文件，命名为practice1-2.html，选中该文件后使用 下拉菜单中的重命名选项，改名为newpage.html，同样使用 下拉菜单中的选项预览页面后删除该页面。,任务四 创建网站目录结构,任务五 使用

12、代码创建网页,任务分析：网页是用HTML（超文本标识语言）记述的，HTML是一种编写网页的基础语言，是英文HyperText Markup Language 的缩写，中文意思是“超文本标识语言”。HTML文件也可以说是一个文本文件，它包含了一些HTML标签、文本、脚本等，而且可以使用记事本等多种文本编辑软件进行编写。,任务描述：使用HTML语言创建一个空白页面。,第一单元 创建个人网站, ,打开记事本输入下列代码并保存，文件名example.html，最后双击运行。,任务五 使用代码创建网页,自己动手 1使用“记事本”创建一个空白网页文件,其中各Html标签的功能是什么？,2使用Dreamwe

13、aver 8“代码”视图创建一个空白网页文件,运行Dreamweaver 8，使用起始页新建一个空白页面，在“文档”工具栏中选择“代码”视图，“文档”窗口将显示如下图代码，其中包含文档类型的说明文字和页面的编码方式与标题。,任务五 使用代码创建网页,此代码会在新建空白网页时自动生成。,课堂讨论： 分组讨论使用代码创建网页和使用Dreamweaver 8创建网页各有什么优缺点。,任务五 使用代码创建网页,举一反三： 依据前面学习的知识与掌握的专业技能，使用word 2003新建一个空白文档，保存时选择文件类型为“网页（*.htm；*.html）”命名为“wordpage.html”，保存在D盘根

14、目录下，完成后使用Dreamweaver 8打开该页面，在“代码”视图下查看其自动生成的HTML代码。,1启发思路： 网页是由HTML语言编写的，保存为扩展名为Html或Htm的文本文件。任何一个文本编辑软件都可以编写。分组讨论有哪些文本编辑软件，引出Word。回忆如何使用Word创建文件。,2分组完成任务。,任务五 使用代码创建网页,作业： 1使用Dreamweaver 8新建一个空白文档，将“文档”窗口切换到“拆分”视图，查看“文档”面板的状态。 2标签是标签内部包含的一个功能标签，使用网络查找该标签的各种属性及其作。,任务五 使用代码创建网页,相关知识：,1常见的网页主题有：个人站点、企

15、业宣传、软件下载、求职招聘、专业论坛、流行时尚、互动聊天和在线销售等。,2对网站题材的选择，通常要注意以下两点： A.主题要简单明确。网站的内容要紧密地围绕主题， 它不可能包罗万象，也并不是把所有精彩的图像、动画、视频放在一起，就能做出好的网站，那样的结果往往会让你的网站没有特色，而且也要耗费很多的精力去维护。 B.尽量选择自己擅长或者喜欢的内容作为网站的题材。比如根据所学的专业，自己的爱好、特长等去分析选择网站题材。这样的题材做起来才会有兴趣，兴趣是制作网站的动力，有热情才能设计出优秀的作品。,任务一 规划个人网站,3建立目录结构的一些建议： A.不要将所有文件都存放在根目录下，会造成文件管

16、理混乱。 B.按栏目内容建立子目录。 C.在每个栏目目录下都建立独立的images目录保存图像资源。 D.目录的层次不要太深，建议不要超过3层。 E.目录使用英文名称，不要使用中文名称。 F.不要使用过长的目录名称。,任务一 规划个人网站,相关知识：,1Dreamweaver8 界面,起始页,面 板 组,菜单栏,任务二 创建站点,2Dreamweaver8 起始页,打开最近编辑过的网页文件。,选择创建各种类型的网页文件。,选用Dreamwea-ver 8中已有的范例创建CSS样式表、框架集页面等网页文件。,任务二 创建站点,3创建站点的流程,URL的含义,任务二 创建站点,4URL的含义 URL就是“统一资源定位器（Uniform Resource Locator : URL）”，通俗点说，它用来指出某一项信息所在位置及存取方式。比如要上网访问某个网站，在IE浏览器的地址栏中所输入的就是URL。URL是Inter