1 / 17

网页制作与网站设计教学课件

网页制作与网站设计教学课件. 网页制作与网站设计课程组开发. 淮安信息职业技术学院. 情境 4 ：软件项目化综合实训精品课程网站建设. 软件项目化综合实训精品课程网站静态站点设计. 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估. 基于工作过程的 网页设计与制作教程. 1 项目展示与项目目标. 项目展示与项目目标. 掌握库的创建与应用 掌握模板的创建与应用. 2. 项目资讯. 核心技能点一：站点的创建.

kimama
Download Presentation

网页制作与网站设计教学课件

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 网页制作与网站设计教学课件 网页制作与网站设计课程组开发 淮安信息职业技术学院

  2. 情境4：软件项目化综合实训精品课程网站建设情境4：软件项目化综合实训精品课程网站建设 软件项目化综合实训精品课程网站静态站点设计 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估 基于工作过程的 网页设计与制作教程

  3. 1项目展示与项目目标 项目展示与项目目标 掌握库的创建与应用 掌握模板的创建与应用

  4. 2. 项目资讯 核心技能点一：站点的创建 1）启动Dreamweaver软件，执行“站点”→“新建站点”命令，此时将显示“站点定义”对话框，在“站点定义”对话框中输入站点名称“jpkc”，如左图所示。 2）点击“下一步”按钮，因为大家制作的是静态页面，所以选择“否，我不想使用服务器技术”，如右图所示。

  5. 2. 项目资讯 核心技能点一：站点的创建 3）选择开发过程中“编辑我的计算机上的本地副本，完成后再上传到服务器”单选按钮，同时点击“浏览”按钮，选择本地站点的根目录，如左图所示。 4）点击“下一步”按钮，在“你如何连到远程服务器？”选项中，从下拉列表框中选择“none”，如右图所示。 5）点击“完成”按钮，然后完成网站的创建。

  6. 2. 项目资讯 核心技能点二：模板技术的应用 （1）模板的创建方法 1）使用Dreamweaver打开“情境一：精品课程网”文件夹中的default.html文件。 2）执行“文件”→“另存为模板”命令，将出现“另存为模板”对话框，如左图所示，另存为jxff（教学方法），点击保存即可完成模板的创建。 3）删除网页主题右侧的部分，调整左侧布局，如右图所示。

  7. 2. 项目资讯 核心技能点二：模板技术的应用 （2）设置可编辑区域 在Dreamweaver中选择图中的右侧空白区域，执行“插入”→“模板对象”→“可编辑区域”命令，弹出“新建可编辑区域”对话框，如左图所示，在对话框的“名称”文本框中输入可编辑区域的名称，单击“确定”按钮，保存模板，如右图所示。

  8. 2. 项目资讯 核心技能点二：模板技术的应用 （3）应用模板创建新网页 第一种方法：创建一个新网页，然后将其保存到网站文件夹中，执行“修改” →“模板” →“应用模板到页”命令。 第二种方法：打开要应用模板的文档，在“资源”面板中单击“模板”图标，找到要应用的模板。将模板从面板拖到“文档”窗口中，或者选中模板，单击“应用”按钮。 第三种方法：选择“文件”→“新建”命令，弹出“新建文档”对话框，选择“模板”标签，在“模板用于”列表框中选择所在的站点，在“站点”列表框中选择合适的模板，如图11-10所示。

  9. 2. 项目资讯 核心技能点二：模板技术的应用 （3）应用模板创建新网页

  10. 2. 项目资讯 核心技能点三：库的应用演示 “header.lbi”库项目预览效果

  11. 3. 项目计划与决策 精品课程网站建设着重强调课程的特色与教学理念，运用静态模板技术与库技术先后设计制作“header.lib”、“left.lib”、“footer.lib”三个库项目，建立师资队伍模板(szdw.dwt)、教学内容(jxnr.dwt)、课程介绍(kcjs.dwt)等12个模板，应用这12个模板来丰富网站内容，从而实现该项目。实现的示意图如图所示。

  12. 4. 项目实施 1）创建“jpkc”的站点，使“jpkc”站点指向“情境一：精品课程网”。 2）新建模板网页文件，保存到“Templates”文件夹，命名为“szdw..dwt”，然后导入外部CSS样式表（style文件夹中的style.css文件）。 3）在“资源”面板中单击“库”按钮，显示创建的库项目，如图所示。选中库项目“header.lbi”，单击左下角的“插入”按钮，即可插入库项目。 4）接着插入1个表格，参数为1行2列，水平居中对齐，第1列宽为206像素（背景图像位于images文件夹中的leftbg.jpg），第2列宽为754像素（背景色为白色）。 5）在第1列中插入“师资队伍”的2级子模块，如图所示。

  13. 4. 项目实施 6）按照第3）步的方法在“师资队伍”的2级子模块下方插入“left.lbi”库项目。 7）执行“插入”→“模板对象”→“可编辑区域”命令，弹出“新建可编辑区域”对话框，如图所示，在对话框的“名称”文本框中输入可编辑区域的名称，单击“确定”按钮，插入表格并调整内容，如图所示。 8）在网页最后插入“footer.lbi”库项目，完成“师资队伍”模板的创建。

  14. 4. 项目实施 第二步：运用库技术制作其它模板，方法与“师资队伍”模板创建方法相似。 第三步：打开“header.lbi”库项目，在banner处插入“flash”文件夹中的“dh.swf”， 置参数使动画透明（设置wmode为transparent）。保存“header.lbi”，则会弹出“更新库项目”对话框（如图11-17所示），点击“更新”按钮则会更新页面（如图所示）。 第四步：采用“教学方法”模板的应用方法制作其它网页。

  15. 5.项目检查与评估

  16. 情境4：软件项目化综合实训精品课程网站建设情境4：软件项目化综合实训精品课程网站建设 教学小结 1. 项目展示与项目目标 2. 项目资讯 3. 项目计划与决策 4. 项目实施 5. 项目检查与评估 基于工作过程的 网页设计与制作教程

  17. 谢谢大家

More Related