网页设计与制作报告书
课程名称:网页设计与制作
报告题目：个人主页
专业班级：软件工程（服务外包）114-4
学号:201158504435
姓名：肖腾威
指导教师：王建华
摘要：
在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。
关键字：网页制作；制作方法；设计要素；网页测试
一、网页制作开发背景
Dreamweaver以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。现在流行的网页制作软件有很多，如Macromedia 公司的Dreamweaver、微软公司的Dreamweaver、还有Adobe Pagemill 3.0--制作多框架，表单和Image map 图像的网页工具、Netscape等等。其中Dreamweaver更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。工具准备好了，可根据你的个人喜好来选择一些素材，如图片、喜欢的文章等。
二、网页制作设计技巧
首先，我们来看一下创建一个只包含一个网页的站点。选择“文件”菜单的“新建”选项，单击“站点”命令，这时新建站点对话框就弹出来了，在“指定新站点位置”文本框中输入新站点的位置，单击“只有一个网页的站点”图标，单击“确定”按钮。这就建立好站点了，我们现在来看一下新的站点里有什么，单击“视图”工具条的“文件夹”按钮。在文件夹列表里有一个网页文件，名字叫做“index.htm”。我们知道，每
一个站点都要有一个主页，这个主页也是一个网页文件。浏览者访问站点时首先进入的就是站点的主页。主页的名字在一般情况下就叫做“index.htm”。就是说我们新建只包含一个网页的站点时，DREAMWEAVER就自动为我们创建了站点的主页了。这个新建的站点主页时空的，我们可以向里面添加内容。
在文件列表里除了主页之外，还有文件夹。新建站点时，DREAMWEAVER都会在站点所在位置下新建两个文件夹，一个是“images”另一个是“_private”。我们在编辑站点时可以在“image”文件夹里放置站点用到的图片。“private”文件夹比较特殊，其中的文件对浏览者来说是隐含的，我们可以把一些不想让浏览者看到的网页文件放在这个文件夹里，比如：我们可以在这个文件夹里存放注册用户的个人信息。
尽管每一个站点都要有一个主页，不过创建站点时我们仍然可以从一个空站点开始：选择“文件”菜单的“新建”命令，单击“站点”选项，在“新建站点”对话框里，我们可以选择“空站点”图标来创建一个空站点。“新建站点”对话框中还有许多其他图标，这是DREAMWEAVER 提供的用来创建站点模板或向导。我们创建只有一个网页的站点或者创建空站点，都是从头开始来创建一个站点，这就好像盖房子一样，首先画图纸。然而，有许多的房子都具有相似的结构和用途，所以我们可以用一张图纸盖很多相似的房子，这样就节省了许多工作。
基于表格的设计：表格布局使网页设计师制作网站时有了更多选
择。在HTML 中表格标签的本意是为了显示表格化的数据，但是设计师很快意识到可以利用表格来构造他们设计的网页，这样就可以制作较以往作品更加复杂的，多栏目的网页。表格布局就这样流行了起来，融合了背景图片切片技术，常给人以看起来较实际布局简洁得多的结构。
结构设计：这个时期的网页设计还不太关注语义化和可用性方面的问题，主要还在追求良好的结构美学。同一时期也是大量应用GIF 占位图片控制留白的时期。一些主流的公司甚至训练设计师如何使用GIF 占位;如微软的“关于HTML 表格中的GIF 占位”。第一批主要应用表格布局的“所见即所得”网页设计软件的发展助长了表格的应用。另外，某些软件自动生成的表格如此复杂以至于许多设计师不可能从头手写代码(例如每行只有1px 高却包含了几百列的表格)。即使是稍微复杂一点儿的网页(比如多栏目页面)，设计师们都要依赖于表格来创建。
三、网站结构
网站结构是指网站中页面间的层次关系;按性质可分为逻辑结构及物理结构。网站结构对网站的搜索引擎友好性及用户体验有着非常重要的影响。
（一）网站结构整体先用DIV和CSS来进行构造，对整个网站进行布局，
(二)网站结构是衡量网站用户体验好坏的重要指标之一。清晰的网站结构可以帮助用户快速获取所需信息;相反，如果一个网站的结构极其糟糕的话，用户在访问时就犹如走进了一座迷宫，最后只会选择放弃浏览。
（三）网站结构还直接影响搜索引擎对页面的收录，一个合理的网站结构可以引导搜索引擎从中抓取更多有价值的页面。
网站结构对网站及网站中页面的影响。搜索引擎对重要页面的抓取
由于互联网中信息量极其庞大，为了向用户展示更多有价值的信息，搜索引擎会优先抓取每个网站中相对重要的页面(即权重较高的页面),然而，搜索引擎是怎样发现这些重要页面的呢?根据重要页面的链接指向的页面可能是重要页面的思路;搜索引擎首先会从权重相对较高的页面(即源页面)出发跟踪其中的链接，从而抓取其他相对重要的页面(即目标页面)。
网页设计的要素
四、应用工具方案
DreamWeaver自制动态HTML动画的网页。
DreamWeaver是一个很酷的网页设计软件，它包括可视化编辑、HTML代码编辑的软件包，并支持ActiveX、JavaScript、Java、Flash、ShockWave等特性，而且它还能通过拖拽从头到尾制作动态的HTML
动画，支持动态HTML(Dynamic HTML)的设计，使得页面没有plug-in 也能够在Netscape和IE 4.0浏览器中正确地显示页面的动画。同时它还提供了自动更新页面信息的功能。
DreamWeaver还采用了Roundtrip HTML技术。这项技术使得网页在DreamWeaver和HTML代码编辑器之间进行自由转换，HTML 句法及结构不变。这样，专业设计者可以在不改变原有编辑习惯的同时，充分享受到可视化编辑带来的益处。DreamWeaver最具挑战性和生命力的是它的开放式设计，这项设计使任何人都可以轻易扩展它的功能。
版面布局：在你开始设计之前，你必须仔细地为站点挑选色彩组合。千万不要出现紫色的背景加上黑蓝色的文字的组合。要使整个站点保持同一种色彩组合，因为不同颜色组合的背景或字体可能会是非常令人讨厌的。你也可以选用一个背景图，而不是仅用一种颜色。背景图案可以自己绘制，也可以从因特网上下载。通过模糊背景图案，就可以使文字更容易被阅读。要记住的是，图片不会被浏览器重画的，而背景色彩则是要被重新画的，因此，在上传你的图片之前，必须检查不同的浏览器是如何显示这些网页的。当增加文字时，尽量设置容易被阅读的字体和大小。如果你使用背景图片，那么，当网页被浏览时，背景色和字体将会先于背景图片被下载，因此，如果背景色和文本的颜色没有鲜明的对照的话，那么浏览者会有几秒钟的时间看到一个充满了不可阅读的文本的网页。解决这个问题的简单的方法就是，
使背景色与背景图的颜色相类似。
浏览导航：站点的浏览导航必须被设计成非常容易。如果需要，把站点分割为几个部分。最容易的方法，就是在整个网站的所有的网页的左边放置一个菜单条。当然，除此以外，还有许多可选的方法。对于具有大量信息的站点，使用一个可扩展的菜单条会是一个不错的选择。无论你使用何种导航模式，在每一页都放置一个主页链接，那会是一种不错的设计思想；浏览者必须知道，无论何时，当他们迷失在你的站点浏览中时，都可以通过简单的一次点击就能准确地知道目前所处的位置。
Frame(帧,框架)的问题：Frame——你也许会喜欢它，也许不喜欢。如果你在你的网站上使用帧，你很可能使一个帧用于导航目的，另一个帧用于放置内容。你可以看见在同一页上有两个被分割的浏览窗口，你点击左边的帧，只会改变右边的内容。用帧来组织网站的内容，显然是非常容易的。
检验你的HTML代码：不要在你的网站上放置浏览计数器。计数器会让你的网站看起来不够专业化，如果浏览量不够的话，还会起到相反的宣传作用。最后，内容是金，如果能给的浏览者一些有价值的东西，如，信息，建议，或软件，那么就能吸引浏览者经常光顾你的网站。为你的站点增加消息板和聊天室，从而提高网站的交互性，使你和你的访问者交流，让访问者彼此交流。
五、频道栏目划分
个人主页
网站首页注册相关链接照片美文留言板
六、代码段
Css样式表
@charset "utf-8";
/*
Design by https://www.doczj.com/doc/eb5372336.html,
Released for free under a Creative Commons Attribution 3.0 License
*/
BODY部分的修饰
body { margin:0; padding:0; width:100%; color:#9a9a9a; font:normal 12px/1.8em Arial, Helvetica, sans-serif;}
html, .main { padding:0; margin:0; background:#e7e9eb url(images/main_bg.gif) top repeat-x;}
.clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}
.logo { padding:30px 0 20px 0; margin:0 auto; width:450px; float:left; color:#FFF;}
.logo img { float:left; margin:0 10px 0 0; }
h1 { margin:0; padding:5px 0; width:300px; color:#fff; font:normal 36px/1.2em Arial, Helvetica, sans-serif; letter-spacing:-2px;}
h1 a { color:#fff; text-decoration:none;}
h1 a:hover { color:#93ba09; text-decoration:none;}
h1 a:hover span { color:#fff;}
h1 span { color:#93ba09;}
h1 small { color:#fff; display:inline; padding:0 0 0 10px; font:normal 12px/1.2em Arial, Helvetica, sans-serif; letter-spacing:normal;}
h2 { font:normal 24px Arial, Helvetica, sans-serif; padding:0; margin:5px 0; color:#595959;}
p { margin:8px 0; padding:0 0 8px 0; font:normal 12px/1.8em Arial, Helvetica, sans-serif;}
p.spec { text-align:right;}
a { color:#93ba09; text-decoration:none;}
a:hover { text-decoration:underline;}
a.rm, https://www.doczj.com/doc/eb5372336.html, { margin-left:8px; padding:9px 12px; background:url(images/a_bg.gif) repeat-x top; text-decoration:none; color:#fff;}
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar { margin:0; padding:0;}
/* header 部分的修饰
.header { }
.header_resize { margin:0 auto; padding:3px 0 0 0; width:970px;}
.header_img { width:970px; padding:50px 0 0 0;}
.header_img img { float:right;}
.header_img h2 { width:500px; float:left; text-align:left; font: normal 24px Arial, Helvetica, sans-serif; color:#fff; padding:50px 0 0 0; margin:0;}
.header_img h2 span { font: normal 46px Arial, Helvetica, sans-serif; color:#fff;}
.header_img p {width:500px; float:left; text-align:left; font: normal 12px Arial, Helvetica, sans-serif; color:#fff; line-height:1.8em; padding:10px 0 0 0;}
/* menu 的部分修饰
.menu_nav { margin:40px 0 0 0; padding:3px 0 0 10px; float:right; width:400px;}
.menu_nav ul { list-style:none; padding:0; margin:0; }
.menu_nav li { float:left; padding:0 5px; }
.menu_nav li a { font:normal 13px Arial, Helvetica, sans-serif; color:#959595; display:block; float:left; padding:10px 10px; } .menu_nav li a:hover { text-decoration:none; color:#93ba09; }
.menu_nav li.active a { text-decoration:none; color:#93ba09; }
Content部分的修饰
.content { padding:10px 0 0 0;}
.content_resize { margin:0 auto; padding:20px 0 0 0; width:970px;}
.content .mainbar { margin:0; float:right;}
.content .mainbar img { float:left; padding:4px; margin:0 10px 0 0; border:1px solid #eaecec; background-color:#fff;}
.content .mainbar .article { margin:0 0 20px 0; padding:30px 20px; width:610px;}
.content .mainbar .article span.butons a { margin:0 5px 0 0; float:right; color:#9a9a9a; padding:1px 10px; text-decoration:none; border:1px solid #ebe8e8; background:#fbfbfc;}
.content .mainbar .article span.butons a:hover { border:1px solid #d9f0ff; background:#93ba09; color:#fff; text-decoration:none;} .content .mainbar .article span.butons a.active { border:1px solid #ebe8e8; background:#93ba09; color:#fff; text-decoration:none;}
.content .sidebar { margin:0; padding:0; float:left; }
.content .sidebar .gadget { margin:0 0 20px 0; padding:30px 20px; width:230px;}
ul.sb_menu, ul.ex_menu { margin:0; padding:0; list-style:none; color:#959595;}
ul.sb_menu li, ul.ex_menu li { margin:0;}
ul.sb_menu li { padding:4px 0 4px 12px; width:220px;}
ul.ex_menu li { padding:4px 0 8px 12px;}
ul.sb_menu li a, ul.ex_menu li a { color:#959595; text-decoration:none; margin-left:-12px; padding-left:22px; background:url(images/li_a_hover.gif) left no-repeat;}
ul.sb_menu li a:hover, ul.ex_menu li a:hover { color:#93ba09; text-decoration:underline; background:url(images/li_a.gif) left no-repeat;}
ul.sb_menu li a:hover { text-decoration:underline;}
ul.ex_menu li a:hover { text-decoration:none;}
/* subpages 部分的修饰/
.content .mainbar .comment { margin:0; padding:16px 0 0 0;}
.content .mainbar .comment https://www.doczj.com/doc/eb5372336.html,erpic { border:1px solid
#dedede; margin:10px 16px 0 0; padding:0; float:left;}
/* fbg */
.fbg { padding:10px 0 0 0;background:url(images/fbg_bg.gif); margin:10px 0 0 0;}
.fbg_resize { margin:0 auto; padding:20px 20px; width:930px;} .fbg h2 { color:#dedddd;}
.fbg p { color:#959595;}
.fbg a { color:#93ba09; text-decoration:none;}
.fbg img { padding:4px; border:1px solid #cfd2d4; background-color:#fff;}
.fbg .col { margin:0; float:left;}
.fbg .c1 { padding:0 16px 0 0; width:266px;}
.fbg .c2 { padding:0 16px; width:300px;}
.fbg .c3 { padding:0 0 0 16px; width:260px;}
.fbg .c1 img { margin:8px;}
.fbg .c3 img { margin:8px 16px 4px 0; float:left;}
/* footer */
.footer { width:970px; margin:0 auto; padding:40px 0 20px 0;} .footer p.lf { margin:0; padding:4px 0; float:right; width:auto; text-align:right; line-height:1.5em; color:#474746;}
.footer p.lf a { color:#93ba09;}
.footer p.lr { margin:0; padding:4px 0; float:left; width:auto; line-height:1.5em; color:#474746;}
.footer p.lr a { color:#93ba09;}
/* form */
ol { list-style:none;}
ol li { display:block; clear:both;}
ol li label { display:block; margin:0; padding:16px 0 0 0;}
ol li input.text { width:480px; border:1p【8x solid #c0c0c0; margin:2px 0; padding:5px 2px; height:16px; background:#fff;} ol li textarea { width:480px; border:1px solid #c0c0c0; margin:2px 0; padding:2px; background:#fff;}
ol li .send { margin:16px 0 0 0;} #mar{
width:700px;
height:300px;
float:right;}
八、截图
首页
照片
美文
留言板
联系我
九、测试
（一）功能测试
1、链接测试
链接是Web应用系统的一个主要特征，它是在页面之间切换和指导用户去一些不知道地址的页面的主要手段。链接测试可分为三个方面。首先，测试所有链接是否按指示的那样确实链接到了该链接的页面；其次，测试所链接的页面是否存在；最后，保证Web应用系统上没有孤立的页面，所谓孤立页面是指没有链接指向该页面，只有知道正确的URL地址才能访问。
链接测试可以自动进行，现在已经有许多工具可以采用。链接测试必须在集成测试阶段完成，也就是说，在整个Web应用系统的所
有页面开发完成之后进行链接测试。
网页设计与制作实例教程 习题答案 第1章网页与网站基础 一、选择题 1．A 2．B 3．C 4．C 5．A 二、判断题 1．√2．×3．√4．×5．√ 三、问答题 略 第2章网页规划设计 一、选择题 1．D 2．A 3．C 4．A 5．C 二、判断题 1．×2．×3．×4．√5．√ 三、问答题 1．答：网站需求分析一般包括三个阶段的内容：网站背景分析、总体需求分析、具体需求分析。（每个阶段可再详细描述。） 2．答：可从以下几个方面来阐述网站设计的原则：①日期、时间和数字；②欢迎词； ③弹出窗口和引导页面；④新闻和公告信息；⑤网址；⑥控件；⑦链接；⑧主页内容 3．答：打开新浪网首页，分析其布局类型。（答案略） 4．答：网页色彩搭配方法可从以下两个方面去阐述：①根据页面风格以及产品本身的诉求确定主色；②根据主色确定配色。 网页色彩搭配技巧可从以下几个方面去阐述：①用一种色彩；②用两种色彩；③用一个色系；④用黑色和一种色彩以及色彩搭配忌讳的方面。 5．答：打开当当网，具体分析其规划过程。（答案略） 第3章初识网页制作软件 一、选择题 1．C 2．C 3．B
二、填空题 1．代码、拆分、设计2．文件、资源、规则3．超级链接 三、操作题 略 第4章制作网页内容 一、选择题 1．D 2．B 3．A 4．D 5．ABD 6．D 7．B 8．D 9．A 10．A 二、判断题 1．√2．√3．×4．√5．√6．√7．√8．√9．×10．√三、操作题 略 第5章设置网页超级链接 一、选择题 1．D 2．D 3．A 4．D 5． C 二、判断题 1．×2．×3．×4．√5．× 第6章使用CSS样式美化网页 一、选择题 1．B 2．C 3．C 4．B 5．A 6．D 7．D 8．D 9．B 10．C 11．A 12．A 13．C 14．D 15．D 16．A 17．A 18．B 19．D 20．D 二、简答题 1．×2．×3．×4．×5．×6．×7．√8．×9．√10．√11．×12．×13．×14．√15．√16．√ 第7章规划布局网页 一、选择题 1．B 2．A 3．B 4．B 5．D 二、简答题
您的目前成绩为： 100.0 详细信息 网页设计与制作_在线作业_E 用户名：W130801151最终成绩：100.0 一 判断题 1. TRUE FALSE 本题分值： 5.0 用户得分： 5.0 用户解答： FALSE 知识点： 1.1.2 HTML 语言与XHTML 语言 2. TRUE FALSE 本题分值： 5.0 用户得分： 5.0 用户解答： FALSE 知识点： 15.2.3 绘图工具箱 3. FALSE TRUE 本题分值： 5.0 XHTML 代码将文字内容和显示样式分离，显示样式的定义放在
中）。（ ） Flash 中“橡皮擦工具”的水龙头模式可以一下子擦除位图一个封闭选区的全部填充色。（ ） Flash 中修改实例的属性会影响到元件。（ ）用户得分： 5.0 用户解答： FALSE 知识点： 17.1 基本概念 4. FALSE TRUE 本题分值： 5.0 用户得分： 5.0 用户解答： TRUE 知识点： 19.3.1 帧动作 5. TRUE FALSE 本题分值： 5.0 用户得分： 5.0 用户解答： FALSE 知识点： 19.3.2 按钮动作 6. FALSE TRUE 本题分值： 5.0 用户得分： 5.0 用户解答： TRUE 知识点： 19.3.4 设置及获取电影元件实例的属性 Flash 中帧动作可以附加到某帧下的任何一层上。（ ） 在给Flash 按钮附加动作时，动作必须嵌入on ()处理程序中，以便指定触发该动作的鼠标事件或按键操作。on ()处理程序只能支持一个鼠标事件。（ ） 当播放Flash 动画时，允许影片剪辑元件实例被拖动（startDrag ）或停止拖动（stopDrag ）。（ ）
网页设计与制作报告书 课程名称:网页设计与制作 报告题目：几米的空间 专业班级：旅管1002班 学号：100104110221 姓名：杨玉颖 指导教师：胡一波
目录 一、................................. 开发背景 二、................................. 网页设计技巧 三、................................. 网站结构 四、................................. 应用工具方案 五、................................. 频道栏目划分 六、................................. 测试 七、................................. 周期与成本估算 八、................................. 结论
摘要： 在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。 关键字：网页制作；制作方法；设计要素；网页测试
一、网页制作开发背景 Dreamweaver以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。现在流行的网页制作软件有很多，如Macromedia 公司的Dreamweaver、微软公司的Dreamweaver、还有Adobe Pagemill 3.0--制作多框架，表单和Image map 图像的网页工具、Netscape等等。其中Dreamweaver更以其功能强大、容易上手、界面亲切而著称。它采用所见即所得的方式编辑网页，利用它可以轻松的组织、编辑网页并将其发布到指定的站点上，而且在发布之后还能对更新情况进行监控以更新站点的内容。工具准备好了，可根据你的个人喜好来选择一些素材，如图片、喜欢的文章等。 二、网页制作设计技巧 首先，我们来看一下创建一个只包含一个网页的站点。选择“文件”菜单的“新建”选项，单击“站点”命令，这时新建站点对话框就弹出来了，在“指定新站点位置”文本框中输入新站点的位置，单击“只有一个网页的站点”图标，单击“确定”按钮。这就建立好站点了，我们现在来看一下新的站点里有什么，单击“视图”工具条的“文件夹”按钮。在文件夹列表里有一个网页文件，名字叫做“index.htm”。我们知道，每
〈网页设计与制作》期末考试试题、单项选择题（本大题共30小题，每小题2分，共60分） 1、目前在In ternet上应用最为广泛的服务是（b）。 A、FTP 服务 B、WWW 服务 C、Tel net 服务 D、Gopher 服务 2、域名系统DNS的含义是（b ）。 A、Direct Network System B 、Domain Name Service C 、Dynamic Network System D、Distributed Network Service 3、主机域名center. nbu. edu. cn 由四个子域组成，其中（d）子域代表国别代码。 A、center B、nbu C、edu D、cn 5、当标记的TYPE属性值为（d ）时，代表一个可选多项的复选框。 A、TEXT B、PASSWORD C、RADIO D、CHECKBOX 6、为了标识一个 HTML文件开始应该使用的HTML标记是（c）。 A、
| B、 C、 12、在网页中最为常用的两种图像格式是（a）。 A、JPEG 和 GIF B、JPEG 和 PSD C、GIF 和 BMP D、BMP 和 PSD 13、如果站点服务器支持安全套接层（SSL），那么连接到安全站点上的所有URL开头是 (b)。 A、HTTP B、HTTPS C、SHTTP D、SSL 14、在HTML中，要定义一个空链接使用的标记是（a ）. A、＜a href= "#"＞ B、＜a href= ”？"＞ C、＜a href= "@"＞ D、＜a href= ”"〉 15、对远程服务器上的文件进行维护时，通常采用的手段是（b） A、POP3 B、FTP C、SMTP D、Gopher 16、下列Web服务器上的目录权限级别中，最安全的权限级别是（a ） A、读取 B、执行 C、脚本 D、写入 17、用Fireworks切割图形时，需要的工具是（c） A、裁剪 B、选取框 C、切片 D、自由变形 18、 In ternet上使用的最重要的两个协议是（b ） A、TCP 和 Tel net B、TCP 和 IP C、TCP 和 SMTP D、IP 和 Tel net 19、 body元素用于背景颜色的属性是（c） A、alink B、vlink C、bgcolor D、background 20、下面说法错误的是（d） A、规划目录结构时，应该在每个主目录下都建立独立的images目录 B、在制作站点时应突出主题色 C、人们通常所说的颜色，其实指的就是色相 D、为了使站点目录明确，应该采用中文目录 《网页设计与制作案例教程》课程标准模板附件1 课程标准 课程名称《网页设计与制作案例教程》 课程代码 0511 课程类型专业基础课 课程总学时 60学时 适用专业计算机应用技术专业 课程负责人 信息工程系（教学系部）计算机应用教研室制定（修订） 2020年3月 《网页设计与制作案例教程》课程标准 课程代码：0511 课程类型：理实一体化课 学时/学分： 60学时/4学分 适用专业：计算机应用技术专业 1.课程概述 1.1课程性质 《网页设计与制作案例教程》是高等职业技术学院计算机应用技术专业开设的一门专业必修课，是计算机类专业的一门实践环节课程，也可以作为其他相关专业的实践课程或选修课，它是一门操作性和实践性很强的职业技术课程。本课程的主要内容为系统介绍网页编辑与制作软件Dreamweaver cs6，通过这种有代表性的网页制作软件的使用，掌握网站设计的全过程，并能熟练地制作出有专业水准的网站。 1.2课程定位 通过本课程的学习，使学生了解网站开发的流程，掌握HTML和 CSS技术实现网页的构建和美化，并用 Dreamweaver CS6工具实现网页的制作。本课程对接的工作岗位是网站编辑、网站开发，通过学习应具备网站美化和网站开发的能力。 2.课程目标 本课程以学生能够进行网站开发与维护的实际工作能力为学习目标，使学生具备计算机及其它相关专业课学习和应用中所必需的网页制作与网站设计的基本知识和基本技能，形成解决实际应用问题的方法能力，为以后的学习动态网页设计课程打下基础。 2.1素质目标 (1) 培养具有较强的网页设计创意思维、艺术设计素质； (2) 培养学生在学习过程中解决困难的能力； (3) 培养学生在学习过程中培养兴趣的能力，提高工作、学习的主动性； (4) 培养学生理论联系实际的工作和学生方法； (5) 培养具有高度责任心和良好的团队合作精神； (6) 具有社会责任感。 2.2知识目标 (1) 了解WEB站点的工作原理； (2) 理解Internet、WWW、HTTP、HTML的定义，计算机网络概念和作用； (3) 了解服务器、客户端、浏览器的概念和作用； (4) 掌握常规网站的规划及流程； (5) 熟练掌握HTML语言中各种标记符的运用能力； (6) 熟练掌握Dreamweaver应用软件的使用； (7) 理解网页中脚本语言的使用方法； (8) 熟练开发常规静态网站。 2.3能力目标 (1) 熟练掌握Dreamweaver应用软件制作网站及网页； (2) 熟练掌握使用绝对和相对URL，创建超链接，图像链接； (3) 掌握在网页中添加CSS的方法； (4) 培养学生设计、制作和维护动态网站。 (5) 培养学生搜集资料、阅读资料和利用资料的能力； (6) 能独立制定、实施工作计划。 (7) 具备检查、判断能力； (8) 具备简单的需求市场分析能力。 3.课程实施和建议 3.1课程内容和要求 本课程以《计算机应用基础》、《photoshop》课程为基础，通过本课程的学习，应使学生掌握网页制作的基本方法，掌握 HTML、CSS等网页基础编程知识，并使用主流工具 Dreamweaver CS6进行网页制作。 电科19年12月考试《网页设计与制作》期末大作业参考答案19年12月考试《网页设计与制作》期末大作业-0001 试卷总分:98 得分:98 一、单选题 (共 20 道试题,共 80 分) 1.以下HTML代码，判断正确的是（）。 A.第2、3行应加入 |