网站的初步设计与制作
教学内容分析
本课内容选自必修第六章和选修第四章，这两个章节内容都有关于网页制作，所以将两章节内容结合在一起讲。建立一个网站的一般过程也就是信息集成的一般过程，所以设计网站的时候也套用这样的过程，学生从中则可以温故而知新。
教学对象分析
通过前面学习，学生已经熟练掌握信息获取和加工的基本方法，部分学生已经考虑或者已经开始信息集成的操作。将信息集成以网站的形式来表现，是大多数学生都有所了解并十分向往的。大多数学生对frontpage的基本操作有所了解（初中已经学过），但对设计网站的方法、过程等都是从未接触过的。所以本课要站在全局的髙度来把握信息集成的一般过程, 体验网站的设计与制作的一般过程。
一、教学目标
（-）知识与技能：
1、了解网站规划设计的一般方法；
2、掌握一种基于网络进行信息集成的工具（本章以Frontpage 2000为例）的基础操作。（二）过程与方法：
1、熟悉信息集成的一般过程（选题立意、设计规划、开发制作和评估测试）；
2、能够按照信息集成的一般过程，通过独立或合作的方式完成一个信息集成的作品。（三）情感态度与价值观：
1、利用精心的设计和制作，使学生感受数字化的美：
2、通过主题鲜明的作品，培养学生正确的人生价值观。
3、通过活动培养学生人际交往和团队协作等方而的能力。
二、教学匝点与难点
1、重点：能够利用表格泄位网页，并能熟练的给网页添加网页元素。
2、难点：熟练运用复杂表格来设计网页布局：把自己的审美观融合到网页设计中去。
三、教学方法：任务驱动，小组合作，自主探究
四、教学过程
（一）、作品导入
在因特网这个信息的海洋当中，我们经常会被一些内容丰富，创意新颖、设计独特的网站所吸引，那今天我们首先就一起来欣赏几个网络作品。
看了这些网络作品，你们觉得它做的怎么样呢？
好在哪里呢？
（欣赏网站，分析网站亮点。可以从内容、栏目、颜色、画而等进行分析。）
（广播）那么我们大家想不想自己也来做个网站呢？这一节课我们就一起来学习建立主题网站一一网站初步设计与制作。
（二）、分组讨论
活动一、根据课前分组，对学生完成的作业，讨论网站栏目设计的是否合理？
栏目安排注意以下几个方面：
1、要紧扣主题，尽可能删除与主题无关的栏目。
2、尽可能将网站最有吸引力的内容列在栏目中。
3、尽可能方便访问者的浏览和查询。
（三）、师生交流
1、版而设计
版而结构是指将不同元素巧妙排列的方式，合理的版面结构能够让浏览者淸楚、容易地理解作品传达的信息。布局就是以最适合浏览的方式将图片和文字排放在页而的不同位宜。下面我们一起来看一下常见的网页布局有哪几种？
常见的页而布局样式：
“厂”字型：页面顶部为主菜单、横条网站标志和广告条，下方左而为主菜单，右而显示内容的布局。
“口”字型：页面一般上下各有一个广告条，左而是主菜单，右面放友情连接等，中间是主要内容。
自由式：又称POP布局，页而布局像一张宣传海报，以一张精美图片作为页面的设计中心, 菜单栏目自由摆放。
在这些网页布局中，你最喜欢哪种？信息量最大的是哪个样式？下面我们结合一个具体的案例介绍一下版面怎么来布局的。
结合演示文稿，分別给学生展示三种页面布局的网页。并通过对网页布局的简化，展示简化草图。
2、演示新建站点解释三个概念：
网站：因特网上具有相似性质、共同内容的一组信息资源。
网页：用HTML语言写成的文件，它是组成网站的最基本的元素之一。
主页：通常是表示访问某个网站时岀现的第一个页而。
3、演示表格布局主页
（四）、自主探究
任务一、新建一个站点，站点保存于D盘，名字是网站的主题。并通过表格布局主题网站的首页。
活动二：每组选择一个操作，自主探究下面的各项操作，并让学生演示。
1、网页中文字信息的插入
2、网页中图像信息的插入：
3、网页背景的设置（背景颜色或背景图片）：
4、网页中背景音乐的插入：
（五）、动手实践
任务二、根据你所选的主题，结合前而内容与栏目的设汁，制作网站主页。最后保存网页，将作品以作业方式提交。（提交整个文件夹）
拓展任务：通过表格属性美化表格，设巻单元格及表格的背景颜色或图片。
（六）、作品分享
评讲一两个学生作品，请学生评析作品的优缺点，教师做总评。
五、课堂总结
这堂课，我们站在全局的高度来把握信息集成的一般过程，体验了网站的设讣与制作，这个过程是我们以后处理问题的一个基本方法和思路。今天我们只是完成了网站作品的首页，在接下来的课程中我们将继续完善我们的作品，完成整个网站的制作。
Dreamweaver代码div+css Dreamweaver代码 基本结构标签: ,表示该文件为HTML文件
,包含文件的标题,使用的脚本,样式定义等,分段标志 ,采用黑体字 ,采用斜体字
属性是用来修饰标志的,属性放在开始标志内. 例:属性bgcolor="BLACK"表示背景色为黑色. 引用属性的例子: 表格标识的开始和结束. 属性: cellpadding=数值单位是像素,定义表元内距 cellspacing=数值单位是像素,定义表元间距 border=数值单位是像素,定义表格边框宽度 width=数值单位是像素或窗口百分比,定义表格宽度 background=图片链接地址,定义表格背景图
表格中一个表格行的开始和结束; 表格中行内一个单元格的开始和结束 属性:
网页设计策划书 个人主页设计的策划 前言：通过创建个人主页站点，展示大学生生活，同时和一些有相同爱好的朋友分享，交流生活，学习心得，让社会了解大学生生活是什么想·的。 一．市场分析 目前市场上个人主页种类繁多，可以分为初级和高级，初级例如一些互联网企业为用户提供的博客，空间等，注册id就能使用，但是受到一定限制；高
级的就是自己建站，可以自由管理。个人主页代表着现代人一种全新的生活和工作方式，人们通过这些个人网页来展示自己，和别人分享，交流。当却没有一个个人网站有如此的特点——可以让人思考大学生的生活 二．目的及功能定位 建立这个个人网页的最主要目的就是建立一个展示自己的作品和设计想法， 同时和其他朋友进行设计交流的平台。除此之外，这个主页还应该能够实时发布 自己的生活，学习状态，提供各种设计佳作供大家欣赏。让社会了解大学
生生活 三．网页技术方案 1.由于硬件条件，本网站决定租用虚拟主机，利用一些专业的网站公司提供 的网站平台来发布自己的网页。 2.这个网站自己进行开发，首先进行自己的网页风格和内容策划，然后利用 一些平面软件，动画软件和办公软件来建设源素材，最后利用dreamweaver 来进行最后的网页设计。 四．网页的内容及实现方式 这个网页内容包含首页动画，首页，分级网页三部分。首页包括“学校介
绍”， “我的作品”“专业介绍”“作者介绍”等分别连接到二级和三级网页，二级网页又连接到三级网页，在各个网页间可以任意切换，进而实现增强网页的可浏览型。 五．网页设计 网站名称：只是一个大三的。网页风格：用宇宙为背景，用太阳系的行星作为导航条 网页制作过程：首先，构思网页的风格，布局和内容进行构思，设计网页的 结构，然后进行各种软件进行素材制作，最后在dreamweaver上进行设计。
一、HTML元素的语义分类 1.结构语义元素 div 语义：Division（分隔）。在文档中定义一块区域，即包含框，IE认为它是一个容器 span 语义：Span（范围）。在文本行中定义一个区域，即包含框 ol 语义：Ordered List（排序列表）。根据一定的排序进行列表 ul 语义：Unordered List（不排序列表）。没有排序的列表 li 语义：List Item（列表项目）。每条列表项 dl 语义：Definition List（定义列表）。以定义的方式进行列表 dt 语义：Definition Term（定义术语）。定义列表中的词条 dd 语义：Definition Description（定义描述）。对定义的词条进行解释 del 语义：Deleted Text（删除的文本）。定义删除的文本 ins 语义：Inserted Text（插入的文本）。定义插入的文本 h1~.h6 语义：Header 1 to Header 6（标题1到标题6）。定义不同级别的标题 p 语义：Paragraph（段落）。定义段落结构 hr 语义：Horizontal Rule（水平尺）。定义水平线 2.内容语义元素 a 语义：Anchor（定义锚）。锚即定位的意思，换句话说就是超链接，即在多页间定位 abbr 语义：Abbreviation（缩写词）。定义缩写词 acronym 语义：Acronym（取首字母的缩写词）。定义取首字母的缩写词address 语义：Address（地址）。定义地址 dfn 语义：Defines a Definition Term（定义定义条目） kbd 语义：Keyboard Text（键盘文本）。定义键盘键 samp 语义：Sample（示例）。定义样本 var 语义：Variable（变量）。定义变量 tt 语义：Teletype Text（打印机文本）。定义打印机字体
安徽省巢湖学院计算机与信息工程学院 课程设计报告 课程名称：网页设计（https://www.doczj.com/doc/1016700804.html,） 课题名称： 专业班级： 同组姓名： 同组学号： 联系方式： 指导教师：张勇
摘要 随着网络的发展，很多企事业单位和广大普通网民对建立自己的网站的需求越来越强烈。网站是互联网上交流的平台，建立网站已经成为很多单位和网民的必修课。20世纪末，随着计算机科学的发展，数据库技术在Internet中的应用越来越广泛，为广大网络用户提供了更加周到和人性化的服务。个性化已逐渐成为当今Web应用的潮流。个人网站是当今网上比较流行的站点。本文以个人网站为目标,运用ASP技术实现.对网站的和策划和布局进行了实质考察。我所做的个人网站主要是学习型网站，重点内容是与这次的毕业设计有关——网站的制作。 关键词：个人网站；ASP；Web 译文：Along with the network development, the very many enterprises and institutions and the general ordinary web cams to establish own website the demand to be more and more intense. The website is a platform which on the Internet exchanges, established the website already to become very many units and web cam's required course. 20 century's ends, along with the computer science development, the data bank technology are more and more widespread in the Internet application, has provided thorougher and the user friendly service for the general network user. The personalization has become now the Web application tidal current gradually. Individual website is now on the net the quite popular stand. This article take individual website as a goal,Using ASP technology realization.Have carried on the substantive inspection to the website and the plan and the layout. I do individual website mainly is the study website, the key content is and this time graduation project related ——website manufacture.
相反 总类（所有HTML文件都有的） -------------------------------------------------------------------------------- 文件类型（放在档案的开头与结尾） 文件主题（显示原始码之用）
样本 表示一段用户应该对其没有什么其他解释的文本。要从正常的上下文抽取这些字符时，通常要用到这个标签。 并不经常使用，只在要从正常上下文中将某些短字符序列提取出来，对其加以强调，才使用这个标签 键盘输入 变数 定义 （有些浏览器不提供） 地址
3.0 大字 3.0 小字 与外观相关的标签（作者自订的表现方式） -------------------------------------------------------------------------------- 加粗 斜体 3.0 底线（尚有些浏览器不提供） 3.0 删除线《网页设计与制作》课程简介 课程名称：网页设计与制作 课程代码：02038 适用专业：初等教育（计算机与信息技术方向） 课程性质：专业核心课程、必修课、专业技能课 学分：3 学分 计划学时：72学时（理论36学时，实训36学时） 一、前言 1. 课程性质 本课程是初等教育计算机与信息技术专业的一门专业技能课程，培养学生网页设计与制作能力，适应初等教育对信息技术教师的人才基本要求，同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位。 本课程的先修课程是《计算机应用基础》，后续课程是《https://www.doczj.com/doc/1016700804.html,程序设计》。在完成《计算机应用基础》课程学习后，学生掌握了计算机基本知识和原理，学会了一些应用软件和工具软件的使用，进而学习《网页设计与制作》这门课程不会感到困难。在以后学生还将学习《https://www.doczj.com/doc/1016700804.html,程序设计》课程，能设计和制作动态网页。 2. 课程基本理念 初等教育计算机与信息技术专业培养的对象主要是小学信息技术教师，今后从事小学信息技术教学和学校信息化教育教学的管理者及维护者，建设网站和网页是信息技术教师应掌握的基本技能。课程要理论与实践相结合，培养学生动手能力，能胜任今后小学信息技术教师的工作任务。同时满足社会对计算机专业人才的需求，适合从事网站建设相关的岗位群。 3. 课程设计思路 根据初等教育计算机与信息技术专业人才培养方案，《网页设计与制作》是重要的专业技能课程，是作为小学信息技术教师基本技能训练与考核的项目之一。课程以工作任务来组织内容，以案例驱动贯穿教学过程。由浅入深，最后完成主题网站的开发项目。课程教学中以Dreamweaver的使用为主线，要重视HTML
网页设计策划书 第一篇：网页设计策划书 个人主页设计的策划 前言：通过创建个人主页站点，展示大学生生活，同时和一些有相同爱好的朋友分享，交流生活，学习心得，让社会了解大学生生活是什么想·的。 一．市场分析 目前市场上个人主页种类繁多，可以分为初级和高级，初级例如一些互联网企业为用户提供的博客，空间等，注册id就能使用，但是受到一定限制；高级的就是自己建站，可以自由管理。个人主页代表着现代人一种全新的生活和工作方式，人们通过这些个人网页来展示自己，和别人分享，交流。当却没有一个个人网站有如此的特点——可以让人思考大学生的生活 二．目的及功能定位
建立这个个人网页的最主要目的就是建立一个展示自己的作品和设计想法， 同时和其他朋友进行设计交流的平台。除此之外，这个主页还应该能够实时发布 自己的生活，学习状态，提供各种设计佳作供大家欣赏。让社会了解大学生生活 三．网页技术方案 1.由于硬件条件，本网站决定租用虚拟主机，利用一些专业的网站公司提供 的网站平台来发布自己的网页。 2.这个网站自己进行开发，首先进行自己的网页风格和内容策划，然后利用 一些平面软件，动画软件和办公软件来建设源素材，最后利用dreamweaver来进行最后的网页设计。 四．网页的内容及实现方式
这个网页内容包含首页动画，首页，分级网页三部分。首页包括“学校介绍”， “我的作品”“专业介绍”“作者介绍”等分别连接到二级和三级网页，二级网页又连接到三级网页，在各个网页间可以任意切换，进而实现增强网页的可浏览型。 五．网页设计 网站名称：只是一个大三的。网页风格：用宇宙为背景，用太阳系的行星作为导航条 网页制作过程：首先，构思网页的风格，布局和内容进行构思，设计网页的 结构，然后进行各种软件进行素材制作，最后在dreamweaver上进行设计。 网页设计：首先在dreamweaver上建立个人站点，进行站点文件分类。再 利用dreamweaver里面的css+div布局做出网页的大致结构，然后
网页设计与制作 一、HTML 基本语言： 1.HTML 基本语法：（如图） ....:表示HTML 文档的开始和结束
…:表示HTML 文档的头部。最常用的标记是地址
大字 小字 与外观相关的标签（作者自订的表现方式） 加粗 斜体 底线 （尚有些浏览器不提供） 删除线2.2.3 字型设置标记 功能：设置文字的风格，如黑体、斜体、带下划线等，这是一组标记，它们可以单独使用，也可以混合使用产生复合修饰效果。常用的标记有以下一些： … ：文字以粗体显示。 … ：文字显示为斜体。 … ：显示下划线。 … ：删除线。 … ：使文字大小相对于前面的文字增大一级。 … ：使文字大小相对于前面的文字减小一级。 … ：使文字成为前一个字符的上标。 …：使文字成为前一个字符的下标。 ：使文字显示为闪烁效果。 …：以等宽体显示西文字符。 …：输出引用方式的字体，通常是斜体。 …：强调文字，通常用斜体加黑体。 …：特别强调的文字，通常也是斜体加黑体。 注：有些标记的效果必须在动态环境下才能显示，例如
盛年不重来，一日难再晨。及时宜自勉，岁月不待人。 设计说明书 需求分析 目标定位 a、制作这个网站的目的是为了方便我们学院的新生与老生能快速浏览的我们学校的基本 情况，了解我们学校所有好玩，有趣的事情。 b、本网站的主要职能是实时为新生提供部分新的资讯。 c、本网站所面向的用户是所有进入我校的同学以及想要了解我们学校的用户。 用户分析 a、使用本网站的用户主要是想要了解我们学校的所有信息，并且能够为他们提供所需的生 活所需的信息。 b、他们最想本网站为他们提供校内外的所有资讯，包括饮食，住宿，景点旅游等。 c、本网站制作内容架构清晰，避免过多的文字介绍造成用户过多阅读的麻烦。 d、用户可以每天浏览我们为其提供的实时热点以及校内外最新的资讯，比如：校园通知、 饭堂价格等。 市场前景 a、本网站的市场需求在于为本校师生以及想要了解我校的用户提供最便捷，最新的信息。 b、基于前面的分析，决定了本网站的设计风格要简明、清晰；主题围绕着学生所需而开展。
内容策划 a、本往网站主要经营的内容是：校园文化、校园资讯、美食住宿、周边景点等主题。 b、基于以上主题，其中重点制作的是校园文化和美食住宿；而辅助的是校园资讯等主题。对于网页如此划分的目的是，使用本网站的用户都是想要了解我们学校于他们息息相关的事情，无论是新生、老生还是其他用户，都想知道我们学校有哪些特色的文化和美食。文化可以增进他们知道我们学校的最近的文化活动生活。而美食，则能吸引更多的学生来了解我们学校的吃货，这对于新进校园的新生有着极强引导作用。 界面设计 a、对于每个版块的设计都有着其不同的元素，首页，主要突出网页围绕的主题设计导航， 并且使用简单明了的文字对学院做出说明；而二级页面，则分为六个版块，每个版块都有着不同的设计元素来突出其主题；对于三级页面，由于其划分表达内容上得较为详细，所以社体元素较为单调以图文介绍为主。 b、全版设计所使用的元素极为简单，主要以框架、线条、设计，在此基础之上配合色彩、 阴影、重叠、浮动、定位等的元素来协调画面风格。 c、对于次级页面的导航栏设计，是浮动置于页面的底部，这样设计的效果是让用户浏览简 洁方便，而且导航栏不会占据页面的内容。
1.结构性定义 文件类型（放在档案的开头与结尾） 文件主题
加粗 斜体 底线（尚有些浏览器不提供） 删除线（尚有些浏览器不提供） 下标 上标 打字机体（用单空格字型显示） 预定格式