网页制作第1单元素材.ppt
《网页制作第1单元素材.ppt》由会员分享,可在线阅读,更多相关《网页制作第1单元素材.ppt(50页珍藏版)》请在三一办公上搜索。
1、Dreamweaver网页制作,第一单元 创建个人网站,主 编:王树平副主编:杜大志 李光宇,任务描述:本单元将通过一个个人网站的创建,学习网站从规划到建立的流程,自己动手,打造属于自己的站点。任务完成后如下图所示:,第一单元 创建个人网站,第一单元 创建个人网站,任务一 规划个人网站,任务二 创建站点,任务三 管理站点,任务四 创建网站目录结构,任务五 使用代码创建网页,任务一 规划个人网站,任务描述:了解网站的主题和规划流程,规划一个个人网站。,任务分析:制作一个个人网站之前需要进行系统的规划,包括网站主题的确定、栏目板块的划分及建立相应的目录结构、选择合适的开发工具软件。,第一单元 创建
2、个人网站,自己动手:1定位网站的主题和名称。,2规划网站的栏目与目录结构。,任务一 规划个人网站,3选择网页制作软件,其他常见网页编辑软件:微软的Frontpage:Microsoft Office办公软件成员之一,被誉为最易于使用、功能强大的网页制作编辑入门工具。Netscape编辑器:Netscape Communicator和Netscape Navigator随带的网页制作软件,是一款简单的面向初学者的网页制作入门工具。CuteHTML:美国GlobalSCAPE开发的网页制作软件。HotDogPro4.54:美国软件公司Sausage推出的网页制作软件,使用方便、功能十分强大,具有动
3、画制作功能。现在的最新版为“HotDog Professional 7”。,Dreamweaver 8:一款集网站管理与网页制作于一身的“所见即所得”的网页制作软件,任务一 规划个人网站,任务总结:通过完成以上任务,学习了个人网站的规划方法。,任务一 规划个人网站,举一反三:1通过互联网浏览网站,总结所浏览网站的主题类型,至少找出企业宣传、软件下载、求职招聘、专业论坛、流行时尚、互动聊天和在线销售类型的网站各一个,记录它们的网站名称填入表JYFS1-1中。,A.启发思路:根据表格内的提示,使用搜索引擎查找相关类型的网站。,B.分组完成任务。,任务一 规划个人网站,2相同主题类型的网站所包含的栏
4、目不一定完全相同,搜索并浏览网络上的个人网站,看一看它们都包含哪些栏目并进行汇总。,A.启发思路:不同的人制作的个人网站栏目划分会有很大的区别,不同的年龄段,不同的工作职业,不同的兴趣爱好有不同的栏目划分。在搜索过程中注意考虑这些区别,例如,电影明星的个人网站中肯定会有影迷会这样的栏目,而运动员的个人网站中一般包含荣誉奖项这样的栏目,B.分组完成任务。,任务一 规划个人网站,作业:1为自己设计一个个人网站,至少包含8个栏目,参照课本表1-1画出站点的目录结构。,任务一 规划个人网站,任务二 创建站点,任务描述:使用网页编辑软件Dreamweaver 8,创建“幽幽我心的个人网站”站点。,任务分
5、析:创建本地站点首先需要运行Dreamweaver 8,然后定义站点的名称、确定是否使用服务器技术、确定站点在本地计算机上的位置等。,第一单元 创建个人网站,自己动手:1启动软件Dreamweaver8。,Dreamweaver8的起始页,2创建网站站点。,任务二 创建站点,任务总结:通过完成以本任务,学习了软件的启动方法以及创建网站站点的流程。,任务二 创建站点,举一反三:1新建一个站点,名称为“pra1-1”,使用“高级”选项卡完成新建过程,保存位置为“D:pra1-1”,其他参数保持默认即可。,A.启发思路:在新建站点的过程中,使用“高级”选项卡完成新建过程更为直观,需要进行设置的参数与
6、使用“基本”选项卡完成这一操作是一致的。,B.分组完成任务。,任务二 创建站点,2使用搜索引擎搜索并打开5个不同主题类型的网页,记录并分析它们的URL,将其URL中的协议类型、域名和目录结构等内容填入表JYFS1-2中。,A.启发思路:使用浏览器浏览一个网页的时候,浏览器的地址栏中显示出这个网页的URL地址。,B.分组完成任务。,任务二 创建站点,作业:1新建一个以自己姓名命名的个人站点,该站点使用“ASP JavaScript”服务器技术,暂不设置远程信息与测试服务器,站点保存在“D:pra1-2”文件夹中。,任务二 创建站点,任务三 管理站点,任务描述:使用网页编辑软件Dreamweave
7、r 8,实现站点的管理。,任务分析:站点的管理功能包括新建、编辑、复制、删除、导出和导入,在Dreamweaver 8中有相应的管理工具可以直接完成这些操作,大大简化了站点的管理工作。,第一单元 创建个人网站,自己动手:1导出站点。,任务三 管理站点,站点名称,2导入站点。,任务三 管理站点,注意:因为有重名的站点,所以导入的站点名称后面自动加0。,3复制删除与编辑站点。,任务总结:通过完成以本任务,学习了软件的启动方法以及创建网站站点的流程。,任务三 管理站点,举一反三:新建站点“pra1-5”,使用管理站点功能将其导出。将站点导出文件通过网络或移动存储设备拷贝到其他计算机中,使用管理站点功
8、能将其导入。,1启发思路:在站点制作过程中,有时需要更换计算机,导出站点并导入到其他计算机中。,2分组完成任务。,任务三 管理站点,作业:1新建站点“pra1-3”,使用管理站点功能复制站点“pra1-3”,编辑复制的站点名称为“pra1-4”,之后删除站点“pra1-3”。,任务三 管理站点,任务四 创建网站目录结构,任务描述:实现先前规划的“幽幽我心的个人网站”目录结构,任务分析:创建目录结构需要在站点内新建相应的网页文件及文件夹。在众多的网页文件中有一个页面叫做首页,他作为整个网站的入口,必然要与其他的页面在设置上有所区别。,第一单元 创建个人网站,自己动手:1启动Dreamweaver
9、,打开“幽幽我心的个人网站”。2使用文件面板(看不到文件面板怎么办?)创建网站首页:A.如下页图所示,在文件面板中,选择“幽幽我心的个人网站”右键单击,新建一个网页文件,命名为Index.html。,任务四 创建网站目录结构,注意:不论是使用起始页还是使用“新建”菜单创建新网页,都需要保存到准确的目录位置。所以建议使用“文件”面板直接在站点内新建网页文件及文件夹。,B.在文件面板中该文件名上右击鼠标,选择“设成首页”,以区别于其他网页文件。,任务四 创建网站目录结构,3在文件面板双击打开首页文件、设置其页面属性,任务四 创建网站目录结构,如下图所示,在首页文件index.html的页面属性中,
10、设置左边距和上边距为0像素。,任务四 创建网站目录结构,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,同样使用 下拉菜单中的选项预览页面后删除该页面。,任务四 创建网站目
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 制作 单元 素材
链接地址:https://www.31ppt.com/p-6600165.html