下载文档原格式
网页设计与制作实验指导一览表实验1 HTML语言实训目的:为了让学生能熟悉学习网页不可避免要接触的HTML语言，达到用该语言可以建立一个简单的网页的目的，同时了解建立站点是做网站必不可少的，要掌握建立站点的方法。
素材准备：准备制作网页所需的文字素材、图像素材。
实验课时：2学时实验内容：1.创建站点；2.新建网页以及保存，重命名；3.输入HTML语言。
实验步骤：1.在E盘中新建本地根文件夹，命名为root，并在该文件夹中新建image文件夹以存放网站中所要用到的图片。
2.定义站点：设置 "站点名称"，命名为 "mysite";设置本地根文件夹,指定为E盘下的root文件夹;设置 "HTTP地址"为localhost。
3.创建与设置文档的页面属性：新建一个页面，保存名为“HTML基础”的文档。
4.切换代码模式下，输入代码。
5.保存文件，预览文件效果。
实验过程注意事项:1.在创建站点的过程中注意建立本地文件夹，文件夹命名最好为英文；网站中所有的文件最好取名为英文；注意文件的路径；2.所有的图片文件单独放在image文件夹内。
实验思考:除了用HTML语言来做这个网页，还有没有其它的方法？书写实验报告要求:根据最终所作的网页，写出实验报告。
页面效果图：图1-1实验2 初识Dreamweaver实验目的：为了让学生能熟练掌握Dreamweaver的安装与卸载，启动与退出，基本工作环境和设置，对Dreamweaver操作环境有一定了解。
素材准备：准备好从网上下载的安装程序。
实验课时：2学时实验内容：1.安装Dreamweaver：2.Dreamweaver的启动与退出：3.了解工具栏、菜单栏、标题栏等工作环境：4.卸载Dreamweaver实验步骤：1.打开从网上下载的Dreamweaver程序，双击安装。
2.安装完成后输入注册号。
3.启动Dreamweaver，并查看工具栏、菜单栏、标题栏等工作环境。
网页效果图设计之色彩配色方案及实例说明：红橙黄绿蓝紫黑白灰1 红色是最具有视觉冲击力的色彩；暗示速度和动态；可以刺激心跳速度、加快呼吸、刺激食欲；红色的衣服使人身形显大；红色的车最容易被偷，如图所示。
1.1 红色的具象联想火焰、鲜血、西红柿、西瓜瓤、太阳、红旗、口红、中国国旗。
1.2 红色的正面联想激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。
1.3 红色的负面联想侵略性、愤怒、战争、革命、残忍、不道德、危险、幼稚、卑俗。
1.4 红色的文化域在非洲，红色代表死亡。
∙在法国，红色代表雄性。
∙在亚洲，红色代表婚姻、繁荣、快乐。
∙在印度，红色是士兵的颜色。
∙在南非，红色是丧服的色彩。
1.5 实例说明为中企动力8周年主题网站（/8tm/index.html）网页截图，整个页面使用红色作为主色调，给人以喜庆、热闹的感受。
如图所示.1.6 红色系配色方案红色系的配色方案如下，如图所示：1. 在红色中加入少量的黄，会使其热力强盛，趋于躁动、不安。
2. 在红色中加入少量的蓝，会使其热性减弱，趋于文雅、柔和。
3. 在红色中加入少量的黑，会使其性格变的沉稳，趋于厚重、朴实。
4. 在红中加入少量的白，会使其性格变的温柔，趋于含蓄、羞涩、娇嫩。
2 橙色橙色能促进食欲；橙色的房间代表了友善，带给人愉快，能促使人谈话和思考；橙色能够用来强化视觉，这就是为什么海滩救生员的救生服采用橙色的原因，如图所示。
2.1 橙色的具象联想秋天、桔子、胡萝卜、肉汁、砖头、灯光。
2.2 橙色的正面联想温暖、欢喜、创造力、鼓舞、独特性、能量、活跃、模拟、社交、健康、奇想、活力、华美、明朗、甘美。
2.3 橙色的负面联想粗鲁、时髦、喧嚣、嫉妒、焦躁、可怜、卑俗。
2.4 橙色的文化域∙在爱尔兰，橙色代表新教运动。
∙在美洲土著文化里，橙色代表学习和血缘关系。
∙在荷兰，橙色是国家的颜色，因为荷兰的君主来自于Orange-Nassau家族。
∙在印度，橙色代表印度教。
课程思政《网页设计》布局知识，并引入纪念相关活动的主题，提高学生的民族自豪感和文化自信。
第二阶段，25分钟案例分析，让学生通过分析网站首页的设计与制作，理解纪念相关活动的意义，培养学生的爱国主义情感和社会责任感。
第三阶段，10分钟课堂总结，强调学生在本课程中所学到的专业知识和德育内涵，激发学生的研究热情和责任感。
（3）课后作业，要求学生制作一个与纪念相关活动有关的网页，并加入自己的思想感悟，体现学生的爱国主义情感和社会责任感。
通过课前预、课堂教学和课后作业三个环节，全面提高学生的思政素养，促进专业课程和德育目标的深度融合。
三、存在问题及改进措施在专业课程中开展思政教育，存在一些问题，如思政内容与专业知识的融合度不够，学生对思政教育的认识和重视程度不高等。
针对这些问题，需要采取一些改进措施。
首先，要加强课程设计，将思政教育融入到整个课程中，使学生在研究专业技能的同时领悟德育内涵。
其次，要加强教学方法，采用任务驱动、案例分析、讨论互动等方式，激发学生的研究热情和思考能力。
同时，要加强师生互动，引导学生主动参与思政教育，提高学生对思政教育的认识和重视程度。
四、结论本文以___电子商务中专一年级《网页设计与制作》专业基础课程为例，探讨了在专业课程中开展思政教育的具体措施和意义。
通过课程设计、教学方法和师生互动等方面的改进，可以更好地实现专业课程和德育目标的深度融合，培养学生的爱国主义情感和社会责任感，为社会培养“爱国、敬业、诚信、友善”的高规格专业人才。
本文介绍了一节以“红旗飘飘，引我成长”为主题的课程思政实施过程。
在课程设计中，教师结合课前资料，旨在让学生接受爱国主义教育，激发研究热情。
在课堂实施中，教师以任务为导向，追求课堂实效，创设情境，将课堂内容与思政教育紧密结合。
学生在小组团队的形式下完成任务，教师巡回关注学生技能动态和思维动态，以渗透职业养成教育和思政教育为目的。
在作品展示及评价阶段，学生通过自评、互评、交流心得，学会交流、表达、分享成功的喜悦。
综合实例——“宝贝爱网站”制做指南2.1 创建站点在编辑网页之前，首先要定义一个站点，以下是高级模式的定义过程：[1] 启动Dreamweaver CS3软件，执行【站点】→【新建站点】菜单命令。
[2] 在【站点定义为】的对话框中选择“高级”选项卡，点击新建两个文件夹baby （根文件夹）和images（图像文件夹），如下图所示，设置“本地信息”的各个参数。
本例的主目录为baby，在信息服务默认站点EC中，“HTTP地址”为http://localhost/，其他默认，完成后点“确定”。
因为是静态网页，可以不设测试服务器。
[3] 将素材文件复制到baby文件夹下（含images文件夹和news.html文件）。
2.2 制作网页模板为便于理解，我们将网页模板的制作分为4小节，下面来看具体操作。
1．新建模板文档(1)选择【文件】→【新建】菜单，打开【新建文档】对话框。
单击“空模板”，在“模板类型”列表中选择“HTML模板”，默认“布局”为 <无>，最后单击“创建”按钮，如图2-1所示。
图2-1(2)按【Ctrl+S】组合键保存文档，弹出图2-2所示提示框，勾选“不再警告我”复选框，之后单击“确定”按钮。
图2-2(3)在打开的【另存模板】对话框中，从“站点”下拉列表中选择“宝贝爱”，在“另存为”文本框中输入模板文件名“ml”，最后单击“保存”按钮，如图2-3所示。
图2-3(4)按【Ctrl+J】组合键，打开【页面属性】对话框。
单击左侧“分类”列表中的“标题／编码”，设置标题为“宝贝爱网站”，其余默认，如图2-4所示。
图2-4(5)再次按【Ctrl+S】组合键保存文件（*养成习惯）。
2．设置模板内容(1) 单击【插入】面板【常用】栏中的“表格”按钮，在页面中插入一个1行2列，宽1000像素，边框粗细、单元格边距和间距均为0的表格，如图2-5所示。
图2-5在该表格【属性】面板中，设置“表格ID”为“1”（定义为表格1，参见图2-6底部提示标签<table#1>），“对齐”方式为“居中对齐”，如下图所示：(2)在表格1（table#1）的左右两个单元格中（用Ctrl+鼠标来选择定位，此方式以后会常用到）分别插入图片“in01.gif”和“index_02.gif”，如图2-6所示。
课程设计报告书2010/2011 学年第 1 学期设计题目： Web网页制作实验报告年级专业： 08级市场营销姓名学号：指导老师：经济管理系 12月20日目录一、设计目的 (3)二、设计题目 (3)三、结构设计 (3)四、技术分析 (4)五、设计过程 (7)六、实验心得 (10)七、实验总结 (11)[附录]网页源代码节选 (12)一、设计目的在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、生活等各个方面发挥着重要的作用。
因此网站建设在Internet 应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。
我们当代大学生更是离不开网络给我们带来的好处与便利.但是,我们成天浏览的网站网页到底是如何制作的呢?我想这一点很多同学都没有去深究过.所以,这学期我选择了”web网页设计”这门课, 本课程的设计目的是通过实践使同学们经历网页制作的全过程. 通过设计达到掌握网页设计、制作的技巧。
了解和熟悉网页设计的基础知识和实现技巧。
根据题目的要求，给出网页设计方案，可以按要求，利用合适图文素材设计制作符合要求的网页设计作品。
熟练掌握Photoshop cs3、Dreamweaver cs等软件的的操作和应用。
增强动手实践能力，进一步加强自身综合素质。
学会和团队配合，逐渐培养做一个完整项目的能力。
二、设计题目《C罗球迷之家》三、结构设计选定主题，确定题目之后，在做整个网站之前对网站进行需求分析。
首先，做好需求调研。
调研方式主要是上网查阅资料，在图书馆里翻阅相关书籍。
然后，调研结束之后对整个网站进行功能描述，并对网站进行总体规划，接着逐步细化。
我们选做的主题是个人主页，并且选定题目为“C罗球迷之家”，其目的是做一个简单的网站，介绍C罗的各个方面，提供一定的资讯信息，。
进行一番调研之后，该网站整体站功能结构图如下：四、技术分析(一)建立布局在这次的网页设计中用到大量的布局，所以怎么样建立布局是关键。
学号：20题目网页设计与制作学院计算机科学与技术学院专业计算机应用班级1004姓名李俊清指导教师丁一2012年6月10日实验一：网页设计html一、实验目的1．掌握常用的HTML语言标记。
2．利用文本编辑器建立HTML文档，制作简单网页。
3．掌握网页制作功能的使用。
二、实验内容1．熟悉制作网页的基本方法。
2．掌握网页文件的基本操作；页面属性的设置；文本的插入和格式设置3．建立一个网站。
三、实验步骤1．在E:盘上建立一个文件夹如myweb作为自己的web站点根目录，在文本编辑器EditPlus 中输入如下的HTML代码程序，保存为以.htm或.html为后缀的文件如index.htm作为自己的第一个页面，并在浏览器中运行。
<html><head><title>我的第一个网页</title></head><body><h1>欢迎访问我的网站。
</h1><h3>欢迎访问我的网站。
</h3><h5>欢迎访问我的网站。
</h5></body></html>2.在标记中分别加入以下属性，看看index.htm有什么变化。
bgcolor=#背景颜色#=rrggbb(16进制的RGB值)或颜色名称background=#背景图像#=image-URL(图片所在路径)text=#非可链接文字的色彩bgproperties=FIXED背景图像不动<html><head><title>我的第一个网页</title></head><body bgcolor="#CCCCFF" text="#"><h1 align="center">欢迎访问我的网站。
