webstorm编写CSS/html怎么插入图片？

lyy_Oo 2015-07-12 10:31:21

刚刚接触webstorm，编写html <img src="">的时候软件会有提示，但是只能选择到文件夹，不能插入具体图片文件;
编写css也一样，background：url会自动补全括号和双引号，但是没有图片的文件选择，尝试输入文件路径也不对;
菜单栏上也没有发现相关的插入图片的指令……
希望得到解答！

...全文

10982 7 打赏收藏转发到动态举报

写回复

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

InsomniaSpectre 2019-01-10

打赏
举报

回复

webstorm中html里面可以在左侧文件夹中拖入需要图片的位置，前提是你的素材图片要放在你建的Project目录里，感觉这个还算方便；但是在css里拖动就只是预览图片了，也想同问大神怎么在css里快速添加图片路径.......最后实在不行就只有自己写相对路径了，这个没得说事🙄

baidu_39513734 2017-07-14

打赏
举报

回复

把图片放到css文件夹下的一个子文件夹，就可以了。

KK3K2005 2015-07-13

打赏
举报

回复

引用 2 楼 lyy_Oo 的回复:

[quote=引用 1 楼 yangkuo0314 的回复:] 路径设置不对。把图片放到同级目录的文件夹中

那就是只能输入路径来添加图片了吗？好麻烦0.0 有没有比较便捷的方式呢？[/quote] 换工作呗后面比这个麻烦的多了去了

lyy_Oo 2015-07-12

打赏
举报

回复

引用 1 楼 yangkuo0314 的回复:

路径设置不对。把图片放到同级目录的文件夹中

那就是只能输入路径来添加图片了吗？好麻烦0.0 有没有比较便捷的方式呢？

卧薪尝胆的鱼 2015-07-12

打赏
举报

回复

路径设置不对。把图片放到同级目录的文件夹中

卧薪尝胆的鱼 2015-07-12

打赏
举报

回复

引用 2楼lyy_Oo 的回复:

[quote=引用 1 楼 yangkuo0314 的回复:] 路径设置不对。把图片放到同级目录的文件夹中

那就是只能输入路径来添加图片了吗？好麻烦0.0 有没有比较便捷的方式呢？[/quote]可以把图片直接放入同文件夹，直接调用文件名称

JPF1024 2015-07-12

打赏
举报

回复

这个。。。好像Dreamweav有这个功能,webstorm没有这个功能的，只能填路径。只要文件名别太长就可以了啊.

HTML5期末考核大作业源码包含个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog

HTML5期末考核大作业源码包含个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog

HTML5期末考核大作业源码包含个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、 Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。【查看更多源码地址】：https://blog.csdn.net/VX_WJ88950106?type=blog

HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业源码包含个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! ### 知识点总结 #### 一、项目概述该项目主要针对HTML静态网页设计作业，其特点是使用了DIV+CSS布局技术，适用于多种场景，包括但不限于个人网站、美食、公司介绍、学校宣传、旅游推广、电商平台等。尤其强调的是宠物主题的网页设计，通过丰富的色彩和布局展示了该主题的独特魅力。此项目旨在帮助学生完成学期末的大作业，涵盖了从基本的HTML到较为复杂的JavaScript应用。 #### 二、项目特点 - **HTML/CSS/JS技术栈**：项目完全基于HTML5、CSS3和JavaScript开发，这些技术是当前Web前端开发的基础。 - **DIV+CSS布局**：采用了流行的DIV+CSS布局方式，使得页面更加灵活、易于维护。 - **多页面结构**：项目由多个页面组成，包括首页和其他二级页面，实现了页面间的相互链接。 - **响应式设计**：虽然没有明确提到响应式设计，但考虑到现代网页的标准，可以推测此项目可能已经考虑到了不同设备的适配问题。 - **多媒体元素集成**：包含了视频、音频等多媒体元素，增强了用户体验。 - **JavaScript特效**：使用了JavaScript来实现动态效果，比如图片轮播等，提升了页面的互动性。 #### 三、技术细节 - **网页布局**：使用浮动布局结构，兼容性好，适应各种主流浏览器。 - **编程语言**：采用了HTML5、CSS3和JavaScript，这些都是现代网页开发的必备技能。 - **素材处理**：使用了Photoshop等工具对图片进行了处理，确保网页中的图像质量高、尺寸合适。 - **文件管理**：项目文件组织清晰，包括HTML、CSS、JavaScript以及图片文件等，便于管理和维护。 #### 四、实践技能 - **HTML编辑器的使用**：介绍了多种HTML编辑器，如Dreamweaver、HBuilder、Vscode等，这些工具可以帮助学生更高效地编写和调试代码。 - **网页结构设计**：通过index.html作为首页，其他HTML文件作为二级页面，形成了合理的网站结构。 - **CSS样式控制**：使用CSS文件来控制整个网站的样式，如字体大小、颜色、布局等，保持了风格的一致性。 - **JavaScript功能实现**：通过JavaScript实现了动态效果，如图片轮播、表单验证等，提高了网站的交互性和功能性。 #### 五、项目应用 - **个人展示**：可以用来构建个人博客或简历网站，展示自己的作品和技术能力。 - **企业宣传**：适合用于创建小型企业的官方网站，展示产品和服务。 - **教育用途**：作为教学资源，帮助学生理解和实践HTML/CSS/JS的基本概念和技术。 - **创意展示**：可用于创建具有创意的网页设计，如节日庆祝、摄影展示等。 #### 六、扩展学习除了项目本身提供的知识外，还可以进一步学习以下内容： - **响应式设计**：了解如何使网站在不同设备上都能良好显示。 - **前端框架**：学习如React、Vue.js等现代前端框架，提高开发效率。 - **Web性能优化**：掌握如何优化网页加载速度，提升用户体验。 - **SEO优化**：了解搜索引擎优化的基本原则，帮助网站获得更好的搜索排名。通过以上知识点的总结，我们可以看到该项目不仅提供了一个实际操作的机会，还涉及了Web前端开发的多个方面，对于初学者来说是一次非常宝贵的学习经历。

HTML静态网页设计作业，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力,顶部导航及底部区域背景色为100%宽度。都是给学生定制的都符合学校或者学生考试期末作业的水平,有的有js，有的视频+音乐+flash的等元素的插入。原生(HTML+CSS+JS),网页作品代码简单,可使用任意HTML编辑软件（如：`Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++` 等任意html编辑软件进行运行及修改编辑等操作） HTML5期末考核大作业源码包含个人、美食、公司、学校、旅游、电商、宠物、电器、茶叶、家居、酒店、舞蹈、动漫、服装、体育、化妆品、物流、环保、书籍、婚纱、游戏、节日、戒烟、电影、摄影、文化、家乡、鲜花、礼品、汽车、其他可满足大学生网页大作业网页设计作业需求, 喜欢的可以下载! 【查看更多源码地址】：https://blog.csdn.net/bigwhiteshark?type=blog

61,126

社区成员

60,707

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章