____________________________________________________________________________________________ 网页设计中文本排版的技巧和细节
网站的核心是内容，用户访问网站最重要的目的就是要看网站的正文，所以，网页的文本排版非常重要。
网页的文本排版并不是仅仅在CSS里设置个字体大小那么简单的，想要有好的排版，对细节要下一番功夫才行。
字体大小与行距
在早期的网页设计中，设计师为了追求中文字体的最佳视觉效果，经常使用12px像素的字号。其实在现在看来，网站内容页面用这么小的文字是不可取的，小字体的可读性很差，没有多少人愿意非常费力的盯着屏幕去辨识那些小字。应该说，将文字的字号设置成14px或者更大的16px会更加合理，浏览者阅读起来也更加轻松。当然，如果条件允许，可以在文章阅读页面增加选择字体大、中、小的连接。
文本之间的行距是非常重要的，因为挤在一起的文章会让读者看起来非常累，时不时的还会看错行。在面对密密麻麻挤在一起的长篇文字时，很少有人有耐心会看下去（至少我是如此）。一般情况下，文本的行距为1.5em与1.7em之间比较好，最好不要高于2em，否则过犹不及。
快速参考：
CSS中使用font-size调整字体大小，例如：font-size:14px;
CSS中使用line-height调整行距，例如：line-height:1.6em;
段落间距
在段落之间，要保持足够的间距才能让读者更容易识别，页面也更整洁。面对没有段落间距的页面，读者很可能会把几个连在一起的小段路看成一个大段落，如果每个段落内容太多，很少有读者有耐心读完，因为互联网上绝大多数的读者浏览网站的方法并不是精读，而是“扫描”。
我们通过修改p标签的margin属性或者padding属性来修改段落间距。相比较而言，段落间距占据一行文字的距离还是比较合理的，所以我们通常设置段落间距为1em。我习惯使用“padding:0.5em 0 0.5em 0;”来设置段落间距，padding后设置的距离按照顺序分别是段落的上方、右方、下方、左方间距。之所以在上方和下方各用一个0.5em而不是在下方用1em，是因为分别为上方和下方设置段落间距会让段落在右边框或背景的时候看起来更加均匀。
快速参考：p { padding:0.5em 0 0.5em 0; }
段落首行缩进
在HTML中，半角空格是无法连续识别的，所以很多从网上找的文章都是没有段落缩进的，这样从板式上看起来就不是太符合我们中文文章在生活中的习惯，我们习惯开头空两个汉字的位置，而我们又懒得每个段落都去添上全角空格，那么我们可以使用段落首行缩进解决问题。使用text-indent即可实现段落的首行缩进，如果我们想要首行空两个汉字的位置，那么我们可以设置“text-indent:2em;”，这样缩进问题就解决了。
快速参考：p { text-indent:2em; }
____________________________________________________________________________________________
常用标签定义
这个问题前面已经提到了，具体情况因人而异，这里举个例子说明一下。假如我需要重新定义em标签，通常em标签都是显示为斜体的，我为了让他更突出，给他加一个颜色定义“color:green;”，这样我们在使用这些预定义标签的时候会更加得心应手，也更加符合自己的需要。
快速参考：em { color:green; }
在网页设计中文本排版的技巧和细节还有很多，我所列的都是我认为比较重要的部分
文章来源一网学https://www.doczj.com/doc/d62000737.html,/
网页文本排版实例 未应用CSS样式网页： 《第10章 Dreamweaver中层叠样式表的创建及使用》教案 教学目标 层叠样式表（CSS）是网页设计工作者制作网页时经常使用的工具。利用它，可以统一定制网页文本、图片、表格等多种网页元素的样式，可以设计出更加丰富多彩的网页效果，而且能够迅速地将样式应用于整个网站的多个网页上。 通过本章的教学，要求学生掌握以下基本内容： 1.了解层叠样式表的基本知识。 2.掌握在Dreamweaver文档中利用CSS面板创建层叠样式表的基本方法。 3.掌握将CSS样式应用到各种网页元素上的方法。 4.掌握修改CSS样式的方法，并观察到该修改对网页外观的影响。 5.掌握管理CSS层叠样式表的基本方法，学会将外部样式表链接到网 站的多个网页上，以便直接应用已创建好的CSS样式，统一多 个网页的外观。 教学内容 ?CSS层叠样式表的基本知识：内联式样式表、嵌入式样式表、外部样式表。 ?在Dreamweaver中，使用CSS面板创建、应用、修改CSS层叠样式。 ?链接外部样式表。 教学重点 ?创建CSS样式。 ?应用CSS样式。 ?修改CSS样式。 ?链接外部样式表。 教学形式 课堂讲授与网络自学相结合 教学辅助手段
?通过多媒体屏幕广播或屏幕投影，学生可实时观看教师的操作演示过程。 ?学生可以访问网络教学站点。教学站点提供了重点操作的Flash动画演示。 教学时间安排：1课时（45分钟） ?层叠样式表的基础知识：10分钟。 ?创建和应用CSS样式：15分钟。 ?修改CSS样式：5分钟。 ?链接外部样式表：5分钟。 ?小结：10分钟。 教学方法与过程 首先介绍为何在网页设计中引入层叠样式表的概念，使学生对层叠样式表的作用有一个感性的认识。然后介绍层叠样式表的基本种类。接着介绍利用CSS面板创建CSS样式、应用CSS样式以及修改CSS样式的方法。其后，介绍如何为网站的多个网页链接已有的外部样式表。最后，进行小结。 在小结过程中，引导学生辨认和判断三种样式表在网页的HTML代码中具体的代码表示，并引导学生总结这些代码是如何通过CSS面板进行设置的，使得学生进一步加深对理论知识的理解。 布置课外作业，要求学生完成指定练习，巩固所学知识。 具体教学内容 一、引言（引入学习本章节的原因，简单介绍有关概念，并提示本节 课程的主要内容） 1．什么是样式？ 样式是用来控制网页外观的一组格式。 2．为什么在网页设计中使用样式？ 当网页中的多个元素需要使用相同的格式时，我们需要使用一种更为高效的格式设置方法。 如果把一组格式归纳起来，用一个名称命名，那么，这组格式就变成了一个样式。
1、灵活运用样式 熟悉网页设计的网友就知道，调用Style的方法很多，我们可以单击鼠标右键选择CustonStyle来调用Style标准，也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样，但实际上产生的HTML代码则完全不同。比如用CustonStyle来调用Style标准，在网页代码中就生成一个〈span〉标签，这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度，所以我们应尽量使用状态栏中的元素列表来调用Style。 2、活用FormatTable命令 在复杂的网页设计中，表格的应用是最多的，因为利用表格可以自由地控制文本和图象在网页上出现的具体位置，从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不甘落后，我们可以使用其中的“FormatTable”(格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式，先将光标置于表格的任意一个单元格内，再选择“Command”→“FormatTable”命令，在随后出现的对话框中，从左边的列表中选择一个设计方案。按“Apply”键来查看效果，如果不满意的话，还可以重新设置或者修改部分参数的值，如边界粗细，背景颜色等等。 3、同时链接到两个网页 我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档，可以使用“GoToURL”javascript行为。打开一个有框架的网页，选择文字或图象，然后从行为面板中选择“GoToURL”。我们会注意到Dreamweaver会在“GoToURL”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。 4、不给文件起中文名称 大家在制作好了网页后，通常会给网页起一个具有代表性的中文名称，一来能使人一看文件名就能大概了解文件所包含的内容，二来能够方便各个超级链接之间的相互调用。但如果你在Dreamweaver中这样做，就会发现Dreamweaver对中文文件名支持得不是太好，经常会有页面调用不正确的现象发生，所以我们以后在Dreamweaver中保存网页的时候，尽量用英文或者数字作为文件名称，这样就可以避免上面的出错现象。 5、巧妙设置字体分辨率 我们在制作网页的时候，经常有这种体会，那就是制作好的网页在本地计算机上浏览时很正常，但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了，这是为什么呢?原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示，在Dreamweaver 中得到了较好的解决。在文档窗口的右下角，Dreamweaver显示当前文档被设计成的分辨率大小。单击哪个数字，在弹出式菜单中可以为当前的页面指定显示分辨率，通过修改可以使你的主页更具灵活性。使不同分辨率的显示器都能较好地显示。 6、巧妙隐藏标签 如果在网页中插入了不可见的元素时，Dreamweaver会自动在页面上添加一个与之相应的元素标签，以便于我们选择不可见元素。但这并不全是件好事，比如我们在一个有很多层的页面中的第一行便插入一个表格，就会发现由于首行排列了太多的层元素标签而使得表格自动退到了页面的第二行，虽然在浏览时并不影响效果，但这确确实实会阻碍我们的工作。所以当我们觉得某个元素标签碍手碍脚时，就索性将之屏蔽掉。方法是按CtrlU打开Preferences面板，在Category中选中InvisibelElements，在面板的右边将会出现所有的元素标签。只要将不需要的元素标签前的勾去掉，以后它就保证不会再出现了。
网页设计与制作实例教程 习题答案 第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 二、简答题
网页设计技巧:网页设计中的F式布局 网页设计技巧中的“F式布局”你知道吗？相比传统的布局方式，F式布局更加自然，更加友好，不依赖布置视觉线索，能够“控制”用户的视觉路径。本文将讲述一些F式布局的规则、原理以及设计方法。 F式布局简介 F式布局是一种很科学的布局方法，基本原理依据了大量的眼动研究。一般来说，用户浏览网页的视觉轨迹是这样的——先看看顶部，然后看看左上角，然后沿着左边缘顺势直下….而用户往往不太注意右边的信息，这是不是有点像字母F?据此，我们习惯性的把重要元素（诸如品牌Logo，导航，行为召唤控件）放在左边，而右边一般放置一些对用户无关紧要的广告信息。 我们来看一下Webdesigntuts+的眼动热点图：
这眼动热点图展示了用户浏览此的视觉轨迹，呈一个F型。热区（途中红色、黄色、橙色部分）代表用户注意力最集中的地方。 总结一下用户浏览网页的一般模式： 先看看页面的左上角，了解一下这是什么（因此此处适合放置Logo)——“知道是什么” 然后扫描一下页面的顶部（导航栏，搜索栏）——“了解用法” 下一步，用户的视线下移，开始阅读下一行的容。 用户进入“扫描模式”，一旦找到感兴趣的容便会打开。 将此种浏览模式以线框图的形式呈现，形状如下图。
有个规律不容忽视：阅读一般是从上到下，从左到右的。用户往往忽视右侧边的容，大致的扫一眼而已，因此不要在右侧边下太大功夫。应该把容栏放在用户注意力高度集中的左边。综上所述，按照逻辑，我们得出以下结论： 品牌标志和导航应该放在页面的顶部，这是用户对的第一印象。 在容结构中，图片更容易获得关注 用户浏览完图片后，下一个关注点便是标题。 用户会大致的浏览文本，但是往往不会通读。 将F式布局应用到设计中 这里我做了一个小练习，使用线框图方法，对主要元素进行了布局。
方案文本绘图及排版全教程 1平面填色 1.1软件 1.1.1AutoCAD Move, copy, line, pline, offset, 层面修改，对象属性，改字的大小 1.1.2Photoshop 基本命令全会 1.2总平面 1.2.1基本要求 A, 突出总平面图的各设计要素，明确各要素之间的主次关系 即：1建筑——2道路——3绿化——4景观——5其他 B，美观要求 即：色彩协调，整体风格统一，对比强烈 1.2.2读图 A，打开CAD原总平面图，看各层面名称即各层内容，了解总图上各区域是什么，以便在填色时区分 B，通过客户的介绍，作初步的了解，在黑白打印稿上用彩色笔勾画出基本的功能区域，作为填色的依据 1.2.3导图 A，调整文字大小 按照最终文本打印的尺寸将原CAD图黑白打印在A3纸上，首先文字不能太小，，一般字高为2-4mm，其次文字不太大，相 邻两个功能区文字标注不能出现重叠 B，整理层面 根据填色时photoshop文件中各层面内容，一般分为： 1，底一层，包括道路、绿地、建筑轮廓、铺地； 2，建筑一层 3，绿化，包括各树种，各低矮绿化，各分一层； 4，铺地填充分一层； 5，文字标注分一层； 6，尺寸分一层； 7，红线等控制线分一层； 8，现有建筑分一层。 将各线条分配到其应该归属的各层面，例如；在绿化层中画了建筑的线条，则应该将这些线条改到建筑层。 C，导图设置 1，幅面大小，在能看清楚图上各细节的前提下尽量小，例如导出的双线墙两条线不能并在一起，之间至少有两个象素的距离 2，横向与竖向选择 3，笔宽设置，通常让导出的线条都是一个象素，或者根据层面不同设置粗细（墙体一般会加粗到2－3个象素） 4，线条颜色，一般为全黑色，或者选择对象颜色 1.2.4叠图 A, 在Photoshop中打开各eps文件，打开设置；精度选择250dpi或者300dpi，关闭反锯齿选项，选择RGB模式 B, 将打开的各eps文件，拖到一个文件中，根据各层面功能修改其层面名称 C, 存盘 1.2.5填色 1.2.5.1填色层的位置：推荐在底层下建立一个填色层 1.2.5.2底板：先不要做很细的颜色区分，先区分大块颜色，区分大的道路、铺地、绿化、建筑区域、水区域之 间的关系；大区域基本确定后，再细化作进一步的颜色区分。 1.2.5.2.1道路系统：先用深灰色预填，若有颜色超出预期的区域，则需要寻找断线。 1.2.5.2.2绿地区域：先用绿色预填，若有颜色超出预期的区域，则需要寻找断线。 1.2.5.2.3建筑区域：先用很浅的灰色预填，若有颜色超出预期的区域，则需要寻找断线；或者先填其他区 域，填完后，建筑区域自然留白。 1.2.5.2.4铺地：用浅米色整体预填一个颜色，若有颜色超出预期的区域，则需要寻找断线；根据客户需要 可作进一步的细分，细分的颜色可以是与米黄色相近的也可以是不同色系，但颜色要协调。
十个网页设计技巧 做网页设计对一个人的审美观要求非常高，下面是关于十个网页设计技巧，欢迎大家阅读了解！ 学习如何通过选择正确的格式，来优化网页图片，并确保文件大小在可行的范围你是足够小的。虽然现在人们已经都在使用宽带，但仍然有人是拨号上网。此外，虽然移动装置技术的普及，但移动装置却不一定支持像宽频一样的速度，图片文件的大小可能还是会延长网页的加载时间，有可能把用户赶走的。 这里有个选择适合的文件格式的技巧：如果图片是单色，那最好保存成PNG或者GIF格式;如果是连续性的色调(如照片)则最好保存成 JPG格式。 有很多的工具可以帮助你进一步优化你的图片，降低他们的文件大小。可以参考这个工具列表来帮助优化你的图片。尽量把图片数量减到最低，并且灵活使用图片，并且尽可能地减小文件大小。如此一来，将可以大大的减少页面的读取时间和改善网页的性能。 一个好的网页设计不光只是看起来好看而已，还要是用户友好型的。通常来说，一个干净、简单的网页设计最终会成为一个可用性高的网页设计，因为它在与用户的交互中不会使其产生混淆。当页面上有太多的网站功能和组件时，将
会分散网站用户的注意力而失去原本浏览网站的目的。确保每个页面元素都有其目的，然后问自己以下问题： 1)是否真的需要这个设计么? 2)这是什么组件是做什么用，它如何协助用户浏览? 3)如果我突然删除这个组件，大多数人会希望它“回来”吗 ? 4)如何把这些元素和目标、消息和网站的宗旨互相结合?此外，尽管它可能是一个超酷的新概念或界面设计模式，但你还是要确保对你的用户而言该设计仍然是方便和直观的。人们习惯于通用性的交互模式、网站功能、和网络接口，如果你的设计的确很独特，确保它不是太模糊和晦涩。要有创意，但还要保持简单。 一个网站最重要的部分就是整个网站的导航。没有它，无论在哪个页面中，用户都会发生卡在这个页面离不开的状况。有了这明显的实际方向，我们将讨论一些建构网站导航时重要的点。 首先，在网站的导航结构上，投入足够的时间和很多规划是非常重要的。虽然这是常识，但仍然有很多设计师想当然地设计网站导航。 摆放位置、风格、所用技术(javascript或CSS)、可用性和网页易读性，这些是你制作导航设计时需要考虑的。 在没有CSS的状况下，你的导航设计应该也是可用的，
《网页制作与网站设计》课程整体设计策划稿 1. 各位老师大家好： 今天由我给大家进行《网页制作与网站设计》课程的整体设计。 2. 今天我从课程设置、教学内容、教学资源、教学手段与方法、教学改革这五个方面给大家进行汇报。 3． 首先我们看专门课程的“课程设置”情况 承上启下：首先来认识以下本课程的定位： 4. 《网页制作与网站设计》课程是软件技术专业的专业核心课程。 软件技术专业以“培养Web软件开发工程师”为目标，为了达成这种目标软件技术专业开设的有“计算机信息基础”、“程序设计基础”、“数据库技术”等专业基础课程。 在专业课程中，《网页制作与网站设计》不仅能为“。net开发工程师”和“Java开发工程师”作为重要的技术支撑，也能够作为独立的一个就业放向。 承上启下：下面我们来看一下《网页制作与网站设计》课程的教学目标。 5． 使学生具备网站策划、效果图设计与制作、网站后期编辑、HTML代码编写等方面的技能，提高学生的团队协作能力、沟通能力、分析解决问题能力和项目实施能力，注重学生在学习和实践过程中职业素质的养成。 用一句话说：使学生能够“独立开发网站”。 课程的特点是：感性、直观，容易培养学生的学习积极性。承上启下：那么课程设计的思路是什么呢？。 6． 课程的设计理念“以培养网站开发相关岗位的职业能力为核心” 围绕这个设计思路，我们主要从以下四个方面体现： 第一、基于工学结合的人才培养模式
第二、基于工作过程系统化的课程开发 第三、基于真实项目载体的教学内容 第四、基于能力本为的技能训练 最终实现了“以学生为主体、以教师为主导”的教学过程，充分培养了学生的自信心、自主性、自学能力。 承上启下：下面我们一起来看一下本课程的教学内容： 7. 8. 首先大家来看本课程的“设计思路”。 首先进行“企业岗位需求调研”（包括企业岗位调研、毕业生回访、网络招聘等）然后进行“职业能力分析” 第三步进行“学习者分析” 第四步形成“以培养职业能力为核心的教学目标” 第五步确定“工作任务导向确定学习情境”的教学内容 第六步多种模式\工学结合培养学生，培养过程 第七步“持续关注学生在企业的发展，定期回访学生” 第八步以企业标准更新学习情境 整个设计过程针对性强、适用性强、可拓展性强 整个课程设计的思路课程的实践性、开放性和职业性得到充分体现 课程的内容的选取标准与原则 9 坚持理论以必须、够用为度的教学内容选择标准 选取原则： 1）根据企业发展需要、职业岗位实际工作任务所需要的知识、能力、素质要求来确定教学内容； 2）反复强化在实践过程中常用的知识和技能 10 学习者分析 第一、适合文科、理科、艺术类学生学习 第二、普遍以形象思维为主 第三、对本课程的兴趣比较浓厚 第四、大多数学生有笔记本
Dreamweaver网页制作技巧心得体会 熟悉网页设计的网友就知道，调用Style的方法很多，我们可以单击鼠标右键选择Custon Style来调用Style标准，也可以在状态栏中的元素列表上单击右键来调用Style。虽然不同的方法达到的效果看似一样，但实际上产生的HTML 代码则完全不同。比如用Custon Style来调用Style标准，在网页代码中就生成一个〈span〉标签，这样的标签一多就会使文件十分臃肿而且影响浏览器的解析速度，所以我们应尽量使用状态栏中的元素列表来调用Style。 一、活用Format Table命令 在复杂的网页设计中，表格的应用是最多的，因为利用表格可以自由地控制文本和图象在网页上出现的具体位置，从而使整个网页看上去紧凑统一。Dreamweaver在这方面也不甘落后，我们可以使用其中的“Format Table”(格式化表格)命令来快速地对表格应用预先设计好的样式。要使用预先设计好的样式，先将光标置于表格的任意一个单元格内，再选择“Command”→“Format Table”命令，在随后出现的对话框中，从左边的列表中选择一个设计方案。按“Apply”键来查看效果，如果不满意的话，还可以重新设置或者修改部分参数的值，如边界粗细，背景颜色等等。 二、同时链接到两个网页
我们都知道超级链接一次只能连到一个页面。如果我们要想一次在不同的框架页中打开文档，可以使用“Go To URL”JavaScript 行为。打开一个有框架的网页，选择文字或图象，然后从行为面板中选择“Go To URL”。我们会注意到Dreamweaver会在“Go To URL”对话框中显示所有可用的框架。选择其中一个我们想链接的框架并输入相应的URL后再选择另一个框架并输入另一个URL。 三、不给文件起中文名称 大家在制作好了网页后，通常会给网页起一个具有代表性的中文名称，一来能使人一看文件名就能大概了解文件所包含的内容，二来能够方便各个超级链接之间的相互调用。但如果你在Dreamweaver中这样做，就会发现Dreamweaver 对中文文件名支持得不是太好，经常会有页面调用不正确的现象发生，所以我们以后在Dreamweaver中保存网页的时候，尽量用英文或者数字作为文件名称，这样就可以避免上面的出错现象。 四、巧妙设置字体分辨率 我们在制作网页的时候，经常有这种体会，那就是制作好的网页在本地计算机上浏览时很正常，但在另外一台计算机上浏览时发现原本漂亮的网页变得歪歪扭扭了，这是为什么呢?原来各个计算机的分辨率要使你的主页在不同的分辨率下都能正常显示，在Dreamweaver中得到了较好的解决。在文档窗口的右下角，Dreamweaver 显示当前文档被设计成的分辨率大小。单击哪个数字，在弹出式
实习报告 实习性质：网页设计课程实习 学生姓名：杨顺 专业班级：网络141平面方向 指导教师：邵亮、杨雪平 实习时间：2015年11月2日- 2015年11月6日实习地点：1211机房 重庆工程职业技术学院
信息工程学院网页设计课程实习 学生实习考核表
目录 1实习目的 (2) 2 实习概况 (2) 2.1 实习要求 (2) 2.2 实习时间 (2) 2.3 实习环境 (2) 2.4 开发环境 (2) 3 实习内容 (3) 3.1制作设计项目分析..................................... 错误！未定义书签。 3.2制作设计项目记录 (3) 3.3整个学期的四次作业 (9) 4.实习总结 (16)
1实习目的 《网页设计与制作》项目实习是教学中的一个重要教学环节，是学生学习过程中不可缺少的实际操作技能训练，也是对课程学习效果的检验。通过本课程设计的实习，进一步提高学生对网页设计以及ps软件的操作能力，学生在这实训期间应对课程设计抱以负责的态度，认真做好设计与制作，拓展想象空间，努力创作出富有个性的设计作品。 2 实习概况 2.1 实习要求 1.利用Photoshop提供的各种工具，在学习网页制作技术过程中设计出符 合要求的布局，掌握通道和蒙版的应用、色彩和色调的调整。 2.利用Axure RP 软件画出大致的草图，进行网页的布局，排版。 3.软件准备：Photoshop、Axure RP。 2.2 实习时间 2015年11月2日至2015年11月6日 2.3 实习环境 重庆工程职业技术学院1211机房 2.4 开发环境 1.操作系统(Windows7) 2.Photoshop、Axure RP绘图工具
信息商务学院 网页制作技巧与实战 大作业 题目：关于HTML5的网页设计与实现 院(系)别建筑工程系 专业工程造价 班级 ZB造价161 学号 201611032128 姓名王非 指导教师董智勇 2016年11月27日
目录 关于HTML5的网页设计与实现 一、引言及什么是html (5) 二、网页制作 (7) （一）、制作步骤 (6) 页面的制作，首先在根据客户的要求下，完成首页的制作，在经客户确定后，再制作其他的页面，制作完成后，交给客户验收，然后发给客户确定，待所有的页面的都经客户确定后，完成网页的制作进程，交给程序员添加程序。 (7) （二）、网页布局 (7) （三）、常用工具介绍 (8) 三、HTML5的改进特性 (9) （一）HTML5新元素 (9) （二）异常处理 (10) 四、结束语 (11)
摘要 随着Internet的诞生和发展，许多人不再仅仅局限于网上冲浪，而是参与到网站建设中。企业建站相当于在网上建立一个家，你就可以在这里向客户介绍你的企业，展示你的实力，推销你的产品，网页制作作为网站制作中一个重要的环节，相对于传统的平面设计而言，网页设计具有更多的新颖性，更多可以表现的手法。结合本人的实习过程，现就网站建设与管理过程中，网页设计与制作的具体经历，包括：网页设计与制作过程中的网页布局、色彩构置，框架结构等相关事项做以下论述。 关键词:HTML5;网页制作;HBuilder
一、引言 随着互联网的不断发展，互联网对人们的生活也在不断地发展和加强，人们渐渐开始习惯于互联网带来的各类服务和应用，便利和丰富。随着互联网的基础用户和开发者不断增多，人们不断地去创造和完善它的速度也越来越快，无论从技术层面还是商业层面，新的模式和方法层出不穷，整个行业新陈代谢不断加速，新的应用和新的公司不断地挑战着新的技术和新的模式。毕竟整个互联网是一个开放的环境，大家需要一种标准，所以HTML5这种更加新的标准和技术体系在不断地革新中发展壮大。 HTML5成为不断被提及的热门话题，不少人预言HTML5的发展将给移动互联网产业带来革命性的深刻变化。HTML5是几十年来Web标准最巨大的飞跃。和以前的版本不同，HTML5并非仅仅用来表示Web 内容，它的使命是将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像和动画，以及同电脑的交互都被标准化。尽管HTML5还有很长的路要走，但HTML5正在改变Web。另外，目前的互联网不仅仅是传统意义上面的互联网，所有的传统应用和模式正在向着更加移动和便捷发展，人们可以通过手机和平板电脑等各类移动设备来获取信息和使用更加丰富的应用。 什么是HTML5？ HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。 HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
1、网页设计的尺寸标准 面向1024-768显示器分辨率开发的网页尺寸，宽910px 面向800-600显示器分辨率开发的网页尺寸，宽778px 2、网页设计中的画布设定 尤其注意分辨率为 72像素/英寸 3、设计中的网页字体问题 中文字体 尤其注意“设置消除锯齿的方法”选项要选择“无” 宋体是最常用的网页字体，12px是中文操作系统可以表现的最小的字体，内容文字大小一般用两种，12px或14px （现在的新的vista据说能表现10px的中文字，但现在使用并不多，） 英文字体 其中英文字体最小表现为10px 字 verdana 字体是大多数网页使用的英文字体，比起arial 字体更美观和均衡。 效果图 网页效果图中的网页字体，虽然在最后制作网页的过程中不需要裁剪。但做为设计中不可分割的重要元素，一定要认真使用，因为你不单要设计文字与整体网页的关系，还要设计字体的样式表颜色， 3、网页色彩 1、页面主色调 ·网页都应该有特定的2-3种主色调，辅助色调不适宜太多。 2、文字的色彩 ·文字的颜色要便于阅读 ·文字的超链接要明确(下划线、变色) ·背景颜色切勿与文字反差太小且杂乱。 4、关于网页布局 基本的两种 居中对齐居左对齐 避免不同寻常的令人眼花缭乱的设计、密密麻麻的内容，特别要注意的是整齐，和透气。
这个设计就是太过密集，不透气，也不整齐，阅读性比较差 太过靠近边线，也给人拥挤的感觉。 5、设计从哪里入手 A 先定下你的网页布局形式 B 然后定页面宽度，拉出辅助线。 C 再把基本的文字内容输入进来，要用的图片素材拷贝到指定的目录来。 D 确定需要表现的文字主题，和使用的图片，发挥自己的能力，完成设计头部（这个是重点） E 设计文本区域的头部 F 布局剩下的内容，调整和头部的关系。 G 设置文字样式，行距，调整细节。 6、设计的可制作性 不要做天马行空的设计，在做网页设计的时候，脑子里一定要时刻想着，你做的这个设计是不是可以在网页中表现出来，会不会有表现上的差错，是不是给制作带来了麻烦。 例如这个作品是不是在给制作增加难度，并且对于修改图片中的文字，提出了苛刻的要求。 7、photoshop使用习惯 1、PSD文件按区域把图层打包放文件夹中并对图层文件夹命名, （这个比较重要，养成了这个习惯，不单方便你以后的修改，并且也可以使你的同事能快速的接替你的工作。） 2、去掉没有用的隐藏层，合并可以相关图层。 （减轻计算机的负担，加快制作速度） 3、所有网页文字放在最上面的文件夹里。 （网页文字就是需要制作成网页字的文字，）
网页设计师必须掌握的7项技能 网页设计既是一门科学也是一门艺术。网页设计工作一半基于正确的编程和设计技巧，另一半则基于是否对美与不美有着直觉般的敏锐度。一名称职的网页设计师一定要熟练掌握核心基础能力才能在同行中做到出类拔萃。 那么，应该如何培养自己的基础能力呢？一口是吃不成胖子的。诚然，经验的作用是无可替代的，但是优秀的教育，不论是正规教育还是非正规教育，也能带来巨大的帮助。同时，还强烈建议大家不断挑战自己，走出自己的舒适区，迎战新的领域。而这就是区别不断苦苦找客户，与客户主动找上门的关键所在。 下面是作为优秀的网页设计师所必需掌握并且能够帮助他们达到超群水平的一些必要基础能力。这些基础能力不一定都是技术和计算机技巧层面的。 1. 熟悉整体设计流程 注意“整体”这个词。网页设计有时会与图形设计重叠，所以说不同种类的设计学校有时候是非常相似的。这也就是为什么作为一名以自己作品为骄傲的网页设计师也需要多少学一些通用的基本设计流程知识。这一点包含了下列几项原则： 颜色
颜色是网页设计的核心，其有助于设计主题和主旨的构建。另外，其还具有心理层面的作用，也就是说颜色能够影响网站访客看待网站用户体验的方式。 走向 走向是指网站访客在体验网站时的视觉移动方向。走向涉及到对深度、颜色、层级、形状和线条的恰当使用。走向具包括视角、间距和面朝方向等。 平衡与比例 这一点是指视觉的稳定性与均衡性。比例可以分为两种：对称与不对称。比例通常用来强调重要元素，进而完善信息的走向。 间距 间距这一点非常简单明了。它是指不同元素之间的距离。网站要有优秀的用户体验就必须具有妥当的间距安排。一般来说，间距的大小应该要保证不同的元素具有足够的呼吸空间，同时又不能太大以免影响阅读。关键就是如何权衡。 2. 对HTML倒背如流
网页设计是一个很关键的部分，网页设计的好坏直接影响整体的网站效果。网页设计环节是整个成功的开端。老站长结合自己的亲身体验，总结如下和大家分享交流： 一、什么是好的网页设计，网页设计原则理念 （1）内容和功能决定表现形式和界面设计 常常有人凭借电话的几句交流或者qq上的几句聊天，甚至是一张句话的小纸条，就开始做一个网站设计。站长认为这都是敷衍了事的通用设计，很不专业不成熟的设计。做一个良好的网页设计，你需要了解客户的东西很多，比如： 1、建站目的（是主推产品还是平品牌，是主要注重seo还是用户交互等） 2、网站类型 3、栏目规划及每个栏目的表现形式及功能要求 4、主色调、客户性别喜好、联系方式、旧版网址、偏好网址 5、根据行业和客户要求，哪些是着重表现 6、是否分期建设、考虑后期的兼容性、是否要开发其他语言版本 7、客户是否有强烈的建站欲望 8、你是否能在精神意识上控制住客户 9、面对你未接触的技术知识，你有底吗？ 等等... 当把上述的内容都弄明白了的时候，你的大脑中就已经给这个网站有了全面而形象的定位了，这时才是有的放矢去做界面设计的时候了。 （2）界面是弱化的，突出的是功能 一个好的界面设计它的界面是弱化的，它突出的是功能，着重体现的是网站业提供给使用者是主要什么。这就涉及到浏览顺序、功能分区等等。 要让访客在0.5秒内就能把握网站的行业性质，1秒内就知道该从哪个地方开始使用这个网站，能点一次的，绝不点第二次。当然上面说的是大多数功能性网站，对于宣传展示性网站，诸如加特效的或flash网站，可能就不得不花哨一些，但不能太过分。网站不是动画片，在效率越来越高，社会心理越来越浮躁的中国，人们的耐心越来越小，心理承受能力越来越低。效果可以体现意境，点到为止。 （3）模块化和可修改性强 模块化不仅可以提高重用性，也能统一网站风格，还可以降低程序开发的强度。这里就设计一些尺寸、模数、宽容度、命名规范等等知识了，不再冗述。 无论是架构还是模块或图片，都要考虑可修改性强。举个简单的例子，logo、按钮等，很多人喜欢制作图片，n个按钮就是n张图片。如果只做3-5类按钮的背景图片，然后用在网页代码里打上文字，那么修改起来就简单了，让程序员自己改字就可以了。然而网页显示的字体是带有锯齿的，一般即能清晰又保证美观的字体字号有几类： 宋体12px |宋体12px粗体|宋体14px |宋体14px粗体|黑体20px | verdana 9px | arial black 12px+ | （4）创意是可耻的，分析能力远比创意来的重要 设计界动辄就大谈什么“创意”，需要指出的是，还没有搞清目的意义和内容，还没在技术制作上臻于完善的基础上，用创艺和特效来迷惑客户和访客是可耻的。一个网站设计者的分析能力远比创艺来的重要。
网页设计中文字排版的10点技巧 在网页设计中，文字排版对于网站和用户之间建立良好的沟通以及帮助用户实现目标起着重要的作用。当我们谈论网页是否能和用户建立有效的沟通的时候，通常是指文字排版在这里起到的作用： “网页中95％以上的信息是以文字形式呈现的。” 良好的排版使用户更易于阅读，而混乱的排版则使用户失去继续浏览的意愿。正如“Oliver ReichensReichenstein在他的文章“Web Design is 95% Typography ”中写道：“排版的目的是优化可读性，访问率，可用性，保持和图形的平衡关系” 换言之，优化排版也在帮助您优化界面。本文中，我们提供一组规则，将帮助您提高文本内容的可读性和易读性。
1.不要使用过多的字体 网站排版中建议最多不要超过3种字体类型，不然会使网站看起来松散和不专业，不仅太多的字体类型会造成这种问题，太多的字体尺寸也会破坏网页布局。 通常情况下，将字体家族的数量限制在最小数量（2个是很多，1个通常就够了），整个网站坚持使用相同的原则。如果使用多个字体，请确保俩个字体是否和谐。以下面的字体组合为例，Georgia和Verdana的搭配相得益彰，相对比较和谐。相比于右边Baskerville和Impact则会有明显的冲突感，非衬线Impact明显的超过了Baskerville的视觉冲击力。
而在中英文排版中，建议大家中文使用标准中文字体，而英文、数字和字符使用标准的英文字体。以下面的图为例，是否可以对比处那个美观一些。 2.尽量使用标准字体 在Google Web Font或者Typekit，和国内的“有字库”的字体嵌入式服务有很多有趣的字体，对于国内设计师来说，痛苦的是中文字体会很大，一个字体动 则几兆，十几兆的，这样用户在会增加用户浏览网站的载入时间；反之英文字体26个字母大小写，加数字标点符号一共几百k的字体是很容易在网页中使用的。 尽可能选择标准字体（近几年网页中通常使用思源黑体，PingFang，英文可以使用Arial，Calibri或者其他常见的易于屏幕阅读的黑体字，如没有特殊概念指导尽可能避免使用衬线字体，如宋体） 不是每位用户都可以在终端上看到同一个字体，意味着你选择的适合的字体，用户有可能看不到。 用户更熟悉标准字体，因此他们可以更快的阅读 特殊的、并且少量的字体可以制作成.svg格式的素材嵌入Web使用 良好的排版会使用户更加关注内容本身，而不是字体的类型。 3.限制一行文字的长度 保证每一行文字的字符数量是文本可读的关键。不是设计师来定义文本的宽度，而是根据用户的可读性来定义。 太宽-会使得单行文字太长，读者的眼睛会难于专注文字。因为长时间阅读容易串行，大段的文本中很难找到正确的行。
网站页面设计中需注意什么细节 如今，网站建设成为现代企业平常运营中所必备的一个条件，网建中，网站页面设计是很重要的一项工作。如在网站建设中，如何把页面的设计做好进而能帮网站来做优化，又或者说更加受到用户的欢迎网站页面设计时，需注意什么问题简单做一下分析。 一、需要关注一下文字 当设计网站页面时，需确保网站内的文字是要很清晰、一目了然的，同时，还需确保一下内容不存在语法上的错误。虽然这些都是一些小细节，页面设计中，这都是很重要的。还需要做好文字布局和设计的，这会对网站设计的效果有着非常重要的影响。 二、网站导航
导航设计方面，尤其在页面建设中，这可是很重要的一项内容，网站导航的设计是需要非常合理的。每个网站都需有导航元素。导航设计中，都需注意什么问题最重要的保证是每个链接都需有效，甚至还需要能打开。导航的作用就在于帮用户能迅速找到所需的内容，导航设计时，也需多加注意的。 三、结合用户习惯 网站页面设计时，不能把用户习惯给忽略掉，由于网站是会面向目标用户，某个类型的用户。一般用户都会有自己的习惯，因此，网建时，需重视用户的习惯，注意一下用户对什么方面的内容会更加的重视。 四、站内的搜索功能进行设计 搜索功能在网建中，有着很重要的作用，对用户体验的提高有巨大帮助，特别是大网站。但许多企业在建网站时，不太重视，因此，一些企业网站就没搜索功能，也不会有很好的用户体验。在做网站页面设计时，对其内部的搜索功能做设计，最好能考虑全面一些，才能设计出让企业满意的功能来。 以上几个方面都是站长在进行网站页面设计时，需要注意的一些小细节，毕竟这几个小细节的存在，能够帮助企业更好来解决一些网站方面的问题。
浅析使用Dream weaver 进行网页设计的技 巧 随着计算机技术及网络通信技术的飞速发展，各种大小不等、功能各异的网站迅速崛起，势如破竹，而作为网站的基本组成部分网页，发挥着核心作用。因此在进行网页设计时，必须使用较为先进的网页制作软件，并掌握设计技巧。只有如此，才能保证网页的质量。 一、网页设计与Dream weaver 概述 网页设计是随着计算机技术与网络通信技术的发展而兴起的新兴产业。企业通过网站将自身的规模、产品、文化、经营理念以及其他信息发布在网上，使人才以及合作伙伴等能从整体上对企业有初步的认识，从而促使双方之间达成合作。而在一个完整的网站中，网页是其基本组成单位。在网页的设计过程中，Dream weaver 又扮演着重要角色。Dream weaver ，全称为Adobe Dream weaver ，是由MACROMEDIA 公司生产的用于网页制作的软件。其经过一系列革新，目前最新的版本是Dream weaver CC 2017。 二、使用Dream weaver 进行网页设计的技巧 1、使用层进行页面布局的技巧 层，也就是AP DIV 元素。与表格相比，使用AP DIV 元素进行页面布局的优势在于它包含了文本、图像或其他任何可以在HTML文档正文中放入的内容，而且它还能实现精确定位于网页中任何地方的功能。插入AP DIV 元素的方法为：点击布局，再点击AP DIV元素的图标，
然后在网页设计窗口进行拖动。在AP DIV 元素比较多时，彼此之间的位置关系就显得比较重要。决定AP DIV 元素位置关系的是属性中Z 轴，值越大的AP DIV 元素越在最上层。 2、使用CSS 进行页面布局的技巧 使用CSS 进行页面布局时，应该注意ID 仅能应用于一个HTML 元素，也就是说只能用一次。如果使用ID 选择器，那么必须在选择器名称之前加上#号，例如之前的ID 为one，那么使用选择器的话则应该是#one。在使用时，在页面下方将ID 改为one。假如要在另一个段落也使用这种格式，则新建一个相同的ID 类型即可，但名称不相同。 3、使用快捷键进行页面设计的技巧 熟练使用快捷键进行操作，可以有效的提高工作效率。使用Dream weaver 进行网页设计时，有时可能会出现误操作，这时可以使用快捷键Ctrl+Z 进行撤销操作，如果撤销操作过多时，可以使用Ctrl+Y 重做操作。为避免出现突发情况时造成损失，建议每完成一部分，可以使用快捷键Ctrl+S 随时进行保存。 三、使用Dream weaver 进行网页设计的一些建议 1、文件命名切忌使用中文 由于受到母语先入为主以及固有的思维习惯的影响，很多人在对文件进行命名时，习惯性的使用中文进行命名。而且由于一个网站中有很多页面，每一个页面都需要命名，只有如此才能实现各页面之间的链接及链接之间的修改。很多人为了更好的对每个页面的内容进行区分，就会使用中文进行命名。但在使用Dream weaver 进行网页设计时，
网页制作- 企业开展电子商务的基础设施和信息平台 《网页制作》教材 网页制作是网站策划师、网络程序员、网页设计师等岗位，应用各种网络程序开发技术和网页设计技术，为企事业单位、公司或个人在全球互联网上建设站点，并包含域名注册和主机托管等服务的总称。其作用为展现公司形象，加强客户服务，完善网络业务。网页制作是企业开展电子商务的基础设施和信息平台，是INTERNET上宣传和反映企业形象和文化的重要窗口。新竞争力也认为注重网站的网络营销价值而不是外在表现。网页制作是指使用标识语言，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，浏览。 目录 1基本信息 2网页设计 3网页制作流程 4网页制作基础 5基本简史 6外观影响 7设计模式 8发展趋势 9常用工具 10相关信息
1基本信息 2网页设计 3网页制作流程 3.1引策划 3.2前台 3.3后台 4网页制作基础 5基本简史 5.1HTML 5.2XHTML 6外观影响 7设计模式 8发展趋势 9常用工具 10相关信息 10.1网页制作具体流程：10.2网页制作的基础 10.3网站制作的基础入门10.4网站测试对比 10.5网页制作用到的语言10.6网页制作颜色模式10.7两种网页制作设计模式
1基本信息 网站是企业向用户和网民提供信息(包括产品和服务)的一种方式,网页制作是企业开展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站）去谈电子商务是不可能的。企业的网址被称为“网络商标”，也是企业无形资产的组成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口。网页制作是指使用标识语言（markup language)，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，最终以图形用户界面（GUI）的形式被用户所浏览。 网页制作要能充分吸引访问者的注意力，让访问者产生视觉上的愉悦感。因此在网页创作的时候就必须将网站的整体设计与网页设计的相关原理紧密结合起来。网站设计是将策划案中的内容、网站的主题模式，以及结合自己的认识通过艺术的手法表现出来；网页制作通常就是将网页设计师所设计出来的设计稿，按照W3C规范用html语言将其制作成网页格式。 2网页设计 网页设计[1]是指使用标识语言（markup language)，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，最终以图形用户界面（GUI）的形式被用户所浏览。 简单来说，网页设计的目的就是产生网站，什么是网站呢，就是服务器内的一系列网页的组合，终端用户发出请求后[[服务器通过传输特定的网页向用户传输所需的信息。简单的信息如文字，图片（GIFs，JPEGs，PNGs）和表格，都可以通过使用HTML/XHTML/XML放置到网站页面上。而更复杂的信息如vector graphics,动画，视频，声频则需要插件程序例如Flash, QuickTime, Java run-time environment,等等，这些插件程序也是通过HTML/XHTML/XML植入网页的。 随着浏览器和W3C标准一致性的改善，XHTML/XML（可扩展标识语言）与CSS（层叠样式表）共同用作网页内容的设计已经被广泛的接受和使用。最新的标准和建议则是朝着浏览器的能力扩充和改善发展，使之能够不需要插件程序也能够给用户传输多媒体信息和更多的选择。 3网页制作流程 网页设计[1]是一个综合性极强的工作，涉及到商业策划、平面设计、人机界面、程序语言和数据库等。 网页设计总体上分为策划、前台和后台三部分。一般都是由三种不同专业的人合作完成的，一个人独立完成的网站一般很难做到各方面都很专业。因此，网站设计一般由团队完成。