第五单元 制作“家乡山水”网页
五年级下册信息技术课件-第10课制作迷人风光网页人教新课标 共22张PPT
学习过程
动手做：制作“北京风光”网 页。
第1步：单击常用工具栏中的按钮，创建一个新网页。 第2步：插入一个10行5列的表格，宽度设为页面的90%，水平居 中对齐，浏览时不显示边框，再合并第1、2行的单元格。 第3步：把鼠标指针指向第4行单元格左侧的边框，指针变成→ 形后单击，选定第4行。按住Ctrl键，再依次选定第6、8、10行。 第4步：依次打开“表格”菜单、“属性”菜单，单击“单元格” 命令，打开“单元格属性”对话框，单击“背景颜色”选择框中的 按钮，选择一种适当的颜色，如浅黄色。选好后单击按钮，就可以 为选定的单元格填充上指定的颜色。
课堂练习
1.根据“迷人风光”网页中的要求，参照“北京风光” 网页，搜集各地的风景名胜图片，制作相关的网页，并建立 相应的超链接。
提示：可以以小组形式分别制作，然后相互交流、汇总。 2.参照下面的网页，为首页中的“传说故事”栏目制作 网页，并建立相应的超链接。
谢谢
学习过程
第5步：在表格第1行的单元格中输入标题“北京风光”并 适当设置文字的字体、字号、颜色等格式，插入修饰标题的图 片（绿叶）。再在第2行的单元格中插入一条水平线。
第6步：把插入点移到第3行第1列的单元格中，然后单击常 用工具栏中的按钮，插入一幅事先准备好的风景图片，如“北 海白塔”图片。
学习过程
创建自动缩略图时执行工具菜单中的网页选项命令出现网页选项对话框时打开自动缩略图选项卡可以根据实际需要指定缩略图的尺寸边框样式边框粗细等属性
第10课 制作迷人风光网 页
目录
CONTENTS
1 学习目标 2 学习过程 3 小拓展 4 知识窗 5 课堂练习
学习目标
学会制作艺术字标题。 掌握制作缩略图的操作方法。 能够为网页设置超链接。
介绍故乡网页模板
竭诚为您提供优质文档/双击可除介绍故乡网页模板篇一：网页设计说明书我的家乡--永昌我的家乡—永昌展示网站说明文档题目：专业班级：11级计算机科学与技术2班姓名：学号：10240215指导教师：朱爱红成绩：目录第一章网页概述................................................. ................................................... .. (1)1.1网页简介.................................................................................................... (1)1.2网页组成................................................. ................................................... . (1)1.3网页设计思想................................................. ................................................... (2)第二章网页设计思路................................................. ................................................... . (3)2.1网页设计背景................................................. ................................................... .. (3)2.2制作工具选择................................................. ................................................... .. (3)2.3素材收集................................................. ................................................... (4)2.4网页设计内容构想................................................. ................................................... (4)第三章网页内容简介................................................. ................................................... . (7)3.1网页功能简介................................................. ................................................... .. (7)3.2网页主要功能描述................................................. ................................................... (7)3.3网页的浏览.................................................................................................... (7)第四章网页设计................................................. ................................................... .. (9)4.1网页结构总图................................................. ................................................... .. (9)4.2各网页模块的组成................................................. ................................................... . (10)4.3网页制作环境................................................. ................................................... (11)4.4网页设计思路................................................. ................................................... (12)。
050402【任务5-4】制作以表格布局的展示千岛湖旅游景点的网页(2)
样式名称为style1。
（3）设置表格2第2列下方单元格的背景颜
色为“#FFF9E9”，垂直对齐方式为“居中”。
18
《网页设计与制作任务驱动教程（第3版）》
（4）在表格2第2列下方单元格输入所需
的文字，设置文字颜色为“#D48B19”，行高
为“20px”，首行缩进为“2em”，内边距为
“10px”，样式名称为style2。将文字“千岛 湖梅峰观岛”、“梅峰观岛”设置为粗体，样 式名称为style3。
【任务5-4-5】设置表格2及设置行、 列属性
（1）将表格2的对齐方式设置为“居中对齐”。
（2）将表格2的第1列宽度设置为“405像素”，
第2列宽度设置为“360像素”，第3列宽度设置为
“115像素”。
6
《网页设计与制作任务驱动教程（第3版）》
（3）将表格2第1行的高度设置为“28像素”。 （4）将表格2第1列的两个单元格合并，将表 格2第3列的两个单元格合并。
保存表格2及行、列的属性设置
12
《网页设计与制作任务驱动教程（第3版）》
【任务5-4-6】在表格2第1列的单元 格中插入图像并设置其属性
【任务描述】
（1）在表格2第1列的单元格中插入图像
“001.jpg”。
（2）设置所插入图像的属性：宽为405，
高为300，替换文本为“千岛湖全貌”。
13
《网页设计与制作任务驱动教程（第3版）》
整的代码如下所示。
.style2 {
color: #009DD9;
line-height: 20px;
padding: 10px;
text-indent: 2em;
}
25
《网页设计与制作任务驱动教程（第3版）》
家乡的美丽山水
家乡的美丽山水家乡是一个美丽迷人的地方，拥有令人叹为观止的山水景观。
我身处其中，感受着大自然的鬼斧神工，仿佛置身于仙境一般。
以下将为你描述我家乡的美丽山水，希望你能通过我的文字体验到这美轮美奂的景色。
我家乡位于中国的一个小城市，靠近一座高山。
这座高山宛如一位婀娜多姿的少女，袅袅婷婷地卧在大地上。
每当日出时分，朝阳的第一缕光线撒在山顶之上，顿时映照出一幅美丽壮丽的景象。
山顶上氤氲的云雾仿佛一层面纱，将整座山峰装点得如诗如画。
在春季，山上的景色格外迷人。
万物复苏，鲜花盛开，樱花、杜鹃、桃花等各种花卉竞相绽放，香气扑鼻。
丛林深处的小溪似一条银色的丝带，潺潺流淌。
细水长流，哗哗作响，给这片山水增添了生机和活力。
而夏季，山上则是一片郁郁葱葱。
树木沐浴在温暖的阳光下，欣欣向荣。
绿树成荫，凉风习习，为来此避暑的游客提供了一片清凉的净土。
站在山顶，远眺山下的村庄，仿佛看到了一幅宛如画卷的乡村风光。
秋季是我最喜欢的时候，因为这是整个山水景色最绚丽的季节。
枫叶迎来了它们最美丽的时刻，五彩斑斓的红、黄、橙相互交织，仿佛一幅色彩斑斓的图案覆盖在山腰。
踏着枫叶掉落在小径上的沙沙声，仿佛置身于仙境之中。
随着冬季的到来，山水景色开始变得寒冷而静谧。
洁白的雪花落在山脚，山顶上笼罩着一层洁白的盖子，仿佛这座山峰穿上了一件华丽的袍子。
这时，山上的景色宛如一幅素描画，简约而充满韵味。
除了山上的美景，我家乡还有一条壮丽的江河。
这条江河蜿蜒曲折，宛如一条银色的蟒蛇，贯穿整个城市。
江河两岸群山环绕，远处的山峦与江水融为一体，让人仿佛置身于仙境中。
每当夕阳西下的时候，江水映照着夕阳的余晖，呈现出一片金色的光泽，宛如一片金纱覆盖在江面上。
站在江边，吹着江风，远眺江景，心情无比宁静和舒畅。
在我家乡，不论是山地还是江河，每一处都是大自然的鬼斧神工。
这里没有任何人工雕琢的痕迹，完美呈现了大自然的神奇与美妙。
家乡的美丽山水是我心中永远的宝藏，它给予了我力量和灵感。
网页制作实验报告家乡
一、实验目的本次实验旨在通过网页制作，展示我的家乡——XX市（县）的自然风光、人文历史、经济发展等方面，提高我的网页设计能力，并锻炼我的信息整理和表达能力。
二、实验内容1. 网页设计构思（1）主题定位：以“美丽家乡，温馨记忆”为主题，突出家乡的自然美景、人文历史和民俗风情。
（2）页面布局：采用简洁、明快的风格，以图片、文字、视频等多媒体元素展示家乡特色。
（3）功能模块：包括家乡风光、历史文化、民俗风情、经济发展、旅游攻略等板块。
2. 网页制作过程（1）网站搭建使用Dreamweaver软件，创建一个本地站点，命名为“我的家乡”。
（2）页面设计1）首页设计首页采用图片轮播展示家乡美景，下方列出导航栏，包括家乡风光、历史文化、民俗风情、经济发展、旅游攻略等板块。
2）内容页设计根据各板块内容，分别设计相应的页面。
例如：- 家乡风光：展示家乡的名胜古迹、自然风光等图片，并配以简短的文字介绍。
- 历史文化：介绍家乡的历史沿革、名人轶事、传统节日等，采用图文并茂的形式。
- 民俗风情：展示家乡的民俗活动、民间艺术、特色美食等，增强用户体验。
- 经济发展：介绍家乡的产业结构、重点企业、招商引资政策等，展现家乡的发展活力。
- 旅游攻略：提供家乡的旅游线路、住宿、餐饮、交通等信息，方便游客规划行程。
（3）代码编写使用HTML、CSS和JavaScript等前端技术，编写页面代码。
注意页面兼容性和响应式设计，确保在不同设备上都能正常显示。
（4）测试与优化对制作完成的网页进行测试，检查页面布局、功能、性能等方面是否存在问题，并进行优化。
三、实验结果经过多次修改和完善，最终制作完成了一个关于家乡的网页。
该网页包含了家乡风光、历史文化、民俗风情、经济发展、旅游攻略等多个板块，内容丰富，界面美观，用户体验良好。
四、实验心得1. 网页制作过程中，我学会了使用Dreamweaver、Photoshop等软件，提高了我的设计能力。
制作“说说桂林”网页教学设计
制作“说说桂林”网页教材目标简析一、学情分析：六年级学生通过前一阶段的学习，已经掌握了访问网站、浏览网页以及利用搜索引擎从网上获取所需信息的基本操作技能，有一定的搜集、归纳、整理知识的能力，掌握了用FrontPage 制作网页的基本操作，对网站的策划与构思有了一定的了解，但网站创建的知识以及网站策划构思的实践比较欠缺，另外学生现有知识水平存在一定差异。
二、教学目标：知识与技能目标：⑴、学会画出网页的结构图⑵、学会在网页中输入文字和图片，并进行文字和图片的格式设置。
⑶、学会正确保存制作的网页。
⑷、学会用两种方式预览网页效果。
过程与方法目标：⑴、感受在老师的指导下学习制作一个网页的全过程，懂得遇到问题的时候通过邻座同学之间进行交流解决问题，通过思考问题、自主学习，小组讨论交流以及教师的演示讲解等方式，掌握制作网页的相关操作。
情感、态度、价值观目标：⑴、通过制作网页，了解一个网页的基本结构，并能将学到的网页知识运用到日常的学习和生活中去，学以致用；⑵、培养学生大胆实践、积极探索、勇于创新的精神，进一步提高学生运用迁移进行探索学习的能力和自我学习、合作学习的能力。
三、教学重点：1、根据要求制作一张“说说桂林”的主题网页。
2、在网页中输入文字、图片，并对文字和图片进行设计。
四、教学难点：教学的难点在于如何把文字与图片混排才美观，如果使用的混排方式不恰当，会使网页很难看。
在设置网页背景的时候也经常会使背景的图片颜色影响到文字的呈现效果，如何合理的美观的设置网页的背景，也要求学生要有耐心挑选背景的颜色，或者用做背景的图片。
五、教材内容分析：1、本课是广西壮族自治区课程教材发展中心组织编写的六年级《小学信息技术》教材中主题二建立我的网站中的任务三《“说说桂林”——网页制作》的内容，是在学生初步掌握了上网操作及网格探究的基本操作以及具备一定信息素养的基础上，学习Office2003套件中的FrontPage2003制作简单的网站，使学生了解一个网站的设计流程以及网页的制作方法与技巧。
Dreamweaver网页制作第五单元制作家乡山水网页
任务三 制作页面动态效果
层“Layer2” 和层“Layer8” 为“显示”，其他层全部设置为“隐藏”
任务三 制作页面动态效果
B.为行为设置事件 在“行为”面板的事件栏中，选择该行为的事件为 “onMouseOver”，效果如下图所示：
行为面板介绍。
常用事件 有哪些？
常用行为 有哪些？
任务三 制作页面动态效果
举一反三： 将本单元“举一反三”文件夹中的“pra5-2”文件夹拷贝到 D盘根目录，运行Dreamweaver 8，使用文件夹中的图像与文 本制作“我的心事”网页“practice5-7.html”,整个页面使用层 进行布局，效果如下图所示。
1．启发思路： 回忆插入层的方法， 在层中添加内容。
2．分组完成任务。
至此，为“金华山景区”热点添加了一个行为，此时预览 “家乡山水”页面，鼠标移上“金华山景区”热点时，层 “ Layer2” 和 “ Layer8” 显 示 ， 其 他 层 都 隐 藏 ， 右 侧 显 示 的 是 “金华山景区”图像和简介。
2．为“金华山景区”热点添加“设置层文本”行为
A.选中“金华山景区”热点，在“行为”面板中，选择 “添加行为”按钮，在弹出的下拉菜单中选择菜单栏“设置文 本”→“设置层文本”选项，弹出“设置层文本”对话框，在 “层”中选择层“Layer8”，在“新建HTML”中输入对该景区的 简单介绍，然后单击“确定”按钮。效果如下图所示：
1．启发思路： 注意选择正确的行为和事件。
2．分组完成任务。
任务三 制作页面动态效果
作业
1．创建网页“practice5-10.html”，插入本单元素材“举 一反三”文件夹中的图像“practice5-2.jpg”，为图像添加“弹 出信息”行为，使鼠标经过图像时弹出信息“月到中秋分外 明”。
家乡网页设计模板
家乡网页设计模板家乡，是我们成长的地方，是我们生命中最温暖的记忆。
在这个信息时代，人们对家乡的向往和思念也可以通过互联网来表达和传播。
因此，设计一款具有家乡特色的网页模板，不仅可以满足人们对家乡的怀念之情，也可以为家乡的宣传和推广提供一个新的平台。
本文将介绍一款家乡网页设计模板的具体内容和特点。
首先，家乡网页设计模板的整体风格应该以家乡的特色为主题，可以选择家乡的地标建筑、风土人情、民俗文化等作为设计元素，突出家乡的独特魅力。
在色彩搭配上，可以运用家乡的代表性颜色，如湖南的橘红色、四川的鲜艳色彩等，以此来突出家乡的地域特色。
其次，家乡网页设计模板的布局应简洁明了，便于用户浏览和查找信息。
可以设置家乡的历史文化、地理环境、特色美食、名人故事等板块，让用户可以通过网页了解家乡的方方面面。
同时，要考虑到不同设备的适配性，确保在电脑、平板和手机等不同屏幕上都能够良好地显示和使用。
另外，家乡网页设计模板的交互功能也很重要。
可以设置留言板、图片上传、视频分享等功能，让用户可以参与到家乡网页的建设中来。
同时，要保证网页的稳定性和安全性，确保用户信息不被泄露和网页不受攻击。
最后，家乡网页设计模板的推广和营销也需要考虑。
可以通过搜索引擎优化、社交媒体传播、线下宣传等方式，让更多的人了解和使用家乡网页。
同时，可以与当地旅游机构、文化单位等合作，提供家乡网页作为宣传和推广的平台，增加网页的知名度和影响力。
综上所述，家乡网页设计模板的制作需要考虑到整体风格、布局、交互功能和推广营销等方面，以此来打造一款具有家乡特色的网页模板。
通过精心设计和策划，可以让更多的人了解和关注家乡，也可以为家乡的发展和宣传做出一份贡献。
希望本文的内容对您有所帮助，谢谢阅读！。
我的家乡html设计思路文字
我的家乡html设计思路文字
以下是为你提供的关于“我的家乡” HTML 设计思路文字：
1. 确定网站结构：开始设计前，先规划好网站的结构和内容。
可以列出家乡的各个方面，如历史、地理、文化、景点、美食等，并为每个方面创建相应的页面。
2. 选择配色方案：根据家乡的特点和风格，选择适合的配色方案。
可以考虑使用与家乡相关的颜色，如地方标志性建筑的颜色、自然景观的颜色或地方文化中的传统颜色。
3. 页面布局：设计页面布局时，要考虑用户体验和信息展示的清晰度。
可以使用 HTML 的表格、div 元素和 CSS 样式来实现页面布局。
4. 导航设计：设计一个清晰简洁的导航栏，方便用户在不同页面之间跳转。
可以包括家乡的各个方面的链接，以及一些重要的页面，如首页、关于我们、联系我们等。
5. 内容展示：在页面中展示家乡的相关内容，可以使用图片、文字、链接等元素。
为了使页面更加生动，可以添加一些多媒体元素，如音频、视频等。
6. 响应式设计：确保网站在不同设备上都能正常显示，包括桌面电脑、平板电脑和手机等。
可以使用媒体查询和响应式布局来实现。
7. 测试和优化：在完成设计后，进行测试以确保页面的兼容性和功能性。
还可以根据用户反馈和数据分析进行优化。
8. 不断改进：随着时间的推移和家乡的发展，可以对网站进行更新和改进，以保持内容的新鲜和吸引力。
以上是一些基本的 HTML 设计思路，具体的实现方式还需要根据个人的创意和技能来进行。
《第10课制作迷人风光网页》作业设计方案-小学信息技术人教版三起01五年级下册
《制作迷人风光网页》作业设计方案（第一课时）一、作业目标本节课的作业设计旨在使学生掌握网页制作的基本技能，学会如何设计并布局一个风光网页，激发学生对信息技术课的兴趣，培养学生的审美能力和创新实践能力。
二、作业内容本节课的作业内容是“制作迷人风光网页”。
学生需按照以下步骤完成作业：1. 搜集素材：选择具有地域特色的风光图片若干张，确保图片质量高、清晰度高，并且有代表性。
2. 网页设计：运用所学的网页设计知识，如色彩搭配、布局等，设计一个美观大方的网页模板。
在模板中预留图片、文字等内容的展示位置。
3. 图片插入与编辑：将收集的风景图片插入到模板中相应的位置，根据需要对图片进行大小、位置等调整，并保证图片的协调性和整体美感。
4. 文字描述：为每张风景图片添加简洁、精练的文字描述，用以描述景点的名称和特色。
5. 页面布局与排版：调整整个页面的布局和排版，保证信息展示的清晰性和可读性。
三、作业要求1. 素材选择：素材需来自实际生活或网络资源，注意版权问题。
2. 设计风格：网页设计应符合主题，体现清新、美观的特点，风格要统一。
3. 内容与布局：页面布局要合理，信息点突出，整体风格和谐统一。
4. 提交格式：学生需将完成的网页以HTML文件格式提交，同时附带设计说明及创意理念的文字说明文档。
5. 时间安排：本项作业的完成时间需安排在本节课及下一节信息技术课的课后时间，总时长为两课时。
四、作业评价评价标准包括以下方面：1. 素材选用与网页美观度；2. 色彩搭配与整体风格；3. 文字描述的准确性与精练度；4. 页面布局与排版的合理性；5. 创意与设计的独特性。
教师将根据以上五个方面进行评价，并给出相应的分数。
五、作业反馈作业提交后，教师将对学生的作品进行批改，对优秀作品进行展示和表扬，对存在问题的地方进行指导和纠正。
同时，教师将针对学生在作业中普遍出现的问题进行课堂讲解和演示，帮助学生更好地掌握网页制作技能。
在下一节课中，教师将组织学生进行作品交流和讨论，让学生互相学习和借鉴，共同提高。
《第10课 制作迷人风光网页》作业设计方案-小学信息技术人教版三起五年级下册
《制作迷人风光网页》作业设计方案（第一课时）一、作业目标1. 掌握网页制作的基本概念和工具；2. 了解网页布局的基本原则和方法；3. 掌握网页素材的收集和整理方法；4. 初步掌握网页制作的基本操作技能。
二、作业内容1. 网页布局：a. 选择一幅自然风光图片作为背景图，进行网页布局；b. 根据布局要求，设计网页的标题、导航、内容和底部等元素；c. 运用表格和CSS样式对网页进行排版和美化。
2. 素材收集：a. 在互联网上寻找与自然风光相关的图片、视频、音乐等素材；b. 筛选出符合要求的素材，并保存备用。
3. 初步制作网页：a. 使用Microsoft Word或WPS文档，新建一个空白页面；b. 将收集到的素材插入到网页中；c. 对网页进行初步编辑，如调整图片大小、位置，添加文字描述等。
1. 作业完成后，需提交一份电子版的作业文档，文件类型为.docx或.wps；2. 作业文档中需包含以下内容：网页布局图、标题、导航、内容、底部等元素的设计说明和图片、视频、音乐的插入位置及说明；3. 作业中使用的素材必须符合版权法规，不得侵犯他人权益；4. 作业应按照要求进行初步编辑，不得直接复制粘贴他人的作品；5. 作业时间不超过2小时。
四、作业评价1. 评价标准：a. 作业完成质量，包括布局设计、素材选择、编辑水平等；b. 作业完成速度，是否在规定时间内完成；c. 作业的原创性，是否使用自己收集的素材，是否直接复制粘贴他人作品。
2. 评价方式：学生自评、小组互评、教师点评相结合。
学生根据评价标准进行自我评价，小组内互相评价，最后由教师对作业进行总体评价。
3. 评价结果：根据评价结果，对优秀作业进行表扬和展示，对存在问题的作业进行指导和改进建议。
4. 评价反馈：及时将评价结果反馈给学生，帮助学生了解自己的优缺点，并指导他们在下次作业中改进。
1. 学生提交作业后，教师应在第一时间进行批改，并及时将评价结果反馈给学生；2. 对于学生在作业中提出的问题和疑惑，教师应当及时给予解答和指导；3. 教师应当根据学生作业完成情况，及时调整教学策略和进度，以满足学生的学习需求。
《第10课 制作迷人风光网页》作业设计方案-小学信息技术人教版三起五年级下册
《制作迷人风光网页》作业设计方案（第一课时）一、作业目标通过本次作业，学生将学习如何使用网页制作软件，设计和制作一个展示家乡迷人风光的网页。
学生需要掌握基本的网页制作技巧，包括图片、文字、视频等多媒体元素的插入，以及网页布局和美工的设计。
通过完成作业，学生将锻炼实践能力，加深对家乡美景的了解和热爱，同时提高信息技术的应用能力。
二、作业内容1. 任务一：选择家乡风光图片。
学生需要收集并挑选出家乡具有代表性的风景图片，可以是山川、湖泊、古建筑等，用于网页的背景和展示。
2. 任务二：设计网页布局。
学生需要使用网页制作软件，设计出一个具有吸引力的网页布局，包括图片、文字、视频等多媒体元素的合理布局。
要求页面简洁、美观，符合视觉审美。
3. 任务三：添加文字描述。
学生需要在网页中添加对家乡风光的文字描述，包括景点的历史、文化、特色等，以丰富网页的内容。
4. 任务四：添加链接和导航。
学生需要为网页中的各个景点添加链接，方便浏览者点击浏览。
同时，还需要设计一些导航元素，如标题栏、标签等，以增强网页的易用性。
5. 任务五：上传至互联网。
学生需要将制作好的网页保存为HTML文件，并上传至互联网上的一个公共空间或网站上，以便其他网友浏览和分享。
三、作业要求1. 作业完成后，学生需提交一份电子版的作业成果，包括网页的HTML文件和相关的图片、文字等素材；2. 作业成果应符合网页制作的基本规范和审美要求，页面布局合理、美观；3. 作业成果中应包含对家乡风光的详细描述和介绍，内容真实、生动；4. 作业成果应上传至互联网上的公共空间或网站，以便教师和其他同学进行浏览和评价；5. 鼓励学生在作业过程中发挥自己的创意和想象力，创作出具有个性和特色的网页作品。
四、作业评价1. 评价标准：评价学生作业成果的质量，包括页面布局、美观程度、内容真实性、创意性等方面；2. 评价方式：教师对学生提交的作业成果进行评分和点评，同时将优秀作品在班级或学校内进行展示和推广；3. 评价结果：根据评价结果，对学生在网页制作方面的技能和能力进行评估，并为后续教学提供参考。
网页设计说明书我的家乡--永昌
我的家乡—永昌展示网站说明文档题目：我的家乡—永昌专业班级：11级计算机科学与技术2班姓名：***学号：********指导教师：***成绩：目录第一章网页概述 (1)1.1 网页简介 (1)1.2网页组成 (1)1.3网页设计思想 (2)第二章网页设计思路 (3)2.1 网页设计背景 (3)2.2 制作工具选择 (3)2.3 素材收集 (4)2.4 网页设计内容构想 (4)第三章网页内容简介 (7)3.1 网页功能简介 (7)3.2 网页主要功能描述 (7)3.3网页的浏览 (7)第四章网页设计 (9)4.1 网页结构总图 (9)4.2 各网页模块的组成 (10)4.3 网页制作环境 (11)4.4 网页设计思路 (12)第五章网页制作 (13)5.1 素材的加工制作 (13)5.2网站的建立 (13)5.3 网页设计 (14)5.3.1主页设计 (14)5.3.2“环境” (15)5.3.3“历史” (16)5.3.4“文化” (17)第六章设计体会 (18)致谢 (19)摘要【摘要】本网页主要用HTML语言编写，利用Macromedia Dreamweaver8.0作为开发工具，介绍了永昌县的历史、文化、民族、经济、地理、特产等基本概况，以图片和文字介绍相结合的方式，以网站浏览的方式综合展示了永昌县的整体面貌，着重介绍了永昌的特色文化。
【关键词】网页设计说明书我的家乡永昌设计思路Dreamweaver8.0 Javascript语言第一章网页概述1.1 网页简介网页，是构成网站的基本元素，是承载各种网站应用的平台。
通俗的说，网站就是由网页组成的。
网页说具体了是一个html文件，浏览器是是用来解读这份文件的。
本次网页设计，主要用HTML语言编写，利用Dreamweaver8.0作为开发工具，中间插入了一些Javascript语言用以编制一些特效，如左右移动图片广告、显示当前时间等，主要介绍了永昌的历史、文化、环境、经济、地理、特产等基本概况，以图片和文字介绍相结合的方式，穿插一些视频媒体，以网站浏览的方式综合展示了将永昌的整体面貌展现给大家，着重介绍了永昌几大城市和特色文化。
050401【任务5-4】制作以表格布局的展示千岛湖旅游景点的网页(1)
在所插入表格第 2 行的单元格中输入“千
岛湖旅游景点：千岛湖梅峰观岛 | 千岛湖五龙
岛 | 千岛湖猴岛 | 千岛湖鸵鸟岛 | 千岛湖森林氧
吧 | 上西村瀑布群 | 千岛湖屏溪竹筏漂流 | 千岛
湖三潭岛”。
保存网页中所输入的文本及其属性设置。
16
《网页设计与制作任务驱动教程（第3版）》
（2）将第2行中的文字设置为滚动效果
图5-17 设置4行3列表格1的属性
（3）保存网页中表格的属性设置
9
《网页设计与制作任务驱动教程（第3版）》
【任务5-4-2】设置表格1单元格的 背景图像
【任务描述】
（1）设置表格1第1行和第2行单元格的背景图像为
bg01.gif。 （2）设置表格1第1行和第2行单元格的水平对齐方式为 “居中对齐”，垂直对齐方式为“居中”。 （3）设置表格1第1行的行高为35像素，第3行的行高为
<table width="880" border="1" cellspacing="0" cellpadding="0"> <tr> <th scope="col"> </th> </tr>
<tr>
<td> </td> </tr> </table>
（5）保存网页中所插入的表格1。
30像素。
10
《网页设计与制作任务驱动教程（第3版）》
【任务实施】
1．创建文件夹与网页文档0504.html
在站点“单元5”中创建文件夹“task05-4”，
动手绘制家乡美景图
哦，你能让小鸟飞到天上去吗？
请看老师是怎么做的（演示任意形状裁剪工具使用）
思考：被选中的小鸟移到天空后，背景带有颜色，山坡上也出现了一块白色，怎么办？
老师演示：利用吸管选择鸟的背景色，再用油漆桶倒色。这个点在课文中没有详细说出，需要注意。
三、作品展示：
展示学生作品，学生点评，作者小结。
教学过程
一、新课引入：
同学们，美丽山城古往今来，建设家乡人人都想，不分男女和老幼，都把家乡来建设，今天就让我们展开山水重庆的一角，一起来把它描绘得更加美丽。
二、教学过程
1、出示北碚美景图（风景、街道）北碚是一个美丽的花园小城，请大家欣赏别人的一些摄影作品和写生作品。（PPT课件）
这些美景除了摄影和写生，还能够怎样艺术创作出来呢？用我们信息技术学过的知识能够实现吗？
学生和老师共同讨论，发表看法。
2、启动画图软件，打开文件：我的家乡北碚（见素材半成品），画树
同学们，你喜欢这副画吗？（各抒己见，说说喜欢喝不喜欢的原因）
学生观察后发现背景的小山没有颜色，空白一片。
老师：好的，请你给这座光秃的小山在适当的位置添加小树。教师演示：同学们能够请出放大镜工具来协助我们画小树。单击一次放大，单击选项1X，还原
二、教学过程
1、出示北碚美景图（风景、街道）北碚是一个美丽的花园小城，同学们知道北碚的历史吗？（PPT课件）历史见文件夹参考资料
学生和老师共同讨论，发表看法。
2、启动画图软件，打开文件：我的家乡北碚（见素材），画树
同学们，你喜欢这副画吗？（各抒己见，说说喜欢喝不喜欢的原因）
学生观察后发现背景的小山没有颜色，空白一片。
四、结束。
复备
课后反思：
西交大五(下)第13课：制作家乡网站(教案)
第十三课制作家乡网站教学目标：1.能够按照规划的网站结构，制作美丽家乡的网站；2.学会应用网页模版，制作各栏目的网页；3.熟练应用网页编辑技能，进一步对网页进行修改、注释、设置或修改超链接等操作；4.通过守成网站的制作，提高学生动手操作能力，培养学生的自主探究和创新能力。
教学重点：能够按照规划的网站结构，制作美丽家乡的网站。
教学难点：学会应用网页模版，制作各栏目的网页。
课前准备：计算机网络教室、教学课件课时安排：1课时教学过程：一、导入：我们已经对展示家乡的网站做好了规划，这节课，我们就按照自己的规划来制作美丽家乡的网站。
二、新授：1.利用模版制作网页我们的网站由多个页面构成，为了更有效的制作网页，我们可以使用系统提供的模板来制作，更加方便快捷。
学生自学P62，找到合适的模版。
请学生总结方法：①单击“文件”菜单中的“新建”选项；②选择“其他网站模板”；③选择“个人网站”；④选择网站存放的位置，单击“确定”按钮。
应有模板制作网页，有哪些好处？省时省力、板面设计合理。
试一试：哪一个模版更适合你的网页。
想一想，如果模板样式不符合我们的需求，能不能进行调整和修改？2.修改网页标题：请学生讲解并示范修改网页标题的步骤：①选择要编辑的网页文件；②选择标题并双击；③选择“文本”，输入网页标题文本；④在格式栏中设置文字的格式。
学生根据自己的主题对网页标题进行修改。
请学生讲解自己的网页内容，看看有没有需要特别标注的地方？3.添加注释根据需要，我们可以在网页上进行注释。
教师讲解如何进行注释。
①选择要修改的注释内容；②输入新的注释内容，单击“确定”按钮。
编辑页面中，有些栏目中有注释，这些注释在用浏览器打开时是不出现的，只是在编辑时有用，网页中的注释可以进行修改。
4.设置和修改超链接网页的基本内容已经制作完成后，我们就需要对各个页面间进行超链接。
师生一起回顾如何制作和修改超链接：①选择要添加超链接的文字，单击右键；②选择“超链接”选项；③选择“超链接”对象的路径；④选择“超链接”对象，单击“确定按钮。
家乡山水美
家乡山水美我的家乡在大连，这里是一个美丽的地方，这里的春天鸟语花香，风和日丽，天空总是万里无云，花儿柔和地随风摆动，就像在跟我们摆手，小小的树苗在阳光和风的照顾下长的绿油油的，四级常绿的松树也变的更绿了，许多小朋友都喜欢在这个温暖的季节快乐地玩耍，是这个美丽的季节给大地母亲披上了一件华丽的绿衣裳，这个季节是一个每年都让人很难忘的季节！在这个美丽的地方，不只有温暖的春天，还有虽然炎热但充满生机的季节—夏天，这个季节每天太阳都火辣辣的来上班，在这季节里，小朋友们都会在地上欢快的奔跑，阳光照在海面上，大海就变的亮闪闪的，非常美，太阳射出温暖的阳光，它（她）好像在说：（在）这里我们（你们）就是祖国的花朵，我们（你们）就像还没长大的小鸟，等我们（你们）身上的羽毛长的丰满，我们（你们）就张（可以）开翅膀，在自由的天空上飞翔！夏天，一个生机勃勃的季节！在这个美丽的地方，还有一个丰收的季节—秋天，秋天会落下很多见黄色的落叶，大地母亲就像穿上一件金色长袍，在这个季节，小动物们开始准备粮食，准备进入漫长的冬天，这个季节是个丰收的季节，我们的大连被称为苹果之乡，每当我开心的出去玩，就会看到一地的金色落叶，就像铺上了一大块金色的地毯，阵阵秋风吹来，我一下子就感觉心里清清凉凉的，还有，我知道在秋天农民伯伯都会收获各种各样的果实，所以每年秋天我都很开心！在这个美丽的地方，还有最后一个季节—冬天，每到冬天，一片片雪花慢慢的落下来，就像一只只亮闪闪的眼睛，大地母亲穿上了一件美丽的银色晚礼服，房屋下结成的冰凌真是美极了！在这个季节有很多好玩的游戏，比如堆雪人打雪仗，。
冬天也是一个充满笑声的季节，冬天还有很多在其他季节玩不了的游戏，例如：滑冰，滑雪。
冬天虽然没有像春天一样多姿多彩的花朵，但冬天拥有美丽的梅花和坚强的松树，每年我都期盼着冬天的到来！时间过的真快呀，转眼间一年就过去了，马上就要过年新年了，我走在大街上，书上挂满了彩灯，一闪一闪的，就像一只只小小的眼睛，该回奶奶家了，奶奶家布置的真美啊，到了晚上，爸爸提着灯笼带我出去放鞭炮，当烟花飞上天时，它好像在跟我们说：新年快乐，新年快乐！我在回家的路上越想越开心，回到家后，就上床睡了，我做了一个梦，梦见有好多好多小朋友和我一起游戏，可开心了！今天（过）真的很有意义！大连，这个美丽的地方，无论春天的雨再大，春天都是温暖的；无论夏天的太阳多炎热，夏天都是充满活力的；无论秋天的风多大，秋天都是欢乐的；无论冬天多么寒冷，冬天都是充满生机的；一年四季都拥有自己的魅力，—春天给大地妈妈带来的是美丽的绿衣，大地妈妈披上它后，变的美丽；夏天给大地妈妈带来墨绿的短裙，大地妈妈穿上它后，变的可爱俏皮；秋天给大地妈妈带来的是金色的长袍，大地妈妈披上它后，显得优雅极了！；冬天给大地妈妈带来的是银色的晚礼服，大地妈妈穿上它后，显得高贵美丽！瞧，这就是大连的魅力！。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
上一页
下一页
退出
任务一 添加热点和锚记链接 景区介绍” 2．为“景区介绍”页面添加锚记 将光标放到表格第一行中的文本“金华山景区”前，单击 “插入”栏“常用”类别中的“命名锚记”按钮，或选择菜单 栏“插入”菜单下的“命名锚记”选项 ,弹出如下图所示的对 话框。输入锚记名称“jd1”，单击“确定”按钮，在插入点处 出现一个锚记图标。
当鼠标指向景 区地图的一个景区 时，会在光标下方 显示对应景区的名 称，同时在页面的 右下部显示该景区 的风景图像及简单 介绍。当鼠标单击 一个景区时，会另 外打开一个“景区 介绍”页面，如下 图所示。 整个页面 分为左侧、右 上和右下三部 分，左侧放置 景区地图图像， 右上部放置景 区名称，右下 部显示景区图 像及景区简介。
退出
任务三 制作页面动态效果 自己动手： 自己动手： 1．为“金华山景区”热点添加“显示-隐藏层”行 为 A.为热点添加行为 什么叫行为？ 在“文件”面板中双击“travel.html”文件，打开“家乡山 水”页面，勾选“窗口”菜单中的“行为”选项，或者按下键 盘的Shift+F4键打开“行为”面板。 选中景区地图“map.jpg”中覆盖“金华山景区”的热点， 单击“行为”面板上的“添加行为”按钮，在下拉菜单中选择 “显示-隐藏层”选项，弹出“显示-隐藏层”对话框，设置层 “Layer2”（“金华山景区”图像所在层）和层“Layer8”（显 示文本的层）为“显示”，其他层全部设置为“隐藏”，单击 “确定”按钮，如下图所示。
目录
上一页
下一页
退出
任务一 添加热点和锚记链接 3．为“家乡山水”页面的景区地图添加热点 为 家乡山水” 使用多边形热点工具为图中“金华山景区”添加热点。然 后用同样的方法为其他景区添加热点。
绘制过 程中，相邻 的两个顶点 会自动连接， 起始和结束 两个顶点会 自动闭合。
3．什么是热 点？ 4．热点工具 有哪些？
勾选此处可 以防止绘制 层的过程中， 层与层重叠。
单击层名可选 中层， 双击可以修改 层的名称。
目录
上一页
下一页
退出
任务二 添加和使用层 2．设置层的属性 在“层”面板中，单击“Layer8”选中该层，“属性”面 板如下图所示 ： 2．属性面板各项的含义是什么？
目录
上一页
下一页
退出
任务二 添加和使用层 3．在层中添加内容 在“层”面板中选中层“Layer1”，将光标放入层中，用 “插入”菜单插入“D:\mysite\travel\tlimages”文件夹中的图像 “ysp.jpg”，用于显示“家乡山水”页面右下部的初始图像。 用同样的方法为其他层添加内容 注意：要在层中添加内容，一定先要将光标放入该层中。
热点区域 金华山景区 龙门天关景区 白草畔景区 鱼谷洞景区 百里峡景区 拒马河景区 锚记链接路径 “viewpiont.html#jd1” “viewpiont.html#jd2” “viewpiont.html#jd3” “viewpiont.html#jd4” “viewpiont.html#jd5” “viewpiont.html#jd6” 替换文本 金华山景区 龙门天关景区 白草畔景区 鱼谷洞景区 百里峡景区 拒马河景区
目录
上一页
下一页
退出
任务三 制作页面动态效果 任务小结 1．掌握为热点添加“显示-隐藏层”行为。 2．掌握为热点添加“显示层文本”行为。
目录
上一页
下一页
退出
任务一 添加热点和锚记链接 相关知识： 相关知识： 1．锚记是在文档中设置的标记，这些标记通常放在文档 的特定主题处或顶部。使用锚记分为两步，第一步添加锚记， 第二步添加到该锚记的链接，这个链接可以快速将浏览者带到 特定位置。 2．锚记名称通常以英文字母起始，区分大小写，不能含 有空格，也不能含有特殊字符。 如果锚记创建后，在网页制作窗口中却看不到锚记图标， 选择菜单栏“查看”菜单里的“可视化助理”选项，勾选“不 可见元素”即可。 锚记图标在预览时不显示。
目录
上一页
下一页
退出
任务三 制作页面动态效果
选择层 “Layer 8”
输入对该景区的简单介绍
目录
上一页
下一页
退出
任务三 制作页面动态效果 B.在“行为”面板的事件栏中，选择“onMouseOver”，按 下F12预览页面，效果如下图所示。
左边选中 景区，右 边显示相 应介绍。
目录
上一页
下一页
退出
1．什么是锚记？ 2．锚记如何命名？
目录
上一页
下一页
退出
任务一 添加热点和锚记链接
根据下表所示对应关系，使用同样方法，为“景区介绍” 页面中其他5个景区添加锚记。
锚记名称 “jd1” “jd2” “jd3” “jd4” “jd5” “jd6” 锚记位置 “金华山景区”前 “龙门天关景区”前 “白草畔景区”前 “鱼谷洞景区”前 “百里峡景区”前 “拒马河景区”前
任务一 添加热点和锚记链接 3．热点是对图像内一个区域的几何描述，一般每个热点 都会链接到不同的网页、URL、锚记、图像等。
4．热点工具介绍：
矩形热点 工具 指针热点 工具 椭圆形热点 工具 多边形热点 工具
“指针热点工具”：选中此工具可以拖动热点改变位置，还可以拖动热 指针热点工具” 点的顶点来改变其形状或大小。 矩形热点工具” “矩形热点工具”：选中此工具后在图像上拖动鼠标可添加矩形热点， 按住Shift键拖动可添加正方形热点。 椭圆形热点工具” “椭圆形热点工具”：选中此工具后在图像上拖动鼠标可添加圆形热点。 此工具不能添加椭圆形热点。 多边形热点工具” “多边形热点工具”：选中此工具后可以在图像上通过鼠标点选（用鼠 标连续单击图像中不同位置）添加多边形热点。
目录
上一页
下一页
退出
任务二 添加和使用层 自己动手： 自己动手： 1．插入层 ． 1．插入层的另一种方法和层的操作。
在“文件”面板中双击“travel.html”文件，打开“家乡山水”网页。 将光标放到表格“table3”的第一行，选择菜单栏“插入”→“布局对 象”→“层”选项，插入一个层。使用同样方法，在表格“table3”的第 一行中再插入6个层，分别命名为“Layer2”、“Layer3”、“Layer4”、 “Layer5”、“Layer6”和“Layer7”，然后在第二行中插入层 “Layer8”。“层面板”如下图：
Dreamweaver网页制作 网页制作
第五单元 制作“家乡山水”网 家乡山水” 页
制作“家乡山水” 第五单元 制作“家乡山水”网页
任务一 添加热点和锚记链接 任务二 添加和使用层 任务三 制作页面动态效果
目录
上一页
下一页
退出
第五单元 制作“家乡山水”网页 本单元将通过“添加热点与锚记链接”、“添加和使用层” 以及“制作页面动态效果”几个任务来完成“家乡山水”页面 的制作。 “家乡山水”页面的效果如下图所示：
常用事件 有哪些？
常用行为 有哪些？
目录
上一页
下一页
退出
任务三 制作页面动态效果 至此，为“金华山景区”热点添加了一个行为，此时预览 “ 家 乡 山 水 ” 页 面 ， 鼠 标 移上 “ 金 华 山 景 区 ” 热 点 时 ，层 “Layer2”和“Layer8”显示，其他层都隐藏，右侧显示的是 “金华山景区”图像和简介。 2．为“金华山景区”热点添加“设置层文本”行为 A.选中“金华山景区”热点，在“行为”面板中，选择 “添加行为”按钮，在弹出的下拉菜单中选择菜单栏“设置文 本”→“设置层文本”选项，弹出“设置层文本”对话框，在 “层”中选择层“Layer8”，在“新建HTML”中输入对该景区的 简单介绍，然后单击“确定”按钮。效果如下图所示：
目录 上一页 下一页 退出
任务三 制作页面动态效果
层“Layer2” 和层“Layer8” 为“显示”，其他层全部设置为“隐藏”
目录
上一页
下一页
退出
任务三 制作页面动态效果 B.为行为设置事件 在“行为”面板的事件栏中，选择该行为的事件为 “onMouseOver”，效果如下图所示：
行为面板介绍。
目录
上一页
下一页
退出
第五单元 制作“家乡山水”网页 景区介绍
目录
上一页
下一页
退出
第五单元 制作“家乡山水”网页
任务一 添加热点与锚记链接
任务描述： 任务描述：为景区地图中的各个景区与“景区介绍”页面 中相关内容建立链接关系。
任务分析： 任务分析：建立好本单元的目录结构，在“景区介绍” 页面中为每个景区的介绍内容添加锚记，之后在景区地图上按 景区绘制热点，然后为每个热点添加锚记链接，链接到“景区 介绍”页面的对应位置。
目录
上一页
下一页
退出
任务一 添加热点和锚记链接 自己动手 1．建立本栏目目录结构 建立本栏目目录结构
所在路径 文件/文件夹的名字 travel.html D:\mysite\travel viewpoint.html <tlimages> 说明 “家乡山水”页面 “景区介绍”页面 页面所需图像
目录
任务一 添加热点和锚记链接 5．热点“属性”面板：
“链接”：用于设置热点的链接路径。添加锚记链接时， 如果链接的锚记在本页面内，输入“#”+“锚记名称”；如果不 在本页面内，输入“链接路径”+“#”+“锚记名称”。 “目标”下拉列表中的“_blank”：表示在新的浏览器窗 口中打开链接的文档，同时保持当前浏览器窗口不变。 “替换”：用于设置当鼠标指向该热区时显示的“替换文 本”。
目录
上一页
下一页
退出
任务二 添加和使用层
4．设置层的显示属性
单击切换全部层 是否可见。 眼睛闭合表示层 不可见，睁开表 示层可见。 单击切换该层是 否可见。