网页设计与制作项目五 层的布局

《网页设计与制作》课程标准【课程名称】《网页设计与制作》【适用专业】中等职业学校计算机应用专业办公自动化技术1.前言1.1课程性质本课程是中等职业学校计算机应用专业的一门专业核心课程。

通过本课程的学习, 要求学生掌握网页设计的基本概念, 学会使用常用的网页设计工具和常用脚本语言, 能够设计制作常见的静态和动态网页, 具备网站的建立和维护能力。

同时通过本课程的学习, 培养学生的综合职业能力、创新精神和良好的职业道德。

1.2设计思路本课程的设计“以能力为本位、以职业实践为主线、以项目课程为主体”, 整个《网页设计与制作》课程共分为四大模块, 它们分别是: 网页基础知识、DreamWeaver的使用、HTML语言、ASP动态网页设计。

教学时各模块既有独立性, 又有关联性。

独立性是指各模块设计案例、组织教学、突出重点时应该相互独立, 学生应该一个模块一个模块地掌握其知识点；关联性是指各模块间存在相互关系, 在重难点设计上应该加以配合, 如HTML语言模块着重基本代码的熟记和编写, 对于较难编写代码的“框架”、“层”、“数据链接”等内容则放到DreamWeaver的使用模块中重点介绍。

《网页设计与制作》课程与计算机基础、Flash动画、PhotoShop图像处理、计算机网络技术、数据库等课程互相联系、互相补充。

本课程作为计算机专业的一门主干专业课程, 一般在2.3年级开设, 此时学生已经具备一定的计算机基础知识和动手能力, 能较快地掌握网页设计的各种知识, 并运用所学知识做出具有特色的网站, 使学生能够得到全面的培养, 成为社会所需专用人才。

2. 课程目标总目标：使学生掌握常用的网页设计工具, 熟练运用多种网页设计技术, 具备Web网页设计、制作及站点管理的基本知识和基本技能, 学生能够独立制作中小型的网站。

1.了解WWW、HTTP、HTML、CSS的定义、概念和作用；2.理解服务器、客户端、浏览器的概念和作用； 3.理解HTML语言中的各种文本格式、字符格式、段落设置、列表、标记的作用；4.熟练操作DreamWeaver；5.理解CSS样式表的作用和意义；6.深入理解HTML语言的各种功能和应用；7.深入理解表格、框架、表单的作用；8.深入理解层的作用；9.初步了解面向对象程序设计思想。

课程教案项目效果【任务一】布局主页 index.html——表格的基本应用所谓表格（Table）就是由一个或多个单元格构成的集合，表格中横向的多个单元格称为行（在XHTML语言中以<tr>标签开始，</tr>标签结束），垂直的多个单元格称为列（以<td>标签开始，</td>标签结束），如图5—1所示。

行与列的交叉区域称为单元格，网页中的元素就放置在这些单元格中。

（一）插入表格Dreamweaver CS3提供了非常完善的表格编辑功能，首先介绍如何在网页文档中插入表格。

步骤 1 首先在文档页面上要插入表格的位置单击，以确定插入点位置。

步骤 2 单击“常用”插入栏中的“表格”按钮，打开“表格”对话框，设置各项参数后，单击“确定”按钮，即可插入表格，如图所示。

下面简单介绍一下“表格”对话框中几个重要选项的意义。

●表格宽度（Width）：设置表格宽度值，否则，其宽度将随其中的内容而改变。

●在Dreamweaver中，最常使用的单位是像素和百分比。

像素使用0或大于0的整数表示；百分比是相对于浏览器而言的，使用 0 或百分比表示。

●边框粗细（Border）：是指整个表格边框的粗细，标准单位是像素。

整个表格外部的边框叫外边框，表格内部单元格周围的边框叫内边框。

●单元格边距（Cell padding）：也叫单元格填充，是指单元格内部的文本或图像与单元格边框之间的距离，标准单位是像素。

●单元格间距（Cell spacing）：是指相邻单元格之间的距离，标准单位是像素。

（二）选择表格和单元格在Dreamweaver中选择表格的方法非常简单，只需用鼠标单击表格边框线即可。

当表格外框显示为黑色粗实线时，就表示该表格被选中，另外，还可以通过“标签选择器”选择表格。

具体做法是：在表格内部任意处单击鼠标，然后在“标签选择器”中单击对应的“<table>”标签，该表格便处于选中状态。

浅谈网页设计与制作中的页面布局作者：代娟娟来源：《职业·下旬》2017年第01期当今社会，互联网的发展日新月异，网页设计已经成为热门领域，理所当然网页设计与制作成为大中专院校计算机专业的一门必修课。

网页设计中，页面布局是第一步，也是非常重要的内容之一，是制作网页的最基本的技能，因此学会网页的页面布局是重中之重。

下面简单介绍两种常用的网页页面布局的方法及两种方法的优缺点的比较。

一、利用表格布局网页表格是网页设计与制作的一个重要的组成部分，是最常见的网页布局元素之一。

在表格布局方面，通过设置表格及单元格的属性，对页面中的元素进行准确定位。

下面以笔者所在学校学生上课时做的网页“学院网站”为例来说明表格布局网页的步骤。

第一，选择[插入]菜单栏中[表格]命令来插入需要的表格。

并对表格的参数进行设置。

这里需要设置参数为“5行1列”，并在[属性]面板中设置对齐方式为“居中对齐”。

第二，用和第一步相同的方法在第一行嵌入一个l行2列的表格，在第二行嵌入一个l行8列的表格。

第三，在第一行的嵌入表格中插入站点文件夹“images”中的图片。

然后分别在第二行、第三行表格中插入图片。

第四，在第四行嵌入一个1行6列的表格，在嵌入表格中分别插入图片。

第五，在第五行插入文字：关于我们l联系我们I常见问题I站点地图I隐私策略I用户协议I法律声明l诚聘英才I友情链接。

并设置颜色为：#C C C C C C。

第六，最后设置所有表格的边框粗细为“0”。

第七，按下F12键，保存网页文件，同时打开浏览器查看网页内容。

利用表格进行网页页面布局，可以对网页元素进行准确定位，可以使布局更加合理。

灵活地使用表格的背景、框线等属性可以使网页更加美观。

二、利用框架布局页面1.框架的概念框架是把浏览器窗口分成若干个区域，每个区域可以显示不同的网页文件。

每个框架都是浏览器窗口中的一个独立区域，在这个区域中可以显示一个单独的网页而不影响其他区域中的显示内容。

邵阳学院课程实验报告课程名称：网页设计系别：专业：班级：学号：姓名：目录一网页设计与制作的版面布局 .................................1网页的布局结构 ...................................................................2网页的布局设计 ................................................................... 二网页的风格的设计与制作................................... 三网页的图像的制作方法 ....................................... 四个人网页的设计与制作方法 ................................. 五心得体会.........................................................个人网页设计一、网页设计与制作的版面布局在考虑个人网页的主要版面，我们选择的是“三层式”布局：页面上部是网站的标题和导航栏，中间是图片，下面是友情连接1、网页的布局结构从上图中可以看出，网页的整体布局结构划分为四行（从上到下），第一行来制作logo,第二行制作导航，第三行制作内容，第四行制作版权信息。

在这个基础上，可以对网页布局进行更细致的拆分，如果说前面的拆分是用来制作网页的大框架，那么接下来拆分的就是内容区域了，这里分析的方法和前面是完全一样的。

2、网页的布局设计网页的布局设计，就是指网页中图像和文字之间的位置关系，简单来说也可以称之为网页排版。

网页布局设计最重要的目的就是传达信息。

一个并不能阅读的网页只能变成一个无用的链接。

分割、组织和传达信息并且使网页易于阅读、界面具有亲和力和可用性是网页设计师应有的职责，只有这样，浏览者才有更好的机会找出吸引他的东西。

Web网站界面设计规范的五大层次最近由于有很多的新网站要去策划设计，所以看了大量的关于网站策划、交互设计和用户体验的书籍。

使我也系统地了解一些产品设计的相关理论及方法，深受启发。

这里我将结合WEB设计的精华，再加上自己以往积累的经验，总结一下Web网站的设计流程。

今天我给大家分享的是以用户为中心的WEB设计的五个层次，即：战略层、范围层、结构层、框架层和表现层。

关于这五个层面，马海祥的个人理解是：这五个层面适合大部分的软件开发项目。

做任何一个产品，产品的战略，产品规格，范围，优先级，需求分析也就是交互设计缺一不可。

对没有界面的产品来说，把这么多工作认真的做完，产品的设计工作也就基本完工了。

如果是有界面的产品，再需要做的工作就是界面设计和视觉设计了。

这五个层间也恰恰就是管理中的对核心职能的定义。

在这里也强调了各个层级的先后顺序以及层级之间的重叠性。

一、战略层战略层主要是明确公司与用户对于网站的期望和目标。

1、工作目标（1）、确定网站目标：我们要从这个网站得到什么？（2）、确定用户需求：我们的用户要从这个网站得到什么？2、工作内容（1）、确定网站目标a、商业目标：替公司赚钱还是替公司省钱？要赚多少钱？b、品牌识别：将品牌形象具体而明确地写进目标，将会提高呈现出积极的品牌形象的机会；c、成功标准：将战略或商业目标进行量化。

如通过衡量每一个注册用户单月的访问次数表明了该网站对核心用户的价值。

（2）、确定用户需求a、用户细分：可以按照人口统计学标准，价值观标准和用户对技术及网站本身观点划分用户；b、用户研究：使用问卷调查、用户访谈、焦点小组等方法收集、分析用户观点和需求。

并可通过创建虚拟人物角色来将分散的资料关联起来。

帮助你确保在整个设计过程期间把用户始终放在心里。

3、输出物市场需求文档（MRD）、用户研究报告、竞争对手分析报告等。

关于这点我也曾在马海祥博客的《如何利用SEO的思维模式来分析竞争对手》一文中做过详细的介绍，有兴趣的博友可以查看一下。

⽹页设计与制作（基本步骤） ⽹页设计与制作 ⼀、确定⽹站主题 ⽹站主题便是你树⽴的⽹站所要bai包含的主要内容，⼀个⽹站有必要要有⼀个清晰的主题。

特别是对于个⼈⽹站，你不可能像归纳⽹站那样做得内容⼤⽽全，⼀应俱全。

你没有这个才⼲，也没这个精⼒，所以有必要要找准⼀个⾃⼰最感兴趣内容，做深、做透，办出⾃⼰的特征，这样才⼲给⽤户留下深刻的印象。

⽹站的主题⽆定则，只要是你感兴趣的，任何内容都能够，但主题要明显，在你的主题范围内内容做到⼤⽽全、精⽽深。

⼆、收集资料 清晰了⽹站的主题今后，你就要环绕主题开始收集资料了。

常⾔道：“巧妇难为⽆⽶之炊”。

要想让⾃⼰的⽹站有⾎有⾁，能够吸引住⽤户，你就要尽量收集资料，收集得资料越多，今后制造⽹站就越容易。

资料既能够从图书、报纸、光盘、多媒体上得来，也能够从互联⽹上收集，然后把收集的资料沙⾥淘⾦，去伪存真，作为⾃⼰制造⽹页的素材。

⽹页设计 三、规划⽹站 ⼀个⽹站规划得成功与否，很⼤程度上决定于规划者的规划⽔平，规划⽹站就像规划师规划⼤楼相同，图纸规划好了，才⼲建成⼀座漂亮的楼房。

⽹站规划包含的内容许多，如⽹站的结构、栏⽬的设置、⽹站的风格、颜⾊搭配、版⾯布局、⽂字图⽚的运⽤等，你只要在制造⽹页之前把这些⽅⾯都考虑到了，才⼲在制造时驾轻就熟，胸中有数。

也只要如此制造出来的⽹页才⼲有特性、有特征，具有吸引⼒。

如何规划⽹站的每⼀项具体内容，我们在下⾯会有具体介绍。

四、挑选适宜的制造东西 尽管挑选什么样的东西并不会影响你规划⽹页的好坏，可是⼀款功⽤强⼤、使⽤简略的软件往往能够起到事半功倍的效果。

⽹页制造触及的东西⽐较多，⾸先便是⽹页制造东西了，现在⼤多数⽹民选⽤的都是所见即所得的修正东西，这其间的优异者当然是Dreamweaver和Frontpage了，如果是初学者，Frontpage2000是⾸选。

除此之外，还有图⽚修正东西，如Photoshop、Photoimpact等；动画制造东西，如Flash、Cool3d、GifAnimator等；还有⽹页特效东西，如有声有⾊等，⽹上有许多这⽅⾯的软件，你能够根据需要灵活运⽤。